/* ASA OS Schedule (request 246B): day grid (bays as columns, time down the side), week capacity, booking and appointment
 * sheets, and the job's Appointment panel. Uses the shop.css tokens only. Positions are set with CSSOM (grid-row /
 * grid-column, --bays / --rows / --used custom properties), never style attributes, so the CSP holds. */

.sch-nav { display: inline-flex; gap: 4px; }
.shop-on .sch-nav button { min-height: 32px; padding: 0 12px; }
.sch-sum { color: var(--ink-2); font-size: 14px; margin: -8px 0 14px; }
.sch-hint { color: var(--ink-2); font-size: 13px; margin: 0 0 8px; }
.sch-note { color: var(--ink-2); font-size: 13px; margin: 6px 0; }
.sch-warn { color: var(--amber); font-size: 13.5px; margin: 6px 0; }
.sch-tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-2); }
.sch-tag.is-arrived { background: var(--green-soft); color: var(--green); }
.sch-tag.is-moved { background: var(--fill); color: var(--ink); font-weight: 600; }   /* a11: the customer moved it from their visit link */
.sch-note.is-customer { color: var(--ink); font-weight: 500; }

/* ---------- day grid ---------- */
.sch-grid-wrap { background: var(--surface); border-radius: var(--r-l); box-shadow: 0 0 0 .5px var(--hair); overflow-x: auto; overscroll-behavior-x: contain; }
.sch-grid { --bays: 4; --rows: 42; display: grid; grid-template-columns: 64px repeat(var(--bays), minmax(150px, 1fr));
  grid-template-rows: 44px repeat(var(--rows), 17px); min-width: calc(64px + var(--bays) * 150px); position: relative; padding-bottom: 8px; }
