:root{
  --bg:#16110d;
  --bg2:#1f1812;
  --panel:#241c15;
  --panel2:#2c231a;
  --line:#3a2f23;
  --ink:#f4ece1;
  --muted:#a8957f;
  --gold:#e0a338;
  --gold-lt:#f0bd5b;
  --gold-dim:#7a5a1f;
  --red:#c8362f;
  --red-dim:#5a1c18;
  --ok:#3a8f5a;
  --radius:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
/* Kitchen app — fresh green accent to set it apart from the gold front-of-house app */
body[data-app="kitchen"]{
  --gold:#5aa84f;
  --gold-lt:#74c267;
  --gold-dim:#2f6a2a;
}
body[data-app="kitchen"] .btn--primary{color:#0c1f0b}
body[data-app="kitchen"] .brand__mark{color:#0c1f0b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;flex-direction:column;min-height:100dvh;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer}

/* App bar */
.appbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-top) + 12px) 16px 12px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__mark{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:20px;color:#1a1209;
  background:linear-gradient(145deg,var(--gold-lt),var(--gold));
  box-shadow:0 2px 10px rgba(224,163,56,.35);
}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__txt strong{font-size:18px;letter-spacing:.2px}
.brand__txt small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.iconbtn{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:16px;flex:none;
}
.iconbtn:active{background:var(--panel2)}

/* Week bar */
.weekbar{
  display:flex;align-items:stretch;gap:8px;padding:10px 12px;
  position:sticky;top:calc(var(--safe-top) + 62px);z-index:15;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.weekbar__nav{
  width:46px;flex:none;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:12px;font-size:24px;line-height:1;
}
.weekbar__nav:active{background:var(--panel2)}
.weekbar__label{
  flex:1;position:relative;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:6px;
}
.weekbar__label strong{font-size:15px}
.weekbar__label small{color:var(--muted);font-size:11px}
.weekbar__label input[type=date]{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;
}

/* Member bar (add person) */
.memberbar{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--bg);
}
.addperson{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--panel2);border:1px solid var(--gold-dim);color:var(--gold);
  border-radius:11px;padding:10px 16px;font-size:14px;font-weight:700;
}
.addperson:active{background:#352a1f}
.memberbar__count{color:var(--muted);font-size:13px}

/* Empty state */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:48px 24px;color:var(--muted);
}
.empty-state__art{font-size:46px}
.empty-state h3{margin:6px 0 0;color:var(--ink);font-size:18px}
.empty-state p{margin:0 0 8px;font-size:14px}
.empty-state .btn{flex:0 0 auto;padding:13px 22px}

/* Rota grid */
.rota-wrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 0 4px}
table.rota{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
.rota th,.rota td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.rota thead th{
  position:sticky;top:0;z-index:8;background:var(--bg2);
  padding:8px 6px;font-size:12px;font-weight:600;color:var(--muted);
  text-align:center;min-width:78px;
}
.rota thead th small{display:block;font-size:10px;color:var(--gold);font-weight:600}
.rota thead th.today{color:var(--ink)}
.rota thead th.today small{color:var(--gold)}

.col-name{
  position:sticky;left:0;z-index:9;background:var(--bg2);
  min-width:104px;max-width:104px;text-align:left !important;
  padding:8px 10px !important;
}
.rota tbody th.col-name{
  z-index:7;font-weight:600;font-size:13px;color:var(--ink);
  vertical-align:middle;position:relative;padding-right:24px !important;
}
.rota tbody th.col-name .nm{display:block;font-size:13.5px;font-weight:700}
.rota tbody th.col-name .wk{display:block;font-size:10px;color:var(--muted);font-weight:500}
.rota tbody th.col-name .rm{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;border:0;
  background:#3a2f23;color:var(--muted);font-size:11px;line-height:1;
  display:grid;place-items:center;padding:0;
}
.rota tbody th.col-name .rm:active{background:var(--red);color:#fff}
.rota thead th.col-name{z-index:10}

.cell{
  text-align:center;padding:0;height:54px;background:var(--panel);
  position:relative;
}
.cell button{
  all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;gap:2px;padding:4px;
}
.cell .t{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.cell .h{font-size:10px;color:var(--muted)}
.cell.empty .t{color:#5e4f3e;font-weight:500}
.cell.toilet{background:var(--red-dim)}
.cell.toilet .t{color:#ffd9d4}
.cell.toilet::after{content:"🧻";position:absolute;top:3px;right:4px;font-size:10px;opacity:.9}
.cell:active{filter:brightness(1.25)}
.rota tbody tr:nth-child(even) .cell{background:#211a13}
.rota tbody tr:nth-child(even) .cell.toilet{background:var(--red-dim)}

/* Totals — hours per person at the bottom */
.totals:empty{display:none}
.totals{padding:12px 16px 4px;border-top:1px solid var(--line);background:var(--bg)}
.totals__head{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px;
}
.totals__grand{color:var(--gold);font-size:13px;font-weight:700}
.totals__chips{display:flex;flex-wrap:wrap;gap:7px}
.tot{
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:6px 11px;font-size:12.5px;color:var(--muted);white-space:nowrap;
}
.tot b{color:var(--ink);font-weight:700}

.legend{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);
}
.legend__dot{width:13px;height:13px;border-radius:4px;display:inline-block}
.legend__dot--toilet{background:var(--red)}
.legend__sep{width:1px;height:13px;background:var(--line)}

/* Footer actions */
.actions{
  display:flex;gap:10px;padding:12px 16px calc(var(--safe-bot) + 14px);
  background:linear-gradient(0deg,var(--bg2),var(--bg));
  border-top:1px solid var(--line);
}
.btn{
  flex:1;border-radius:13px;padding:14px 14px;font-size:15px;font-weight:700;
  border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn--primary{background:linear-gradient(145deg,var(--gold-lt),var(--gold));color:#1a1209}
.btn--primary:active{filter:brightness(.94)}
.btn--ghost{background:var(--panel);border-color:var(--line);color:var(--ink);flex:0 0 auto;padding:14px 16px}
.btn--ghost:active{background:var(--panel2)}
.btn[disabled]{opacity:.5}

/* Sheets */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.sheet__panel{
  position:relative;width:100%;background:var(--panel);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line);
  padding:8px 18px calc(var(--safe-bot) + 20px);
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  animation:slideup .22s ease;
  max-height:90dvh;overflow:auto;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet__grip{width:42px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet__head h2{margin:0;font-size:19px}
.sheet__head .iconbtn{width:34px;height:34px;font-size:14px}

.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;
}
.chip:active{background:#352a1f}
.chip.sel{background:var(--gold);border-color:var(--gold);color:#1a1209}

.timerow{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px}
.timefield{flex:1;display:flex;flex-direction:column;gap:6px}
.timefield span{font-size:12px;color:var(--muted);font-weight:600}
.timefield input{
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px;font-size:17px;width:100%;
  font-family:inherit;text-align:center;
}
.timerow__dash{color:var(--muted);padding-bottom:14px;font-size:18px}

.toilet-toggle{
  width:100%;display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:14px;padding:14px;font-size:15px;font-weight:600;margin-bottom:18px;
}
.toilet-toggle__icon{font-size:20px}
.toilet-toggle span:nth-child(2){flex:1;text-align:left}
.switch{width:48px;height:28px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.switch__knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.toilet-toggle[aria-pressed="true"]{background:var(--red-dim);border-color:var(--red)}
.toilet-toggle[aria-pressed="true"] .switch{background:var(--red)}
.toilet-toggle[aria-pressed="true"] .switch__knob{transform:translateX(20px)}

.sheet__actions{display:flex;gap:10px}

/* Pick list (add person dropdown) */
.picklist{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:48dvh;overflow:auto}
.pickitem{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg2);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;font-size:16px;font-weight:600;color:var(--ink);
}
.pickitem:active{background:var(--panel2);border-color:var(--gold-dim)}
.pickitem__plus{color:var(--gold);font-size:20px;font-weight:700}
.pickempty{color:var(--muted);font-size:14px;text-align:center;padding:22px 8px;line-height:1.5}

/* Staff manage */
.hint{color:var(--muted);font-size:13px;margin:0 0 14px}
.stafflist{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.staffitem{
  display:flex;align-items:center;gap:10px;background:var(--bg2);
  border:1px solid var(--line);border-radius:13px;padding:10px 12px;
}
.staffitem.off{opacity:.5}
.staffitem__name{flex:1;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--ink);font-family:inherit;padding:4px 0}
.staffitem__name:focus{outline:none;border-bottom:1px solid var(--gold)}
.staffitem .switch{cursor:pointer}
.staffitem.on .switch{background:var(--ok)}
.staffitem.on .switch__knob{transform:translateX(20px)}
.staffitem__del{background:none;border:0;color:var(--muted);font-size:18px;padding:4px 6px}
.staffitem__del:active{color:var(--red)}

.addrow{display:flex;gap:10px}
.addrow input{
  flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px;font-size:15px;font-family:inherit;
}
.addrow input:focus{outline:none;border-color:var(--gold)}
.addrow .btn{flex:0 0 auto;padding:13px 20px}

.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-bot) + 90px);transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  padding:11px 18px;border-radius:999px;font-size:14px;z-index:60;
  box-shadow:0 6px 24px rgba(0,0,0,.5);animation:pop .2s ease;
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}