/* Port lane W10 — the calendar merge (docs/SPEC-calendar-merge-2026-09-23.md).
   Zach, opening the first cut of the dispatch board: "I don't like it. Merge
   this with the old one. I don't like the colors." This file owns every style
   for that merged board: `web/src/board-rows.js` (the renderer, `.brow-*`
   classes) and the `--board-*` tokens section 3 of the spec calls for. It sits
   in its OWN file, not `port-w8.css` (another lane owns that file this sprint)
   and not `app.css`/`themes.css` — nothing there was touched to ship this.

   Tech colour is never a value in this file and is no longer a block fill:
   it is only the gutter dot beside the name, set inline off
   `core.company_config.config.crewColors` (or a name hash). A block's colour
   is its STATUS, from the app's --tone-* tokens. */

:root {
  /* 2026-09-23, second pass: Zach, "I like the colors you had, just not the
     layout." The board wears the app's own theme again, so every value here
     is an app.css token and follows the phone's light/dark and any look. */
  --board-ground: var(--bg);
  --board-surface: var(--card);
  --board-head: var(--card);
  --board-tile: var(--card-2);
  --board-line: var(--line);
  --board-edge: var(--line);
  --board-hour-label: var(--muted);
  --board-now: var(--tone-late-edge);
  --board-badge-notstarted: var(--tone-late-ink);
  --board-free-bg: var(--tone-done-bg);
  --board-free-fg: var(--tone-done-ink);
  --board-stuck-bg: var(--tone-soon-bg);
  --board-stuck-fg: var(--tone-soon-ink);
  --board-stuck-edge: var(--tone-soon-edge);
  --board-unassigned-busy: var(--tone-late-edge);
  --board-gutter-w: 96px;
  --board-hourw: 96px;
}

.brow { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

/* ---------------------------------------------------------------------------
   Summary line — "8 stops · 2 on site · 1 done · 1 cancelled". Pure counts off
   the list on screen; both the Board tab and the Schedule tab get this line
   without either owning a second copy of the arithmetic.
--------------------------------------------------------------------------- */
.brow-summary { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; font-size: var(--text-caption, 13px); color: var(--ink-dim); padding: 0 var(--space-1, 4px); }
.brow-summary-n { font-weight: var(--w-semi, 600); color: var(--ink); }
.brow-summary-bit { font-weight: var(--w-semi, 600); }
.brow-summary-bit.is-loud { color: var(--board-badge-notstarted); }
.brow-summary-link { background: none; border: 0; padding: 0; font: inherit; color: var(--board-stuck-fg); cursor: pointer; text-decoration: underline; }

.brow-dead-list { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2, 8px); background: var(--board-head); border: 1px solid var(--board-edge); border-radius: var(--radius-md, 12px); }
.brow-dead-row { display: flex; align-items: baseline; gap: var(--space-2, 8px); font-size: var(--text-caption, 13px); color: var(--ink-dim); }
.brow-dead-who { color: var(--ink); font-weight: var(--w-semi, 600); }
.brow-dead-status { margin-left: auto; }

/* ---------------------------------------------------------------------------
   The board frame — fixed name gutter, scrollable hour timeline. Rows never
   move; only the timeline scrolls sideways (spec's phone mock: "rows never
   move · swipe sideways for the rest of the day").
--------------------------------------------------------------------------- */
.brow-board {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--board-edge);
  border-radius: 14px;
  background: var(--board-surface);
  overflow: hidden;
}