.sch-corner { border-bottom: 1px solid var(--hair); }
.sch-bay { display: flex; align-items: center; padding: 0 10px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair);
  position: sticky; top: 0; background: var(--surface); z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-time { font-size: 11.5px; color: var(--ink-3); padding: 0 8px 0 10px; transform: translateY(-7px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sch-time.is-hour { color: var(--ink-2); font-weight: 500; }
.sch-line { border-top: 1px solid var(--hair); pointer-events: none; }
.sch-appt, .sch-job, .sch-hold { margin: 1px 4px; border-radius: 10px; padding: 6px 9px; display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow: hidden;
  text-align: left; font: inherit; font-size: 12.5px; line-height: 1.3; z-index: 2; position: relative; }
.shop-on .sch-appt { background: var(--accent-soft); color: var(--ink); border: 0; border-left: 3px solid var(--accent); cursor: pointer; white-space: normal;
  align-items: stretch; justify-content: flex-start; min-height: 0; border-radius: 10px; padding: 6px 9px; }
.shop-on .sch-appt:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }
.shop-on .sch-appt.arr-waiting { border-left-color: #8e5cd9; background: rgba(142, 92, 217, 0.12); }
.shop-on .sch-appt.a-arrived { background: var(--green-soft); border-left-color: var(--green); }
.sch-job { background: repeating-linear-gradient(135deg, var(--fill) 0 6px, transparent 6px 12px); color: var(--ink-2); border-left: 3px solid var(--ink-3); }
.sch-job:hover { text-decoration: none; background-color: var(--fill); }
.sch-hold { border: 1.5px dashed var(--accent); color: var(--accent); background: transparent; font-weight: 500; justify-content: center; }
/* UI cleanup (Oct 19): overlapping blocks in one bay share the column in lanes (schedule-page.js sets --lane-x / --lane-w, fractions) */
.sch-grid > .sch-appt, .sch-grid > .sch-job, .sch-grid > .sch-hold { justify-self: start; box-sizing: border-box;
  width: calc((100% - 8px) * var(--lane-w, 1) - 2px); margin-left: calc(4px + (100% - 8px) * var(--lane-x, 0)); margin-right: 0; }
.sch-grid { grid-template-columns: 64px repeat(var(--bays), minmax(max(150px, calc(var(--lanes-max, 1) * 92px)), 1fr));
  min-width: calc(64px + var(--bays) * max(150px, calc(var(--lanes-max, 1) * 92px))); }
.sch-job-car { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--hair); }
.sch-job-car:first-of-type { border-top: 0; }
.sch-job-car:hover .sch-blk-c { text-decoration: underline; }
.sch-job-car > span { flex-shrink: 0; }
.sch-grid > .sch-job { padding: 6px 4px 6px 6px; }
.sch-job-car .sch-blk-c { font-size: 11.5px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sch-job-car .sch-blk-v { font-size: 11.5px; }
.sch-appt > span, .sch-job > span { flex-shrink: 0; }   /* clip from the bottom (footer first), never squeeze the name away */
.sch-blk-t { font-weight: 600; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Daily screens (Oct 21): 30 minutes or less is one line, start time then name */
.shop-on .sch-appt.is-short { flex-direction: row; align-items: center; gap: 5px; padding-top: 2px; padding-bottom: 2px; }
.sch-appt.is-short > .sch-blk-t { white-space: nowrap; }
.sch-appt.is-short > .sch-blk-c { flex-shrink: 1; min-width: 0; }
.sch-appt.is-short > .sch-blk-v, .sch-appt.is-short > .sch-blk-s, .sch-appt.is-short > .sch-blk-f { display: none; }
.sch-blk-c { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-blk-v, .sch-blk-s { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-blk-f { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.sch-now { border-top: 2px solid var(--red); z-index: 4; pointer-events: none; align-self: start; }
.sch-agenda { display: none; list-style: none; margin: 0; padding: 0; }

.sch-inshop { margin-top: 22px; }
.sch-inshop h2 { font-size: 15px; margin-bottom: 4px; }
.sch-inshop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-chipjob { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair); color: var(--ink); font-size: 13px; }
.sch-chipjob:hover { text-decoration: none; background: var(--surface-2); }
.sch-other { margin-top: 16px; color: var(--ink-2); font-size: 13.5px; }
.sch-other ul { list-style: none; padding: 0; margin: 6px 0 0; }
.sch-rules, .sch-wl-rules { margin-top: 26px; color: var(--ink-2); font-size: 13px; }
.sch-rules summary, .sch-wl-rules summary { cursor: pointer; color: var(--accent); }
.sch-rules ul, .sch-wl-rules ul { margin: 8px 0; padding-left: 18px; }
.sch-rules li, .sch-wl-rules li { margin: 3px 0; }
.sch-cal { margin-top: 8px; }

/* ---------- week ---------- */
.sch-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.shop-on .sch-wday { --used: 0%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left; white-space: normal;
  background: var(--surface); color: var(--ink); border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); padding: 14px; min-height: 168px; font: inherit; cursor: pointer; }
.shop-on .sch-wday:hover { background: var(--surface-2); }
.shop-on .sch-wday.is-today { box-shadow: 0 0 0 1.5px var(--accent); }
.shop-on .sch-wday.lv-closed { background: transparent; color: var(--ink-3); }
.sch-wday-h { display: flex; flex-direction: column; }
.sch-wday-w { font-weight: 600; font-size: 14px; }
.sch-wday-d { color: var(--ink-2); font-size: 12.5px; }
.sch-wday-closed { color: var(--ink-3); font-size: 13px; }
.sch-meter { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; margin-top: 4px; }
.sch-meter-f { display: block; height: 100%; width: var(--used, 0%); border-radius: 999px; background: var(--accent); }
.lv-busy .sch-meter-f { background: var(--amber); }
.lv-full .sch-meter-f { background: var(--red); }
.sch-wday-pct { font: 600 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.sch-wday-a, .sch-wday-first { font-size: 12.5px; color: var(--ink-2); }
.sch-open { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sch-open.has-open { justify-self: start; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; }

/* ---------- sheets ---------- */
body.shop-on .main > .sch-overlay { max-width: none; }   /* shop.css caps .main's children at 1180px; the overlay spans the window */
.sch-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.28); display: flex; justify-content: flex-end; }
.sch-sheet { width: min(520px, 100%); height: 100%; background: var(--canvas); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: sch-in .18s ease-out; }
@keyframes sch-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sch-sheet { animation: none; } }
.sch-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; }
.sch-sheet-head h2 { margin: 0; font-size: 20px; }
.sch-sheet-body { padding: 0 20px 28px; overflow-y: auto; flex: 1; }
.sch-step { background: var(--surface); border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); padding: 14px 16px; margin-bottom: 10px; }
.sch-step-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 10px; }
.sch-step-n { width: 20px; height: 20px; border-radius: 50%; background: var(--fill); color: var(--ink-2); font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.sch-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sch-chipline { font-size: 12.5px; color: var(--ink-2); }
.sch-find input { width: 100%; }
.sch-results { margin-top: 8px; }
.sch-cust { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--hair); }
.sch-cust:first-child { border-top: 0; }
.sch-cust-n { font-weight: 600; }
.sch-cust-v { display: flex; gap: 6px; flex-wrap: wrap; }
.sch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shop-on .chip-btn { min-height: 30px; padding: 0 12px; font-size: 13px; border-radius: 999px; background: var(--fill); color: var(--ink); }
.shop-on .chip-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.sch-step textarea, .sch-step input[type="text"] { width: 100%; margin-top: 8px; box-sizing: border-box; }
.sch-fixed { margin: 0; }
.sch-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.shop-on .sch-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; min-height: 62px; padding: 6px 4px; border-radius: 12px; background: var(--fill); }
.shop-on .sch-day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.shop-on .sch-day[aria-pressed="true"] .sch-day-n { color: inherit; }
.sch-day-w { font-size: 11.5px; font-weight: 500; }
.sch-day-d { font: 600 18px/1.1 var(--font-display); }
.sch-day-n { font-size: 10.5px; color: var(--green); }
.lv-closed .sch-day-n, .lv-full .sch-day-n { color: var(--ink-3); }
.sch-times { margin: 4px 0 10px; }
.sch-slots, .sch-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.sch-alts { margin-top: 8px; }
.shop-on .slot { display: flex; flex-direction: column; gap: 1px; min-height: 48px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 .5px var(--hair-strong); }
.shop-on .slot:hover { background: var(--accent-soft); }
.shop-on .slot[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.slot-t { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.slot-n { font-size: 11px; opacity: .75; }
.sch-held-card { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 14px; border-radius: var(--r-m); background: var(--accent-soft); margin-bottom: 10px; }
.sch-left { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sch-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sch-actions.wrap { flex-wrap: wrap; justify-content: flex-start; }
.shop-on button.danger { color: var(--red); }
.shop-on button.danger:not(.quiet) { background: var(--red-soft); }
.sch-reason { display: flex; gap: 8px; margin-top: 8px; }
.sch-reason input { flex: 1; }
.sch-done { text-align: center; padding: 40px 10px; }
.sch-done-k { color: var(--green); font-weight: 600; margin: 0 0 4px; }
.sch-done .sch-actions { justify-content: center; }
.sch-a-top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sch-a-top .stage { align-self: flex-start; }
.sch-a-top h3 { font-size: 18px; margin: 0; }
.stage.a-booked { background: var(--accent-soft); } .stage.a-booked::before { background: var(--accent); }
.stage.a-arrived { background: var(--green-soft); } .stage.a-arrived::before { background: var(--green); }
.stage.a-no_show, .stage.a-cancelled { background: var(--red-soft); } .stage.a-no_show::before, .stage.a-cancelled::before { background: var(--red); }
.sch-hist { margin-top: 16px; }

/* ---------- hours & closures (request 246E) ---------- */
.sch-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 8px; }
.sch-sec-h h3 { margin: 0; }
.sch-rev { color: var(--ink-2); font-size: 12.5px; }
.sch-ok { color: var(--green); font-size: 13.5px; font-weight: 500; margin: 8px 0 0; }
.sch-hr-week { display: flex; flex-direction: column; }
.sch-hr-row { display: grid; grid-template-columns: 88px 44px 1fr; align-items: center; gap: 8px; min-height: 46px; border-top: 1px solid var(--hair); }
.sch-hr-row:first-child { border-top: 0; }
.sch-hr-day { font-weight: 500; font-size: 14px; }
.sch-hr-times { display: flex; align-items: center; gap: 6px; }
.sch-hr-times[hidden], .sch-hr-off[hidden] { display: none; }
.sch-hr-times input { width: 132px; min-height: 34px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.sch-hr-dash { color: var(--ink-3); }
.sch-hr-off { color: var(--ink-3); font-size: 14px; }
.shop-on input.sch-switch { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: var(--fill-hover); position: relative; cursor: pointer; transition: background-color .15s ease; }
.shop-on input.sch-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform .15s ease; }
.shop-on input.sch-switch:checked { background: var(--green); }
.shop-on input.sch-switch:checked::before { transform: translateX(16px); }
.shop-on input.sch-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .shop-on input.sch-switch, .shop-on input.sch-switch::before { transition: none; } }
.sch-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); }
.sch-field span { color: var(--ink); font-size: 14px; font-weight: 500; }
.sch-hours > input[type="text"] { width: 100%; margin-top: 10px; box-sizing: border-box; }
.sch-closures { list-style: none; margin: 0 0 10px; padding: 0; }
.sch-closure { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.sch-closure:first-child { border-top: 0; }
.sch-closure-d { font-weight: 500; }
.sch-closure-r { color: var(--ink-2); font-size: 13.5px; flex: 1 1 auto; }   /* never squeezed under the button: the row wraps */
.sch-closure .sch-reason { flex-basis: 100%; }
.sch-closure .sch-reason[hidden] { display: none; }
.sch-closure-add { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-closure-add input[type="date"] { flex: 0 0 auto; }
.sch-closure-add input[type="text"] { flex: 1 1 180px; min-width: 0; }
.sch-techs { display: flex; flex-direction: column; }
.sch-tech { padding: 10px 0; border-top: 1px solid var(--hair); }
.sch-tech:first-child { border-top: 0; }
.sch-tech-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sch-tech-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sch-tech-ed { margin-top: 8px; }
.sch-tech-ed[hidden] { display: none; }

/* ---------- job panel ---------- */
.sch-jp-when { font-weight: 600; margin-bottom: 6px; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .sch-grid-wrap { display: none; }
  .sch-agenda { display: block; }
  .sch-agenda li { margin-bottom: 8px; }
  .shop-on .sch-ag { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; white-space: normal; background: var(--surface); color: var(--ink);
    border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); padding: 12px 14px; min-height: 0; font: inherit; justify-content: flex-start; }
  .shop-on .sch-ag.a-arrived { box-shadow: 0 0 0 1px var(--green); }
  .sch-ag-t { display: flex; flex-direction: column; min-width: 74px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sch-ag-t small { color: var(--ink-2); font-weight: 400; font-size: 12px; }
  .sch-ag-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink-2); font-size: 13px; }
  .sch-ag-m strong { color: var(--ink); font-size: 15px; }
  .sch-ag-f { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
  .sch-week { grid-template-columns: 1fr; }
  .shop-on .sch-wday { min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .sch-meter { grid-column: 1 / -1; }
  .pg-actions { width: 100%; }
  .sch-sheet { width: 100%; }
  .sch-sheet-body { padding: 0 16px 24px; }
}
@media (max-width: 440px) {
  .sch-hr-row { grid-template-columns: 1fr 44px; padding: 6px 0; }
  .sch-hr-times, .sch-hr-off { grid-column: 1 / -1; }
  .sch-hr-off { display: none; }
  .sch-hr-times input { flex: 1; width: auto; min-width: 0; }
  .sch-closure-add input[type="date"], .sch-closure-add input[type="text"] { flex: 1 1 100%; }
}

/* Waitlist and no-shows to rebook (110) */
.sch-wl { margin-top: 16px; }
.sch-wl h2 { margin: 0 0 6px; }
.sch-wl-h3 { font-size: 15px; margin: 16px 0 4px; }
.sch-wl-list { list-style: none; margin: 0; padding: 0; }
.sch-wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--hair); align-items: start; }
.sch-wl-main { min-width: 0; }
.sch-wl-fit { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.sch-wl-fit.has-fit { color: var(--green); font-weight: 600; }
.sch-wl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sch-wl-acts input { min-height: 36px; width: 200px; max-width: 100%; }
.sch-wl-dates { display: flex; gap: 12px; flex-wrap: wrap; }
.sch-wl-row > .sch-note { grid-column: 1 / -1; }
@media (max-width: 640px) { .sch-wl-row { grid-template-columns: minmax(0, 1fr); } .sch-wl-acts { justify-content: flex-start; } }
/* Oct 20: staffing for the week */
.sch-staff { overflow-x: auto; margin-top: 16px; }   /* daily screens (Oct 21): it sat flush against the day cards */
.sch-staff-how { margin-top: 8px; font-size: 13px; }
.sch-staff-how summary { cursor: pointer; color: var(--accent); }

.sch-staff-t { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.sch-staff-t th, .sch-staff-t td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--hair); vertical-align: top; }
.sch-staff-t tr.is-bad td:last-child { color: var(--red); font-weight: 600; }
.sch-staff-t tr.is-warn td:last-child { color: var(--amber); font-weight: 600; }
.sch-staff-t tr.is-light td:last-child { color: var(--green); }
.sch-staff-t tr.is-dim td { color: var(--ink-2); }
@media (max-width: 760px) {   /* daily screens (Oct 21): four columns squeezed each cell to a word per line; one day per row */
  .sch-staff-t thead { display: none; }
  .sch-staff-t, .sch-staff-t tbody, .sch-staff-t tr, .sch-staff-t td { display: block; }
  .sch-staff-t tr { padding: 10px 0; border-top: 1px solid var(--hair); }
  .sch-staff-t th, .sch-staff-t td { border: 0; padding: 1px 0; }
  .sch-staff-t td:first-child { font-weight: 600; }
  .sch-staff-t td[data-l]::before { content: attr(data-l) ": "; color: var(--ink-2); }
}
/* Oct 20: the job's separate facts (Approved · Parts ordered · Parts in · Work started) and what a cancel leaves on file */
.sch-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.sch-fact { display: flex; flex-direction: column; min-width: 0; }
.sch-fact dt { font-size: 12px; color: var(--ink-3); }
.sch-fact dd { margin: 0; font-size: 13.5px; color: var(--ink); }
.sch-fact.is-not_yet dd, .sch-fact.is-not_shown dd { color: var(--ink-3); }
.sch-keep { margin: 0 0 8px; }
.sch-keep-h { font-weight: 600; font-size: 13.5px; margin: 0 0 4px; }
.sch-keep ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; }
.sch-policy-row { display: grid; gap: 4px; margin: 8px 0; }
.sch-policy-row .sch-actions { margin: 0; }
.sch-reason:has(.sch-keep) { flex-wrap: wrap; }
.sch-reason .sch-keep { flex-basis: 100%; }
.sch-notice input { width: 130px; text-align: right; }
.sch-notice-now { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 8px; }

