/* 路線図UI用スタイルシート（高コントラスト計器デザイン・2026-08 第6次改善）
 * ---------------------------------------------------------------------------
 * 方針: 白地に黒文字の高コントラスト設計。薄い色は意味がある場合のみ使う
 *  （未選択チップ・不可状態など）。装飾を削り、1つのアクセント（青）のみ。
 *  - パレットはデザイントークン（--orrg-*）で管理。ライト単面（ダークモード廃止）。
 *    トークン名は route-map.css との契約（fallback 付きで参照されるため変更禁止）:
 *      --orrg-paper / --orrg-ink / --orrg-line / --orrg-muted / --orrg-accent
 *    加えて本ファイル内の派生トークン（--orrg-surface ほか）を同じブロックで定義する。
 *  - コントラスト: 背景 #ffffff / 本文 #111111 / 枠線 #444444。
 *    #595959 は二次テキスト専用。淡色は未選択・不可などの意味的状態に限定する。
 *  - タイポ: 共通スタック "Noto Sans JP","Yu Gothic","Hiragino Sans","Meiryo",sans-serif
 *    （Web フォント <link> は廃止・I2。見出し 700 / 本文 400+700）
 *  - 形: 角丸は 0〜3px。セグメントは下線タブ、チップは矩形トグル。
 *  - 動き: 装飾アニメーションは全廃。残すのは :active・トーストフェード・
 *    保存ボタンフェードのみ（prefers-reduced-motion で停止）。
 *  - ./source/style.css は共有のため編集しない。本ファイルで上書きする。
 *
 * レイアウト（第4次改善から不変）:
 *  - 全ブレークポイントで通常の文書フロー（ページ全体が1枚のスクロール）。
 *  - デスクトップ ≥1024px: 左 = フォームパネル / 右 = 地図カードの 2 カラム。
 *  - モバイル ≤768px: 地図ヒーロー → 形状/生成 → オプション → 出力 の順に積む（I9）。
 *
 * 情報設計（DOM 順）: #route-map-card → #options-panel[形状 → 生成 → 経由しない駅 →
 * 長さ → 条件クリア → #output → アクション行]。selection-sync.js が init で
 * #sentaku / その直後の div / #elementToShow を #map-selection-panel へ移動する。
 */

/* --- デザイントークン（ライト固定・route-map.css との契約名を含む） --------- */
:root {
    /* 契約トークン（名前変更禁止・route-map.css が fallback 付きで参照） */
    --orrg-paper: #ffffff;   /* ページ背景（純白） */
    --orrg-ink: #111111;     /* 本文テキスト（ほぼ黒） */
    --orrg-line: #444444;    /* 標準枠線（はっきり見える濃灰） */
    --orrg-muted: #595959;   /* 二次テキスト専用の濃灰 */
    --orrg-accent: #2563eb;  /* 選択系アクセント（青） */

    /* 派生トークン */
    --orrg-surface: #ffffff;        /* パネル面 */
    --orrg-line-strong: #111111;    /* ボタン等の強い枠線 */
    --orrg-hover: #eeeeee;          /* 面の hover（操作可能の合図として機能色） */
    --orrg-accent-hover: #1d4ed8;   /* アクセント系の hover */
    --orrg-accent-active: #1e40af;  /* 一次ボタン（生成）の :active 押し込み色 */
    --orrg-accent-contrast: #ffffff;/* アクセント塗り上の文字色 */
    --orrg-menu-bg: #1e293b;        /* サイドバー／MENUボタン。従来版（./source/style.css）と同一の色に揃える（2026-08 ユーザー指摘） */
    --orrg-menu-text: #e2e8f0;      /* サイドバー上の文字 */
    --orrg-shadow: rgba(17, 17, 17, 0.22); /* ドロップダウンの影 */

    --font-heading: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
    --font-body: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}

/* --- ベース（共有 style.css の上書き） ------------------------------------- */
body {
    background-color: var(--orrg-paper);
    color: var(--orrg-ink);
    font-family: var(--font-body);
    line-height: 1.75;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--orrg-ink);
}

h1 {
    border-bottom: 2px solid var(--orrg-accent);
}

a {
    color: var(--orrg-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: none;
}

a:hover {
    color: var(--orrg-accent);
}

#menu {
    background-color: var(--orrg-menu-bg); /* サイドバーは従来版と同一の濃紺スレート */
}

#menu a {
    color: var(--orrg-menu-text);
}

/* ホバーは共有 style.css の白半透明オーバーレイ（rgba(255,255,255,0.1)）が
 * 濃紺地の上でもそのまま成立するため、色の上書きは不要。 */

