/* 大眾運輸轉乘規劃 — 樣式
   🤖 Claude 產生　｜　版本 v0.1.0　｜　最後更新：2026-09-26
   風格：第 1 種「系統預設」（石墨中性＋冷藍點綴，使用者 2026-09-26 選定）。
   色碼出處：tokens.json 的 femh.archetype.system-graphite（中性與主色）、
             femh.semantic（成功／警示／危險／資訊）、femh.dataviz（運具分類色）。
   ⚠️ 四條無聲失敗規則（全域 §七）：
     ① 吃 CSS 變數的屬性不可掛 transition（本檔完全不用 transition）
     ② 字級縮放用 rem：html 的字級＝16px × --fs；頂欄、分頁列、膠囊一律寫 px，不隨字級變
     ③ 內容框寬度寫 px（--maxw），字級怎麼調框寬都不變
     ④ 任何會被裁切的地方要看得出「還有東西」 */

:root {
  --fs: 1;
  --maxw: 760px;
  --topbar-h: 104px;
  --font: "Helvetica Neue", Arial, "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* 系統預設｜淺色 */
  --bg: #f7f7f8; --surface: #ffffff; --zebra: #f3f4f4; --border: #dddedf; --input-bd: #8f9499;
  --ink: #27292a; --ink2: #676b6f; --brand: #4f565f; --brand-text: #4f565f;
  --btn-bg: #4f565f; --btn-fg: #ffffff; --accent: #3f76a6; --link: #3f76a6;
  --th-bg: #ecedee; --badge-bg: #ebedef; --badge-text: #2e4a6b; --badge-bd: #cdd1d5;
  --note-bg: #ecf0f3; --note-text: #2d5476; --note-bd: #d1d9e0;
  /* 主要動作鈕：冷藍底＋白字（4.93:1）。⚠️ 深淺兩主題共用同一個填色——
     深色模式的輔色 #679ccb 配白字只有 2.9:1，所以這裡刻意不跟著換（全域 §五 fill 規則①） */
  --cta-bg: #3f76a6; --cta-fg: #ffffff;
  /* 語意色（femh.semantic）：bg/border 是色塊，fg 是色塊裡的字，text 是一般底上的字 */
  --ok-bg: #E3F1E8; --ok-fg: #1A5C38; --ok-bd: #7FB89A; --ok-text: #1A5C38;
  --warn-bg: #FBE8C8; --warn-fg: #7A4F00; --warn-bd: #D4A75C; --warn-text: #8A5A00;
  --bad-bg: #F9D8D3; --bad-fg: #962317; --bad-bd: #DE9086; --bad-text: #C0392B;
  --info-bg: #CFEAED; --info-fg: #0A5F67; --info-bd: #5FAEB7; --info-text: #0C676F;
  /* 運具分類色（femh.dataviz，淺色階）——只畫線、長條、色條，不當白字的實心底 */
  --m-bus: #1A5C38; --m-metro: #227677; --m-tra: #18416D; --m-thsr: #76320F;
  --m-lrt: #666E2B; --m-bike: #8A5A00; --m-ferry: #545F63; --m-cable: #623C67; --m-walk: #676b6f;
  --hl-bg: rgba(14,124,134,0.12); --hl-bar: #0E7C86;
  --shadow: 0 2px 10px rgba(39,41,42,.08);
}
html[data-theme="dark"] {
  --bg: #141415; --surface: #1c1d1e; --zebra: #252627; --border: #393b3c; --input-bd: #6e7278;
  --ink: #eaebeb; --ink2: #a1a3a6; --brand: #8793a0; --brand-text: #8793a0;
  --btn-bg: #4e565f; --btn-fg: #ffffff; --accent: #679ccb; --link: #679ccb;
  --th-bg: #292b2e; --badge-bg: #272b30; --badge-text: #afb7c1; --badge-bd: #4a515a;
  --note-bg: #1a242d; --note-text: #86b5df; --note-bd: #384e61;
  --ok-bg: #16302A; --ok-fg: #4BD98A; --ok-bd: #2F6B52; --ok-text: #00C35E;
  --warn-bg: #382C18; --warn-fg: #F0B65C; --warn-bd: #6B5530; --warn-text: #E8A33D;
  --bad-bg: #3A211E; --bad-fg: #F0897A; --bad-bd: #6E403A; --bad-text: #E06C5C;
  --info-bg: #123035; --info-fg: #6FD5DE; --info-bd: #2E5B62; --info-text: #13ABB9;
  --m-bus: #00C35E; --m-metro: #13ABB9; --m-tra: #8AA8F0; --m-thsr: #FF8A5F;
  --m-lrt: #CAD73C; --m-bike: #E8A33D; --m-ferry: #9AABAC; --m-cable: #CC7DD4; --m-walk: #a1a3a6;
  --hl-bg: rgba(19,171,185,0.16); --hl-bar: #13ABB9;
  --shadow: 0 2px 12px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: calc(16px * var(--fs)); scroll-padding-top: calc(var(--topbar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  line-height: 1.65; padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, input, select, textarea { font-family: inherit; font-size: 1em; color: inherit; }   /* 表單元素預設不繼承字級（HTML 手冊 §3.1） */
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 300; font-size: 15px; }
.skip:focus { left: 8px; top: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ══ 頂欄（固定、不隨字級縮放）══════════════════════════════
   底色滿版、內容對齊內容欄（padding-inline 的 max() 不可省，窄視窗時 calc 會變負值）。
   分隔訊號：陰影＋2px 框線（兩種），見 ui-rules 頁首分隔。 */
.topbar {
  position: sticky; top: 0; z-index: 100; background: var(--surface);
  border-bottom: 2px solid var(--border); box-shadow: var(--shadow);
  padding-top: env(safe-area-inset-top, 0px);
}
.tb-row, .tabs {
  padding-inline: max(16px, calc((100% - var(--maxw)) / 2 + 16px));
}
.tb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; min-height: 52px; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
.logo { display: inline-flex; width: 32px; height: 32px; border-radius: 9px; background: #ffffff; border: 1px solid var(--border);
  align-items: center; justify-content: center; font-size: 18px; color: #27292a; }   /* emoji 一律白底襯底；字色固定深色，萬一退回純文字也讀得到 */
.tb-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fsz { display: flex; align-items: center; gap: 3px; }
.tbtn {
  height: 34px; min-width: 34px; padding: 0 10px; flex: none; white-space: nowrap;
  border: 1px solid var(--input-bd); border-radius: 9px; background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.tbtn.sq { width: 34px; padding: 0; }
.tbtn:disabled { opacity: .38; cursor: default; }
.fsval { min-width: 46px; text-align: center; font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 4px; border-top: 1px solid var(--border); }
.tab {
  flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 4px 8px;
  font-size: 15px; font-weight: 600; color: var(--ink2); white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab .cnt { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; font-size: 13.5px;
  background: var(--badge-bg); color: var(--badge-text); border: 1px solid var(--badge-bd); line-height: 1.4; }

/* 模擬資料橫幅（誠實原則：假資料一定要看得出來是假的） */
.mockbar {
  max-width: var(--maxw); margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd);
  font-size: .90625rem; line-height: 1.5;
}
.netbar { max-width: var(--maxw); margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
  background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-bd); font-size: .90625rem; }

/* ══ 內容區（rem＝跟著字級縮放；寬度 px＝不跟著變）══════════ */
main { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 40px; font-size: 1.0625rem; }
.view > * + *, .stack > * + * { margin-top: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
h2 { font-size: 1.0625rem; margin: 0 0 10px; color: var(--brand-text); }
h2 .sub { font-weight: 400; color: var(--ink2); font-size: .90625rem; margin-left: 6px; }
.muted { color: var(--ink2); font-size: .90625rem; }
.small { font-size: .90625rem; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 按鈕 */
.btn {
  min-height: 44px; padding: 8px 16px; border-radius: 11px; border: 1px solid var(--input-bd);
  background: var(--surface); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.cta { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.btn.block { width: 100%; }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: .9375rem; }
.btn:disabled { opacity: .45; cursor: default; }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--link); text-decoration: underline; font-weight: 600; }

/* ══ 規劃：起訖點 ═════════════════════════════════════════ */
.od { position: relative; }
.odrow { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; align-items: center; }
/* 標籤欄用 max-content 不用 em：字級放大到 160% 時 3.2em 會把輸入框擠到只剩 158px（2026-09-26 實測） */
.odrow + .odrow { margin-top: 8px; }
.odlbl { font-weight: 700; color: var(--ink2); font-size: .9375rem; }
.combo { position: relative; display: flex; gap: 6px; min-width: 0; }
.combo input {
  flex: 1; min-width: 0; height: 48px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--input-bd);
  background: var(--surface); font-size: max(16px, 1.0625rem);   /* iPhone：小於 16px 聚焦時會自動放大整頁 */
  text-overflow: ellipsis;   /* 名稱太長時結尾顯示「…」，看得出還有字（全域 §七⑨） */
}
.combo input.set { border-color: var(--accent); }
.txt { flex: 1 1 10em; min-width: 0; height: 46px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--input-bd);
  background: var(--surface); font-size: max(16px, 1.0625rem); letter-spacing: .08em; text-overflow: ellipsis; }
.gps { flex: none; width: 48px; height: 48px; border-radius: 11px; border: 1.5px solid var(--input-bd); background: var(--surface); font-size: 20px; padding: 0; }
.sugg {
  position: absolute; left: 0; right: 0; top: 52px; z-index: 50; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--input-bd); border-radius: 12px; box-shadow: var(--shadow);
  max-height: 60vh; overflow-y: auto;
}
.sugg li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--hl-bg); box-shadow: inset 4px 0 0 var(--hl-bar); }
.sugg .nm { font-weight: 600; }
.sugg .kd { margin-left: auto; flex: none; }
.sugg .hint { color: var(--ink2); font-size: .90625rem; cursor: default; }
.swapline { display: flex; justify-content: flex-end; margin: 6px 0 -2px; gap: 8px; flex-wrap: wrap; }