.brow-gutter {
  flex: 0 0 var(--board-gutter-w);
  border-right: 1px solid var(--board-line);
  background: var(--board-head);
  min-width: 0;
}
.brow-gutter-corner { height: 28px; border-bottom: 1px solid var(--board-line); }
.brow-gutter-row { border-bottom: 1px solid var(--board-line); display: flex; align-items: center; padding: 0 var(--space-2, 8px); box-sizing: border-box; }
.brow-gutter-row:last-child { border-bottom: 0; }
.brow-gutter-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.brow-gutter-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.brow-gutter-dot.is-loud { background: var(--board-unassigned-busy) !important; }
.brow-gutter-name { font-size: var(--text-label, 15px); font-weight: var(--w-bold, 700); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.brow-gutter-count { font-size: var(--text-caption, 13px); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.brow-gutter-note, .brow-gutter-plus { font-size: var(--text-micro, 11px); color: var(--ink-dim); flex-basis: 100%; }
.brow-gutter-add {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--board-edge);
  background: var(--board-surface); color: var(--ink-dim); font: inherit; font-weight: var(--w-bold, 700);
  line-height: 1; cursor: pointer; margin-left: auto;
}
.brow-gutter-add:hover { color: var(--accent); border-color: var(--accent); }

/* The tap-to-lift move's landing pad — pick a block, tap another row's "Move
   here" to land it there (phone-friendly alternative to the office board's
   real drag, which targets `.brow-blk` directly). */
.brow-gutter-row.is-move-target { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.brow-move-here {
  flex-basis: 100%; margin-top: 2px; border: 1px dashed var(--accent); border-radius: 8px;
  background: none; color: var(--accent); font: inherit; font-weight: var(--w-semi, 600);
  font-size: var(--text-caption, 13px); padding: 2px 8px; cursor: pointer; text-align: left;
}

.brow-chip { font-size: var(--text-micro, 11px); font-weight: var(--w-bold, 700); border-radius: 999px; padding: 1px 7px; flex: none; }
.brow-chip-free { color: var(--board-free-fg); background: var(--board-free-bg); }
.brow-chip-stuck { color: var(--board-stuck-fg); background: var(--board-stuck-bg); border: 1px solid var(--board-stuck-edge); }

.brow-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.brow-timeline { position: relative; width: 100%; min-width: calc(11 * var(--board-hourw)); }

/* Desktop: fit the working day to the width instead of forcing a fixed
   per-hour pixel size — spec: "desktop fits the working day to the width,
   never under 96". 900px is roughly where an 11-hour day at 96px/hr (1056px)
   stops needing to scroll on a laptop-width dispatch screen. */
@media (min-width: 900px) {
  .brow-timeline { min-width: 0; }
}
/* Phone: 96px an hour put a 10am job a full screen to the right of an "8a"-only
   ruler, with nothing saying so (QA 2026-10-26). Squeeze the day to 44px an hour
   so the whole working day is about two thumb-widths, and board-rows.js opens
   every day scrolled to its first stop. */
@media (max-width: 599px) {
  .brow-timeline { min-width: calc(11 * 44px); }
}

.brow-ruler { position: relative; height: 28px; border-bottom: 1px solid var(--board-line); }
.brow-tick { position: absolute; top: 7px; font-size: var(--text-caption, 13px); font-weight: var(--w-semi, 600); color: var(--board-hour-label); padding-left: 4px; white-space: nowrap; }

.brow-rows { position: relative; }
.brow-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--board-line); z-index: 0; }
.brow-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--board-now); z-index: 1; opacity: 0.85; pointer-events: none; }
.brow-now-time { position: absolute; top: -1px; left: 3px; font-size: 10px; font-weight: var(--w-bold, 700); color: var(--board-now); white-space: nowrap; }

