/* The stop board's unusual states (P2.22 step 6, docs/design.md "Unusual
   states"): loading, no buses in the next hour, the last bus gone, live
   times delayed, and offline. The markup comes from board-states.js. */

/* ── Loading: the board's own skeleton rows, shimmering ─────────────────── */
.sk-board { padding: 0 16px 16px; }
.sk-head { padding: 0 0 16px; }
.sk-row {
  display: flex; gap: 12px; align-items: center;
  min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.sk-row:last-child { border-bottom: none; }
.sk-block {
  background: linear-gradient(90deg, var(--surface-raised) 0%, var(--line) 50%, var(--surface-raised) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
body.dark .sk-block {
  background: linear-gradient(90deg, #2a2d34 0%, #34373f 50%, #2a2d34 100%);
  background-size: 200% 100%;
}
.sk-name { height: 16px; width: 60%; }
.sk-meta { height: 12px; width: 35%; margin-top: 8px; }
.sk-badge { width: 48px; height: 24px; border-radius: var(--radius-pill); flex-shrink: 0; }
.sk-dest { flex: 1; height: 12px; }
.sk-time { width: 56px; height: 16px; flex-shrink: 0; }

/* ── Notices above the rows ─────────────────────────────────────────────── */
#board-notice:empty { display: none; }
#board-notice { padding: 0 16px 12px; flex-shrink: 0; }
@media (min-width: 600px) { #board-notice { padding: 0 16px 12px; } }
.board-notice {
  padding: 12px; border-radius: var(--radius-button);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
/* Live times delayed: amber. */
.board-notice.stale { background: var(--chip-warn-bg); color: var(--chip-warn-ink); }
/* Offline: plain, neutral. */
.board-notice.offline { background: var(--surface-raised); color: var(--ink-secondary); }

/* ── No buses in the next hour, and the last bus gone ───────────────────── */
.state-head { text-align: center; padding: 24px 0 24px; }
.state-head b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.state-head p { margin: 4px 0 0; font-size: 13px; color: var(--ink-secondary); }
.state-card {
  background: var(--surface-raised); border-radius: var(--radius-card);
  padding: 16px; margin-bottom: 16px;
}
.state-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-secondary);
}
.state-card-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; }
.state-card-dest { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.state-card-time { font-size: 20px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.state-card-note { margin-top: 12px; font-size: 12px; color: var(--ink-secondary); }

/* The load chip and failure banner (P5.9b/e/f) live in shell.css: they show on the first paint. */
/* The board keeps its last answer: its time, and the trip sheet's retry line. */
.load-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--surface-raised); color: var(--ink); font-size: 18px; cursor: pointer; }
.board-notice.failed { background: var(--surface-raised); color: var(--ink-secondary); }
.load-fail-msg { text-align: center; padding: 24px 16px; color: var(--ink-secondary); font-size: 13px; line-height: 1.5; }
.load-fail-msg b { display: block; color: var(--ink); font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.load-fail-msg button {
  margin-top: 12px; min-height: 44px; padding: 0 22px; border: none; border-radius: var(--radius-pill);
  background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}

/* ── An app left open stops refreshing (P5.9p): the age of what's on screen, with Refresh ─
   The plan's "Results from", the bus card's "Updated" and the planner's "No live bus" line;
   the board's own notice (.board-notice.failed) carries the same button. */
.idle-notice {
  margin: 0 16px 12px; padding: 4px 4px 4px 12px; border-radius: var(--radius-button);
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-raised); color: var(--ink-secondary);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.idle-refresh {
  min-height: 44px; padding: 0 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline;
}
.board-notice .idle-refresh { min-height: 32px; padding: 0 4px; }
.veh-header + .idle-notice { margin-top: 12px; }
.live-note { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }