* {
  box-sizing: border-box;
}

/*
 * デザイン方針: 路線バスの「発車標 / 方向幕（アンバーLED行先表示器）」をモチーフにした
 * トランジット・サイネージ。ヘッダーを暗色のLEDボードに見立て、ここに大胆さを集約する。
 * 緊急度は交通信号のロジックに対応させる（余裕=緑 / そろそろ=橙 / まもなく=赤）。
 * ----------------------------------------------------------------------------
 * テーマ変数の構成
 * - :root にライトテーマ（既定値）を定義。
 * - ダークテーマの値は下記 %DARK% ブロックにまとめ、次の 2 つの状況で適用する:
 *     1. OS がダーク設定 かつ ユーザーが明示的にライトを選んでいない場合
 *        （prefers-color-scheme による自動判定。JS 不要で FOUC が起きない）
 *     2. ユーザーがトグルで data-theme="dark" を選択した場合
 * - CSP で inline <script> が禁止のため、初期テーマは CSS のメディアクエリで決定し、
 *   手動切替のみ bus-ui.js の initTheme() が data-theme 属性 / localStorage を扱う。
 * - theme-color メタタグは initTheme() が現在テーマに連動して更新する。
 */
:root {
  --bg: #E6E9EE;
  --surface: #FFFFFF;
  --surface-alt: #F1F3F6;
  --border: #D9DDE4;
  --border-em: #C3C9D3;
  --text: #161A20;
  --text-2: #586070;
  --text-3: #828B98;

  /* LEDボード（ヘッダーの主役） */
  --board:    #11151B;
  --board-2:  #1A2029;
  --board-line: rgba(255, 255, 255, 0.05);
  --led:      #FFB02E;            /* アンバーLED＝シグネチャ色 */
  --led-soft: rgba(255, 176, 46, 0.16);

  /* 構造色・リンク */
  --ink:      #233042;           /* 系統ピル・ボタン地 */
  --accent-2: #1F5FB0;           /* 行先・リンク */

  /* シグナル（緊急度） */
  --accent:   #D6382C;           /* まもなく＝赤 */
  --near:     #DE8100;           /* そろそろ＝橙 */
  --ok:       #1E8E4E;           /* 余裕＝緑 */

  --shadow-sm: 0 1px 2px rgba(20, 28, 44, 0.06), 0 1px 1px rgba(20, 28, 44, 0.04);
  --shadow:    0 6px 20px rgba(20, 28, 44, 0.10), 0 2px 6px rgba(20, 28, 44, 0.06);
  --board-shadow: 0 10px 30px rgba(8, 12, 20, 0.30);

  --accent-soft: rgba(214, 56, 44, 0.08);
  --near-soft:   rgba(222, 129, 0, 0.10);
  --ok-soft:     rgba(30, 142, 78, 0.08);

  /* 旧来ハードコードしていた色を変数化（ダークで反転させるため） */
  --on-accent:       #FFFFFF;     /* 彩度の高いピル／アイコン上の文字色 */
  --link-strong:     #173E73;     /* page-link の枠線・押下色 */
  --on-link:         #FFFFFF;     /* page-link の文字色 */
  --tab-hover-bg:    #E9ECF1;
  --tab-active-bg:   #233042;
  --tab-active-text: #FFFFFF;
  --dest-bg:         #E7EEF8;
  --dest-border:     rgba(31, 95, 176, 0.22);
  --dest-soon-bg:    #FBE9E7;
  --dest-soon-border: rgba(214, 56, 44, 0.24);
  --ref-bg:          rgba(31, 95, 176, 0.08);
  --ref-border:      rgba(31, 95, 176, 0.2);
  --ref-hover-bg:    rgba(31, 95, 176, 0.15);
  --row-soon-bg:     rgba(214, 56, 44, 0.05);
}

