/* 路線図UI用スタイルシート（簡素な計器デザイン・2026-08 第3弾）
 * ---------------------------------------------------------------------------
 * 方針: モノクロームの計器。白黒はっきり（K-A3・2026-08）。
 *  - 容器・ボタン・パネルは角丸 0〜2px + 1px 枠線。拡散シャドウなし。
 *  - ベース線 = #666666（はっきり見える灰）/ 生成ルート = #6d28d9 深紫
 *    （L4・2026-08: 線路灰・選択青・スロット緑/赤・除外アンバーのどれとも
 *      区別できる非黒。A6: 全区間均一。方向は矢印＋端点ノードが担う。
 *      2026-08 第5弾: ユーザー指摘「ルートの色は赤以外にして」により旧深朱
 *      #c2410c から赤系以外の深紫へ変更）
 *  - 選択状態 = 青 #2563eb（デモ唯一のアクセント）
 *  - 始点=緑 #16a34a / 終点=赤 #dc2626 は「実色」で塗る（淡色・透過は使わない）。
 *    スロット割当て（rm-slot-*）は選択青・ルート近黒より常に強い（後段規則）。
 *  - 除外区間の2色（破線アンバー/淡赤）だけは「不可状態」の意味を持つ意図的な淡色。
 *  - ダークモードは廃止した（K-A3）。html[data-theme] / prefers-color-scheme の
 *    上書きブロックは存在しない。
 *  - 動き: 脈動リングは終点割当て通知のみに縮小（0.7s・1回）。
 *    スロットフラッシュはフィルタなしの色+太さのみ。トーストはフェードのみ。
 *  - ラベル文字サイズの clamp 値（14px / 21px / 26px）は route-map.js の
 *    LABEL_FONT_SIZE=21 系の契約と対のため数値は変更しない（フォントのみ変更）。
 *
 * ページトークンの消費:
 *  - すべての色は :root のトークン経由で参照する。ページ側トークン
 *    （--orrg-paper/--orrg-ink/--orrg-line/--orrg-muted/--orrg-accent）は
 *    フォールバック付きで消費するため、変数未定義の環境（standalone SVG 出力
 *    等・image-save.js が本 CSS を埋め込む）でも同じ値で再現される。
 * ※ ./source/style.css の変数は参照せず、リテラル色（またはフォールバック付き
 *   var()）を書く（standalone SVG 埋め込み時に同じ色で再現されるように）。
 */

/* --- 色トークン -----------------------------------------------------------
 * 機能色（始点=緑 / 終点=赤・実色）+ ページトークンの消費（フォールバック=同値）+
 * 地図スコープの描画色。ダーク上書きブロックは廃止済み（K-A3）。
 */
