*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
::selection{background:var(--tint);color:var(--acc)}
body{
  font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;
  background:var(--paper);color:var(--ink);line-height:1.45;
  padding:0 0 calc(var(--page-bottom) + env(safe-area-inset-bottom));
}
.wrap{max-width:560px;margin:0 auto}
.num{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums}

/* app header */
.top{position:sticky;top:0;z-index:5;background:var(--paper);padding:calc(14px + env(safe-area-inset-top)) var(--page-side) 2px}
.hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 2px 12px}
.hdr h1{color:var(--deep);font-size:var(--type-h1);font-weight:var(--weight-heading);letter-spacing:.03em}
.hdr .dl{font-size:var(--type-note);color:var(--muted);margin-top:1px}
.hdr .dl b{color:var(--ink);font-weight:600}
#clk{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-clock);font-weight:var(--weight-clock);letter-spacing:.01em;line-height:1}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  background:var(--card);border-top:var(--border-width) solid var(--hair);padding:6px 10px calc(var(--tab-bottom-padding) + env(safe-area-inset-bottom))}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--touch-tab);border-radius:var(--radius-tab);
  text-decoration:none;color:var(--muted);font-size:var(--type-tab);font-weight:var(--weight-tab);letter-spacing:.02em}
.tabs button small{font-size:var(--type-tab-english);font-weight:var(--weight-tab-english);letter-spacing:.04em;margin-top:-1px}
.tabs button[aria-current="page"]{background:var(--tint);color:var(--deep)}

main{padding:4px var(--page-side) 0}
.panel{display:none}.panel.on{display:block}

.sec{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:6px 2px 12px}
.sec h2{color:var(--deep);font-size:var(--type-h2);font-weight:var(--weight-heading);letter-spacing:.03em}
.sec .sub{font-size:var(--type-meta);color:var(--muted);letter-spacing:.12em;margin-top:1px}
.sec .side{text-align:right;font-size:11.5px;color:var(--muted)}
.ex{display:inline-flex;align-items:center;gap:5px;font-size:var(--type-badge);font-weight:var(--weight-badge);color:var(--ink);background:var(--card);
  border:1px dashed var(--ink);border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap}
.ex svg{width:12px;height:12px}
.ghost{font:inherit;font-size:13px;font-weight:700;color:var(--acc);background:none;border:0;padding:8px 4px;min-height:var(--touch-min)}

/* card */
.card{background:var(--card);border:var(--border-width) solid var(--hair);border-radius:var(--radius-card);padding:var(--card-padding);margin-bottom:var(--card-gap)}

