/* =============================================================
   businfo.css — 公車動態頁（Businfo：rt 依路線搜尋、ls 路線清單共用）
   2026-10-21 rt 頁對齊 ibus_tao：版面、捲動方式、搜尋待選清單、站序表、地圖標記
   一律照 tao（規則取自 tao 的 tao.css／taoyuan-ibus-components.css／base.css），
   **配色維持 hsz2**（使用者指示「除配色外都對齊 tao」）：
     - 選中的路線、已選路線列     → #0d6efd（同 base.css 去／返程頁籤選中色）
     - 到站時間徽章               → 沿用 hsz2 改版前的五色（見「到站狀態徽章」）
     - 已加入我的站點的站序       → 紅（原本愛心 .cfr1 的顏色）
     - 地圖車牌標籤               → hsz2 深藍 #013252
   中性灰（框線、表頭底、斑馬紋）沿用 tao 色值，不屬於品牌色。

   ★ 本檔由 Businfo.html 的 extra_css 載入，排在 bootstrap.min.css 之後；
     tao 那幾條為了壓過 bootstrap 而拉高的特異性照搬不動，兩種載入順序都成立。
   ★ 要跟 tao 同步改版面時，對照 tao 同名選擇器改；顏色不要跟著改。
   ============================================================= */

/* ===== 設計值（tao token 同名，值為 hsz2 配色＋tao 中性灰）===== */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --text-xs: 12px;
    --text-sm: 13px;
    --weight-regular: 400;
    --weight-medium: 500;
    --radius-sm: 6px;
    --touch-target: 44px;

    --text-primary: #33363B;
    --text-secondary: #6B6E73;
    --text-muted: #9A9DA3;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F4F5F7;
    --bg-hover: #F4F5F7;
    --border-subtle: #EEEFF2;
    --border-base: #E3E4E8;
    --border-strong: #C7C9CE;
    --table-head-bg: #F4F5F7;
    --table-head-text: #6B6E73;
    --table-head-border: #C7C9CE;

    /* hsz2 配色 */
    --hsz-select: #0d6efd;          /* 選中（同去／返程頁籤 base.css #tabs-tab .nav-link.active） */
    --hsz-select-bg: #E7F1FF;       /* 待選清單滑過的淡底（同色系） */
    --hsz-navy: #013252;            /* hsz.css 主色深藍 */
    --fav-on: #FF0000;              /* 原本愛心 .cfr1 */
    --focus-outline: 2px solid var(--hsz-select);

    /* 站序表奇偶列與未選頁籤（tao 2026-10-07 機關要求的中性灰，不屬品牌色） */
    --ty-zebra: #FBFCFC;
    --ty-tab-off: #F7F8FA;
}

/* ===== rt 路線待選清單（取代原公車路線下拉）===== */
.route-list {
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--border-base); border-radius: 10px; background: var(--bg-surface);
}
.route-list-empty { padding: 12px; color: var(--text-muted); }
.route-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; border: none; border-bottom: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-primary);
}
.route-item:last-child { border-bottom: none; }
.route-item:hover, .route-item:focus { background: var(--hsz-select-bg); }
.route-item.active { background: var(--hsz-select); color: #fff; font-weight: 700; }
.suggest-group-title {
    padding: 8px 12px; background: var(--bg-subtle);
    color: var(--text-secondary); font-size: 0.85rem; font-weight: 700;
}
.si-meta { margin-left: 8px; color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
.route-item.active .si-meta { color: inherit; }
/* 「【編號】起訖」格式的路線項目（route_search.appendRouteItems 有 data-title 的）：「】」右半邊本身就是空白，不再加 8px */
.route-item[data-title] > .si-meta { margin-left: 0; }
/* 已選路線列（＝路線名稱標頭，點了重新展開待選區） */
.route-selected {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; border: 1px solid var(--border-base); border-radius: 10px;
    background: var(--hsz-select); color: #fff; font-weight: 700;
}
/* 路線名稱字級：桌機 20px，手機維持 16px（375px 寬時長路線名放大會換行） */
@media (min-width: 768px) {
    .route-selected { font-size: 20px; }
}

/* ===== 搜尋框與公車種類並列一行（把原本兩列收成一列，空間讓給站牌列表）=====
   .ty-search 內含絕對定位的清除鈕，寬度要能自由伸縮 → flex:1 ＋ min-width:0。 */
.ty-filter-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.ty-filter-row .ty-search { flex: 1 1 auto; min-width: 0; }
.ty-filter-row > .ty-filter-row__class { flex: 0 0 auto; width: 42%; max-width: 220px; }
/* 手機版並排會讓兩者都太窄，改回上下兩列 */
@media (max-width: 575px) {
    .ty-filter-row { flex-wrap: wrap; }
    .ty-filter-row > .ty-filter-row__class { width: 100%; max-width: none; }
}
/* 清除鈕：框內灰色 ×，點擊區 44px；輸入框一起拉到 44px 才對齊 */
.ty-search { position: relative; }
.ty-search input { padding-right: 44px; }
.ty-search .ty-search__clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--touch-target);
    height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.ty-search .ty-search__clear:hover { color: var(--text-primary); background: var(--bg-hover); }
.ty-search .form-control { min-height: var(--touch-target); }

/* ===== rt 版面：左欄固定寬、地圖吃剩餘空間；≤1024px 上下排列 =====
   tao 2026-09-09 起左欄固定寬（視窗一縮先被壓扁的永遠是站名欄），現值 611px。
   hsz2 的 .rt-layout 有 12px 外框留白（base.css，2026-08 vw 頁對齊下緣），保留不動。 */
@media (min-width: 1025px) {
    .rt-panel.rt-panel--stops {
        flex: 0 0 611px;
        width: 611px;
        min-width: 0;
    }
}
/* 斷點 991 → 1024（tao 2026-09-09）：橫式平板 1024 寬仍左右分欄時左欄太窄，站名被壓到一字一行。
   只套 rt 頁；ls／vw 維持 base.css 的 991。 */
@media (max-width: 1024px) {
    .rt-layout.rt-layout--stops {
        flex-direction: column;
        height: auto;
    }
    .rt-layout--stops > .rt-panel {
        flex: none;
        width: 100%;
        min-width: unset;
        max-height: none;
        overflow-y: visible;
    }
    .rt-layout--stops > .rt-map {
        flex: 0 0 auto;
        height: 60vh;
        min-height: 60vh;
    }
}

/* ★★ 捲動只發生在站牌列表那一段，上方全部固定（tao 2026-09-09）。
   原本整個 .rt-panel 一起捲，往下看站牌時搜尋框、路線名稱、去/返程頁籤會一起被捲走，
   使用者看到一半就不知道自己在看哪條路線、哪個方向。
   改法：.rt-panel 自己不捲，改用 flex 縱向排列，把「剩下的高度」全部給 #tabs-tabContent，
   捲動發生在它裡面；表頭 sticky top:0 就黏在那個容器頂端。
   ★ min-height:0 每一層都要寫：flex 子項預設 min-height:auto，不歸零會被內容撐開、overflow 永遠不生效。
   只在 ≥1025px 生效：≤1024px 是上下排列、整頁捲動，表頭改黏 --site-hdr。 */
@media (min-width: 1025px) {
    .rt-panel--stops {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        align-self: stretch;           /* 吃滿 .rt-layout 的高度（hsz2 的 .rt-layout 已扣掉外框留白） */
        max-height: none;
    }
    .rt-panel--stops > * { flex: 0 0 auto; }
    .rt-panel--stops > #div_time,
    .rt-panel--stops > #div_time > .col {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .rt-panel--stops #div_time > .col > *:not(#tabs-tabContent) { flex: 0 0 auto; }
    .rt-panel--stops #tabs-tabContent {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;              /* ← 捲軸只出現在這裡 */
        scrollbar-gutter: stable;
    }
    .rt-panel--stops #tabs-tabContent > .tab-pane.active { min-height: 0; }
    /* 站序表左右不留白；mx-* 是 bootstrap utility（!important），只能用 !important 蓋 */
    .rt-panel--stops #tabs-tabContent .row.inbox { margin-left: 0 !important; margin-right: 0 !important; }
    .rt-panel--stops #tabs-tabContent .row.inbox > .col { padding-left: 0; padding-right: 0; }
    /* 去/返程頁籤跟著表格對齊：只拿掉左邊 16px，右邊剛好對到捲軸 */
    .rt-panel--stops #tabs-tab { margin-left: 0 !important; }
    /* 表頭黏在捲動容器頂端＝「站名」那一列被鎖住 */
    .rt-panel--stops table.ty-stops thead th { top: 0; }
}

