/* ============================================================
   台東轉運站 — redesigned stylesheet
   Warm, editorial, information-dense transit aesthetic
   ============================================================ */

:root {
  /* neutrals — cool paper, subtly blue-toned */
  --bg:      #eef2f4;  /* cool paper */
  --bg-2:    #e2e8ec;  /* deeper cool card */
  --surface: #f5f8fa;
  --ink:     #0f1a22;  /* near-black, cool */
  --ink-2:   #3d4c57;
  --ink-3:   #5f6d79;  /* darkened from #7a8893 for WCAG AA contrast on --bg-2 */
  --line:    rgba(15,26,34,0.14);
  --line-2:  rgba(15,26,34,0.07);

  /* single accent — 台東藍 (Taitung Blue, Pacific ocean) */
  --acc:     oklch(0.62 0.13 230);   /* deep ocean blue */
  --acc-ink: oklch(0.42 0.12 232);
  --acc-bg:  oklch(0.93 0.04 230);

  /* semantic */
  --ok:   oklch(0.62 0.13 155);
  --warn: oklch(0.72 0.16 80);

  --font-serif: "Noto Serif TC", "Source Han Serif TC", Georgia, serif;
  --font-sans:  "Noto Sans TC", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;

  --w: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc-ink); }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font-family: var(--font-mono); font-size: 11px; background: var(--bg-2); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2);}

/* ======================= NAV ======================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg), white 30%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand__mark {
  width: 34px; height: 34px;
  display: inline-flex;
  color: var(--acc-ink);
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1;}
.brand__zh { font-family: var(--font-serif); font-size: 18px; font-weight: 900; }
.brand__en { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; }

.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { font-size: 14px; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }

.nav__meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface);
}
.nav__meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok), transparent 80%); }
.nav__meta-sep { opacity: 0.4;}

/* ======================= HERO ======================= */

.hero {
  position: relative;
  max-width: var(--w);
  margin: 0 auto;
  padding: 72px 32px 40px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
}
.hero__col--text { padding-top: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.eyebrow__tag {
  background: var(--ink); color: var(--bg);
  padding: 3px 8px; border-radius: 3px; font-size: 10px;
}
.eyebrow__sep { width: 24px; height: 1px; background: var(--ink-3);}

.hero__title {
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.96;
  margin: 22px 0 28px;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.hero__title-accent {
  color: var(--acc-ink);
  font-style: italic;
  font-weight: 500;
}

.hero__lede {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 46ch;
  line-height: 1.65;
  margin: 0 0 32px;
}

.hero__actions { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s, background .15s;
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--acc-ink); color: white;}
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink);}
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3);}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.hero__stats > div { display: flex; flex-direction: column; gap: 4px;}
.hero__stats dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.05em;}
.hero__stats dd { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--ink); display: flex; align-items: baseline; gap: 4px;}
.hero__stats dd span { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); font-weight: 400;}

/* hero live card */
.hero__col--card { display: flex; align-items: flex-start;}

.livecard {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  box-shadow: 0 40px 80px -30px rgba(29,26,20,0.5), 0 1px 0 rgba(255,255,255,0.05) inset;
  position: relative;
}

.livecard__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.1);}
.livecard__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.08);
  padding: 5px 10px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 11px;
  color: color-mix(in oklab, var(--acc), white 20%);
  letter-spacing: 0.05em;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc); animation: pulse 1.8s infinite;}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc), transparent 40%);}
  70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--acc), transparent 100%);}
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc), transparent 100%);}
}
.livecard__station { font-family: var(--font-serif); font-weight: 700; font-size: 16px; text-align: right;}
.livecard__station span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.4); letter-spacing: 0.05em; margin-top: 2px;}

