/* Design tokens and patterns follow s-bz/hk-swimming-pools and s-bz/db-transports (dark first, light follows the system). */
:root {
  color-scheme: dark light;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang HK", sans-serif;
  --zh-font: "PingFang HK", "Noto Sans HK", "Noto Sans TC", "Microsoft JhengHei", "WenQuanYi Zen Hei", sans-serif;
  --bg: #0e1116; --card: #171c24; --card-hover: #1d2430; --chip: #262d38; --line: #262d38;
  --fg: #e7ebf0; --muted: #9aa5b3;
  --ph: #ff6b6b;
  --brand: #4aa8ff; --on-brand: #0b1220;
  --shadow: none; --shadow-hover: 0 8px 20px rgba(0,0,0,.35);
}
/* Dark mode stated explicitly too: dark-mode extensions (e.g. Noir in Safari) look for a prefers-color-scheme: dark
   rule to tell a site that has its own dark mode; without one they recolour the page. */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1116; --card: #171c24; --fg: #e7ebf0; --muted: #9aa5b3; --brand: #4aa8ff; }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6fa; --card: #fff; --card-hover: #fff; --chip: #eef1f6; --line: #e3e8ef;
    --fg: #111; --muted: #5e5e5e;
    --ph: #d32f2f;
    --brand: #1a6fd8; --on-brand: #fff;
    --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --shadow-hover: 0 8px 20px rgba(16,24,40,.10);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
a, button, summary, label { touch-action: manipulation; }
html, body { margin: 0; padding: 0; color: var(--fg); font: 15px/1.5 var(--font); }
/* A faint colour wash behind everything, solid at each edge with thin fixed strips in the same colours: that's what
   iOS Safari samples to tint its bars (the theme-color metas carry the same two colours). */
:root { --edge-top: color-mix(in srgb, var(--bg) 86%, rgb(58, 160, 255)); --edge-bottom: color-mix(in srgb, var(--bg) 89%, rgb(45, 212, 191)); }
@media (prefers-color-scheme: light) { :root { --edge-top: color-mix(in srgb, var(--bg) 84%, rgb(58, 160, 255)); --edge-bottom: color-mix(in srgb, var(--bg) 87%, rgb(45, 212, 191)); } }
html { background-color: var(--edge-top); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--edge-top), transparent 36%, transparent 62%, var(--edge-bottom)),
              radial-gradient(60% 30% at 100% 45%, color-mix(in srgb, rgb(255, 159, 67) 9%, transparent), transparent), var(--bg); }