:root {
    /* スロット機能色（始点=緑 / 終点=赤）。地図の端点ノード・パルス・フラッシュ・
     * スロット行ドット・タブ下線で統一して使う */
    --rm-slot-start-color: #16a34a;
    --rm-slot-goal-color: #dc2626;
    --rm-slot-start-text: #15803d;
    --rm-slot-goal-text: #b91c1c;
    /* ページトークン（ui.css 定義）。未定義環境はフォールバック=同値 */
    --rm-paper: var(--orrg-paper, #ffffff);
    --rm-surface: var(--orrg-paper, #ffffff);
    --rm-line: var(--orrg-line, #444444);
    --rm-ink: var(--orrg-ink, #111111);
    --rm-muted: var(--orrg-muted, #595959);
    --rm-accent: var(--orrg-accent, #2563eb);
    /* 地図スコープの描画色（K-A3: 白黒はっきり） */
    --rm-accent-deep: #1d4ed8;    /* 選択青の濃色（ノード選択縁・ホバー縁） */
    --rm-track: #666666;          /* 線路（ベーストラック・はっきり見える灰） */
    --rm-route: #6d28d9;          /* 生成ルート（深紫・L4。線路灰/選択青/スロット緑赤/
                                     除外アンバーのどれとも区別できる非黒・非赤。
                                     A6: 全区間均一） */
    --rm-route-deep: #4c1d95;       /* 生成ルートの濃色（O型一周ノードの縁。塗り #6d28d9 と同系） */
    --rm-label-fill: #111111;     /* 駅名ラベル */
    --rm-label-halo: #ffffff;     /* ラベル白縁取り */
    --rm-arrow-fill: #ffffff;     /* 進行方向矢印（白の塗り＋濃色ハロ） */
    --rm-arrow-halo: rgba(76, 29, 149, 0.85); /* ルート深紫より一段暗いハロ */
    --rm-btn-hover-bg: #444444;
    --rm-btn-hover-fg: #ffffff;
    --rm-btn-soft-bg: #f2f2f2;
    --rm-btn-border-strong: #444444;
    --rm-toast-error-bg: #fdeaea;
    --rm-toast-error-border: #b91c1c;
    --rm-toast-error-fg: #991b1b;
    --rm-toast-success-bg: #eaf6ec;
    --rm-toast-success-border: #15803d;
    --rm-toast-success-fg: #14532d;
    --rm-hint-bg: rgba(17, 17, 17, 0.88);
    --rm-hint-fg: #ffffff;
    /* デスクトップで地図カード上部に確保するクローム高さ（A8）。
     * 実ヘッダー ≈96px（ロゴ＋余白）。旧 230px 予約は過大でタブレット級の
     * 画面で地図を必要以上に小さくしていた。 */
    --map-chrome-h: 96px;
}

/* --- カード容器（平面の計器: 1px 枠線・角丸なし・影なし） --- */
#route-map-card {
    position: relative; /* ズームボタンの絶対配置基準 */
    background: var(--rm-surface);
    border: 1px solid var(--rm-line);
    border-radius: 0;
    padding: 12px;
    margin: 0 0 1.5rem 0;
}

#route-map {
    width: 100%;
    /* SVG（viewBox 1080×980）と同じアスペクト比。max-height が効く場面では
       preserveAspectRatio がレターボックス表示する（第一ビューポートへの収め・I9） */
    aspect-ratio: 1080 / 980;
}

#route-map svg {
    width: 100%;
    height: 100%;
}

/* --- 地図フレーム（ズームボタンの配置基準・地図と同寸法） ---
 * #route-map の中身は routeMap.init() が初期化するため、ズームボタンは
 * 兄弟要素としてこのフレームに置く。
 */
#route-map-frame {
    position: relative;
}

/* 路線図を見ながら始点・終点を選べる、図の直上の選択パネル */
.rm-selection-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    align-items: end;
    margin: 0 0 0.9rem 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rm-line);
    border-radius: 0;
    background: var(--rm-paper);
}

.rm-selection-panel #sentaku,
.rm-selection-panel #elementToShow > p {
    grid-row: 1;
    margin: 0;
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
    font-weight: 700;
    color: var(--rm-ink);
}

.rm-selection-panel #sentaku + div,
.rm-selection-panel #elementToShow > div {
    margin: 0 !important;
}

.rm-selection-panel #elementToShow {
    display: contents;
}

/* --- 始点 / 終点 切替トグル（N型のみ・selection-sync.js が生成） ---
 * 次のマップクリックが始点・終点どちらに代入されるかを示すタブ。
 * アクティブ側はスロット色（始点=緑 / 終点=赤）の下線 + 文字色で明示する。
 */
.rm-slot-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    width: fit-content;
    padding: 0;
    gap: 0;
    border: 1px solid var(--rm-line);
    border-radius: 0;
    background: var(--rm-paper);
}

.rm-slot-toggle[hidden] {
    display: none;
}

.rm-slot-btn {
    padding: 6px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--rm-muted);
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    font-feature-settings: "palt" 1;
    cursor: pointer;
    transition: none;
}

.rm-slot-btn:hover {
    color: var(--rm-ink);
}

/* アクティブスロットは対応する地図ノード色の下線で示す（塗り・影なし） */
.rm-slot-btn.rm-slot-start.active {
    background: transparent;
    color: var(--rm-slot-start-text);
    border-bottom-color: var(--rm-slot-start-color);
    box-shadow: none;
}

.rm-slot-btn.rm-slot-goal.active {
    background: transparent;
    color: var(--rm-slot-goal-text);
    border-bottom-color: var(--rm-slot-goal-color);
    box-shadow: none;
}

/* --- スロット行の割当てアクセント（E4） ---
 * 始点・終点の見出し行に、値が入っていることを示す色ドットを表示する。
 * 未割当中はグレーの空心ドット。
 */
