/* Roster builder — Edition 02 (spec 2026-10-05 roster-builder-ed02-overhaul §4). The same kit and panel as the
   Hub and the Deliveries dashboard; fonts + stamps are hashed files (immutable, _headers). The onboarding page
   keeps styles/roster.css. */
@font-face { font-family: "Staatliches"; font-style: normal; font-weight: 400; src: url("../fonts/staatliches.d1c82fa6.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; src: url("../fonts/instrument-sans-400.a0d63608.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; src: url("../fonts/instrument-sans-500.7f1dc3bb.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; src: url("../fonts/instrument-sans-600.c7508499.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; src: url("../fonts/instrument-serif-italic.c05dead0.ttf") format("truetype"); font-display: swap; }
:root {
  --an: #5B0202; --cm: #F2F0E7; --card: #FBFAF6; --gh: #CB8E16; --ca: #2C243C; --pi: #787C59;
  --pi-ink: #5C6044; --gh-ink: #7A5300; --ink-60: rgba(44, 36, 60, 0.72); --ink-12: rgba(44, 36, 60, 0.12);
  --an-tint: rgba(91, 2, 2, 0.1); --gh-tint: rgba(203, 142, 22, 0.16); --pi-tint: rgba(120, 124, 89, 0.16);
  --hair: rgba(203, 142, 22, 0.35); --hair-strong: rgba(203, 142, 22, 0.45); --line-ctl: rgba(44, 36, 60, 0.58);
  --grid-line: rgba(44, 36, 60, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Staatliches", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tb-h, 64px) + 14px); }
[hidden] { display: none !important; }
body { font-family: var(--body); background: var(--cm); color: var(--ca); min-height: 100dvh; line-height: 1.45; }
:focus-visible { outline: 2px solid var(--an); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 80; background: var(--an); color: var(--cm); padding: 10px 14px; border: 0; border-radius: 8px; font: 600 14px/1 var(--body); cursor: pointer; }
.skip:focus { top: 8px; }
.ic { flex: none; display: block; }

/* ---------- shell (as the Hub) ---------- */
.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app-col { min-width: 0; display: flex; flex-direction: column; }
.app-content { width: 100%; padding: 18px 22px 60px; }
.app-content:focus { outline: none; }
.pn { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; background: var(--ca); color: var(--cm); font-size: 14px; z-index: 30; }
.pn::after { content: ""; position: absolute; top: 0; bottom: 0; right: 7px; width: 4px; border-left: 1px solid rgba(242, 240, 231, 0.18); border-right: 1px solid rgba(242, 240, 231, 0.18); pointer-events: none; }
.pn-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 20px 20px 14px 12px; }
.pn-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 16px; margin: 0 0 4px; border-bottom: 1px solid var(--hair); color: var(--cm); text-decoration: none; }
.pn-stamp img { display: block; width: 44px; height: 44px; }
.pn-word b { display: block; font: 400 22px/1 var(--display); letter-spacing: 0.08em; }
.pn-word small { display: block; font: italic 400 15px/1.2 var(--serif); color: rgba(242, 240, 231, 0.75); margin-top: 3px; }
.pn-group { font: 400 12px/1 var(--display); letter-spacing: 0.22em; color: rgba(242, 240, 231, 0.6); padding: 14px 10px 6px; }
.pn-groups { flex: 1 1 auto; min-height: 88px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -20px 0 -12px; padding: 0 20px 4px 12px; }
.pn-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pn-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: rgba(242, 240, 231, 0.86); font: 500 14px/1.25 var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.pn-label { flex: 1; min-width: 0; }
.pn-short { display: none; }
.pn-item[aria-current] { background: rgba(91, 2, 2, 0.55); color: var(--cm); font-weight: 600; }
.pn-item[aria-current]::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 5px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, var(--an) 0 1.5px, var(--cm) 1.5px 2.5px, var(--an) 2.5px); }
@media (hover: hover) and (pointer: fine) { .pn-item:hover { background: rgba(242, 240, 231, 0.08); color: var(--cm); } .pn-item[aria-current]:hover { background: rgba(91, 2, 2, 0.62); } }
.pn :focus-visible { outline: 2px solid var(--gh); outline-offset: 2px; }
.pn-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 2px; flex: none; }
.pn-item.pn-toggle { display: none; }
.pn-scrim { display: none; }
.tb { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 10px 22px; background: var(--cm); border-bottom: 1px solid var(--hair-strong); }
.tb-title { min-width: 0; font: 400 28px/1.05 var(--display); letter-spacing: 0.06em; color: var(--an); }
.tb-week { display: flex; align-items: center; gap: 8px; }
.tb-week select { min-height: 40px; max-width: 300px; padding: 0 10px; border: 1px solid var(--line-ctl); border-radius: 8px; background: var(--card); color: var(--ca); font: 500 14px/1 var(--body); }
.wk-chip { font: 600 12px/1 var(--body); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.wk-chip.is-current { background: var(--pi-tint); color: var(--pi-ink); }
.wk-chip.is-next { background: var(--gh-tint); color: var(--gh-ink); }
.wk-chip.is-upcoming { border: 1px solid var(--line-ctl); color: var(--ca); }
.wk-chip.is-lapsed { background: var(--ink-12); color: var(--ink-60); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.save-state { flex-basis: 100%; order: 10; font-size: 12.5px; color: var(--ink-60); min-height: 1em; margin-top: -4px; }
.save-state.is-bad { color: var(--an); font-weight: 600; }
.tb-menu { display: none; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-ctl); border-radius: 8px; background: var(--card); color: var(--ca); font: 600 14px/1 var(--body); cursor: pointer; }
.btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font: 600 14px/1 var(--body); cursor: pointer; text-decoration: none; }
.btn.p { background: var(--an); color: var(--cm); }
.btn.s { background: var(--card); border-color: var(--line-ctl); color: var(--ca); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.banner { margin: 10px 22px 0; padding: 10px 14px; border-radius: 10px; background: var(--gh-tint); color: var(--gh-ink); font-weight: 500; }
.loading { padding: 40px; text-align: center; color: var(--ink-60); }
@media (min-width: 768px) and (max-width: 1199px) { .pn-item { min-height: 44px; } }
/* the rail: on tablets by default, anywhere ≥ 768 px once collapsed with the button */
@media (min-width: 768px) {
  .pn-item.pn-toggle { display: flex; }
  html.pn-rail .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
  html.pn-rail .pn-scroll { padding: 16px 12px 12px 8px; }
  html.pn-rail .pn::after { right: 5px; }
  html.pn-rail .pn-groups { margin: 0 -12px 0 -8px; padding: 0 12px 4px 8px; }
  html.pn-rail .pn-brand { justify-content: center; padding: 0 0 12px; }
  html.pn-rail .pn-stamp img { width: 36px; height: 36px; }
  html.pn-rail .pn-word, html.pn-rail .pn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  html.pn-rail .pn-group { height: 1px; padding: 0; margin: 8px 6px; overflow: hidden; color: transparent; background: rgba(242, 240, 231, 0.18); }
  html.pn-rail .pn-item { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 0; min-height: 52px; text-align: center; }
  html.pn-rail .pn-short { display: block; max-width: 100%; font: 500 10.5px/1.15 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.pn-rail .pn-item[aria-current]::before { left: -8px; }
}
@media (max-width: 767px) {
  .app-shell { display: block; }
  .pn { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: 100vh; height: 100dvh; z-index: 40; transform: translateX(-100%); visibility: hidden; }
  html.pn-open { overflow: hidden; }
  html.pn-open .pn { transform: none; visibility: visible; }
  html.pn-open .pn-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(44, 36, 60, 0.45); }
  .pn-item { min-height: 44px; }
  .tb { padding: 10px 14px; gap: 8px; }
  .tb-menu { display: inline-flex; }
  .tb-title { font-size: 22px; flex: 1; }
  .tb-week { order: 5; width: 100%; }
  .tb-week select { flex: 1; max-width: none; min-height: 44px; }
  .tb-actions { order: 6; width: 100%; margin-left: 0; }
  .tb-actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .app-content { padding: 12px 10px 60px; }
  .banner { margin: 10px 10px 0; }
}
@media (pointer: coarse) { .pn-item, .btn { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) {
  .pn { transition: transform 160ms var(--ease), visibility 0s linear 160ms; }
  html.pn-open .pn { transition: transform 160ms var(--ease), visibility 0s; }
}

/* ---------- the roster document ---------- */
.doc { max-width: 1240px; margin: 0 auto; background: var(--card); border: 1px solid rgba(203, 142, 22, 0.28); border-radius: 10px; padding: 18px 20px 20px; }
.d-head { margin-bottom: 12px; }
.d-title { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong); }
.d-stamp { width: 56px; height: 56px; flex: none; }
.d-store { font: 400 30px/1 var(--display); letter-spacing: 0.06em; color: var(--an); text-transform: uppercase; }
.d-range { font: 400 15px/1.2 var(--display); letter-spacing: 0.14em; color: var(--ca); margin-top: 4px; text-transform: uppercase; }
.d-lapsed { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--ink-12); color: var(--ca); font-size: 13px; }
.d-instr { margin: 10px 0 8px; font: italic 400 16px/1.35 var(--serif); color: var(--ink-60); }
.d-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.d-key b { font: 400 12px/1 var(--display); letter-spacing: 0.18em; color: var(--ca); margin-right: 4px; text-transform: uppercase; }
.chip { border: 1px solid var(--hair-strong); border-radius: 999px; padding: 2px 10px; background: var(--cm); font-weight: 500; }
.chip-add { width: 26px; height: 26px; border: 1px dashed var(--line-ctl); border-radius: 999px; background: none; color: var(--ca); cursor: pointer; }
.d-fmt { font-size: 12.5px; color: var(--gh-ink); background: var(--gh-tint); border-radius: 8px; padding: 6px 10px; }
[contenteditable]:empty::before { content: attr(data-ph); color: var(--ink-60); }
[contenteditable] { border-radius: 4px; }
[contenteditable]:hover { box-shadow: inset 0 0 0 1px var(--hair); }
.d-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--grid-line); border-radius: 8px; }
.grid { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.col-name { width: 190px; } .col-wk { width: 74px; }
.grid th, .grid td { border: 1px solid var(--grid-line); padding: 4px 5px; vertical-align: middle; text-align: center; }
.grid th[scope="row"] { text-align: left; }
.r-days th { background: var(--ca); color: var(--cm); font: 400 13px/1.1 var(--display); letter-spacing: 0.1em; padding: 7px 4px; }
.r-hours th, .r-hours td { background: var(--cm); font-size: 12px; }
.r-hours th, .r-total th, .r-cov th, .r-sec th { font: 400 12.5px/1.1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.hours { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 36px; padding: 4px 2px; border: 0; border-radius: 6px; background: none; color: var(--ca); font: 500 12px/1.2 var(--body); cursor: pointer; }
.h-val { white-space: nowrap; }
.h-label { font: 600 10.5px/1.1 var(--body); color: var(--an); }
.h-week { font: 600 10px/1 var(--body); color: var(--gh-ink); background: var(--gh-tint); border-radius: 999px; padding: 2px 6px; }
.c-name { background: var(--tint, transparent); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.s-name { font-weight: 600; }
/* Manager / Supervisor (store standard): a chip after the name; click the name (edit) to change it. Groups are
   split by a heavier rule — managers, then supervisors, then staff. */
button.s-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
.s-lvl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.lvl-manager { background: var(--an); color: var(--cm); }
.lvl-supervisor { background: var(--gh-tint); color: var(--gh-ink); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.grid tr.r-group > * { border-top: 2px solid var(--ca); }
.pk-opt[aria-pressed="true"] { border-color: var(--ca); background: var(--card); font-weight: 600; }
.pk-opt[aria-pressed="true"]::after { content: " ✓"; }
.s-role { display: block; font-size: 11.5px; color: var(--ink-60); min-height: 1.2em; }
.s-off { float: right; width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--ink-60); cursor: pointer; font-size: 15px; line-height: 1; }
.c-shift { padding: 3px; }
.shift { position: relative; width: 100%; min-height: 34px; padding: 4px 3px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ca); font: 500 12.5px/1.2 var(--body); cursor: pointer; }
.sv-empty { color: rgba(44, 36, 60, 0.4); font-weight: 400; }
.is-off .shift, .is-off .sv { color: var(--an); font-weight: 600; letter-spacing: 0.04em; }
.is-off { background: var(--an-tint); }
.is-conflict .shift { border-color: var(--gh); background: var(--gh-tint); }
.cf { position: absolute; top: 2px; right: 3px; font: 700 10px/1 var(--body); color: var(--gh-ink); }
.av { display: block; margin-top: 2px; font: 600 9.5px/1.1 var(--body); letter-spacing: 0.02em; color: var(--ink-60); }
.av-all { color: var(--pi-ink); } .av-na { color: var(--an); } .av-none { color: rgba(44, 36, 60, 0.45); }
.c-wk { font-weight: 600; font-variant-numeric: tabular-nums; }
.r-total td, .r-total th, .r-cov td, .r-cov th { background: var(--cm); font-variant-numeric: tabular-nums; font-weight: 600; }
.r-sec th { background: var(--ca); color: var(--cm); text-align: left !important; padding: 7px 8px; }
.r-sec td { background: var(--ca); }
.row-add { border: 1px solid rgba(242, 240, 231, 0.5); border-radius: 6px; background: none; color: var(--cm); font: 600 11px/1 var(--body); padding: 5px 6px; cursor: pointer; white-space: nowrap; }
.c-label { font-weight: 600; font-size: 12.5px; }
.r-x { float: right; width: 20px; height: 20px; border: 0; background: none; color: var(--ink-60); cursor: pointer; }
.c-assign { padding: 3px; }
.pills { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--c); color: #fff; font: 600 11px/1.3 var(--body); }
.pill-x { border: 0; background: none; color: inherit; font: 700 12px/1 var(--body); cursor: pointer; padding: 0 0 0 2px; }
.assign-add { width: 100%; min-height: 24px; margin-top: 2px; border: 1px dashed transparent; border-radius: 6px; background: none; color: rgba(44, 36, 60, 0.35); font: 600 14px/1 var(--body); cursor: pointer; }
.r-empty td { padding: 22px; color: var(--ink-60); }
.d-notes { margin-top: 14px; }
.d-notes h3 { font: 400 13px/1 var(--display); letter-spacing: 0.16em; color: var(--ca); margin-bottom: 6px; text-transform: uppercase; }
.d-notes-in { width: 100%; padding: 8px 10px; border: 1px solid var(--line-ctl); border-radius: 8px; background: #fff; font: 400 14px/1.4 var(--body); color: var(--ca); resize: vertical; }
.d-notes-text { white-space: pre-wrap; } .d-notes-text.is-empty { color: var(--ink-60); }
.d-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-strong); font: 600 10.5px/1.45 var(--body); letter-spacing: 0.04em; color: var(--ink-60); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .shift:hover, .hours:hover { border-color: var(--hair-strong); background: var(--cm); }
  .assign-add:hover { border-color: var(--hair-strong); color: var(--ca); }
  .s-off:hover, .r-x:hover { color: var(--an); background: var(--an-tint); }
  button.s-name:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
}
/* the clean document (print + Slack image): no controls; the capture frame sits off-screen at a fixed width */
.doc-clean .grid { min-width: 0; }
.doc-clean, .doc-view { border-radius: 0; }
.publish-frame { position: fixed; left: -20000px; top: 0; width: 1500px; }
.publish-frame .doc { max-width: none; }

/* ---------- the shared picker ---------- */
.picker { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--hair-strong); border-radius: 10px; padding: 10px 12px 12px; color: var(--ca); }
.picker.is-wide { width: 420px; }
.picker.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; border-radius: 14px 14px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.pk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pk-head b { flex: 1; font: 400 15px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.pk-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 20px; color: var(--ink-60); cursor: pointer; }
.pk-form { display: flex; gap: 8px; }
.pk-input, .pk-hours input, .pk-table input { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-ctl); border-radius: 8px; background: #fff; font: 400 15px/1 var(--body); color: var(--ca); width: 100%; }
.pk-hint { margin: 8px 0; font-size: 12.5px; color: var(--ink-60); }
.pk-quick, .pk-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.pk-list { margin-top: 8px; }
.pk-opt { min-height: 38px; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--cm); color: var(--ca); font: 500 13.5px/1.2 var(--body); text-align: left; cursor: pointer; }
.pk-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-hours label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.pk-hours .pk-wide, .pk-hours .pk-row, .pk-hours .pk-hint { grid-column: 1 / -1; }
.pk-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pk-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.pk-table th, .pk-table td { padding: 3px 4px; font-size: 12.5px; text-align: left; }
@media (hover: hover) and (pointer: fine) { .pk-opt:hover { border-color: var(--ca); } }

/* the staff names stay in view while the grid scrolls sideways (phones, tablets) */
.grid tbody th[scope="row"], .grid thead th[scope="row"], .r-days th:first-child { position: sticky; left: 0; z-index: 1; }
.c-label { background: var(--card); }
.r-days th:first-child { background: var(--ca); }
.doc-clean .grid th { position: static; }