/* ===== 站序表 ===== */
.ty-stops { background: var(--bg-surface); }
.ty-stops th,
.ty-stops td {
    vertical-align: middle;
    padding: var(--space-2) var(--space-3);
}
.ty-stops tbody tr > * { border-bottom: 1px solid var(--border-subtle); }
.ty-stops tbody tr:last-child > * { border-bottom: none; }
table.ty-stops > :not(caption) > * > * { border-bottom-color: var(--border-subtle); }
/* 表頭：底色＋較重的下框線，sticky（top 吃 route_common.js 量到的 --site-hdr，z-index 低於頁首的 100） */
.ty-stops thead th {
    position: sticky;
    top: var(--site-hdr, 0px);
    z-index: 90;
    background: var(--table-head-bg);
    color: var(--table-head-text);
    font-weight: var(--weight-medium);
    letter-spacing: .02em;
    border-bottom: 2px solid var(--table-head-border);
}
/* 窄螢幕多半要橫向捲動，sticky 會靜默失效，直接關閉 */
@media (max-width: 768px) {
    .ty-stops thead th { position: static; }
}
table.ty-stops thead th { text-align: center; font-size: 16px; }
table.ty-stops thead th.text-start { text-align: left; }
.ty-stops tbody tr:last-child th { border-bottom: none; }
/* 列高 56px；內容垂直置中、上下 padding 收斂 */
.ty-stops tbody tr { height: 56px; }
table.ty-stops > :not(caption) > * > * {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    vertical-align: middle;
}
table.ty-stops tbody { font-size: 16px; }
/* 第 3 欄以後（到站、車牌、招手）互相收窄 */
table.ty-stops > :not(caption) > * > *:nth-child(n+3) {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}
/* 表頭圖示單色 */
.ty-thead-icon { color: var(--text-secondary); --fa-secondary-opacity: 1; }
/* 站名不用粗體（tbody 的 lhy_Boldfont 讓整列 700，只把站名改回一般字重） */
table.ty-stops td.stop-name-cell { font-weight: 400; cursor: pointer; }
.stop-name-cell:hover { text-decoration: underline; }
/* 偶數列極淺灰底、第一列留白（只限公車動態站序表） */
#tabs-tabContent table.ty-stops > tbody > tr:nth-child(even) > * { background-color: var(--ty-zebra); }
/* 未選擇的去／返程頁籤底色（base.css 用 !important 設透明，這裡也要 !important） */
#tabs-tab .nav-link:not(.active) { background-color: var(--ty-tab-off) !important; }

/* 車牌/狀態欄固定寬度：表頭塞一把看不見的 76px 尺，車牌出現與否都不再改變欄寬 */
table.ty-stops .plate-cell { font-size: var(--text-sm); white-space: nowrap; font-weight: normal; }
table.ty-stops th.ty-plate-col { white-space: nowrap; }
table.ty-stops th.ty-plate-col::after { content: ""; display: block; width: 76px; height: 0; }

/* 表頭文字「站序／預估到站」只在桌機版（≥1025px，左表右圖）顯示，手機平板維持空白／時鐘圖示 */
.ty-desk-only { display: none; }
@media (min-width: 1025px) {
    .ty-desk-only { display: inline; white-space: nowrap; }
    .ty-desk-hide { display: none; }
    /* 桌機欄寬：站序 57 ＋ 站名 auto ＋ 預估到站 131 ＋ 車牌/狀態 120（左欄 611px） */
    table.ty-stops thead th:nth-child(1) { width: 57px; }
    table.ty-stops thead th:nth-child(2) { width: auto; }
    table.ty-stops thead th:nth-child(3) { width: 131px; }
    table.ty-stops thead th.ty-plate-col { width: 120px; }
}

