/*
 * Schedule engine styles.
 *
 * NOTE ON TOKENS: dye and inventory both open with a `:root` block aliasing
 * their own historical variable names (--surface, --primary, ...) onto the
 * host's shared `--shy-*` design tokens. That exists only because those two
 * were migrated in from standalone apps with an established stylesheet. This
 * engine is from scratch, so it just uses the `--shy-*` tokens directly --
 * there is no alias block to keep in sync, and it picks up the light/dark
 * switch for free. Change colours in the HOST's application.css, not here.
 *
 * NOTE ON LEAKAGE: every engine's stylesheet is pulled into every page in the
 * app via `stylesheet_link_tag :all`, so a bare element selector or a generic
 * class here WILL style dye's and inventory's pages too. Everything below is
 * therefore either prefixed `.sched-` or nested under `.engine-schedule`
 * (which the host layout puts on <main> for this engine's pages).
 */

.engine-schedule .sched-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--shy-text-muted);
  background: var(--shy-surface);
  border: 1px dashed var(--shy-border-strong);
  border-radius: var(--shy-radius-lg);
}

.engine-schedule .sched-empty__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--shy-text);
}

.engine-schedule .sched-empty__hint {
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.5;
}

.engine-schedule .sched-date {
  font-variant-numeric: tabular-nums;
}

/* Hub dashboard card. Rendered on the HOST's dashboard, which has no
   .engine-schedule scope -- hence the .sched- prefix carrying the weight. */
.sched-hub-card__empty {
  color: var(--shy-text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

/* ── Task catalogue ──────────────────────────────────────────────── */

.engine-schedule .sched-filter {
  font-size: 0.85rem;
  color: var(--shy-text-muted);
  margin: 0 0 1rem;
}

.engine-schedule .sched-muted { color: var(--shy-text-faint); }

.engine-schedule .sched-nums { font-variant-numeric: tabular-nums; }

.engine-schedule .sched-row--inactive { opacity: 0.55; }

.engine-schedule .sched-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.engine-schedule .sched-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  margin-right: 0.45rem;
  vertical-align: baseline;
  border: 1px solid var(--shy-border);
}

.engine-schedule .sched-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--shy-radius-sm);
  background: var(--shy-surface-alt);
  color: var(--shy-text-muted);
  white-space: nowrap;
}

.engine-schedule .sched-tag--cert { background: var(--shy-brand-tint); color: var(--shy-brand); }
.engine-schedule .sched-tag--after { background: var(--shy-warning-tint); color: var(--shy-warning); }
.engine-schedule .sched-tag--time { background: var(--shy-success-tint); color: var(--shy-success); }

.engine-schedule .sched-section {
  margin: 1.75rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--shy-border);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--shy-text-muted);
}

.engine-schedule .sched-tiers {
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  padding: 0.9rem 1rem 0.4rem;
  margin-bottom: 1rem;
}

.engine-schedule .sched-tiers legend {
  font-size: 0.8rem;
  color: var(--shy-text-muted);
  padding: 0 0.4rem;
}

.engine-schedule .sched-tiers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1rem;
}

.engine-schedule .sched-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: var(--shy-surface-alt);
}

/* Override .shy-admin .field label's block display for inline checkbox rows. */
.engine-schedule .sched-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0;
  color: var(--shy-text);
  text-transform: none;
  letter-spacing: normal;
}

.engine-schedule .sched-check input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Which weekdays a fixture happens on. Seven boxes in a row rather than a
   select, because "every day except Friday" is the case that matters and a
   single-value select couldn't say it at all. */
.engine-schedule .sched-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.engine-schedule .sched-weekdays label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0.2rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--shy-text-muted);
  border-radius: var(--shy-radius);
}

.engine-schedule .sched-weekdays label:has(input:checked) {
  background: var(--shy-brand-tint);
  color: var(--shy-brand);
}

.engine-schedule .sched-weekdays input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* ── Settings ────────────────────────────────────────────────────── */

.engine-schedule .sched-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--shy-border);
}

