/* コンテンツページ共通 CSS。配色・タイプスケールはアプリ本体 (00-高齢者向け設計値) と同じトークン。
   ライト既定 + @media dark + [data-theme] 上書きの 3 点セット。 */
html{font-size:100%}
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --hover:#eef1f4;
  --line:#d0d5dc;
  --ctl:#767f8d;
  --fg:#1a1d23;
  --fg2:#434a57;
  --accent:#1148a4;
  --band:#1F2937;
  --fs-xl:1.5rem;
  --fs-lg:1.25rem;
  --fs-md:1.125rem;
  --fs-sm:1rem;
  --fs-xs:.875rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101319; --panel:#161a22; --hover:#232936; --line:#39404d;
    --ctl:#8b94a3; --fg:#f2f4f7; --fg2:#c3cad4; --accent:#7fb3ff; --band:#232936;
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#ffffff; --hover:#eef1f4; --line:#d0d5dc;
  --ctl:#767f8d; --fg:#1a1d23; --fg2:#434a57; --accent:#1148a4; --band:#1F2937;
}
:root[data-theme="dark"]{
  --bg:#101319; --panel:#161a22; --hover:#232936; --line:#39404d;
  --ctl:#8b94a3; --fg:#f2f4f7; --fg2:#c3cad4; --accent:#7fb3ff; --band:#232936;
}
:root[data-theme="dark"] body{-webkit-font-smoothing:antialiased}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:var(--fs-md);font-weight:500;line-height:1.75}
a{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:10}
.skip:focus{left:0}

.siteheader{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.siteheader .brand{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-lg);font-weight:700;color:var(--fg);text-decoration:none}
.siteheader nav{display:flex;gap:4px;flex-wrap:wrap}
.siteheader nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--fg2);text-decoration:none;font-size:var(--fs-sm);font-weight:600;border-radius:8px}
.siteheader nav a:hover{background:var(--hover);color:var(--fg)}
.siteheader nav a[aria-current="page"]{color:var(--accent)}
/* 言語切替 (現言語は非リンク表示)。CTA の左に置き、狭幅では折り返す */
.siteheader .langswitch{margin-left:auto;font-size:var(--fs-xs);font-weight:600;
  display:flex;align-items:center;gap:2px;white-space:nowrap}
.siteheader .langswitch a{color:var(--accent);min-height:44px;padding:0 8px}
.siteheader .langswitch .langcur{color:var(--fg2);padding:0 8px}

.content{max-width:760px;margin:0 auto;padding:24px 16px 48px}
.content h1{font-size:var(--fs-xl);line-height:1.4;margin:8px 0 4px}
.content h2{font-size:var(--fs-lg);line-height:1.45;margin:2em 0 .6em;
  padding-left:12px;border-left:4px solid var(--accent)}
