/* The board's bay tiles (web/bays.js). State colours are the pills' (green working, amber waiting / paused, blue ready);
   red only where someone has to act: over plan, parts late. Loaded after devices.css, before touch.css. */

/* the closure banner stays above the bays (the bays come right after the head in the markup) */
.board > .b-head { order: -2; } .board > .sdbanner { order: -1; }

.bays { display: grid; gap: 10px; min-width: 0; }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.bt { --st: var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 16px 14px;
  background: var(--panel); border: 2px solid var(--st); border-radius: 16px; }
.bt.st-work { --st: var(--ok); }
.bt.st-over, .bt.st-late { --st: var(--red); }
.bt.st-paused { --st: var(--warn); border-style: dashed; }
.bt.st-parts, .bt.st-quote { --st: color-mix(in srgb, var(--warn) 75%, var(--line)); }
.bt.st-ready { --st: var(--info); }
.bt.free { border-style: dashed; background: transparent; justify-content: space-between; }

.bt-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bt-spot, .ot-spot { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); white-space: nowrap; }
.bt-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; background: color-mix(in srgb, var(--st) 16%, transparent); border: 1px solid var(--st); }
.bt.st-line .bt-state, .bt.free .bt-state { border-color: var(--line); background: var(--panel2); color: var(--muted); }
.bt .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: btpulse 1.6s ease-in-out infinite; }
.bt.st-over .dot { background: var(--red); }
@keyframes btpulse { 50% { opacity: .35; } }

/* the car: one line, cut short with … rather than wrapping the tile taller */
.bt-car { font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-sub { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-line { font-size: 15px; font-variant-numeric: tabular-nums; }
.bt-line.sdline { margin-top: 0; font-size: 14px; }
.bt-who { color: var(--ok); }
.bt.st-over .bt-who { color: var(--red); }
.bt .bar { height: 10px; margin: 8px 0 4px; }
.bt.st-over .bar i { background: var(--red); }
.bt.st-paused .bar i { background: var(--warn); }
.bt-nums { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-btns { display: flex; gap: 8px; margin-top: 8px; }
.bt-btns .btn { flex: 1; font-weight: 700; }
.bt-next { font-size: 16px; margin-top: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-next a { color: var(--ink); }
/* "Pull it in" is an everyday move, not an alarm: blue outline, never the red primary */
.btn.bt-pull { border-color: var(--info); color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); }

/* outside: small one-look tiles, a coloured edge for the state */
.ot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ot { --st: var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 8px; min-width: 0; min-height: 44px;
  padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--st); border-radius: 12px; }
.ot.free { border-style: dashed; border-left-width: 1px; background: transparent; }
.ot.st-work { --st: var(--ok); } .ot.st-over, .ot.st-late { --st: var(--red); }
.ot.st-paused, .ot.st-parts, .ot.st-quote { --st: var(--warn); } .ot.st-ready { --st: var(--info); }
.ot-car { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-st { grid-column: 1 / -1; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Who is starting? / Pause who?: a big button per person */
.bt-ask h2 { font-size: 22px; margin-bottom: 14px; }
.bt-pick { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bt-pick .btn { min-height: 64px; font-size: 20px; font-weight: 700; }
.bt-pick .bt-all { grid-column: 1 / -1; }
.bt-ask-foot { justify-content: flex-end; margin-top: 14px; }

/* the wall: bigger type, and the whole board on one screen. The queue and the side columns sit next to each other
   under the bays instead of one below the other (a normal day: 2 bays, a few outside, ~5 in line). */
body.wall .bt-car { font-size: 30px; }
body.wall .bt-line { font-size: 17px; }
@media (min-width: 1000px) {
  body.wall main { padding: 10px 24px; }
  body.wall .board { gap: 10px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  body.wall .board > :not(.b-queue):not(.b-cols) { grid-column: 1 / -1; }
  body.wall .clock .time { font-size: 60px; }
  /* the outside spots stand next to the bays, one under another (two to a row from five spots) */
  body.wall .bays { grid-template-columns: minmax(0, 1fr) minmax(240px, .38fr); align-items: start; gap: 12px; }
  body.wall .bays:not(:has(.bt-grid)) { grid-template-columns: 1fr; }
  body.wall .bays .ot-grid { grid-template-columns: minmax(0, 1fr); }
  body.wall .bays .ot-grid:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the line: one row per car (car · customer, then the job), cut short with … */
  body.wall .b-queue h2 { margin-bottom: 6px; }
  body.wall .qrow { padding: 4px 10px; margin-bottom: 5px; gap: 10px; }
  body.wall .qmain { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  body.wall .qcar, body.wall .qsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* arriving / waiting / ready beside the line: arriving and ready (short lists) one under the other, waiting (the tall
     one, with its parts lines) next to them; the rows tighter */
  body.wall .b-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  body.wall .b-cols .col { padding: 10px 12px; }
  body.wall .b-cols .col:nth-child(1) { grid-area: 1 / 1; }
  body.wall .b-cols .col:nth-child(2) { grid-area: 1 / 2 / span 2; }
  body.wall .b-cols .col:nth-child(3) { grid-area: 2 / 1; }
  body.wall .b-cols h3 { margin-bottom: 6px; }
  body.wall .b-cols .mini { padding: 6px 10px; margin-bottom: 6px; }
  body.wall .b-cols a.mini > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* phones: compact tiles, the car still on one line, outside spots two to a row */
@media (max-width: 600px) {
  .bt-grid { gap: 8px; }
  .bt { padding: 10px 12px 12px; border-radius: 14px; }
  .bt-car { font-size: 20px; }
  .bt-line { font-size: 14px; }
  .bt-nums { font-size: 13px; }
  .ot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ot { padding: 6px 8px 6px 10px; grid-template-columns: minmax(0, 1fr); }
  .ot-car { font-size: 15px; letter-spacing: -.2px; }   /* the spot's name above, so the car gets the width */
  .ot-st { grid-column: 1; }
  .bt.free { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .bt.free .bt-top { flex: 1 1 100%; }
  .bt.free .bt-next { flex: 1 1 0; margin: 0; white-space: normal; }
  .bt.free .bt-btns { margin: 0; }
}