/* schedule.css - the Schedule module's own styles (app/schedule.js). The rest
   is the console's kit: system.css tokens, staff.html's .fchip, .btn, .scrim,
   .sheet, label and input. Every class is .sch- prefixed (the console owns
   short names like .ok, .err, .warn, .off), and every colour is a token, so
   light, dark and every skin work without a rule here. */

.sch{display:flex;flex-direction:column;gap:12px;min-width:0}
.sch.sch-busy{opacity:.65;transition:opacity .15s ease}
.sch-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sch-sp{flex:1 1 auto}

/* ------------------------------------------------------------- header row */
.sch-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0}
.sch-h{font:600 18px/1.2 var(--display);margin:0 6px 0 0;color:var(--ink)}
.sch-weeknav{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* hit targets (DESIGN.md): 34px on desktop, 44px on a phone (below) */
.sch-top .btn,.sch-top .fchip{min-height:34px}
.sch-weeknav .fchip{min-width:34px}
.sch-week{font:500 13px/1.2 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sch-pill{font:600 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border-radius:4px;padding:4px 7px;border:1px solid var(--line);color:var(--ink3);background:var(--surface)}
.sch-pill.sch-st-draft,.sch-pill.sch-st-pend{color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 45%, var(--line));background:color-mix(in srgb, var(--warn) 10%, var(--surface))}
.sch-pill.sch-st-pub{color:var(--good);
  border-color:color-mix(in srgb, var(--good) 45%, var(--line));background:color-mix(in srgb, var(--good) 10%, var(--surface))}
/* the changes check failed: neutral, neither "all sent" nor "pending" */
.sch-pill.sch-st-unk{color:var(--ink2);border-style:dashed;border-color:var(--line2)}

/* the Time off chip: an accent tint while requests wait (quiet when there are
   only recent decisions), an accent edge while its panel is open */
.sch-top .fchip.sch-reqchip-wait{color:var(--ink);border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, var(--surface))}
.sch-top .fchip.sch-reqchip-wait:hover,
.sch-top .fchip.sch-reqchip[aria-expanded="true"]{border-color:var(--accent)}
.sch-top .fchip.sch-reqchip[aria-expanded="true"]{color:var(--ink);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.sch-top .fchip.sch-reqchip-wait[aria-expanded="true"]{background:color-mix(in srgb, var(--accent) 18%, var(--surface))}
/* the Festivals chip: an accent edge while its panel is open, like Time off */
.sch-top .fchip.sch-festchip[aria-expanded="true"]{color:var(--ink);border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface))}

/* the person picker: a quiet select, with the active chip's accent tint while
   it narrows the page to one person */
.sch-pick{min-height:34px;max-width:100%;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r);
  background-color:var(--surface);color:var(--ink2);font:inherit;font-size:13px;cursor:pointer}