.livecard__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px;}
.livecard__list li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 8px;
  border-radius: 8px;
}
.livecard__list li:hover { background: rgba(255,255,255,0.04);}
.live-route {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  text-align: center;
  padding: 4px 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: white;
}
.live-route.r-101 { background: color-mix(in oklab, var(--acc), black 10%); color: white;}
.live-route.r-201 { background: #0c4a6e; color: white;}
.live-route.r-202 { background: #0c4a6e; color: white; border: 1px solid rgba(255,255,255,0.3);}
.live-route.r-203 { background: #0f766e; color: white;}
.live-route.r-8101 { background: #1e40af; color: white;}
.live-route.r-8168 { background: #155e75; color: white;}
.live-dest { font-size: 14px; line-height: 1.3; }
.live-dest span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 2px;}

.live-eta { text-align: right; font-family: var(--font-mono);}
.live-eta strong { font-size: 22px; font-weight: 700; color: white; }
.live-eta strong.soon { color: var(--acc);}
.live-eta strong.arriving { color: #fff; }
.live-eta small { display: block; font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 2px; letter-spacing: 0.04em;}
.live-eta .arriving-tag { display: inline-block; font-size: 11px; background: var(--acc); color: var(--ink); padding: 2px 6px; border-radius: 3px; font-weight: 700; animation: blink 1s infinite;}
@keyframes blink { 50% { opacity: 0.5;}}

.livecard__foot {
  display: flex; justify-content: space-between; padding-top: 16px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.4);
}

.hero__texture {
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 50%;
  background:
    radial-gradient(circle at 85% 30%, color-mix(in oklab, var(--acc), transparent 85%), transparent 50%),
    radial-gradient(circle at 95% 90%, color-mix(in oklab, var(--acc), transparent 90%), transparent 40%);
  pointer-events: none;
  z-index: -1;
}

/* ======================= SECTION ======================= */

.section {
  max-width: var(--w);
  margin: 0 auto;
  padding: 80px 32px;
}
.section--alt {
  background: var(--bg-2);
  max-width: none;
  padding: 80px 0;
}
.section--alt > .section__head,
.section--alt > .routes,
.section--alt > .tips {
  max-width: var(--w);
  margin-left: auto; margin-right: auto;
  padding-left: 32px; padding-right: 32px;
}

.section__head { margin-bottom: 44px; max-width: 720px; }
.section__label { font-family: var(--font-mono); font-size: 11.5px; color: var(--acc-ink); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px;}
.section__title { font-size: clamp(36px, 4.5vw, 52px); line-height: 1.05; margin-bottom: 16px;}
.section__desc { color: var(--ink-2); font-size: 16px; max-width: 60ch; line-height: 1.7;}

/* ======================= BOARD (live) ======================= */

.board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.board__toolbar {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface), white 20%);
  flex-wrap: wrap;
}
.board__search {
  display: flex; align-items: center; gap: 10px;
  min-width: 320px; flex: 0 1 420px;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-3);
  position: relative;
}
.board__search input {
  border: 0; background: transparent; outline: 0; flex: 1;
  font: inherit; font-size: 14px; color: var(--ink);
}
.board__stops { display: flex; gap: 8px; flex-wrap: wrap; flex: 1;}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  transition: all .15s;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3);}
.chip.is-active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.chip--toggle .chip__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok), transparent 80%);
}
.chip[aria-pressed="false"] .chip__dot { background: var(--ink-3); box-shadow: none;}

.board__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 380px;
}
.board__station {
  padding: 24px;
  border-right: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface), var(--bg-2) 40%);
}
.board__station-kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;}
.board__station h3 { font-size: 24px; margin-bottom: 6px;}
.board__station-sub { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono);}