/* 站序兼「加入我的站點」按鈕（拿掉最右欄的愛心，改點站序加入）；已加入＝粗體紅 */
table.ty-stops .ty-seq {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}
table.ty-stops .ty-seq:hover { text-decoration: underline; }
table.ty-stops .ty-seq[aria-pressed="true"] { color: var(--fav-on); font-weight: 700; }
table.ty-stops .ty-seq:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 折返點徽章（折返線切成前段／後段時，折返站在兩段各列一次） */
.ty-turn-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #F3F8D2;            /* hsz2 萊姆綠淡底 */
    color: var(--hsz-navy);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

/* ===== 到站狀態徽章（形狀照 tao，顏色沿用 hsz2 改版前）=====
   分級（bus_status.busStatusClass）照 tao；顏色對照 hsz2 原本的五色：
     進站中           → .time-coming 黃綠底、白字閃動
     即將進站         → 照 tao 只有外框（萊姆綠框＋深綠字，不填色不閃）
     N 分／N時N分     → bg-success 綠
     時刻（含首站 HH:MM）→ bg-primary 藍
     末班已過／今日未營運／尚未發車／交管不停靠 → .time-status 橘底深藍字
     後端沒給字（顯示「無資料」）→ bg-danger 紅（route_common 加 ty-status--nodata） */
.ty-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 76px;
    padding: 4px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
}
.ty-status--arriving {
    background-color: #BDD71C;
    color: #fff;
    animation: time-coming-blink 1s ease-in-out infinite alternate;   /* keyframes 在 base.css */
}
/* 即將進站：照 tao 只有外框、不填色、不閃爍（2026-10-21 使用者指示）。一台車常讓連續好幾站同時「即將進站」，
   實心＋閃爍會一整排在動；實心只留給「進站中」。顏色用 hsz2 萊姆綠同色系：
   框線 #7C9217（首頁查詢鈕滑過色，白底 3.5:1 過非文字 3:1）、文字再壓暗到白底 ≥4.5:1。 */