#menu-button {
    border-radius: 3px;
    box-shadow: none;
}

#form {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--orrg-line);
}

/* --- TomSelect の角丸・影・配色を計器調に ----------------------------------- */
.ts-control {
    border-radius: 2px !important;
    box-shadow: none !important;
    background-color: var(--orrg-surface) !important;
    color: var(--orrg-ink);
    border-color: var(--orrg-line) !important;
}

.ts-control input,
.ts-control .item {
    color: var(--orrg-ink);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--orrg-accent) !important;
}

.ts-dropdown {
    border-radius: 0 !important;
    box-shadow: 0 2px 8px var(--orrg-shadow) !important;
    background-color: var(--orrg-surface) !important;
    border: 1px solid var(--orrg-line);
    color: var(--orrg-ink);
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: var(--orrg-hover);
    color: var(--orrg-ink);
}

/* --- グループ見出し（アイコン + 短い日本語ラベル） -------------------------- */
.opt-group {
    margin: 0;
}

.group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.45rem 0;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--orrg-ink);
}

.group-icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--orrg-ink);
}

/* --- ルートの形状: 下線タブ（name="1" のラジオは不可視化して残す） ---
 * showElement() / selection-sync.js / main.js が
 * querySelector('input[name="1"]') で読むため入力要素はそのまま。
 */
.segmented {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--orrg-line);
    border-radius: 0;
}

.seg-item {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
}

.seg-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seg-text {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 8px;
    margin-bottom: -1px;
    background: transparent;
    color: var(--orrg-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 0.92rem;
    font-weight: 700;
    font-feature-settings: "palt" 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: none;
}

.seg-text:hover {
    color: var(--orrg-ink);
}

/* 選択中タブは青の 2px 下線で示す（塗り・影なし） */
.seg-item input:checked + .seg-text {
    background: transparent;
    color: var(--orrg-accent);
    border-bottom-color: var(--orrg-accent);
    box-shadow: none;
}

.seg-icon {
    flex: none;
    width: 15px;
    height: 15px;
}

/* キーボードフォーカスを見える化 */
.seg-item input:focus-visible + .seg-text,
.chip input:focus-visible + .chip-text,
.reset-link:focus-visible {
    outline: 2px solid var(--orrg-accent);
    outline-offset: 2px;
}

/* --- チップ行（経由しない駅 / 長さ）: 矩形トグル ----------------------------
 * 実入力 + label の構造は維持。チェック状態は青塗り + 除外駅は ✓。
 */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    position: relative;
    display: inline-flex;
}

.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-text {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--orrg-surface);
    color: var(--orrg-ink);
    border: 1px solid var(--orrg-line);
    border-radius: 2px;
    font-size: 0.88rem;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: none;
}

.chip-text:hover {
    background-color: var(--orrg-hover);
}

.chip input:checked + .chip-text {
    background-color: var(--orrg-accent);
    color: var(--orrg-accent-contrast);
    border-color: var(--orrg-accent);
    box-shadow: none;
    font-weight: 700;
}

/* 除外駅チップは「フィルタが有効」であることを ✓ で明示 */
.exclusion-group .chip input:checked + .chip-text::before {
    content: '✓ ';
    font-weight: 700;
}

/* --- 生成エリア --- */
.generate-area {
    margin: 0;
}

.generate-area .generate-button {
    width: 100%;
}

/* --- 生成ボタン: 青（#2563eb）の一次アクション。白文字で最大コントラスト。
 * 選択状態（チップ・タブ）と同じ青で「主役の押しボタン」であることを示す。
 * hover で一段暗く、:active でさらに暗くして押し込みを表現する。 */
.generate-button {
    display: block;
    margin: 0 auto;
    background-color: var(--orrg-accent);
    color: var(--orrg-accent-contrast);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
    transition: none;
}

.generate-button:hover {
    background-color: var(--orrg-accent-hover);
    transform: none;
}

.generate-button:active {
    background-color: var(--orrg-accent-active);
    transform: translateY(1px);
}

/* 画像保存ボタン（.generate-button を共用するため枠付き二次スタイルへ戻す） */
button[onclick="download()"] {
    background-color: var(--orrg-surface);
    color: var(--orrg-ink);
    border: 1px solid var(--orrg-line-strong);
    border-radius: 3px;
    margin-top: 0;
}

button[onclick="download()"]:hover {
    background-color: var(--orrg-hover);
    transform: none;
}

button[onclick="download()"]:active {
    transform: translateY(1px);
}