.engine-schedule .sched-tabs a {
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  color: var(--shy-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.engine-schedule .sched-tabs a:hover { color: var(--shy-text); }

.engine-schedule .sched-tabs a.is-active {
  color: var(--shy-brand);
  border-bottom-color: var(--shy-brand);
  font-weight: 500;
}

.engine-schedule .sched-tabs--days a { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

.engine-schedule .sched-pill {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: var(--shy-brand-tint);
  color: var(--shy-brand);
}

.engine-schedule .sched-help {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--shy-text-muted);
  max-width: 62ch;
  margin: 0 0 1rem;
}

.engine-schedule .sched-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* .shy-admin forces inputs to width:100%; these sit inside table cells. */
.engine-schedule .sched-qty { width: 6rem !important; }
.engine-schedule td input[type="time"] { width: 8rem !important; }
.engine-schedule td select { width: auto !important; min-width: 8rem; }
.engine-schedule td input[type="text"] { max-width: 18rem; }

.engine-schedule .sched-slots {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 12rem !important;
  line-height: 1.6;
}

/* ── The grid ────────────────────────────────────────────────────── */

.engine-schedule .sched-fixed { margin: 0; font-weight: 500; }

.engine-schedule .sched-notes {
  border-left: 3px solid var(--shy-warning);
  background: var(--shy-warning-tint);
  padding: 0.7rem 1rem;
  border-radius: var(--shy-radius);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.engine-schedule .sched-notes p { margin: 0.25rem 0 0; }

.engine-schedule .sched-grid-wrap {
  overflow: auto;
  max-height: 75vh;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
}

.engine-schedule .sched-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.85rem;
}

.engine-schedule .sched-grid th,
.engine-schedule .sched-grid td {
  border-bottom: 1px solid var(--shy-border);
  border-right: 1px solid var(--shy-border);
  padding: 0.3rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.engine-schedule .sched-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--shy-surface-alt);
  text-transform: none;
  font-size: 0.8rem;
  color: var(--shy-text);
}

/* Sticky time column: the grid is wide and scrolls sideways. */
.engine-schedule .sched-grid__time {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--shy-surface-alt);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--shy-text-muted);
  width: 4.5rem;
}
.engine-schedule .sched-grid thead .sched-grid__time { z-index: 3; }

.engine-schedule .sched-cell { min-width: 9rem; }
.engine-schedule .sched-cell--off { background: var(--shy-surface-alt); }
.engine-schedule .sched-cell--absent { background: repeating-linear-gradient(
  45deg, transparent, transparent 4px,
  var(--shy-surface-alt) 4px, var(--shy-surface-alt) 8px); }
.engine-schedule .sched-cell--allhands {
  background: var(--shy-surface-alt);
  color: var(--shy-text-muted);
  text-align: center;
  font-style: italic;
}

.engine-schedule .sched-grid tr.is-now td,
.engine-schedule .sched-grid tr.is-now th { border-top: 2px solid var(--shy-brand); }

.engine-schedule .sched-cell__label { vertical-align: middle; }

/* button_to renders a form; keep it inline so the × sits beside the label. */
.engine-schedule .sched-cell form { display: inline; margin: 0; }
.engine-schedule .sched-cell__clear {
  border: none;
  background: none;
  color: var(--shy-text-faint);
  cursor: pointer;
  padding: 0 0.2rem;
  font-size: 0.9rem;
  line-height: 1;
}
.engine-schedule .sched-cell__clear:hover { color: var(--shy-danger); }

/* ── My Day (phone-first) ────────────────────────────────────────── */

.engine-schedule .sched-myday {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  overflow: hidden;
}

.engine-schedule .sched-myday__row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  border-bottom: 1px solid var(--shy-border);
  background: var(--shy-surface);
}
.engine-schedule .sched-myday__row:last-child { border-bottom: none; }

.engine-schedule .sched-myday__time {
  flex: 0 0 4.5rem;
  padding: 0.7rem 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--shy-text-muted);
  background: var(--shy-surface-alt);
  font-size: 0.9rem;
}