.sch-pick:hover{border-color:var(--ink3)}
.sch-pick.on{color:var(--ink);border-color:var(--accent);background-color:color-mix(in srgb, var(--accent) 12%, var(--surface))}
.sch-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------- time-off requests panel */
.sch-req{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.sch-req-head{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.sch-kick{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0;flex:1 1 auto}
.sch-req-note{font:500 11.5px/1.3 var(--mono);color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sch-req-none{margin:0;font-size:13px;line-height:1.45;color:var(--ink2)}
.sch-req-list,.sch-req-done{list-style:none;margin:0;padding:0}
.sch-req-row{display:flex;align-items:center;gap:8px 14px;padding:10px 0;border-top:1px solid var(--line)}
.sch-req-row:first-child{border-top:0;padding-top:4px}
.sch-req-main{flex:1 1 auto;min-width:0}
.sch-req-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.sch-req-who{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.sch-req-dates{font:500 12.5px/1.35 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.sch-req-len{font:500 11px/1.35 var(--mono);color:var(--ink3)}
.sch-req-meta{font-size:12.5px;line-height:1.45;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere}
.sch-req-clash{font-size:12.5px;line-height:1.45;color:var(--clay);font-weight:500;margin-top:2px}
.sch-req-clear{font-size:12px;line-height:1.45;color:var(--ink3);margin-top:2px}
.sch-req-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sch-req-acts .btn{min-height:34px}
.sch-req-own{font-size:12px;line-height:1.4;color:var(--ink3);max-width:24ch;text-align:right}
.sch-req-sub{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  margin:10px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.sch-req-done li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;padding:3px 0;font-size:12.5px;line-height:1.45;color:var(--ink3)}
.sch-req-dn{color:var(--ink2);font-variant-numeric:tabular-nums}
.sch-req-dn b{font-weight:600}
.sch-req-yes{color:var(--good)}
.sch-req-no{color:var(--clay)}
.sch-req-dnote{color:var(--ink2);overflow-wrap:anywhere}
/* Withdraw: a danger action (clay text), at the row's far end */
.sch-req-done li.sch-req-wdrow{align-items:center;padding:4px 0}
.sch-req .btn.ghost.sch-req-wd{color:var(--clay);margin-left:auto;min-height:34px}

/* ------------------------------------------------------------- festivals panel */
/* the time-off panel's frame and rows, plus a "New festival" button in the head */
.sch-req-head.sch-fest-head{align-items:center}
.sch-fest-head .btn{min-height:34px;flex:0 0 auto}
.sch-fest-name{outline:none}
.sch-fest-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* opened from a day heading: that festival carries a violet edge */
.sch-req-row.sch-fest-at{box-shadow:inset 3px 0 0 var(--violet);padding-left:10px;margin-left:-10px}
.sch-fest-days{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.sch-fest-days li{font-size:12.5px;line-height:1.45;color:var(--ink2);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sch-fest-days b{font-weight:600;color:var(--ink)}
.sch-fest-days .sch-fest-shortn{font:600 11px/1.3 var(--mono);color:var(--warn);white-space:nowrap}
.sch-req .btn.ghost.sch-fest-rm{color:var(--clay)}

/* ------------------------------------------------------------- festival crew in the grid */
/* away from the store: a dashed violet outline, never the area colours */
.sch-shift.sch-offsite{border:1px dashed color-mix(in srgb, var(--violet) 60%, var(--line));
  border-left:3px solid var(--violet);background:color-mix(in srgb, var(--violet) 5%, var(--surface))}
.sch-shift.sch-offsite:hover{border-color:var(--violet);background:color-mix(in srgb, var(--violet) 10%, var(--surface))}
.sch-shift.sch-offsite .sch-sa{color:var(--ink2);font-weight:500}
/* a day heading's festival: name and crew, warn hue while short */
.sch-festtag{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;width:100%;min-height:34px;margin-top:5px;padding:4px 6px;
  text-align:left;cursor:pointer;font:inherit;font-size:11px;font-weight:500;line-height:1.3;color:var(--ink2);border-radius:4px;
  background:color-mix(in srgb, var(--violet) 8%, var(--surface));border:1px dashed color-mix(in srgb, var(--violet) 50%, var(--line))}
.sch-festtag-n{overflow-wrap:anywhere}
.sch-festtag i{font:600 10.5px/1.3 var(--mono);font-style:normal;color:var(--violet);white-space:nowrap;font-variant-numeric:tabular-nums}
.sch-festtag.sch-festtag-short{border-color:color-mix(in srgb, var(--warn) 60%, var(--line));background:color-mix(in srgb, var(--warn) 8%, var(--surface))}
.sch-festtag.sch-festtag-short i{color:var(--warn)}
.sch-festtag:hover{border-color:var(--violet);color:var(--ink)}
.sch-festtag:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* the Helpers group under the team: a quiet heading row, no + in their cells */
table.sch-grid tr.sch-grouprow th{background:var(--surface2);padding:5px 8px;border-right:0}
.sch-group{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.sch-group-note{font-size:11.5px;font-weight:400;color:var(--ink3);margin-left:6px}
.sch-cell.sch-cell-helper{min-height:34px}
.sch-sw.sch-sw-off{background:color-mix(in srgb, var(--violet) 8%, var(--surface));border:1px dashed var(--violet);border-left:3px solid var(--violet);box-sizing:border-box}

/* ------------------------------------------------------------- area colours */
.sch-a-accent{--sch-area:var(--accent)}
.sch-a-good{--sch-area:var(--good)}
.sch-a-warn{--sch-area:var(--warn)}
.sch-a-violet{--sch-area:var(--violet)}
.sch-a-sky{--sch-area:var(--sky)}
.sch-a-clay{--sch-area:var(--clay)}

/* ------------------------------------------------------------- the grid */
.sch-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  -webkit-overflow-scrolling:touch}
table.sch-grid{border-collapse:collapse;width:100%;min-width:980px;table-layout:fixed;font-size:13px}
table.sch-grid th,table.sch-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  vertical-align:top;padding:6px;text-align:left}
table.sch-grid tr > :last-child{border-right:0}
table.sch-grid tbody tr:last-child > *{border-bottom:1px solid var(--line)}
table.sch-grid thead th{background:var(--surface2);font-weight:600;color:var(--ink)}
table.sch-grid thead th.sch-today{box-shadow:inset 0 2px 0 var(--accent)}
table.sch-grid .sch-who{width:170px}
table.sch-grid tbody th.sch-who{background:var(--surface);font-weight:400}

.sch-dh{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.sch-day{font:600 13px/1.2 var(--display);color:var(--ink)}
.sch-date{font:500 11px/1.2 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
.sch-tag{font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sch-hours{font:500 11px/1.35 var(--mono);color:var(--ink2);margin-top:3px}
.sch-hours.sch-closed{color:var(--ink3)}
.sch-hours.sch-late{margin-top:0;color:var(--ink3)}
.sch-ev{display:block;font-size:11px;font-weight:500;line-height:1.3;margin-top:4px;padding:2px 5px;border-radius:4px;
  color:var(--ink2);background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));overflow-wrap:anywhere}
.sch-ev i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink3);white-space:nowrap}
.sch-cov{font:500 11px/1.35 var(--mono);margin-top:5px;color:var(--ink3)}
.sch-cov.sch-cov-ok{color:var(--good)}
.sch-cov.sch-cov-gap{color:var(--clay)}

.sch-name{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.sch-role{font-size:11.5px;color:var(--ink3)}
/* a helper's phone, a link to ring them. Desktop: the overlay makes a 34px
   click target that moves no lines and leaves the focus ring on the number */
.sch-tel{display:inline-block;position:relative;margin-top:2px;font:500 12px/1.3 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.sch-tel::after{content:"";position:absolute;inset:-10px -2px}
.sch-tel:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.sch-tot{font:500 11.5px/1.3 var(--mono);color:var(--ink2);margin-top:4px;font-variant-numeric:tabular-nums}
.sch-tot.sch-over{color:var(--clay);font-weight:600}
.sch-worked{font:500 11px/1.3 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}

.sch-cell{display:flex;flex-direction:column;gap:4px;min-height:54px}
.sch-shift{display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:5px 6px;border-radius:5px;
  border:1px solid var(--line);border-left:3px solid var(--sch-area, var(--accent));
  background:var(--surface);color:var(--ink);font:inherit;min-width:0}
.sch-shift:hover{border-color:var(--sch-area, var(--accent));background:var(--surface2)}
.sch-shift:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sch-shift b{display:block;font:600 12px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.sch-shift span{display:block;font-size:11px;line-height:1.3;color:var(--ink3);overflow-wrap:anywhere}
.sch-shift .sch-sn{color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sch-shift .sch-w{color:var(--clay);font-weight:500}
.sch-off{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;font-size:11px;line-height:1.3;
  color:var(--ink3);padding:8px 6px;min-height:34px;border:1px dashed var(--line2);border-radius:5px;background:transparent;overflow-wrap:anywhere}
.sch-off b{color:var(--ink2);font-weight:600}
.sch-off:hover{border-color:var(--clay);color:var(--ink2)}
.sch-off:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sch-add{width:100%;min-height:34px;border:1px dashed var(--line);border-radius:5px;background:transparent;color:var(--ink3);
  cursor:pointer;font:inherit;font-size:13px;line-height:1;opacity:.55;margin-top:auto}
.sch-add:hover,.sch-add:focus-visible{opacity:1;border-color:var(--accent);color:var(--ink)}
.sch-add:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
td.sch-none{padding:18px 12px;color:var(--ink2);font-size:13px}

table.sch-grid tfoot th,table.sch-grid tfoot td{font:500 11.5px/1.35 var(--mono);color:var(--ink2);background:var(--surface2);
  border-bottom:0;font-variant-numeric:tabular-nums}
table.sch-grid tfoot .sch-zero{color:var(--ink3)}

/* ------------------------------------------------------------- legend and notes */
.sch-legend{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink3)}
.sch-sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--sch-area, var(--accent));margin-right:5px;vertical-align:-1px}
.sch-hidden{font-family:var(--mono);font-size:11.5px}
.sch-hint{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:0;max-width:80ch}
.sch-empty{padding:26px 18px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--ink2);font-size:14px}

/* ------------------------------------------------------------- phone: a day at a time */
.sch-days{display:none;gap:6px;overflow-x:auto;padding-bottom:2px}
.sch-dayview{display:none}
@media (max-width:720px){
  .sch-scroll{display:none}
  .sch-days{display:flex}
  .sch-dayview{display:flex;flex-direction:column;gap:6px}
  .sch-days .fchip{min-height:44px;flex:0 0 auto}
  .sch-top .btn,.sch-top .fchip{min-height:44px}
  .sch-top .fchip{min-width:44px}
  .sch-pick{min-height:44px;font-size:16px}
  .sch-weeknav .fchip{min-width:44px}
  /* a request stacks: who and when, then its buttons across the full width */
  .sch-req{padding:10px 12px}
  .sch-req-row{flex-direction:column;align-items:stretch}
  .sch-req-acts .btn{flex:1 1 0;min-height:44px}
  .sch-req-own{max-width:none;text-align:left}
  .sch-req .btn.ghost.sch-req-wd{min-height:44px;flex:1 1 100%;margin:4px 0}
  .sch-fest-head{flex-wrap:wrap}
  .sch-fest-head .btn,.sch-festtag{min-height:44px}
  .sch-req-row.sch-fest-at{padding-left:8px;margin-left:-8px}
}
.sch-dv-head{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px}
.sch-dv-head > b{font:600 14px/1.3 var(--display);color:var(--ink)}
.sch-dv-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:10px 12px}
.sch-dv-who{display:flex;flex-direction:column;min-width:84px;max-width:40%}
.sch-dv-who b{color:var(--ink);overflow-wrap:anywhere}
/* the phone day view: the helper's phone is a 44px row of its own */
.sch-dv-who .sch-tel{display:flex;align-items:center;min-height:44px;margin-top:0;font-size:13px}
.sch-dv-who .sch-tel::after{content:none}
.sch-dv-items{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.sch-dv-items .sch-shift,.sch-dv-items .sch-off{min-height:44px}
.sch-dv-add{width:100%;min-height:44px}

/* ------------------------------------------------------------- Day / Week / Month */
.sch-views{display:inline-flex;gap:4px}
/* the Day view: the phone's day list on every width, with the week's hours */
.sch-dayview.sch-dayfull{display:flex;flex-direction:column;gap:6px;max-width:760px}
.sch-dv-week{font:500 11.5px/1.4 var(--mono);color:var(--ink2);margin:0 0 2px;font-variant-numeric:tabular-nums}
/* one width for every name, so the shifts line up down the list */
.sch-dayfull .sch-dv-who{flex:0 0 136px;max-width:none}
.sch-dv-who .sch-tot{margin-top:2px}

/* the month: seven columns Monday to Sunday, a row per week with its own
   Draft or Published at the start; under 720px a list instead (below) */
table.sch-month{border-collapse:collapse;width:100%;min-width:840px;table-layout:fixed;font-size:12px}
table.sch-month th,table.sch-month td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  vertical-align:top;padding:4px;text-align:left}
table.sch-month tr > :last-child{border-right:0}
table.sch-month tbody tr:last-child > *{border-bottom:0}
table.sch-month thead th{background:var(--surface2);font:600 12px/1.2 var(--display);color:var(--ink);padding:6px 8px}
table.sch-month .sch-mwk{width:92px;background:var(--surface2);padding:8px}
.sch-mwk-d{display:block;font:500 11px/1.3 var(--mono);color:var(--ink2);margin-bottom:5px;font-variant-numeric:tabular-nums}
table.sch-month td.sch-today{box-shadow:inset 0 2px 0 var(--accent)}
/* a day of the month before or after: there, and muted */
table.sch-month td.sch-mout{background:var(--paper)}
td.sch-mout .sch-mnum{color:var(--ink3)}
td.sch-mout .sch-mline{opacity:.7}
.sch-mbox{display:flex;flex-direction:column;gap:3px;min-height:92px}
/* the day's date and its +: one button across the top of the box */
.sch-mdate{display:flex;align-items:center;gap:6px;width:100%;min-height:34px;margin:0;padding:0 6px;border:1px solid transparent;
  border-radius:5px;background:transparent;color:var(--ink2);font:inherit;cursor:pointer;text-align:left}
.sch-mnum{font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums}
td.sch-today .sch-mnum{color:var(--accent);font-weight:600}
.sch-mplus{margin-left:auto;font-size:14px;line-height:1;color:var(--ink3);opacity:.55}
.sch-mdate:hover,.sch-mdate:focus-visible{border:1px dashed var(--accent);color:var(--ink)}
.sch-mdate:hover .sch-mplus,.sch-mdate:focus-visible .sch-mplus{opacity:1;color:var(--ink)}
.sch-mdate:focus-visible,.sch-mline:focus-visible,.sch-mmore:focus-visible,.sch-mday:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* a shift in a day box: "Avery 12pm to 8pm", marked with its area's colour */
.sch-mline{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:0 5px;width:100%;min-height:34px;margin:0;padding:3px 5px;
  border:1px solid var(--line);border-left:3px solid var(--sch-area, var(--accent));border-radius:4px;background:var(--surface);color:var(--ink2);
  font:inherit;font-size:11.5px;line-height:1.35;text-align:left;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.sch-mline:hover{border-color:var(--sch-area, var(--accent));background:var(--surface2)}
.sch-mline b,.sch-mday-line b{font-weight:600;color:var(--ink)}
/* the times may wrap at a space inside a narrow day box ("10:30am to" / "12:30pm"); the phone list keeps them whole */
.sch-mt{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.sch-mline.sch-offsite{border-style:dashed;border-left-style:solid}
.sch-mday-line.sch-offsite{border-left-style:dashed}
.sch-mmore{align-self:flex-start;min-height:34px;margin:0;padding:2px 5px;border:0;border-radius:4px;background:transparent;
  color:var(--ink2);font:600 11px/1.3 var(--mono);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sch-mmore:hover{color:var(--ink)}
.sch-moff{display:block;margin-top:auto;padding:2px 6px 0;font:500 10.5px/1.3 var(--mono);color:var(--ink3)}
.sch-merr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sch-merr .btn{min-height:34px;margin:0}
/* the month on a phone: the days that have shifts, under a heading per week */
.sch-mlist{display:none;flex-direction:column;gap:14px}
.sch-mweek{display:flex;flex-direction:column;gap:6px}
.sch-mweek-h{display:flex;align-items:center;gap:8px}
.sch-mweek-h .sch-kick{flex:0 1 auto}
.sch-mday{display:flex;flex-direction:column;gap:4px;width:100%;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.sch-mday-h{display:flex;align-items:baseline;gap:6px}
.sch-mday-h b{font:600 14px/1.3 var(--display);color:var(--ink)}
.sch-mday-line{display:block;padding:1px 0 1px 8px;border-left:3px solid var(--sch-area, var(--accent));font-size:13px;line-height:1.4;color:var(--ink2)}
.sch-mday-line .sch-mt{font-size:12.5px;white-space:nowrap}
.sch-mday .sch-moff{margin-top:0;padding-left:0;font-size:11.5px}
@media (max-width:720px){
  .sch-mlist{display:flex}
  .sch-dayview.sch-dayfull{max-width:none}
  .sch-merr .btn{min-height:44px}
}

/* ------------------------------------------------------------- the add / change sheet */
.scrim.sch-scrim{z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.sheet.sch-sheet{border-radius:var(--r);max-width:460px;width:100%;margin:0;padding:18px 18px 16px;max-height:calc(100vh - 40px)}
.sheet .sch-fh{font:600 16px/1.3 var(--display);margin:0 0 10px}
.sch-modes{display:flex;gap:6px;margin:0 0 4px}
.sch-modes .fchip{min-height:34px;padding:4px 14px}
.sch-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
.sch-row2[hidden],.sch-sheet [data-for][hidden]{display:none}
.sch-sheet select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  color:var(--ink);font:inherit;font-size:16px;min-height:42px}
.sch-sheet input{margin:0}
.sheet .sch-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3)}
.sch-warn{margin:10px 0 0;display:flex;flex-direction:column;gap:4px}
.sch-warn:empty{display:none}
.sch-warn p{margin:0;font-size:12.5px;line-height:1.45}
.sheet .sch-errline{color:var(--clay);font-weight:600}
.sheet .sch-warnline{color:var(--clay)}
.sheet .sch-noteline{color:var(--ink3)}
/* under a waiting time-off request that stops the save: the way to go and answer it */
.sch-warn .btn{align-self:flex-start;min-height:34px;margin:4px 0 0}
/* the festival and crew forms: a line naming the festival, a textarea, a checkbox */
.sheet .sch-fsub{margin:-4px 0 4px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.sheet .sch-fsub b{color:var(--ink);font-weight:600}
.sch-sheet textarea{margin:0;min-height:72px}
.sheet label.sch-check{display:flex;align-items:center;gap:8px;min-height:34px;margin:12px 0 0;cursor:pointer;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.sheet label.sch-check[hidden]{display:none}
.sch-check input[type="checkbox"]{width:18px;height:18px;margin:0;padding:0;flex:0 0 auto;accent-color:var(--accent)}
.sch-sheet [aria-invalid="true"]{border-color:var(--clay)}
.sch-acts{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.sch-acts .btn{min-height:34px}
.sheet.sch-sheet .btn.sch-danger{color:var(--clay)}
/* a question with more than two answers (approve time off with shifts booked,
   leaving with changes not sent): what it is about, then one answer a row,
   the main one first */
.sheet .sch-ask p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.sheet .sch-ask-list{list-style:none;margin:8px 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);display:flex;flex-direction:column;gap:4px}
.sheet .sch-ask-list li{font:500 12.5px/1.45 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.sch-ask-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.sch-ask-acts .btn{width:100%;min-height:40px;margin:0}
/* Add shifts: one date or several, then the dates it will fill. The list
   scrolls on its own so Save stays in reach under a long one. */
.sch-add-modes{margin:14px 0 0}
.sch-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:10px 0 0}
.sch-dows .fchip{min-height:34px;padding:4px 0;text-align:center}
.sch-add-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:14px 0 0}
.sch-add-sum:empty{display:none}
.sheet .sch-add-sum span:first-child{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.sch-add-sum .sch-add-stop{font-size:12.5px;line-height:1.3}
.sch-add-list{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  max-height:min(236px,30vh);overflow-y:auto}
.sch-add-list:empty{display:none}
/* position: the line holds its own hidden text (.sch-sr), so the list clips
   it; left to the sheet, it stretched the sheet's scroll below Save. */
.sch-add-line{position:relative;display:flex;align-items:flex-start;gap:10px;padding:5px 10px;border-top:1px solid var(--line)}
.sch-add-line:first-child{border-top:0}
.sheet .sch-add-tick{display:flex;align-items:center;gap:8px;flex:0 0 122px;min-height:34px;margin:0;
  font:500 12.5px/1.3 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;color:var(--ink)}
.sheet label.sch-add-tick{cursor:pointer}
.sheet span.sch-add-tick{padding-left:26px}   /* no tick box: the day still lines up */
.sch-add-tick input[type="checkbox"]{width:18px;height:18px;margin:0;padding:0;flex:0 0 auto;accent-color:var(--accent)}
.sheet .sch-add-struck .sch-add-day{text-decoration:line-through;color:var(--ink3)}
.sheet .sch-add-out .sch-add-day{color:var(--ink3)}
.sch-add-says{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;padding-top:8px;font-size:12.5px;line-height:1.4;
  overflow-wrap:anywhere}
.sheet .sch-add-stop{color:var(--clay);font-weight:600}
.sheet .sch-add-warn{color:var(--clay)}
.sheet .sch-add-note{color:var(--ink3)}
.sheet .sch-add-msg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.sch-add-msg .btn{min-height:34px;margin:0}
@media (max-width:560px){
  .scrim.sch-scrim{align-items:flex-end;padding:0}
  .sheet.sch-sheet{border-radius:var(--r) var(--r) 0 0;max-height:92vh;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .sch-acts .btn,.sch-modes .fchip,.sheet label.sch-check,.sch-ask-acts .btn,.sch-warn .btn{min-height:44px}
  .sch-dows .fchip,.sheet .sch-add-tick,.sch-add-msg .btn{min-height:44px}
  .sch-add-says{padding-top:13px}
  .sch-add-list{max-height:min(236px,22vh)}   /* the whole sheet still fits a phone */
}
/* ------------------------------------------------------------- round 2, stages C and D (wave 5) */
/* print colours: the posted page is black on white in every theme and skin */
:root{--sch-print-ink:#000;--sch-print-paper:#fff;--sch-print-line:#8a8a8a;--sch-print-soft:#444}
/* the header: other weeks held, an ended week's note */
.sch-alsoheld{font:500 11px/1.3 var(--mono);color:var(--warn);white-space:nowrap}
.sch-endnote{font-size:12px;line-height:1.35;color:var(--ink3);max-width:46ch}
/* availability in the grid: a hatched cell, always with its words */
.sch-grid td.sch-unavail{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink3) 10%, var(--surface)) 0 6px, var(--surface) 6px 12px)}
.sch-availnote{display:block;font:500 10.5px/1.3 var(--mono);color:var(--ink3);letter-spacing:.02em}
.sch-availnote.sch-availoff{color:var(--ink2);font-weight:600}
/* the carriers' tags on a day: closed, short, and the heads-up the day before */
.sch-ctag{display:block;font:500 10.5px/1.3 var(--mono);margin-top:3px;padding:2px 5px;border-radius:4px;border:1px solid var(--line);
  color:var(--ink2);background:var(--surface);overflow-wrap:anywhere;white-space:normal;text-align:left}
.sch-ctag.sch-ctag-closed{color:var(--clay);border-color:color-mix(in srgb, var(--clay) 45%, var(--line));background:color-mix(in srgb, var(--clay) 8%, var(--surface))}
.sch-ctag.sch-ctag-short{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, var(--line));background:color-mix(in srgb, var(--warn) 8%, var(--surface))}
.sch-ctag.sch-ctag-heads{color:var(--sky);border-color:color-mix(in srgb, var(--sky) 40%, var(--line));background:color-mix(in srgb, var(--sky) 8%, var(--surface))}
.sch-mbox .sch-ctag{margin:2px 0}
/* the Carriers panel */
.sch-car-soon,.sch-car-week,.sch-car-hol{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.45;color:var(--ink2)}
.sch-car-week li,.sch-car-soon li{font-variant-numeric:tabular-nums}
.sch-car-one{border-top:1px solid var(--line);padding:10px 0 2px}
.sch-car-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.sch-car-h b{font-weight:600;color:var(--ink)}
.sch-car-h .btn{margin-left:auto;min-height:34px}
.sch-car-checked{font:500 11px/1.3 var(--mono);color:var(--ink3)}
.sch-car-checked.sch-car-stale,.sch-car-warn{color:var(--warn)}
.sch-car-warn{margin:4px 0 0;font-size:12.5px;font-weight:600}
.sch-car-own{margin:4px 0 6px}
.sch-car-own summary{cursor:pointer;min-height:34px;display:flex;align-items:center;font-size:13px;color:var(--ink2)}
.sch-car-hol li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sch-car-hol .fchip,.sch-car-hol .btn,.sch-car-own > .btn{min-height:34px}
/* the Usual hours table */
.sch-ustable{border-collapse:collapse;font-size:13px;min-width:320px}
.sch-ustable th,.sch-ustable td{text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.sch-ustable thead th{font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.sch-usual .sch-scroll{display:block}
.sch-usual .sch-req-head .btn{min-height:34px}
/* the availability, carrier and usual-hours forms */
.sch-avgrid,.sch-cargrid,.sch-usgrid{display:flex;flex-direction:column;gap:8px;margin-top:6px;max-height:min(420px,52vh);overflow-y:auto}
.sch-avrow,.sch-carline{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 8px;align-items:center}
.sheet .sch-avday{font:500 12px/1.3 var(--mono);color:var(--ink2);margin:0;letter-spacing:0;text-transform:none}
.sch-avtimes{grid-column:2;display:flex;align-items:center;gap:6px}
.sch-avtimes[hidden]{display:none}
.sch-avtimes input,.sch-carline input[type="time"],.sch-usrow input{min-width:0;flex:1 1 0}
.sch-carline{grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) minmax(0,1fr)}
.sheet .sch-carline label.sch-check{margin:0}
.sch-usrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:4px 8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.sch-usrow b{grid-column:1 / -1;font-weight:600;color:var(--ink)}
.sheet .sch-uslab{font:500 11px/1.3 var(--mono);color:var(--ink3)}
/* the Publish sheet */
.sch-pubpick{border:0;margin:0;padding:0;display:flex;flex-direction:column}
.sch-pubpick legend{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:0;margin:0 0 2px}
.sheet .sch-pubpick label.sch-check{margin:6px 0 0}
.sch-pubpick input[type="radio"]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--accent)}
.sch-publist{list-style:none;margin:10px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  display:flex;flex-direction:column;gap:4px;font:500 12.5px/1.45 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.sch-publist .sch-pubskip{color:var(--ink3)}
.sheet .sch-pubwho{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.sheet .sch-pubwho:empty{display:none}
@media (max-width:720px){
  .sch-car-h .btn,.sch-car-hol .fchip,.sch-car-hol .btn,.sch-car-own > .btn,.sch-car-own summary,.sch-usual .sch-req-head .btn{min-height:44px}
  .sch-car-h .btn{margin-left:0;flex:1 1 100%}
  .sch-usual .sch-req-head{flex-wrap:wrap}
}
@media (max-width:560px){
  .sch-avrow{grid-template-columns:minmax(0,1fr)}
  .sch-avtimes{grid-column:1}
  .sch-carline{grid-template-columns:minmax(0,1fr) auto}
  .sch-carline input[type="time"]{grid-column:span 1}
  .sheet .sch-pubpick label.sch-check{min-height:44px}
  .sch-avgrid select,.sch-avgrid input,.sch-cargrid input,.sch-usgrid input{min-height:44px}
}

/* ------------------------------------------------------------- print (#schprint, schedule.js openPrint) */
#schprint{position:fixed;inset:0;z-index:95;overflow:auto;padding:16px;background:color-mix(in srgb, var(--ink) 55%, transparent)}
.schp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:1040px;margin:0 auto 10px;padding:10px 12px;
  border-radius:var(--r);background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.schp-bar .btn{min-height:34px}
.schp-fit{max-width:1040px;margin:0 auto;overflow:hidden}
.schp-paper{width:1000px;transform-origin:top left;background:var(--sch-print-paper);color:var(--sch-print-ink);padding:24px 26px;
  font:13px/1.35 var(--body, system-ui, sans-serif)}
.schp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--sch-print-ink);padding-bottom:6px;margin-bottom:8px}
.schp-head h1{font:600 20px/1.2 var(--display, inherit);margin:0;color:var(--sch-print-ink)}
.schp-head span{font-size:14px;font-weight:600}
.schp-note{margin:0 0 8px;font-weight:600}
.schp-paper table{width:100%;border-collapse:collapse;table-layout:fixed}
.schp-paper th,.schp-paper td{border:1px solid var(--sch-print-line);padding:4px 5px;vertical-align:top;text-align:left;overflow-wrap:anywhere;color:var(--sch-print-ink)}
.schp-paper thead th{font-size:12px;background:var(--sch-print-paper)}
.schp-week th[scope="row"]{width:118px;font-weight:600}
.schp-paper tr{break-inside:avoid;page-break-inside:avoid}
.schp-paper td div{margin:0 0 2px;font-size:12px}
.schp-month td{height:86px}
.schp-month .schp-out{color:var(--sch-print-soft)}
.schp-month .schp-out div{color:var(--sch-print-soft)}
.schp-d{font-weight:700}
.schp-tag{display:block;font-size:10.5px;font-weight:600;border:1px solid var(--sch-print-ink);padding:0 3px;margin:2px 0}
.schp-off{font-style:italic}
.schp-foot{margin:8px 0 0;font-size:11px;color:var(--sch-print-soft)}
@media (max-width:720px){ #schprint{padding:8px} .schp-bar .btn{min-height:44px;flex:1 1 auto} }
/* landscape for the schedule's own page only: a named page, so the pay stubs
   and every other paper keep their own size */
@page schland{size:landscape;margin:.4in}
@media print{
  body.schprinting > :not(#schprint){display:none !important}
  body.schprinting #schprint{page:schland}
  #schprint{position:static;inset:auto;padding:0;background:none;overflow:visible}
  #schprint .schp-bar{display:none}
  .schp-fit{max-width:none;overflow:visible;height:auto !important}
  .schp-paper{width:auto;transform:none !important;padding:0}
  .schp-paper thead{display:table-header-group}
}
@media (prefers-reduced-motion:reduce){.sch.sch-busy{transition:none}}