/* --- パネル（#options-panel）: 通常フローの縦積み -------------------------------- */
#options-panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1rem;
    border: 1px solid var(--orrg-line);
    border-radius: 0;
    background: var(--orrg-surface);
}

/* --- 条件クリアリンク（I10・options-persist.js がハンドル） ---------------------- */
.reset-row {
    margin: 0;
    text-align: right;
}

.reset-link {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--orrg-muted);
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: none;
}

.reset-link:hover {
    color: var(--orrg-accent);
}

/* --- 生成結果（#output）: 時刻表風の無地箱＋固定高（I4） ----------------------
 * 高さを固定し内部スクロールさせることで、ルート生成のたびに周囲レイアウトが
 * 押し出されない。長文対策（overflow-wrap）は従来どおり。
 *
 * 先頭行クリップ修正（B3）: 共有 style.css が #output を
 * display:flex + align-items:center にしており、内容が箱より高いとき上下に
 * 均等あふれして「上側」がスクロール範囲外になり先頭行が欠けていた。
 * display:block へ戻して通常フローにし、先頭が必ず scrollTop=0 に来るようにする。
 */
#output {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    background-color: var(--orrg-surface);
    border: 1px solid var(--orrg-line);
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 1.2rem;
    margin: 0;
    height: 18em;
    min-height: 18em;
    overflow-y: auto;
    scroll-padding-top: 0.25rem;
    display: block;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1rem;
    line-height: 1.75;
    font-feature-settings: "tnum" 1; /* 駅数等の数字は桁揃え */
}

/* --- 生成結果のアクション行（B3・位置固定） -----------------------------------
 * #output 直下の1行に 画像保存 / 画像共有 の2ボタンを並べる。
 * サイト共有はページ右上の固定アイコンボタン（.site-share-fab）へ分離済み。
 * #download-button-wrap（.download-reveal）は route-map.css の max-height+margin
 * 展開ではなく、空間を予約したまま visibility+opacity で隠すため、
 * 出現・消滅のどちらでも行の位置が一切動かない。
 * （route-highlight.js は .is-visible の付替えのみ・確認済み）
 * ID セレクタで route-map.css の同名ルールより強く上書きする（読み順に依存しない）。
 */
.output-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 0.8rem;
}

#download-button-wrap.download-reveal {
    display: flex;
    gap: 6px;
    overflow: hidden;
    max-height: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease-out,
        visibility 0.2s ease-out;
    /* アクションボタンの全幅化（ユーザーフィードバック 2026-08）:
     * wrap を width:100% にし、ボタンを flex:1 1 0 で等分。
     * route-map.css の flex:1 1 auto（自然幅基準）を詳細度 (0,3,0) で上書き。 */
    width: 100%;
}

#download-button-wrap .output-actions {
    width: 100%;
}

.output-action-row .output-actions .generate-button {
    flex: 1 1 0;
}

#download-button-wrap.download-reveal.is-visible {
    max-height: none;
    margin: 0;
    opacity: 1;
    visibility: visible;
}

/* --- アクション行のボタン高さ統一（ユーザーフィードバック 2026-08） ----------
 * .output-action-row 内では 画像保存（.generate-button 共用・padding
 * 0.75rem 1rem / font-size 1rem）と share-button（padding 9px 14px /
 * font-size 0.9rem）で高さが揃わないため、アクション行配下の
 * generate-button を share-button と同じ寸法へ揃える。
 * .output-action-row 配下に限定するため、generate-area の生成ボタンは無影響。
 * （詳細度 (0,2,0) で .generate-button 既定 (0,1,0) より強く・読み順に依存しない）
 */
.output-action-row .generate-button {
    padding: 9px 14px;
    font-size: 0.9rem;
}

/* --- サイト共有ボタン（アイコン単体・右上固定） ---------------------------------
 * #menu-button（左上・モバイル限定表示）と対になる常時表示の固定ボタン。
 * アクション行から分離したため、生成結果の有無に依存せず常に押せる。 */
.site-share-fab {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--orrg-line-strong);
    border-radius: 3px;
    background-color: var(--orrg-surface);
    color: var(--orrg-ink);
    cursor: pointer;
}

.site-share-fab:hover { background-color: var(--orrg-hover); }
.site-share-fab:active { transform: translateY(1px); }

/* --- 件数バッジ（経由しない駅の選択数）。exclusions.js が「N件」を更新する。 --- */
.count-badge {
    padding: 0 7px;
    border: 1px solid var(--orrg-accent);
    border-radius: 2px;
    background-color: var(--orrg-accent);
    color: var(--orrg-accent-contrast);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.6;
    font-feature-settings: "tnum" 1;
}