.edge-top, .edge-bottom { position: fixed; left: 0; right: 0; height: 12px; z-index: 30; pointer-events: none; }
.edge-top { top: -7px; background: var(--edge-top); }
.edge-bottom { bottom: -7px; background: var(--edge-bottom); }
.wrap { max-width: 900px; margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
[hidden] { display: none !important; }

/* Simplified Chinese text takes Simplified-first fonts */
html:lang(zh-CN) { --font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

/* ---- More: grouped rows, as iOS settings (as hk-swimming-pools) ---- */
.group { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); margin: 0 0 18px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; font-size: 16px; }
.row + .row { border-top: 1px solid var(--line); }
button.row { width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
button.row:active { background: var(--card-hover); }
.group > .row:first-child { border-radius: 16px 16px 0 0; } .group > .row:last-child { border-radius: 0 0 16px 16px; } .group > .row:only-child { border-radius: 16px; }
.row .val { color: var(--muted); text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-stack { display: block; }
.row-stack small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Language picker: the native select, styled as the row's value with a chevron. */
.lang-pick { appearance: none; -webkit-appearance: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; text-align: right; cursor: pointer;
  padding: 4px 18px 4px 4px; max-width: 60%; background-repeat: no-repeat; background-size: 5px 5px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; }
.lang-pick:focus-visible { outline: 2px solid var(--brand); border-radius: 8px; }
.group-head { margin: 0 0 6px 16px; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fine { color: var(--muted); font-size: 13px; margin: 0 16px 18px; }
#moreView > .group-head:first-child { margin-top: 26px; }

/* ---- The glass tab bar (from KC Bus / db-transports): blur and saturation with edge highlights, and a lens that slides under the open tab ---- */
.tabbar { --gn-fill: rgba(255,255,255,.55); --gn-edge: rgba(255,255,255,.75); --gn-edge-low: rgba(255,255,255,.25); --gn-shadow: rgba(16,24,40,.16); --gn-lens: rgba(16,24,40,.07);
  position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; display: flex; justify-content: center; gap: 10px;
  padding: 0 max(16px, env(safe-area-inset-left)); pointer-events: none; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
@media (prefers-color-scheme: dark) { .tabbar { --gn-fill: rgba(30,36,46,.5); --gn-edge: rgba(255,255,255,.28); --gn-edge-low: rgba(255,255,255,.06); --gn-shadow: rgba(0,0,0,.45); --gn-lens: rgba(255,255,255,.12); } }
.tb-pill { pointer-events: auto; position: relative; background: var(--gn-fill); -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  box-shadow: inset 0 1px 0 var(--gn-edge), inset 0 -1px 0 var(--gn-edge-low), inset 0 0 0 .5px var(--gn-edge-low), 0 6px 18px -4px var(--gn-shadow);
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 5px; border-radius: 999px; width: min(100%, calc(var(--n) * 108px + 10px)); }
.tb-lens { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n)); border-radius: 999px; background: var(--gn-lens);
  box-shadow: inset 0 1px 0 var(--gn-edge), inset 0 0 0 .5px var(--gn-edge-low), 0 1px 5px rgba(16,24,40,.1);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .5s cubic-bezier(.3,1.35,.5,1); }
.tb-tab { text-decoration: none; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; min-width: 0; padding: 6px 2px 5px;
  border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--muted); transition: color .2s, transform .15s; }
.tb-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-tab[aria-current="page"] { color: var(--brand); }
.tb-tab[aria-current="page"] svg .fill { fill: currentColor; stroke: none; }
/* The taxi: an outline when it is not the open tab (.ln), solid with the windshield and lamps cut out when it is (.sol) */
.tb-tab svg .sol { display: none; }
.tb-tab svg .dot { fill: currentColor; stroke: none; }
.tb-tab[aria-current="page"] svg .sol { display: inline; fill: currentColor; stroke: none; }
.tb-tab[aria-current="page"] svg .ln { display: none; }
.tb-tab:active { transform: scale(.94); }
.tb-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .tb-lens, .tb-tab { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tb-pill { background: var(--card); } }

/* Brand row (as the other apps): icon and name, the screen's title right-aligned in brand blue */
.brand-bar { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 10px; margin: -2px 0 14px; line-height: 1.2; }
.brand-bar img { flex: none; align-self: center; border-radius: 8px; width: 32px; height: 32px; }
.brand-name { margin: 0; font-size: min(26px, 5.6vw); font-weight: 700; letter-spacing: -.01em; }
.icon-btn { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--card); color: var(--brand); box-shadow: var(--shadow); transition: transform .15s; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: scale(.94); }
.icon-btn span { font-size: 18px; font-weight: 700; }
.icon-btn[hidden] { display: none; }
.brand-bar .icon-btn { flex: none; align-self: center; margin: -6px 0 -6px 0; }
.brand-tab { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: min(20px, 4.2vw); font-weight: 700; color: var(--brand); }
h2 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 28px 0 10px; }
.sub { color: var(--muted); font-size: 14px; margin: -8px 0 14px; }
.sub.small { font-size: 13px; margin: 10px 4px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The input: a frosted pill, sticky under the status bar, as the search bar in hk-swimming-pools */
.search-bar { position: sticky; top: env(safe-area-inset-top); z-index: 11; display: flex; align-items: center; margin: 0 -16px 8px; padding: 8px 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.search-bar input { width: 100%; padding: 14px 48px 14px 46px; border: 0; border-radius: 999px; font: inherit; font-size: 17px; background: var(--card); color: var(--fg); box-shadow: var(--shadow); -webkit-appearance: none; appearance: none; }
.search-bar input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-bar input::placeholder { color: var(--muted); }
.search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--muted); pointer-events: none; }
.search-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.search-clear { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }

.alert { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; font-size: 14px; background: var(--ph); color: #fff; }
.install-hint { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 8px 12px 16px; background: var(--card); border-radius: 16px; font-size: 14px; box-shadow: var(--shadow); }
.install-hint > div { flex: 1 1 auto; min-width: 0; }
.install-hint p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.fb { margin: 0 0 16px; }
.fb p.c { margin: 8px 0 0; font: 600 18px/1.35 var(--zh-font); color: var(--brand); }
.install-btn { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 11px 18px; min-height: 44px; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s; }
.install-btn:active { transform: scale(.96); }
.install-x { flex: 0 0 auto; border: 0; background: none; color: var(--muted); font-size: 16px; min-width: 44px; min-height: 44px; cursor: pointer; transition: transform .15s; }
.install-x:active { transform: scale(.85); }

/* Suggestions and recents: the same cards */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { display: block; width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; background: var(--card); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow); transition: background .15s, box-shadow .2s, transform .15s; }
.item:active { transform: scale(.985); }
@media (hover: hover) { .item:hover { background: var(--card-hover); box-shadow: var(--shadow-hover); } }
.item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.item .t { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.item .s { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.item .c { display: block; margin-top: 6px; font: 600 15px/1.35 var(--zh-font); color: var(--brand); }
#sugg[aria-busy="true"] { opacity: .5; pointer-events: none; }
.attr { margin: 10px 4px 0; font-size: 12px; color: var(--muted); }

/* Swipe to delete: the row slides over a red Delete button (iOS style); a long swipe deletes at once */
.swipe { position: relative; border-radius: 16px; overflow: hidden; transition: height .2s ease, opacity .2s ease; }
.swipe .del { position: absolute; inset: 0 0 0 auto; width: 100px; border: 0; background: var(--ph); color: #fff; font: inherit; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .2s; }
/* Only while the row is slid aside: otherwise its edge bleeds through the card's rounded corners */
.swipe:has(.item[style*="translateX"]) .del { opacity: 1; }
.swipe .item { position: relative; touch-action: pan-y; transition: transform .22s cubic-bezier(.2,.7,.3,1), background .15s, box-shadow .2s; will-change: transform; }
.swipe .item.drag { transition: none; }
.swipe.gone { opacity: 0; }

/* ---- The big Chinese address ---- */
.show { position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center;
  background: #000; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .25s, color .25s;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(max(12px, env(safe-area-inset-bottom)) + 72px) max(20px, env(safe-area-inset-left)); }
/* The toolbar tightens by the width the screen really has: container queries measure the screen itself, so held upright
   (turned a quarter, so it gets the phone's long edge) it is not squeezed as if the phone were narrow. Longer words in
   French or German need the room on a small phone held sideways. */
.show { container-type: inline-size; }
.show.inv { background: #fff; color: #000; }
@supports (height: 100dvh) { .show { width: 100dvw; height: 100dvh; } }
.zh { margin: auto 0; font: 700 40px/1.3 var(--zh-font); text-align: center; overflow-wrap: anywhere; word-break: break-word; text-wrap: balance; max-width: 100%; }
/* The English line, centred along the top: small and dim, at most three lines (the picked line, then the place's English street address) */
.en { flex: none; align-self: stretch; margin: 0 0 10px; font: 500 15px/1.3 var(--font); opacity: .65; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.en .e2 { font-size: 13px; opacity: .8; } /* small and greyer than the picked line */
.zh .a { font-size: .58em; font-weight: 600; margin-top: .35em; }
.zh.solo .a { font-size: 1em; font-weight: 700; margin-top: 0; }
.item .c b { font-weight: 700; }
/* The glass toolbar (the look of the other apps' bottom bar). It is a toolbar of buttons, not tabs: no sliding "you are here"
   lens. Pressing flashes the glass; the one toggle fills with the accent colour while it is on. */
.bar { --gn-fill: rgba(44,44,50,.55); --gn-edge: rgba(255,255,255,.32); --gn-edge-low: rgba(255,255,255,.08); --gn-shadow: rgba(0,0,0,.6); --gn-flash: rgba(255,255,255,.17);
  --gn-fg: rgba(255,255,255,.85); --gn-accent: #4aa8ff; --gn-red: #ff453a;
  position: absolute; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0 12px; pointer-events: none;
  -webkit-transform: translateZ(0); transform: translateZ(0); }
.show.inv .bar { --gn-fill: rgba(118,118,128,.16); --gn-edge: rgba(255,255,255,.95); --gn-edge-low: rgba(0,0,0,.07); --gn-shadow: rgba(0,0,0,.22); --gn-flash: rgba(0,0,0,.10); --gn-fg: rgba(0,0,0,.78); --gn-accent: #0a6cf0; --gn-red: #ff3b30; }
.gn-pill { pointer-events: auto; position: relative; display: flex; align-items: stretch; padding: 5px; border-radius: 999px; background: var(--gn-fill);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  box-shadow: inset 0 1px 0 var(--gn-edge), inset 0 -1px 0 var(--gn-edge-low), inset 0 0 0 .5px var(--gn-edge-low), 0 6px 18px -4px var(--gn-shadow); transition: background .2s; }
.gn-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 17px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 15px/1 var(--font); color: var(--gn-fg); white-space: nowrap; transition: background .15s, color .2s, transform .15s; }
.gn-tab svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gn-tab svg .fill { fill: currentColor; }
.gn-tab:active { background: var(--gn-flash); transform: scale(.96); }
.gn-tab:focus-visible { outline: 2px solid var(--gn-accent); outline-offset: 2px; }
.say.on { color: var(--gn-accent); }
.show.inv .gn-pill.toggle { background: var(--gn-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 18px -4px var(--gn-shadow); }
.show.inv .gn-pill.toggle .gn-tab { color: #fff; }
.x { color: var(--gn-red); padding: 0 18px; }
.sayhint { position: absolute; left: 20px; right: 20px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); text-align: center; font: 500 14px/1.35 var(--font); opacity: .8; pointer-events: none; }

@container (max-width: 759px) {
  .gn-tab { padding: 0 12px; gap: 6px; font-size: 14px; }
  .gn-tab svg { width: 19px; height: 19px; }
  .x { padding: 0 14px; }
  .bar { gap: 6px; padding: 0 8px; }
}
@container (max-width: 639px) {
  .gn-tab { padding: 0 9px; gap: 5px; font-size: 13px; min-height: 44px; }
  .gn-tab svg { width: 17px; height: 17px; }
  .x { padding: 0 11px; }
  .bar { gap: 5px; padding: 0 6px; }
  .gn-pill { padding: 4px; }
}

/* Held upright: a quarter turn clockwise about the top-left corner, so the text reads along the long edge. The box is
   given the screen's size swapped and hung from the right edge, and the safe areas and the toolbar follow the turn.
   This is pure CSS, so it follows the real viewport the instant the phone is rotated: no script has to read a size that
   iOS may not have updated yet. */
@media (orientation: portrait) {
  .show { width: 100vh; height: 100vw; left: 100vw; transform-origin: 0 0; transform: rotate(90deg);
    padding: max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) calc(max(12px, env(safe-area-inset-left)) + 72px) max(20px, env(safe-area-inset-top)); }
  @supports (height: 100dvh) { .show { width: 100dvh; height: 100dvw; left: 100dvw; } }
  .bar { bottom: max(12px, env(safe-area-inset-left)); }
  .sayhint { bottom: calc(max(12px, env(safe-area-inset-left)) + 62px); }
}
/* The driver page (show.html, show-inv.html) is nothing but the screen, so the page itself is the screen's colour from the
   first paint: the phone's status bar takes its colour from the page when it loads. None of the form's wash may exist here. */
html.show-page { background-color: #000; }
html.show-page.inv { background-color: #fff; }
body.show-page { margin: 0; overflow: hidden; background: transparent; }
body.show-page::before { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }