public/styles.css

:root {
  --bg: #0f172a;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #576170;          /* WCAG AA: >=4.5:1 on both panel & chip */
  --line: #e2e8f0;
  --accent: #e11d48;         /* brand fill (white text passes on it) */
  --accent-d: #be123c;
  --accent-text: #be123c;    /* accent used as TEXT: >=4.5:1 on panel & chip */
  --control-border: #7b8799; /* form-control outline: >=3:1 (WCAG 1.4.11) */
  --chip: #f1f5f9;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  /* Responsiveness on touch: kill the 300ms tap delay + the grey tap-flash so
     buttons react instantly and feel native in the Android WebView. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#app { display: flex; height: 100vh; }

#panel {
  width: 390px;
  min-width: 390px;
  height: 100%;
  overflow-y: auto;
  /* Don't let panel scroll chain to the page (a bouncy, janky feel on Android). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 0 18px 0;
  display: flex;
  flex-direction: column;
}

#map { flex: 1; height: 100%; }

/* Sticky banner: logo + app name pinned to the top while the panel scrolls. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--panel);
  margin: 0 -18px;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Burger menu */
.appbar-right { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  background: var(--chip); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink);
  padding: 4px 9px; letter-spacing: .02em;
}
/* Only real pointers get hover — on touch, :hover sticks after a tap and left a
   hard-coded light bg under near-white dark-mode text (unreadable). Use --line so
   the hover follows the theme. */
@media (hover: hover) {
  .lang-btn:hover { background: var(--line); }
}
.menu-btn {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink); padding: 4px 6px;
}
.menu {
  position: absolute; top: calc(100% - 4px); right: 12px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column; min-width: 168px; overflow: hidden;
}
.menu[hidden] { display: none; }
.menu button {
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 11px 16px; font-size: 14px; color: var(--ink); white-space: nowrap;
}
.menu button:hover { background: var(--chip); }

/* Menu page overlay (About / Contact / Privacy) */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow: auto;
}
.overlay[hidden] { display: none; }
.sheet {
  position: relative; background: #fff; border-radius: 14px;
  width: 100%; max-width: 560px; padding: 24px 22px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
}
.sheet-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--muted);
}
.sheet h2 { margin: 0 0 6px; color: var(--accent-text); font-size: 20px; }
.sheet h3 { margin: 18px 0 4px; font-size: 14px; }
.sheet p { margin: 8px 0; font-size: 14px; line-height: 1.55; color: #334155; }
.sheet a { color: var(--accent-text); }
.sheet .muted { color: var(--muted); font-size: 12.5px; }

/* Support / buy me a coffee */
.support-sheet { max-width: 400px; text-align: center; }
.support-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.coffee { font-size: 52px; line-height: 1; }
.support-sheet h2 { color: var(--ink); margin: 6px 0 0; }
.support-sheet p { color: var(--muted); margin: 2px 4px 8px; }
.support-cta {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--accent); color: #fff !important; text-decoration: none;
  padding: 13px 16px; border-radius: 12px; font-weight: 700; font-size: 16px;
}
.support-later {
  background: none; border: 0; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 8px;
}