.rm-slot-row::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    border: 2px solid var(--rm-line);
    vertical-align: baseline;
    transition: none;
}

.rm-slot-row.rm-slot-assigned.rm-slot-row-start::before {
    background: var(--rm-slot-start-color);
    border-color: var(--rm-slot-start-color);
}

.rm-slot-row.rm-slot-assigned.rm-slot-row-goal::before {
    background: var(--rm-slot-goal-color);
    border-color: var(--rm-slot-goal-color);
}

@media (max-width: 768px) {
    .rm-selection-panel {
        grid-template-columns: 1fr;
    }

    .rm-selection-panel #sentaku,
    .rm-selection-panel #elementToShow > p {
        grid-row: auto;
    }
}

/* --- ズームボタン（地図フレームの右上・絶対配置） --- */
.rm-zoom-controls {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.rm-zoom-btn {
    width: 34px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid var(--rm-line);
    background: var(--rm-surface);
    color: var(--rm-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: none;
    /* タップ応答の遅延（ダブルタップズーム待ち）をなくす。
     * manipulation はパン・ピンチを許しつつダブルタップズームだけ止める。 */
    touch-action: manipulation;
}

/* hover 反転（純黒の塊を避ける・I6）。
 * タッチ端末では :hover がタップ後に残留（sticky hover）して反転したまま
 * 残るため、hover 可能端末に限定する（ズーム・モード切替ボタン共通）。 */
@media (hover: hover) {
    .rm-zoom-btn:hover {
        background: var(--rm-btn-hover-bg);
        color: var(--rm-btn-hover-fg);
    }
}

.rm-zoom-btn:active {
    transform: translateY(1px);
}

/* --- エッジ（可視線・ベーストラックははっきり見える灰 #666） --- */
.rm-edge {
    stroke: var(--rm-track);
    stroke-width: 3.5;
    fill: none;
    transition: none;
}

/* --- エッジ（透明ヒットストローク: クリック・ホバー判定用） --- */
.rm-edge-hit {
    stroke: transparent;
    stroke-width: 14;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}

/* --- 駅ノード（白の塗り＋#111 の 2px 輪郭・K-A3） --- */
.rm-node {
    fill: var(--rm-surface);
    stroke: var(--rm-ink);
    stroke-width: 2;
    cursor: pointer;
    transition: none;
}

/* --- 駅ノードの当たり判定（透明ヒット円・描画と選択ロジックには不干渉） ---
 * 描画円より一回り大きく (NODE_HIT_RADIUS)、ホバー・クリック判定のみ受け持つ。
 * fill: transparent は painted 扱いのため pointer-events: all と併せて確実に hit する。
 * 選択・強調クラスは描画円側に付くため、既存の見た目・判定契約は不変。
 */
.rm-node-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    cursor: pointer;
}

/* --- 駅名ラベル ---
 * 画面上の文字サイズは route-map.js がバケット基準スケールごとに確定し
 * （--rm-label-font = バケット確定px ÷ 現在スケール のユーザー単位）、
 * バケット内では不変。これにより非表示判定（computeBucketHiddenSet）の幾何と
 * 描画幾何が完全一致する（MAJOR 1: バケット内でフォントを ∝scale で伸ばすと
 * 判定からのはみ出しが発生するため）。フォールバック 21 は scale=1 相当。
 * paint-order: stroke + ハロストロークで「線と被っても読める」縁取り。
 * アンカー（text-anchor）は方位の水平成分で JS が選ぶ（A2: start/end/middle）。
 */
.rm-label {
    font-size: calc(var(--rm-label-font, 21) * 1px);
    font-weight: 700;
    fill: var(--rm-label-fill);
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
    font-feature-settings: "palt" 1;
    paint-order: stroke;
    stroke: var(--rm-label-halo);
    stroke-width: clamp(calc(2px * var(--rm-inverse-scale, 1)), 4px, calc(5px * var(--rm-inverse-scale, 1)));
    stroke-linejoin: round;
    pointer-events: none;
}

/* LOD: 縮小時に重なり合う駅名ラベルを非表示（route-map.js の applyLabelLod が付与） */
.rm-label-hidden {
    visibility: hidden;
}

/* --- 選択状態（青・発光なしの線と塗りだけ） --- */
.rm-node-selected {
    fill: var(--rm-accent);
    stroke: var(--rm-accent-deep);
    stroke-width: 3;
}

/* O型の駅選択は青ではなく緑で示す（ユーザーフィードバック「駅選択の場合のみ緑」）。
 * 区間選択（.rm-edge-selected）は従来どおり青のまま。 */
#route-map.rm-mode-o .rm-node.rm-node-selected {
    fill: var(--rm-slot-start-color);
    stroke: var(--rm-slot-start-text);
    stroke-width: 3;
}