.board__weather {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 22px 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.weather__item {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.weather__item:nth-child(2n) { border-right: 0;}
.weather__item:nth-last-child(-n+2) { border-bottom: 0;}
.weather__item span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em;}
.weather__item strong { font-family: var(--font-serif); font-size: 18px; color: var(--ink);}

.board__routes-head { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 8px 0 10px;}
.board__routes-list { display: flex; flex-wrap: wrap; gap: 6px;}

.route-tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  transition: transform .12s;
}
.route-tag:hover { transform: translateY(-1px);}
.route-tag.r-101 { background: color-mix(in oklab, var(--acc), black 10%); }
.route-tag.r-201 { background: #0c4a6e; }
.route-tag.r-202 { background: #0c4a6e; border: 1px solid rgba(255,255,255,0.4);}
.route-tag.r-203 { background: #0f766e; }
.route-tag.r-8101 { background: #1e40af; }
.route-tag.r-8168 { background: #155e75; }
.route-tag.is-active { outline: 2px solid var(--ink); outline-offset: 2px;}

/* arrivals */
.board__arrivals { display: flex; flex-direction: column;}
.arrivals__head {
  display: grid;
  grid-template-columns: 180px 120px 1fr 140px;
  padding: 14px 24px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.arrivals__head-eta { text-align: right;}

.arrivals__list { list-style: none; margin: 0; padding: 0; flex: 1;}
.arrivals__list li {
  display: grid;
  grid-template-columns: 180px 120px 1fr 140px;
  padding: 16px 24px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  transition: background .15s;
  cursor: pointer;
}
.arrivals__list li:hover { background: var(--bg-2);}
.arrivals__list li:last-child { border-bottom: 0;}

.arr-route { display: flex; align-items: center; gap: 10px;}
.arr-route .route-tag { cursor: default;}
.arr-dest { font-size: 13.5px; color: var(--ink-2);}
.arr-plate { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); letter-spacing: 0.03em;}
.arr-distance { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; font-family: var(--font-mono);}
.arr-distance .distance-bar { flex: 1; max-width: 260px; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; position: relative;}
.arr-distance .distance-bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width .8s cubic-bezier(.2,.8,.2,1);}
.arr-distance .distance-bar.soon i { background: var(--acc);}

.arr-eta { text-align: right; font-family: var(--font-mono); font-weight: 700; font-size: 20px;}
.arr-eta small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; letter-spacing: 0.04em; margin-top: 2px;}
.arr-eta.soon strong { color: var(--acc-ink);}
.arr-eta .arriving-tag {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  background: var(--acc); color: var(--ink); font-size: 13px;
  animation: blink 1s infinite;
}
.arr-eta .pending-tag,
.live-eta .pending-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: var(--line-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.04em;
}
.live-eta .pending-tag {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  font-size: 11px;
}
.arr-eta .departed { color: var(--ink-3); font-size: 13px; font-weight: 400;}

/* route detail */
.board__route {
  border-top: 1px solid var(--line);
  padding: 28px 24px 24px;
  background: color-mix(in oklab, var(--surface), var(--bg) 30%);
}
.routedet__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px; gap: 24px; flex-wrap: wrap;
}
.routedet__kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;}
.routedet__head h3 { font-size: 22px; margin-bottom: 4px;}
.routedet__sub { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono);}
.routedet__meta { display: flex; gap: 28px;}
.routedet__meta > div { display: flex; flex-direction: column;}
.routedet__meta span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase;}
.routedet__meta strong { font-family: var(--font-serif); font-size: 22px; font-weight: 700;}

.routedet__line {
  position: relative;
  display: flex; overflow-x: auto;
  padding: 40px 12px 20px;
  margin: 0 -12px;
  scrollbar-width: thin;
}
.routedet__line::-webkit-scrollbar { height: 6px;}
.routedet__line::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px;}

.rline {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-width: 96px; flex: 1 0 auto; flex-shrink: 0;
  padding: 24px 6px 0;
  text-align: center;
  cursor: pointer;
}
.rline::before {
  content: '';
  position: absolute; top: 34px; left: 50%; width: 100%; height: 2px;
  background: var(--line);
}
.rline:first-child::before { left: 50%; width: 50%;}
.rline:last-child::before { width: 50%;}

.rline__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-2);
  margin: 0 auto 12px;
  position: relative; z-index: 2;
}
.rline.is-hub .rline__dot { background: var(--ink); border-color: var(--ink); width: 18px; height: 18px;}
.rline__name { font-size: 12px; line-height: 1.3; color: var(--ink-2); max-width: 88px;}
.rline.is-hub .rline__name { font-weight: 700; color: var(--ink);}

.rline__bus {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--acc); color: var(--ink);
  padding: 2px 7px; border-radius: 100px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px var(--acc);
}
.rline__bus::after {
  content: '';
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px; background: var(--acc);
}
.rline.is-boarding .rline__dot {
  background: var(--acc); border-color: var(--acc);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc), transparent 75%);
  animation: boardingPulse 1.5s infinite;
}
@keyframes boardingPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc), transparent 75%);}
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--acc), transparent 90%);}
}