.engine-schedule .sched-myday__task {
  flex: 1;
  padding: 0.7rem 0.75rem;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.engine-schedule .sched-myday__row.is-now {
  background: var(--shy-brand-tint);
  font-weight: 600;
}
.engine-schedule .sched-myday__row.is-now .sched-myday__time {
  background: var(--shy-brand);
  color: #fff;
}

/* ── Tier projection & build warnings ────────────────────────────── */

.engine-schedule .sched-tiers-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.engine-schedule .sched-tier-card {
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  padding: 0.85rem 1rem;
  text-align: center;
  background: var(--shy-surface);
}

.engine-schedule .sched-tier-card.is-current {
  border-color: var(--shy-brand);
  background: var(--shy-brand-tint);
}

.engine-schedule .sched-tier-card__tier {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--shy-text-muted);
}

.engine-schedule .sched-tier-card__time {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0;
}

.engine-schedule .sched-tier-card__saved {
  font-size: 0.8rem;
  color: var(--shy-text-muted);
}

.engine-schedule .sched-warnbox {
  border-left: 3px solid var(--shy-warning);
  background: var(--shy-warning-tint);
  padding: 0.75rem 1rem;
  border-radius: var(--shy-radius);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}
.engine-schedule .sched-warnbox--danger {
  border-left-color: var(--shy-danger);
  background: var(--shy-danger-tint);
}
.engine-schedule .sched-warnbox ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.engine-schedule .sched-warnbox p { margin: 0.5rem 0 0; }

/* A repeated-task cell gets a corner mark so it's findable in the grid.
   (Positioning context comes from td.sched-cell above.) */
.engine-schedule .sched-cell--repeat::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 6px 6px 0;
  border-style: solid;
  border-color: transparent var(--shy-warning) transparent transparent;
}

/* Filler work -- real tasks, but placed to soak up waiting time rather than
   demanded by the day's plan. Muted so the planned work reads first. */
.engine-schedule .sched-cell--filler { opacity: 0.72; font-style: italic; }
.engine-schedule .sched-tag--filler {
  background: var(--shy-success-tint);
  color: var(--shy-success);
}

/* ── Cell tools, locking, drag and drop ──────────────────────────── */

/* The hover tools are taken OUT of flow and the space they need is reserved
   permanently on the cell. In normal flow, revealing them on hover widened the
   cell and reflowed the whole column, which made the grid jump around under
   the cursor. Absolute + reserved padding means hovering changes nothing about
   the layout, and the label can never run underneath the buttons either. */
.engine-schedule .sched-grid td.sched-cell {
  position: relative;
  padding-right: 2.5rem;
}

/* All-hands bands are centred and never carry tools, so they don't need the
   reservation -- it would just push the label off-centre. */
.engine-schedule .sched-grid td.sched-cell--allhands { padding-right: 0.5rem; }

.engine-schedule .sched-cell__tools {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  white-space: nowrap;
}
.engine-schedule .sched-cell:hover .sched-cell__tools { display: inline-block; }
/* Keep a locked cell's padlock visible without hovering -- it changes what a
   rebuild will do, so it shouldn't be hidden. */
.engine-schedule .sched-cell--locked .sched-cell__tools { display: inline-block; }

.engine-schedule .sched-cell__tool {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--shy-text-faint);
}
.engine-schedule .sched-cell__dup:hover { color: var(--shy-brand); }
.engine-schedule .sched-cell__clear:hover { color: var(--shy-danger); }

.engine-schedule .sched-cell--locked {
  box-shadow: inset 0 0 0 2px var(--shy-brand);
}

.engine-schedule .sched-cell[draggable="true"] { cursor: grab; }
.engine-schedule .sched-cell.is-dragging { opacity: 0.4; }
.engine-schedule .sched-cell.is-drop-target {
  outline: 2px dashed var(--shy-brand);
  outline-offset: -2px;
}

/* A selected cell. Deliberately a filled wash rather than an outline: a
   selection is usually a contiguous block of cells, and seven stacked
   outlines read as seven separate things instead of one. */