/* 区間選択: 「区間（線）」を主役として示す。太い青線のみで装飾は付けない。 */
.rm-edge-selected {
    stroke: var(--rm-accent);
    stroke-width: 7;
}

/* 区間選択（K-A2）: 端点ノードは色付けしない。区間の線だけを主役に示す
 * （旧 .rm-node-section-end の補助ティントは廃止）。 */

/* --- ホバー状態（JS で classList 切替） --- */
.rm-node-hover {
    stroke: var(--rm-accent-deep);
    stroke-width: 3.5;
}

.rm-edge-hover {
    stroke: var(--rm-accent);
    stroke-width: 5;
}

/* --- 終点割当て通知のリング（E9・機能的に必要な唯一のアニメーション） ---
 * N型で区間の端点駅を割り当てた瞬間のワンショット通知。単純な拡大+フェード
 * 1回のみ（旧 1.4s×2 回の脈動から縮小）。始点=緑 / 終点=赤。
 */
.rm-node-pulse {
    fill: none;
    stroke: var(--rm-accent);
    stroke-width: 2.5;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
    animation: rm-pulse 0.7s ease-out 1;
}

@keyframes rm-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.rm-node-pulse.rm-pulse-start {
    stroke: var(--rm-slot-start-color);
}

.rm-node-pulse.rm-pulse-goal {
    stroke: var(--rm-slot-goal-color);
}

/* --- 除外駅・除外区間（2色分類・E3・機能色として維持） ---
 *   - .rm-edge-excluded-partial : 片端のみ除外（N型なら選択可）→ 破線アンバー
 *   - .rm-edge-excluded-unusable: 両端とも除外（どちらも選択不可）→ 赤の淡色
 * 意味の説明は「経由しない駅」グループ内の静的カラーキー（index.html）が担う。
 * グレー・アンバー・淡赤は「不可状態」を示す意図的な淡色のため維持する（K-A3）。
 */
.rm-node-excluded {
    opacity: 0.25;
    fill: #cbd5e1;
    stroke: #94a3b8;
}

.rm-edge-excluded {
    opacity: 0.45;
    stroke: #94a3b8;
}

.rm-edge-excluded-partial {
    stroke: #f59e0b;
    stroke-dasharray: 8 5;
    opacity: 0.75;
}

.rm-edge-excluded-unusable {
    stroke: #dc2626;
    opacity: 0.28;
}

/* --- 到達不能駅（除外駅の派生で本土から孤立した駅・和田山対策） ---
 * ノードは除外駅より薄いグレー、エッジは両端とも到達不能のときだけ薄める。
 */