.content h3{font-size:var(--fs-md);margin:1.6em 0 .5em}
.content p{margin:.9em 0}
.content ul,.content ol{padding-left:1.6em}
.content li{margin:.35em 0}
.content table{border-collapse:collapse;width:100%;margin:1em 0;font-size:var(--fs-sm)}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.content th{background:var(--hover);font-weight:700}
.pagemeta{color:var(--fg2);font-size:var(--fs-xs);margin:0 0 20px}
.readtime{color:var(--fg2);font-size:var(--fs-xs)}
.breadcrumb{font-size:var(--fs-xs);color:var(--fg2);margin:0 0 8px}
.breadcrumb a{color:var(--fg2)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
.breadcrumb li+li::before{content:"›";margin-right:4px}

.cardlist{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.cardlist a{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--fg);background:var(--panel)}
.cardlist a:hover{background:var(--hover)}
.cardlist .t{font-size:var(--fs-md);font-weight:700;color:var(--accent);margin:0 0 6px}
.cardlist .d{font-size:var(--fs-sm);color:var(--fg2);margin:0}
.cardlist .m{font-size:var(--fs-xs);color:var(--fg2);margin:8px 0 0}

.gloss-index h2{border-left:none;padding-left:0;font-size:var(--fs-md);
  background:var(--band);color:#fff;display:inline-block;padding:4px 14px;border-radius:6px}
.termheader{background:var(--band);color:#fff;padding:14px 16px;border-radius:10px;margin:8px 0 4px}
.termheader h1{margin:0;font-size:var(--fs-xl);color:#fff}
.termheader .yomi{font-size:var(--fs-xs);color:#e5e9f0;margin:2px 0 0}

.related{margin-top:40px;padding-top:8px;border-top:1px solid var(--line)}
.citations{margin-top:32px;font-size:var(--fs-sm);color:var(--fg2)}
.citations li{margin:.3em 0}
.disclaim{margin-top:24px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;
  font-size:var(--fs-sm);color:var(--fg2)}

.applink{display:flex;align-items:center;justify-content:center;min-height:56px;margin:28px 0 8px;
  background:var(--accent);color:#fff;border-radius:12px;text-decoration:none;
  font-size:var(--fs-md);font-weight:700;padding:8px 20px;text-align:center}
:root[data-theme="dark"] .applink{color:#101319}

/* SNS シェア (記事・用語の本文直後) */
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:28px 0 0;
  padding-top:16px;border-top:1px solid var(--line)}
.share-label{font-size:var(--fs-xs);color:var(--fg2);font-weight:600}
.share-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 16px;border:1.5px solid var(--ctl);border-radius:10px;background:var(--panel);
  color:var(--fg);font-family:inherit;font-size:var(--fs-xs);font-weight:600;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .12s ease}
.share-btn:hover{transform:translateY(-2px);background:var(--hover)}
.share-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.share-x:hover{border-color:#000}
.share-hatena:hover{border-color:#00a4de}

/* フィードバック (役に立った / 立たなかった) */
.feedback{margin:20px 0 0;padding:16px;border:1px solid var(--line);border-radius:12px}
.fb-q{margin:0 0 10px;font-size:var(--fs-sm);font-weight:700}
.fb-btns{display:flex;gap:8px;flex-wrap:wrap}
.fb-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1.5px solid var(--ctl);border-radius:10px;background:var(--panel);color:var(--fg);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.fb-btn:hover{background:var(--hover)}
.fb-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .fb-btn[aria-pressed="true"]{color:#101319}
.fb-btn:focus-visible,.fb-send:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fb-after{margin-top:12px}
.fb-after label{display:block}
.fb-cl{display:block;font-size:var(--fs-xs);color:var(--fg2);margin-bottom:6px}
.fb-after textarea{width:100%;padding:10px 12px;border:1.5px solid var(--ctl);border-radius:8px;
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:var(--fs-sm)}
.fb-after textarea:focus{outline:3px solid var(--accent);outline-offset:-1px}
.fb-send{margin-top:8px;min-height:44px;padding:0 20px;border:0;border-radius:10px;
  background:var(--accent);color:#fff;font-family:inherit;font-size:var(--fs-sm);
  font-weight:700;cursor:pointer}
:root[data-theme="dark"] .fb-send{color:#101319}
.fb-thanks{margin:10px 0 0;font-size:var(--fs-sm);color:var(--fg2)}

/* お問い合わせフォーム */
.cform{margin:8px 0 0}
.cform-cat{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:0 0 16px}
.cform-cat legend{font-size:var(--fs-xs);font-weight:700;color:var(--fg2);padding:0 6px}
.cform-cat label{display:flex;align-items:center;gap:10px;min-height:44px;
  font-size:var(--fs-sm);cursor:pointer}
.cform-cat input{width:20px;height:20px;accent-color:var(--accent)}
.cform-msg span{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--fg2);margin-bottom:6px}
.cform-msg textarea{width:100%;padding:12px 14px;border:1.5px solid var(--ctl);border-radius:10px;
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:var(--fs-md);line-height:1.7}
.cform-msg textarea:focus{outline:3px solid var(--accent);outline-offset:-1px}
.cform-count{margin:6px 0 0;text-align:right;font-size:var(--fs-xs);color:var(--fg2)}
.cform-send{margin-top:8px;min-height:52px;padding:0 32px;border:0;border-radius:12px;
  background:var(--accent);color:#fff;font-family:inherit;font-size:var(--fs-md);
  font-weight:700;cursor:pointer}
.cform-send:disabled{opacity:.55;cursor:default}
.cform-send:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
:root[data-theme="dark"] .cform-send{color:#101319}
.cform-done{margin:12px 0 0;font-size:var(--fs-md);font-weight:700}

.sitefooter{border-top:1px solid var(--line);padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  color:var(--fg2);font-size:var(--fs-xs);background:var(--panel)}
.sitefooter .credit{max-width:760px;margin:0 auto 12px;line-height:1.8}
.sitefooter .footnav{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2px 4px}
.sitefooter .footnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--fg2)}
.sitefooter .copyright{max-width:760px;margin:12px auto 0}

/* 統計ヒートマップ (/stats/)。5 段の色は palette.js の輝度固定導出 poleBg(accent)
   から焼き込み (ライト = L* 94.9→32.8 の明度ランプ・ダーク = L* 22.2→74.1 の反転
   ランプ。単色 1 hue・検証 = tests/stats-heatmap-contrast.test.js が再導出一致と
   隣接段 ΔL を実測)。セルに文字は載せない (値はタップで下の説明行へ)。 */
:root{
  --hm1:#efefff; --hm2:#d4d5f3; --hm3:#aaaddb; --hm4:#7b82be; --hm5:#1148a4;
}
@media (prefers-color-scheme: dark){
  :root{--hm1:#333443; --hm2:#4e506d; --hm3:#6a6f9b; --hm4:#888fcb; --hm5:#a7b1fe;}
}
:root[data-theme="light"]{
  --hm1:#efefff; --hm2:#d4d5f3; --hm3:#aaaddb; --hm4:#7b82be; --hm5:#1148a4;
}
:root[data-theme="dark"]{
  --hm1:#333443; --hm2:#4e506d; --hm3:#6a6f9b; --hm4:#888fcb; --hm5:#a7b1fe;
}
.hm-s1{background:var(--hm1)}
.hm-s2{background:var(--hm2)}
.hm-s3{background:var(--hm3)}
.hm-s4{background:var(--hm4)}
.hm-s5{background:var(--hm5)}
/* 24 列はスマホ幅に収まらないため横スクロール (セル幅は 24px 以上を維持) */
.heatwrap{overflow-x:auto;margin:12px 0 4px;padding-bottom:4px}
.heatgrid{display:grid;grid-template-columns:max-content repeat(24,minmax(24px,1fr)) max-content;
  gap:2px;min-width:740px;align-items:stretch}
.hm-rowlabel{position:sticky;left:0;background:var(--bg);display:flex;align-items:center;
  padding-right:8px;font-size:var(--fs-xs);font-weight:600;color:var(--fg);white-space:nowrap}
.hm-cell{min-height:36px;border:0;border-radius:4px;padding:0;cursor:pointer;font-size:0}
.hm-cell:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.hm-cell.hm-nodata{background:var(--hover);border:1px dashed var(--ctl);cursor:default}
.hm-axis{font-size:var(--fs-xs);color:var(--fg2);white-space:nowrap;padding-top:2px}
.hm-peak{display:flex;align-items:center;padding-left:8px;
  font-size:var(--fs-xs);color:var(--fg2);white-space:nowrap}
.hm-legend{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;
  margin:10px 0 0;font-size:var(--fs-xs);color:var(--fg2)}
.hm-legend .sw{width:22px;height:14px;border-radius:3px;display:inline-block}
.hm-legend .sw.nodata{background:var(--hover);border:1px dashed var(--ctl)}
.heatdetail{min-height:44px;display:flex;align-items:center;margin:8px 0 0;padding:0 2px;
  font-size:var(--fs-sm);font-weight:600;color:var(--fg)}
.stats-asof{font-size:var(--fs-sm);color:var(--fg2);margin:.4em 0 0}
.stats-stale{margin:12px 0 0;padding:12px 14px;border:1.5px solid var(--ctl);
  border-radius:10px;font-size:var(--fs-sm);color:var(--fg);background:var(--panel)}

/* データ記事のチャート (src/utils/chart-svg.js が build 時に生成する inline SVG)。
   色はハードコードせず既存ヒートマップトークン --hm3 / --hm5 を再利用 (単色 1 hue
   明度ランプ・ライト/ダーク両対応・AAA 検証済み)。文字は全て --fg / --fg2 =
   系列色の文字禁止 (dataviz 原則)。 */
.chart{margin:1.2em 0}
.chart-svg{display:block;width:100%;height:auto;max-width:640px}
.chart-bar{fill:var(--hm3)}
.chart-bar-top{fill:var(--hm5)}
/* 分布チャートの順序色 (ramp)。1 hue の明度ランプだが、棒グラフの塗りは
   マーク視認の 3:1 下限が要る (ヒートマップのセルと違い棒は細い) ため、
   ヒートマップ 5 段でなく全段 3:1 以上の専用 5 段を使う (fff / 101319 地で実測)。 */
:root{
  --cr1:#7091c8; --cr2:#587fbf; --cr3:#416db6; --cr4:#295aad; --cr5:#1148a4;
}
@media (prefers-color-scheme: dark){
  :root{--cr1:#6b72a2; --cr2:#7a82b9; --cr3:#8991d0; --cr4:#98a1e7; --cr5:#a7b1fe;}
}
:root[data-theme="light"]{
  --cr1:#7091c8; --cr2:#587fbf; --cr3:#416db6; --cr4:#295aad; --cr5:#1148a4;
}
:root[data-theme="dark"]{
  --cr1:#6b72a2; --cr2:#7a82b9; --cr3:#8991d0; --cr4:#98a1e7; --cr5:#a7b1fe;
}
.chart-bar-r1{fill:var(--cr1)}
.chart-bar-r2{fill:var(--cr2)}
.chart-bar-r3{fill:var(--cr3)}
.chart-bar-r4{fill:var(--cr4)}
.chart-bar-r5{fill:var(--cr5)}
/* 路線プロフィール (/routes/ 概要パネル) の色トークン。
   --rp1〜5 = 本数ストリップの diverging (青 = 少ない / 灰 / 赤 = 多い)・
   --tag-hi/lo = チップの意味色。検証値は .rt-sbar-c* / .rt-tag-* のコメント参照 */
:root{
  --rp1:#0d3e90; --rp2:#4468b8; --rp3:#8a919d; --rp4:#cf5b2a; --rp5:#8f1a12;
  --tag-hi:#b3261e; --tag-lo:#1148a4;
}
@media (prefers-color-scheme: dark){
  :root{--rp1:#66a3ff; --rp2:#5577aa; --rp3:#8b94a3; --rp4:#b5764a; --rp5:#ff8f66;
    --tag-hi:#cf3527; --tag-lo:#2e6bd0;}
}
:root[data-theme="light"]{
  --rp1:#0d3e90; --rp2:#4468b8; --rp3:#8a919d; --rp4:#cf5b2a; --rp5:#8f1a12;
  --tag-hi:#b3261e; --tag-lo:#1148a4;
}
:root[data-theme="dark"]{
  --rp1:#66a3ff; --rp2:#5577aa; --rp3:#8b94a3; --rp4:#b5764a; --rp5:#ff8f66;
  --tag-hi:#cf3527; --tag-lo:#2e6bd0;
}
.chart-dot{fill:var(--hm3)}
.chart-dot-top{fill:var(--hm5)}
.chart-title{fill:var(--fg);font-weight:700}
.chart-label{fill:var(--fg);font-weight:600}
.chart-value{fill:var(--fg2)}
.chart-note{fill:var(--fg2)}
.chart-axis{stroke:var(--ctl);stroke-width:1.5}
.chart-grid{stroke:var(--ctl);stroke-width:1;stroke-dasharray:3 4}
.chart-alt{margin:6px 0 0;font-size:var(--fs-sm)}
.chart-alt summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  color:var(--fg2);font-weight:600}
.chart-alt table caption{text-align:left;color:var(--fg2);font-size:var(--fs-xs);
  padding:0 0 6px}

/* 制作書籍 (KDP) 紹介カード (own-book.js が発売日ゲート通過時のみ JS 挿入)。
   配色はサイトトークンのみ使用 (handcrafted-quality-policy = 薄色文字禁止)。 */
.own-book-card{margin:24px 0 0;padding:18px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.own-book-head{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.own-book-badge{display:inline-block;padding:2px 6px;border:1px solid var(--ctl);
  border-radius:4px;font-size:var(--fs-xs);font-weight:700;line-height:1;color:var(--fg2)}
.own-book-heading{font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
.own-book-body{display:flex;align-items:flex-start;gap:16px}
.own-book-cover{flex-shrink:0}
.own-book-cover img{display:block;border:1px solid var(--line);border-radius:6px}
.own-book-info{min-width:0}
.own-book-title{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--fg);line-height:1.4}
.own-book-note{margin:8px 0 0;font-size:var(--fs-sm);color:var(--fg2);line-height:1.6}
.own-book-cta-wrap{margin:14px 0 0}
.own-book-cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 22px;border-radius:10px;background:var(--accent);
  color:#fff;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
:root[data-theme="dark"] .own-book-cta{color:#101319}
.own-book-cta:hover{opacity:.9}

/* 路線データ一覧 (/routes/)。6 列はスマホ幅に収まらないため横スクロール
   (ヒートマップと同じ手掛かり方式)。並べ替えボタンは 44px タップ確保。 */
.routetablewrap{overflow-x:auto;margin:12px 0 4px;padding-bottom:4px}
/* 390px に収める圧縮形 (2026-08-11 ユーザー要望「スマホでも収まる + スマートに」):
   min-width 撤廃・セル 14px・見出し簡略化 (便数 (平日) → 平日)・約 は前文の
   「おおよその目安」へ集約。320px のみ横スクロールが残る (routetablewrap が受ける) */
.routetable{width:100%;font-size:var(--fs-xs);table-layout:fixed}
.routetable th:first-child{width:24%}
.routetable th,.routetable td{padding:2px 4px 6px}
/* 系統名は折返し可 (390px で「臨海 28-1」等が見切れないこと > 1 行維持) */
.routetable th[scope="row"]{white-space:normal;font-weight:700}
.routetable td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  position:relative}
/* セル内バー: セル下端 2px 上の 4px 帯。文字と重ねない = 概要パネルの本数
   ストリップと同じ 5 段の量色 (--rp1〜5 = 青 少ない ⇔ 灰 ⇔ 赤 多い) を使える。
   値の主符号は数字と幅で、色は冗長な補助 (dataviz) */
.rt-bar{position:absolute;left:4px;bottom:2px;height:4px;
  width:calc(var(--w) * .88);border-radius:2px}
.rt-bc1{background:var(--rp1)}
.rt-bc2{background:var(--rp2)}
.rt-bc3{background:var(--rp3)}
.rt-bc4{background:var(--rp4)}
.rt-bc5{background:var(--rp5)}
.rt-v{position:relative}
.rt-sort{display:inline-flex;align-items:center;min-height:44px;width:100%;
  padding:0;border:0;background:none;color:var(--fg);font-family:inherit;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;text-align:left}
/* 並べ替え記号は ▴▾ (テキスト確定表示)。上下矢印記号は iOS で絵文字表示になるため禁止 */
.rt-sort::after{content:"▴▾";margin-left:6px;color:var(--fg2);font-weight:400;
  font-size:.7em;letter-spacing:-.1em}
th[aria-sort="descending"] .rt-sort::after{content:"▾";color:var(--accent);font-size:1em;letter-spacing:0}
th[aria-sort="ascending"] .rt-sort::after{content:"▴";color:var(--accent);font-size:1em;letter-spacing:0}
.rt-sort:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rt-note{font-size:var(--fs-sm);color:var(--fg2)}
/* 系統名 = 押せる (経路地図)。左の色帯 = 系統公式色 (--rc・build 焼き込み) */
.rt-name{display:inline-flex;align-items:center;gap:8px;min-height:44px;width:100%;
  padding:0;border:0;background:none;color:var(--accent);font-family:inherit;
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:3px}
.rt-name::before{content:"";width:5px;height:22px;border-radius:3px;
  background:var(--rc,var(--ctl));flex-shrink:0}
.rt-name:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rt-name[aria-expanded="true"]{color:var(--fg);text-decoration:none}
/* 概要 + 経路地図パネル (系統タップで開く・sticky で表スクロール中も見える) */
.rt-mappanel{position:sticky;top:0;z-index:10;margin:12px 0;
  border:1.5px solid var(--ctl);border-radius:12px;overflow:hidden;background:var(--panel)}
/* 概要が加わりパネルが約 800px に伸びたため、sticky は視高に余裕がある環境に限る
   (390×844 実測でパネルが画面をほぼ覆い、表の続きが押せなくなった)。
   1100px 未満は static + タップ時 scrollIntoView で代替 */
@media (max-height:1099px){.rt-mappanel{position:static}}
/* 路線の概要 (rtprof — routes.js が routes-profile.json から組み立てる) */
.rt-prof{padding:10px 14px 12px;border-bottom:1px solid var(--line)}
.rt-ends{margin:0;font-size:var(--fs-md)}
/* 所要時間の追記で長くなったため全体 nowrap をやめ、意味の切れ目 (・) でだけ
   折返す。各かたまり (距離 + 所要 / 停留所数) は rt-endseg で泣き別れ防止 */
.rt-endsub{display:inline-block;margin-left:10px;font-size:var(--fs-xs);
  font-weight:600;color:var(--fg2)}
.rt-endseg{white-space:nowrap}
.rt-fare{margin:6px 0 0;font-size:var(--fs-sm);font-weight:600}
.rt-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0}
.rt-tags li{padding:3px 10px;border-radius:8px;color:#fff;
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
/* チップの意味色: hi = 使い勝手の良さ (赤) / lo = 控えめな面 (青)。
   白文字 4.5:1 以上を両モードで実測 (light 6.54 / 8.44・dark 5.01 / 5.08)。
   意味は文字が伝え、色は補助 (色だけに頼らない) */
.rt-tag-hi{background:var(--tag-hi)}
.rt-tag-lo{background:var(--tag-lo)}
.rt-striphead{margin:10px 0 2px;font-size:var(--fs-xs);font-weight:600;color:var(--fg2)}
.rt-stripbars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  align-items:end;height:52px}
.rt-sbar{border-radius:2px 2px 0 0;height:var(--h,0%);min-height:3px}
.rt-sbar-zero{min-height:0;height:0}
/* 本数ストリップの 5 段 diverging (青 = 少ない ⇔ 灰 ⇔ 赤 = 多い)。全段 3:1 以上
   (fff / 161a22 地で実測)・CVD 隣接分離 PASS (dataviz validator)。値の主符号は
   棒の長さで、色は冗長な補助 + 2px 間隙が第 2 の分離 */
.rt-sbar-c1{background:var(--rp1)}
.rt-sbar-c2{background:var(--rp2)}
.rt-sbar-c3{background:var(--rp3)}
.rt-sbar-c4{background:var(--rp4)}
.rt-sbar-c5{background:var(--rp5)}
.rt-striphours{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-top:2px;
  font-size:var(--fs-xs);color:var(--fg2);text-align:center;font-variant-numeric:tabular-nums}
.rt-summary{margin:10px 0 0;font-size:var(--fs-sm)}
.rt-proferr{margin:0;font-size:var(--fs-sm);color:var(--fg)}
.rt-maphead{display:flex;align-items:center;justify-content:space-between;
  padding:6px 6px 6px 14px;border-bottom:1px solid var(--line)}
.rt-mapname{font-size:var(--fs-md);font-weight:700}
.rt-mapclose{min-height:44px;padding:0 16px;border:1.5px solid var(--ctl);border-radius:10px;
  background:var(--panel);color:var(--fg);font-family:inherit;font-size:var(--fs-xs);
  font-weight:600;cursor:pointer}
.rt-mapclose:hover{background:var(--hover)}
.rt-mapclose:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rt-map{height:min(320px,45vh);background:var(--hover)}
.rt-maperr{margin:0;padding:12px 14px;font-size:var(--fs-sm);color:var(--fg)}

/* 早起き・夜ふかしの系統 (/routes/ の節・Wave 5)。3 列の小さな表 2 面。
   広幅では横並び (関連する 2 表のまとまり)・390px では縦積み */
.rt-extremes{display:grid;gap:4px 20px;grid-template-columns:1fr}
@media (min-width:720px){.rt-extremes{grid-template-columns:1fr 1fr}}
.rt-xtable th:first-child{width:36%}
.rt-xtable thead th{font-size:var(--fs-xs);font-weight:700;text-align:left}
.rt-xtable thead th+th{text-align:right}
.rt-xtable thead th:last-child,.rt-xtable td.rt-xorigin{text-align:left}
/* 起点名は折返し可 (泣き別れするより 2 行が正) */
.rt-xtable td.rt-xorigin{white-space:normal}

/* 系統の区分 (/routes/groups/・Wave 5) */
.rg-index{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.rg-index a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;border:1.5px solid var(--ctl);
  border-radius:10px;color:var(--fg);font-size:var(--fs-sm);font-weight:700;
  text-decoration:none}
.rg-index a:hover{background:var(--hover)}
.rg-index a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rg-group{border:1px solid var(--line);border-radius:12px;padding:4px 16px 12px;margin:16px 0}
.rg-group h2{margin:12px 0 4px;font-size:var(--fs-lg)}
.rg-center{margin:0 0 4px;font-size:var(--fs-sm);font-weight:600;color:var(--fg2)}
.rg-routes{list-style:none;margin:0;padding:0}
.rg-routes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;
  padding:2px 0;border-top:1px solid var(--line)}
.rg-routes li:first-child{border-top:0}
/* 系統名リンク = /routes/ の概要パネルへの深リンク。左の色帯 = 系統公式色
   (.rt-name と同じ視覚言語・タップ 44px 確保) */
.rg-route{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--accent);font-size:var(--fs-sm);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rg-route::before{content:"";width:5px;height:22px;border-radius:3px;
  background:var(--rc,var(--ctl));flex-shrink:0}
.rg-route:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rg-ends{font-size:var(--fs-xs);font-weight:600;color:var(--fg2)}
/* 区分ページの各系統行 → 系統別の着地ページ (Wave 6) への導線 */
.rg-detail{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;
  color:var(--accent);font-size:var(--fs-xs);font-weight:700;text-underline-offset:3px}
.rg-detail:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 系統別の着地ページ (/routes/<系統>/・Wave 6) */
.rp-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:8px 0 0}
.rp-facts dt{font-size:var(--fs-sm);font-weight:700;color:var(--fg2)}
.rp-facts dd{margin:0;font-size:var(--fs-sm);font-weight:600}
.rp-shape{max-width:560px;border:1px solid var(--line);border-radius:12px;padding:10px}
.rp-shape svg{display:block;margin:0 auto;max-width:100%;max-height:360px;width:auto;height:auto}
/* /routes/ の概要パネル → 系統別の着地ページ (assets/routes.js が挿入) */
.rt-proflink{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  color:var(--accent);font-weight:700;text-underline-offset:3px}
.rt-proflink:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* 系統別ページの静的リンク索引 (/routes/ の details 折りたたみ) */
.rt-allpages { margin: 12px 0 0; }
.rt-allpages summary { cursor: pointer; font-size: .875rem; font-weight: 700;
  color: var(--accent); padding: 10px 2px; }
.rt-allpages nav { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 4px 0 8px; }
.rt-allpages nav a { font-size: .875rem; padding: 11px 12px; white-space: nowrap; }