/* 全香港間歇跑路線分析 — 樣式表（深色／淺色雙主題） */

/* ── 主題變數 ──────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang HK", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --dur: .18s;
}

/* 淺色主題（預設值，亦為 data-theme="light"） */
:root,
:root[data-theme="light"] {
  --bg:        #f4f6f8;
  --bg-2:      #ffffff;
  --bg-3:      #eceff3;
  --bg-inset:  #f8fafc;
  --line:      #d7dee6;
  --line-2:    #c3ccd6;
  --fg:        #16202b;
  --fg-2:      #4a5866;
  --fg-3:      #74828f;
  --accent:    #0f6f63;
  --accent-fg: #ffffff;
  --accent-soft:#d9efeb;
  --ok:        #1a7f4f;
  --warn:      #9a6400;
  --bad:       #b03030;
  --ok-bg:     #e2f4ea;
  --warn-bg:   #fbf0d8;
  --bad-bg:    #fae4e4;
  --shadow:    0 1px 2px rgba(16,32,48,.06), 0 6px 20px rgba(16,32,48,.08);
  --map-filter: none;
  --route:     #0f6f63;
  --route-hi:  #c2410c;
}

/* 深色主題 */
:root[data-theme="dark"] {
  --bg:        #10151b;
  --bg-2:      #171e26;
  --bg-3:      #1e2732;
  --bg-inset:  #131a21;
  --line:      #2b3541;
  --line-2:    #3a4655;
  --fg:        #e7edf3;
  --fg-2:      #a8b6c4;
  --fg-3:      #7f8d9c;
  --accent:    #3fbfa8;
  --accent-fg: #08201c;
  --accent-soft:#123a34;
  --ok:        #4fc07f;
  --warn:      #e0a83c;
  --bad:       #f07373;
  --ok-bg:     #14301f;
  --warn-bg:   #33270d;
  --bad-bg:    #341a1a;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --map-filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.8);
  --route:     #4ad6bc;
  --route-hi:  #ff9d4d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#10151b; --bg-2:#171e26; --bg-3:#1e2732; --bg-inset:#131a21;
    --line:#2b3541; --line-2:#3a4655;
    --fg:#e7edf3; --fg-2:#a8b6c4; --fg-3:#7f8d9c;
    --accent:#3fbfa8; --accent-fg:#08201c; --accent-soft:#123a34;
    --ok:#4fc07f; --warn:#e0a83c; --bad:#f07373;
    --ok-bg:#14301f; --warn-bg:#33270d; --bad-bg:#341a1a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --map-filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.8);
    --route:#4ad6bc; --route-hi:#ff9d4d;
  }
}

/* ── 基礎 ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--fg);
  font-size: 15px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  transition: background var(--dur), color var(--dur);
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1360px; margin: 0 auto; padding: var(--sp-4); }

/* ── 頁首 ─────────────────────────────────────────── */
header.top {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2); position: sticky; top: 0; z-index: 900;
}
header.top .logo { flex: none; color: var(--accent); display: flex; }
header.top hgroup { flex: 1; min-width: 0; }
header.top h1 { font-size: 17px; }
header.top p { margin: 0; font-size: 12px; color: var(--fg-3); }
.themebtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--fg-2);
}
.themebtn:hover { border-color: var(--line-2); color: var(--fg); }
.themebtn svg { width: 15px; height: 15px; }

/* ── 版面 ─────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow);
}
.panel + .panel { margin-top: var(--sp-4); }
.panel > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-3); margin-bottom: var(--sp-3); font-weight: 700;
}
.fld { margin-bottom: var(--sp-3); }
.fld:last-child { margin-bottom: 0; }
.fld > label { display: block; font-size: 12.5px; color: var(--fg-2); margin-bottom: 5px; font-weight: 600; }
.hint { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; margin-top: 4px; }

input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 10px; transition: border-color var(--dur);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.row { display: flex; gap: var(--sp-2); }
.row > * { flex: 1; min-width: 0; }

.btn {
  background: var(--accent); color: var(--accent-fg); border: none;
  border-radius: var(--r-sm); padding: 10px 16px; font-weight: 650;
  transition: filter var(--dur);
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.wide { width: 100%; padding: 12px; font-size: 15.5px; }
.btn.ghost { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); }

/* 距離快捷 */
.distgrp { margin-bottom: var(--sp-2); }
.distgrp > span {
  display: block; font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px;
  transition: all var(--dur);
}
.chip:hover { border-color: var(--accent); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 650; }

/* 提示盒 */
.box { border-radius: var(--r-sm); padding: 9px 11px; font-size: 12px; line-height: 1.55; border: 1px solid; }
.box.info { background: var(--accent-soft); border-color: var(--accent); color: var(--fg); }
.box.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--fg); }
.box.bad  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--fg); }
.box.ok   { background: var(--ok-bg);   border-color: var(--ok);   color: var(--fg); }
.box[hidden] { display: none !important; }