.routedet__legend {
  display: flex; gap: 20px; margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
.routedet__legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle;}
.routedet__legend .dot--bus { background: var(--acc);}
.routedet__legend .dot--stop { background: var(--surface); border: 2px solid var(--ink-2);}
.routedet__legend .dot--boarding { background: var(--acc); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc), transparent 70%);}

/* ======================= ROUTES / SCHEDULE ======================= */

.routes {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: flex-start;
}
.routes__tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 100px;}
.route-tab {
  text-align: left;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  transition: all .15s;
}
.route-tab:hover { color: var(--ink); background: var(--bg);}
.route-tab.is-active { border-left-color: var(--ink); color: var(--ink); background: var(--bg); font-weight: 700;}
.route-tab .tab-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); font-weight: 400;}

.routes__body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.routeheader { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px;}
.routeheader__id { font-family: var(--font-mono); font-size: 11.5px; color: var(--acc-ink); letter-spacing: 0.05em;}
.routeheader h3 { font-size: 30px; margin: 8px 0 6px;}
.routeheader__sub { color: var(--ink-3); font-size: 13px; font-family: var(--font-mono);}

.routepath {
  background: var(--bg-2);
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.9;
  margin-bottom: 28px;
  color: var(--ink-2);
}
.routepath strong { color: var(--ink);}
.routepath .arrow { color: var(--ink-3); margin: 0 4px;}

.routetimes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
@media (max-width: 720px) { .routetimes { grid-template-columns: 1fr;}}

.timecol h4 { font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px;}
.timecol h4 .pill { font-family: var(--font-mono); font-size: 10.5px; background: var(--bg-2); padding: 3px 8px; border-radius: 3px; color: var(--ink-3);}
.timecol__sub { font-size: 12px; color: var(--ink-3); margin-bottom: 14px; font-family: var(--font-mono);}

.timegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
}
.timegrid .slot {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-2);
  cursor: default;
}
.timegrid .slot.is-next {
  background: var(--acc-bg);
  border-color: var(--acc);
  color: var(--acc-ink);
  font-weight: 700;
  position: relative;
}
.timegrid .slot.is-next::before {
  content: 'NEXT'; position: absolute; top: -8px; right: 50%; transform: translateX(50%);
  background: var(--acc); color: white; font-size: 9px; padding: 1px 5px; border-radius: 3px;
}
.timegrid .slot.is-past { color: var(--ink-3); text-decoration: line-through; opacity: 0.55;}

.routefoot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); display: flex; gap: 24px; flex-wrap: wrap;}

/* ======================= NETWORK ======================= */

.network {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 32px;
}
.network__svg {
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* ======================= TIPS ======================= */

.tips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tips article { background: var(--surface); padding: 28px;}
.tips h3 { font-size: 16px; margin-bottom: 10px; color: var(--acc-ink);}
.tips p { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin: 0;}

/* ======================= FERRY ======================= */

.ferry { max-width: var(--w); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.ferry__card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .2s, border-color .2s;
}
.ferry__card:hover { transform: translateY(-2px); border-color: var(--ink-2);}
.ferry__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;}
.ferry__head span { font-family: var(--font-serif); font-weight: 900; font-size: 30px;}
.ferry__head em { font-family: var(--font-mono); font-size: 12px; font-style: normal; color: var(--ink-3); letter-spacing: 0.05em;}
.ferry__port { font-size: 14px; color: var(--ink-2); margin-bottom: 8px;}
.ferry__times { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-bottom: 18px;}
.ferry__fare { display: inline-block; background: var(--bg-2); padding: 6px 12px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--ink);}

/* ======================= FOOTER ======================= */