.ty-status--soon {
    background-color: transparent;
    color: #5F6B0E;
    border-color: #7C9217;
}
.ty-status--mid,
.ty-status--far       { background-color: #198754; color: #fff; }
.ty-status--scheduled { background-color: #0d6efd; color: #fff; }
.ty-status--ended,
.ty-status--inactive  { background-color: #fd7e14; color: rgb(3, 31, 105); }
.ty-status.ty-status--nodata { background-color: #dc3545; color: #fff; }
/* 非色彩線索：「進站中」加脈動點（只給進站中，即將進站一次出現好幾個會太吵） */
.ty-status__pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .ty-status--arriving .ty-status__pulse { animation: ty-pulse 1.4s ease-in-out infinite; }
}
@keyframes ty-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
/* 站序表的徽章 16px、等寬 88px（「進站中／即將進站／末班已過／N 分」同寬） */
table.ty-stops .ty-status { font-size: 16px; min-width: 88px; }

/* 晚發且判斷確定：狀態欄放「尚未發車」（到站欄放本站表定，沿用 --scheduled） */
.ty-late-st { color: #73767C; font-size: var(--text-sm); white-space: nowrap; }

/* ===== 班次異動跑馬燈（方向頁籤上方；沒有異動時整塊隱藏）===== */
.route-marquee {
    overflow: hidden;
    margin: 0 4px;
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--hsz-navy);
}
@media (prefers-reduced-motion: no-preference) {
    .route-marquee { white-space: nowrap; }
    .route-marquee-text {
        display: inline-block;
        padding-left: 100%;
        animation: route-marquee var(--route-marquee-dur, 20s) linear infinite;
    }
    .route-marquee:hover .route-marquee-text { animation-play-state: paused; }
}
@keyframes route-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ===== 站序表下方：停趟狀態說明、圖例、更新時間 =====
   說明文字用細體 300：自帶的 Noto Sans TC 只有 400／700，另外帶一個只收說明用字的 300 子集
   （檔案與 unicode-range 照搬 tao，說明文字相同；沒收到的字會退回 400，不會缺字）。 */
@font-face {
    font-family: 'Noto Sans TC Note';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../font/subset/note.300.v2.woff2') format('woff2');
    unicode-range: U+20-7E,U+3002,U+4E0A,U+4E2D,U+4E3B,U+4ECA,U+4ECD,U+4EE5,U+4F30,U+4F46,U+4F86,U+4F9B,U+4F9D,U+504F,U+5075,U+50B3,U+50C5,U+5165,U+516C,U+5230,U+523B,U+524D,U+52A0,U+52D5,U+52D9,U+53C3,U+53EF,U+5411,U+544A,U+55AE,U+56DE,U+56FA,U+5929,U+5931,U+5B9A,U+5BE6,U+5DF2,U+5E8F,U+5F8C,U+5FAA,U+614B,U+6211,U+624B,U+6298,U+62DB,U+6301,U+63A8,U+63D0,U+64CA,U+6536,U+6557,U+65BC,U+65E5,U+6642,U+66AB,U+6709,U+670D,U+672A,U+672C,U+696D,U+6B21,U+6BB5,U+6C92,U+6E2C,U+6E96,U+70BA,U+7121,U+73ED,U+74B0,U+7576,U+767C,U+7684,U+76EE,U+79FB,U+7AD9,U+7CFB,U+7D71,U+7DDA,U+7E8C,U+8003,U+8005,U+806F,U+80FD,U+81F3,U+884C,U+8868,U+8A0A,U+8A72,U+8CC7,U+8D77,U+8DEF,U+8ECA,U+8F09,U+8F1B,U+8FD4,U+9019,U+9593,U+969B,U+96E2,U+9810,U+99DB,U+9EDE,U+FF0C,U+FF1A;
}
#ty-status-legend,
#ty-legend .l65,
#routeTimeModal td.route-tt-note,
#routeTimeModal .route-tt-caution,
#routeTimeModal .route-tt-empty {
    font-family: 'Noto Sans TC Note', var(--font-sans);
    font-weight: 300;
}
/* 更新時間、下次更新倒數不用粗體；兩者併成一行放在進度條上方、縮小留白給站序表 */
#update_time, #div_time .update-progress-text { font-weight: 400; }
#div_time .ty-update-line { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .75em; margin-bottom: 5px; }
#div_time .update-progress-container { padding-top: 4px; padding-bottom: 6px; margin-bottom: 0; }

/* ===== rt 頁手機版：擠空間給站牌動態（tao 2026-09-09）=====
   ★ 公車種類下拉手機版照樣顯示（2026-10-22 新竹市府反映「手機上無法選擇公車種類」）：
     tao 是桃園機關要求手機只留搜尋框才收掉的，hsz2 不跟。≤575px 由上方規則排成搜尋框下面一整列。 */
@media (max-width: 767.98px) {
    /* 擠出空間給站牌名稱：面板左右內距、站序字級、欄內距各讓一點 */
    .rt-panel--stops { padding-left: var(--space-1); padding-right: var(--space-1); }
    table.ty-stops tbody th { font-size: var(--text-sm); font-weight: 400; }
    table.ty-stops > :not(caption) > * > *:first-child { padding-left: 2px; padding-right: 2px; }
    table.ty-stops > :not(caption) > * > *:nth-child(n+3) { padding-left: 2px; padding-right: 2px; }
    /* 篩選狀態列：視覺隱藏但仍可被朗讀（它掛 aria-live，display:none 就念不出來） */
    #title-route {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ===== 地圖 =====
   車牌標籤：hsz2 深藍底白字（Leaflet 會把地圖內字型蓋成 Arial 12px，這裡拉回全站字型） */
.leaflet-tooltip.veh-tooltip {
    font-family: var(--font-sans);
    background: var(--hsz-navy);
    color: #fff;
    border-color: var(--hsz-navy);
    padding: 1px 5px;
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
}
.leaflet-tooltip.veh-tooltip.leaflet-tooltip-bottom::before { border-bottom-color: var(--hsz-navy); }
.leaflet-tooltip.veh-tooltip.leaflet-tooltip-top::before { border-top-color: var(--hsz-navy); }

/* 站牌彈出視窗（點站名／站牌）：狀態徽章與左側站序表同一套 .ty-status */
.stop-route-popup .sp-title { padding-right: 32px; }
.stop-route-popup .sp-code { color: var(--text-muted); }
.stop-route-popup .sp-row { border-top-color: var(--border-subtle); }
.stop-route-popup .sp-no { font-weight: var(--weight-medium); color: var(--text-primary); }
.stop-route-popup .sp-dn { color: var(--text-secondary); }
.stop-route-popup .ty-status { flex: none; min-width: 76px; }
.stop-route-popup .sp-empty { color: var(--text-muted); border-top: none; }
/* 關閉鈕點擊區域至少 44x44（leaflet 預設 24x24） */
.stop-route-pop .leaflet-popup-close-button {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--text-secondary);
}
.stop-route-pop .leaflet-popup-close-button:hover { color: var(--text-primary); }

/* =============================================================
   路線清單（ls）兩頁式（2026-10-21 照 tao：清單頁滿版無地圖／詳情頁左表右圖）
   規則取自 tao base.css「路線清單頁」各段；尺寸、間距照 tao，顏色沿用 hsz2 base.css 原本的藍（#0d6efd）。
   ============================================================= */
/* 載入中／無路線／載入失敗 */
.ty-state { padding: 32px 16px; text-align: center; color: var(--text-secondary); }
.ty-state__icon { font-size: 32px; color: var(--text-muted); }

/* 頁簽列（公車種類、字首）：桌機 20px、間距加大、點擊區約 44px；手機維持小字，免得多折好幾列 */
@media (min-width: 768px) {
    .route-alpha-tabs .nav-link { font-size: 20px !important; }
    .route-alpha-tabs { gap: var(--space-2); }
    .route-alpha-tabs .nav-link { padding: 6px 12px !important; }
    .ls-tabs-sticky .route-alpha-tabs { margin-bottom: var(--space-3) !important; }
}
/* 公車種類頁簽：文字比字首長，不撐等寬；每顆加框線與白底，邊界一目了然 */
.route-kind-tabs .nav-link {
    min-width: auto;
    font-size: 0.8rem !important;
}
.route-alpha-tabs.route-kind-tabs { gap: 16px; }
.route-alpha-tabs.route-kind-tabs .nav-link {
    border: 1px solid var(--text-secondary);
    background-color: var(--bg-surface);
}
.route-alpha-tabs.route-kind-tabs .nav-link.active {
    border-color: var(--hsz-select);
    background-color: var(--hsz-select);
}
@media (min-width: 768px) {
    .route-kind-tabs .nav-link { font-size: 20px !important; }
}
@media (max-width: 767.98px) {
    .route-alpha-tabs.route-kind-tabs { gap: 4px; }
    .route-alpha-tabs.route-kind-tabs .nav-link { padding-left: 4px !important; padding-right: 4px !important; }
}

/* 路線按鈕：字級 16px、內距收小（照 tao）；框線、滑過、選中維持 hsz2 原本的灰框／藍 */
.route-grid-item {
    padding: 3px 2px;
    font-size: 16px;
}
/* 超長的中文路線號（如「114路前山觀光預約線」）佔三格；佔幾格由 midsearch_ls.js 的 routeSpanClass 估算 */
.route-grid-wide3 { grid-column: span 3; }

/* 清單頁：沒有地圖，整頁只有一層捲軸（window）；兩列頁簽固定在上方 */
.ls-list-page {
    display: flex;
    flex-direction: column;
}
.ls-list-page .route-alpha-tabs { flex: none; }
.ls-list-page > .ls-tabs-sticky { flex: none; }
.ls-list-page .route-list-panel {
    max-height: none;
    overflow: visible;
}
/* .site-header 本身是 sticky top:0（z-index:100），這一組黏在它下緣（--site-hdr 由 route_common.js 量） */
.ls-tabs-sticky {
    position: sticky;
    top: var(--site-hdr, 80px);
    z-index: 90;
    background: var(--ty-bg, #f8fbfd);
    padding-top: 6px;
}
/* 「全部」的字首列是快捷鍵（只捲動、不篩選）：虛線外框，與字首頁簽「篩選中」的實心藍底明顯不同 */
.route-alpha-tabs.route-town-jump .nav-link {
    font-weight: 500;
    border: 1px dashed var(--border-strong);
    background-color: var(--bg-subtle);
    color: #0a58ca !important;            /* hsz2 藍的深一階：淡灰底上文字 ≥4.5:1 */
}
.route-alpha-tabs.route-town-jump .nav-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
}
/* 剛捲到的那一組只做淡底＋實線框（aria-current），不用實心藍底 */
.route-alpha-tabs.route-town-jump .nav-link[aria-current="true"] {
    border-style: solid;
    border-color: var(--hsz-select);
    background-color: var(--hsz-select-bg);
}
/* 剛捲到的那一組的小標：清單不需捲動時，這是唯一的回饋 */
.suggest-group-title.is-current {
    background: var(--hsz-select-bg);
    color: #0a58ca;
    box-shadow: inset 3px 0 0 var(--hsz-select);
}

/* 詳情頁頂端：搜尋框 + [回列表] 並排；待選清單浮在版面上（壓過 Leaflet 控制項的 z-index 1000） */
.ls-detail-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ls-search-box {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.ls-detail-bar .ls-back-btn {
    flex: none;
    white-space: nowrap;
}
.ls-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/* 詳情頁的路線標頭：同 rt 頁 #RouteSelected 的樣式，但只是標示、不可點 */
.ls-route-title { cursor: default; }

/* ===== 票價表彈窗（route_fare.js，2026-10-21）=====
   版面照 tao 的 routeFareModal（寬度、欄位間距、票價靠右），標頭／按鈕沿用 hsz.css 的 .tao-modal-*（深藍＋萊姆綠）。 */
#routeFareModal .modal-dialog { max-width: min(520px, 96vw); }
.route-fare-field { margin-bottom: 8px; }
.route-fare-note { margin: 8px 0 4px; color: var(--text-secondary); font-size: 0.85rem; }
.route-fare-select { margin-bottom: 6px; }
.route-fare-btn { margin-top: 4px; }
.route-fare-empty { padding: 10px 0; color: var(--text-secondary); }
#routeFareModal .route-fare-table { margin-top: 12px; margin-bottom: 0; }
#routeFareModal .route-fare-table td { vertical-align: middle; }
.route-fare-price { text-align: right; font-weight: 700; color: var(--hsz-navy); white-space: nowrap; }
/* 按鈕：hsz.css 的 .tao-modal-btn（萊姆綠底深藍字）排在 bootstrap 之前，同權重會被 .btn 蓋成透明，
   這裡用彈窗 id 提權（同 tao.css 的 #routeFareModal .tao-modal-btn 做法），顏色照 hsz.css */
#routeFareModal .tao-modal-btn {
    min-width: 6.5rem; border: none; border-radius: 999px;
    padding: 0.55rem 1.5rem;
    background-color: #C2DD1E; color: var(--hsz-navy); font-weight: 700;
}
#routeFareModal .tao-modal-btn:hover,
#routeFareModal .tao-modal-btn:focus-visible { background-color: var(--hsz-navy); color: #C2DD1E; }
#routeFareModal .tao-modal-btn:disabled { opacity: .6; }
.route-fare-free { margin-top: 12px; font-weight: 700; color: var(--hsz-navy); }
/* 票價說明（沒有票價時顯示；taiwanbus 原文，例：「全線2段票(…)；緩衝區：火車站→東門國小」）2026-10-21 */
.route-fare-desc { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #C2DD1E; background: #F7FAE3; }
.route-fare-desc__title { margin-bottom: 4px; color: var(--text-secondary); font-size: 0.85rem; }
.route-fare-desc__text { color: var(--hsz-navy); font-weight: 700; line-height: 1.6; white-space: pre-line; }

/* ===== 路線時刻表彈窗（route_timetable.js，2026-10-21 照 tao 的 routeTimeModal）=====
   版面照 tao.css「時刻表」段（固定 700px、去／返兩欄並排、偶數列淡灰、今日已發車淡化、圓標），
   顏色用 hsz2：去＝藍 #0d6efd（同選中的去返程頁籤）、返＝淡藍底深藍字；標頭／按鈕同票價表彈窗（深藍＋萊姆綠）。 */
#routeTimeModal .modal-dialog { width: 700px; max-width: calc(100% - 1rem); }
.route-tt-date { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.route-tt-date label { color: var(--text-secondary); white-space: nowrap; }
.route-tt-date input { width: auto; }
.route-tt-empty { padding: 10px 0; color: var(--text-secondary); }
/* TDX 未來日是常態班表依星期推估，要看得出是提醒、又不搶走時刻本身的視覺重量 */
.route-tt-caution {
    margin: 6px 0 8px; padding: 6px 10px;
    border-left: 3px solid #C2DD1E; background: #F7FAE3;
    color: var(--hsz-navy); font-size: 0.85rem; line-height: 1.5;
}
table.route-tt { table-layout: fixed; margin-bottom: 0; }
table.route-tt > thead > tr > th { text-align: center; vertical-align: middle; font-weight: 500; border-bottom: 0; }
table.route-tt > thead > tr > th.is-go { background-color: var(--hsz-select); color: #fff; }
table.route-tt > thead > tr > th.is-back { background-color: var(--hsz-select-bg); color: #0a58ca; }
.route-tt-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.53rem; height: 1.53rem; border-radius: 50%;
    margin-right: 10px;
    font-size: 0.9rem; font-weight: 400; line-height: 1;
}
/* 兩個字（前段／後段）：同一個圓、字縮小放進去；手機欄寬不夠時藏起來，寬度留給方向文字（同 tao） */
.route-tt-badge.is-2ch { font-size: 0.62rem; }
@media (max-width: 767.98px) {
    .route-tt-badge.is-2ch { display: none; }
}
th.is-go .route-tt-badge { background: #fff; color: var(--hsz-select); }
th.is-back .route-tt-badge { background: #0a58ca; color: #fff; }
table.route-tt > tbody > tr > td { text-align: center; font-variant-numeric: tabular-nums; }
table.route-tt > tbody > tr:nth-child(even) > td { background-color: var(--ty-zebra); }
table.route-tt .acc-icon { margin-left: 6px; }
/* 今日已過的班次：淡化但仍可讀（民眾還是會想確認稍早的班次） */
table.route-tt > tbody > tr > td.is-past { color: var(--text-muted); }
/* 循環線後段的說明欄（一格跨到底）：靠左、由上往下、保留換行 */
table.route-tt > tbody > tr > td.route-tt-note {
    text-align: left; vertical-align: top; white-space: pre-line; font-weight: 400;
    color: var(--text-secondary); background-color: var(--bg-surface);
}
/* 按鈕：同票價表彈窗（.tao-modal-btn 排在 bootstrap 之前會被 .btn 蓋掉，用彈窗 id 提權） */
#routeTimeModal .tao-modal-btn {
    min-width: 6.5rem; border: none; border-radius: 999px;
    padding: 0.55rem 1.5rem;
    background-color: #C2DD1E; color: var(--hsz-navy); font-weight: 700;
}
#routeTimeModal .tao-modal-btn:hover,
#routeTimeModal .tao-modal-btn:focus-visible { background-color: var(--hsz-navy); color: #C2DD1E; }
/* 查詢中停用「路線時刻表」連結（route_timetable.setBusy） */
#url-timetable.disabled { pointer-events: none; opacity: .6; }