/*
 * %DARK% 夜の駅構内を思わせる深いスレートをベースにしたダークテーマ。
 * ボードのアンバーLEDはそのまま主役として残し、ページ全体がサイネージに馴染むよう
 * 寒色の暗色に統一する。メディアクエリ版と手動指定版は同内容を保つこと（CSS の仕様上
 * 2 箇所に同じ宣言を書く必要があるため、変更時は両ブロックを必ず揃えること）。
 */
:root[data-theme="dark"] {
  --bg: #0D1116;
  --surface: #161B22;
  --surface-alt: #1C232C;
  --border: #28313C;
  --border-em: #3A4452;
  --text: #E7ECF2;
  --text-2: #A4AEBC;
  --text-3: #7E8896;

  --board:    #090C10;
  --board-2:  #141A21;
  --board-line: rgba(255, 255, 255, 0.045);
  --led:      #FFB638;
  --led-soft: rgba(255, 182, 56, 0.16);

  --ink:      #2C3947;
  --accent-2: #6BA6E8;

  --accent:   #F26A5C;
  --near:     #F0A33A;
  --ok:       #57C07E;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --board-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);

  --accent-soft: rgba(242, 106, 92, 0.14);
  --near-soft:   rgba(240, 163, 58, 0.14);
  --ok-soft:     rgba(87, 192, 126, 0.12);

  --on-accent:       #0D1116;
  --link-strong:     #8FBDF0;
  --on-link:         #0D1116;
  --tab-hover-bg:    #222B35;
  --tab-active-bg:   #E7ECF2;
  --tab-active-text: #0D1116;
  --dest-bg:         #1B2A3B;
  --dest-border:     rgba(107, 166, 232, 0.3);
  --dest-soon-bg:    #34211E;
  --dest-soon-border: rgba(242, 106, 92, 0.32);
  --ref-bg:          rgba(107, 166, 232, 0.12);
  --ref-border:      rgba(107, 166, 232, 0.28);
  --ref-hover-bg:    rgba(107, 166, 232, 0.2);
  --row-soon-bg:     rgba(242, 106, 92, 0.09);
}

@media (prefers-color-scheme: dark) {
  /* OS がダークかつユーザーが明示的にライトを選んでいない場合の既定値（上記と同内容） */
  :root:not([data-theme="light"]) {
    --bg: #0D1116;
    --surface: #161B22;
    --surface-alt: #1C232C;
    --border: #28313C;
    --border-em: #3A4452;
    --text: #E7ECF2;
    --text-2: #A4AEBC;
    --text-3: #7E8896;

    --board:    #090C10;
    --board-2:  #141A21;
    --board-line: rgba(255, 255, 255, 0.045);
    --led:      #FFB638;
    --led-soft: rgba(255, 182, 56, 0.16);

    --ink:      #2C3947;
    --accent-2: #6BA6E8;

    --accent:   #F26A5C;
    --near:     #F0A33A;
    --ok:       #57C07E;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --board-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);

    --accent-soft: rgba(242, 106, 92, 0.14);
    --near-soft:   rgba(240, 163, 58, 0.14);
    --ok-soft:     rgba(87, 192, 126, 0.12);

    --on-accent:       #0D1116;
    --link-strong:     #8FBDF0;
    --on-link:         #0D1116;
    --tab-hover-bg:    #222B35;
    --tab-active-bg:   #E7ECF2;
    --tab-active-text: #0D1116;
    --dest-bg:         #1B2A3B;
    --dest-border:     rgba(107, 166, 232, 0.3);
    --dest-soon-bg:    #34211E;
    --dest-soon-border: rgba(242, 106, 92, 0.32);
    --ref-bg:          rgba(107, 166, 232, 0.12);
    --ref-border:      rgba(107, 166, 232, 0.28);
    --ref-hover-bg:    rgba(107, 166, 232, 0.2);
    --row-soon-bg:     rgba(242, 106, 92, 0.09);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 0 calc(18px + env(safe-area-inset-bottom));
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

button,
a,
input,
textarea,
select {
  font: inherit;
}

.app {
  position: relative; /* .theme-toggle の絶対配置の基準 */
  max-width: 448px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ===== ヘッダー ===== */
/* ヘッダー（LEDボード）は通常スクロールさせ、タブだけを上部に固定する。 */
.header {
  padding: max(14px, env(safe-area-inset-top)) 0 12px;
  background: var(--bg);
}

.eyebrow {
  margin: 2px 0 0;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.title {
  margin: 6px 0 0;
  padding-right: 48px; /* 右上のテーマ切替ボタンとの重なり防止 */
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}

.title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--board);
  color: var(--led);
  font-size: 17px;
  flex-shrink: 0;
}

.subtitle {
  margin: 5px 0 0;
  font-size: 0.84rem;
  color: var(--text-3);
}

.theme-toggle {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.theme-toggle:hover {
  background: var(--tab-hover-bg);
  border-color: var(--border-em);
}

.theme-toggle:active {
  transform: scale(0.94);
}

/* ===== LEDボード（シグネチャ） ===== */
.board {
  position: relative;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--led-soft), transparent 55%),
    linear-gradient(180deg, var(--board-2), var(--board));
  box-shadow: var(--board-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* 走査線の質感（LED表示器らしさ） */
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    var(--board-line) 0,
    var(--board-line) 1px,
    transparent 1px,
    transparent 3px
  );
}

.board-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--led);
}