/* ---------- shuttle (source styles, swapped order) ---------- */
.route{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:800;letter-spacing:.02em}
.route .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.route .thread{flex:1;height:0;border-top:2px solid var(--acc);opacity:.45;min-width:16px}
.card.mi .route .thread{border-top-style:dashed}
.route .tiny{font-size:10.5px;color:var(--muted);font-weight:500;margin-left:-2px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin:8px 0 4px;font-size:var(--type-meta);color:var(--muted)}
.meta .chip{background:var(--tint);color:var(--acc);font-weight:700;padding:1px 9px;border-radius:var(--radius-pill)}
.status{font-size:var(--type-note);color:var(--muted);margin:2px 0 10px;min-height:1.2em}
.status.closed{color:var(--deep);font-weight:700}
.cols{display:grid;grid-template-columns:1fr 1fr}
.col{padding:0 var(--column-gutter)}
.col:first-child{padding-left:2px}
.col + .col{border-left:var(--border-width) solid var(--hair2)}
.col h3{font-size:var(--type-meta);font-weight:700;color:var(--muted);letter-spacing:.06em;margin-bottom:8px}
.col h3 b{color:var(--ink)}
.dep{margin-bottom:12px}
.dep .tag{display:none;font-size:var(--type-tag);font-weight:var(--weight-badge);color:var(--acc);background:var(--tint);border-radius:var(--radius-pill);padding:0 7px;margin-bottom:2px}
.dep .tag.show{display:inline-block}
.dep .time{display:block;font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-weight:var(--weight-other);font-size:var(--type-shuttle-other);line-height:1.1}
.dep.lead .time{font-size:var(--type-shuttle-lead);font-weight:var(--weight-lead);color:var(--acc);letter-spacing:-.01em}
.dep .cd{display:block;font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-countdown-other);font-weight:var(--weight-countdown-other);margin-top:1px;color:var(--ink)}
.dep.lead .cd{font-size:var(--type-shuttle-countdown);font-weight:var(--weight-countdown)}
.dep .cd .u{font-size:.72em;color:var(--muted);font-weight:400;padding:0 1px}
.dep .bar{display:none;height:var(--progress-height);background:var(--hair2);border-radius:var(--radius-progress);margin-top:7px;overflow:hidden}
.dep.lead .bar{display:block}
.dep .bar i{display:block;height:100%;width:0;background:var(--acc-bar);border-radius:var(--radius-progress)}
.dep.none .time{color:var(--muted);font-size:15px;font-weight:600}
details{border-top:var(--border-width) solid var(--hair2);margin-top:2px}
summary{list-style:none;cursor:pointer;font-size:var(--type-note);font-weight:700;color:var(--muted);padding:10px 2px;letter-spacing:.06em;display:flex;align-items:center;gap:6px;min-height:var(--touch-min)}
summary::-webkit-details-marker{display:none}
summary svg{width:12px;height:12px;transition:transform .15s}
details[open] summary svg{transform:rotate(90deg)}
.tt{padding:2px 2px 10px}
.tt .blk{margin-bottom:12px}
.tt h4{font-size:var(--type-meta);font-weight:800;margin-bottom:6px}
.tt h4 .today{font-size:10px;color:var(--acc);background:var(--tint);border-radius:var(--radius-pill);padding:0 7px;margin-left:6px;vertical-align:1px}
.tt h5{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;margin:8px 0 4px}
.tt .chips{display:flex;flex-wrap:wrap;gap:4px}
.tt .c{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-timetable);font-weight:var(--weight-timetable);padding:1px 7px;border-radius:var(--radius-timetable);background:var(--hair2);color:var(--ink)}
.tt .c.past{opacity:.35;text-decoration:line-through}
.tt .c.next{background:var(--deep);color:var(--card);font-weight:700}
.tt .note{font-size:var(--type-meta);color:var(--muted)}
.notes{font-size:var(--type-note);color:var(--muted);padding:4px 4px 0}
.notes h4{font-size:var(--type-meta);font-weight:800;color:var(--ink);margin:12px 0 3px;letter-spacing:.06em}
.notes p{margin:2px 0}
.notes .gpc,.notes .mic{color:var(--acc);font-weight:700}
.banner{display:none;background:var(--tint);color:var(--deep);border:var(--border-width) solid var(--blue);border-radius:var(--radius-banner);font-size:var(--type-note);padding:8px 12px;margin-bottom:12px}
.banner.show{display:block}

/* ---------- live ETA cards (bus / minibus / MTR) ---------- */
.eta-h{display:flex;align-items:center;gap:10px}
.rt{font-family:var(--num);font-weight:var(--weight-lead);font-size:var(--type-route);line-height:1;min-width:58px;height:var(--touch-min);padding:0 8px;border-radius:var(--radius-route);
  display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--card);letter-spacing:.01em}