.brow-track { position: relative; border-bottom: 1px solid var(--board-line); box-sizing: border-box; }
.brow-track:last-child { border-bottom: 0; }
.brow-track.is-drop { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.brow-empty-un { position: absolute; left: 10px; top: 12px; font-size: var(--text-caption, 13px); color: var(--ink-dim); }

/* ---------------------------------------------------------------------------
   Blocks — sized and positioned by duration. The app's own tile, with a
   status rail; the row already says whose it is.
--------------------------------------------------------------------------- */
.brow-blk {
  position: absolute;
  top: 4px;
  height: 52px;
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  container: brow-blk / inline-size;
  border: 1px solid var(--board-line);
  border-left: 4px solid var(--tone-idle-edge);
  padding: 2px 7px;
  line-height: 1.2;
  background: var(--board-tile);
  color: var(--ink);
}
/* Rail = status, the app's six-tone rule. Late is the one that must jump out
   (Zach: "like how it was red if something was late"): red rail, a faint red
   wash, and a solid red "Late" word. */
.brow-blk[data-tone="live"] { border-left-color: var(--tone-live-edge); }
.brow-blk[data-tone="done"] { border-left-color: var(--tone-done-edge); }
/* Yellow / "off track" (Zach, 2026-09-23): running over its scheduled end
   while on site, or starting inside 15 minutes with nobody there and nobody
   heading out. Same faint-wash + rail treatment as Late, one step down —
   the existing `--tone-soon-*` amber (`#F59E0B` rail in dark), never a new
   token. Red still wins: a stop this tone can never also be `late` (see
   `isBehind`/`isRunningOver` in board-rows.js), so there is no ordering
   fight, but this rule sits after `late` here too. */
.brow-blk[data-tone="soon"] {
  border-color: color-mix(in srgb, var(--tone-soon-edge) 45%, var(--board-line));
  border-left-color: var(--tone-soon-edge);
  background: color-mix(in srgb, var(--tone-soon-edge) 15%, var(--board-tile));
}
.brow-blk[data-tone="late"] {
  border-color: color-mix(in srgb, var(--tone-late-edge) 45%, var(--board-line));
  border-left-color: var(--tone-late-edge);
  background: color-mix(in srgb, var(--tone-late-edge) 15%, var(--board-tile));
}
.brow-blk[data-tone="dead"] { border-left-color: var(--tone-late-edge); opacity: 0.6; }
.brow-blk.is-offsite { background: color-mix(in srgb, var(--tone-plan-edge) 12%, var(--board-tile)); }
/* A helper's full copy of someone else's stop: same tile, dashed edge. */
.brow-blk.is-co { outline: 1.5px dashed var(--line-strong); outline-offset: -3px; }
.brow-blk.is-picked, .brow-blk.is-lifted { outline: 2px solid var(--accent); outline-offset: 1px; }
.brow-blk.is-lifted { opacity: 0.35; }
.brow-blk.is-draggable { touch-action: none; }
.brow-blk.is-draggable:not(.is-co) { cursor: grab; }

.brow-blk-l1 { display: flex; align-items: center; gap: 4px; font-size: var(--text-micro, 11px); font-weight: var(--w-bold, 700); color: var(--muted); }
.brow-blk-time { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.brow-blk-badge { flex: none; font-size: var(--text-micro, 11px); font-weight: var(--w-bold, 700); padding: 0 6px; border-radius: 4px; line-height: 16px; }
.brow-blk-badge-glyph { display: none; }
@container brow-blk (max-width: 150px) {
  .brow-blk-badge-word { display: none; }
  .brow-blk-badge-glyph { display: inline; }
}
.brow-blk-badge[data-tone="live"] { background: var(--tone-live-bg); color: var(--tone-live-ink); }
.brow-blk-badge[data-tone="done"] { background: var(--tone-done-bg); color: var(--tone-done-ink); }
.brow-blk-badge[data-tone="plan"] { background: var(--tone-plan-bg); color: var(--tone-plan-ink); }
.brow-blk-badge[data-tone="soon"] { background: var(--tone-soon-bg); color: var(--tone-soon-ink); }
.brow-blk-badge[data-tone="late"] { background: var(--fill-late); color: var(--ink-on-fill); }
.brow-blk-l2 { font-size: var(--text-caption, 13px); font-weight: var(--w-semi, 600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-blk-l3 { font-size: var(--text-micro, 11px); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brow-open { margin: var(--space-2, 8px) 0 var(--space-1, 4px); }
.brow-hint { font-size: var(--text-label, 15px); color: var(--accent); margin: 0; }

/* Ghost element while a stop is dragged (schedule.js's own `makeDraggable`
   clones the picked `.brow-blk` and adds `.sched-ghost`; only the geometry
   below is this file's to own). */
.brow-blk.sched-ghost { position: fixed; z-index: 60; pointer-events: none; }

@media (max-width: 600px) {
  :root { --board-gutter-w: 84px; }
  .brow-gutter-name { font-size: var(--text-caption, 13px); }
}

@media (min-width: 900px) {
  :root { --board-gutter-w: 160px; }
}