.board-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 8px var(--led);
  animation: livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

.board-clock {
  margin-top: 8px;
  font-family: "Doto", "DM Mono", monospace;
  font-weight: 700;
  font-variation-settings: "ROND" 0;   /* 角ばった四角いドット（LEDパネル感） */
  font-size: clamp(36px, 13vw, 50px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--led);
  text-shadow: 0 0 14px rgba(255, 176, 46, 0.4);
  font-variant-numeric: tabular-nums;
}

/* コロンは可読性のため Doto ではなくモノスペース字形で描画する */
.board-clock .t-col,
.time-main .t-col {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  margin: 0 0.04em;
  vertical-align: 0.06em;
}

.board-date {
  margin-top: 8px;
  font-family: "DM Mono", monospace;
  font-size: clamp(12px, 3.4vw, 14px);
  letter-spacing: 0.02em;
  color: rgba(231, 236, 242, 0.72);
}

/* ===== ナビボタン ===== */
.page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-link);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.1s, background 0.15s;
}

.page-link:hover {
  background: var(--link-strong);
  border-color: var(--link-strong);
  text-decoration: none;
}

.page-link:active {
  transform: scale(0.97);
}

/* ===== 方面タブ ===== */
.tabs {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  gap: 6px;
  padding: 10px 0;
  margin: 0;
  background: var(--bg);
  box-shadow: 0 6px 8px -6px rgba(20, 28, 44, 0.18);
}

.tab-btn {
  flex: 1;
  min-height: 46px;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tab-btn:hover {
  background: var(--tab-hover-bg);
  color: var(--text);
}

.tab-btn.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
  border-color: var(--tab-active-bg);
  box-shadow: var(--shadow-sm);
}

/* ===== コンテンツ（停留所カード） ===== */
.content {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 方面タブ切替時のフェード＋スライドイン（カードを軽く下から立ち上げる） */
@keyframes contentIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.content.switching > .stop,
.content.switching > .itin {
  animation: contentIn 0.26s ease both;
}

.content.switching > .stop:nth-child(2),
.content.switching > .itin:nth-child(2) { animation-delay: 0.045s; }
.content.switching > .stop:nth-child(3),
.content.switching > .itin:nth-child(3) { animation-delay: 0.09s; }

/* 八幡神社前 ⇄ 甘沼244-39 の徒歩ルート地図（往路・復路共通） */
.walkmap {
  margin-top: 16px;
}

.walkmap-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.walkmap-link {
  display: block;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}

.walkmap-link:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-em);
}

.walkmap-link:active {
  transform: scale(0.997);
}