/* 148: the appointment's message schedule (appointment sheet) and the appointment message settings (Hours & closures). */
.sch-msgs { margin-top: 16px; }
.sch-msg-group + .sch-msg-group { margin-top: 12px; }
.sch-msg-group h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sch-msg-group.is-old { opacity: .85; }
.sch-msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sch-msg-stage { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s, 8px); min-width: 0; }
.sch-msg-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.sch-msg-h strong { font-size: 14px; }
.sch-msg-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; min-width: 0; }
.sch-msg-state a { font-size: 13px; }
.sch-msg-ch { flex: none; min-width: 7.5em; font-size: 12px; color: var(--ink-2); }
.sch-msg-state.is-push { opacity: .8; }
.sch-msgset .sch-policy-row { grid-template-columns: minmax(0, 1fr); }
.sch-msgset .sch-field { flex-wrap: wrap; min-width: 0; }
.sch-msgset .sch-field input, .sch-msgset .sch-field select { flex: 1 1 14em; min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .sch-msg-ch { min-width: 0; width: 100%; } }
.sch-msgset .sch-scope { margin: 12px 0 0; font-weight: 600; font-size: 14px; }

/* 166: overnight / leaving the car / expected pickup / key dropbox */
.sch-leave { margin-top: 10px; display: grid; gap: 8px; }
.sch-pair label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sch-dt { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sch-field { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.sch-field textarea { width: 100%; box-sizing: border-box; }
/* 201: open hours with nobody at the counter */
.sch-counter-gap { color: var(--ink); }
.sch-counter-gap .sch-note { color: var(--amber, #b26a00); display: inline; margin: 0; }
/* 294: the store's scheduling time for these services, offered (never applied by itself) */
.sch-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 0.92rem; }
/* gap 6: leaving the car and the work start, shown together */
.sch-ww { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--fill); }
.sch-ww-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sch-ww-k { color: var(--ink-2); }
.sch-ww .primary { justify-self: start; }
/* Job page cleanup §6 (Oct 22): the bay header names its technicians on one line; a tap opens the full list */
.sch-bay.has-people { cursor: default; gap: 0; min-width: 0; }
.sch-bay-n { flex: none; }
.sch-bay-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink-2); }
.sch-bay-who.is-none { color: var(--ink-3); font-weight: 400; }
.sch-bay-who.is-down { color: var(--red); }
.sch-bay.has-people:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sch-bay.has-people.is-open { flex-wrap: wrap; white-space: normal; overflow: visible; align-content: center; z-index: 4; }
.sch-bay.has-people.is-open .sch-bay-who { white-space: normal; overflow: visible; }