.foot {
  background: var(--ink);
  color: color-mix(in oklab, var(--bg), var(--ink) 40%);
  padding: 72px 0 28px;
  margin-top: 60px;
}
.foot__inner {
  max-width: var(--w); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.foot__brand .brand__zh { color: var(--bg); font-size: 22px; margin-bottom: 12px;}
.foot__brand p { font-size: 13.5px; line-height: 1.7; max-width: 32ch; color: rgba(246,241,232,0.6);}
.foot__col h4 { font-family: var(--font-mono); font-size: 11px; color: rgba(246,241,232,0.5); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;}
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;}
.foot__col li { font-size: 13px; color: rgba(246,241,232,0.75);}
.foot__col a:hover { color: var(--acc);}
.foot__bottom {
  max-width: var(--w); margin: 24px auto 0; padding: 0 32px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; color: rgba(246,241,232,0.4);
}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 48px;}
  .board__grid { grid-template-columns: 1fr;}
  .board__station { border-right: 0; border-bottom: 1px solid var(--line);}
  .routes { grid-template-columns: 1fr;}
  .routes__tabs { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 8px;}
  .route-tab { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap;}
  .route-tab.is-active { border-bottom-color: var(--ink); border-left: 0;}
  .tips { grid-template-columns: 1fr 1fr;}
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 32px;}
  .ferry { grid-template-columns: 1fr;}
  .arrivals__head, .arrivals__list li { grid-template-columns: 140px 1fr 110px;}
  .arrivals__head > *:nth-child(3), .arrivals__list li > *:nth-child(3) { display: none;}
  .nav__links { display: none;}
}
/* ====== Mobile ≤ 720 — live board priority ====== */
@media (max-width: 720px) {
  /* NAV — keep essentials, hide the mono clock widget on very narrow */
  .nav__inner { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .brand__text { min-width: 0; }
  .brand__zh { font-size: 16px; }
  .brand__en { display: none; }
  .nav__meta { padding: 4px 9px; font-size: 11px; margin-left: auto; }
  .nav__meta-sep, #navDate { display: none; }

  /* HERO — single column, compressed, live card FIRST for mobile users */
  .hero {
    padding: 28px 18px 24px;
    gap: 28px;
    grid-template-columns: 1fr;
  }
  .hero__col--text { padding-top: 0; order: 2; }
  .hero__col--card { order: 1; }
  .hero__title {
    font-size: 44px;
    line-height: 1.02;
    margin: 16px 0 20px;
    word-break: keep-all;
    text-wrap: balance;
  }
  .hero__title br { display: none; }           /* let it wrap naturally */
  .hero__title-accent { display: inline; }
  .hero__lede { font-size: 15px; margin-bottom: 24px; }
  .hero__actions { gap: 10px; margin-bottom: 28px; }
  .btn { padding: 11px 18px; font-size: 13.5px; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; }
  .hero__stats dt { font-size: 10px; }
  .hero__stats dd { font-size: 20px; white-space: nowrap; }
  .hero__stats dd span { display: none; }      /* drop the descriptive caption on mobile */

  /* LIVE CARD — tighter grid, single line station label */
  .livecard { padding: 18px; border-radius: 14px; }
  .livecard__head {
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding-bottom: 14px; margin-bottom: 14px;
  }
  .livecard__station { text-align: left; font-size: 15px; }
  .livecard__station span { font-size: 10px; }
  .livecard__list li {
    grid-template-columns: 52px 1fr auto;
    gap: 10px; padding: 11px 4px;
  }
  .live-route { font-size: 13px; padding: 3px 0; }
  .live-dest { font-size: 13px; }
  .live-dest span { font-size: 10px; }
  .live-eta strong { font-size: 19px; }
  .livecard__foot { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 10px; }

  /* SECTION chrome */
  .section { padding: 48px 16px; }
  .section--alt { padding: 48px 0; }
  .section--alt > .section__head,
  .section--alt > .routes,
  .section--alt > .tips { padding-left: 16px; padding-right: 16px; }
  .section__head { margin-bottom: 28px; }
  .section__title { font-size: 30px; }
  .section__desc { font-size: 14.5px; }

  /* BOARD — mobile layout */
  .board { border-radius: 12px; }
  .board__toolbar { padding: 12px 14px; gap: 10px; }
  .board__search { min-width: 0; flex: 1 1 100%; padding: 8px 12px; }
  .board__search input { font-size: 13px; }
  .board__search kbd { display: none; }
  .board__stops {
    flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -14px; padding: 0 14px;
    scrollbar-width: none;
  }
  .board__stops::-webkit-scrollbar { display: none; }
  .chip { padding: 6px 11px; font-size: 12px; }
  .board__right { width: 100%; }

  .board__grid { grid-template-columns: 1fr; min-height: 0; }
  .board__station {
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 18px 16px;
  }
  .board__station h3 { font-size: 20px; }
  .board__weather { grid-template-columns: repeat(4, 1fr); margin: 14px 0; }
  .weather__item { padding: 9px 8px; border-right: 1px solid var(--line-2); border-bottom: 0; }
  .weather__item:last-child { border-right: 0; }
  .weather__item strong { font-size: 15px; }

  /* ARRIVALS — 2-col compact layout on mobile */
  .arrivals__head {
    display: none;  /* the compact cards are self-labeling */
  }
  .arrivals__list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "route eta"
      "plate eta"
      "dist dist";
    padding: 14px 16px;
    gap: 4px 10px;
    row-gap: 6px;
  }
  .arr-route { grid-area: route; }
  .arr-dest { font-size: 13px; }
  .arr-plate { grid-area: plate; font-size: 11.5px; }
  .arr-distance { grid-area: dist; font-size: 11px; margin-top: 4px; }
  .arr-distance .distance-bar { max-width: none; }
  .arr-eta { grid-area: eta; align-self: center; text-align: right; }
  .arr-eta strong { font-size: 26px; }  /* bigger ETA = the headline data */
  .arr-eta small { font-size: 10px; }

  /* ROUTE DETAIL — horizontal scroll is fine, just tighter */
  .board__route { padding: 20px 14px 16px; }
  .routedet__head { flex-direction: column; gap: 14px; }
  .routedet__head h3 { font-size: 18px; }
  .routedet__meta { gap: 20px; flex-wrap: wrap; }
  .routedet__meta strong { font-size: 18px; }
  .routedet__line {
    padding: 36px 8px 14px;
    scroll-snap-type: x mandatory;
  }
  .rline { min-width: 80px; scroll-snap-align: start; }
  .rline__name { font-size: 11px; max-width: 70px; }
  .routedet__legend { font-size: 10.5px; gap: 14px; flex-wrap: wrap; }

  /* SCHEDULE — tabs horizontal, compact */
  .routes { grid-template-columns: 1fr; gap: 18px; }
  .routes__tabs {
    position: sticky; top: 56px; z-index: 5;
    flex-direction: row; overflow-x: auto;
    background: var(--bg-2); margin: 0 -16px; padding: 8px 12px;
    gap: 4px;
    scrollbar-width: none;
  }
  .routes__tabs::-webkit-scrollbar { display: none; }
  .route-tab {
    border-left: 0;
    padding: 8px 12px;
    white-space: nowrap;
    background: transparent;
    border-radius: 100px;
    font-size: 13px;
  }
  .route-tab.is-active {
    background: var(--ink); color: var(--bg);
  }
  .route-tab .tab-id { display: none; }
  .routes__body { padding: 18px; border-radius: 12px; }
  .routeheader h3 { font-size: 22px; }
  .routeheader__sub { font-size: 11.5px; }
  .routepath { font-size: 12.5px; padding: 12px 14px; line-height: 1.8; }
  .routetimes { grid-template-columns: 1fr; gap: 22px; }
  .timegrid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; }
  .timegrid .slot { font-size: 12px; padding: 8px 2px; }
  .routefoot { flex-direction: column; gap: 8px; font-size: 11.5px; }

  /* NETWORK — hide on mobile, too dense; keep as desktop-only */
  .network__svg { min-width: 1000px; }
  .network {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* TIPS, FERRY */
  .tips { grid-template-columns: 1fr; }
  .tips article { padding: 22px; }
  .ferry { grid-template-columns: 1fr; padding: 0 16px; gap: 14px; }
  .ferry__card { padding: 22px; }
  .ferry__head span { font-size: 26px; }

  /* FOOT */
  .foot { padding: 48px 0 20px; }
  .foot__inner { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 32px; }
  .foot__bottom { flex-direction: column; gap: 6px; padding: 20px 20px 0; }
}