.walkmap-img {
  display: block;
  width: 100%;
  height: auto;
}

.walkmap-caption {
  display: block;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent-2);
  border-top: 1px solid var(--border);
}

.stop,
.trip {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}

/* 左端のシグナル帯（信号色で緊急度を符号化） */
.stop::before,
.trip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--ok);
}

.stop.soon::before,
.trip.soon::before { background: var(--accent); }

.stop.near::before,
.trip.near::before { background: var(--near); }

.stop:hover,
.trip:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-em);
}

.stop:active,
.trip:active {
  transform: scale(0.995);
}

.stop-head,
.trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px 11px 18px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.stop.soon  .stop-head,
.trip.soon  .trip-head { background: var(--accent-soft); }

.stop.near  .stop-head,
.trip.near  .trip-head { background: var(--near-soft); }

.stop-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stop-name,
.trip-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.walk,
.note {
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.note {
  margin: 3px 0 0;
}

.ref-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--ref-bg);
  border: 1px solid var(--ref-border);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.ref-link:hover,
.ref-link:active {
  background: var(--ref-hover-bg);
  text-decoration: none;
}

.expand-icon {
  font-size: 0.66rem;
  color: var(--text-3);
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.stop.expanded .expand-icon,
.trip.expanded .expand-icon {
  transform: rotate(180deg);
}

/* 詳細行の開閉アニメーション（高さを 0fr→1fr で滑らかに） */
.stop-extra,
.trip-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.stop.expanded .stop-extra,
.trip.expanded .trip-extra {
  grid-template-rows: 1fr;
}

.stop-extra-inner,
.trip-extra-inner {
  min-height: 0;
  overflow: hidden;
}

.stop-extra-inner .row,
.trip-extra-inner .row {
  border-top: 1px solid var(--border);
}

/* ===== 便の行 ===== */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 12px 18px;
  min-height: 60px;
  background: transparent;
}

.row + .row {
  border-top: 1px solid var(--border);
}

.row:hover {
  background: var(--surface-alt);
}

.row.soon {
  background: var(--row-soon-bg);
}

.row-left {
  flex: 1;
  min-width: 0;
}

.route-pill {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}

.route {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--ink);
  padding: 3px 9px;
  border-radius: 6px 0 0 6px;
  white-space: nowrap;
}

.dest {
  display: inline-block;
  font-size: 12px;
  color: var(--accent-2);
  background: var(--dest-bg);
  border: 1px solid var(--dest-border);
  border-left: none;
  padding: 3px 10px;
  border-radius: 0 6px 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.row.soon .route {
  background: var(--accent);
}

.row.soon .dest {
  background: var(--dest-soon-bg);
  color: var(--accent);
  border-color: var(--dest-soon-border);
}

.time {
  text-align: right;
  min-width: 96px;
}

.time-main {
  display: block;
  font-family: "Doto", "DM Mono", monospace;
  font-size: 26px;
  font-weight: 700;
  font-variation-settings: "ROND" 0;   /* 角ばった四角いドット（LEDパネル感） */
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.time-sub {
  display: block;
  margin-top: 3px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
}

.row.soon .time-main,
.row.soon .time-sub {
  color: var(--accent);
}

/* ===== 接近インジケータ ===== */
.approach {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.approach-track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: visible;
}

.approach-fill {
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  border-radius: 999px;
  background: var(--ok);
}

.row.soon .approach-fill,
.approach-arrived .approach-fill {
  background: var(--accent);
}

.approach-bus {
  position: absolute;
  left: var(--progress, 0%);
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.45s ease-out;
  font-size: 14px;
}

.approach-arrived .approach-bus {
  animation: arrivePulse 1s ease-in-out infinite;
}

@keyframes arrivePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.14); }
}

.empty {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}

/* ===== 乗り換え（往復ナビ）カード ===== */
/* 1枚のカードで「乗車停 発 → 乗換停 着/発 → 区間」を縦に並べる。
 * 既定の .trip はタップ展開用に cursor:pointer だが、このカードは展開しないため解除する。 */