/* Batch 30 (UI direction, Oct 22): the bay headers are one accent band (bay over its technicians); bookings, a vehicle
   already in a bay, a hold and a bay that is down each look different, with a key under the grid. */
.sch-grid-wrap { border-radius: 4px; box-shadow: none; border: 1px solid var(--hair); }
.sch-corner { background: var(--accent); border-bottom: 0; position: sticky; top: 0; z-index: 3; }
.sch-bay { background: var(--accent); color: var(--accent-ink, #fff); border-left-color: rgba(255, 255, 255, 0.22); border-bottom: 0; justify-content: center; text-align: center;
  font: 700 14.5px/1.2 var(--font); padding: 8px 8px; min-height: 52px; }
.sch-bay.has-people { flex-direction: column; justify-content: center; gap: 2px; }
.sch-bay-n { font-weight: 700; }
.sch-bay-who { color: inherit; opacity: .92; font-size: 12.5px; max-width: 100%; }
.sch-bay-dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* read aloud ("Bay 2 · …"), not drawn: the band puts the names under the bay */
.sch-bay-who.is-none { color: inherit; opacity: .78; font-weight: 400; }
.sch-bay-who.is-down { color: #ffd7cf; opacity: 1; font-weight: 700; }
.sch-bay.has-people.is-open { flex-direction: column; }
.sch-down-col { background: repeating-linear-gradient(135deg, rgba(196, 0, 26, 0.07) 0 8px, rgba(196, 0, 26, 0.12) 8px 16px); z-index: 1; pointer-events: none; }
.shop-on .sch-appt { border-radius: 6px; border-left-width: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.shop-on .sch-appt:hover { filter: brightness(0.97); }
.shop-on .sch-appt.arr-drop_off, .shop-on .sch-appt.arr-overnight, .shop-on .sch-appt { background: color-mix(in srgb, var(--accent) 13%, #fff); }
.shop-on .sch-appt.arr-waiting { background: color-mix(in srgb, var(--plan, #7b4fd1) 13%, #fff); }
.shop-on .sch-appt.a-arrived { background: color-mix(in srgb, var(--green) 16%, #fff); box-shadow: inset 0 0 0 1.5px var(--green); }
.sch-job { border-radius: 6px; border-left: 0; background: repeating-linear-gradient(135deg, #eef1f3 0 6px, #f7f8f9 6px 12px); box-shadow: inset 0 0 0 1px var(--hair); }
.sch-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 4px; padding: 0; font-size: 13px; color: var(--ink-2); }
.sch-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sch-key { width: 18px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); display: inline-block; }
.sch-key.k-drop { background: color-mix(in srgb, var(--accent) 13%, #fff); }
.sch-key.k-wait { background: color-mix(in srgb, var(--plan, #7b4fd1) 13%, #fff); }
.sch-key.k-arrived { background: color-mix(in srgb, var(--green) 16%, #fff); box-shadow: inset 0 0 0 1.5px var(--green); }
.sch-key.k-inbay { background: repeating-linear-gradient(135deg, #e3e7ea 0 4px, #f7f8f9 4px 8px); }
.sch-key.k-hold { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); border: 0; outline: 1px dashed var(--accent); outline-offset: -2px; }
.sch-key.k-down { background: repeating-linear-gradient(135deg, rgba(196, 0, 26, 0.12) 0 4px, rgba(196, 0, 26, 0.2) 4px 8px); }
@media (max-width: 760px) { .sch-legend { display: none; } }   /* the phone shows the day as a list */

/* Batch 32 (Clay's review): the header row is as tall as its tallest bay header, so the time column's header cell and
   every bay header share one height; a hairline runs down each bay's column on its header's divider; the first time
   label sits under the header instead of tucked behind it. */
.sch-grid { grid-template-rows: minmax(52px, auto) repeat(var(--rows), 17px); }
.sch-bay { min-height: 0; box-sizing: border-box; }
.sch-corner { box-sizing: border-box; }
.sch-col { border-left: 1px solid var(--hair); pointer-events: none; }
.sch-time.is-first { transform: none; padding-top: 2px; }
/* Batch 32: seven day cards don't fit beside the sidebar below 1280px ("appointments" ran past the card); four per row there */
@media (min-width: 761px) and (max-width: 1279px) { .sch-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Batch 32 audit (1): a one-hour block (68px) shows only the lines that fit whole: time, name, vehicle. The service and
   tags are in its title (hover) and in the detail a tap opens; nothing is cut mid-line. */
.sch-appt.is-hour > .sch-blk-s, .sch-appt.is-hour > .sch-blk-f { display: none; }
.sch-appt.is-hour > :is(.sch-blk-t, .sch-blk-c, .sch-blk-v) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line each: a long time range no longer wraps into a cut line */

/* U20-B (433): closed for part of a day — the editor rows, the shaded time on the day grid, the week card line, and the
   bookings inside closed time (for a person to handle). */
.sch-part-add { display: grid; gap: 8px; margin-top: 8px; }
.sch-part-rows { display: grid; gap: 6px; }
.sch-part-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--ink-2); }
.sch-part-row input[type="time"] { flex: 0 0 auto; min-width: 7.5em; }
.sch-shut { z-index: 0; margin: 0 2px; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-3) 14%, transparent) 0 6px, transparent 6px 12px); }
.sch-shut { display: flex; justify-content: flex-end; align-items: flex-start; }   /* the label sits at the right, clear of bookings in the first bays */
.sch-shut span { padding: 4px 8px; font-size: 12px; color: var(--ink-2); background: var(--surface, #fff); border-radius: 4px; margin: 2px; }
.sch-wday-part { color: var(--ink-3); font-size: 12.5px; }
.sch-ag-shut { padding: 10px 2px; color: var(--ink-2); font-size: 14px; }
.sch-ct { margin-bottom: 16px; border-left: 3px solid var(--warn, #b26a00); }
.sch-ct[hidden] { display: none; }
.sch-ct h2 { margin: 0 0 6px; }
.sch-ct-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sch-ct-item { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hair); }
.sch-ct-item:first-child { border-top: 0; }
.sch-ct-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sch-ct-who { color: var(--ink-1, inherit); font-size: 14px; }
.sch-ct-why { color: var(--ink-2); font-size: 13.5px; }
.sch-ct-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (max-width: 700px) { .sch-ct-acts button { min-height: 44px; flex: 1 1 auto; } .sch-part-row input[type="time"] { flex: 1 1 40%; } }

/* U21-B: a partly closed day in the staffing table */
.sch-staff-part { color: var(--ink-3); font-size: 12.5px; }

/* U29-A (Finish Line a16[0]): the store's scheduling rule table, one card per way in (fits a phone) */
.sch-visit-rules { margin: 8px 0 14px; }
.sch-visit-rules h4 { margin: 0 0 6px; font-size: 14px; }
.sch-visit-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sch-visit-rules li { border: 1px solid var(--rule); border-radius: var(--r-m, 10px); padding: 10px 12px; min-width: 0; }
.sch-visit-rules li p { margin: 4px 0 0; overflow-wrap: anywhere; }
.sch-rule-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sch-rule-on { font-size: 12px; color: var(--ink-2); }
.sch-rule-on.is-on { color: var(--green, #1f7a4a); font-weight: 600; }
.sch-hist ul { margin: 4px 0 8px; padding-left: 18px; }