.rm-node-unreachable {
    fill: var(--orrg-muted, #94a3b8);
    opacity: 0.45;
}

.rm-edge-unreachable {
    stroke-opacity: 0.25;
}

/* --- 生成ルートの強調（深紫の実線・発光なし・A6: 全区間均一・L4） ---
 * 進行方向は各区間中間の矢印＋始終点ノード（緑/赤）が担うため、
 * 区間線自体は全区間同じ深紫とする。
 * 中継ノードは墨炭（--rm-ink）を維持する: ルート色で塗ると終点赤
 * （#dc2626）と紛れるため、線のみを深紫で示しノードは無彩色に保つ。
 */
.rm-route-node {
    fill: var(--rm-ink);
    stroke: var(--rm-route);
    stroke-width: 3;
}

.rm-route-edge {
    stroke: var(--rm-route);
    stroke-width: 6;
}

/* 進行方向矢印（各区間中間に1本ずつ配置する三角ポリゴン）。
 * どのルート線上でも判別できるよう白の塗り + 濃色ハロ（I8）。 */
.rm-route-arrow {
    fill: var(--rm-arrow-fill);
    stroke: none;
    paint-order: stroke;
    filter: drop-shadow(0 0 1.5px var(--rm-arrow-halo));
    pointer-events: none;
}

/* --- 選択強調の最優先表示（ルート強調中でも選択を見失わない） ---
 * 同一エッジ・ノードに .rm-route-* と選択クラスが並んだ場合、ファイル後段の
 * 高詳細度ルールで「今まさに選んでいる駅・区間」を常にルート線の上に
 * 青で見せる（色と太さの両面で判別・発光は付けない）。
 */
.rm-edge.rm-edge-selected {
    stroke: var(--rm-accent);
    stroke-width: 8;
}

.rm-node.rm-node-selected {
    fill: var(--rm-accent);
    stroke: var(--rm-accent-deep);
    stroke-width: 3.5;
}

/* --- 始点・終点の強調（ルート両端の駅ノード・実色・K-A3） ---
 * 要素型込みの高詳細度セレクタで選択ルールより後段に置き、
 * 「生成ルートの色が常に主役」を保証する。外径は拡大し（r: 6 → 8）、
 * 始点/終点が一見で分かるようにした（I8）。
 * ※ r: 8 は route-map.js の EFFECTIVE_NODE_RADIUS = 8 と対の契約。
 *   ラベル配置・衝突判定・パルスリングはこの実効半径を前提とするため、
 *   どちらかを変更する場合は両方を更新すること（MINOR 1）。
 * 両クラス併存（O型の一周）は緑塗り＋赤リングの合成スタイルで「始点=終点」を表現する。
 */
.rm-node.rm-route-start {
    fill: var(--rm-slot-start-color);
    stroke: var(--rm-slot-start-text);
    stroke-width: 4;
    r: 8;
}

.rm-node.rm-route-end {
    fill: var(--rm-slot-goal-color);
    stroke: var(--rm-slot-goal-text);
    stroke-width: 4;
    r: 8;
}

.rm-node.rm-route-start.rm-route-end {
    /* O型（一周・始点=終点）は二色併用が野暮ったいため単色で表現。
     * ルート色（深紫）の実塗り＋白縁に統一し、通常の終点赤とは区別する。 */
    fill: var(--rm-route);
    stroke: var(--rm-route-deep);
    stroke-width: 4;
    r: 8;
}

/* --- 生成前スロット割当ての恒久色分け（G1b・A6仕様変更・K-A2/K-A3） ----------
 * 駅の直接割当て → ノードに緑/赤の「実色」塗り＋白縁（淡いパステルは使わない）。
 * 区間の割当て   → エッジのみをスロット色の不透明実線でティント
 *                  （端点ノードは染めない。両スロット埋まり・片側のみとも同じ）。
 * このブロックはファイル最後尾側（選択青・ルート墨炭の全規則より後）に置く。
 * 同一詳細度での後勝ちにより、.rm-edge-selected / .rm-node-selected /
 * .rm-route-edge / ホバー規則のどれと組み合わってもスロット色が常に勝つ
 * （K-A2 の根本原因「選択青が後段で上書きし緑/赤が見えない」の修正）。
 * ルート生成後もスロット状態は維持されるため（2026-08 仕様変更）、
 * .rm-route-* との競合もこの後段規則が解決する（スロット色が常に勝つ）。
 */
.rm-edge.rm-slot-edge-start {
    stroke: var(--rm-slot-start-color);
    stroke-width: 6;
}

.rm-edge.rm-slot-edge-goal {
    stroke: var(--rm-slot-goal-color);
    stroke-width: 6;
}

.rm-node.rm-slot-node-start {
    fill: var(--rm-slot-start-color);
    stroke: var(--rm-slot-start-text);
    stroke-width: 2.5;
}

.rm-node.rm-slot-node-goal {
    fill: var(--rm-slot-goal-color);
    stroke: var(--rm-slot-goal-text);
    stroke-width: 2.5;
}

/* --- トースト（地図カード内中央・absolute オーバーレイ） ---
 * エラー既定（赤）。角丸 2px・影は最小。出現はフェードのみ（スケール演算なし）。
 * 小さくて見落とされるため文字・余白は大きめにし、2.5秒で自動消滅する。
 * クリックで閉じるのは share.js の従来どおり。
 */
.rm-error-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    max-width: calc(100% - 32px);
    padding: 14px 22px;
    border-radius: 2px;
    background: var(--rm-toast-error-bg);
    border: 1px solid var(--rm-toast-error-border);
    color: var(--rm-toast-error-fg);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(17, 17, 17, 0.22);
    animation: rm-toast-in 0.18s ease-out;
}

@keyframes rm-toast-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- トーストのバリエーション（share.js の orrgToast ヘルパー用） ---
 *   - rm-toast-success: 成功（URLコピー等）→ 緑
 *   - rm-toast-neutral : 中立（フォールバック案内等）→ 地図面と同系の無彩色
 */
.rm-error-toast.rm-toast-success {
    background: var(--rm-toast-success-bg);
    border-color: var(--rm-toast-success-border);
    color: var(--rm-toast-success-fg);
}

.rm-error-toast.rm-toast-neutral {
    background: var(--rm-surface);
    border-color: var(--rm-line);
    color: var(--rm-ink);
}

/* --- トースト内のアクションボタン（L1・重複割当て時の「O型で選ぶ」） ---
 * orrgToast.show(message, variant, { label, onClick }) の第3引数で
 * selection-sync.js が差し込む小ボタン。トースト本体と同系の
 * currentColor 枠線で、error/success/neutral どのバリアント上でも成立する。
 */
.rm-toast-action {
    margin-left: 10px;
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
}

.rm-toast-action:hover {
    background: rgba(17, 17, 17, 0.08);
}

.rm-toast-action:active {
    transform: translateY(1px);
}

/* --- アクション行: 画像保存ボタン（生成後に表示）。
 * 1行に並べることを優先し、折り返しは狭幅時の保険。 */
.output-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.output-actions .generate-button {
    flex: 1 1 auto;
}

/* --- 二本指ヒントオーバーレイ（E8・Google Maps 方式） ---
 * タッチの1本指ドラッグ検知時に route-map.js が #route-map-frame 内へ生成する。
 * 角丸 2px の帯。pointer-events: none でジェスチャーを一切妨げない。
 */
.rm-two-finger-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 2px;
    background: var(--rm-hint-bg);
    color: var(--rm-hint-fg);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.rm-two-finger-hint.is-visible {
    opacity: 1;
}

.rm-two-finger-hint .rm-finger-glyph {
    flex: none;
    font-size: 20px;
    line-height: 1;
}

/* --- 画像保存・画像共有ボタンの出現（route-highlight.js が .is-visible を付替え） ---
 * バウンス・移動なしの単純なフェード。max-height 160px は文字サイズ拡大時の
 * 不可視クリップ防止のため維持。
 */
.download-reveal {
    text-align: center;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height 0.2s ease-out,
        opacity 0.2s ease-out,
        visibility 0.2s ease-out,
        margin 0.2s ease-out;
}

.download-reveal.is-visible {
    max-height: 160px;
    opacity: 1;
    visibility: visible;
    margin: 0.8rem 0;
}

/* 展開時は保存ボタンと画像共有ボタンを横並びにする */
.download-reveal.is-visible .output-actions {
    display: flex;
}

/* --- 「経由しない駅」グループ内の除外区間カラーキー（静的・E3） ---
 * 線色は .rm-edge-excluded-partial / -unusable と共通（機能色）。
 */
.rm-exclusion-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--rm-muted);
}

.rm-key-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rm-key-swatch line {
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.rm-key-swatch.rm-key-partial line {
    stroke: #f59e0b;
    stroke-dasharray: 6 4;
}

.rm-key-swatch.rm-key-unusable line {
    stroke: #dc2626;
    opacity: 0.55;
}

/* --- pan / zoom 操作 ---
 * touch-action: pan-y — 1本指のタッチは縦スクロールをブラウザに委ねる。
 * 地図のパン・ズームは2本指（route-map.js のピンチハンドラが平行移動も担当）。
 * pan-y だけでは指の着地順の競合でブラウザに横取りされる場合があるため、
 * JS 側でも touchstart/touchmove（多指の間は preventDefault）で抑止する。
 * 操作中はパン余裕で全体表示でも追従し、指を離すと範囲内へ戻る。
 */
#route-map svg {
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    /* iOS 長押しメニュー（コールアウト）の抑止。二本指操作中の
     * 誤発動を防ぐ。テキスト選択は user-select: none で既に無効。 */
    -webkit-touch-callout: none;
}

#route-map svg.dragging {
    cursor: grabbing;
}