/* ≤ 380 — very narrow phones */
@media (max-width: 380px) {
  .hero__title { font-size: 38px; }
  .section__title { font-size: 26px; }
  .livecard__list li { grid-template-columns: 48px 1fr auto; gap: 8px; }
  .hero__stats { gap: 8px; }
  .hero__stats dd { font-size: 18px; }
}

/* ============================================================
   Mobile interactions: pull-to-refresh, sticky toolbar,
   near-me button, thumb-zone, reduced-motion
   ============================================================ */

/* ---- Pull-to-refresh ---- */
.ptr {
  height: var(--ptr, 0px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  transition: height .2s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ptr__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--acc);
  transition: transform .15s linear, border-top-color .15s;
}
.ptr.is-ready .ptr__spinner {
  transform: rotate(180deg);
  border-top-color: var(--acc-ink);
}
.ptr.is-refreshing .ptr__spinner {
  animation: ptrSpin .7s linear infinite;
  border-top-color: var(--acc);
}
.ptr.is-ready .ptr__label::before { content: "放開以更新 · "; }
.ptr.is-refreshing .ptr__label { color: var(--acc-ink); }
.ptr.is-refreshing .ptr__label::before { content: "更新中 · "; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ---- Near-me button ---- */
.chip--near {
  gap: 6px;
  color: var(--acc-ink);
  border-color: color-mix(in oklab, var(--acc), transparent 70%);
  background: color-mix(in oklab, var(--acc-bg), white 30%);
}
.chip--near:hover {
  background: var(--acc-bg);
  border-color: var(--acc);
  color: var(--acc-ink);
}
.chip--near svg { flex-shrink: 0; }
.chip--near.is-loading svg { animation: nearSpin 1s linear infinite; }
.chip--near[aria-busy="true"] { opacity: 0.7; }
@keyframes nearSpin { to { transform: rotate(360deg); } }

/* ---- Focus-visible rings (a11y quick win) ---- */
.chip:focus-visible,
.route-tag:focus-visible,
.btn:focus-visible,
.route-tab:focus-visible,
#stopSearch:focus-visible,
.search-result:focus-visible,
#nearMeBtn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* ---- Search results dropdown ---- */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(15,26,34,0.25), 0 1px 0 var(--line);
  padding: 6px;
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s;
}
.search-result:hover,
.search-result[aria-selected="true"] {
  background: var(--bg-2);
}
.search-result__kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
  grid-row: span 2;
  align-self: center;
}
.search-result__title {
  font-size: 14px;
  font-weight: 500;
  grid-column: 2;
}
.search-result__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  grid-column: 2;
}

