/* 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); }