.engine-schedule .sched-cell.is-selected {
  background: var(--shy-brand-tint);
  box-shadow: inset 0 0 0 1px var(--shy-brand);
}
/* Beat the inline background-color a coloured task paints on its cell. */
.engine-schedule .sched-cell.is-selected .sched-cell__label {
  font-weight: 600;
  color: var(--shy-brand);
}

/* The empty cell typing goes into, and the editor that opens in it. */
.engine-schedule .sched-cell[data-fillable="true"] { cursor: cell; }
.engine-schedule .sched-cell.is-active {
  box-shadow: inset 0 0 0 2px var(--shy-brand);
}
.engine-schedule .sched-cell__editor {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--shy-brand);
  border-radius: 0;
  padding: 0 0.35rem;
  font: inherit;
  background: var(--shy-surface);
  color: var(--shy-text);
  user-select: text;
}

/* Sweeping a range drags the browser's own text selection along with it. */
.engine-schedule .sched-grid { user-select: none; }

.engine-schedule .sched-selection {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--shy-brand);
  border-radius: var(--shy-radius);
  background: var(--shy-brand-tint);
  color: var(--shy-brand);
  font-size: 0.85rem;
  font-weight: 600;
}

.engine-schedule .sched-selection__how {
  font-weight: 400;
  color: var(--shy-text-muted);
}

.engine-schedule .sched-selection .shy-btn { margin-left: auto; }

@media print {
  .engine-schedule .sched-selection { display: none; }
  .engine-schedule .sched-cell.is-selected {
    background: none;
    box-shadow: none;
  }
}

.engine-schedule .sched-warnbox--standing {
  border-left-color: var(--shy-brand);
  background: var(--shy-brand-tint);
}

/* ── Print: the wall poster ──────────────────────────────────────── */