.count-badge.is-zero {
    background-color: transparent;
    border-color: var(--orrg-line);
    color: var(--orrg-muted);
}

/* ============================================================
 * タブレット 769–1023px: 単一カラム（地図 → パネルの順、すべて常時表示）
 * ============================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
    #options-panel {
        padding: 1.1rem;
    }
}

/* ============================================================
 * デスクトップ ≥1024px: 2 カラム分割（通常フロー・内部スクロールなし I5）
 * 左 = フォームパネル / 右 = 地図カード（第一ビューポートに収める I9）
 * ============================================================ */
@media (min-width: 1024px) {
    #content > * {
        max-width: min(100% - 2rem, 1440px);
    }

    #form > form {
        display: grid;
        grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    #route-map-card {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    /* 地図カードを第一ビューポートに収める（I9）。
       #route-map の max-height は route-map.css が管轄（--map-chrome-h ベース）。 */

    #options-panel {
        grid-column: 1;
        grid-row: 1;
        padding: 1.1rem;
    }
}

/* ============================================================
 * デスクトップ ≥1200px: 左フォームパネルと地図カードの高さを揃える
 * （ユーザーフィードバック 2026-08「PCのとき左の欄と路線図の領域の高さを揃える」）
 * - グリッド既定の align-items: stretch で両グリッドアイテム（=枠線を持つ箱そのもの）
 *   を行の高さ一杯に広げる。≥1024px ブロックの align-items: start を
 *   同詳細度・後段で上書きする。
 * - カードの margin 打ち消しは 2 ID の高詳細度で行う。route-map.css は
 *   本ファイルより後で読み込まれ、同詳細度 (1,0,0) の
 *   `#route-map-card { margin: 0 0 1.5rem 0 }` が勝つため。
 *   グリッドアイテムの margin はグリッド領域の内側に置かれるため、
 *   下マージンが残ると下端が 24px 短くなり揃わない（今回の主原因）。
 * - カードを縦フレックスにし、地図フレームが残り高さを吸収する。
 *   左パネルが地図より高い場合も #route-map が伸びて下端が揃う
 *   （aspect-ratio は flex-basis の基準サイズとして残す。伸長分は
 *   preserveAspectRatio がレターボックス表示する・I9 と同じ仕組み）。
 *   max-height: calc(100dvh - var(--map-chrome-h)) は route-map.css が維持。
 * - パネルが地図より短いときは余白が生じる。#output は固定高（18em・
 *   overflow-y:auto）の契約を維持し、伸長分はアクション行をパネル下端に
 *   固定する（margin-top:auto）ことで余白として吸収する。
 * - <1200px はこのブロックの対象外（タブレット以下の単カラムは無変更）。
 * ============================================================ */
@media (min-width: 1200px) {
    #form > form {
        align-items: stretch;
    }

    /* パネルが stretch で伸びたとき、アクション行を下端に固定して
       余白を #output とアクション行の間に吸収する */
    #options-panel {
        display: flex;
        flex-direction: column;
    }

    #form #route-map-card {
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    #route-map-frame {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* aspect-ratio（route-map.css）を flex-basis の基準に残しつつ
       フレームの残り高さを伸縮で埋める */
    #route-map-frame #route-map {
        flex: 1 1 auto;
        min-height: 0;
    }

    #output {
        height: 18em;
    }

    #form .output-action-row {
        margin-top: auto;
    }
}

/* ============================================================
 * モバイル ≤768px: 地図ヒーロー + 通常フローのフォーム（I3/I9）
 * ボトムシートは廃止。自然なページスクロールで
 * 「地図 → 形状/生成 → オプション → 出力」の順に積む。
 * 地図の2本指操作（touch-action: pan-y）は route-map.css が維持する。
 * ============================================================ */
@media (max-width: 768px) {
    #form {
        padding: 0.6rem;
        margin-bottom: 0;
    }

    /* 地図をファーストビューの主役に（ヒーロー化） */
    #route-map-card {
        padding: 6px;
        margin-bottom: 0.75rem;
    }

    #options-panel {
        padding: 0.9rem 0.8rem;
        gap: 1rem;
    }

    /* サイト共有 FAB を右下へ移動: モバイルでは地図がファーストビューの主役となり、
     * 右上固定だと route-map.css の .rm-zoom-controls（右上・absolute）と重なるため。 */
    .site-share-fab {
        top: auto;
        bottom: 18px;
        right: 15px;
    }
}

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