:root{
  /* Official Pure Desi palette */
  --chai:#F2F0E7; --white:#FFFFFF; --cardamom:#2C243C; --cherry:#BD2025;
  --motichoor:#CE6228; --pistachio:#787C59; --saffron:#832A23; --rosewater:#E7D0CE;
  --ink-soft:#5b5468;
  --line:#ddd6c4; --line-strong:#b9b29a;
  /* Brand typography with web fallbacks */
  --display:"Staatliches","Oswald","Arial Narrow",sans-serif;
  --serif:"Instrument Serif",Georgia,Cambria,serif;
  --sans:"Instrument Sans",Inter,Calibri,system-ui,sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--sans); color:var(--cardamom); background:var(--chai); }

/* ---- toolbar ---- */
.toolbar{ position:sticky; top:0; z-index:5; display:flex; gap:.85rem; align-items:center;
  padding:.55rem 1rem; background:var(--white); border-bottom:3px solid var(--cardamom);
  flex-wrap:wrap; box-shadow:0 1px 6px rgba(44,36,60,.08); }
.brand-logo{ height:26px; width:auto; display:block; }
.tool-sep{ width:1px; height:24px; background:var(--line-strong); }
.fld{ font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em; display:flex; gap:.4rem; align-items:center; }
.fld select{ font-family:var(--sans); font-size:.9rem; padding:.32rem .5rem; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--cardamom); }
.btn{ font-family:var(--sans); font-weight:500; font-size:.84rem; padding:.42rem .75rem; border:1px solid var(--line-strong);
  border-radius:6px; background:#fff; color:var(--cardamom); cursor:pointer; }
.btn:hover{ background:var(--chai); border-color:var(--pistachio); }
.btn-cherry{ background:var(--cherry); border-color:var(--cherry); color:#fff; font-weight:600; }
.btn-cherry:hover{ background:#a31b20; border-color:#a31b20; }
.save-status{ margin-left:auto; font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); font-style:italic; min-width:8ch; }
.demo-banner{ background:#fbeee9; border-bottom:1px solid var(--rosewater); color:var(--saffron); font-family:var(--sans);
  font-weight:500; font-size:.8rem; padding:.4rem 1rem; text-align:center; }

main{ padding:1.2rem; display:flex; justify-content:center; }
#roster{ width:100%; max-width:1160px; background:var(--white); border:1px solid var(--line-strong);
  box-shadow:0 2px 16px rgba(44,36,60,.08); padding:1.1rem 1.3rem 1.5rem; }

/* ---- header block ---- */
.r-titlebar{ display:flex; align-items:center; gap:1rem; }
.r-logo{ height:52px; width:auto; }
.r-store{ font-family:var(--display); font-size:2rem; letter-spacing:.04em; color:var(--saffron); line-height:1; }
.r-sub{ font-family:var(--display); font-size:1.1rem; letter-spacing:.06em; color:var(--cardamom);
  margin-top:.45rem; border-bottom:2px solid var(--motichoor); padding-bottom:.5rem; }
.r-instructions{ font-family:var(--serif); font-size:.92rem; font-style:italic; color:var(--ink-soft); margin:.6rem 0; line-height:1.4; }
.r-rolekey{ font-family:var(--sans); font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:.35rem; display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.r-rolekey strong{ color:var(--cardamom); letter-spacing:.09em; }
.chip{ background:var(--chai); border:1px solid var(--line-strong); border-radius:999px; padding:.12rem .6rem; color:var(--cardamom); }
.r-shiftfmt{ font-family:var(--sans); font-size:.72rem; color:var(--saffron); background:#faf1ee;
  border:1px dashed var(--pistachio); border-radius:6px; padding:.38rem .65rem; margin-bottom:.85rem; }

/* ---- grid ---- */
.grid{ width:100%; border-collapse:collapse; table-layout:fixed; font-family:var(--sans); font-size:.82rem; }
.grid th,.grid td{ border:1px solid var(--line); padding:.34rem .4rem; vertical-align:middle; }
.dayhdr th{ background:var(--cardamom); color:var(--chai); font-weight:500; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.05em; text-align:center; padding:.45rem .3rem; }
.dayhdr .staff-hdr{ text-align:left; }
.shrow{ background:#f6e9e7; }
.rowlabel{ text-align:left; font-weight:500; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em;
  background:var(--chai); color:var(--cardamom); }
.shrow .rowlabel{ background:#f0ddda; }
.cell{ text-align:center; vertical-align:top; color:var(--cardamom); }
.cell[contenteditable="true"]:focus{ outline:2px solid var(--motichoor); outline-offset:-2px; background:#fff; }
.cell.conflict{ outline:2px solid var(--motichoor); outline-offset:-2px; background:#fcefe4; }
.cell-rich{ padding:.2rem .28rem; }
.shiftval{ display:block; min-height:1.3em; padding:.05rem .1rem; }
.shiftval[contenteditable="true"]:focus{ outline:2px solid var(--motichoor); outline-offset:-1px; background:#fff; border-radius:3px; }
.availtag{ display:block; font-family:var(--sans); font-weight:600; font-size:.56rem; letter-spacing:.02em;
  text-transform:uppercase; border-radius:3px; padding:.05rem .15rem; margin-bottom:.12rem; line-height:1.25; }
.av-all{ background:#e7ecd9; color:#4f5436; }
.av-am{ background:#e3ebef; color:#3f5662; }
.av-pm{ background:#fbe9d8; color:#9a4a1a; }
.av-other{ background:#faf1ee; color:var(--saffron); }
.av-na{ background:#f6dede; color:var(--cherry); }
.av-none{ background:#eeebe2; color:#8a8474; }
.shiftpick{ display:block; width:100%; margin-top:.14rem; font-family:var(--sans); font-size:.6rem;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:4px; background:#fff; padding:.06rem .1rem; cursor:pointer; }
.shiftpick:hover{ border-color:var(--pistachio); }
.staff-cell{ text-align:left; position:relative; }
.offboard-btn{ position:absolute; top:1px; right:2px; border:none; background:transparent; color:#c4bdab;
  font-size:.8rem; line-height:1; cursor:pointer; padding:0 3px; border-radius:3px; }
.offboard-btn:hover{ color:#fff; background:var(--cherry); }
.staff-name{ font-weight:600; display:block; color:var(--cardamom); }
.staff-role{ display:block; font-family:var(--sans); font-weight:500; font-size:.66rem; color:var(--saffron);
  text-transform:uppercase; letter-spacing:.04em; min-height:1em; }
.staff-role:empty::before{ content:attr(data-ph); color:#a89f93; }
.wk,.wk-hdr{ text-align:center; font-weight:600; background:var(--chai); width:9%; }
.wk-hdr{ color:var(--chai); background:var(--cardamom); text-transform:uppercase; font-weight:500; font-size:.7rem; letter-spacing:.04em; }
.totalrow th,.totalrow .grand{ background:var(--saffron); color:var(--chai); font-weight:600; }
.totalrow th{ font-family:var(--display); letter-spacing:.05em; }
.totalrow .grand{ text-align:center; font-size:1rem; }
.totalrow .spacer{ background:#f0ddda; }
.covrow td.cov{ text-align:center; font-weight:600; color:var(--pistachio); }
.secbar th{ background:var(--cardamom); color:var(--chai); text-align:left; font-family:var(--display);
  letter-spacing:.1em; font-size:.92rem; padding:.4rem .65rem; border-left:4px solid var(--motichoor); }
.assign .rowlabel{ font-size:.7rem; }
.assign .cell{ font-size:.74rem; }

/* store-hours cell internals */
.sh{ text-align:center; position:relative; }
.sh-val{ font-size:.76rem; }
.sh-val[contenteditable="true"]:focus{ outline:2px solid var(--motichoor); outline-offset:-2px; }
.holiday-tag{ display:block; font-family:var(--sans); font-size:.58rem; font-weight:600; letter-spacing:.03em;
  color:#fff; background:var(--cherry); border-radius:3px; padding:.04rem .2rem; margin-bottom:.12rem; }
.holiday-tag.is-empty{ display:none; }
.add-holiday{ position:absolute; top:1px; right:2px; border:none; background:transparent; color:var(--motichoor);
  cursor:pointer; font-size:.85rem; line-height:1; padding:0 2px; opacity:.55; }
.add-holiday:hover{ opacity:1; }

/* notes + footer */
.notes-block{ margin-top:1rem; }
.block-title{ font-family:var(--sans); font-weight:500; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.3rem; }
.notes-area{ width:100%; font-family:var(--serif); font-size:.92rem; border:1px solid var(--line-strong);
  border-radius:6px; padding:.5rem .65rem; resize:vertical; background:#fffdf9; color:var(--cardamom); }
.footer-note{ margin-top:.9rem; font-family:var(--sans); font-size:.64rem; line-height:1.45; color:var(--ink-soft);
  border-top:1px solid var(--line-strong); padding-top:.5rem; letter-spacing:.02em; }

/* ---- staff colour dots ---- */
.staff-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; flex-shrink:0; }
.staff-cell{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0; }
.staff-cell .staff-name{ display:inline; }
.staff-cell .staff-role{ width:100%; }

/* ---- assigned pills in roles/responsibilities ---- */
.assign-cell{ vertical-align:top; padding:.2rem .25rem; }
.assign-pills{ display:flex; flex-wrap:wrap; gap:3px; min-height:1.1em; }
.assigned-pill{ display:inline-flex; align-items:center; gap:2px; color:#fff; font-family:var(--sans); font-size:.62rem;
  font-weight:600; letter-spacing:.02em; border-radius:4px; padding:.12rem .35rem .12rem .4rem; line-height:1.2; white-space:nowrap; }
.pill-remove{ border:none; background:transparent; color:rgba(255,255,255,.7); font-size:.7rem; cursor:pointer;
  padding:0 1px; line-height:1; margin-left:1px; }
.pill-remove:hover{ color:#fff; }

/* ---- staff assignment picker ---- */
.staff-assign{ display:block; width:100%; margin-top:3px; font-family:var(--sans); font-size:.58rem;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:4px; background:#fff; padding:.05rem .08rem; cursor:pointer; }
.staff-assign:hover{ border-color:var(--pistachio); }

/* ---- add/remove row buttons ---- */
.add-row-btn{ font-family:var(--sans); font-size:.62rem; font-weight:600; border:1px dashed var(--pistachio);
  background:transparent; color:var(--pistachio); border-radius:4px; padding:.18rem .5rem; cursor:pointer; letter-spacing:.03em; }
.add-row-btn:hover{ background:var(--chai); border-style:solid; }
.remove-row-btn{ border:none; background:transparent; color:#c4bdab; font-size:.72rem; cursor:pointer;
  padding:0 3px; margin-left:4px; line-height:1; vertical-align:middle; }
.remove-row-btn:hover{ color:var(--cherry); }

/* ---- editable role/responsibility labels ---- */
.editable-label{ display:inline; min-width:3em; }
.editable-label:focus{ outline:2px solid var(--motichoor); outline-offset:-1px; background:#fff; border-radius:2px; }
.secbar th{ position:relative; }
.secbar .add-row-btn{ float:right; }