:root {
  /* 地と文字 */
  --bg: #f3f1ed; --surface: #ffffff; --surface-2: #f4f3f0; --text: #1a1f1d; --muted: #5c6662; --line: #e4e1db; --field-line: #c9cdc9;
  /* 入力欄の枠(白 3.5:1・地 3.1:1。四捨五入で 3:1 を割らないよう少し余裕を持たせる。E-13・レビュー M-6) */
  --input-line: #838b87;
  --shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 2px 10px rgba(40, 32, 20, .06);
  /* ロゴの紺(電車の顔の色。主なボタン・リンクだけに使う) */
  --accent: #1f3d49; --accent-ink: #ffffff; --accent-soft: #e3edf0;
  /* 次の便(ロゴの行き先表示の黄色) */
  --next-bg: #fff4d6; --next-edge: #f5c242;
  /* 残り時間: まもなく(3分以内)・もうすぐ(10分以内)・それより先 */
  --soon-bg: #c2410c; --soon-ink: #ffffff;
  --near-bg: #ffe6cc; --near-ink: #8a3a00;
  --later-bg: #ecebe7; --later-ink: #3d4643;
  /* 次の便の「あと○分」(10分より先でも色を付けて目立たせる) */
  --next-until-bg: #1f3d49; --next-until-ink: #ffffff;
  /* 終電が30分以内 */
  --warn: #9a3a00; --warn-soft: #fff0e0;
  --past: #6b7571;
  /* 遅れの文字(次の便の黄色の帯・カード・地の上でAA) */
  --late: #9a3a00;
  /* 札の地(路線の札の色は .route.line-* で決める) */
  --route-bg: #2b3438; --route-ink: #ffffff;
  /* 方面の色(Okabe–Ito を白文字4.5:1以上になるよう暗めに調整) */
  --pole-0: #0067a5; --pole-1: #b84a00; --pole-2: #00775c; --pole-3: #a63d7a;
  --pole-4: #8a6200; --pole-5: #5b4ba8; --pole-6: #7a5230; --pole-7: #4a5358; --pole-ink: #ffffff;
  --radius: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1312; --surface: #1a201f; --surface-2: #232a29; --text: #eef2f0; --muted: #a7b1ad; --line: #2c3533; --field-line: #46514e; --input-line: #6b7773;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --accent: #9cc3d4; --accent-ink: #0b1a20; --accent-soft: #1d3540;
    --next-bg: #3a3016; --next-edge: #f5c242;
    --soon-bg: #ff8a5c; --soon-ink: #1a0800;
    --near-bg: #47280f; --near-ink: #ffc48a;
    --later-bg: #2c3432; --later-ink: #d0d8d5;
    --next-until-bg: #9cc3d4; --next-until-ink: #0b1a20;
    --warn: #fdba74; --warn-soft: #3a2416;
    --past: #8a9591;
    --late: #fdba74;
    --route-bg: #46545b; --route-ink: #ffffff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* iOS の「文字サイズ」設定(Dynamic Type)に合わせる(iOS だけ。Mac の Safari は -apple-system-body が13pxなので当てない)。
   標準の設定では17pxになるので、index.html の小さなスクリプトで 16/17 をかけ、今までと同じ16pxを基準にする(E レビュー M-4) */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 1rem; line-height: 1.6; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 文字の大きさは rem(端末・ブラウザの文字サイズの設定に合わせて大きくなる。E-8)。小さい文字も、ふつうの文は14px、札は13px以上 */
/* .say: 読み上げにだけ添える言葉(「7時42分」「発」「系統」など。common.js の say・timeSay) */
.visually-hidden, .say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bar { position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.brand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; color: var(--text); font-weight: 700; text-decoration: none; font-size: 1.0625rem; }
/* 横長のロゴ。320px前後の画面ではロゴを少し小さくし、「非公式」と1行に収める(上の帯を低くして時刻を先に見せる) */
.brand img { display: block; height: 36px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.brand picture { display: block; min-width: 0; max-width: 100%; }
@media (max-width: 360px) { .brand img { height: 28px; } }
@media (min-width: 480px) { .brand img { height: 40px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.unofficial { font-size: .8125rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }
/* iPad 横・枠なしの PC など広い画面(1000px 以上)では、バス停の画面と1日の時刻表だけ本文を広げる(F-12)。
   バス停ののりばのカードは2列に、時刻表は1行に並ぶ便を増やす。見出し・切り替え・説明の文は読みやすい幅(640px)のまま */
@media (min-width: 1000px) {
  main:has(> .view-wide) { max-width: 1000px; }
  .view-wide > :not(.cards):not(.tt-section) { max-width: 640px; }
  .view-wide .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .view-wide .cards > :not(.card) { grid-column: 1 / -1; }
}
section { margin: 0 0 24px; }
h1 { font-size: 1.5rem; font-weight: 800; margin: 4px 0; line-height: 1.3; letter-spacing: .01em; }
h2 { font-size: 1.125rem; font-weight: 800; margin: 0 0 10px; line-height: 1.4; }
h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; line-height: 1.4; }
.hint { color: var(--muted); font-size: .875rem; margin: 6px 0 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; }
/* バス停・区間の画面の「← ホーム」。押せる高さ(44px)は保ち、上下の余白に重ねて見出しとの間を詰める */
a.back[href="#/"] { margin: -12px 0 -8px; }

input[type=search]::placeholder { text-overflow: ellipsis; }
/* iPhone は16px未満の入力欄を押すと画面を拡大し、戻さない(右が見切れる)。端末の文字サイズを小さくしていても16px以上に */
input[type=search], select { width: 100%; font-size: max(16px, 1.0625rem); padding: 12px 14px; border: 1px solid var(--input-line); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--field-line); background: var(--surface); color: var(--text); font-size: .9375rem; text-decoration: none; cursor: pointer; }
.btn-block { width: 100%; font-size: 1rem; font-weight: 600; }
.near { margin-top: 12px; }
.btn-wide { width: 100%; font-size: 1rem; font-weight: 700; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn[aria-pressed=true], .btn.is-on { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: default; }
/* 便の行は、「もっと見る」の後にフォーカスを移すことがある(tabindex=-1)。キーボードで操作しているときだけ枠を出す */
.dep:focus:not(:focus-visible) { outline: none; }
.dep:focus-visible { outline-offset: -3px; }

.list { list-style: none; margin: 8px 0 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.list:empty { display: none; }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.near-next { display: block; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.near-next:empty { display: none; }
.list .meta { color: var(--muted); font-size: .875rem; text-align: right; }
.list .empty { padding: 12px 14px; color: var(--muted); }
/* 角を丸めるために overflow:hidden にしている一覧では、フォーカスの枠が外側だと切れるので内側に描く */
.list a:focus-visible, .list button:focus-visible, .suggest button:focus-visible, .suggest a:focus-visible { outline-offset: -3px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; }
/* 欄の見出しと、その右の「編集」(いつもの区間・最近見たバス停) */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sec-head h2 { margin: 0; min-width: 0; }
.sec-edit { flex: none; min-width: 72px; padding: 6px 14px; font-weight: 600; }
.sec-edit[hidden] { display: none; }
/* 外す・消すボタン(編集中だけ出す) */
.btn-remove { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.route-remove { margin: 4px 0 6px; }
.chips-edit { column-gap: 14px; }
.chips-edit li { display: inline-flex; align-items: center; gap: 4px; }
.chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--warn); border-radius: 999px; background: var(--surface); color: var(--warn); font-size: 1.375rem; line-height: 1; cursor: pointer; }
/* 外した・消した直後の「元に戻す」 */
.undo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; margin: 0 0 14px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); }
.undo-bar p { flex: 1 1 12em; margin: 0; overflow-wrap: anywhere; }
.undo-bar .btn { flex: none; font-weight: 700; }
.recent .undo-bar { margin: 10px 0 0; }
.plain { list-style: none; padding: 0; margin: 6px 0 0; }
.plain li { padding: 4px 0; }

.card { display: block; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 14px; scroll-margin-top: 64px; color: var(--text); text-decoration: none; }
/* 近道一覧から移った先の方面(少しの間ふちどる) */
.card.is-target { box-shadow: 0 0 0 3px var(--next-edge), var(--shadow); }
.card h2:focus { outline: none; }
/* 画面を移ったときにフォーカスを移す見出し・画面の欄(main.js の focusTitle)。キーボードで操作しているときだけ枠を出す */
h1:focus:not(:focus-visible), .view:focus:not(:focus-visible) { outline: none; }
/* 見出しは Tab では止まらず(tabindex=-1)、フォーカスはプログラムで移すだけ。キーボードで開いた後(:focus-visible と判定される)でも枠を出さない */
h1[tabindex="-1"]:focus, .view[tabindex="-1"]:focus { outline: none; }
.card h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fav-head { display: flex; align-items: center; gap: 10px; }
.fav-next { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; margin: 10px -14px -14px; padding: 10px 14px 12px; background: var(--next-bg); border-radius: 0 0 var(--radius) var(--radius); box-shadow: inset 0 3px 0 var(--next-edge); }
.fav-next strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fav-next .fav-rest { flex-basis: 100%; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.notice { padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); margin: 0 0 12px; }
.notice-warn { background: var(--warn-soft); }
.notice-stale { border: 2px solid var(--warn); }
.notice-stale p { margin: 4px 0 0; }
.cache-note .btn { display: flex; width: fit-content; margin-top: 8px; }

.dia { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.filters { display: grid; gap: 8px; margin: 12px 0; }
/* 畳んだ欄(絞り込み・方面の一覧・全駅)。見出しの行だけを出し、押すと開く */
.fold { margin: 6px 0; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); }
.fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: .9375rem; font-weight: 600; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
@media (max-width: 360px) { .fold { margin: 4px 0; } }
.fold > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > .filters { margin: 0; padding: 12px; }
.pole-nav-list { margin: 0; padding: 4px 0; }
.pole-nav-list li { padding: 0; }
.pole-nav-list li + li { border-top: 1px solid var(--line); }
.pole-nav-list button { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pole-nav-name { font-weight: 700; }
.pole-nav-tt { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; }
.filter-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.suggest { list-style: none; margin: 0; padding: 0; border-radius: var(--radius); overflow: hidden; }
.suggest li { border: 1px solid var(--field-line); border-top: none; }
.suggest li:first-child { border-top: 1px solid var(--field-line); }
.suggest button, .suggest a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; box-sizing: border-box; width: 100%; min-height: 44px; text-align: left; padding: 10px 12px; border: none; background: var(--surface); color: var(--text); font-size: 1rem; cursor: pointer; text-decoration: none; }
/* ほかの路線の駅に添える「仙台で乗り換え」 */
.suggest .meta { flex: none; color: var(--muted); font-size: .875rem; text-align: right; }
.suggest .empty { padding: 10px 12px; color: var(--muted); font-size: .875rem; background: var(--surface); }

.pole-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pole-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pole-head h2 { margin: 0; word-break: keep-all; overflow-wrap: anywhere; } /* 「1番のりば」を途中で折り返さない */
.dir { display: block; font-size: .875rem; font-weight: 400; color: var(--muted); text-wrap: pretty; }
.star { flex: none; gap: 4px; padding: 6px 10px; font-size: .875rem; white-space: nowrap; }
.star span[aria-hidden] { font-size: 1.25rem; line-height: 1; color: var(--accent); }
/* 幅の狭い画面では記号と文字を縦に並べ、方面の文字が細く折り返さないようにする */
@media (max-width: 360px) { .star { flex-direction: column; gap: 2px; padding: 4px 8px; font-size: .8125rem; line-height: 1.2; } }
/* のりばの丸い札(色は番号から。番号の文字でも区別できる) */
.pole-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--pc, var(--pole-7)); color: var(--pole-ink); font-size: .9375rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pole-head .pole-badge { margin-top: 0; }
.pc-0 { --pc: var(--pole-0); } .pc-1 { --pc: var(--pole-1); } .pc-2 { --pc: var(--pole-2); } .pc-3 { --pc: var(--pole-3); }
.pc-4 { --pc: var(--pole-4); } .pc-5 { --pc: var(--pole-5); } .pc-6 { --pc: var(--pole-6); } .pc-7 { --pc: var(--pole-7); }

.dep { display: grid; grid-template-columns: 2.9rem auto 1fr; align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); margin-top: 0; }
.pole-head + .dep, .pole-head + .dep-list { margin-top: 10px; }
.dep-label { color: var(--muted); font-size: .875rem; }
.dep-time { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dep-until { justify-self: end; text-align: right; }
.dep-info { grid-column: 2 / -1; font-size: .9375rem; overflow-wrap: anywhere; }
.dep-arrline { grid-column: 2 / -1; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 仙台で乗り換える行の2行目「仙台 8:20着 → 乗り換え 6分 → 8:26発 [東西線] 荒井行」 */
.dep-xfer { display: block; grid-column: 2 / -1; font-size: .9rem; color: var(--muted); margin-top: .15rem; overflow-wrap: anywhere; }
.dep-xfer strong { color: var(--text); }
.dep-xfer .xfer-seg { white-space: nowrap; }
/* 仙台駅での乗り換え時間の選択(区間の画面) */
.xfer-pick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.xfer-pick legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
/* 押されている時間の見た目は、下の「今日・平日・土休日」と同じ .btn[aria-pressed=true] を使う */
.xfer-pick .hint { flex-basis: 100%; margin: .25rem 0 0; }
.filter-sum { margin: 0 0 10px; }
/* 遅れ・接近情報: 「7:42 → 7:45ごろ」と「約3分遅れ ・ 2つ前のバス停」 */
.dep-sched { font-size: max(.55em, .875rem); font-weight: 600; color: var(--muted); }
.dep-arrow { font-size: .55em; color: var(--muted); margin: 0 .2em; }
.dep-pred { white-space: nowrap; } /* 「22:06ごろ」を途中で折り返さない */
.dep-goro { font-size: .6em; font-weight: 700; margin-left: .1em; }
.dep-rt { grid-column: 2 / -1; font-size: .875rem; font-weight: 600; color: var(--muted); }
.dep-rt.is-late, .fav-rt.is-late, .dep-rt.is-early, .fav-rt.is-early { color: var(--late); }
.fav-rt { font-size: .875rem; font-weight: 600; color: var(--muted); }
.rt-note { margin: 8px 0; font-size: .875rem; }
/* ホームの遅れの情報の行と「更新」 */
.rt-home { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.rt-home[hidden] { display: none; }
.rt-home .rt-note { margin: 0; }
.rt-home .btn { flex: none; min-height: 40px; padding: 6px 12px; font-size: .875rem; }
.rt-note.is-fail { color: var(--late); }
.rt-paren { display: inline-block; }
.rt-skew { color: var(--late); font-weight: 600; }
/* 次の便(ほかの日は最初の便): 黄色の帯と大きな時刻 */
.dep-first { margin-inline: -14px; padding: 10px 14px 12px; background: var(--next-bg); border-top: none; box-shadow: inset 4px 0 0 var(--next-edge); }
.dep-first + .dep { border-top: none; }
.dep-first .dep-label { color: var(--text); font-size: .9375rem; font-weight: 800; }
.dep-first .dep-time { font-size: 2.125rem; font-weight: 800; }
.dep-first .dep-info { font-size: 1rem; }
/* 次の便の「あと○分」は大きく。10分より先(灰色の札)でも、次の便は色を付ける(文字でも「あと○分」と書いてある) */
.dep-first .until { padding: 5px 14px; border-radius: 999px; font-size: 1.25rem; font-weight: 800; }
.dep-first .until-later { background: var(--next-until-bg); color: var(--next-until-ink); }
.fav-next .until { font-size: 1.125rem; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.fav-next .until-later { background: var(--next-until-bg); color: var(--next-until-ink); }
/* 遅れている便: 予想の時刻に「ごろ」。時刻表の時刻は下の一行のかっこ内(行を増やさない) */
.dep.is-delayed .dep-goro { font-size: .55em; }
/* 残り時間の札(色と文字の両方で伝える) */
.until { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: .875rem; font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.until:has(> span) { white-space: normal; }
.until > span { white-space: nowrap; }
@media (max-width: 360px) { .dep-first .dep-time { font-size: 1.875rem; } .dep { column-gap: 8px; } }

.until-soon { background: var(--soon-bg); color: var(--soon-ink); }
.until-near { background: var(--near-bg); color: var(--near-ink); }
.until-passed { background: transparent; color: var(--muted); border: 1px solid var(--field-line); padding: 2px 9px; }
.until-later { background: var(--later-bg); color: var(--later-ink); font-weight: 600; }
.route { display: inline-block; min-width: 2.6em; text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.5; padding: 0 6px; border-radius: 4px; background: var(--route-bg); color: var(--route-ink); margin-right: 6px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.via { display: block; color: var(--muted); font-size: .875rem; }
/* 終バス: 区切り線と薄い灰色の帯 */
.dep-last { margin: 10px -14px 0; padding: 8px 14px; background: var(--surface-2); border-top: 1px solid var(--line); }
.dep-last .dep-label { color: var(--text); font-weight: 700; }
.dep-last .dep-time { font-size: 1.25rem; }
.dep-last.is-warn { background: var(--warn-soft); }
.dep-last.is-warn .dep-label, .dep-last.is-warn .dep-time { color: var(--warn); }
.dep-last.is-warn .until { background: var(--near-bg); color: var(--near-ink); }
/* 運休の便: 「運休」の札と取り消し線(色だけに頼らない)。次・その次には数えず、残り時間も出さない */
/* 時刻を過ぎた位置情報なしの便(発車したか遅れて来るか分からない便): 「次」の行のすぐ後に、まとめて小さな1行で控えめに。
   1本ずつは途中で折り返さず、幅が足りなければ便の区切りで次の行へ(ホームのお気に入りの1行も同じ形) */
.dep-overdue { padding: 5px 0 7px; font-size: .8125rem; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.fav-overdue, .fav-next .fav-overdue { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-label { font-weight: 600; }
.ov-item { display: inline-block; max-width: 100%; }
.dep-canceled .dep-label { justify-self: start; padding: 0 5px; border: 1px solid var(--warn); border-radius: 4px; color: var(--warn); font-size: .8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.dep-canceled .dep-time { font-size: 1.125rem; font-weight: 600; color: var(--muted); }
.dep-canceled s { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--warn); }
.dep-canceled .dep-info { color: var(--muted); font-size: .875rem; }
.dep-canceled .route { background: var(--later-bg); color: var(--later-ink); }
.dep-canceled .route-time small { font-size: .7em; }
.canceled-hint { font-size: .875rem; margin: 4px 0 0; }
.fav-canceled { display: inline-block; white-space: nowrap; }
/* 区間の画面: ⇄・☆、便の行「7:42発 → 8:03着」(狭いときは「→ 8:03着」で折り返す)、「早く着く」の札 */
.route-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.route-tools .btn span[aria-hidden] { font-size: 1.125rem; line-height: 1; }
.route-star span[aria-hidden] { color: var(--accent); }
.route-time { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .25em; min-width: 0; }
.route-time small { font-size: max(.55em, .875rem); font-weight: 700; margin-left: .1em; }
.route-time > .dep-arrow { font-size: .6em; }
.dep-part, .dep-arr { white-space: nowrap; }
.dep-arr { font-size: .8em; }
.dep-dur { font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dep-arr-none { font-size: .875rem; font-weight: 600; color: var(--muted); }
.route-pole { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; vertical-align: middle; }
.route-pole .pole-badge { min-width: 24px; height: 24px; font-size: .8125rem; padding: 0 5px; }
.last-tag { display: inline-block; font-size: .8125rem; font-weight: 700; line-height: 1.5; padding: 0 6px; margin-right: 6px; border-radius: 4px; border: 1px solid var(--text); white-space: nowrap; }
.last-tag.is-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.faster { display: inline-block; font-size: .8125rem; font-weight: 700; line-height: 1.5; padding: 0 6px; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
/* ホームの「いつもの区間」のカード(見出しのリンクと ⇄)、区間の追加の手順 */
.route-card-head { display: flex; align-items: center; gap: 10px; }
.route-card-head h3 { flex: 1; min-width: 0; }
.route-card-head h3 a { display: inline-block; padding: 8px 0; color: var(--text); overflow-wrap: anywhere; }
.route-card-swap { flex: none; min-width: 44px; padding: 8px 10px; gap: 4px; font-size: .875rem; white-space: nowrap; }
.route-hint { margin: 0 0 4px; font-size: .875rem; }
.route-card-swap span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
.steps { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; counter-reset: step; }
.steps li { counter-increment: step; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--field-line); color: var(--muted); font-size: .875rem; }
.steps li::before { content: counter(step) ". "; }
/* 済んだ手順は「✓」と文字の色で示す(E-16) */
.steps li.is-done { color: var(--text); }
.steps li.is-done::before { content: "✓ " counter(step) ". "; }
.steps li.is-current { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 700; }
.route-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.list button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.route-register { display: grid; gap: 4px; justify-items: start; }
.route-register .hint:empty { display: none; }
.ended { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
/* 乗り換えの方面の駅(行き先の select の下。狭い画面では折り返す) */
.xfer-stations { display: grid; gap: 6px; }
.xfer-stations p { margin: 0; }
.xfer-stations-title { font-weight: 700; }
/* 行き先を指で選んだ後にフォーカスを移す先(tabindex=-1。h1 と同じく枠は出さない) */
.xfer-stations-title:focus { outline: none; }
.xfer-stations-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.btn.more { width: 100%; margin: 8px 0 0; color: var(--accent); font-weight: 600; }
details.lasts { margin-top: 8px; }
details.lasts summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; }


.tt { background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; margin-top: 12px; }
.tt-row { display: grid; grid-template-columns: 3em minmax(0, 1fr); border-top: 1px solid var(--line); }
.tt-row:first-child { border-top: none; }
/* 列の見出し「時｜分（小さい数字は系統番号）」(F-10) */
.tt-head { background: var(--surface-2); color: var(--muted); font-size: .8125rem; font-weight: 700; }
.tt-head > div { padding: 4px 10px; }
.tt-head > div:first-child { padding: 4px 0; text-align: center; }
.tt-hour { margin: 0; padding: 8px 0; text-align: center; font-size: 1rem; font-weight: 800; line-height: 1.6; background: var(--surface-2); font-variant-numeric: tabular-nums; scroll-margin-top: 8px; }
.tt-hour:focus:not(:focus-visible) { outline: none; }
.tt-jump { margin: 10px 0 0; }
/* 「次の便」「発車済み」の見分け方(F-8) */
.tt-keys { margin: 8px 0 0; font-size: .875rem; color: var(--muted); }
.tt-key { margin-right: 2px; }
.tt-key.is-next { padding: 0 4px; border-radius: 4px; background: var(--next-bg); box-shadow: inset 0 -3px 0 var(--next-edge); color: var(--text); font-weight: 700; }
.tt-key.is-past { color: var(--past); font-weight: 700; }
/* のりばを指定しない時刻表: のりばごとに分ける(F-6) */
.tt-section + .tt-section { margin-top: 24px; padding-top: 4px; border-top: 2px solid var(--line); }
.tt-section-head { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 4px; scroll-margin-top: 8px; }
.tt-section-head:focus:not(:focus-visible) { outline: none; }
.tt-section-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.tt-mins { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.tt-mins > span { min-width: 0; overflow-wrap: anywhere; }
.tt-mins small { font-size: .8125rem; color: var(--muted); margin-left: 2px; }
.tt-mins .is-past { color: var(--past); }
.tt-mins .is-past small { color: var(--past); }
.tt-mins .is-next { font-weight: 800; color: var(--text); background: var(--next-bg); box-shadow: inset 0 -3px 0 var(--next-edge); border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
/* 時刻表の「いま」の区切り(次の便の前。ここより前は発車済み) */
.tt-now { display: inline-block; margin-right: 6px; padding: 0 6px 0 4px; border-right: 3px solid var(--next-edge); color: var(--text); font-size: .8125rem; font-weight: 700; }
/* 降りるバス停を指定した時刻表: 分の下に着く時刻「→7:45」(F-2) */
.tt-mins.has-arr > span { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.tt-arr { font-size: .875rem; color: var(--muted); }
.tt-mins .is-past .tt-arr { color: var(--past); }
.tt-mins.has-arr .tt-now { margin: 0 0 2px; border-right: none; border-bottom: 3px solid var(--next-edge); }
.tt-pole { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; }
/* 系統と行き先の凡例(表の上の畳める欄。F-4) */
.legend { margin-top: 12px; }
.legend > ul, .legend > p { margin: 0; padding: 8px 14px; font-size: .9375rem; }
.legend > ul + p { padding-top: 0; }
.legend li { padding: 3px 0; }
.legend .route { margin-bottom: 2px; }

.foot { max-width: 640px; margin: 24px auto 0; padding: 16px 16px max(24px, env(safe-area-inset-bottom)); color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.foot p { margin: 4px 0; }
/* 下部のリンクは文の中にあって小さいので、上下に余白を足して押せる範囲を広げる(行の高さは変えない。E-16) */
.foot a { padding: 4px 0; }
/* ホームの短い説明(区間・お気に入りが無いときだけ) */
.intro { margin: 0 0 16px; }
.intro-lead { margin: 0; font-size: .9375rem; }
.intro-more { margin-top: 2px; font-size: .875rem; color: var(--muted); }
/* 開閉できることが分かるよう、畳んだ欄(.fold)と同じ向きの印を付ける(下線だとリンクに見えるので付けない) */
.intro-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.intro-more > summary::-webkit-details-marker { display: none; }
.intro-more > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: 2px; }
.intro-more[open] > summary::before { transform: rotate(45deg); }
.intro-more ul { margin: 0 0 4px; padding-left: 1.2em; line-height: 1.7; }
.filter-hint { margin: 0; }
.credits { margin: 4px 0; padding-left: 1.2em; }
.credits li { margin: 2px 0; }
/* 交通局の公式サイトへのボタン: 下に小さく「（交通局の公式サイトが開きます）」 */
.btn-ext { flex-direction: column; gap: 0; text-align: center; }
.ext-note { font-size: .875rem; color: var(--muted); font-weight: normal; }
/* 新しいタブで開くリンクの印(読み上げには「（新しいタブで開きます）」を添える。common.js の newTabMark) */
.ext-mark { display: inline-block; margin-left: .2em; font-size: .85em; font-weight: normal; text-decoration: none; }
/* ダイヤの切り替え: ボタンの下に押すと出る日付。ほかの日を表示中は帯で目立たせる */
.dia .btn { flex: 1 1 0; min-width: 0; max-width: 6rem; flex-direction: column; gap: 0; padding: 4px; line-height: 1.25; }
.dia-date { font-size: .8125rem; color: var(--muted); font-weight: normal; overflow-wrap: anywhere; } /* 文字を大きくしたときは日付を2行に */
.dia .btn[aria-pressed="true"] .dia-date { color: inherit; }
.dia-other { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); font-size: .875rem; font-weight: 600; }
.dep-rt-none { font-weight: normal; font-size: .875rem; }
.rt-legend { margin: 6px 0 0; }
/* 区間の行で遅れているとき: 発・着それぞれの時刻の前に小さく「時刻表」「予想」 */
/* 遅れの一行に添える時刻表の時刻「（時刻表 7:31）」。かっこ内は途中で折り返さない */
.dep-was { display: inline-block; font-weight: 600; }
.dep-pos { display: inline-block; }
/* 遅れている区間の次の便は「7:35ごろ発 → 7:45ごろ着」が長くなるので、少しだけ小さく */
.dep-first.is-delayed .route-time { font-size: 1.75rem; }
/* とても狭い幅(375pxの画面を2倍に拡大したときなど)や、文字を大きくしたとき(カードの幅が16文字分に満たないとき。E-8):
   残り時間の札は時刻の下の行へ回し、区間の発・着も折り返せるようにする(横にはみ出したり、札が時刻に重なったりしないように) */
.cards .card, .route-card { container-type: inline-size; }
@media (max-width: 300px) {
  .dep { grid-template-columns: 2.9rem minmax(0, 1fr); }
  .dep-until { grid-column: 2 / -1; justify-self: start; text-align: left; }
  .dep-until:empty { display: none; }
  .dep-part, .dep-arr { white-space: normal; }
}
@container (max-width: 16em) {
  /* 文字がとても大きいときは、ラベルの列を内容の幅にして、時刻や「あと○分」の幅を確保する */
  .dep { grid-template-columns: auto minmax(0, 1fr); }
  .dep-until { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .dep-until:empty { display: none; }
  .dep-part, .dep-arr { white-space: normal; }
  .star { flex-direction: column; gap: 2px; padding: 4px 8px; line-height: 1.2; }
}
/* ダーク表示では、方面の丸の色がカードの地に溶けやすいので、薄い縁を付ける(番号の文字でも区別できる。E-14) */
@media (prefers-color-scheme: dark) {
  .pole-badge { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
}
/* 動きを減らす設定がオンなら、スクロールや変化の動きを付けない(E-15) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== 基調の色 =====
   ロゴの紺を薄めて、欄の見出しの帯・カードの上端・主なボタンの塗りに使う(地・面の色は市営バス版のまま)。
   「次」の電車の黄色の帯はそのまま */
:root {
  --bg: #edf3f1; --surface: #ffffff; --surface-2: #f0f6f4; --muted: #4f5e5a; --line: #d6e3df; --field-line: #a9c4be;
  --accent-soft: #e3edf0;
  /* 欄の見出しの帯と、その文字・左の線 */
  --band-bg: #dde8ec; --band-ink: #1f3d49; --band-edge: #1f3d49;
  /* カードの上端の線 */
  --card-top: #4f7a8a;
  --later-bg: #e4eeeb; --later-ink: #2f4a46;
  --route-bg: #24423f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1513; --surface: #17201e; --surface-2: #1d2926; --muted: #a9b9b4; --line: #2a3a37; --field-line: #3f5753;
    --accent-soft: #1d3540;
    --band-bg: #1d3540; --band-ink: #cfe3ec; --band-edge: #9cc3d4;
    --card-top: #5f8fa3;
    --later-bg: #22302d; --later-ink: #d0dfdb;
    --route-bg: #3d5753;
  }
}
.bar { border-bottom: 3px solid var(--band-edge); }
/* 欄の見出し(いつもの区間・お気に入り・駅を探す など)を、薄い青の帯にする */
section:not(.card) > h2, section:not(.card) > .sec-head { margin: 0 0 10px; padding: 6px 12px; border-radius: 8px; background: var(--band-bg); color: var(--band-ink); box-shadow: inset 4px 0 0 var(--band-edge); }
section:not(.card) > h2 { padding-block: 10px; }
section:not(.card) > .sec-head h2 { color: var(--band-ink); }
/* カードの上端に青の線 */
.card { border-top: 4px solid var(--card-top); }
/* 主なボタンは青の塗り、ふつうのボタンは枠 */
.btn { border-color: var(--field-line); }
.btn-wide, .near .btn, .btn-block { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fold { border-color: var(--field-line); }
.fold > summary::before { color: var(--accent); }
.chips a { border-color: var(--field-line); }
.pole-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ===== 地下鉄版で足したもの ===== */
/* 路線の札(南北線・東西線。すべての行に出す)。色はロゴの帯の緑と青を、白い文字で 4.5:1 以上になるよう濃くしたもの
   (ロゴのままの #77a23d・#278ec7 は白い文字で 2.99・3.63 のため)。ダーク表示では明るくして濃い文字 */
.route.line-n { background: #5c7f2c; color: #fff; }
.route.line-t { background: #1d6f9e; color: #fff; }
@media (prefers-color-scheme: dark) {
  .route.line-n { background: #9cc34f; color: #10200a; }
  .route.line-t { background: #6cb8e6; color: #04192a; }
}
/* 経由(地下鉄のデータには無い。仙石線版の名残)。行き先の後ろに同じ行で添える */
.dep-info .via { display: inline; margin-left: 6px; }
/* 駅の見出しの下の駅番号と路線の札(「N10・T07 南北線 東西線」) */
.station-codes { margin: 0 0 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.station-codes .route { margin: 0 0 0 6px; }
/* ホームの路線ごとの駅のチップの駅番号(「N01」) */
.chip-code { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .4em; } /* チップは flex なので、間の空白は詰まる。余白で離す */
.chip-code.line-n { color: #4f7026; }
.chip-code.line-t { color: #1a6590; }
@media (prefers-color-scheme: dark) {
  .chip-code.line-n { color: #a8cf5c; }
  .chip-code.line-t { color: #7cc4ee; }
}
/* 「地図アプリで駅を開く」 */
.station-map { margin: 4px 0 12px; }
/* かっこ書きを途中で折り返さない(方面の見出しの「（東北本線ホーム）」) */
.nowrap { white-space: nowrap; }
@media (max-width: 240px) { .nowrap { white-space: normal; } } /* 画面が極端に狭いときは「（東北本線ホーム）」も折り返し、横にはみ出さない */
/* 1日の時刻表の凡例の印(「快」「ア」など。表の分の横の小さな字と同じ) */
.tt-mark { display: inline-block; min-width: 2.6em; margin-right: 6px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; text-align: center; font-size: .8125rem; font-weight: 700; }
/* ホームの「南北線の駅（17駅）」「東西線の駅（13駅）」 */
.all-stations { margin-top: 12px; }
.all-stations > .chips { padding: 12px; margin: 0; }
/* 電車は間が空くことがあるので、次の電車の札が「あと1時間28分」のように長くなる。狭い画面(320px)では少し小さくし、
   入りきらないときは札の中で折り返す(横にはみ出さないように) */
@media (max-width: 360px) {
  .dep-first .until { font-size: 1.0625rem; padding: 4px 10px; white-space: normal; }
  /* 区間の行は「7:32発 → 8:00着」で時刻の列が広く、札が1文字ずつ折り返してしまう。札は時刻の下の行へ回し、1行で出す */
  .dep-route.dep-first .dep-until { grid-column: 2 / -1; justify-self: start; text-align: left; }
  .dep-route.dep-first .dep-until:empty { display: none; }
  .dep-route.dep-first .until { white-space: nowrap; }
  .dep-route.dep-first .until:has(> span) { white-space: normal; }
}