.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.seg3 button, .chips button {
  min-height: 42px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--input-bd);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9375rem;
}
.seg3 button[aria-checked="true"], .chips button[aria-checked="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.timepick { margin-top: 10px; }
.timepick input { height: 46px; width: 100%; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--input-bd); background: var(--surface); font-size: max(16px, 1.0625rem); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { flex: 1 1 auto; min-width: 5.2em; }
.toggles { display: grid; gap: 6px; margin: 12px 0; }
.tgl { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--zebra); cursor: pointer; }
.tgl input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.tgl .t { font-weight: 600; }
.tgl .d { display: block; color: var(--ink2); font-size: .90625rem; line-height: 1.5; }

/* 進階選項（表單的展開區，不是長文折疊） */
details.card > summary { cursor: pointer; font-weight: 700; color: var(--brand-text); list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: '▸'; color: var(--ink2); flex: none; }
details.card[open] > summary::before { content: '▾'; }
details.card > summary .sum { font-weight: 400; color: var(--ink2); font-size: .90625rem; }
.adv-body { margin-top: 12px; display: grid; gap: 16px; }
.modegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6em, 1fr)); gap: 6px; }
.modegrid label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; min-height: 44px; }
.modegrid input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.sl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.sl label { font-weight: 600; }
.sl output { font-variant-numeric: tabular-nums; color: var(--ink2); font-size: .9375rem; text-align: right; }
.sl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 30px; }
.sl .d { grid-column: 1 / -1; color: var(--ink2); font-size: .90625rem; margin-top: -4px; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 10px 18px; }

.favrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.favrow button { min-height: 40px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--input-bd); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9375rem; }
.favpanel { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--zebra); border: 1px solid var(--border); }
.favlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.favlist span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-size: .9375rem; }
.favlist button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--bad-text); font-size: 16px; }
.rsort { margin-top: 10px; }
.chips.sm button { min-height: 38px; font-size: .90625rem; min-width: 4.4em; }
details.shift { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
details.shift > summary { cursor: pointer; font-weight: 700; color: var(--brand-text); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; list-style: none; }
details.shift > summary::-webkit-details-marker { display: none; }
details.shift > summary::before { content: '▸'; color: var(--ink2); }
details.shift[open] > summary::before { content: '▾'; }
details.shift > summary .sum { font-weight: 400; color: var(--ink2); font-size: .90625rem; }
table.shiftt { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; margin-top: 8px; }
table.shiftt th, table.shiftt td { padding: 7px 5px; border-bottom: 1px solid var(--border); text-align: left; }
table.shiftt th { background: var(--th-bg); }
table.shiftt tr.cur td { font-weight: 700; }
table.shiftt tr.best td { background: var(--ok-bg); color: var(--ok-fg); }
.insight { margin: 8px 0 0; font-weight: 600; }
details.why2 { margin-top: 8px; }
details.why2 > summary { cursor: pointer; font-size: .9375rem; color: var(--ink2); list-style: none; }
details.why2 > summary::-webkit-details-marker { display: none; }
.wbar { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: .90625rem; }
.wbar .trk { height: 10px; border-radius: 5px; background: var(--zebra); box-shadow: inset 0 0 0 1px var(--input-bd); overflow: hidden; }
.wbar .fil { height: 100%; background: var(--accent); }
.cmpbtn[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
table.cmp { width: 100%; border-collapse: collapse; font-size: .9375rem; table-layout: fixed; }
table.cmp th, table.cmp td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.cmp th { width: 5.5em; color: var(--ink2); font-weight: 600; }
table.cmp thead th { background: var(--th-bg); color: var(--ink); }
table.cmp td.win { font-weight: 700; color: var(--ok-text); }
.map.big { height: calc(100vh - var(--topbar-h) - 120px); min-height: 320px; }
.fz { color: var(--warn-text); font-size: .84375rem; margin-left: 4px; }
.recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-list button { min-height: 40px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--zebra); color: var(--ink); font-size: .9375rem; max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* ══ 徽章（資料分級：即時／表定／推估／模擬／待查證）═════════ */
.bdg { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: .84375rem; font-weight: 600;
  line-height: 1.5; border: 1px solid var(--badge-bd); background: var(--badge-bg); color: var(--badge-text); white-space: nowrap; }
.bdg.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.bdg.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.bdg.bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.bdg.info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }

/* 運具標籤：中性底＋左側 4px 分類色條＋emoji＋文字（顏色不單獨承載意義） */
.mchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 8px;
  background: var(--badge-bg); border: 1px solid var(--badge-bd); box-shadow: inset 4px 0 0 var(--mc, var(--m-walk));
  font-size: .90625rem; font-weight: 600; color: var(--ink); max-width: 100%; }