/* --- 一本指モード時は地図が全タッチを消費するためスクロール委譲を止める --- */
#route-map.rm-one-finger svg {
    touch-action: none;
}

/* --- 操作モード切替ボタン（モバイルのみ表示） ---
 * ズームボタンの列の一番下。「1本指」表示で現在が二本指モード、
 * 反転表示で一本指モード中を示す。デスクトップでは出さない。
 */
.rm-onefinger-toggle {
    display: none;
}

/* --- レスポンシブ（モバイル） ---
 * 地図カードの余白を削り SVG をフルブリードに広げる。
 */
@media (max-width: 768px) {
    #route-map-card {
        padding: 4px;
        border-radius: 0;
    }

    /* カードの内側余白（4px）と同じ負のマージンで SVG を全幅へ広げる。
       高さは固定し（aspect-ratio より優先）、第一画面で地図が主役になる（I9）。 */
    #route-map {
        aspect-ratio: auto;
        height: clamp(300px, 52dvh, 560px);
        margin: 0 -4px;
    }

    .rm-selection-panel {
        gap: 0.3rem;
        padding: 0.5rem 0.6rem;
        margin-bottom: 0.6rem;
        font-size: 0.85rem;
    }

    .rm-zoom-controls {
        top: calc(6px + env(safe-area-inset-top, 0px));
        right: calc(6px + env(safe-area-inset-right, 0px));
        gap: 2px;
    }

    .rm-zoom-btn {
        width: 26px;
        height: 26px;
        font-size: 14px;
        border-radius: 2px;
    }

    /* 操作モード切替ボタンはモバイルでのみ表示。±と同じ正方形のまま、
     * 中の指アイコン（1本/2本）で現在のモードを示す。ON 状態は反転表示。 */
    .rm-zoom-btn.rm-onefinger-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        /* OFF時は墨ではなくグレーで表示（黒く見えるのを避ける）。
         * ON時は .is-active で白反転する。 */
        color: var(--rm-muted);
    }

    .rm-zoom-btn.rm-onefinger-toggle .rm-finger-glyph {
        font-size: 17px;
        line-height: 1;
    }

    .rm-zoom-btn.rm-onefinger-toggle.is-active {
        background: var(--rm-accent);
        border-color: var(--rm-accent-deep);
        color: #ffffff;
    }

    /* モバイルのラベル最小サイズ（18px フロア・A7）は route-map.js の
       labelMinFontSize() が --rm-label-font 経由で一括管理するため、
       ここでの font-size 上書きはしない（判定と描画の一致のため・MAJOR 1）。 */
}

/* --- タブレット / デスクトップの地図サイズ（A8・2026-08） ---
 * ui.css（本ファイルより先に読み込まれるため、同詳細度なら後勝ち）は
 * ≥1024px で2カラム分割＋ max-height: calc(100dvh - 230px) を課す。
 * 230px は実ヘッダー（≈96px）より過大な予約で、iPad Pro 級の画面で地図が
 * 小さくなる原因だった。ここで2段階に修正する:
 *   - 1024–1199px（タブレット）: 2カラムを解除して単カラム全幅の地図に戻す
 *   - ≥1200px（デスクトップ）: 高さ予約を実ヘッダー分 --map-chrome-h へ縮小
 * 想定サイズの目安:
 *   1366×1024（デスクトップ）: カップ幅 ≈900px → 地図 ≈900×817（旧上限 794px）
 *   1180×820（iPad Pro 横）  : 単カラム全幅 → 高さ上限 724px → 地図 ≈798×724
 */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* ui.css の ≥1024px 2カラムを解除（同詳細度・後読み込みで上書き） */
    #form > form {
        display: block;
    }

    #route-map-card,
    #options-panel {
        grid-column: auto;
        grid-row: auto;
    }

    #route-map {
        max-height: calc(100vh - var(--map-chrome-h));
        max-height: calc(100dvh - var(--map-chrome-h));
    }
}

@media (min-width: 1200px) {
    /* 実ヘッダー分だけ予約すれば足りる（旧 230px 予約は廃止・A8） */
    #route-map {
        max-height: calc(100vh - var(--map-chrome-h));
        max-height: calc(100dvh - var(--map-chrome-h));
    }
}

/* --- 動きの最終停止（ユーザー設定を尊重） --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}