.itin {
  cursor: default;
  -webkit-user-select: auto;
  user-select: auto;
}

.itin:active { transform: none; }

/* カード全体を Google マップ乗換案内への遷移リンクにする場合 */
a.itin {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a.itin:hover { text-decoration: none; }

a.itin:active { transform: scale(0.995); }

/* マップ導線フッター（クリック可能であることの明示） */
.itin-maps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-2);
}

a.itin:hover .itin-maps { background: var(--ref-hover-bg); }

.itin-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 12px 20px;
  min-height: 60px;
}

.itin-stage + .itin-stage { border-top: 1px solid var(--border); }

.itin-stage-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.itin-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.itin-stop {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.itin-act {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}

.itin-sub-plain { color: var(--text-2); }

/* 乗換セクション（2つの便をつなぐ帯） */
.itin-transfer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  padding: 9px 14px 9px 20px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.itin-transfer-stop {
  font-size: 12px;
  color: var(--text-2);
}

.itin-transfer-stop strong {
  font-family: "DM Mono", monospace;
  font-weight: 700;
  color: var(--text);
}

.itin-transfer-wait {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--ref-bg);
  border: 1px solid var(--ref-border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.itin-transfer-none .itin-transfer-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* 参照時刻表リンク（カード群の下にまとめて配置） */
.itin-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 2px 0 4px;
}

/* ===== フォーカス可視化 ===== */
.stop:focus-visible,
.trip:focus-visible,
.tab-btn:focus-visible,
.page-link:focus-visible,
.ref-link:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* ===== フッター ===== */
.app-footer {
  margin-top: 22px;
  padding: 18px 12px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
}

.app-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 8px;
}

.app-footer-links a {
  color: var(--accent-2);
  font-size: 13px;
  text-decoration: none;
}

.app-footer-links a:hover { text-decoration: underline; }

.app-footer-copy {
  font-size: 12px;
  color: var(--text-3);
}

/* ===== 小型端末（360px 以下） ===== */
@media (max-width: 360px) {
  .stop-name,
  .trip-title { font-size: 15px; }
  .time-main  { font-size: 23px; }
  .tab-btn    { font-size: 14px; }
  .row        { padding: 11px 12px 11px 16px; }
  .stop-head,
  .trip-head  { padding: 11px 12px 11px 16px; }
}

/* 横向きかつ縦幅が狭い場合は sticky を解除 */
@media (orientation: landscape) and (max-height: 500px) {
  .header { position: static; }
  .tabs   { position: static; }
}

/* ===== 使い方ガイド（help.html） ===== */
.help {
  padding-bottom: 32px;
}

.help-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

.help-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.help-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border);
}

.help-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-alt);
  font-size: 16px;
  flex-shrink: 0;
}

.help-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.help-section > p {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
}

.help-section > p:last-child {
  padding-bottom: 14px;
}

.help-items {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 16px;
}

.help-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.help-item-badge {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--link-strong);
  white-space: nowrap;
}

.help-item-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
}

.help-item-text strong {
  color: var(--link-strong);
  font-weight: 700;
}

.help-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.help-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.help-dot.is-soon { background: var(--accent); }
.help-dot.is-near { background: var(--near); }
.help-dot.is-ok   { background: var(--ok); }

.help-tip {
  margin: 0 16px 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--near);
  border-radius: 0 8px 8px 0;
  background: var(--near-soft);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text);
}

.help-tip::before {
  content: "💡 ";
}

/* ===== モーション低減への配慮 ===== */
@media (prefers-reduced-motion: reduce) {
  .board-live-dot,
  .approach-arrived .approach-bus {
    animation: none;
  }
  .approach-bus,
  .expand-icon,
  .stop-extra,
  .trip-extra {
    transition: none;
  }
  .content.switching > .stop,
  .content.switching > .itin {
    animation: none;
  }
}