.mchip .ic { font-size: 1.05em; line-height: 1; }
.mchip .tx { overflow-wrap: anywhere; }
.m-bus { --mc: var(--m-bus); } .m-metro { --mc: var(--m-metro); } .m-tra { --mc: var(--m-tra); } .m-thsr { --mc: var(--m-thsr); }
.m-lrt { --mc: var(--m-lrt); } .m-bike { --mc: var(--m-bike); } .m-ferry { --mc: var(--m-ferry); } .m-cable { --mc: var(--m-cable); } .m-walk { --mc: var(--m-walk); }
.arrow { color: var(--ink2); }

/* ══ 結果 ════════════════════════════════════════════════ */
.rroute { font-size: 1.1875rem; font-weight: 700; overflow-wrap: anywhere; }
.rmeta { color: var(--ink2); font-size: .9375rem; margin-top: 2px; }
.rstamp { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.enrich { margin: 8px 0 0; padding: 7px 11px; border-radius: 10px; font-size: .90625rem; background: var(--note-bg); color: var(--note-text); border: 1px solid var(--note-bd); }
.enrich.done { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.enrich.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.ractions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 一眼比較（D3 時間軸）：HTML 橫條，不用 SVG（SVG 的字不會換行也不會被裁切，HTML 手冊 §5.ab） */
.tl { margin-top: 4px; }
.tl-axis { position: relative; height: 1.6em; margin-left: 4.2em; border-bottom: 1px solid var(--border); font-size: .84375rem; color: var(--ink2); }
.tl-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-axis span.first { transform: none; } .tl-axis span.last { transform: translateX(-100%); }
.tl-row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: 0; width: 100%; padding: 6px 0;
  background: none; border: 0; border-bottom: 1px dashed var(--border); text-align: left; color: var(--ink); }
.tl-row:hover, .tl-row:focus-visible { background: var(--hl-bg); box-shadow: inset 4px 0 0 var(--hl-bar); }
.tl-lbl { font-weight: 700; font-size: .9375rem; padding-left: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-track { position: relative; height: 26px; }
.tl-seg { position: absolute; top: 3px; height: 20px; border-radius: 4px; background: var(--mc); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tl-seg .ic { font-size: 13.5px; line-height: 1; background: #ffffff; color: #27292a; border-radius: 50%; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.tl-seg.walk { background: repeating-linear-gradient(135deg, var(--m-walk) 0 2px, transparent 2px 6px); top: 9px; height: 8px; }
.tl-seg.walk .ic { display: none; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: .90625rem; color: var(--ink2); }
.tl-legend i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; background: var(--mc); vertical-align: middle; margin-right: 4px; }
.tl-legend i.walk { background: repeating-linear-gradient(135deg, var(--m-walk) 0 2px, transparent 2px 6px); height: 8px; }

.jcard { position: relative; cursor: pointer; }
.jcard:hover, .jcard:focus-visible { box-shadow: inset 4px 0 0 var(--hl-bar), var(--shadow); }
.jtop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jrank { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--badge-bg); border: 1px solid var(--badge-bd); color: var(--badge-text);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; align-self: center; }
.jdur { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jfare { margin-left: auto; font-size: 1.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jfare s { color: var(--ink2); font-weight: 400; font-size: .84375rem; margin-right: 4px; }
.jtime { color: var(--ink2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.jchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 8px 0 6px; }
.jmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .9375rem; color: var(--ink2); align-items: center; }
.jwhy { margin-top: 6px; font-size: .9375rem; }
.jopen { margin-top: 8px; }
.lv { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.lv.ok { color: var(--ok-text); } .lv.tight { color: var(--warn-text); } .lv.risk, .lv.miss { color: var(--bad-text); }

.dlist { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dlist li { padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .9375rem; overflow-wrap: anywhere; }
/* ⚠️ 不用斑馬底：連結色 #3f76a6 疊在 #f3f4f4 只有 4.38:1（2026-09-26 實測），白底才有 4.93 */
.dlist .why { display: block; color: var(--ink2); font-size: .90625rem; }

.empty { text-align: center; padding: 28px 16px; }
.empty .big { font-size: 2.2rem; }

/* ══ 分段明細 ═════════════════════════════════════════════ */
.dsum { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.dsum .big { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.map { height: 260px; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); background: var(--zebra);
  position: relative; z-index: 0; isolation: isolate; }
/* 🔴 isolation 不可省：Leaflet 內部圖層 z-index 400～1000，沒有自己的堆疊層時會蓋到固定頂欄（z 100）上面
   （2026-09-26 實測：往下捲時地圖的版權列與「彰化縣」浮在頂欄上方） */
.mapnote { margin: 8px 0 0; }
.steps { list-style: none; margin: 0; padding: 6px 16px; }
.step { display: grid; grid-template-columns: 3.4em 2.2em minmax(0, 1fr); gap: 0 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: 0; }
.step .tm { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.step .tm .to { display: block; color: var(--ink2); font-weight: 400; }
.step .ic { width: 2.2em; height: 2.2em; border-radius: 50%; background: #ffffff; color: #27292a; border: 2px solid var(--mc, var(--m-walk));
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.step .bd { min-width: 0; overflow-wrap: anywhere; }
.step .ttl { font-weight: 700; }
.step .sub { color: var(--ink2); font-size: .9375rem; }
.step .facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.step .go { margin-top: 8px; }
.txline { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 0 calc(3.4em + 8px); padding: 8px 10px; border-radius: 10px; font-size: .9375rem; }
.txline.ok { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); }
.txline.tight { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd); }
.txline.risk, .txline.miss { background: var(--bad-bg); color: var(--bad-fg); border: 1px solid var(--bad-bd); }
.alert { margin-top: 6px; padding: 6px 10px; border-radius: 9px; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-bd); font-size: .9375rem; }

table.fare { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
table.fare th, table.fare td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.fare th { background: var(--th-bg); font-weight: 700; }
table.fare td.n, table.fare th.n { text-align: right; white-space: nowrap; }
table.fare tr.total td { font-weight: 700; border-bottom: 0; }
.applied { display: block; color: var(--ink2); font-size: .90625rem; }

/* ══ 設定 ════════════════════════════════════════════════ */
.radios { display: grid; gap: 6px; }
.radios label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; min-height: 44px; }
.radios input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
select.sel { width: 100%; height: 46px; border-radius: 11px; border: 1.5px solid var(--input-bd); background: var(--surface); padding: 0 10px; font-size: max(16px, 1.0625rem); }
.note { padding: 10px 12px; border-radius: 10px; background: var(--note-bg); color: var(--note-text); border: 1px solid var(--note-bd); font-size: .9375rem; }
.note.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
table.st { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.st th, table.st td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.st th { background: var(--th-bg); }
.caps { font-family: var(--mono); font-size: .90625rem; color: var(--ink2); overflow-wrap: anywhere; }
.steps-howto { margin: 6px 0 0; padding-left: 1.4em; }
.steps-howto li { margin: 3px 0; }

/* ══ 地圖選點（覆蓋層）══════════════════════════════════════ */
.sheet { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,21,.55); display: flex; align-items: flex-end; justify-content: center; }
.sheet-box { width: 100%; max-width: 760px; background: var(--surface); border-radius: 16px 16px 0 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 92vh; display: flex; flex-direction: column; gap: 10px; font-size: 1.0625rem; }
.sheet-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.sheet-hd b { font-size: 1.0625rem; }
.sheet .map { height: 58vh; flex: 1 1 auto; min-height: 240px; }
.sheet-ft { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.sheet-ft .full { grid-column: 1 / -1; }

/* Leaflet 內建 12px 低於全域下限 12.5px，一律拉高 */
.leaflet-container { font-size: 14px; font-family: var(--font); }
.leaflet-container .leaflet-control-attribution { font-size: 13px; }
html[data-theme="dark"] .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.92); }   /* E4 深色底圖：只反轉底圖層，路線與標記在別層不受影響 */

/* ══ 側邊導覽膠囊（四件套；尺寸固定、不隨字級縮放；位置由 JS 量測）══ */
.rail {
  position: fixed; left: var(--railx, calc(100% - 64px)); top: 50%; transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 7px;
  border: 1px solid var(--border); border-radius: 29px; background: var(--surface); box-shadow: var(--shadow); font-size: 15px;
}
.rbtn { width: 36px; height: 36px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--input-bd);
  background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; }
.rbtn:disabled { opacity: .34; cursor: default; }
#r-top { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
#r-top:disabled { background: var(--zebra); color: var(--ink2); border-color: var(--border); }
@media (max-width: 960px) {
  /* 窄幕：膠囊轉橫排收到右下角（垂直置中會壓在內容正中間）；四顆鈕全部留著。
     ⚠️ transform:none 不可省，否則 translateY(-50%) 還在會往上偏半個身高 */
  .rail { left: auto; right: 8px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none; flex-direction: row; padding: 6px 7px; }
  main { padding-bottom: 96px; }
}

@media (max-width: 340px) {
  /* 極窄（320px 舊款 iPhone SE）：膠囊 181px 超過螢幕一半（ui-rules 判準 50%），
     縮小按鈕與間距讓它回到一半以內；四顆鈕照樣全留、不在別處補第二顆返回鈕 */
  .rail { gap: 5px; padding: 5px 6px; }
  .rbtn { width: 32px; height: 32px; font-size: 16px; }
}
#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 250; max-width: min(92vw, 520px);
  background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; box-shadow: var(--shadow); }
#toast:empty { display: none; }

@media (max-width: 420px) {
  /* 窄幕：品名文字收起來只留圖示（主畫面 App 名稱已經寫在圖示下），控制項才排得回同一列；
     ⚠️ 不是裁切（⑨）——品名整個不顯示，改由 <title> 與圖示承擔識別 */
  .bname { display: none; }
  .step { grid-template-columns: 3em 2em minmax(0, 1fr); gap: 0 6px; }
  .txline { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* 列印（手機不常印，但規範要求：收合的內容要印出來、控制項不上紙） */
@media print {
  .topbar, .rail, .mockbar, #toast, .ractions, .jopen, .go, .sheet, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; font-size: 11pt; }
  .card { border-color: #999; break-inside: avoid; }
  details { display: block !important; }
  details > * { display: revert !important; }
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
  .map { display: none; }
}