/* THE SCHEDULE'S CREWS (Chase, 26 Oct 2026, the mockups' V2): trade chips, the
   crew colours and the dispatch board. Plain CSS on the app's own tokens, so no
   colour is ever written inline: a crew's colour is one of twelve fixed
   classes (.crew-c0 … .crew-c11), and a block's place on the board is one of a
   fixed set of column classes. */

/* ---- trades ---- */
.ui-trade-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }
.ui-trade-chip {
  display: inline-flex; align-items: center; padding: 0 0.4375rem; border: 1px solid var(--color-line-strong, #d3ccc0);
  border-radius: 999px; background: #fff; color: var(--color-muted, #6b6259); font-size: 0.75rem; line-height: 1.25rem; font-weight: 600;
  white-space: nowrap;
}
.ui-trade-tick {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.875rem;
  border: 1px solid var(--color-line-strong, #d3ccc0); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600;
}
.ui-trade-tick:has(input:checked) { border-color: var(--color-accent, #b45309); background: var(--color-accent-soft, #fdf1e1); }
.ui-trade-tick input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent, #b45309); }
.ui-trade-warn { color: var(--color-warn, #7a4a00); font-weight: 600; }
.ui-trades-row { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
.ui-trades-row .ui-need[aria-current] { background: var(--color-accent-soft, #fdf1e1); border-color: var(--color-accent, #b45309); color: var(--color-accent-strong, #92400e); }

/* ---- crew colours: twelve fixed pairs, the edge and a soft fill ---- */
.crew-c0  { --crew: #0f766e; --crew-soft: #e6f4f1; }
.crew-c1  { --crew: #1d4ed8; --crew-soft: #e8efff; }
.crew-c2  { --crew: #7c3aed; --crew-soft: #f1ebfe; }
.crew-c3  { --crew: #4d7c0f; --crew-soft: #eef6e0; }
.crew-c4  { --crew: #92400e; --crew-soft: #fbefe0; }
.crew-c5  { --crew: #86198f; --crew-soft: #f9e8fb; }
.crew-c6  { --crew: #0e7490; --crew-soft: #e2f5f9; }
.crew-c7  { --crew: #be185d; --crew-soft: #fde8f1; }
.crew-c8  { --crew: #a16207; --crew-soft: #fbf3d9; }
.crew-c9  { --crew: #4338ca; --crew-soft: #e9e9fd; }
.crew-c10 { --crew: #047857; --crew-soft: #e1f5ec; }
.crew-c11 { --crew: #475569; --crew-soft: #edf0f4; }
.crew-swatch {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.75rem;
  border: 1px solid var(--color-line-strong, #d3ccc0); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600;
}
.crew-swatch:has(input:checked) { border-color: var(--crew); background: var(--crew-soft); box-shadow: inset 0 0 0 1px var(--crew); }
.crew-swatch { flex: none; position: relative; white-space: nowrap; }
.crew-swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.crew-swatch:has(input:focus-visible) { outline: 3px solid rgba(180, 83, 9, 0.5); outline-offset: 2px; }
.ui-swatch-dot { display: inline-block; width: 1rem; height: 1rem; border-radius: 4px; background: var(--crew, #9a9186); flex: none; }
/* A crew's card on the week, the month and the day: its colour down the left edge. */
.ui-week-entry[data-crew] > .ui-week-link,
a.ui-crew-tile, div.ui-crew-tile { border-left: 4px solid var(--crew); }
.ui-week-entry[data-crew] > .ui-week-link { background: linear-gradient(90deg, var(--crew-soft), #fff 60%); }
.ui-key-crews { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.ui-key-crews li { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--color-ink, #1f1a14); }

/* ---- the dispatch board ---- */
.sb-wrap { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sb-card { overflow: hidden; }
.sb-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.sb-scroll:focus-visible { outline: 3px solid rgba(180, 83, 9, 0.5); outline-offset: -3px; }
.sb-scroll-hint { margin: 0; padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--color-muted, #6b6259); border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sb-table { min-width: 46rem; }
.sb-row { display: grid; border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sb-row:last-child { border-bottom: 0; }
.sb-days-6 { grid-template-columns: 9.5rem repeat(6, minmax(6rem, 1fr)); }
.sb-days-7 { grid-template-columns: 9.5rem repeat(7, minmax(6rem, 1fr)); }
.sb-col-2 { grid-column-start: 2; } .sb-col-3 { grid-column-start: 3; } .sb-col-4 { grid-column-start: 4; }
.sb-col-5 { grid-column-start: 5; } .sb-col-6 { grid-column-start: 6; } .sb-col-7 { grid-column-start: 7; } .sb-col-8 { grid-column-start: 8; }
.sb-span-1 { grid-column-end: span 1; } .sb-span-2 { grid-column-end: span 2; } .sb-span-3 { grid-column-end: span 3; }
.sb-span-4 { grid-column-end: span 4; } .sb-span-5 { grid-column-end: span 5; } .sb-span-6 { grid-column-end: span 6; } .sb-span-7 { grid-column-end: span 7; }
.sb-lanes-1 { grid-template-rows: minmax(4.25rem, auto); }
.sb-lanes-2 { grid-template-rows: repeat(2, minmax(3.75rem, auto)); }
.sb-lanes-3 { grid-template-rows: repeat(3, minmax(3.75rem, auto)); }
.sb-lanes-4 { grid-template-rows: repeat(4, minmax(3.75rem, auto)); }
.sb-lane-1 { grid-row: 1; } .sb-lane-2 { grid-row: 2; } .sb-lane-3 { grid-row: 3; } .sb-lane-4 { grid-row: 4; }

.sb-head-row { background: var(--color-page, #f5f4f1); }
.sb-corner, .sb-label { display: flex; flex-direction: column; justify-content: center; padding: 0.375rem 0.625rem; border-right: 1px solid var(--color-line, #e6e1d8); font-size: 0.875rem; }
.sb-label { color: var(--color-muted, #6b6259); font-size: 0.8125rem; }
.sb-day { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 0.375rem 0.5rem; border-left: 1px solid var(--color-line, #e6e1d8); color: var(--color-ink, #1f1a14); text-decoration: none; }
.sb-day:hover { background: #fff; }
.sb-day.is-today { background: var(--color-accent-soft, #fdf1e1); color: var(--color-accent-strong, #92400e); box-shadow: inset 0 3px 0 var(--color-accent, #b45309); }
.sb-thin { font-size: 0.8125rem; }
.sb-thin-cell { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem 0.5rem; border-left: 1px solid var(--color-line, #e6e1d8); min-width: 0; }
.sb-thin-cell.is-today, .sb-cell.is-today { background: #fffaf2; }
.sb-visits, .sb-run { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; color: var(--color-ink, #1f1a14); text-decoration: none; }
a.sb-visits:hover, a.sb-run:hover { text-decoration: underline; }
.sb-dots { display: inline-flex; gap: 2px; }
.sb-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--color-muted, #6b6259); }
.sb-dot.is-warn { background: var(--color-warn-fill, #b7791f); }
.sb-no-truck { color: var(--color-bad-ink, #991b1b); font-weight: 600; }
.sb-empty { margin: 0; padding: 1rem; color: var(--color-muted, #6b6259); }

.sb-crew { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem;
  border-right: 1px solid var(--color-line, #e6e1d8); border-left: 4px solid var(--crew, #9a9186); min-width: 0; }
.sb-crew-name { font-weight: 700; color: var(--color-ink, #1f1a14); overflow-wrap: anywhere; }
.sb-cell { grid-row: 1 / -1; position: relative; border-left: 1px solid var(--color-line, #e6e1d8); min-height: 4.25rem; }
.sb-cell.is-off { background: repeating-linear-gradient(135deg, #f1eee8 0 6px, #fbfaf7 6px 12px); }
.sb-cell.is-double { box-shadow: inset 0 0 0 2px var(--color-bad, #b91c1c); }
.sb-free, .sb-off, .sb-double { position: absolute; left: 0.5rem; bottom: 0.375rem; font-size: 0.75rem; color: var(--color-muted, #6b6259); }
.sb-off { right: 0.5rem; left: auto; font-weight: 600; }
.sb-held { position: absolute; inset-inline: 0.375rem; bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--color-warn-ink, #92400e); overflow-wrap: anywhere; pointer-events: none; }
.sb-booked-off { position: absolute; top: 0.125rem; right: 0.25rem; z-index: 6; padding: 0 0.25rem; border-radius: 0.25rem; background: var(--color-bad-ink, #991b1b); color: #fff; font-size: 0.6875rem; font-weight: 700; pointer-events: none; }
.sb-double { color: var(--color-bad-ink, #991b1b); font-weight: 700; top: 0.25rem; bottom: auto; left: auto; right: 0.375rem; }
.sb-cell.is-drop-ok { background: var(--color-good-soft, #e9f7ee); box-shadow: inset 0 0 0 2px var(--color-good-fill, #16a34a); }
.sb-cell.is-drop-warn { background: var(--color-warn-soft, #fef6d4); box-shadow: inset 0 0 0 2px var(--color-warn-fill, #b7791f); }

.sb-block { position: relative; z-index: 1; margin: 0.25rem; padding: 0.3125rem 0.5rem; min-width: 0; border-radius: 0.5rem;
  border: 1px solid var(--crew, #9a9186); border-left-width: 4px; background: var(--crew-soft, #f5f4f1);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; overflow: hidden; }
.sb-block[draggable="true"] { cursor: grab; }
.sb-block.is-missing { border-color: var(--color-accent, #b45309); background: #fff4e6; }
.sb-block.is-double { box-shadow: 0 0 0 2px var(--color-bad, #b91c1c); }
.sb-block.is-offered { border-style: dashed; }
.sb-wrap.is-dragging .sb-block { pointer-events: none; }
.sb-wrap.is-dragging .sb-block.is-lifted { opacity: 0.45; }
/* The customer's name is the only thing that says whose job it is: it wraps to
   two lines rather than "Ned ..." (live critique 27 Oct). */
.sb-block-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 100%; font-weight: 700; font-size: 0.875rem; line-height: 1.125rem; color: var(--color-ink, #1f1a14); overflow: hidden; overflow-wrap: anywhere; text-decoration: none; }
a.sb-block-name:hover { text-decoration: underline; }
.sb-block-meta { max-width: 100%; font-size: 0.75rem; color: var(--color-muted, #6b6259); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 0 0.4375rem; border-radius: 999px; font-size: 0.75rem; line-height: 1.375rem;
  font-weight: 700; background: var(--color-warn-soft, #fef6d4); color: var(--color-warn, #7a4a00); border: 1px solid #f1d58a; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sb-chip { min-height: 1.5rem; }
a.sb-chip:hover { text-decoration: underline; }
.sb-chip.is-crew { background: var(--color-bad-soft, #fdecec); color: var(--color-bad-ink, #991b1b); border-color: #f3b4b4; }
.sb-chip.is-tell { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.sb-chip.is-trade { background: #fff; color: var(--color-accent-strong, #92400e); border-color: var(--color-accent, #b45309); }
.sb-chip.is-quiet { background: #fff; color: var(--color-muted, #6b6259); border-color: var(--color-line-strong, #d3ccc0); }
.sb-chip.is-good { background: var(--color-good-soft, #ecfdf3); color: var(--color-good, #166534); border-color: #bbe5c8; }
.sb-chip.is-said-no { background: var(--color-warn-soft, #fff7ed); color: var(--color-warn, #9a3412); border-color: #fed7aa; }
/* What the crew said is read whole ("Confirmed for Nov 5"), even on a one-day block: it wraps, never cut. */
.sb-chip[data-board-said] { white-space: normal; overflow: visible; line-height: 1.125rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }
.sb-chip-act { font-weight: 600; text-decoration: underline; }

/* THE STRIP ABOVE THE BOARD (Chase's pick, 3 Nov: "Strip above the board"): one
   card of three rows of chips (this week, next week, no date), the form a
   tapped chip opens right under it, and on a phone three small tabs with the
   chips sliding sideways inside the row. */
.sb-strip { display: flex; flex-direction: column; min-width: 0; }
.sb-strip-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.75rem 1.25rem; }
.sb-strip-head h2 { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.005em; color: var(--color-ink, #1f1a14); }
.sb-strip-head .ui-hcount { display: inline-flex; align-items: center; min-width: 1.5rem; justify-content: center; padding: 0 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--color-accent-soft, #fdf1e1); color: var(--color-accent-strong, #92400e); }
.sb-strip-head .ui-hcount.is-quiet { background: var(--color-page, #f5f4f1); color: var(--color-muted, #6b6259); }
.sb-strip-head .hint { margin: 0; font-size: 0.875rem; color: var(--color-muted, #6b6259); }
.sb-strip-all { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 600; }
.sb-strip-note { margin: 0; padding: 0 1.25rem 0.5rem; font-size: 0.8125rem; color: var(--color-muted, #6b6259); }
.sb-strip-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 0.75rem; align-items: start; padding: 0.5rem 1.25rem; border-top: 1px solid var(--color-line, #e6e1d8); }
.sb-strip-lab { display: flex; flex-direction: column; padding-top: 0.25rem; }
.sb-strip-lab .ui-eyebrow { color: var(--color-ink, #1f1a14); }
.sb-strip-lab .n { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--color-muted, #6b6259); }
.sb-strip-lab .why { font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted, #6b6259); }
.sb-strip-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sb-qchip { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; gap: 0.375rem; min-width: 0; max-width: 100%; min-height: 2.25rem; padding: 0 0.625rem 0 0.375rem;
  border: 1px solid var(--color-line, #e6e1d8); border-left: 3px solid var(--color-line-strong, #d3ccc0); border-radius: 0.5rem; background: #fff; }
.sb-qchip[hidden] { display: none; }
.sb-qchip.is-dated { border-left: 3px dashed var(--color-bad, #b91c1c); }
.sb-qchip.is-open { border-color: var(--color-accent, #b45309); border-left: 3px solid var(--color-accent, #b45309); background: var(--color-accent-soft, #fdf1e1); }
.sb-qchip[draggable="true"] { cursor: pointer; }
.sb-qchip[draggable="true"]:active { cursor: grabbing; }
.sb-qchip.is-lifted { opacity: 0.45; }
.sb-grip { display: inline-flex; color: var(--color-line-strong, #d3ccc0); }
.sb-qname { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: 0.9375rem; font-weight: 700; color: var(--color-ink, #1f1a14); text-decoration: none; }
a.sb-qname:hover { text-decoration: underline; }
.sb-qtown { font-size: 0.875rem; color: var(--color-muted, #6b6259); }
.sb-qtag { display: inline-flex; align-items: center; padding: 0 0.5rem; border: 1px solid var(--color-line-strong, #d3ccc0); border-radius: 999px; background: var(--color-page, #f5f4f1);
  font-size: 0.75rem; line-height: 1.25rem; font-weight: 600; color: var(--color-muted, #6b6259); }
.sb-qtag.is-when { background: var(--color-bad-soft, #fdecec); color: var(--color-bad-ink, #991b1b); border-color: #f3b4b4; }
.sb-qtag.is-hold, .sb-qtag.is-street, .sb-qtag.is-past { background: var(--color-warn-soft, #fef6d4); color: var(--color-warn, #7a4a00); border-color: #f1d58a; }
.sb-qmore-btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 1px dashed var(--color-line-strong, #d3ccc0); border-radius: 0.5rem; background: #fff;
  font-size: 0.875rem; font-weight: 600; color: var(--color-accent-strong, #92400e); cursor: pointer; }
.sb-qchip .sb-mark { position: static; flex: none; }

/* The form a tapped chip opens, right under the strip */
.sb-sform { margin: 0 1.25rem 0.875rem; border: 1px solid var(--color-accent, #b45309); border-radius: 0.5rem; background: #fff; overflow: hidden; }
.sb-sform[hidden] { display: none; }
.sb-sform .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.625rem 0.875rem; background: var(--color-accent-soft, #fdf1e1); }
.sb-sform .hd b { font-size: 1rem; font-weight: 700; color: var(--color-ink, #1f1a14); }
.sb-sform .hd span { font-size: 0.8125rem; color: var(--color-muted, #6b6259); }
.sb-sform .hd a { margin-left: auto; font-size: 0.875rem; font-weight: 600; }
.sb-sform .hd .close { margin-left: 0; padding: 0; border: 0; background: none; font-size: 0.875rem; font-weight: 600; color: var(--color-accent-strong, #92400e); cursor: pointer; min-height: 44px; }
.sb-sform .hd a[hidden] + .close { margin-left: auto; }
.sb-sform .bd { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0.875rem 0.875rem; }
.sb-sform .three { display: grid; grid-template-columns: 11rem minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.75rem; }
.sb-sform .sc-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.875rem; color: var(--color-muted, #6b6259); }
.sb-sform .sc-field[hidden], .sb-sform [hidden] { display: none !important; }
.sb-sform .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sb-sform .foot .note { margin: 0 0 0 auto; max-width: 24rem; text-align: right; font-size: 0.8125rem; color: var(--color-muted, #6b6259); }

/* The Free crews row, and the on-sites + trucks row */
.sb-two { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-width: 0; min-height: 3.125rem; padding: 0.375rem 0.5rem; border-left: 1px solid var(--color-line, #e6e1d8); }
.sb-two.is-today { background: #fffaf2; }
.sb-two .sb-visits, .sb-two .sb-run, .sb-two .sb-no-truck { min-height: 1.125rem; }
.sb-no-truck { display: inline-flex; align-items: center; gap: 0.25rem; }
.sb-dash { color: var(--color-line-strong, #d3ccc0); }
.sb-row[hidden] { display: none; }
.sb-caprow { min-height: 3.75rem; background: #faf9f7; }
.sb-caprow .sb-label { gap: 0.125rem; }
.sb-caprow .sb-label b { font-size: 0.875rem; font-weight: 600; color: var(--color-ink, #1f1a14); }
.sb-showlink { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 0.8125rem; font-weight: 600; text-align: left; color: var(--color-accent-strong, #92400e); cursor: pointer; }
.sb-cap { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: 0; margin: 0.25rem; padding: 0.25rem 0.5rem; border: 1px dashed var(--color-line-strong, #d3ccc0); border-radius: 0.5rem; background: #fff; }
.sb-cap .w { font-size: 0.875rem; color: var(--color-muted, #6b6259); white-space: nowrap; }
.sb-cap .w b { font-size: 1rem; font-weight: 700; color: var(--color-ink, #1f1a14); font-variant-numeric: tabular-nums; }
.sb-cap .bar { display: block; height: 0.25rem; border-radius: 999px; background: var(--color-chart-track, #ebe6dd); overflow: hidden; }
.sb-cap .bar i { display: block; height: 100%; background: var(--color-chart-muted, #9a9186); }
.sb-cap.is-low .w b { color: var(--color-warn, #7a4a00); }
.sb-cap.is-low .bar i { background: var(--color-warn-fill, #b7791f); }
.sb-cap.is-drop-ok { background: var(--color-good-soft, #e9f7ee); border-style: solid; border-color: var(--color-good-fill, #16a34a); }
.sb-fill-0 { width: 0; } .sb-fill-10 { width: 10%; } .sb-fill-20 { width: 20%; } .sb-fill-30 { width: 30%; } .sb-fill-40 { width: 40%; } .sb-fill-50 { width: 50%; }
.sb-fill-60 { width: 60%; } .sb-fill-70 { width: 70%; } .sb-fill-80 { width: 80%; } .sb-fill-90 { width: 90%; } .sb-fill-100 { width: 100%; }

/* The one amber mark on a job, and the card it opens */
.sb-mark { position: absolute; top: 0.1875rem; right: 0.1875rem; z-index: 2; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.sb-mark > span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; line-height: 1; color: #fff; }
.sb-mark.is-warn > span { background: var(--color-warn-fill, #b7791f); }
.sb-mark.is-tell > span { background: #4f46e5; }
.sb-mark:focus-visible { outline: 3px solid rgba(180, 83, 9, 0.5); outline-offset: 1px; border-radius: 999px; }
/* A thumb's 44px hit area round the small dot */
@media (max-width: 1023px) { .sb-mark { width: 2.75rem; height: 2.75rem; top: 0; right: 0; } }
.sb-block.has-mark .sb-block-name { padding-right: 1.5rem; }
.sb-block.is-flagged { border-color: var(--color-accent, #b45309); background: #fff4e6; }
.sb-pop { width: min(22rem, calc(100vw - 2rem)); margin: auto; padding: 1rem; border: 1px solid var(--color-line-strong, #d3ccc0); border-radius: 0.75rem; background: #fff;
  color: var(--color-ink, #1f1a14); box-shadow: 0 20px 50px rgba(31, 26, 20, 0.25); }
.sb-pop::backdrop { background: rgba(31, 26, 20, 0.2); }
.sb-pop-name { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; }
.sb-pop-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.sb-pop-list .sb-chip { white-space: normal; overflow: visible; line-height: 1.25rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }
@supports not selector(:popover-open) { .sb-pop { display: none; } }

/* The board on a phone: the days across, the tapped day's jobs under them */
.sb-phone { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.sb-daystrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.sb-daybtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.0625rem; min-height: 4.5rem; padding: 0.5rem 0.125rem; border: 1px solid var(--color-line-strong, #d3ccc0);
  border-radius: 0.5rem; background: #fff; color: var(--color-ink, #1f1a14); text-decoration: none; }
.sb-daybtn .dow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted, #6b6259); }
.sb-daybtn .num { font-size: 1.25rem; font-weight: 700; line-height: 1.5rem; }
.sb-daybtn .cnt { font-size: 0.6875rem; color: var(--color-muted, #6b6259); white-space: nowrap; }
.sb-daybtn .dot { position: absolute; top: 0.25rem; right: 0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-bad, #b91c1c); }
.sb-daybtn.is-today { border-color: var(--color-accent, #b45309); }
.sb-daybtn.is-on { background: var(--color-accent-soft, #fdf1e1); border-color: var(--color-accent, #b45309); box-shadow: inset 0 0 0 1px var(--color-accent, #b45309); }
.sb-dayboard[hidden] { display: none; }
.sb-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sb-dayhead h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-ink, #1f1a14); }
.sb-dayhead span { font-size: 0.8125rem; color: var(--color-muted, #6b6259); }
.sb-dayempty { margin: 0; padding: 1rem; color: var(--color-muted, #6b6259); }
.sb-dayjobs { margin: 0; padding: 0; list-style: none; }
.sb-dayjob { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; border-left: 4px solid var(--crew, #9a9186); border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sb-dayjob:last-child { border-bottom: 0; }
.sb-dayjob-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; }
.sb-dayjob .nm { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; font-weight: 700; color: var(--color-ink, #1f1a14); text-decoration: none; }
.sb-dayjob .crew { font-size: 0.875rem; color: var(--color-muted, #6b6259); }
.sb-dayjob .mt { margin: 0; font-size: 0.875rem; color: var(--color-muted, #6b6259); }
.sb-dayjob-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sb-dayfacts { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.625rem 1rem; border-top: 1px solid var(--color-line, #e6e1d8); background: #faf9f7; font-size: 0.875rem; }

/* The week's one card: Next, with its button, and what this week needs under it */
.sb-attn { overflow: hidden; border-left: 4px solid var(--color-accent, #b45309); }
.sb-attn .sb-attn-next + .sb-attn-needs { border-top: 1px solid var(--color-line, #e6e1d8); }
.sb-attn-needs { padding: 0.75rem 1rem; }
@media (min-width: 640px) { .sb-attn-needs { padding: 0.75rem 1.25rem; } }
.ui-need.ui-need-tell { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }

@media (max-width: 639px) {
  .sb-strip-head { padding: 0.75rem 1rem 0.5rem; }
  .sb-strip-tabs { display: flex; gap: 0.375rem; overflow-x: auto; padding: 0 1rem 0.5rem; scrollbar-width: none; }
  .sb-strip-tabs .ui-chip { flex: none; min-height: 2.75rem; }
  .sb-strip-row { display: block; padding: 0 1rem 0.875rem; border-top: 0; }
  .sb-strip-row.is-off { display: none; }
  .sb-strip-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }
  .sb-qchip { flex: 0 0 13.5rem; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.375rem; padding: 0.625rem 0.75rem; border-left-width: 3px; }
  .sb-qchip .sb-grip { display: none; }
  .sb-qname { width: 100%; min-height: 1.5rem; }
  .sb-sform { margin: 0 1rem 1rem; }
  .sb-sform .three { grid-template-columns: minmax(0, 1fr); }
  .sb-sform .foot .note { margin-left: 0; text-align: left; max-width: none; }
}
/* A phone draws the day strip and not the sideways board; a desk the reverse. Said here, not with the
   utility classes, because these rules set display themselves. */
@media (min-width: 640px) { .sb-strip-tabs, .sb-phone { display: none; } }
@media (max-width: 639px) { .sb-wrap > [data-board-card], .sb-strip-lab { display: none; } }

.sb-sheet { width: min(32rem, calc(100vw - 2rem)); border: 0; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 20px 50px rgba(31, 26, 20, 0.25); }
.sb-sheet::backdrop { background: rgba(31, 26, 20, 0.35); }
.sb-tip { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.5rem 0.875rem; border-radius: 0.5rem; background: #1f1a14; color: #fff; font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.sb-crew .ui-trade-chip { white-space: normal; }
@media (max-width: 639px) {
  .sb-table { min-width: 40rem; }
  .sb-days-6 { grid-template-columns: 6.75rem repeat(6, minmax(5.5rem, 1fr)); }
  .sb-days-7 { grid-template-columns: 6.75rem repeat(7, minmax(5.5rem, 1fr)); }
  .sb-crew { padding: 0.375rem 0.5rem; }
}

/* ---- Expand: the full view ---- */
/* It covers the page, so what the last press answered floats over it, never behind it (night walk, 4 Nov). */
body:has(.sf-wrap) .ui-toasts { position: fixed; top: 4.75rem; left: 50%; transform: translateX(-50%); z-index: 58; width: min(40rem, calc(100vw - 2rem)); }
.sf-wrap { position: fixed; inset: 0; z-index: 55; overflow: auto; background: var(--color-page, #f5f4f1); display: flex; flex-direction: column; }
.sf-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 1rem;
  background: #1f1a14; color: #fff; border-bottom: 3px solid var(--color-accent, #b45309); }
.sf-title { margin: 0 auto 0 0; order: 0; font-size: 1.25rem; font-weight: 800; color: #fff; }
@media (min-width: 1024px) { .sf-title { margin-right: 0.5rem; } .sf-close { margin-left: auto; } }
.sf-btn { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 0.875rem;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 0.5rem; color: #fff; font-weight: 700; background: transparent; text-decoration: none; }
.sf-btn:hover { background: rgba(255,255,255,0.1); }
.sf-btn svg { width: 1.125rem; height: 1.125rem; }
.sf-tabs { display: inline-flex; padding: 0.1875rem; border-radius: 0.625rem; background: rgba(255,255,255,0.12); }
.sf-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.875rem; border-radius: 0.5rem; color: #d6cfc4; font-weight: 700; text-decoration: none; }
.sf-tab[aria-current] { background: #fff; color: #1f1a14; }
.sf-who { display: inline-flex; gap: 0.375rem; }
.sf-who .sf-btn { display: none; }
.sf-select { min-height: 44px; max-width: 12rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.28); background: #2b2520; color: #fff; padding: 0 0.625rem; }
.sf-esc { color: #bdb3a6; font-size: 0.8125rem; }
.sf-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.625rem 1rem; background: #fff; border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sf-key { margin: 0; }
.sf-dot-nocrew { background: var(--color-bad, #b91c1c); }
.sf-main { padding: 0.75rem 1rem 2rem; min-width: 0; }
.sf-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-line-strong, #d3ccc0); border-left: 1px solid var(--color-line-strong, #d3ccc0);
  background: #fff; border-radius: 0.5rem; overflow: hidden; }
.sf-head { padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted, #6b6259);
  background: var(--color-page, #f5f4f1); border-right: 1px solid var(--color-line-strong, #d3ccc0); border-bottom: 1px solid var(--color-line-strong, #d3ccc0); }
.sf-day { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; min-height: 7rem; padding: 0.375rem; color: var(--color-ink, #1f1a14); text-decoration: none;
  border-right: 1px solid var(--color-line-strong, #d3ccc0); border-bottom: 1px solid var(--color-line-strong, #d3ccc0); }
.sf-grid.is-weeks .sf-day { min-height: 11rem; }
.sf-day:hover { background: #fffaf2; }
.sf-day.is-outside { background: var(--color-page, #f5f4f1); color: var(--color-muted, #6b6259); }
.sf-day.is-today { box-shadow: inset 0 0 0 2px var(--color-accent, #b45309); background: #fffaf2; }
.sf-date { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 0.875rem; }
.sf-flag { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-bad, #b91c1c); }
.sf-chip { display: flex; align-items: center; gap: 0.25rem; min-width: 0; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; font-size: 0.8125rem; line-height: 1.25rem;
  background: var(--crew-soft, #f5f4f1); border-left: 3px solid var(--crew, #9a9186); }
.sf-chip.is-nocrew { --crew: #b91c1c; --crew-soft: #fdecec; border-left-style: dashed; }
.sf-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chip-of { color: var(--color-muted, #6b6259); font-size: 0.75rem; flex: none; }
.sf-bang { margin-left: auto; color: var(--color-bad, #b91c1c); font-weight: 900; flex: none; }
.sf-count { margin-top: auto; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--color-muted, #6b6259); }
.sf-visit-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--color-muted, #6b6259); }
@media (max-width: 639px) {
  .sf-main { padding: 0.5rem; }
  .sf-day { min-height: 4.25rem; padding: 0.25rem; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 0.1875rem; }
  .sf-grid.is-weeks .sf-day { min-height: 5rem; }
  .sf-date { flex-basis: 100%; font-size: 0.8125rem; }
  .sf-chip { width: 0.6875rem; height: 0.6875rem; padding: 0; border: 0; border-radius: 2px; background: var(--crew, #9a9186); }
  .sf-chip > * { display: none; }
  .sf-count { flex-basis: 100%; font-size: 0; }
  .sf-count .sf-visit-dot { font-size: 0.75rem; }
  .sf-head { padding: 0.25rem; text-align: center; font-size: 0.6875rem; }
  .sf-select { max-width: 9rem; }
  .sf-esc { display: none; }
}
.sf-drawer-back { position: fixed; inset: 0; z-index: 56; background: rgba(31, 26, 20, 0.35); }
.sf-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 57; width: min(32rem, 100vw); display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,0.25); }
.sf-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-line, #e6e1d8); }
.sf-round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--color-line-strong, #d3ccc0); color: var(--color-ink, #1f1a14); }
.sf-drawer-body { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem 1.25rem; }
.sf-install { padding: 0.625rem 0.75rem; border: 1px solid var(--color-line, #e6e1d8); border-left: 4px solid var(--crew, #9a9186); border-radius: 0.5rem; margin-top: 0.5rem; }
.sf-install.is-nocrew { border-left: 4px dashed var(--color-bad, #b91c1c); }
.sf-drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-line, #e6e1d8); }
.sf-select { max-width: 11rem; }
@media (max-width: 1439px) { .sf-esc { display: none; } }
@media (max-width: 639px) { .sf-bar { gap: 0.5rem; padding: 0.5rem 0.75rem; } .sf-title { flex-basis: 100%; font-size: 1.0625rem; } .sf-tab { padding: 0 0.625rem; } }

/* ---- find, and stay on the calendar ---- */
.is-find-dim { opacity: 0.28; filter: grayscale(0.6); transition: opacity 120ms ease; }
.is-find-match { outline: 2px solid var(--color-accent, #b45309); outline-offset: 1px; border-radius: 0.375rem; }
.sb-crew.is-find-match { outline-offset: -3px; }
.is-find-day, .sf-day.is-find-day { box-shadow: inset 0 0 0 3px var(--color-accent, #b45309) !important; }
.ui-find-clear { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; font-size: 1.375rem; line-height: 1; color: var(--color-muted, #6b6259); text-decoration: none; }
.ui-find-clear:hover { background: var(--color-page, #f5f4f1); color: var(--color-ink, #1f1a14); }
.ui-find-clear[hidden] { display: none; }
.ui-find-count { font-size: 0.875rem; font-weight: 700; color: var(--color-accent-strong, #92400e); white-space: nowrap; }
.ui-find-count.is-dark { color: #fde68a; }
.ui-find-count[hidden] { display: none; }
.sf-find { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 14rem; }
.sf-find .relative { position: relative; }
.sf-find-field { width: 100%; min-height: 44px; padding: 0 2.75rem 0 2.5rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.28); background: #2b2520; color: #fff; }
.sf-find-field::placeholder { color: #bdb3a6; }
.sf-find .ui-find-clear { color: #fff; }
/* a phone: every tap is a thumb's 44px */
.ui-find-clear { width: 2.75rem; height: 2.75rem; }
@media (max-width: 1023px) {
  a.sb-chip, .sb-visits, .sb-run, .sb-qname, .sb-qmore-btn { min-height: 44px; }
  a.sb-block-name { min-height: 44px; display: flex; align-items: center; }
}
.sf-tab { min-height: 44px; }
@media (max-width: 1023px) { .sf-drawer-body a { min-height: 44px; display: inline-flex; align-items: center; } }
.sb-sheet { margin: auto; max-height: calc(100vh - 2rem); }

/* The schedule sheet's date fold (night walk, 3 Nov): the opener and the form's
   button inside it were both "Move the date". Open, the form's is the one. */
details[data-schedule-date-fold][open] > summary { display: none; }
/* Move the date and Change the crew sit side by side; the date form, once open, takes the line. */
.ui-sheet-foot details[data-schedule-date-fold] { width: auto; }
.ui-sheet-foot details[data-schedule-date-fold][open] { width: 100%; }