@media print {
  /* NOTE: the landscape @page rule that used to live here has moved into
     schedule/days/show.html.erb (content_for :page_style). @page cannot be
     scoped to .engine-schedule -- it is a page-context at-rule -- so sitting
     in this stylesheet it set every page in the app to landscape, including
     dye recipe sheets and training SOPs. */

  /* The sheet is pinned to a LIGHT palette whatever the viewer's theme.
     Nothing else resets colour, so printing from a dark-mode browser
     resolved --shy-text to near-white on white paper and turned the
     all-hands bands into solid dark bars. */
  .engine-schedule {
    --shy-text: #000;
    --shy-text-muted: #333;
    --shy-text-faint: #555;
    --shy-surface: #fff;
    --shy-surface-alt: #f1f1f1;
    --shy-border: #999;
    --shy-brand: #2b4c6f;
    --shy-brand-tint: #e6edf4;
  }

  /* @page margin is 0 (see days/show.html.erb -- it's what suppresses the
     browser's own header and footer), so the sheet's margin lives here.
     Kept tight all round: the sheet is landscape so six people fit across,
     which leaves 34 slots in 8.5in of height. 6mm clears a typical
     printer's ~4mm unprintable edge. */
  .engine-schedule.shy-admin { padding: 6mm; }

  /* The host layout already strips the sidebar and top bar. These are the
     bits that only make sense on screen. The printed schedule is the day,
     the crew and the grid: the projection, the warnings, the demand table,
     the checklist and the assign-a-run form are all for whoever is building
     the day, and turned a one-page sheet into four. */
  .engine-schedule .sched-noprint,
  .engine-schedule .sched-cell__tools,
  .engine-schedule .shy-btn,
  .engine-schedule form.button_to,
  .engine-schedule .shy-card__title,
  .engine-schedule .sched-help,
  .engine-schedule .sched-tabs { display: none !important; }

  /* The header goes to the FOOT of the sheet, in fine print: the grid needs
     the whole height of a landscape page, and with the header on top the
     grid didn't fit, so it jumped to page 2 and left page 1 holding only
     the title. A flex column is what lets `order` move it below the grid. */
  .engine-schedule.shy-admin { display: flex; flex-direction: column; }
  .engine-schedule .shy-page-header {
    order: 1;
    margin: 2mm 0 0;
    padding: 0;
    border: none;
  }
  .engine-schedule .shy-page-header > :first-child {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
  }
  .engine-schedule .shy-page-header h1 { font-size: 8pt; margin: 0; }
  .engine-schedule .shy-page-header__subtitle { font-size: 8pt; margin: 0; }
  .engine-schedule .sched-notes { margin: 0 0 4mm; font-size: 9pt; }
  .engine-schedule .shy-card { margin: 0; }
  .engine-schedule .shy-card__body { padding: 0; }

  /* The grid normally scrolls inside a fixed-height box; on paper it has to
     flow to full length or everything past 75vh is simply lost. */
  .engine-schedule .sched-grid-wrap {
    max-height: none !important;
    overflow: visible !important;
    border: none;
  }

  /* Fixed layout shares the sheet's width evenly between the people, so a
     sixth column squeezes the others instead of running off the edge. A
     label too long for its share wraps rather than being clipped. */
  .engine-schedule .sched-grid { width: 100%; table-layout: fixed; }
  .engine-schedule .sched-grid th,
  .engine-schedule .sched-grid td {
    padding: 1pt 3pt;
    border-color: #999 !important;
    white-space: normal;
    /* On the cells, not just the table: the host's `.shy-admin td` sets a
       rem size on every cell, so the table's 8pt never reached them and the
       sheet printed at ~11pt. */
    font-size: 9pt;
    /* Pinned, not `normal`: Segoe UI's normal line height is ~1.33, which
       made 34 rows too tall for the sheet on Windows. */
    line-height: 1.2;
  }
  .engine-schedule .sched-grid thead th { font-size: 9.5pt; }
  /* Seven or more people: one size down, so the longest task names still fit
     their share of the width on one line. */
  .engine-schedule .sched-grid--wide th,
  .engine-schedule .sched-grid--wide td { font-size: 8pt; }
  .engine-schedule .sched-grid--wide thead th { font-size: 8.5pt; }
  /* The screen rule reserving 2.5rem on the right for the cell tools is more
     specific than the one above, so it has to be undone at its own weight.
     It cost each column 40px of paper for buttons that never print, which
     is what pushed a sixth person off the sheet. */
  .engine-schedule .sched-grid td.sched-cell { padding-right: 3pt; }
  .engine-schedule .sched-grid thead th { position: static; }
  .engine-schedule .sched-grid__time { position: static; width: 3.2em; }

  /* 9rem a column is five columns of 45rem on a 21cm sheet. On paper the
     columns share the sheet's width instead. */
  .engine-schedule .sched-cell { min-width: 0; }

  /* Keep the whole thing on one sheet rather than letting it split. */
  .engine-schedule .sched-grid tr { break-inside: avoid; }
  .engine-schedule .sched-grid-wrap { break-inside: avoid; }

  /* Colour-coded cells: keep the tints, browsers drop backgrounds otherwise. */
  .engine-schedule .sched-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .engine-schedule .shy-card { border: none; box-shadow: none; padding: 0; }
}

/* ── End-of-day checklist ────────────────────────────────────────────
   Note the `sched-eod` prefix rather than `sched-check`: this engine
   already uses `.sched-check` for the inline checkbox rows on the pinned
   block form, and every stylesheet in the app loads on every page. */

.engine-schedule .sched-cell--checklist,
.engine-schedule .sched-myday__task--checklist {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Keeps the fixed button from covering the last thing on the page. */
.engine-schedule .sched-eod-spacer { height: 4.75rem; }

.engine-schedule .sched-eod-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1rem;
  display: flex;
  justify-content: center;
  /* The bar spans the viewport so the button can sit dead centre; only the
     button itself should swallow clicks. */
  pointer-events: none;
  z-index: 40;
}

.engine-schedule .sched-eod-open {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: none;
  border-radius: 999px;
  background: var(--shy-brand);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
}

.engine-schedule .sched-eod-open__badge:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #fff;
  color: var(--shy-brand);
  font-size: 0.8rem;
}