/* 搜尋建議 */
.geolist { list-style: none; margin: 6px 0 0; padding: 0; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-inset); }
.geolist:empty { display: none; }
.geolist li { padding: 7px 10px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line); }
.geolist li:last-child { border-bottom: none; }
.geolist li:hover { background: var(--bg-3); }

/* ── 地圖 ─────────────────────────────────────────── */
.mapwrap { position: relative; }
#map {
  height: 460px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--bg-3); z-index: 1;
}
@media (max-width: 980px) { #map { height: 340px; } }
.leaflet-tile-pane { filter: var(--map-filter); }
.leaflet-container { background: var(--bg-3); font-family: var(--font-sans); }
.leaflet-control-attribution { font-size: 10px !important; }
.maplegend {
  position: absolute; right: 10px; bottom: 22px; z-index: 500;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 10px; font-size: 11.5px; color: var(--fg-2); box-shadow: var(--shadow);
}
.maplegend div { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.maplegend svg { width: 15px; height: 15px; flex: none; }

/* 地圖標記（色盲友善：形狀 + 文字，不單靠顏色） */
.mk { display: flex; align-items: center; justify-content: center; }
.mk svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* ── 結果 ─────────────────────────────────────────── */
.summary { font-size: 12.5px; color: var(--fg-2); margin-bottom: var(--sp-3); }
.results { display: flex; flex-direction: column; gap: var(--sp-2); }
.rcard {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); cursor: pointer; transition: border-color var(--dur), transform var(--dur);
}
.rcard:hover { border-color: var(--accent); }
.rcard.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rcard .rhead { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.rcard .rank { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); flex: none; }
.rcard .rname { font-weight: 650; flex: 1; min-width: 0; }
.rcard .rscore { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 700; }
.rcard .rmeta { margin-top: 5px; font-size: 12px; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rcard .rlim { margin-top: 5px; font-size: 11.5px; color: var(--fg-3); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 650;
  border: 1px solid; white-space: nowrap;
}
.tag svg { width: 11px; height: 11px; }
.tag.kind { background: var(--bg-3); border-color: var(--line-2); color: var(--fg-2); }
.tag.c-高 { background: var(--ok-bg);  border-color: var(--ok);  color: var(--ok); }
.tag.c-中 { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.tag.c-低 { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.tag.exp  { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }

/* ── 詳情抽屜 ─────────────────────────────────────── */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: var(--bg-2); border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .24s ease;
  z-index: 1200; overflow-y: auto; padding: var(--sp-4);
}
.drawer.open { transform: translateX(0); }
.drawer .dhead { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.drawer .dhead h3 { flex: 1; font-size: 17px; }
.dclose { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  width: 30px; height: 30px; flex: none; line-height: 1; font-size: 16px; color: var(--fg-2); }
.drawer h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-3); margin: var(--sp-4) 0 var(--sp-2); font-weight: 700; }
.dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.dstats div { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px; }
.dstats dt { font-size: 10.5px; color: var(--fg-3); margin: 0; }
.dstats dd { margin: 1px 0 0; font-family: var(--font-mono); font-size: 14px; font-weight: 650; }
.chart { width: 100%; height: auto; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); }
.factors { list-style: none; margin: 0; padding: 0; }
.factors li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.factors li:last-child { border-bottom: none; }
.fic { flex: none; width: 17px; height: 17px; margin-top: 2px; }
.f-ok .fic   { color: var(--ok); }
.f-warn .fic { color: var(--warn); }
.f-bad .fic  { color: var(--bad); }
.factors b { display: block; font-size: 12px; }
.factors span { color: var(--fg-2); }
.limlist { margin: 0; padding-left: 1.15em; font-size: 12.5px; color: var(--fg-2); }
.limlist li { margin: 2px 0; }

/* 回饋表單 */
.fbgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.fbgrid label { font-size: 11.5px; color: var(--fg-2); }
.fbfull { grid-column: 1 / -1; }

/* ── 頁尾 ─────────────────────────────────────────── */
footer.attrib {
  margin-top: var(--sp-5); padding: var(--sp-4); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-3); line-height: 1.7;
}
footer.attrib a { color: var(--fg-2); }

/* ── 載入遮罩 / 提示 ──────────────────────────────── */
.busy {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 1500;
  display: flex; align-items: center; justify-content: center;
}
.busy[hidden] { display: none; }
.busycard {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); min-width: 260px; text-align: center; box-shadow: var(--shadow);
}
.spin { width: 26px; height: 26px; margin: 0 auto var(--sp-3);
  border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } .drawer { transition: none; } }
.busycard .bmsg { font-size: 13px; color: var(--fg-2); }
.bar { height: 4px; background: var(--bg-3); border-radius: 2px; margin-top: var(--sp-3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 999px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: all .22s; z-index: 1600;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

details.adv summary { cursor: pointer; font-size: 12.5px; color: var(--fg-2); padding: 4px 0; }
details.adv[open] summary { margin-bottom: var(--sp-2); }

.skel { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-inset) 50%, var(--bg-3) 75%);
  background-size: 200% 100%; animation: sh 1.4s infinite; border-radius: var(--r-md); height: 76px; }
@keyframes sh { to { background-position: -200% 0; } }