.eta-h .who{flex:1;min-width:0}
.eta-h .dest{font-size:var(--type-destination);font-weight:var(--weight-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eta-h .stop{font-size:var(--type-note);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op{font-size:10.5px;font-weight:700;color:var(--muted);border:var(--border-width) solid var(--hair);border-radius:var(--radius-pill);padding:0 7px;margin-right:4px;vertical-align:1px}
.etas{display:grid;grid-template-columns:repeat(3,1fr);row-gap:4px;margin-top:var(--eta-gap-top);border-top:var(--border-width) solid var(--hair2)}
.etas.four{grid-template-columns:repeat(4,1fr)}
.e{padding:10px 6px 4px}
.e + .e{border-left:var(--border-width) solid var(--hair2)}
.e:first-child{padding-left:2px}
.e .m{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-eta-other);font-weight:var(--weight-other);line-height:1}
.e .m small{font-family:var(--num);font-size:var(--type-unit);font-weight:var(--weight-label);color:var(--muted);margin-left:2px}
.e:first-child .m{font-size:var(--type-eta-lead);font-weight:var(--weight-lead);color:var(--acc)}
.e .m.soon{font-family:var(--num);font-size:24px;white-space:nowrap;padding-top:10px}
.e .t{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-under-label);font-weight:var(--weight-label);color:var(--muted);margin-top:3px}
.e .r{display:inline-block;font-size:var(--type-tag);font-weight:var(--weight-badge);color:var(--muted);background:var(--hair2);border-radius:var(--radius-pill);padding:0 6px;margin-top:3px}
.foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);margin-top:6px;padding-top:6px}
.foot .after{font-family:inherit}
.foot .after b{font-family:var(--num);font-weight:600;color:var(--ink);font-size:12.5px}
.ln{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:0}
.ln[data-line="TWL"]{background:var(--mtr-twl)}
.ln[data-line="TML"]{background:var(--mtr-tml)}
.ln[data-line="KTL"]{background:var(--mtr-ktl)}
.ln[data-line="ISL"]{background:var(--mtr-isl)}
.ln[data-line="TCL"]{background:var(--mtr-tcl)}
.ln[data-line="TKL"]{background:var(--mtr-tkl)}
.ln[data-line="AEL"]{background:var(--mtr-ael)}
.ln[data-line="DRL"]{background:var(--mtr-drl)}
.ln[data-line="SIL"]{background:var(--mtr-sil)}
.ln[data-line="EAL"]{background:var(--mtr-eal)}
.dirs{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
.dirs .d{padding:0 var(--column-gutter)}.dirs .d:first-child{padding-left:2px}
.dirs .d + .d{border-left:var(--border-width) solid var(--hair2)}
.dirs h3{font-size:var(--type-meta);font-weight:700;color:var(--muted);margin-bottom:6px}
.dirs h3 b{color:var(--ink)}
.tr{display:flex;align-items:baseline;justify-content:space-between;padding:5px 0;border-bottom:var(--border-width) solid var(--hair2)}
.tr:last-child{border-bottom:0}
.tr .m{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-size:var(--type-train-other);font-weight:var(--weight-other)}
.tr .m small{font-family:var(--num);font-size:11px;color:var(--muted);font-weight:500;margin-left:2px}
.tr:first-of-type .m{font-size:var(--type-train-lead);font-weight:var(--weight-lead);color:var(--acc)}
.tr .p{font-size:11px;color:var(--muted);text-align:right}
.tr .p b{font-family:var(--num);font-size:14px;color:var(--ink);font-weight:600;margin-left:3px}

.add{display:flex;gap:8px;margin:4px 0 14px}
.add input{flex:1;font:inherit;font-size:var(--type-input);min-height:var(--touch-control);padding:0 14px;border:var(--border-width) solid var(--hair);border-radius:var(--radius-control);background:var(--card);color:var(--ink)}
.add input::placeholder{color:var(--ph)}
.add button{font:inherit;font-size:var(--type-button);font-weight:var(--weight-button);min-height:var(--touch-control);padding:0 16px;border:0;border-radius:var(--radius-control);background:var(--acc);color:var(--card)}
.hint{font-size:var(--type-meta);color:var(--muted);margin:0 4px 6px}
.legal{font-size:11.5px;color:var(--muted);padding:2px 4px}
.legal p{margin:3px 0}

body{padding-bottom:24px}
.top{position:relative;padding-bottom:0}
.tabs{position:sticky;top:0;bottom:auto;left:auto;right:auto;border-top:0;border-bottom:var(--border-width) solid var(--hair);padding:var(--tab-padding);margin-bottom:12px}
.tabs button{font-family:inherit;border:0;cursor:pointer;background:var(--card)}
.tabs button[aria-selected="true"]{background:var(--tint);color:var(--deep)}
.standalone body{padding-bottom:calc(var(--page-bottom) + env(safe-area-inset-bottom))}
.standalone .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;border-bottom:0;border-top:var(--border-width) solid var(--hair);padding-bottom:calc(var(--tab-bottom-padding) + env(safe-area-inset-bottom))}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled,select:disabled{cursor:default;color:var(--muted);background:var(--paper)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
input,select{min-width:0;width:100%;min-height:var(--touch-control);padding:9px 12px;border:var(--border-width) solid var(--hair);border-radius:var(--radius-control);background:var(--card);color:var(--ink);font-size:var(--type-input);font-weight:var(--weight-body)}
input::placeholder{color:var(--ph)}
button{min-width:var(--touch-min);min-height:var(--touch-min)}
svg{width:18px;height:18px;flex:none}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--touch-control);border:var(--border-width) solid var(--blue);border-radius:var(--radius-control);padding:8px 14px;background:var(--blue);color:var(--card);font-weight:var(--weight-button);font-size:var(--type-button)}
.primary:disabled{border-color:var(--hair)}
.add-title{font-size:var(--type-add-heading)!important}
.add-route{display:grid;gap:13px;padding:16px;background:var(--card);border:var(--border-width) solid var(--hair);border-radius:var(--radius-card);margin-bottom:12px}
.add-route label{display:grid;gap:5px;font-size:var(--type-meta);font-weight:700;color:var(--muted);min-width:0}
.route-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.form-status:empty{display:none}
.form-status,.state-message,.notice,.storage-warning{font-size:13px;overflow-wrap:anywhere}
.form-status,.notice{color:var(--muted)}
.state-message{padding:18px 0 8px}
.notice{padding:10px 0 0}
.error,.storage-warning{color:var(--deep)}
.empty-state{border:1px dashed var(--hair);border-radius:var(--radius-card);padding:26px 16px;text-align:center;margin-bottom:20px}
.empty-state>p:first-child{color:var(--deep);font-size:16px;font-weight:700;margin-bottom:6px}
.icon-button{display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-route);background:var(--card);color:var(--muted);flex:none}
.rt{border:0;min-width:58px;flex:none}
.eta-h{gap:8px}
.eta-h .dest,.eta-h .stop{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.eta-h .dest{font-size:var(--type-destination)}
.live-card .etas{grid-template-columns:repeat(3,minmax(0,1fr))}
.live-card .e{min-width:0;overflow-wrap:anywhere}
.live-card .e .m{font-size:var(--type-eta-other)}
.live-card .e:first-child .m{font-size:var(--type-eta-lead)}
.live-card .e .m.remark-only{font-family:inherit;font-size:13px;line-height:1.5}
.live-card .e .m small{display:inline-block}
.live-card .e .r{border-radius:var(--radius-pill);padding:2px 5px;font-size:var(--type-badge)}
.departure-dest,.platform{font-size:var(--type-meta);margin-top:4px;color:var(--muted)}
.platform b{color:var(--ink);font-size:16px}
.train-direction{margin-top:14px}
.train-direction h4{font-size:var(--type-meta);color:var(--muted)}
.direction-empty{font-size:var(--type-meta);color:var(--muted);padding-top:8px}
.foot{gap:6px;flex-wrap:wrap}
.updated{font-size:var(--type-meta);color:var(--muted)}
.tt .c.past{opacity:1;color:var(--muted)}
.route{letter-spacing:0;font-size:14px;gap:5px}
.route .tiny{font-size:10px}
.route .thread{min-width:10px}
.sec .sub{letter-spacing:.04em}
.page-footer{padding:22px 20px 4px;color:var(--muted);font-size:11px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep disabled native controls legible on mobile WebKit too. */
button:disabled,select:disabled{opacity:1;-webkit-text-fill-color:var(--muted)}