/* ---- LIVE / scheduled data-source badge ---- */
#liveBadge {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
#liveBadge[data-source="LIVE"] {
  color: color-mix(in oklab, var(--acc), white 20%);
}
#liveBadge[data-source="LIVE"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 1.8s infinite;
}
#liveBadge[data-source="stale"] {
  color: color-mix(in oklab, var(--warn), white 20%);
}
#liveBadge[data-source="stale"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
  margin-right: 6px;
  vertical-align: middle;
}
#liveBadge[data-source="scheduled"] {
  color: rgba(255,255,255,0.5);
}
#liveBadge[data-source="scheduled"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- Sticky stop selector (mobile only) ---- */
@media (max-width: 720px) {
  .board {
    position: relative;
    overflow: visible;           /* sticky needs to escape the board box */
    border-radius: 12px;
  }
  #boardStickySentinel {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    pointer-events: none;
  }
  .board__toolbar {
    position: sticky;
    top: 56px;
    z-index: 20;
    background: color-mix(in oklab, var(--surface), white 20%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: box-shadow .2s;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .board__toolbar.is-stuck {
    box-shadow: 0 8px 16px -12px rgba(0,0,0,0.18),
                0 1px 0 var(--line);
  }
  .board__right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* ---- Thumb-zone ≥ 44px on touch devices ---- */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  .chip {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .nav__links a {
    display: inline-block;
    padding: 10px 0;
  }
  .route-tag {
    padding: 7px 12px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .ferry__card { padding: 24px; }
  .timegrid .slot { min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* ---- Safe-area insets for notched devices ---- */
@supports (padding: env(safe-area-inset-left)) {
  .nav__inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .foot__inner { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .section { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse,
  .arr-eta .arriving-tag,
  .live-eta .arriving-tag,
  .rline.is-boarding .rline__dot,
  .ptr.is-refreshing .ptr__spinner,
  .chip--near.is-loading svg {
    animation: none !important;
  }
  .route-tag:hover,
  .ferry__card:hover,
  .btn:hover {
    transform: none !important;
  }
}