.engine-schedule .sched-eod-open__badge.is-clear {
  background: var(--shy-success, #2e7d51);
  color: #fff;
}

.engine-schedule dialog.sched-eod {
  width: min(30rem, calc(100vw - 2rem));
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
}

.engine-schedule dialog.sched-eod::backdrop { background: rgb(0 0 0 / 45%); }

.engine-schedule .sched-eod__head { position: relative; margin-bottom: 0.75rem; }
.engine-schedule .sched-eod__head h2 { margin: 0; font-size: 1.15rem; }
.engine-schedule .sched-eod__date { margin: 0.1rem 0 0; color: var(--shy-text-muted); font-size: 0.85rem; }

.engine-schedule .sched-eod__close {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  border: none;
  background: none;
  color: var(--shy-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.engine-schedule .sched-eod__progress {
  margin: 0 0 0.6rem;
  color: var(--shy-text-muted);
  font-size: 0.85rem;
}
.engine-schedule .sched-eod__all { color: var(--shy-success, #2e7d51); font-weight: 600; }

.engine-schedule .sched-eod__list { list-style: none; margin: 0; padding: 0; }

.engine-schedule .sched-eod__item {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  border-bottom: 1px solid var(--shy-border);
}
.engine-schedule .sched-eod__item:last-child { border-bottom: none; }

/* The whole row is the tap target -- this gets used on a phone, one-handed,
   by someone holding a mop. */
.engine-schedule .sched-eod__tick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.2rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.engine-schedule .sched-eod__box {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--shy-border);
  border-radius: 0.35rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.engine-schedule .sched-eod__name { flex: 1; }

.engine-schedule .sched-eod__who {
  color: var(--shy-text-muted);
  font-size: 0.75rem;
  text-align: right;
  white-space: nowrap;
}

.engine-schedule .sched-eod__item.is-done .sched-eod__box {
  border-color: var(--shy-success, #2e7d51);
  background: var(--shy-success, #2e7d51);
}
.engine-schedule .sched-eod__item.is-done .sched-eod__name {
  color: var(--shy-text-muted);
  text-decoration: line-through;
}

/* Present in the markup for everyone, because the list is broadcast to
   everyone and can't know who's reading it. Each page reveals it based on
   its own viewer; the server is what actually enforces the permission. */
.engine-schedule .sched-eod__remove { display: none; }
.engine-schedule [data-can-edit="true"] .sched-eod__remove {
  display: inline-block;
  align-self: center;
  border: none;
  background: none;
  color: var(--shy-text-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.4rem;
  cursor: pointer;
}
.engine-schedule .sched-eod__remove:hover { color: var(--shy-danger); }

.engine-schedule .sched-eod__add {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.engine-schedule .sched-eod__add input { flex: 1; }

.engine-schedule .sched-eod__foot {
  margin: 0.7rem 0 0;
  color: var(--shy-text-muted);
  font-size: 0.78rem;
}

.engine-schedule .sched-eod__link {
  border: none;
  background: none;
  padding: 0;
  color: var(--shy-brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media print {
  .engine-schedule .sched-eod-sticky,
  .engine-schedule .sched-eod-spacer,
  .engine-schedule dialog.sched-eod { display: none; }
}

/* ── End-of-day meeting notes ────────────────────────────────────────
   `sched-meeting` rather than `sched-notes`: `.sched-notes` is already the
   day's own notes box on My Day, and every stylesheet loads on every page.
   Ticks reuse the checklist's `.sched-eod__box`. */

.engine-schedule .sched-eod__subhead { margin: 1.4rem 0 0.35rem; font-size: 1rem; }

.engine-schedule .sched-meeting-list { list-style: none; margin: 0; padding: 0; }

.engine-schedule .sched-meeting-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--shy-border);
}
.engine-schedule .sched-meeting-note:last-child { border-bottom: none; }

.engine-schedule .sched-meeting-note__tick {
  flex: none;
  padding: 0.1rem;
  border: none;
  background: none;
  cursor: pointer;
}

.engine-schedule .sched-meeting-note.is-done .sched-eod__box {
  border-color: var(--shy-success, #2e7d51);
  background: var(--shy-success, #2e7d51);
}

.engine-schedule .sched-meeting-note__main { flex: 1; min-width: 0; }

.engine-schedule .sched-meeting-note__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.engine-schedule .sched-meeting-note.is-done .sched-meeting-note__body { color: var(--shy-text-muted); }

.engine-schedule .sched-meeting-note__meta {
  margin: 0.2rem 0 0;
  color: var(--shy-text-muted);
  font-size: 0.75rem;
}

.engine-schedule .sched-meeting-note__carried { color: var(--shy-warning); font-weight: 600; }

/* Revealed per viewer by the notes controller -- see _list. */
.engine-schedule .sched-meeting-note__remove { display: none; }
.engine-schedule .sched-meeting-note.can-remove .sched-meeting-note__remove {
  display: inline-block;
  border: none;
  background: none;
  color: var(--shy-text-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}
.engine-schedule .sched-meeting-note__remove:hover { color: var(--shy-danger); }

.engine-schedule .sched-meeting__add {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.engine-schedule .sched-meeting__add textarea {
  flex: 1;
  min-height: 2.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
  resize: vertical;
}

.engine-schedule .sched-meeting__hint { margin: 0.45rem 0 0; color: var(--shy-text-muted); font-size: 0.78rem; }

.engine-schedule .sched-myday-notes { margin-top: 1.5rem; }

/* Timetable settings: the one-line "add a crew" form under each stage. */
.engine-schedule .sched-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

/* ── New Schedule wizard ─────────────────────────────────────────────── */

.engine-schedule .sched-wiz-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.engine-schedule .sched-wiz-steps button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--shy-border);
  border-radius: 999px;
  background: var(--shy-surface);
  color: var(--shy-text-muted);
  font: inherit;
  cursor: pointer;
}
.engine-schedule .sched-wiz-steps button span {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--shy-border);
  color: var(--shy-text);
  font-size: 0.8rem;
}
.engine-schedule .sched-wiz-steps .is-current button {
  border-color: var(--shy-brand);
  color: var(--shy-text);
  font-weight: 600;
}
.engine-schedule .sched-wiz-steps .is-current button span,
.engine-schedule .sched-wiz-steps .is-done button span {
  background: var(--shy-brand);
  color: #fff;
}

.engine-schedule .sched-wiz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.engine-schedule .sched-wiz-count { margin: 0; text-align: right; }
.engine-schedule .sched-wiz-count strong { display: block; font-size: 2.25rem; line-height: 1; }
.engine-schedule .sched-wiz-count span { color: var(--shy-text-muted); }

.engine-schedule .sched-wiz-big input { font-size: 1.5rem; max-width: 10rem; }

.engine-schedule .sched-wiz-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}
.engine-schedule .sched-wiz-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--shy-border);
  border-left: 4px solid var(--tile-swatch, var(--shy-border));
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  cursor: pointer;
  user-select: none;
  opacity: 0.6;
}
.engine-schedule .sched-wiz-tile:has(.sched-wiz-tile__check:checked) {
  border-color: var(--shy-brand);
  background: var(--shy-brand-tint);
  opacity: 1;
}
.engine-schedule .sched-wiz-tile:has(.sched-wiz-tile__check:focus-visible) {
  outline: 2px solid var(--shy-brand);
  outline-offset: 2px;
}
/* The checkbox drives the tile but isn't what you tap. */
.engine-schedule .sched-wiz-tile__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.engine-schedule .sched-wiz-tile__name { font-weight: 600; }
.engine-schedule .sched-wiz-tile__qty { cursor: auto; }
.engine-schedule .sched-wiz-tile__hint { font-size: 0.8rem; color: var(--shy-text-muted); }

.engine-schedule .sched-wiz-more { margin-top: 1rem; }
.engine-schedule .sched-wiz-more summary { cursor: pointer; color: var(--shy-text-muted); }
/* "What are we dyeing?": the answers sit side by side, not in the task grid's columns. */
.engine-schedule .sched-wiz-tiles--choice { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }