/* 運転手画面: 運転席のスマホ想定。とにかく大きく・迷わせない */

.run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.vehicle-name { font-size: var(--fs-xl); font-weight: 800; }

/* 進捗ドット */
.progress { display: flex; gap: 6px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.progress .dot {
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);   /* まだ＝中が空の丸 */
}
/* 済み＝塗りつぶし、いま＝大きい二重丸（色だけでなく形で見分ける） */
.progress .dot.done { background: var(--c-ok); border-color: var(--c-ok); }
.progress .dot.now { background: var(--c-primary); border-color: var(--c-primary); outline: 3px solid var(--c-primary); outline-offset: 2px; margin: 0 4px; }

/* 次の目的地カード */
.next-card { border: 2.5px solid var(--c-primary); text-align: center; }
.next-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text-sub);
}
.next-time {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-primary);
}
:root[data-theme="dark"] .next-time { color: var(--c-ok); }
.next-stop { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: var(--sp-1); }
.next-what { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text-sub); margin-bottom: var(--sp-4); }
.nav-btn { margin-bottom: var(--sp-3); background: var(--c-info); color: var(--c-text-on-sem); }
.nav-btn:hover { background: var(--c-info); text-decoration: underline; }
.done-btn { min-height: 76px; }

/* 車両選択 */
#pickList .btn { margin-bottom: var(--sp-3); }

/* 完了 */
.all-done { text-align: center; border: 2px solid var(--c-ok); }
.all-done .done-mark { font-size: 44px; margin-bottom: var(--sp-2); }

/* この後の予定 */
#restList .t { font-weight: 800; min-width: 52px; font-variant-numeric: tabular-nums; }
#restList li.done-row { color: var(--c-text-faint); text-decoration: line-through; }
#restList .pill {
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-full);
  padding: 1px 10px;
}
#restList .pill.up { background: var(--c-ok-soft); color: var(--c-ok); border: 1.5px solid var(--c-ok); }
#restList .pill.down { background: var(--c-info-soft); color: var(--c-info); border: 1.5px solid var(--c-info); }

.route-all { margin-bottom: var(--sp-4); }

/* ---- v0.6: 事業者の仮名・停車中の注意・運休の帯 ---- */
.vehicle-head { display: flex; flex-direction: column; min-width: 0; }
.vehicle-op { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-sub); }

.pick-btn { flex-direction: column; gap: 2px; padding-top: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); height: auto; }
.pick-btn .pick-name { font-size: var(--fs-xl); font-weight: 800; line-height: 1.35; }
.pick-btn .pick-op { font-size: var(--fs-md); font-weight: 700; color: var(--c-text-sub); }

.safety-note { font-size: var(--fs-lg); }

.suspend-banner {
  background: var(--c-danger-soft);
  border: 3px solid var(--c-danger);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--c-text);
}
.suspend-row + .suspend-row { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-danger); }
.suspend-main { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.35; color: var(--c-danger); }
.suspend-reason { font-size: var(--fs-lg); font-weight: 700; margin-top: var(--sp-1); }
.suspend-foot { font-size: var(--fs-md); color: var(--c-text-sub); margin-top: var(--sp-3); }
.run-head { gap: var(--sp-3); }
.run-head .btn { flex: none; white-space: nowrap; min-height: 44px; }