/* Journey alerts */
.track-bar { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.track-bar[hidden] { display: none; }
.track-start, .track-stop {
  width: 100%; padding: 11px 14px; border: 0; border-radius: 10px;
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.track-start { background: var(--accent); color: #fff; }
.track-stop { background: #64748b; color: #fff; }
.track-status { font-size: 14px; color: var(--ink); font-weight: 600; }
.track-alert {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1100;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.track-alert[hidden] { display: none; }
.ta-bell { font-size: 20px; }
.ta-text { flex: 1; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.ta-dismiss {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.appbar h1 { font-size: 22px; margin: 0; display: flex; align-items: center; gap: 9px; }
.appbar h1 .logo { width: 30px; height: 30px; border-radius: 8px; }
.subtitle { color: var(--muted); margin: 8px 0 10px; font-size: 13px; }

#planner { display: flex; flex-direction: column; gap: 12px; }

/* Journey card: groups From → To so the core task reads as one unit. */
.journey {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 14px;
}
html[data-theme="dark"] .journey { background: #16202f; }

/* Collapsible "Trip options" (day + fare): secondary, hidden until tapped. */
.trip-opts { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.opts-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 13px; background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); text-align: left;
}
.opts-label { white-space: nowrap; }
.opts-summary { flex: 1; min-width: 0; color: var(--muted); font-weight: 500;
  font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opts-chev { color: var(--muted); transition: transform .28s ease; }
.trip-opts.open .opts-chev { transform: rotate(180deg); }
/* Animate open/close by transitioning the grid row from 0fr → 1fr. */
.opts-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.trip-opts.open .opts-body { grid-template-rows: 1fr; }
.opts-inner { overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  padding: 0 13px; }
.trip-opts.open .opts-inner { padding: 2px 13px 13px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field span { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.field .opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.field select, .field input {
  padding: 9px 10px;
  border: 1px solid var(--control-border);  /* >=3:1 so the field edge is perceivable (WCAG 1.4.11) */
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Custom autocomplete — replaces the native <datalist>, whose popup renders
   transparently inside Android WebView. This dropdown is fully opaque. */
.ac { position: relative; }
.suggest {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 244px;
  overflow-y: auto;
  background: #fff;                 /* opaque — the actual fix */
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}
.suggest[hidden] { display: none; }
.suggest li {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest li.active, .suggest li:hover { background: var(--chip); }
.suggest li .mark { font-weight: 700; color: var(--accent-text); }

/* Transport mode toggle (Bus / Metro) */
.mode-pills { display: flex; gap: 8px; }
.mode-pill {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.mode-pill.on { border-color: #0d7d8a; box-shadow: inset 0 0 0 1px #0d7d8a; color: #0a6470; }
.mode-pill:not(.on) { color: var(--muted); opacity: .6; }

.row-btns { display: flex; gap: 8px; }
#swap, #locate {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}
#locate { color: var(--accent-text); border-color: #fbcfe8; font-weight: 600; }
#swap:hover, #locate:hover { background: #e2e8f0; }

#go {
  margin-top: 4px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#go:hover { background: var(--accent-d); }
#go:disabled { opacity: .6; cursor: default; }

.status { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.status.error { color: var(--accent-text); }

/* Tabs: Plan / Nearby / Events — sticky under the appbar so they're always
   reachable, in a soft segmented track for a cleaner, less form-like feel. */
.tabs {
  display: flex; gap: 4px; margin: 2px 0 10px; padding: 4px;
  position: sticky; top: 56px; z-index: 25;
  background: var(--chip); border-radius: 14px;
}
html[data-theme="dark"] .tabs { background: #16202f; }
.tab {
  flex: 1; background: transparent; border: 0; border-radius: 11px;
  padding: 9px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tab.on { background: #fff; color: var(--accent-text); box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* Fluid view switch: the incoming view fades+slides up on each change. The
   class is re-applied by switchView() so it replays every time, not just once. */
.view-in { animation: mz-fade-up .3s cubic-bezier(.22,.61,.36,1) both; }

/* Nearby activities */
.find-btn {
  width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.find-btn:hover { background: var(--accent-d); }
.find-btn:disabled { opacity: .6; cursor: default; }

/* Category carousel (horizontally-scrollable chips). */
.act-cats {
  display: flex; gap: 8px; margin-top: 12px; padding-bottom: 4px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.act-cats::-webkit-scrollbar { display: none; }
.act-cat {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--chip); color: var(--ink);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.act-cat:hover { border-color: var(--accent); }
.act-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.act-cat .ac-emoji { font-size: 14px; }

/* Result actions: return trip + share */
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.result-btn {
  flex: 1 1 30%; min-width: 96px; background: var(--chip); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s;
}
.result-btn:hover { border-color: var(--accent); }

/* Recent trips */
.recents { margin-top: 14px; }
.recents-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 7px;
}
.recents-clear {
  background: none; border: 0; color: var(--accent-text); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 2px 4px; text-transform: none; letter-spacing: 0;
}
.recents-list { display: flex; flex-direction: column; gap: 6px; }
.recent-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--chip); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; color: var(--ink); cursor: pointer;
  transition: border-color .15s;
}
.recent-chip:hover { border-color: var(--accent); }
.recent-chip .rc-from, .recent-chip .rc-to { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-chip .rc-to { font-weight: 600; }
.recent-chip .rc-arrow { color: var(--accent-text); flex: 0 0 auto; }

#activities { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.act-card { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.act-photo {
  position: relative; flex: 0 0 96px; width: 96px; height: 96px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
}
.act-emoji { font-size: 34px; }
.act-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.act-img.loaded { opacity: 1; }
.act-body { flex: 1; min-width: 0; padding: 10px 12px 10px 2px; display: flex; flex-direction: column; gap: 4px; }
.act-name { font-weight: 700; font-size: 14.5px; }
.act-meta { font-size: 12.5px; color: var(--muted); }
.act-desc { font-size: 12px; color: var(--muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.act-actions { display: flex; gap: 8px; margin-top: auto; }
.act-actions button {
  background: var(--chip); border: 1px solid var(--line); border-radius: 16px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--ink);
}
.act-go { color: var(--accent-text); border-color: #fbcfe8; font-weight: 600; }
.act-actions button:hover { background: #e2e8f0; }

#results { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }

.option {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.option:hover { border-color: #cbd5e1; }
.option.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(225,29,72,.15); }

.opt-head {
  padding: 11px 13px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.opt-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.opt-time { font-size: 17px; font-weight: 700; }
.opt-fare { font-size: 13px; color: var(--muted); }
.opt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.chip {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 2px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.chip.walk { background: #5e6b7d; }  /* darker slate so the white badge text hits >=4.5:1 */
.sep { color: var(--muted); font-size: 12px; }

.legs { padding: 6px 13px 12px; }
.leg { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.leg:last-child { border-bottom: 0; }
.leg-top { display: flex; align-items: center; gap: 8px; }
.leg-badge {
  font-size: 12px; font-weight: 700; color: #fff;
  padding: 2px 8px; border-radius: 6px; min-width: 38px; text-align: center;
}
.leg-od { font-weight: 600; font-size: 13.5px; }
.leg-meta { font-size: 12.5px; color: var(--muted); margin: 3px 0 0 0; }
.leg-meta b { color: var(--ink); font-weight: 600; }
.leg-meta.free-note { font-size: 11.5px; opacity: .8; margin-top: 1px; }

.stops-toggle {
  background: none; border: 0; color: var(--accent-text);
  font-size: 12.5px; cursor: pointer; padding: 4px 0 0; font-weight: 600;
}
.stops { list-style: none; margin: 6px 0 0; padding: 0 0 0 4px; display: none; }
.stops.open { display: block; }
.stops li { position: relative; padding: 3px 0 3px 18px; font-size: 12.5px; color: #334155; }
.stops li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--dot, #94a3b8);
}
.stops li.end::before { background: var(--dot, #94a3b8); }
.stops .t { color: var(--muted); }

.walk-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.walk-line .walk-time { margin-left: auto; color: var(--ink); font-weight: 600; white-space: nowrap; }

.src {
  margin-top: auto;
  padding: 14px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.src a { color: var(--muted); }
.byline { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.byline a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.byline a:hover { text-decoration: underline; }

/* Collapsible map toggle (mobile). Hidden on desktop where the map is fixed. */
#map-toggle {
  display: none;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  cursor: pointer;
}
#map-toggle:active { background: #e2e8f0; }

.empty { color: var(--muted); font-size: 13.5px; padding: 8px 2px; }

/* Destination address "did you mean?" picker */
.addr-choices { display: flex; flex-direction: column; gap: 6px; }
.addr-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.addr-opt {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.addr-opt:hover { border-color: var(--accent); background: var(--chip); }

/* Map markers */
.pin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.leaflet-popup-content { font: 13px system-ui; margin: 8px 12px; }

/* On-map utilities carousel (health, ATMs, grocery, tobacco, fuel…). Floats over
   the map; tapping a chip drops nearby markers you can route to. */
.poi-carousel {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 600;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.poi-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px;
  pointer-events: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.poi-chips::-webkit-scrollbar { display: none; }
.poi-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; background: rgba(255,255,255,.96); color: #0f172a;
  border: 1px solid rgba(15,23,42,.12); border-radius: 20px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 5px rgba(15,23,42,.18);
}
.poi-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.poi-status {
  align-self: flex-start; pointer-events: none;
  background: rgba(15,23,42,.86); color: #fff; font-size: 12px;
  padding: 5px 11px; border-radius: 8px; box-shadow: 0 1px 5px rgba(15,23,42,.25);
}
.poi-status[hidden] { display: none; }
/* While loading the bus loader sits on a light pill so its road/label read. */
.poi-status.loading {
  background: rgba(255,255,255,.96); color: #0f172a;
  padding: 9px 16px; box-shadow: 0 1px 6px rgba(15,23,42,.22);
}
.poi-pin {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.poi-pop b { font-size: 14px; }
.poi-pop-meta { color: var(--muted); font-size: 12px; margin: 2px 0 8px; }
.poi-route {
  width: 100%; background: var(--accent); color: #fff; border: 0;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}

@media (max-width: 720px) {
  #app { flex-direction: column; }
  #panel { width: 100%; min-width: 0; flex: 1 1 auto; min-height: 0; height: auto; max-height: none; border-right: 0; border-bottom: 0; }
  #map-toggle { display: block; flex: 0 0 auto; }
  /* Animate flex-basis + opacity (not display:none) so hiding/showing the map
     slides smoothly on the phone. */
  #map {
    flex: 0 0 38vh; height: auto; min-height: 0; overflow: hidden;
    transition: flex-basis .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
  }
  /* Collapsed: map slides away, planner takes the full screen. */
  #app.map-collapsed #map { flex-basis: 0; opacity: 0; }
}

/* ---------- Dark mode ---------- */
/* Light-mode rules are untouched; dark overrides the palette + the surfaces
   that hardcode white. OSM map tiles are raster, so they're inverted to a dark
   theme via a filter — the coloured route/overlay panes are unaffected. */
html[data-theme="dark"] {
  --bg: #0b1220; --panel: #0f172a; --ink: #e8eef7; --muted: #93a3b8;
  --line: #243042; --chip: #1e2a3c;
  --accent-text: #fb7185;    /* lighter rose: accent #e11d48 is only 3.8:1 on dark */
  --control-border: #697892; /* form-control outline: >=3:1 on dark input fill */
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--panel); }
html[data-theme="dark"] .suggest,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .mode-pill,
html[data-theme="dark"] .tab.on,
html[data-theme="dark"] .addr-opt,
html[data-theme="dark"] .act-actions button { background: #1e2a3c; color: var(--ink); }
html[data-theme="dark"] .tab.on { color: #fb7185; }
html[data-theme="dark"] .mode-pill.on { background: #102031; color: #2dd4bf; border-color: #2dd4bf; }  /* dark teal #0a6470 is only 2.4:1 here */
html[data-theme="dark"] .opt-head { background: #16202f; }
html[data-theme="dark"] .act-photo { background: linear-gradient(135deg, #1e2a3c, #243042); }
html[data-theme="dark"] .sheet p,
html[data-theme="dark"] .stops li { color: #cbd5e1; }
html[data-theme="dark"] #map { background: #0b1220; }
html[data-theme="dark"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: #1e2a3c; color: var(--ink); }
html[data-theme="dark"] .leaflet-bar a { background: #1e2a3c; color: var(--ink); border-color: #243042; }
html[data-theme="dark"] .act-go { color: #fb7185; }

/* Theme toggle in the burger menu */
.menu .theme-toggle { border-bottom: 1px solid var(--line); }

/* ---------- trip cost summary ---------- */
.opt-cost {
  margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px;
  background: var(--chip); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink);
}

/* ---------- last-bus heads-up ---------- */
.lastbus-note {
  margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.4;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.lastbus-note.night { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
html[data-theme="dark"] .lastbus-note { background: #2a2113; border-color: #6b4e1f; color: #fcd9a8; }
html[data-theme="dark"] .lastbus-note.night { background: #181f3a; border-color: #3b4a8a; color: #c7d2fe; }

/* ---------- Home / Work shortcuts ---------- */
.shortcuts { display: flex; gap: 8px; margin: 10px 0 0; }
.shortcuts:empty { display: none; }
.shortcut { flex: 1; display: flex; gap: 6px; min-width: 0; }
.shortcut .sc-go, .shortcut .sc-set {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-weight: 600;
  background: var(--chip); border: 1px solid var(--line); color: var(--ink);
}
.shortcut .sc-set { color: var(--muted); border-style: dashed; justify-content: center; }
.shortcut .sc-go:hover, .shortcut .sc-set:hover { border-color: var(--accent); }
.shortcut .sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut .sc-clear {
  flex: 0 0 auto; width: 32px; border-radius: 10px; cursor: pointer;
  background: var(--chip); border: 1px solid var(--line); color: var(--muted);
}
.shortcut .sc-clear:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- 🦤 dodo easter egg ---------- */
.dodo {
  position: fixed; bottom: 16px; left: -60px; z-index: 9999;
  font-size: 44px; pointer-events: none;
  animation: dodo-walk 4.2s linear forwards;
}
@keyframes dodo-walk {
  0%   { transform: translateX(0) scaleX(-1) rotate(0deg); }
  25%  { transform: translateX(28vw) scaleX(-1) rotate(-6deg); }
  50%  { transform: translateX(52vw) scaleX(-1) rotate(0deg); }
  75%  { transform: translateX(80vw) scaleX(-1) rotate(-6deg); }
  100% { transform: translateX(110vw) scaleX(-1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dodo { animation-duration: 1s; }
}

/* ---------- data freshness + report link (footer) ---------- */
.data-meta { display: block; margin-top: 6px; }
.data-updated { color: var(--muted); }
.data-updated:not(:empty)::after { content: " · "; }
#report-link { color: var(--accent-text); cursor: pointer; }

/* ---------- first-run onboarding ---------- */
.onboard-body { padding: 22px 20px 20px; text-align: center; }
.onboard-logo { font-size: 46px; line-height: 1; }
.onboard-logo-img { border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.onboard-sheet h2 { margin: 10px 0 14px; color: var(--accent-text); font-size: 22px; }
.onboard-list { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.onboard-list li { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 13px; font-size: 14px; line-height: 1.45; }
.onboard-list .ob-ic { font-size: 20px; flex: 0 0 auto; }
.onboard-sheet .support-cta { width: 100%; }

/* ---------- offline banner ---------- */
.offline-banner[hidden] { display: none; }   /* author display: rules override [hidden] otherwise */
.offline-banner {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.35;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.offline-banner .ob-dot { color: #c2410c; font-size: 10px; }  /* >=3:1 on the banner tint */
html[data-theme="dark"] .offline-banner { background: #2a2113; border-color: #6b4e1f; color: #fcd9a8; }
.tab.disabled-offline { opacity: .55; }

/* ---------- events tab ---------- */
.event-card {
  display: flex; gap: 12px; align-items: stretch;
  background: var(--chip); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: 10px;
}
.event-photo {
  flex: 0 0 96px; position: relative; background: linear-gradient(135deg, #fce7f3, #ede9fe);
  display: flex; align-items: center; justify-content: center;
}
.event-emoji { font-size: 30px; opacity: .8; }
.event-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .3s;
}
.event-img.loaded { opacity: 1; }
.event-body { flex: 1; min-width: 0; padding: 10px 12px 11px 0; display: flex; flex-direction: column; gap: 4px; }
.event-name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.event-meta { font-size: 12.5px; color: var(--muted); }
.event-venue { font-size: 12.5px; color: var(--muted); display: flex; gap: 4px; }
.event-card { cursor: pointer; }
.event-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.event-cta { margin-top: auto; padding-top: 2px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.event-link {
  align-self: flex-start; font-size: 13px; font-weight: 600;
  color: var(--accent-text); text-decoration: none;
}
.event-link:hover { text-decoration: underline; }

/* Event detail + directions sheets */
.ev-hero { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin: 6px 0 12px; }
.ev-title { font-size: 19px; font-weight: 800; line-height: 1.25; }
.ev-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ev-venue { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.ev-desc { font-size: 14px; line-height: 1.55; white-space: pre-wrap; margin: 14px 0 4px; color: #334155; }
.ev-btn { margin-top: 12px; text-align: center; }
.btn-outline {
  display: block; width: 100%; box-sizing: border-box; cursor: pointer;
  background: transparent; color: var(--accent-text); border: 1.5px solid var(--accent);
  padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 15px;
}
.dir-sheet { max-width: 420px; }
html[data-theme="dark"] .ev-desc { color: #cbd5e1; }
.events-credit { margin-top: 12px; text-align: center; }
html[data-theme="dark"] .event-photo { background: linear-gradient(135deg, #2a1e2e, #241f3a); }

/* ---------- motion / fancy animations ---------- */
@keyframes mz-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mz-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mz-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mz-spin { to { transform: rotate(360deg); } }

/* ---- Mauritius bus loader ------------------------------------------------ *
 * Replaces the generic spinner: a little bus rolls along a moving road while
 * four brand-coloured bus-stops (red→blue→yellow→green) light up in turn.    */
.bus-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; }
.bus-loader .bus-road { position: relative; width: 128px; height: 26px; }
.bus-loader .bus {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-size: 22px; line-height: 1; will-change: transform;
  animation: bus-bob .45s ease-in-out infinite alternate;
}
.bus-loader .bus-road::after {            /* the moving dashed road under the bus */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, var(--muted) 0 9px, transparent 9px 18px);
  background-size: 18px 3px; opacity: .45; animation: road-scroll .5s linear infinite;
}
.bus-loader .stops { display: flex; gap: 7px; }
.bus-loader .stops i {
  width: 8px; height: 8px; border-radius: 50%; display: block;
  animation: stop-pulse 1.2s ease-in-out infinite;
}
.bus-loader .stops i:nth-child(1) { background: #e11d48; animation-delay: 0s; }
.bus-loader .stops i:nth-child(2) { background: #2563eb; animation-delay: .15s; }
.bus-loader .stops i:nth-child(3) { background: #f59e0b; animation-delay: .30s; }
.bus-loader .stops i:nth-child(4) { background: #16a34a; animation-delay: .45s; }
.bus-loader .bus-label { font-size: 13px; color: var(--muted); text-align: center; }
@keyframes bus-bob {
  from { transform: translateX(-50%) translateY(0)    rotate(-2.5deg); }
  to   { transform: translateX(-50%) translateY(-3px) rotate(2.5deg); }
}
@keyframes road-scroll { to { background-position: -18px 0; } }
@keyframes stop-pulse { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }

/* Views slide/fade in when their tab becomes active */
#view-plan:not([hidden]), #view-nearby:not([hidden]), #view-events:not([hidden]) {
  animation: mz-fade-up .30s cubic-bezier(.22, .61, .36, 1) both;
}

/* Cards & route options rise in, gently staggered */
.event-card, .act-card, .opt { animation: mz-fade-up .34s cubic-bezier(.22, .61, .36, 1) both; }
.event-card:nth-child(1), .act-card:nth-child(1) { animation-delay: 0s; }
.event-card:nth-child(2), .act-card:nth-child(2) { animation-delay: .05s; }
.event-card:nth-child(3), .act-card:nth-child(3) { animation-delay: .10s; }
.event-card:nth-child(4), .act-card:nth-child(4) { animation-delay: .15s; }
.event-card:nth-child(5), .act-card:nth-child(5) { animation-delay: .20s; }
.event-card:nth-child(6), .act-card:nth-child(6) { animation-delay: .25s; }
.event-card:nth-child(n+7), .act-card:nth-child(n+7) { animation-delay: .30s; }

/* Modal sheets pop; their backdrop fades */
.overlay { animation: mz-fade-in .2s ease both; }
.overlay .sheet, .overlay .event-sheet, .overlay .dir-sheet { animation: mz-pop .26s cubic-bezier(.22, .61, .36, 1) both; }

/* Tactile feedback + smooth tab/transition */
.tab { transition: color .2s ease, border-color .2s ease, background .2s ease; }
button, .result-btn, .find-btn, .event-card, .act-card, #go, .support-cta, .btn-outline {
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
button:active, .result-btn:active, .event-card:active, .act-card:active, #go:active { transform: scale(.97); }
.appbar .logo { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.appbar .logo:active { transform: rotate(-12deg) scale(1.08); }

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

/* ------------------------------- Accessibility ------------------------------ */
/* Skip link — hidden until focused, then visible (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 3000;
  background: var(--accent); color: #fff; padding: 10px 14px;
  border-radius: 10px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* A clearly visible keyboard focus indicator on every interactive control
   (WCAG 2.4.7 Focus Visible / 2.4.11 Focus Appearance). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
[role="tab"]:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .poi-chip:focus-visible,
.tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Don't paint the ring for pointer users who didn't tab to it. */
:focus:not(:focus-visible) { outline: none; }

/* Minimum target size for compact controls (WCAG 2.5.8 Target Size, AA). */
.tab, .lang-btn, .menu-btn, .poi-chip, .result-btn, .recents-clear,
.menu button, .sheet-close, .addr-opt { min-height: 32px; }
.sheet-close { min-width: 32px; }