:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --glass: rgba(255, 255, 255, 0.95);
  --card: #ffffff;
  --soft: #f1f5f9;
  --shadow: 0 2px 12px rgba(15, 23, 42, 0.14);
  --brand: #0f766e;
  --brand-ink: #ffffff;
  --dock-h: 62px;
  --safe-b: env(safe-area-inset-bottom);
  --safe-t: env(safe-area-inset-top); /* the clock and notch: tall sheets stop below it */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #eef2f5;
  color: var(--ink);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Gurmukhi", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
[hidden] { display: none !important; }

#map { position: fixed; inset: 0; }

/* ---------- top ---------- */
.top {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  pointer-events: none;
}
.top > * { pointer-events: auto; max-width: 560px; }

.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border-radius: 14px;
  background: var(--glass);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.logo { display: block; flex: none; }
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  padding: 6px 2px;
}
.iconbtn {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* The sheet's close: a thumb-sized target (44 px, Apple's minimum) with a clear glyph. */
#sheetClose { width: 44px; height: 44px; margin: -4px -6px -4px 0; font-size: 22px; line-height: 1; color: var(--ink); background: var(--soft); border-radius: 50%; position: relative; z-index: 2; }
.iconbtn:hover { background: var(--soft); color: var(--ink); }

.results {
  list-style: none;
  margin: 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  max-height: 46vh;
  overflow: auto;
}
.results.inline { box-shadow: none; border: 1px solid var(--line); margin-top: 4px; max-height: 30vh; }
.results li.muted { padding: 10px; color: var(--muted); }
.results button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.results button:hover, .results button:focus-visible { background: var(--soft); outline: none; }
.results button span { color: var(--muted); font-size: 13px; }

.row { display: flex; gap: 6px; align-items: center; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.status::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.status.live::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
.status.warn::before { background: #f59e0b; }
.wx { flex: none; color: var(--ink); cursor: pointer; }

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--glass);
  box-shadow: var(--shadow);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: 0.3; }
.chip.on { color: var(--ink); }
.chip.on i { opacity: 1; }
.chip i.ico { width: 18px; height: 18px; border-radius: 5px; background: center / contain no-repeat; opacity: 0.35; }
.chip.on i.ico { opacity: 1; }
.chip .n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip svg { color: var(--brand); }
.hint {
  align-self: flex-start;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
}

/* ---------- pin, drive pill, toast ---------- */
.pin {
  position: fixed;
  left: 50%; top: 40%;
  z-index: 4;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}
.drive {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + var(--safe-b) + 14px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 600;
  white-space: nowrap;
}
.drive button { border: 0; border-radius: 999px; padding: 6px 12px; background: #ef4444; color: #fff; font-weight: 700; cursor: pointer; }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + var(--safe-b) + 70px);
  transform: translateX(-50%);
  z-index: 6;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

/* ---------- dock ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  height: calc(var(--dock-h) + var(--safe-b));
  padding: 4px 6px var(--safe-b);
  background: var(--glass);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dock button {
  flex: 1;
  max-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dock svg { width: 24px; height: 24px; fill: currentColor; }
.dock button.on { color: var(--brand); background: rgba(15, 118, 110, 0.08); }

.maplibregl-ctrl-bottom-right { bottom: calc(var(--dock-h) + var(--safe-b)); }
.maplibregl-ctrl-bottom-left { bottom: calc(var(--dock-h) + var(--safe-b)); }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }

/* ---------- sheet ---------- */
.sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--dock-h) + var(--safe-b));
  z-index: 4;
  max-height: 58vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 16px 16px;
  border-radius: 18px 18px 0 0;
  background: var(--card);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.16);
}
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 8px;
  background: var(--card);
}
.sheet-head h2 { margin: 0; font-size: 17px; }
.sheet h3 { margin: 20px 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
@media (min-width: 900px) {
  .sheet {
    left: 12px; right: auto;
    width: 400px;
    top: 150px;
    bottom: calc(var(--dock-h) + var(--safe-b) + 12px);
    max-height: none;
    border-radius: 16px;
  }
}

/* map / satellite switch */
.basebar { margin: 4px 0 2px; }
.basebar button { flex: 1; }
.mlyimg { display: block; width: 100%; max-width: 280px; border-radius: 8px; margin: 6px 0; }

/* speedometer */
.speedo {
  position: fixed;
  left: 12px;
  bottom: calc(var(--dock-h) + var(--safe-b) + 14px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  max-width: calc(100vw - 90px);
  flex-wrap: wrap;
}
.speedo .spd { display: flex; flex-direction: column; align-items: center; min-width: 58px; line-height: 1; }
.speedo .spd b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.speedo .spd small { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.speedo .lim {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid #dc2626; background: #fff; color: #111827;
  display: grid; place-items: center; font-weight: 800; font-size: 17px; box-sizing: border-box;
}
.speedo .lim.approx { border-style: dashed; }
.speedo .lim.school { background: #fef08a; }
/* Roadworks: the temporary limit on an orange "ROADWORK" backing (🚧 when the notice gives no number). */
.speedo .lim.works { background: #fff; box-shadow: 0 0 0 4px #f97316; }
.speedo .note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--muted); max-width: 220px; }
.speedo.over { background: #dc2626; color: #fff; animation: speedo-pulse 1s ease-in-out infinite; }
.speedo.over .spd small, .speedo.over .note { color: rgba(255, 255, 255, 0.85); }
.speedo.over .lim { box-shadow: 0 0 0 3px #fff; }
@keyframes speedo-pulse { 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.25); } }
@media (prefers-reduced-motion: reduce) { .speedo.over { animation: none; } }

/* speedometer and drive bar together: the drive bar sits above */
body.has-speedo .drive { bottom: calc(var(--dock-h) + var(--safe-b) + 92px); }
body.has-speedo .toast { bottom: calc(var(--dock-h) + var(--safe-b) + 150px); }

/* ---------- navigation (laid out like the big navigation apps) ---------- */
body.nav .top, body.nav .dock, body.nav .drive, body.nav .sheet, body.nav #pin,
body.nav .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none !important; }
body.nav .maplibregl-ctrl-bottom-right { bottom: calc(var(--safe-b) + var(--navb, 96px) + 140px); }
body.nav .speedo { bottom: calc(var(--safe-b) + var(--navb, 96px) + 66px); }
body.nav .toast { bottom: calc(var(--safe-b) + 200px); }
.navtop { position: fixed; z-index: 7; top: calc(env(safe-area-inset-top) + 8px); left: 8px; right: 8px; max-width: 560px; color: #fff; pointer-events: none; }
.navmain { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #0f5f59; border-radius: 22px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.3); }
.navarrow { flex: none; width: 58px; height: 58px; color: #fff; }
.navarrow svg { width: 58px; height: 58px; display: block; }
.navtext { display: flex; flex-direction: column; min-width: 0; }
.navdist { font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.navdist:empty { display: none; }
.navroad { font-size: 22px; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.navthen { display: inline-flex; align-items: center; gap: 8px; margin: -10px 0 0 12px; padding: 16px 16px 8px; background: #0b4743; border-radius: 0 0 16px 16px; font-weight: 700; font-size: 20px; }
.navthen svg { width: 28px; height: 28px; }
.navbottom { position: fixed; z-index: 7; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); max-width: 560px; background: var(--card); color: var(--ink); border-radius: 24px; box-shadow: 0 -2px 18px rgba(15, 23, 42, 0.18); padding: 12px 12px 12px 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.navstats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.navstats b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.navstats b small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.navstats span { font-size: 13px; color: var(--muted); font-weight: 600; }
.navstats div:first-child b { color: #0f766e; }
.navend { border: 0; border-radius: 999px; background: #dc2626; color: #fff; font-weight: 800; font-size: 17px; padding: 14px 20px; cursor: pointer; }
.navrec { flex-basis: 100%; order: 3; margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.navside { position: fixed; z-index: 7; right: 10px; top: 42%; display: flex; flex-direction: column; gap: 12px; }
.navbtn { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.navbtn[hidden] { display: none; }
.navbtn svg { width: 26px; height: 26px; }
.nRecenter { color: #2563eb; }
.navme { width: 42px; height: 42px; }
.navme svg { width: 42px; height: 42px; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.navme.navwalker, .navme.navwalker svg { width: 40px; height: 56px; overflow: visible; }
.navme.navwalker.left svg { transform: scaleX(-1); }
.navxing { display: block; width: fit-content; max-width: calc(100% - 24px); margin: 8px 0 0 12px; padding: 8px 14px; background: #7c2d12; color: #fff; border-radius: 14px; font-weight: 800; font-size: 16px; box-shadow: var(--shadow); }
.navxing.down { background: #b91c1c; }
.navalert { display: inline-flex; align-items: center; max-width: calc(100% - 24px); box-sizing: border-box; margin: 8px 0 0 12px; padding: 8px 14px; background: #ea580c; color: #fff; border-radius: 14px; font-weight: 800; font-size: 17px; line-height: 1.2; box-shadow: var(--shadow); }
/* A long warning wraps to a second line instead of "8 crashe…" (9 Nov 2026); never more than two lines. */
.navalert .hl { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* "Still there?" after passing someone's report: two big buttons under the banner, gone after 12 s. */
.navstill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 10px 12px; background: var(--card, #fff); color: var(--ink, #111827); border-radius: 16px; box-shadow: var(--shadow); font-size: 16px; }
.navstill[hidden] { display: none; }
.navstill b { flex-basis: 100%; }
.navstill button { flex: 1; min-height: 48px; border: 0; border-radius: 12px; background: #f1f5f9; color: #111827; font: inherit; font-weight: 800; cursor: pointer; }
.navalert .hd { flex: none; margin-inline-start: 0.3em; white-space: nowrap; }
/* Driving (with or without a route): no layer chips on the map. They come back a minute after the car stops. */
body.moving-fast:not(.sheet-up) .top .chips, body.nav .top .chips { display: none; }
.navalert.cam { background: #111827; box-shadow: 0 0 0 2px #facc15, var(--shadow); }
/* A numbered road as its sign: gold on green (Australian route markers). */
.navroadpill.ref { background: #0b6b3a; color: #facc15; border: 2px solid #facc15; padding: 6px 16px; letter-spacing: 0.02em; }
.navroadpill { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + var(--navb, 96px) + 16px); max-width: calc(100vw - 32px); background: #111827; color: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); }
.navreport { position: fixed; z-index: 7; right: 12px; bottom: calc(var(--safe-b) + var(--navb, 96px) + 66px); width: 62px; height: 62px; border-radius: 18px; border: 0; background: #facc15; color: #111827; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.navreport svg { width: 34px; height: 34px; }
/* The passenger's report button on the main map (passreport.js): above the bottom bar and the speedometer row. */
.navreport.passreport { bottom: calc(var(--safe-b) + 150px); z-index: 6; }
.navquick { position: fixed; inset: 0; z-index: 9; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.navquickbox { width: 100%; max-width: 560px; background: var(--card); border-radius: 24px 24px 0 0; padding: 18px 16px calc(var(--safe-b) + 16px); }
.navquickbox > b { display: block; font-size: 20px; margin-bottom: 12px; }
.navquickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.navquickgrid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; }
/* 🔀 Other ways from here, on the route overview: a label on each grey line; tap to take it. */
.navaltbubble { border: 0; border-radius: 12px; padding: 7px 11px; background: #fff; color: #111827; font: inherit; font-weight: 800; font-size: 15px; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.navaltbubble.faster { background: #dcfce7; color: #14532d; }
/* 🔍 Search along the route (navsearch.js). */
.navfindkinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.navfindkinds button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.navfindkinds button span:first-child { font-size: 24px; line-height: 1; }
.navfindkinds button.on { border-color: #0f766e; box-shadow: inset 0 0 0 2px #0f766e; }
.navfindlist { list-style: none; margin: 0; padding: 0; max-height: 45vh; overflow: auto; display: grid; gap: 8px; }
.navfindlist button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.navfindlist .nf-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navfindlist .nf-sub { grid-column: 1; color: var(--muted); font-size: 14px; }
.navfindlist .nb-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.navquickcancel { width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 14px; background: #f1f5f9; font-weight: 800; font-size: 16px; cursor: pointer; }
/* Navigation's buttons stack up from just above the yellow report button, so a fifth (🔍 search along the route)
   never covers it. */
body.nav .navside { top: auto; bottom: calc(var(--safe-b) + var(--navb, 96px) + 140px); gap: 8px; }
body.nav .navside .navbtn { width: 50px; height: 50px; }
/* ✦ Ask on the way: listening. */
.navbtn.nAsk { color: #0f766e; }
.navbtn.nAsk.listening { background: #dc2626; color: #fff; animation: mic-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .navbtn.nAsk.listening { animation: none; } }
.navgo { width: 100%; font-size: 17px; padding: 14px; margin: 10px 0 6px; }

/* trip planner: Home / Work / suggestions, car vs public transport */
.placechips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.placechips::-webkit-scrollbar { display: none; }
.pchip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 15px; cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip.unset { color: var(--muted); border-style: dashed; }
.pchip.sug { background: #f0fdfa; border-color: #99f6e4; }
.modes { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.mode { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #f1f5f9; }
.mode.car { background: #ecfdf5; }
.mode .mi { font-size: 24px; line-height: 1.2; }
.mode b { font-size: 22px; font-weight: 800; }
.mode.car b { color: #047857; }
.mode .arr { font-weight: 700; font-size: 16px; margin-left: 6px; }
.mode small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.mode small.fare { color: var(--ink); font-weight: 700; }
.saverow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 15px; color: var(--muted); }
.speedo .light { flex-basis: 100%; margin: 4px 0 0; font-weight: 800; font-size: 15px; color: var(--ink); }
.speedo.over .light { color: #fff; }

/* all layers on/off */
.allbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 6px; }
.allbar .muted { font-size: 13px; }
.allbtn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.allbtn.go { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.allbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* layer rows */
.trow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.trow i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.trow i.ico { width: 24px; height: 24px; margin: 0 -3px 0 -2px; background: center / contain no-repeat; }
.trow.off { opacity: 0.6; cursor: default; }
.tname { flex: 1; display: flex; flex-direction: column; }
.tname small { color: var(--muted); font-size: 12px; }
.tname em { font-style: normal; color: #b45309; font-weight: 600; }
.tname .warnnote { color: #b45309; }
.trow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.trow input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.trow input:checked { background: var(--brand); }
.trow input:checked::after { transform: translateX(18px); }
.trow input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* forms */
.form { display: flex; flex-direction: column; gap: 10px; }
.field label, .grid3 label, .grid2 label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.inrow { display: flex; gap: 6px; }
.form input[type="search"], .form input[type="number"], .form select, .form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
}
.form textarea { resize: vertical; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grid3 label, .grid2 label { display: flex; flex-direction: column; gap: 3px; }
.primary, .secondary, .ghost {
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
}
.primary { border: 0; background: var(--brand); color: var(--brand-ink); }
.primary:disabled { opacity: 0.6; }
.secondary { border: 0; background: var(--ink); color: #fff; }
.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.small { padding: 6px 10px; font-size: 13px; flex: none; }
.btnrow { display: flex; gap: 8px; }
.btnrow > * { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; }
.note { margin: 0; font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.credit { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
details.car { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
details.car summary { cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; }
details.car summary span { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats div { background: var(--soft); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.stats span { font-size: 12px; color: var(--muted); }
.stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stats .hi { background: rgba(15, 118, 110, 0.1); }
.stats .hi b { color: var(--brand); }

.types { display: flex; flex-wrap: wrap; gap: 6px; }
.types button, .seg button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 600;
  cursor: pointer;
}
.types button.on, .seg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }

/* spend */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tile { background: var(--soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.tile span { font-size: 13px; color: var(--muted); }
.tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tile small { color: var(--muted); }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 110px; }
.bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.bar i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--brand); }
.bar span { font-size: 11px; color: var(--muted); }
.trips { list-style: none; margin: 0 0 10px; padding: 0; }
.trips li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.trips li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trips li > div b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trips li span { font-size: 13px; color: var(--muted); }

.links { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }

/* popups */
.maplibregl-popup-content { border-radius: 12px; padding: 10px 12px; font: inherit; box-shadow: var(--shadow); }
.pop { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.pop b { font-size: 15px; }
.pop span { color: var(--muted); font-size: 13px; }
.pop-link { margin-top: 4px; }
.linkbtn { border: 0; padding: 6px 10px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; }

/* Wind layer: animated streaks drawn over the map */
.wind-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }
.wx-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; }

/* points, levels and leaderboard */
/* Points, level and streak live in Profile now (8 Nov 2026: a calmer map); the chip stays out of the top bar. */
.top .playchip { display: none !important; }
.playchip { --lv: #94a3b8; font-weight: 800; font-variant-numeric: tabular-nums; border: 0; cursor: pointer; color: var(--ink); gap: 4px; }
.playchip i { font-style: normal; color: var(--lv); font-size: 15px; }
.playchip .fire { font-weight: 700; font-size: 13px; }
.play .me { display: flex; align-items: center; gap: 12px; }
.play .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--lv); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lv) 25%, transparent); flex: none; }
.play .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.play .who .nm { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play .who span { color: var(--muted); }
.play .lvname { color: var(--lv); }
.linkbtn { border: 0; background: none; padding: 2px 0; color: var(--brand); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.play .big { text-align: right; }
.play .big b { display: block; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.play .big small { color: var(--muted); }
.play .rename { display: flex; gap: 6px; margin-top: 10px; }
.play .rename input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.lvbar, .mbar { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 12px; }
.lvbar i, .mbar i { display: block; height: 100%; border-radius: 99px; background: var(--lv, var(--brand)); transition: width 0.6s ease; }
.small { font-size: 13px; }
.play p.small { margin: 6px 0 0; }
.play .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.play .tile b { font-size: 17px; }
.play .tile small { color: var(--muted); font-size: 12px; }
.mission { margin-top: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #ecfeff, #f0fdf4); border: 1px solid #ccfbf1; }
.mission > div:first-child { display: flex; flex-direction: column; }
.mission span { color: var(--ink); }
.mission .mbar { margin-top: 8px; background: #fff; }
.mission small { display: block; margin-top: 6px; color: var(--muted); }
.mission.done { background: linear-gradient(135deg, #fef9c3, #dcfce7); border-color: #bbf7d0; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; background: var(--soft); color: var(--muted); font-size: 13px; }
.badge i { font-style: normal; }
.badge.got { background: #fef3c7; color: #92400e; font-weight: 700; }
.board { list-style: none; padding: 0; margin: 8px 0 0; }
.board li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.board li.mine { background: #f0fdfa; border-radius: 10px; }
.board .rk { width: 28px; text-align: center; font-weight: 800; color: var(--muted); }
.board i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.board .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board b { font-variant-numeric: tabular-nums; }
.howto { margin: 6px 0; padding-left: 18px; color: var(--ink); }
.howto li { margin: 3px 0; }
.note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 12px; padding: 9px 12px; font-size: 13px; }
.vote { display: flex; gap: 6px; margin-top: 6px; }
.vote button { flex: 1; border: 1px solid var(--line); background: var(--soft); border-radius: 99px; padding: 7px 8px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.vote button:disabled { opacity: 0.5; }
.pop .votes { display: block; color: var(--muted); margin-top: 4px; }
.burst { position: fixed; left: 50%; top: 45%; z-index: 30; pointer-events: none; }
.burst i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: burst 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes burst {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .burst { display: none; } .lvbar i, .mbar i { transition: none; } }

/* parking */
.parkpill { border: 0; cursor: pointer; font-weight: 800; font-variant-numeric: tabular-nums; background: #1d4ed8; color: #fff; }
.parkpill.soon { background: #f59e0b; color: #111827; }
.parkpill.late { background: #dc2626; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.65; } }
.carpin { width: 34px; height: 34px; border-radius: 10px 10px 10px 2px; transform: rotate(-45deg); background: #1d4ed8; box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; border: 2px solid #fff; }
.carpin b { transform: rotate(45deg); color: #fff; font-size: 17px; }
.park .field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.park .field span { font-size: 13px; color: var(--muted); }
.park .field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; background: #fff; }
.allbtn.wide { display: block; width: 100%; margin-top: 14px; padding: 12px 16px; font-size: 16px; text-align: center; }
.allbtn.stop { background: #dc2626; border-color: #dc2626; color: #fff; }
.pklive { padding: 16px; border-radius: 16px; background: #eff6ff; border: 1px solid #bfdbfe; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.pklive b { font-size: 28px; font-variant-numeric: tabular-nums; color: #1e3a8a; }
.pklive span { color: var(--muted); }
.pklive.late { background: #fef2f2; border-color: #fecaca; }
.pklive.late b { color: #b91c1c; }
.pkbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pkbtns .allbtn { text-decoration: none; }
.paylinks { display: flex; flex-wrap: wrap; gap: 8px; }
.paylinks a { text-decoration: none; }
.more .allbtn.wide { margin: 0 0 6px; }
.cheap { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.cheap div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cheap span { color: var(--muted); font-size: 13px; }

/* where a train or tram started and where it's going */
.vtrip { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--soft); }
.vtrip span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vtrip small { color: var(--muted); font-size: 12px; }
.vtrip b { font-size: 15px; }
.vtrip i { font-style: normal; font-weight: 800; color: var(--muted); }

/* God's Eye View extras: launches, cameras, radio */
.pop .launches { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow: auto; }
.pop .launches li { display: flex; flex-direction: column; padding: 5px 0; border-top: 1px solid var(--line); }
.pop .launches li span { color: var(--muted); font-size: 13px; }
.pop .camimg { display: block; width: 100%; max-width: 316px; min-height: 120px; margin-top: 6px; border-radius: 8px; background: var(--soft); object-fit: cover; }
.radiobtn { margin-top: 6px; }
.radiobar { position: fixed; z-index: 6; left: 12px; bottom: calc(var(--dock-h) + var(--safe-b) + 14px); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; border-radius: 999px; background: #831843; color: #fff; box-shadow: var(--shadow); }
.radiobar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.radiobar button { border: 0; border-radius: 999px; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 15px; cursor: pointer; }
.radiobar .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.radiobar .eq i { width: 3px; background: #f9a8d4; animation: eq 0.9s ease-in-out infinite; }
.radiobar .eq i:nth-child(2) { animation-delay: 0.2s; }
.radiobar .eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .radiobar .eq i { animation: none; height: 10px; } }

/* live delays and the vehicle details sheet */
.delay { display: inline-block; align-self: flex-start; margin: 3px 0 1px; padding: 2px 8px; border-radius: 99px; font-size: 13px; font-weight: 800; }
.delay.ok { background: #dcfce7; color: #166534; }
.delay.warn { background: #fef3c7; color: #92400e; }
.delay.bad { background: #fee2e2; color: #991b1b; }
.delay.early { background: #e0f2fe; color: #075985; }
.allbtn.small { padding: 5px 12px; font-size: 13px; margin-top: 6px; align-self: flex-start; }
.vdetail .vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 10px; border-left: 5px solid var(--c); }
.vdetail .vhead b { font-size: 17px; }
.vstatus { font-weight: 700; margin: 8px 0 2px; }
.vstops { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--line); }
.vstops li { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.vstops li::before { content: ''; position: absolute; left: -21px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.vstops li span { flex: 1; min-width: 0; }
.vstops li b { font-variant-numeric: tabular-nums; }
.vstops li .delay { margin: 0; }
.vstops li.skip { color: var(--muted); text-decoration: line-through; }

/* Move (walk, run, ride) */
.movepill { --c: #ea580c; border: 0; cursor: pointer; background: var(--c); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.mvbig { text-align: center; margin: 4px 0 8px; }
.mvbig b { font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.mvbig small { display: block; color: var(--muted); }
.mvtiles .tile b { font-size: 20px; }
.mvlist li.on { background: #fff7ed; border-radius: 10px; }
.mvlist li { cursor: pointer; }
.mvkg { margin-top: 14px; }
.move .field, .budget .field { display: flex; flex-direction: column; gap: 4px; }
.move .field span { font-size: 13px; color: var(--muted); }
.move .field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.morebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* Budget */
.bgfile { cursor: pointer; }
.bgleft { font-weight: 800; margin: 10px 0 0; }
.bgleft.ok { color: #15803d; }
.bgleft.bad { color: #b91c1c; }
.bgcats { list-style: none; margin: 0; padding: 0; }
.bgcats li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.bgrow { display: flex; align-items: center; gap: 8px; }
.bgrow i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.bgrow b { flex: 1; }
.bgrow span { font-variant-numeric: tabular-nums; }
.bgcats .mbar { margin-top: 6px; height: 8px; }
.bgcats .mbar i { background: var(--c); }
.bgcats .mbar.over i { background: #dc2626; }
.bglimit { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bglimit input { width: 110px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.bglimit small { color: var(--muted); }
.bgtx select { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 4px; background: #fff; max-width: 150px; }
.bgtx b.in { color: #15803d; }

/* compass, travel modes, fare notes */
.nCompass { position: relative; }
.nCompass .needle { transform-origin: 12px 12px; transform-box: view-box; transition: transform 0.3s; }
.nCompass .ncmode { position: absolute; bottom: 3px; font-size: 11px; font-weight: 800; color: var(--muted); }
button.mode { width: 100%; border: 2px solid transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.mode.on { border-color: var(--brand); }
.mode.bike { background: #eff6ff; }
.mode.foot { background: #fefce8; }
.note.fare { margin-top: 8px; }
/* Trip planner: "Your location" in blue like other maps, stops on the way. */
.inrow { position: relative; }
.medot { position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); pointer-events: none; }
.form input.mefrom[type="search"] { padding-left: 36px; }
input.mefrom::placeholder { color: #2563eb; font-weight: 700; opacity: 1; }
.addstop { display: inline-block; margin: 0 0 10px; font-weight: 700; }
.stopf label::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; margin-right: 6px; }
.hint.short { cursor: pointer; }

/* ---------- Dark look ("god's eye"): same layout, night colours and neon accents ---------- */
:root[data-theme="dark"] {
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --line: #1e293b;
  --glass: rgba(11, 18, 32, 0.86);
  --card: #0f172a;
  --soft: #1e293b;
  --shadow: 0 4px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(45, 212, 191, 0.12);
  --brand: #2dd4bf;
  --brand-ink: #04201d;
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: #020617; color: var(--ink); }
:root[data-theme="dark"] .mode,
:root[data-theme="dark"] .navquickcancel,
:root[data-theme="dark"] .ghost,
:root[data-theme="dark"] .park .field input,
:root[data-theme="dark"] .bgtx select,
:root[data-theme="dark"] .mission .mbar { background: var(--soft); color: var(--ink); }
:root[data-theme="dark"] .form input[type="search"],
:root[data-theme="dark"] .form input[type="number"],
:root[data-theme="dark"] .form select,
:root[data-theme="dark"] .form textarea,
:root[data-theme="dark"] .play .rename input,
:root[data-theme="dark"] .searchbar input { background: #0b1220; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .maplibregl-popup-content { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .maplibregl-popup-tip { border-top-color: var(--card); border-bottom-color: var(--card); }
:root[data-theme="dark"] .maplibregl-ctrl-group { background: var(--card); }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .primary, :root[data-theme="dark"] .navgo { box-shadow: 0 0 18px rgba(45, 212, 191, 0.35); }
:root[data-theme="dark"] .sheet { border-top: 1px solid rgba(45, 212, 191, 0.25); }
:root[data-theme="dark"] .mode.on { box-shadow: inset 0 0 0 2px var(--brand), 0 0 14px rgba(45, 212, 191, 0.25); }

/* ---------- Game look: level ring chip, coins, skins ---------- */
.playchip .ring { --pct: 0; position: relative; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: conic-gradient(var(--lv) calc(var(--pct) * 1%), rgba(148, 163, 184, 0.3) 0); }
.playchip .ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--card); }
.playchip .ring b { position: relative; font-size: 12px; color: var(--lv); display: flex; align-items: baseline; }
/* "Lv 1 · 2 pts · 🔥 2 days": every number says what it is */
.playchip .ring b small { font-size: 6.5px; font-weight: 800; margin-right: 0.5px; letter-spacing: -0.02em; }
.playchip .ring { width: 28px; height: 28px; }
.playchip .gpts, .playchip .fire { display: inline-flex; align-items: baseline; gap: 2px; }
.playchip .gpts small, .playchip .fire small { font-size: 11px; font-weight: 650; color: var(--muted); }
.playchip .gpts small, .playchip .fire small { margin-left: 2px; }
.playchip .fire { margin-left: 2px; }
.wxaqi.bad { color: #f97316; font-weight: 800; }
.playchip .fire { animation: flick 1.6s ease-in-out infinite; display: inline-block; }
@keyframes flick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } }
.tile.gold { background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(245, 158, 11, 0.12)); }
.adv .advrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.adv .advrow .primary { width: auto; padding: 10px 16px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.skin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer; font: inherit; }
.skin svg { width: 34px; height: 34px; }
.skin small { font-size: 12px; color: var(--muted); }
.skin.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.skin.locked svg { filter: grayscale(1); opacity: 0.4; }
.coinfly { position: fixed; left: 50%; top: 45%; z-index: 50; font-size: 64px; pointer-events: none; transform: translate(-50%, -50%); animation: coinfly 1.2s cubic-bezier(.2,.8,.2,1) forwards; filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.8)); }
.coinfly.golden { font-size: 84px; }
@keyframes coinfly {
  0% { transform: translate(-50%, -50%) scale(0.3) rotateY(0); opacity: 0; }
  25% { transform: translate(-50%, -60%) scale(1.15) rotateY(180deg); opacity: 1; }
  70% { transform: translate(-50%, -62%) scale(1) rotateY(360deg); opacity: 1; }
  100% { transform: translate(calc(50vw - 80px), calc(-45vh + 40px)) scale(0.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .coinfly, .playchip .fire { animation: none; } }
:root[data-theme="dark"] .mission { background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(34, 197, 94, 0.08)); border-color: rgba(45, 212, 191, 0.35); }
:root[data-theme="dark"] .mission.done { background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(34, 197, 94, 0.12)); border-color: rgba(250, 204, 21, 0.4); }
:root[data-theme="dark"] .note { background: rgba(234, 88, 12, 0.12); border-color: rgba(234, 88, 12, 0.4); color: #fdba74; }
.prop .rents { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.prop .rents div { background: var(--soft); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.prop .rents span, .prop .rents small { color: var(--muted); font-size: 13px; }
.prop .rents b { font-size: 17px; }
.prop .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.prop .field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; background: var(--card); color: var(--ink); }
.prop .aff { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: 15px; }

/* Colour key in the Layers sheet */
.legend { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: var(--card); }
.legend summary { cursor: pointer; font-weight: 800; }
.lg-item { margin-top: 10px; }
.lg-item > b { display: block; font-size: 13px; margin-bottom: 4px; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 3px 0; }
.lg-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.lg-bar { flex: none; width: 46px; height: 10px; border-radius: 99px; }
.lg-n { flex: none; min-width: 22px; text-align: center; font-size: 13px; color: var(--ink); }
/* Dark look: option buttons (Map / Satellite / NASA, Flat / Globe / 3D hills, languages …) */
:root[data-theme="dark"] .types button, :root[data-theme="dark"] .seg button { background: var(--soft); color: var(--ink); border-color: #334155; }
:root[data-theme="dark"] .types button.on, :root[data-theme="dark"] .seg button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
:root[data-theme="dark"] .allbtn { background: var(--soft); color: var(--ink); }
:root[data-theme="dark"] .allbtn.go { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* More sheet: grouped tiles */
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mtile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; cursor: pointer; min-height: 96px; }
.mtile:hover, .mtile:focus-visible { border-color: var(--brand); outline: none; }
.mtile .mi { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.mtile b { font-size: 15px; }
.mtile small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.setrow > span { font-weight: 700; }
.aboutrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0 4px; font-size: 15px; }
.aboutrow a { color: var(--brand); }
/* Welcome */
.welcome .lead { font-size: 16px; margin: 0 0 8px; }
.wl { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.wl li { display: flex; gap: 12px; align-items: flex-start; }
.wl li > span { font-size: 24px; line-height: 1; }
.wl li div { display: flex; flex-direction: column; }
.wl small { color: var(--muted); }
.welcome .ghost { width: 100%; margin-top: 8px; }

/* Wayaroo Ads: one clearly labelled local sponsor */
.adtag { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.results li.adres { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: color-mix(in srgb, #fef3c7 25%, transparent); }
.results li.adres > button:first-child { flex: 1; }
.results li.flightres { background: color-mix(in srgb, #fef3c7 35%, transparent); }
.results li.flightres button b { color: #b45309; }
.results li.adres .adweb { flex: 0 0 auto; width: auto; color: var(--brand, #0f766e); font-weight: 600; font-size: 13px; }
.adcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--soft); display: flex; flex-direction: column; gap: 2px; }
.adcard .adtag { margin: 0 0 4px; align-self: flex-start; }
.adcard small { color: var(--muted); }
.adcard p { margin: 4px 0 0; font-size: 15px; }
.adcard .adbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btnlink { text-decoration: none; display: inline-flex; align-items: center; }
.ptlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 4px 8px 44px; }
.ptlinks small { color: var(--muted); width: 100%; }

/* Public transport trip: steps like a timetable, one colour per line. */
.mode.pt { background: #eff6ff; }
.mode.pt b { color: #1d4ed8; }
.ptpick { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 2px; }
.ptsteps { list-style: none; margin: 0 0 4px; padding: 4px 0 4px 6px; border-left: 3px solid #cbd5e1; display: flex; flex-direction: column; gap: 10px; }
.ptsteps li { display: flex; gap: 10px; align-items: flex-start; }
.ptsteps .pi { font-size: 20px; line-height: 1.3; }
.ptsteps small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ptsteps .pw { color: var(--muted); }
.pline { display: inline-block; min-width: 28px; padding: 1px 7px; border-radius: 6px; color: #fff; font-weight: 800; text-align: center; text-shadow: 0 1px 1px #0004; }
details.car .check { margin-top: 10px; font-weight: 600; }

/* Menus like Waze: rows with an icon, a name, a line about it and an arrow. */
.menu { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--soft, #f1f5f9); }
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line, #e2e8f0); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mrow:last-child { border-bottom: 0; }
.mrow .mi { width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; border-radius: 10px; background: var(--card, #fff); flex: none; }
.mrow .mt { flex: 1; min-width: 0; }
.mrow .mt b { display: block; font-size: 15px; }
.mrow .mt small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.mrow .chev { color: var(--muted); font-size: 22px; line-height: 1; }
.mrow:active { background: color-mix(in srgb, var(--brand, #0f766e) 10%, transparent); }
.profile .phead { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--lv) 22%, var(--card, #fff)), var(--card, #fff)); }
.profile .phead .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--lv); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lv) 25%, transparent); flex: none; }
.profile .phead b { display: block; font-size: 17px; }
.profile .phead small { display: block; color: var(--muted); }
.profile .phead small.good { color: #047857; font-weight: 700; }
.setrow.check { justify-content: space-between; }
.setrow.check input { width: 22px; height: 22px; }
/* "Where to?" in the search bar */
.results li.wherehd { padding: 12px 12px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.results li.sug.plan button b { color: var(--brand, #0f766e); }

/* Movement: sheets glide up, menus and results fade in, buttons give a little. */
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.sheet:not([hidden]) { animation: sheet-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.sheet .mrow, .sheet .mode, .sheet .ptsteps li, .results:not([hidden]) li { animation: fade-up 0.3s ease both; }
.sheet .mrow:nth-child(2), .sheet .mode:nth-child(2), .results li:nth-child(2) { animation-delay: 0.03s; }
.sheet .mrow:nth-child(3), .sheet .mode:nth-child(3), .results li:nth-child(3) { animation-delay: 0.06s; }
.sheet .mrow:nth-child(4), .sheet .mode:nth-child(4), .results li:nth-child(4) { animation-delay: 0.09s; }
.sheet .mrow:nth-child(n + 5), .sheet .mode:nth-child(n + 5), .results li:nth-child(n + 5) { animation-delay: 0.12s; }
.dock button { transition: transform 0.12s, color 0.2s, background 0.2s; }
.dock button:active, .chip:active, .mrow:active, button.mode:active { transform: scale(0.96); }
.dock button.on svg, .chip.on i { animation: pop 0.3s ease; }
button.mode.on { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand, #0f766e) 22%, transparent); transition: box-shadow 0.2s, border-color 0.2s; }
.maplibregl-ctrl-compass { transition: transform 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .sheet:not([hidden]), .sheet .mrow, .sheet .mode, .sheet .ptsteps li, .results li, .dock button.on svg, .chip.on i { animation: none; }
}

/* Fuel prices from drivers, in the petrol station popup. */
.fuelbox ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.fuelbox li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; }
.fuelbox li b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fuelbox li small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: -2px; }
.fuelbox details { margin-top: 6px; }
.fuelbox summary { cursor: pointer; color: var(--brand, #0f766e); font-weight: 700; }
.fprow { display: flex; gap: 6px; margin: 6px 0 4px; }
.fprow select, .fprow input { min-width: 0; flex: 1; font: inherit; padding: 6px; border-radius: 8px; border: 1px solid var(--line, #cbd5e1); background: var(--card, #fff); color: inherit; }
.fprow input { max-width: 84px; }

/* Riding along: choose your stop, Wayaroo tells you when to get off. */
.vstops li { position: relative; }
.vstops .vring { margin-left: 6px; border: 0; background: transparent; font-size: 16px; cursor: pointer; opacity: 0.45; padding: 2px 4px; }
.vstops .vring:hover, .vstops li.mine .vring { opacity: 1; }
.vstops li.mine span { font-weight: 800; color: var(--brand, #0f766e); }
.ridepill { position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h, 64px) + var(--safe-b, 0px) + 10px); z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #0f172a; color: #fff; box-shadow: 0 6px 20px #0005; animation: fade-up 0.3s ease; }
.ridepill span { flex: 1; cursor: pointer; font-size: 15px; }
.ridepill b { color: #fde047; }
.ridepill button { border: 0; background: #ffffff22; color: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; }
body.nav .ridepill { display: none; }

/* Report this / hide this person (community reports) */
.rflag { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rflag button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 2px 0; cursor: pointer; text-decoration: underline; }

/* Toilets: open now, the week, the address */
.pop.wc .wc-st { color: var(--ink, #0f172a); font-size: 13px; }
.pop.wc .wc-st b { font-size: 13px; }
.pop.wc .wc-st .yes { color: #15803d; }
.pop.wc .wc-st .no { color: #b91c1c; }
.pop.wc .wc-addr { color: var(--ink, #0f172a); }
.pop.wc .wc-cust { color: #b45309; font-weight: 600; }
.pop .wc-week summary { cursor: pointer; font-size: 13px; color: var(--brand, #0f766e); padding: 2px 0; }
.pop .wc-week table { border-collapse: collapse; font-size: 13px; margin: 2px 0 4px; }
.pop .wc-week th { text-align: left; font-weight: 500; padding: 1px 12px 1px 0; color: var(--muted); }
.pop .wc-week td { padding: 1px 0; }
.pop .wc-week tr.today th, .pop .wc-week tr.today td { font-weight: 700; color: var(--ink, #0f172a); }
/* "Open in Apple Maps · Google Maps · Waze" */
.handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 13px; }
.handoff small { color: var(--muted); width: 100%; }
.handoff a { color: var(--brand, #0f766e); text-decoration: none; font-weight: 600; }
/* 🤝 Partner links (partners.js): plain buttons with the partner's name, and the commission note */
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 13px; }
.partners small { color: var(--muted); width: 100%; }
.partners a.pa { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.partners small.panote { font-size: 12px; }

/* ===================== Premium finish =====================
   Frosted glass, layered soft shadows, hairline edges and one quiet accent (champagne
   gold) used sparingly: the active tab, the primary button's edge, selected chips. */
:root {
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --hair: rgba(15, 23, 42, 0.08);
  --shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 10px 28px -10px rgba(15, 23, 42, 0.28);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 24px 48px -16px rgba(15, 23, 42, 0.35);
  --brand: #0b5f58;
  --brand-2: #128277;
  --gold: #b8925a;
  --gold-soft: rgba(184, 146, 90, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme="dark"] {
  --glass: rgba(10, 15, 28, 0.72);
  --glass-strong: rgba(13, 19, 34, 0.9);
  --hair: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.8);
  --brand: #3fd0bd;
  --brand-2: #2bb3a3;
  --gold: #d9b779;
  --gold-soft: rgba(217, 183, 121, 0.16);
}
html, body { letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
.searchbar, .pill, .chip, .dock, .maplibregl-popup-content, .toast, .hint {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.searchbar {
  border-radius: 18px;
  padding: 8px 8px 8px 12px;
  background: var(--glass-strong);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--hair);
}
.searchbar input { font-size: 16px; font-weight: 500; }
.searchbar input::placeholder { color: var(--muted); font-weight: 400; }
.pill { box-shadow: var(--shadow), inset 0 0 0 1px var(--hair); padding: 6px 11px; }
.chips { gap: 8px; padding: 2px 2px 6px; }
.chip {
  padding: 8px 13px;
  box-shadow: var(--shadow), inset 0 0 0 1px var(--hair);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.15s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:active { transform: scale(0.96); }
.chip.on { box-shadow: var(--shadow), inset 0 0 0 1px var(--gold-soft), inset 0 -2px 0 var(--gold); }
.chip.quick .qi { font-size: 15px; line-height: 1; }
.chip.quick:not(.on) { color: var(--ink); }
.chipsep { flex: none; width: 1px; margin: 6px 2px; background: var(--hair); }
.dock {
  border-top: 0;
  box-shadow: 0 -1px 0 var(--hair), 0 -12px 30px -18px rgba(15, 23, 42, 0.3);
}
.dock button { position: relative; transition: color 0.2s var(--ease); letter-spacing: 0; }
.dock button.on { background: transparent; color: var(--brand); }
.dock button.on::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 22px; height: 3px;
  border-radius: 3px;
  background: var(--gold);
}
.sheet {
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg), 0 -1px 0 var(--hair);
}
.sheet::before {
  content: "";
  display: block;
  width: 38px; height: 5px;
  margin: 8px auto -2px;
  border-radius: 5px;
  background: var(--line);
}
.sheet-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sheet h3 { letter-spacing: 0.08em; font-size: 12px; }
@media (min-width: 900px) { .sheet { border-radius: 24px; } .sheet::before { display: none; } }
.primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 1px var(--gold-soft), 0 8px 20px -10px var(--brand);
  letter-spacing: -0.01em;
  transition: transform 0.15s var(--ease), filter 0.2s var(--ease);
}
.primary:active, .secondary:active, .ghost:active { transform: scale(0.98); }
.primary:hover { filter: brightness(1.05); }
.ghost { border-color: var(--hair); }
.maplibregl-popup-content { border-radius: 16px; padding: 12px 14px; background: var(--glass-strong); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--hair); }
.maplibregl-popup-tip { opacity: 0.92; }
.pop b { letter-spacing: -0.01em; }
.toast { border-radius: 14px; background: rgba(15, 23, 42, 0.88); box-shadow: var(--shadow-lg); }

/* Near-me lists (from the quick chips) */
.nearby .nb-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.nearby .nb-kinds::-webkit-scrollbar { display: none; }
.nb-kind { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--soft); color: var(--ink); font-weight: 600; cursor: pointer; }
.nb-kind.on { background: var(--ink); color: var(--card, #fff); }
.nearby .nb-title { margin: 12px 0 4px; text-transform: none; letter-spacing: -0.01em; font-size: 15px; color: var(--ink); }
.nb-list { list-style: none; margin: 4px 0 0; padding: 0; }
.nb-list li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.nb-list li:first-child { border-top: 0; }
.nb-row { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.nb-name { font-weight: 650; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sub { color: var(--muted); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-side { display: flex; align-items: center; gap: 8px; flex: none; }
.nb-side small { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.nb-price { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.nb-price.cheap { color: #15803d; }
.nb-price.dear { color: #b91c1c; }
.nb-brand { margin: 0 0 8px; max-width: 100%; }
.nb-open { color: #15803d; font-size: 13px; }
.nb-shut { color: #b91c1c; font-size: 13px; }
.nb-go { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--soft); color: var(--brand); font-size: 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .chip, .primary, .dock button { transition: none; } }

/* Voice search */
.iconbtn.mic.listening { color: #dc2626; animation: mic-pulse 1.1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .iconbtn.mic.listening { animation: none; } }

:root[data-theme="dark"] .secondary { background: #e2e8f0; color: #0b1220; }

/* Popups and markers sit above the wind and rain animation, so their words stay clear. */
.maplibregl-marker { z-index: 2; }
.maplibregl-popup { z-index: 3; }

/* Dropped pin */
.pop.droppin .pin-where { color: var(--ink); }
.pop.droppin .pin-code { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--ink); }
.pop.droppin .pin-code small { color: var(--muted); }
.pop.droppin .pc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.02em; }

/* Lane arrows before a turn: lanes that go your way are bright, the others dim. */
.navlanes { display: flex; gap: 4px; width: fit-content; margin: -6px 0 0 12px; padding: 12px 12px 8px; background: #0b4743; border-radius: 0 0 14px 14px; }
.navlanes span { display: grid; place-items: center; width: 34px; height: 38px; border-radius: 8px; color: #ffffff55; border: 1px solid #ffffff22; }
.navlanes span.go { color: #fff; background: #ffffff1f; border-color: #ffffff66; }
.navlanes svg { width: 26px; height: 26px; }

/* A clear (×) button inside search boxes; the browser's own one is hidden so there's only one. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.clearbtn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0 2px; border: 0; border-radius: 50%; background: #64748b22; color: #475569; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.clearbtn svg { width: 18px; height: 18px; }
.clearbtn[hidden] { display: none; }
.clearbtn:hover { background: #64748b38; }
.inrow .clearbtn { align-self: center; margin-left: -46px; margin-right: 10px; position: relative; z-index: 1; }
.inrow input { padding-right: 36px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clearbtn { background: #ffffff1f; color: #cbd5e1; } }
:root[data-theme="dark"] .clearbtn { background: #ffffff1f; color: #cbd5e1; }
/* "Starting somewhere else?" under From. */
.fromhint { display: block; margin: 6px 2px 0; color: var(--muted); font-size: 13px; }
.fromhint[hidden] { display: none; }
.fuelsrc { color: var(--muted); }
/* Choosing a place on the map: the sheet steps aside and this bar says what to do. */
.sheet.picking { display: none !important; }
.pickbar { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 64px) + var(--safe-b, 0px) + 14px); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border-radius: 16px; background: #0b4743; color: #fff; box-shadow: 0 10px 30px #0f172a40; font-weight: 600; }
.pickbar span { flex: 1; }
.pickbar .ghost { color: #fff; border-color: #ffffff55; background: #ffffff14; }

/* Music & radio: your apps as big tap targets, stations in a list with ★ and Play. */
.music .mapps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.music .mapp { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; border-radius: 14px; background: var(--soft, #f1f5f9); color: var(--ink, #0f172a); font-weight: 700; text-decoration: none; text-align: center; }
.music .mapp:hover { background: #0f766e14; }
.music .mchoose summary { cursor: pointer; color: var(--muted); font-size: 13px; margin: 6px 0; }
.music .mpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; }
.music .mlist { list-style: none; margin: 6px 0; padding: 0; }
.music .mstation { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line, #e2e8f0); }
.music .mstation > div { flex: 1; min-width: 0; }
.music .mstation b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music .mstation small { color: var(--muted); }
.music .fav.on { color: #ca8a04; }
.music .radiobtn { flex: none; }
.radiobar b { cursor: pointer; }

/* Map credits: just "© OpenStreetMap ⓘ" in the corner; ⓘ opens every source. */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show)::before { content: '© OpenStreetMap'; display: inline-block; font-size: 11px; line-height: 20px; padding: 0 4px 0 9px; color: #334155; }
.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show { max-height: 45vh; overflow: auto; }
/* Whose data a popup shows. */
.pop .popsrc { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pop .popsrc a { color: inherit; text-decoration: underline; }
/* Speed only (walking, cycling, on a train): a quieter speedometer. */
.speedo.justspeed .spd b { font-size: 28px; }

/* Traffic lights your drives helped time (Profile). */
.profile .lights { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--soft, #f1f5f9); font-weight: 600; font-size: 15px; }

/* Weather chip: wind direction and speed. */
#wx .wxwind { white-space: nowrap; font-weight: 700; }
#wx .wxwind i { display: inline-block; font-style: normal; font-weight: 900; color: #0284c7; }
#wx .wxdir { display: inline-flex; align-items: center; gap: 0; margin-right: 3px; vertical-align: baseline; }
#wx .wxdir b { font-size: 11px; font-weight: 800; letter-spacing: 0.2px; color: #0284c7; opacity: 0.95; line-height: 1; }
/* Compass: a red N that turns with the map. */
.maplibregl-ctrl-compass .maplibregl-ctrl-icon { position: relative; }
.maplibregl-ctrl-compass .maplibregl-ctrl-icon::after { content: 'N'; position: absolute; top: -1px; left: 0; right: 0; text-align: center; font: 800 8px/1 system-ui, sans-serif; color: #dc2626; pointer-events: none; }
/* Today card: four round tiles like a phone weather widget, then advice and the hours. */
.today .wxtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.today .wxtile { position: relative; aspect-ratio: 1; border-radius: 50%; background: #1c1c22; color: #f8fafc; }
.today .ringsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.today .ringtrack { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 7; stroke-linecap: round; }
.today .ringdot { stroke: #1c1c22; stroke-width: 2; }
.today .wxin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; text-align: center; }
.today .wxin b { font-size: clamp(18px, 6.4vw, 28px); font-weight: 800; }
.today .wxin small { font-size: 11px; font-weight: 700; opacity: 0.75; }
.today .wxdial { position: absolute; inset: 9%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); }
.today .wxarrow { position: absolute; inset: 0; font-style: normal; }
.today .wxarrow b { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #1c1c22; color: #38bdf8; font-size: 12px; line-height: 14px; text-align: center; }
.today .wxbig { font-size: clamp(20px, 7vw, 30px); }
.today .wxin b.wxsmallb { font-size: 15px; margin-top: 4px; }
.today .wxadvice { list-style: none; padding: 0; margin: 12px 0 8px; }
.today .wxadvice li { padding: 9px 2px; border-top: 1px solid var(--line, #e2e8f0); font-size: 15px; line-height: 1.35; }
.today .wxhours { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 6px; }
.today .wxhours > div { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 50px; }
/* 🌬 Air for the next three days: a word a day, coloured like the air chip. */
.today .wxair { margin: 6px 0 2px; }
.today .wxairlbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.today .wxairdays { display: flex; gap: 8px; }
.today .wxairday { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: var(--soft); border-left: 4px solid #16a34a; }
.today .wxairday small { font-size: 12px; color: var(--muted); }
.today .wxairday b { font-size: 14px; }
.today .wxairday.fair { border-left-color: #eab308; }
.today .wxairday.poor { border-left-color: #f97316; }
.today .wxairday.bad { border-left-color: #dc2626; }
.today .wxhours small { color: var(--muted); font-size: 12px; }

/* For you */
.foryou .fyhello { font-size: 20px; font-weight: 800; margin: 2px 0 8px; }
.foryou .fyrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; margin: 0 0 8px; border: 0; border-radius: 14px; background: var(--soft, #f1f5f9); color: inherit; font: inherit; cursor: pointer; }
.foryou .fyrow > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.foryou .fyrow small { color: var(--muted); font-size: 13px; }
.foryou .fyrow i { font-style: normal; color: var(--muted); font-size: 20px; }
.foryou .fyico { font-size: 22px; }
.bkrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.bkrow label { cursor: pointer; }

/* Map buttons: compass, zoom and your location, in one stack (press and hold to move it). */
.akbtns { display: flex; flex-direction: column; gap: 8px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.akbtns .maplibregl-ctrl-group { margin: 0; }
.akbtns button { width: 40px; height: 40px; display: grid; place-items: center; color: #334155; }
.akbtns button svg { width: 22px; height: 22px; display: block; }
.akbtns.moved { position: fixed; z-index: 3; margin: 0; }
.akbtns.moving { transform: scale(1.08); filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.32)); transition: transform 0.15s; }
.akbtns.moving button { pointer-events: none; }
.locbtn .locfill { opacity: 0; }
.locbtn.free .locfill, .locbtn.on .locfill { opacity: 1; }
.akbtns .locbtn.on { color: #2563eb; }
.akbtns .locbtn.denied { color: #dc2626; }
.locbtn.busy svg { animation: locpulse 1s ease-in-out infinite; }
@keyframes locpulse { 50% { opacity: 0.3; } }
:root[data-theme="dark"] .akbtns button { color: #e2e8f0; }
:root[data-theme="dark"] .akbtns .locbtn.on { color: #60a5fa; }
/* You: a blue dot, with a beam showing which way you face once Wayaroo knows. */
.youdot { position: relative; width: 22px; height: 22px; pointer-events: none; }
.youdot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: rgba(37, 99, 235, 0.16); }
.youdot.rough::after { inset: -16px; background: rgba(37, 99, 235, 0.1); }
.youdot b { position: absolute; inset: 2px; z-index: 1; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.youdot.stale b { background: #94a3b8; }
.youcone { display: none; position: absolute; left: -17px; top: -17px; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(from -32deg, rgba(37, 99, 235, 0.42) 0deg 64deg, transparent 64deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 71%); mask: radial-gradient(circle, #000 30%, transparent 71%); }
.youdot.dir .youcone { display: block; }
body.nav .youdot { display: none; }
@media (prefers-reduced-motion: reduce) { .locbtn.busy svg { animation: none; } }
.akbtns.compact .akzoom { display: none; }
/* Top rows on narrow phones: the points chip never gets cut; the status pill gives way first. */
.top .row .playchip { flex: none; }
.top .row .status { flex: 0 1 auto; }
@media (max-width: 410px) { #wx .wxword { display: none; } }
/* Chips scroll edge to edge, with room for their shadows (a clipped shadow showed as a grey box)
   and a soft fade on whichever side has more chips. */
.top > .chips { margin: 0 -12px -10px; padding: 2px 12px 12px; max-width: 584px; scroll-padding: 0 12px; }
.chips .chip { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--hair); }
.chips .chip.on { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--gold-soft), inset 0 -2px 0 var(--gold); }
.chips.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.chips.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.chips.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 40px), transparent); }
/* Welcome tour: one card at a time in the sheet, the live map above it. */
.tour { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.trhero { --tint: #0f766e; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: color-mix(in srgb, var(--tint) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent); animation: trpop 0.35s var(--ease, ease); }
@keyframes trpop { from { transform: scale(0.85); opacity: 0; } }
.trtext { margin: 0; font-size: 16px; line-height: 1.4; }
.trtext b { display: block; margin-top: 6px; font-weight: 700; color: var(--brand, #0f766e); }
.trticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.trticks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.35; }
.trticks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--brand, #0f766e); }
.trlangs { margin-top: -2px; }
.trkeep { margin: 2px 0 0; }
.trdots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.trdots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--hair, #cbd5e1); cursor: pointer; transition: width 0.2s, background 0.2s; }
.trdots button.on { width: 22px; background: var(--brand, #0f766e); }
.trnav { display: flex; gap: 8px; }
.trnav button { flex: 1; margin: 0; }
.trnav .primary { flex: 1.4; }
.trskip { align-self: center; }
.trpriv { margin: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .trhero { animation: none; } }
/* "To … ✕": a planned route on the map, with a way to clear it. */
.routechip { padding: 0 !important; gap: 0 !important; overflow: hidden; }
.routechip button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 8px 6px 8px 13px; white-space: nowrap; }
.routechip .rx { padding: 8px 12px 8px 8px; color: var(--muted); font-weight: 800; }
.trlabel { margin: 2px 0 -4px; }
/* Map buttons, bigger: compass and location share one capsule (48 px each, easy to hit with a
   thumb); + and − only where there's a mouse (phones pinch). The map credits moved bottom left. */
.akbtns .akmain button { width: 48px; height: 48px; }
.akbtns .akmain .akcompass svg { width: 34px; height: 34px; }
.akbtns .akmain .locbtn svg { width: 26px; height: 26px; }
.akbtns .akmain { border-radius: 14px; overflow: hidden; }
.akbtns .akmain button + button { border-top: 1px solid var(--hair, rgba(0, 0, 0, 0.1)); }
/* The compass only while the map is turned (north-up it's hidden, like Google and Apple Maps). */
.akbtns .akmain .akcompass.flat { display: none; }
.akbtns .akmain .akcompass.flat + button { border-top: 0; }
@media (pointer: coarse) { .akbtns .akzoom { display: none; } }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact { margin: 0 0 10px 10px; }
/* …and stay clear of the speedometer and the "Recording drive" pill when they show. */
body.has-drive .maplibregl-ctrl-bottom-left { bottom: calc(var(--dock-h) + var(--safe-b) + 66px); }
body.has-speedo .maplibregl-ctrl-bottom-left { bottom: calc(var(--dock-h) + var(--safe-b) + 20px + var(--speedo-h, 72px)); }
body.has-speedo.has-drive .maplibregl-ctrl-bottom-left { bottom: calc(var(--dock-h) + var(--safe-b) + max(20px + var(--speedo-h, 72px), 144px)); }
body.nav .maplibregl-ctrl-bottom-left { bottom: calc(var(--safe-b) + var(--navb, 96px) + 16px); }
/* Bottom left, the ⓘ is on the left: put the text after it. */
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show)::before { padding: 0 9px 0 26px; }

/* Layers sheet: map type pictures and big layer tiles (Wayaroo's own look). */
.layers h3:first-of-type { margin-top: 4px; }
.maptypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 10px; }
.mtype { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mtpic { width: 100%; aspect-ratio: 1.35; border-radius: 14px; border: 2px solid var(--line); display: block; box-sizing: border-box; }
.mtype.on .mtpic { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.mtype.on { color: var(--brand); }
.mt-map { background: linear-gradient(135deg, transparent 46%, #fbbf24 46% 52%, transparent 52%), linear-gradient(45deg, transparent 60%, #ffffff 60% 66%, transparent 66%), linear-gradient(160deg, #bfdbfe 0 28%, #dcfce7 28% 70%, #f1f5f9 70%); }
.mt-sat { background: linear-gradient(135deg, transparent 47%, #d6d3d1 47% 51%, transparent 51%), radial-gradient(circle at 30% 30%, #4d7c0f 0 18%, transparent 19%), radial-gradient(circle at 75% 70%, #3f6212 0 22%, transparent 23%), linear-gradient(160deg, #1e3a5f 0 24%, #57534e 24% 60%, #44403c 60%); }
.mt-nasa { background: radial-gradient(ellipse at 30% 35%, rgba(255,255,255,.9) 0 12%, transparent 30%), radial-gradient(ellipse at 72% 65%, rgba(255,255,255,.75) 0 10%, transparent 26%), linear-gradient(160deg, #1d4ed8 0 35%, #a16207 35% 55%, #15803d 55%); }
.viewseg { margin-bottom: 4px; }
.ltiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; margin: 6px 0 12px; }
.ltile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; cursor: pointer; }
.ltpic { width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 16px; background: var(--soft); border: 2px solid transparent; display: grid; place-items: center; box-sizing: border-box; transition: background .15s, border-color .15s; }
.ltico { width: 34px; height: 34px; background: center / contain no-repeat; display: block; }
.ltile.on .ltpic { background: color-mix(in srgb, var(--c) 16%, var(--card)); border-color: var(--c); }
.ltname { font-size: 13px; line-height: 1.25; text-align: center; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ltile.on .ltname { color: var(--ink); }
@media (max-width: 340px) { .ltiles { grid-template-columns: repeat(3, 1fr); } }

/* Show-the-driver card: big English text on a plain card, readable at arm's length. */
.drvcard { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
.drvin { background: #fff; color: #0f172a; border-radius: 22px; padding: 28px 22px; width: min(560px, 100%); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.drvask { font-size: 22px; margin: 0 0 10px; }
.drvstop { font-size: clamp(30px, 9vw, 52px); font-weight: 800; line-height: 1.1; margin: 0 0 12px; color: #0f766e; word-break: break-word; }
.drvline { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.drvthanks { font-size: 20px; margin: 0; }
.drvnote { color: #e2e8f0; text-align: center; max-width: 520px; margin: 0; }
.ridepill .rdrv { margin-left: 4px; }
.vstops .usual { display: block; color: var(--muted); font-size: 12px; grid-column: 1 / -1; }
.ptsteps .pchange { color: var(--muted); font-size: 13px; }
.ptsteps .pchange.tight { color: #b45309; font-weight: 600; }
.prepl { background: #fde68a; color: #713f12; border-radius: 6px; padding: 0 6px; font-size: 12px; font-weight: 700; }
.navbottom .navshare { margin: 0; width: 100%; order: 4; }
/* Arrival, minutes and distance with End beside them; Share my trip underneath (no lonely End button). */
.navbottom .navstats { order: 1; }
.navbottom .navend { order: 2; }
.navbottom .navrec { order: 3; }
.fyrow .fycycle { color: #0f766e; font-weight: 600; }
.foryou .fyradius { display: flex; gap: 6px; margin: -2px 0 10px; flex-wrap: wrap; }
.foryou .fyrow.static { cursor: default; }
/* People's road reports on For you: what, from whom and when, and Still there / Gone right there. */
/* A festival greeting on the day, under the hello. */
.foryou .fyfest { margin: -6px 0 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff7ed, #fde68a); color: #7c2d12; font-weight: 600; line-height: 1.4; }
:root[data-theme="dark"] .foryou .fyfest { background: linear-gradient(135deg, #3b1d0a, #713f12); color: #fde68a; }
/* Pollen: the thunderstorm asthma risk words in the Department of Health's colours. */
.foryou .fyasthma { display: block; margin-top: 8px; color: var(--ink); }
.foryou .fyasthma .lvl-low { color: #15803d; }
.foryou .fyasthma .lvl-moderate { color: #c2410c; }
.foryou .fyasthma .lvl-high { color: #b91c1c; }
.foryou .fyasthma .lvl-none { color: var(--muted); font-weight: 500; }
.foryou .fyrow .exrow small { margin-right: 4px; }
.foryou .fyrep { padding: 10px 12px; margin: 0 0 8px; border-radius: 14px; background: var(--soft, #f1f5f9); }
.foryou .fyrep > b { display: block; }
.foryou .fyrep .prov { margin-top: 2px; }
.foryou .fyrep .vote { margin-top: 8px; }
.foryou .fyrep .vote button { background: var(--card); border-color: var(--line); }
.foryou .fyrep .rflag { margin-top: 4px; }
.foryou [data-near] + .prov { margin: -4px 0 8px 12px; }
.foryou .fyrow .fyworth { color: #0f766e; }
.foryou .fystop { border-left: 4px solid var(--c); }
.foryou .fyrow b small { font-weight: 500; color: var(--muted); }

/* Other routes for the chosen way of going (like the grey lines in other map apps). */
.ropts { display: grid; gap: 6px; margin: -2px 0 4px; }
.ropt { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; text-align: left; padding: 9px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.ropt small { grid-column: 1 / -1; color: var(--muted); }
.ropt.on { border-color: #0f766e; box-shadow: inset 0 0 0 1px #0f766e; }
.ropt .rtag { justify-self: start; font-size: 13px; font-weight: 700; color: #0f766e; }
.ropt .rmore { justify-self: start; font-size: 13px; color: var(--muted); }
.ropt .rtags { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; justify-self: start; }
.ropt .rtag.shady { color: #15803d; }
/* ✨ Best way right now: the pick among the ways below, with its reasons (bestway.js) */
.bestway { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(13, 148, 136, 0.13), rgba(56, 189, 248, 0.13)); box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.3); }
.bestway.on { box-shadow: inset 0 0 0 2px var(--brand); }
.bestway.wait { padding: 6px 14px; background: none; box-shadow: none; }
.bestway .bwhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.bestway .bwspark { font-size: 17px; }
.bestway .bwpick { margin-left: auto; font-weight: 700; color: var(--brand); white-space: nowrap; }
.bestway .bwwhy { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.4; display: grid; gap: 2px; }
.bestway .bwrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bestway .bwrow .prov { margin-top: 0; }
.bestway .bwon { font-weight: 700; color: var(--brand); }
[dir="rtl"] .bestway .bwpick { margin-left: 0; margin-right: auto; }
[dir="rtl"] .bestway .bwwhy { padding: 0 18px 0 0; }
/* Public transport choices: fastest / fewest changes / least walking, and coloured line badges */
.ptprefs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.ppref { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; cursor: pointer; touch-action: manipulation; }
.ppref.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.lbadge { display: inline-block; padding: 1px 7px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; text-shadow: 0 0 2px rgba(0,0,0,.35); }
.lsep { margin: 0 3px; color: var(--muted); }
.ropt .lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 0; color: inherit; }

/* Trip sheet and top rows, after testing on the road in Sydney (5 Nov 2026). */
.sheet-head { z-index: 2; } /* the × in a search box scrolls under the title, not over it */
.chip { background: var(--glass-strong); } /* crowded map pins mustn't show through the chips */
@media (max-width: 899px) {
  /* The speedometer sits where the sheet is: it waits unless you're over the limit. */
  body:has(#sheet:not([hidden]):not(.picking)) .speedo:not(.over) { display: none; }
}
.ptstatus { font-weight: 600; }
.ptok { color: #15803d; }
.ptlate { color: #b45309; }
.ptvia summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.ptstop { display: flex; gap: 8px; padding: 2px 0 2px 14px; font-size: 13px; color: var(--muted); }
.ptstop time { flex: none; min-width: 58px; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptok { color: #4ade80; } :root:not([data-theme="light"]) .ptlate { color: #fbbf24; } }
:root[data-theme="dark"] .ptok { color: #4ade80; }
:root[data-theme="dark"] .ptlate { color: #fbbf24; }
.ptfresh .mode, .ptfresh .ptsteps li { animation: none; }

/* ===================================================================================
   Wayaroo look, Nov 2026: one set of sizes, shapes and colours for the whole app.
   Calm and clear first; a little "space-age" glow for the things you tap.
   - Controls: 44 px tall (Apple's minimum tap size), chips 40 px.
   - Corners: 12 px for buttons, 16 px for cards and popups, 24 px for sheets, round for chips.
   - Type: system font; 12 / 13.5 / 15 / 17 / 22 px; numbers line up (tabular).
   - One accent: teal-cyan. Gold is gone (it read as "old").
   =================================================================================== */
:root {
  --accent: #0d9488;
  --accent-2: #06b6d4;
  --accent-soft: rgba(13, 148, 136, 0.12);
  --accent-glow: 0 0 0 1px rgba(13, 148, 136, 0.35), 0 6px 18px -6px rgba(6, 182, 212, 0.45);
  --r-ctl: 12px;
  --r-card: 16px;
  --h-ctl: 44px;
  --h-chip: 40px;
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
}
:root[data-theme="dark"] {
  --accent: #2dd4bf;
  --accent-2: #22d3ee;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-glow: 0 0 0 1px rgba(45, 212, 191, 0.45), 0 0 22px -4px rgba(34, 211, 238, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #2dd4bf;
    --accent-2: #22d3ee;
    --accent-soft: rgba(45, 212, 191, 0.14);
    --accent-glow: 0 0 0 1px rgba(45, 212, 191, 0.45), 0 0 22px -4px rgba(34, 211, 238, 0.5);
  }
}
html, body { font-feature-settings: "tnum" 1, "cv11" 1; }
time, .nb-price, .chip .n, .speedo, .navnum, .ropt b, .mode b { font-variant-numeric: tabular-nums; }

/* Top bar: search, then one row of pills and chips, all the same height. */
.searchbar { min-height: 52px; border-radius: 18px; }
.searchbar input { font-size: 17px; }
.pill, .chip { min-height: var(--h-chip); font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border-radius: 999px; font-weight: 600; }
.chip { padding: 0 14px; font-weight: 600; color: var(--ink); }
.chip:not(.on) { color: var(--muted); }
.chip.on { box-shadow: var(--shadow), var(--accent-glow); color: var(--ink); }
.chip .n { font-size: 13px; }
.chip i.ico { width: 20px; height: 20px; border-radius: 6px; }
.hint { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair); }

/* Buttons: one height, one corner, three kinds. */
.primary, .secondary, .ghost { min-height: var(--h-ctl); border-radius: var(--r-ctl); font-weight: 650; font-weight: 600; font-size: 15px; }
.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: var(--accent-glow); }
:root[data-theme="dark"] .primary { color: #04201d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .primary { color: #04201d; } }
.ghost { background: var(--soft); border: 1px solid var(--hair); }
.ghost.small, .secondary.small, .primary.small { min-height: 36px; font-size: 15px; border-radius: 10px; padding: 0 12px; }
.linkbtn { font-weight: 600; color: var(--accent); }

/* Bottom bar: the tab you're on is lit, with a short glowing line. */
.dock button.on { color: var(--accent); }
.dock button.on::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-2); width: 26px; }

/* Map buttons (compass, zoom, locate): one rounded glass column. */
.maplibregl-ctrl-group { border-radius: var(--r-card) !important; overflow: hidden; background: var(--glass-strong) !important; box-shadow: var(--shadow), inset 0 0 0 1px var(--hair) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.maplibregl-ctrl-group button { width: var(--h-ctl); height: var(--h-ctl); }

/* Popups on the map: a title, short facts, and the actions as small pill buttons. */
.maplibregl-popup-content { border-radius: var(--r-card); padding: 14px 16px; }
.pop { gap: 4px; max-width: 280px; }
.pop > b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 2px; }
.pop span { font-size: 13px; line-height: 1.4; }
.pop-link { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pop-link a, .pop-link button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; border: 0; }

/* Sheets: one title size, section labels, cards with the same corner. */
.sheet-head h2 { font-size: 22px; letter-spacing: -0.025em; }
.sheet h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.mode { border-radius: var(--r-card); background: var(--soft); box-shadow: inset 0 0 0 1px var(--hair); }
button.mode.on { border-color: transparent; box-shadow: var(--accent-glow); }
.mode b { font-size: 22px; letter-spacing: -0.02em; }
.ropt { border-radius: 14px; background: var(--soft); border-color: var(--hair); }
.ropt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px -6px var(--accent-2); }
.ropt .rtag { color: var(--accent); }
.ppref.on { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .ppref.on { color: #04201d; }
input[type="search"], input[type="text"], input[type="number"], select { min-height: var(--h-ctl); border-radius: var(--r-ctl); }
.toast { border-radius: 16px; font-weight: 500; }
.toast, .hint, .pill, .chip, .searchbar { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { .chip.on, button.mode.on, .primary { box-shadow: var(--shadow); } }

/* Public transport trip guide (ptguide.js): a panel at the bottom while you wait and ride, like a
   map app's. Drag it down to one line (the map is free, the trip keeps going), up for every step. */
.ptguide { position: fixed; left: 0; right: 0; bottom: calc(var(--dock-h) + var(--safe-b)); z-index: 5; max-height: 46vh; overflow: auto; overscroll-behavior: contain; padding: 0 16px 14px; border-radius: 22px 22px 0 0; background: var(--card); color: var(--ink); box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.22), 0 -1px 0 var(--hair); transition: max-height 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ptguide[hidden] { display: none; }
.ptguide.dragging { transition: none; user-select: none; }
.ptguide .pghead { padding: 24px 0 6px; align-items: flex-start; gap: 10px; touch-action: none; cursor: grab; }
.ptguide .pgsum { flex: 1; min-width: 0; }
.ptguide .pgend { flex: none; margin: 2px 0 0; background: #ef444422; color: #b91c1c; border-color: transparent; font-weight: 650; }
:root[data-theme="dark"] .ptguide .pgend { color: #fca5a5; }
.ptguide .pgline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptguide .pgline b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ptguide .pgline small { color: var(--muted); font-size: 13px; }
.ptguide .pgmain { font-size: 17px; font-weight: 650; margin-top: 6px; line-height: 1.3; }
.ptguide .pgsub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.ptguide .pgbtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* One line: the line, what's next, End. Tap or drag up to open. */
.ptguide.min { max-height: 76px; overflow: hidden; }
.ptguide.min .pghead { padding: 20px 0 8px; align-items: center; cursor: pointer; }
.ptguide.min .pgbody, .ptguide.min .pgline small { display: none; }
.ptguide.min .pgsum { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.ptguide.min .pgline { flex-wrap: nowrap; flex: none; }
.ptguide.min .pgline b { font-size: 16px; }
.ptguide.min .pgmain { margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
/* Tall: every step of the trip */
.ptguide.full { max-height: calc(100vh - var(--safe-t, 0px) - var(--dock-h) - var(--safe-b) - 90px); }
.ptguide .pgsteps { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.ptguide .pgsteps h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ptguide .pgsteps ol { list-style: none; margin: 0; padding: 0; }
.ptguide .pgsteps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-left: 3px solid var(--line); padding-left: 10px; margin-left: 4px; }
.ptguide .pgsteps li.now { border-left-color: var(--accent, #14b8a6); }
.ptguide .pgsteps li.done { opacity: 0.5; }
.ptguide .pgsteps li b { display: block; font-size: 15px; font-weight: 600; }
.ptguide .pgsteps li small { color: var(--muted); font-size: 13px; }
.ptguide .pgicon { width: 26px; text-align: center; }
/* While a sheet is open the panel steps aside (the trip carries on); the map buttons sit above it. */
body.sheet-up .ptguide { display: none; }
body.ptg:not(.sheet-up):not(.nav) .maplibregl-ctrl-bottom-right, body.ptg:not(.sheet-up):not(.nav) .maplibregl-ctrl-bottom-left { bottom: calc(var(--dock-h) + var(--safe-b) + var(--pg-h, 0px)); }
@media (min-width: 900px) { .ptguide { left: 12px; right: auto; width: 400px; bottom: calc(var(--dock-h) + var(--safe-b) + 12px); border-radius: 22px; } }
body.nav .ptguide { display: none; }
/* Ride card: the opt-in to help other riders see the bus */
.ptguide .pgshare { margin-top: 8px; font-size: 13px; opacity: 0.85; }
.ptguide .linkish { background: none; border: 0; padding: 0; color: var(--accent, #2dd4bf); font: inherit; text-decoration: underline; cursor: pointer; }
/* Showing one searched line only ("333 only ✕") */
.linefocus { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 150px); z-index: 40; border: 1px solid rgba(45, 212, 191, 0.5); background: rgba(8, 16, 32, 0.92); color: #e2fdf8; border-radius: 999px; padding: 10px 18px; font: 600 15px/1 inherit; box-shadow: 0 0 18px rgba(45, 212, 191, 0.25); cursor: pointer; }
.linefocus[hidden] { display: none; }
/* More → Permissions */
.setrow.perm span small { display: block; margin-top: 2px; font-size: 13px; }
/* The main search's results sit above an open sheet (Plan a trip), not behind it. */
.top:focus-within, .top:has(#results:not([hidden])) { z-index: 7; }
/* While a trip guide is showing, the "zoom in to see…" hint stays out of the way. */
body.ptg #hint { display: none !important; }
/* Zoom level, for a moment while zooming */
.zoomread { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 74px); z-index: 30; padding: 6px 12px; border-radius: 999px; background: rgba(8, 16, 32, 0.82); color: #e2fdf8; font: 600 13px/1.2 inherit; pointer-events: none; white-space: nowrap; }
.zoomread[hidden] { display: none; }
/* Share panel (when the phone has no share sheet) and a place's Call / Share row */
.sharepanel { position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 80; padding: 14px; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.sharepanel p { margin: 6px 0 10px; font-size: 13px; color: var(--muted); word-break: break-word; }
.sharepanel .shbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.sharepanel .shbtns a { text-decoration: none; }
.pop .pop-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pop .pop-acts a { text-decoration: none; }
/* Navigation: the re-centre button keeps its place (so the buttons below never jump under your
   finger); while the map already follows you it's dimmed. */
.navbtn.nRecenter.following { display: none; } /* only when you've moved the map away (a faded arrow looked like a second "you") */
/* Report: big picture tiles (group, then kind) */
.rtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 8px 0 12px; }
.rtiles.sub { padding-top: 10px; border-top: 1px solid var(--line, rgba(255,255,255,0.08)); }
.rtile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 2px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; border-radius: 14px; }
.rtile img { width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: var(--soft); box-sizing: border-box; border: 2px solid transparent; }
.rtile.on img { border-color: var(--accent, #2dd4bf); background: color-mix(in srgb, var(--accent, #2dd4bf) 16%, var(--card)); }

/* Where a fact comes from and how old it is (provenance.js) */
.prov { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--muted, #64748b); line-height: 1.3; }
.prov i { font-style: normal; display: inline-grid; place-items: center; min-width: 15px; height: 15px; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 0 3px; }
.prov-official i { background: #16a34a; color: #fff; }
.prov-people i { background: #e0e7ff; }
.prov-estimate i { background: #f59e0b; color: #fff; font-size: 12px; }
.prov-reference i { background: #e2e8f0; }

/* Place profile (place.js) */
.placeprof { display: grid; gap: 12px; }
.placeprof .pphead { display: grid; gap: 3px; }
.placeprof .pphead b { font-size: 20px; }
.placeprof section h3 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #64748b); }
.placeprof section p { margin: 4px 0; }
.placeprof .ppacts { display: flex; flex-wrap: wrap; gap: 8px; }
.placeprof .pplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.placeprof .pplist li { display: grid; gap: 1px; }
.placeprof .ppfix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.placeprof .ppfix p { flex-basis: 100%; margin: 0; }
.placeprof .yes { color: #16a34a; }
.placeprof .no { color: #dc2626; }

/* Steps this week (Profile) */
.profile .steps { margin: 6px 0 10px; }
.profile .stbig { font-size: 22px; }
.profile .stbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 70px; align-items: end; }
.profile .stbars span { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.profile .stbars i { align-self: end; display: block; min-height: 3px; border-radius: 4px 4px 0 0; background: #0d9488; }
.profile .stbars span:last-child i { background: #14b8a6; }
.profile .stbars small { font-size: 11px; color: var(--muted, #64748b); }

/* Ask (ask.js): a raised round button in the middle of the dock */
.dock .askorb { position: relative; }
.dock .askorb i { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -22px; border-radius: 50%; background: conic-gradient(from 210deg, #0d9488, #14b8a6, #38bdf8, #0d9488); box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45), 0 0 0 4px var(--bg, #0f172a); color: #fff; }
.dock .askorb i svg { width: 26px; height: 26px; fill: #fff; }
.dock .askorb.on { background: transparent; }
.dock .askorb.on i { box-shadow: 0 0 0 4px var(--bg, #0f172a), 0 0 0 7px rgba(20, 184, 166, 0.55); }
.ask .askbox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ask .askbox textarea { width: 100%; box-sizing: border-box; min-height: 92px; resize: none; font: inherit; font-size: 17px; line-height: 1.4; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,0.06)); color: inherit; }
.ask .askbox textarea:focus { outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25); }
.ask .askbar { display: flex; gap: 10px; }
.ask .askbar .askmic { flex: 1 1 0; width: auto; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 17px; }
.ask .askbar .askmic .mi { display: grid; place-items: center; }
.ask .askbar .askmic b { font-weight: 600; }
.ask .asksend { flex: 1 1 0; height: 50px; border: 0; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 600; color: #04221f; background: #5eead4; cursor: pointer; }
.ask .asksend:active { transform: scale(0.97); }
.ask .askbox input { flex: 1; min-width: 0; font-size: 17px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,0.06)); color: inherit; }
.ask .askmic { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(135deg, #0d9488, #38bdf8); color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(13, 148, 136, 0.35); transition: transform 0.15s; }
.ask .askmic svg { width: 22px; height: 22px; }
.ask .askmic:active { transform: scale(0.94); }
.ask .askmic.listening { background: #dc2626; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); animation: mic-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ask .askmic.listening { animation: none; } }
.ask .aians { font-size: 16px; line-height: 1.45; margin: 4px 0 6px; }
.ask .aithink { animation: aithink 1.2s ease-in-out infinite; }
@keyframes aithink { 50% { opacity: 0.45; } }
.ask .aiset { margin: 0 0 12px; }

.ask .asktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.ask .asktile { display: flex; align-items: center; gap: 8px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,0.05)); color: inherit; font: inherit; font-weight: 600; }
.ask .asktile span { font-size: 20px; }

/* Screen layouts: Simple hides the extra rows; Explorer keeps the zoom shown and chips wrapping */
body.lay-simple .top .row, body.lay-simple .top .chips { display: none; }
body.lay-simple .dock span { font-size: 13px; }
/* Explorer: two rows of chips that slide sideways together (one row when the screen is short, e.g. landscape), so they never cover the map. */
/* Explorer: one row of chips that slides sideways, like Apple Maps (9 Nov 2026: two rows covered the map). */
body.lay-explorer .top .chips .chipsep { display: none; }

.placeprof .pphist { margin: 0 0 4px; line-height: 1.45; }
.ask .askarea { margin: 6px 0 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,0.04)); }
.ask .askarea h3 { margin: 0 0 8px; }
.ask .askans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ask .askans li { line-height: 1.4; }
/* Start beside 👁 Preview, and the weather where you're going when you get there. */
.gorow { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; }
.gorow .navgo { flex: 1; margin: 0; min-width: 0; }
.gorow #tPreview { white-space: nowrap; padding: 12px 14px; }
.arrivewx { margin: 8px 2px 0; font-size: 15px; color: var(--muted); }
.pop .vbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* Move: goals, splits, matched routes, replay */
.mvgoals { display: grid; gap: 8px; }
.mvgoal { display: grid; grid-template-columns: 5.5em 5em 1fr; gap: 8px; align-items: center; }
.mvgoal small { grid-column: 1 / -1; color: var(--muted); margin-top: -4px; }
.mvgoal input { padding: 6px 8px; }
.mvbar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mvbar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.mvdetail { margin-top: 6px; display: grid; gap: 6px; }
.mvroute { margin: 0; font-size: 13px; }
.mvsplits { display: flex; gap: 4px; align-items: flex-end; overflow-x: auto; padding: 4px 0; }
.mvsplits span { display: grid; grid-template-rows: auto auto 36px; justify-items: center; gap: 2px; min-width: 44px; font-size: 12px; }
.mvsplits b { font-size: 13px; }
.mvsplits i { display: block; width: 14px; align-self: end; background: var(--brand); border-radius: 3px 3px 0 0; opacity: 0.8; }
.mvdetail .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Life: the game page in a frame, in a sheet as tall as the screen allows */
.sheet.tall { max-height: calc(100vh - var(--safe-t, 0px) - var(--dock-h) - var(--safe-b) - 14px); padding-bottom: 0; }
.lifewrap { margin: 0 -16px; }
.lifeframe { display: block; width: 100%; height: calc(100vh - var(--safe-t, 0px) - var(--dock-h) - var(--safe-b) - 120px); border: 0; background: #10262b; }
@media (min-width: 900px) { .lifeframe { height: calc(100vh - 150px - var(--dock-h) - var(--safe-b) - 90px); } }
/* First screen (once, on the first open): today's gauges from the Today card and the six most useful things. */
.hello { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.hllede { margin: 0; font-size: 16px; line-height: 1.4; }
/* One line for the language (picked from the phone's own), not twenty buttons */
.hllang { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.hllang span { font-size: 17px; }
.hllang label { color: var(--muted); font-size: 13px; }
.hllang select { flex: 1; min-width: 0; font: inherit; font-weight: 650; font-size: 16px; color: var(--ink); background: transparent; border: 0; padding: 4px 0; text-align: right; text-align-last: right; -webkit-appearance: none; appearance: none; cursor: pointer; }
.hllang b { color: var(--muted); font-weight: 600; }
.hello .hlwx { display: flex; flex-direction: column; gap: 6px; }
.hello .hlwxmore { align-self: flex-start; }
.hlgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hlitem { --tint: #0f766e; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 0; border-radius: 16px; text-align: left; font: inherit; color: inherit; background: color-mix(in srgb, var(--tint) 12%, var(--card, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent); cursor: pointer; animation: fade-up 0.3s ease both; }
.hlitem:nth-child(2) { animation-delay: 0.04s; } .hlitem:nth-child(3) { animation-delay: 0.08s; } .hlitem:nth-child(4) { animation-delay: 0.12s; } .hlitem:nth-child(5) { animation-delay: 0.16s; } .hlitem:nth-child(6) { animation-delay: 0.2s; }
.hlitem:active { transform: scale(0.98); }
.hlitem .hlico { font-size: 24px; line-height: 1; }
.hlitem b { font-size: 15px; line-height: 1.2; }
.hlitem small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.hello .trnav { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .hlitem { animation: none; } }
/* ⏪ Rewind: a slider over the last 30 minutes of live vehicles, above the dock. */
.rewindbar { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 64px) + var(--safe-b, 0px) + 14px); width: min(520px, calc(100vw - 32px)); padding: 10px 14px 8px; border-radius: 16px; background: #0b4743; color: #fff; box-shadow: 0 10px 30px #0f172a40; display: grid; gap: 6px; }
.rewindbar .rwrow { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rewindbar .rwtime { flex: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.rewindbar button { margin: 0; padding: 6px 12px; border-radius: 10px; border: 1px solid #ffffff55; background: #fff; color: #0b4743; font-weight: 700; cursor: pointer; }
.rewindbar button.ghost { color: #fff; background: #ffffff14; }
.rewindbar input[type='range'] { width: 100%; margin: 0; accent-color: #5eead4; }
.rewindbar .rwhint { margin: 0; font-size: 13px; opacity: 0.8; }

/* 👤 You on the map: the character (me.js). Poses animate gently; nothing moves for reduced motion. */
button.mechar { display: block; width: 40px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 3px #0006); transition: opacity 0.3s, filter 0.3s; }
.mepose svg { display: block; overflow: visible; }
.mechar.left svg { transform: scaleX(-1); }
.mechar.stale { opacity: 0.8; } /* an old fix: a little faded, never grey (grey looked ghostly) */
body.nav .mechar { display: none; }
body.has-me .youdot b { display: none; } /* the character stands on the spot; the soft halo under its feet stays */
.mepose.v-side.k-walk .legL, .mepose.v-side.k-walk .legR { transform-origin: 20px 38px; }
.mepose.v-side.k-walk .armR, .mepose.v-side.k-run .armR { transform-origin: 20px 27px; }
.mepose .legL, .mepose .legR, .mepose .armL, .mepose .armR, .mepose .bob, .mepose .lean, .mepose .zz text { transform-box: view-box; }
.mepose.k-walk .legL { transform-origin: 17.5px 38px; animation: mswing var(--step, 0.55s) ease-in-out infinite alternate; }
.mepose.k-walk .legR { transform-origin: 22.5px 38px; animation: mswing var(--step, 0.55s) ease-in-out infinite alternate-reverse; }
.mepose.k-walk .armL { transform-origin: 13.5px 27px; animation: mswing var(--step, 0.55s) ease-in-out infinite alternate-reverse; }
.mepose.k-walk .armR { transform-origin: 26.5px 27px; animation: mswing var(--step, 0.55s) ease-in-out infinite alternate; }
.mepose.k-run .lean { transform-origin: 20px 52px; transform: rotate(9deg); }
.mepose.k-run .legL { transform-origin: 17.5px 38px; animation: mswing2 var(--step, 0.32s) ease-in-out infinite alternate; }
.mepose.k-run .legR { transform-origin: 22.5px 38px; animation: mswing2 var(--step, 0.32s) ease-in-out infinite alternate-reverse; }
.mepose.k-run .armL { transform-origin: 13.5px 27px; animation: mswing2 var(--step, 0.32s) ease-in-out infinite alternate-reverse; }
.mepose.k-run .armR { transform-origin: 26.5px 27px; animation: mswing2 var(--step, 0.32s) ease-in-out infinite alternate; }
.mepose.k-still .bob { animation: mbreathe 2.6s ease-in-out infinite; }
.mepose.k-drive .bob, .mepose.k-ride .bob { animation: mbump 0.45s ease-in-out infinite alternate; }
.mepose.k-sleep .zz text { animation: mzz 2.4s ease-in-out infinite; }
.mepose.k-sleep .zz text + text { animation-delay: 1.2s; }
@keyframes mswing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes mswing2 { from { transform: rotate(-34deg); } to { transform: rotate(34deg); } }
@keyframes mbreathe { 50% { transform: translateY(-0.8px); } }
@keyframes mbump { to { transform: translateY(-1px); } }
@keyframes mpedal { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes mzz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -5px); } }
/* Alive: blinks, a wave now and then while standing, a hop and a wave when tapped */
.mepose .eye { transform-box: fill-box; transform-origin: center; animation: mblink 5.2s infinite; }
.mepose .eye + .eye { animation-delay: 0.02s; }
.mepose .armR, .mepose .armL { transform-box: view-box; }
.mepose.k-still.v-front .armR { transform-origin: 26.5px 27px; animation: midlewave 11s ease-in-out 4s infinite; }
.mepose.hi svg { animation: mhop 0.5s ease-out; }
.mepose.hi.left svg { animation: mhopl 0.5s ease-out; }
.mepose.hi.v-front .armR { transform-origin: 26.5px 27px; animation: mwave 1s ease-in-out; }
@keyframes mblink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes midlewave { 0%, 14%, 100% { transform: rotate(0); } 3%, 9% { transform: rotate(-150deg); } 6%, 12% { transform: rotate(-120deg); } }
@keyframes mwave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-150deg); } 40%, 80% { transform: rotate(-120deg); } }
@keyframes mhop { 35% { transform: translateY(-10px); } 65% { transform: translateY(0); } 82% { transform: translateY(-3px); } }
@keyframes mhopl { 0%, 100% { transform: scaleX(-1); } 35% { transform: scaleX(-1) translateY(-10px); } 65% { transform: scaleX(-1); } 82% { transform: scaleX(-1) translateY(-3px); } }
/* The compass cone and halo would sit on the character's body: it faces your way itself, so they go. */
body.has-me .youdot .youcone, body.has-me .youdot::after { display: none; }
@media (prefers-reduced-motion: reduce) { .mepose * { animation: none !important; } .mepose.hi svg { animation: none !important; } }
.me .meposes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.me figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 14px; background: var(--soft); }
.me figcaption { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; }
.me .swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.me .sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--c); box-shadow: 0 0 0 1px #0002; cursor: pointer; padding: 0; margin: 0; }
.me .sw.on { border-color: var(--brand); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #0002; }
.me .meextras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.me { min-width: 0; overflow-wrap: anywhere; }
.me .mepaste { min-width: 0; }
.me .mex { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 86px; margin: 0; padding: 6px 4px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); cursor: pointer; }
.me .mex svg { width: 36px; height: 50px; }
.me .mex small { font-size: 12px; line-height: 1.2; text-align: center; }
.me .mex.on { border-color: var(--brand); }
.me .mex.locked { cursor: default; background: var(--soft); }
.me .mex.locked svg { opacity: 0.6; } /* in colour, just softer: still to earn */
.me .meface { display: flex; align-items: center; gap: 10px; }
.me .mefacepic { width: 56px; height: 56px; object-fit: contain; flex: none; }
.me .mepaste { flex: 1; min-height: 56px; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 14px; font-size: 15px; color: var(--ink); -webkit-user-select: text; user-select: text; outline: none; }
.me .mepaste:empty::before { content: attr(data-ph); color: var(--muted); }
.me .mepaste:focus { border-color: var(--brand); }
.me .mefacebtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.me .mefile { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mewarn { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--soft); display: grid; gap: 8px; }
.mewarn p { margin: 0; }

/* The sheet's grab bar (sheetdrag.js): a real handle now, not a picture of one. */
.sheet::before { display: none; }
.sheet.draggable .sheet-head { padding-top: 24px; touch-action: none; }
.sheetgrab { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; margin: 0; padding: 0; border: 0; background: none; cursor: grab; display: flex; align-items: center; justify-content: center; touch-action: none; }
.sheetgrab i { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--line); transition: background 0.2s, width 0.2s; }
.sheetgrab:hover i, .sheet.dragging .sheetgrab i { background: var(--muted); width: 48px; }
.sheet { transition: max-height 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); }
.sheet { overflow-x: hidden; } /* nothing inside a sheet can push it sideways */
.sheet.dragging { transition: none; animation: none; user-select: none; }
.sheet.full { max-height: calc(100vh - var(--safe-t, 0px) - var(--dock-h) - var(--safe-b) - 70px); }
.sheet.min { max-height: 84px; overflow: hidden; }
.sheet.min #sheetBody { visibility: hidden; }
.sheet.min .sheet-head { cursor: pointer; }
@media (min-width: 900px) { .sheetgrab { display: none; } .sheet.draggable .sheet-head { padding-top: 14px; } }

/* Your own AI: ask in ChatGPT, Claude, Gemini, Grok or DeepSeek, or connect a key (ask.js). */
.byoset { display: grid; gap: 8px; margin-bottom: 10px; }
.byoform { display: flex; gap: 8px; }
.byoform input { flex: 1; min-width: 0; }
.byoon { margin: 0; font-weight: 600; }
.byomsg { margin: 0; }

/* Type (7 Nov 2026, Rajbir: fonts looked old, some too big, some too small): one scale from iOS text sizes
   (11, 12, 13, 15, 17, 20, 22, 28, 34), San Francisco on iPhone, tighter tracking on big headings. */
h1, h2, .sheet-head h2 { letter-spacing: -0.02em; }

/* Compact pickers (picker.js): the chosen value and ⇕, the phone's own menu underneath. */
.seg.picked > button { display: none; }
.seg.picked { flex-wrap: nowrap; }
.pick { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 10px; background: var(--soft); color: var(--ink); font-weight: 600; cursor: pointer; max-width: 100%; }
.pick .pkval { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .pkchev { color: var(--muted); font-size: 13px; }
.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ptwhen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.ptwhen input[type="time"] { font: inherit; font-size: 16px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card, transparent); color: inherit; }
.onhelp { margin: 10px 0 2px; display: grid; gap: 6px; }
.onhelp a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--soft); }
.onhelp a b { color: var(--brand); }
.trhi { font-size: 17px; font-weight: 700; margin: 4px 0 2px; }

/* The walk, closer to real (7 Nov 2026): knees bend as each foot swings through, the body rises and falls once a step,
   the shadow squashes as the foot lands, all in time with your real pace (--step, set by me.js). */
.mepose .shin { transform-box: view-box; }
.mepose.k-walk.v-front .legL .shin, .mepose.k-walk.v-back .legL .shin { transform-origin: 16.8px 45px; animation: mknee var(--step, 0.55s) ease-in-out infinite alternate-reverse; }
.mepose.k-walk.v-front .legR .shin, .mepose.k-walk.v-back .legR .shin { transform-origin: 23.2px 45px; animation: mknee var(--step, 0.55s) ease-in-out infinite alternate; }
.mepose.k-run.v-front .legL .shin, .mepose.k-run.v-back .legL .shin { transform-origin: 16.8px 45px; animation: mknee2 var(--step, 0.32s) ease-in-out infinite alternate-reverse; }
.mepose.k-run.v-front .legR .shin, .mepose.k-run.v-back .legR .shin { transform-origin: 23.2px 45px; animation: mknee2 var(--step, 0.32s) ease-in-out infinite alternate; }
.mepose.k-walk.v-side .legL .shin, .mepose.k-run.v-side .legL .shin { transform-origin: 19.5px 45px; animation: mknees var(--step, 0.55s) ease-in-out infinite alternate-reverse; }
.mepose.k-walk.v-side .legR .shin, .mepose.k-run.v-side .legR .shin { transform-origin: 20.5px 45px; animation: mknees var(--step, 0.55s) ease-in-out infinite alternate; }
.mepose.k-walk .bob { transform-origin: 20px 52px; animation: mstep calc(var(--step, 0.55s) / 2) ease-in-out infinite alternate; }
.mepose.k-walk svg > ellipse:first-child, .mepose.k-run svg > ellipse:first-child { transform-box: view-box; transform-origin: 20px 53.5px; animation: mshadow calc(var(--step, 0.55s) / 2) ease-in-out infinite alternate; }
@keyframes mknee { from { transform: scaleY(1); } to { transform: scaleY(0.78); } }
@keyframes mknee2 { from { transform: scaleY(1); } to { transform: scaleY(0.66); } }
@keyframes mknees { from { transform: rotate(0deg); } to { transform: rotate(28deg); } }
@keyframes mstep { from { transform: translateY(0); } to { transform: translateY(-1.3px); } }
@keyframes mshadow { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.86); opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .mepose .shin, .mepose.k-walk .bob, .mepose svg > ellipse:first-child { animation: none; } }

/* Turning round (me.js): the same pose facing a new way squashes and opens, like a person turning on the spot. */
.mepose.turn svg { transform-origin: 20px 54px; animation: mturn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mepose.turn.left svg { animation-name: mturnl; }
@keyframes mturn { from { transform: scaleX(0.12); } to { transform: scaleX(1); } }
@keyframes mturnl { from { transform: scaleX(-0.12); } to { transform: scaleX(-1); } }
@media (prefers-reduced-motion: reduce) { .mepose.turn svg { animation: none; } }

/* Route preferences (trips.js, ptprefs.js) */
.ptprefsrow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0 8px; }
.ptprefsrow .pavoiding { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pavx { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,0.06)); color: inherit; font: inherit; font-size: 13px; }
.pavoid { display: inline-block; margin: 4px 8px 2px 0; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line); background: none; color: var(--muted, #94a3b8); font: inherit; font-size: 12px; }

/* Space (space.js): the button on the zoomed-out globe, and the view itself */
.spacebtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); z-index: 30; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.88); color: #e2e8f0; font: 600 15px system-ui, -apple-system, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.spacebtn[hidden] { display: none; }
/* An open sheet is on top: the globe's buttons and the aurora pill wait behind it (Rajbir, 8 Nov 2026: Leave Earth floated over Ask). */
#sheet:not([hidden]) ~ .spacebtn, #sheet:not([hidden]) ~ .divebtn { display: none; }
.space { position: fixed; inset: 0; z-index: 1000; background: #01030a; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
.space .spcv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.space .sptop { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; }
.space .spback, .space .sptime { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.85); color: #e2e8f0; font: 600 15px system-ui, -apple-system, sans-serif; cursor: pointer; }
.space .spscene { font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.space .spbottom { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; }
.space .sptime[hidden] { display: none; }
.space .spdate { font-size: 13px; color: #94a3b8; }
.space .sphint { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 16px; right: 16px; margin: 0; text-align: center; font-size: 13px; color: #cbd5e1; text-shadow: 0 1px 3px #000; transition: opacity 1s; pointer-events: none; }
.space .sphint.gone { opacity: 0; }
.space .spcard { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); display: flex; flex-direction: column; gap: 4px; padding: 14px 44px 14px 16px; border-radius: 18px; background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.space .spcard[hidden] { display: none; }
.space .spcard b { font-size: 17px; }
.space .spcard span { font-size: 15px; color: #cbd5e1; }
.space .spx { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(148, 163, 184, 0.18); color: #e2e8f0; font-size: 15px; cursor: pointer; }

/* Warn me about my usual trip (usualtrip.js) */
.utwarn { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; background: #7c2d12; color: #fff7ed; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 15px; }
.utwarn .utt { flex: 1; }
.utwarn .utgo { padding: 8px 12px; border-radius: 999px; border: 0; background: #fff7ed; color: #7c2d12; font: inherit; font-weight: 600; white-space: nowrap; }
.utwarn .utx { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.15); color: inherit; }
.pavoid.plike { border-style: solid; color: #5eead4; border-color: rgba(94, 234, 212, 0.45); }
.rtag.mine { color: #5eead4; }

/* Which carriage to board (vehicles.js carStrip): on a train's card and in a planned trip's train step */
.vdetail .cars, .ptcars .cars { margin: 8px 0 10px; }
.vdetail .carrow, .ptcars .carrow { display: flex; gap: 3px; align-items: center; margin: 4px 0; }
.vdetail .carrow i, .ptcars .carrow i { font-style: normal; font-size: 11px; color: var(--muted, #94a3b8); margin-right: 2px; }
.vdetail .car, .ptcars .car { flex: 1; min-width: 0; height: 26px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; opacity: 0.9; }
.vdetail .car.best, .ptcars .car.best { outline: 2px solid var(--ink, #fff); outline-offset: 1px; opacity: 1; }

/* Alerts while driving (More): Traffic / Safety / Road condition × Show / Say */
.more .alertset { padding: 10px 0; border-bottom: 1px solid var(--line); }
.more .alertset table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 15px; }
.more .alertset th { font-weight: 600; font-size: 13px; color: var(--muted, #94a3b8); text-align: center; }
.more .alertset td { padding: 6px 0; }
.more .alertset td + td { text-align: center; width: 64px; }
.more .alertset input { width: 20px; height: 20px; }

/* ---------- Explore links and Wayaroo's own browser (inapp.js, 8 Nov 2026) ---------- */
.exrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.exlink { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: rgba(94, 234, 212, 0.14); border: 1px solid rgba(94, 234, 212, 0.4); color: #0f766e; font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.space .exlink, .dive .exlink, .inapp .exlink { color: #99f6e4; }
@media (prefers-color-scheme: dark) { .exlink { color: #99f6e4; } }
.inapp { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: #0b1120; color: #e2e8f0; transform: translateY(100%); transition: transform 0.26s ease; }
.inapp.in { transform: none; }
.inapp .iabar { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background: #0f172a; border-bottom: 1px solid rgba(148, 163, 184, 0.25); }
.inapp .iax, .inapp .iaout { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(30, 41, 59, 0.9); color: #e2e8f0; font-size: 17px; display: grid; place-items: center; text-decoration: none; cursor: pointer; }
.inapp .iat { flex: 1; min-width: 0; display: grid; text-align: center; }
.inapp .iat b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inapp .iat span { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inapp .iabody { position: relative; flex: 1; background: #fff; }
.inapp iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.inapp .iawait { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; background: #0b1120; color: #cbd5e1; font-size: 14px; z-index: 1; }
.inapp .iawait i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(94, 234, 212, 0.25); border-top-color: #5eead4; animation: iaspin 0.8s linear infinite; }
@keyframes iaspin { to { transform: rotate(360deg); } }
.inapp .iacard { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 35%, #13254f, #0b1120 70%); color: #e2e8f0; }
.inapp .iacard .iaglobe { font-size: 54px; }
.inapp .iacard b { font-size: 19px; }
.inapp .iacard p { margin: 0; color: #cbd5e1; max-width: 300px; line-height: 1.45; }
.inapp .iago { margin-top: 8px; padding: 13px 26px; border-radius: 999px; background: linear-gradient(135deg, #14b8a6, #0ea5e9); color: #fff; font-weight: 700; text-decoration: none; font-size: 16px; }

/* ---------- Live Earth cards (earthlive.js) ---------- */
.evpop .evcred, .space .spcred, .dive .dvcred { display: block; margin-top: 6px; font-size: 11px; color: #94a3b8; }

/* ---------- Space: tools, clock, panels, rovers, camera (space.js) ---------- */
.space .sptools { margin-left: auto; display: flex; gap: 8px; }
.space .spicon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.85); font-size: 19px; cursor: pointer; display: grid; place-items: center; }
.space .spdate { font-variant-numeric: tabular-nums; font-size: 13px; color: #cbd5e1; letter-spacing: 0.01em; }
.space .spcard { max-height: 62vh; overflow-y: auto; }
.space .spbtn { display: inline-block; margin-top: 8px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(30, 41, 59, 0.9); color: #e2e8f0; font: 600 14px system-ui, -apple-system, sans-serif; cursor: pointer; }
.space .spwait { display: block; margin-top: 8px; color: #94a3b8; font-style: normal; font-size: 13px; }
.space .sprovers { margin-top: 10px; display: grid; gap: 10px; }
.space .sprovers .sph { font-size: 14px; }
.space .sprover { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(30, 41, 59, 0.7); }
.space .sprover > span { font-size: 13px; color: #cbd5e1; }
.space .sppics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 2px; }
.space .sppics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #1e293b; cursor: zoom-in; }
.space .sppanel { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); top: calc(env(safe-area-inset-top, 0px) + 66px); max-width: 560px; margin: 0 auto; overflow-y: auto; padding: 16px 16px 20px; border-radius: 18px; background: rgba(8, 13, 30, 0.94); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.space .sppanel[hidden] { display: none; }
.space .sppanel h3 { margin: 0 34px 6px 0; font-size: 18px; }
.space .sppanel .spx, .space .spbig .spx { position: absolute; top: 10px; right: 10px; }
.space .spnote { margin: 0 0 6px; color: #94a3b8; font-size: 13px; line-height: 1.4; }
.space .spag { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.space .spag li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(30, 41, 59, 0.65); }
.space .spag .flag { font-size: 24px; flex: none; }
.space .spag li > div { flex: 1; min-width: 0; display: grid; }
.space .spag li > div span { font-size: 12.5px; color: #94a3b8; }
.space .spcams { display: grid; gap: 14px; margin-top: 10px; }
.space .spshot { margin: 0; display: grid; gap: 6px; }
.space .spshot img { width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 1; object-fit: contain; border-radius: 50%; background: #000; box-shadow: 0 0 40px rgba(56, 189, 248, 0.25); cursor: zoom-in; }
.space .spshot figcaption { display: grid; gap: 2px; text-align: center; justify-items: center; }
.space .spshot figcaption span { font-size: 12.5px; color: #94a3b8; }
.space .spbig { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, 0.92); cursor: zoom-out; }
.space .spbig img { max-width: 96vw; max-height: 86vh; object-fit: contain; border-radius: 10px; }
.space .spcap { position: absolute; left: 20px; right: 20px; bottom: 22%; text-align: center; font: 300 clamp(20px, 5.4vw, 34px)/1.3 system-ui, -apple-system, 'Helvetica Neue', sans-serif; letter-spacing: 0.04em; color: #f8fafc; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9); opacity: 0; transform: translateY(10px); transition: opacity 1.1s ease, transform 1.6s ease; pointer-events: none; }
.space .spcap.on { opacity: 1; transform: none; }
.space.cine .sptop, .space.cine .spbottom, .space.cine .sphint, .space.cine .spcard, .space.cine .sppanel { display: none; }
.space.cine .spcv { cursor: default; }

/* ---------- The first-launch journey (intro.js) ---------- */
.intro { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; color: #f8fafc; background: #000; opacity: 0; transition: opacity 0.8s ease, background 1.4s ease; font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif; }
.intro.in { opacity: 1; }
.intro.flying { background: transparent; pointer-events: none; }
.intro.flying .inbar, .intro.flying .inend { pointer-events: auto; }
.intro.out { opacity: 0; }
.intro .instars { position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #dbeafe, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 85%, #fff, transparent), radial-gradient(1.2px 1.2px at 55% 45%, #fef3c7, transparent), radial-gradient(circle at 50% 120%, rgba(56, 189, 248, 0.25), transparent 60%); background-size: 340px 340px, 280px 280px, 420px 420px, 300px 300px, 360px 360px, 500px 500px, 100% 100%; animation: indrift 60s linear infinite; }
.intro.flying .instars { opacity: 0; transition: opacity 1.2s ease; }
@keyframes indrift { to { background-position: 340px 120px, -280px 90px, 420px -60px, 300px 200px, -360px 100px, 500px 40px, 0 0; } }
.intro .instart { position: relative; display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; transition: opacity 0.8s ease, transform 1.2s ease; }
.intro .instart.gone { opacity: 0; transform: scale(1.08); pointer-events: none; }
.intro .inmark { font-size: clamp(44px, 13vw, 84px); font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(120deg, #5eead4, #38bdf8 45%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; animation: inrise 2.2s ease both; }
.intro .intag { margin: 0; font-size: clamp(15px, 4.2vw, 20px); color: #cbd5e1; letter-spacing: 0.06em; animation: inrise 2.2s 0.4s ease both; }
.intro .ingo { margin-top: 18px; padding: 16px 30px; border-radius: 999px; border: 0; background: linear-gradient(135deg, #14b8a6, #0ea5e9 60%, #8b5cf6); color: #fff; font: 700 18px system-ui, -apple-system, sans-serif; box-shadow: 0 10px 40px rgba(14, 165, 233, 0.45); cursor: pointer; animation: inrise 2.2s 0.8s ease both; }
@keyframes inrise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.intro .inbar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; display: flex; gap: 8px; z-index: 2; }
.intro .inbar button { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(226, 232, 240, 0.35); background: rgba(2, 6, 23, 0.55); color: #f8fafc; font: 600 14px system-ui, -apple-system, sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
.intro.earth { background: transparent; }
.intro .inend { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; padding: 40px 24px calc(env(safe-area-inset-bottom, 0px) + 40px); text-align: center; background: linear-gradient(to top, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0.6) 60%, transparent); opacity: 0; transform: translateY(20px); transition: opacity 1.4s ease, transform 1.4s ease; }
.intro .inend.on { opacity: 1; transform: none; }
.intro .inhome { margin: 0; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: #5eead4; }
.intro .insave { margin: 0; font-size: clamp(28px, 7.6vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.intro .insub { margin: 0; color: #cbd5e1; font-size: 15px; }
.intro .inlets { margin-top: 12px; padding: 14px 28px; border-radius: 999px; border: 0; background: #f8fafc; color: #0f172a; font: 700 17px system-ui, -apple-system, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .intro .instars, .intro .inmark, .intro .intag, .intro .ingo { animation: none; } }

/* ---------- Under the sea (dive.js) ---------- */
.divebtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(125, 211, 252, 0.55); background: linear-gradient(135deg, rgba(3, 105, 161, 0.95), rgba(8, 47, 73, 0.95)); color: #f0f9ff; font: 700 16px system-ui, -apple-system, sans-serif; box-shadow: 0 8px 26px rgba(2, 132, 199, 0.4); cursor: pointer; }
.divebtn[hidden] { display: none; }
.dive { position: fixed; inset: 0; z-index: 1000; background: #0b3d6b; color: #f0f9ff; font-family: system-ui, -apple-system, sans-serif; transition: opacity 0.4s ease; }
.dive.out { opacity: 0; }
.dive .dvcv { display: block; width: 100%; height: 100%; touch-action: none; cursor: ns-resize; }
.dive .dvtop { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; display: flex; }
.dive .dvup { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(186, 230, 253, 0.4); background: rgba(8, 47, 73, 0.75); color: #f0f9ff; font: 600 15px system-ui, -apple-system, sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
.dive .dvhud { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 16px; display: grid; justify-items: end; gap: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.dive .dvm { font-size: clamp(30px, 9vw, 48px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dive .dvzone { font-size: 15px; font-weight: 700; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.1em; }
.dive .dvp { font-size: 13px; color: #e0f2fe; }
.dive .dvinfo { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); max-width: 520px; margin: 0 auto; padding: 12px 14px; border-radius: 16px; background: rgba(2, 12, 27, 0.72); border: 1px solid rgba(125, 211, 252, 0.25); backdrop-filter: blur(8px); }
.dive .dvlives { margin: 0; font-size: 14.5px; line-height: 1.4; }
/* Language picker: a list, now that there are 100+ languages (8 Nov 2026). */
.setrow select.langsel { max-width: 62%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card, transparent); color: inherit; font: inherit; }

/* ---------- Other worlds as maps (planetmap.js, 8 Nov 2026) ---------- */
.pmap { position: fixed; inset: 0; z-index: 1100; background: #000; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
.pmap .pmmap { position: absolute; inset: 0; }
.pmap .pmtop { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; display: flex; gap: 12px; align-items: center; z-index: 2; pointer-events: none; }
.pmap .pmback { pointer-events: auto; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.85); color: #e2e8f0; font: 600 15px system-ui, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; }
.pmap .pmtitle { display: grid; min-width: 0; text-shadow: 0 1px 4px #000; }
.pmap .pmtitle b { font-size: 17px; }
.pmap .pmtitle span { font-size: 12.5px; color: #cbd5e1; }
.pmap .pmpin { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #f8fafc; font: 600 11.5px system-ui, -apple-system, sans-serif; cursor: pointer; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.pmap .pmpin i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(2, 6, 23, 0.78); border: 1.5px solid #5eead4; font-size: 12px; }
.pmap .pmpin.pm-place i { border-color: #94a3b8; }
.pmap .pmpin.pm-crew i { border-color: #fbbf24; }
.pmap .pmpin.pm-now i { border-color: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: pmping 1.8s infinite; }
@keyframes pmping { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .pmap .pmpin.pm-now i { animation: none; } }
.pmap .pmpin span { white-space: nowrap; }
.pmap .pmcard { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); max-width: 520px; margin: 0 auto; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 14px 44px 14px 16px; border-radius: 18px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(148, 163, 184, 0.25); }
.pmap .pmcard[hidden] { display: none; }
.pmap .pmcard b { font-size: 17px; }
.pmap .pmcard span { font-size: 14.5px; color: #cbd5e1; }
.pmap .pmcard .spx { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(51, 65, 85, 0.9); color: #e2e8f0; cursor: pointer; }
.pmap .pmcred { position: absolute; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); margin: 0; font-size: 10.5px; color: #94a3b8; z-index: 2; pointer-events: none; }
.pmap .exlink { color: #99f6e4; }
.pmap.far .pmpin:not(.key) span { display: none; }
.pmap .pmpin.pm-now { flex-direction: row-reverse; }
/* Space: the 🔭 Explore hub and its lists (8 Nov 2026). */
.space .spexplore { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(94, 234, 212, 0.45); background: rgba(15, 23, 42, 0.85); color: #e2e8f0; font: 600 15px system-ui, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; }
.space .sphub { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.space .sptile { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(30, 41, 59, 0.7); color: #e2e8f0; font: 600 14.5px system-ui, -apple-system, sans-serif; cursor: pointer; }
.space .sptile span { font-size: 26px; }
.space .splist { margin-top: 6px; }
.space .spag li > div span + span { display: block; }
.space .spgo { margin: 0; padding: 6px 12px; font-size: 18px; line-height: 1; }
/* On a phone the scene name gives way to the buttons (it's shown big when you zoom anyway). */
.space .spback, .space .spexplore { white-space: nowrap; }
@media (max-width: 440px) {
  .space .spscene { position: absolute; top: 50px; left: 0; right: 0; text-align: center; font-size: 13px; color: #cbd5e1; pointer-events: none; }
  .space .sphint { top: calc(env(safe-area-inset-top, 0px) + 88px); }
}
.mt-lights { background: radial-gradient(circle at 28% 42%, #fde68a 0 3%, transparent 5%), radial-gradient(circle at 62% 56%, #fcd34d 0 4%, transparent 7%), radial-gradient(circle at 44% 72%, #fef3c7 0 2%, transparent 4%), radial-gradient(circle at 76% 30%, #fbbf24 0 2.5%, transparent 4.5%), radial-gradient(circle at 55% 40%, rgba(253, 230, 138, 0.5) 0 8%, transparent 14%), linear-gradient(160deg, #0b1230, #020617); }

/* 🌌 Sky heads-up (aurora.js): a small card under the top bar. */
.skyalert { position: fixed; z-index: 9; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 186px); max-width: 440px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 18px; background: rgba(8, 13, 30, 0.94); color: #e2e8f0; border: 1px solid rgba(94, 234, 212, 0.35); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); animation: skyin 0.5s ease both; }
.skyalert .skyico { font-size: 26px; line-height: 1; }
.skyalert .skytxt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.skyalert .skytxt b { font-size: 16px; }
.skyalert .skytxt span { font-size: 14px; color: #cbd5e1; }
.skyalert .skytip { font-size: 12.5px !important; color: #94a3b8 !important; }
.skyalert .skybtns { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.skyalert .skygo { padding: 7px 12px; border-radius: 999px; border: 0; background: #5eead4; color: #042f2e; font: 700 13px system-ui, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; }
.skyalert .skyx { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(148, 163, 184, 0.18); color: #e2e8f0; cursor: pointer; }
@keyframes skyin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skyalert { animation: none; } }

/* 🕰️ Time machine row (Map type, NASA photo). */
.tmrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.tmrow[hidden] { display: none; }
.tmrow > b { font-size: 15px; flex: 1 1 100%; }
.tmrow .tmctl { display: flex; align-items: center; gap: 6px; }
.tmrow .tmstep { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer; }
.tmrow .tmdate { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 9.5em; }
.tmrow .tm20 { margin-left: auto; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; }
/* Famous dives: the site's name over the depth. */
.dive .dvsite { display: block; font-size: 14px; font-weight: 700; color: #fde68a; text-shadow: 0 1px 3px #000; }

/* Meteor showers: where to look from here. */
.space .splook { color: #99f6e4 !important; }

/* Links on satellite cards and the aurora heads-up. */
.pop .exrow, .skyalert .exrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* The NASA Trek link on a planet map can be tapped. */
.pmap .pmcred a { pointer-events: auto; color: #99f6e4; }

/* Space: red night mode (keeps your eyes dark-adapted), its button, and Tonight's sky. */
.space .spred { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.85); font-size: 16px; cursor: pointer; }
.space .spred[aria-pressed="true"] { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }
.space.red { filter: grayscale(1) sepia(1) saturate(7) hue-rotate(-45deg) brightness(0.62); }
.space .tnlist { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 7px; font-size: 15px; color: #e2e8f0; }
.space .tnlist .spbtn { margin: 4px 0 0; }

/* 🚗 Your car (Plan a trip → Car; carinfo.js) */
details.car summary .cardot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #0003; align-self: center; flex: none; }
details.car summary .cardot[hidden] { display: none; }
.mycar { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.mycarpic svg { width: 58px; height: 81px; display: block; }
.mycar p { margin: 0; }
.regorow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 6px; }
.regorow button { grid-column: 1 / -1; }
.vinrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 6px; }
.regorow select, .regorow input, .vinrow input { min-width: 0; width: 100%; }
details.car input[type="text"] { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
:root[data-theme="dark"] details.car input[type="text"] { background: #0b1220; color: var(--ink); border-color: var(--line); }
.regorow [hidden] { display: none; }
#tPlate, #tVin { text-transform: uppercase; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
#tPlate::placeholder, #tVin::placeholder { text-transform: none; letter-spacing: normal; }
.regorow button.ext::after { content: ' ↗'; }
.carmsg { margin: 6px 0 2px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.carmsg:empty { display: none; }
.carpick { margin-top: 10px; }
.carpick > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.carcols { display: flex; flex-wrap: wrap; gap: 8px; }
.ccol { width: 34px; height: 34px; border-radius: 50%; padding: 0; margin: 0; border: 3px solid transparent; background: var(--c); box-shadow: 0 0 0 1px #0003; cursor: pointer; }
.ccol.on { border-color: var(--brand); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #0003; }
.carbodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.cbody { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer; font: inherit; min-height: 44px; }
.cbody svg { width: 46px; height: 44px; }
.cbody small { font-size: 12px; color: var(--muted); }
.cbody.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.carsrc:empty { display: none; }
.ccol:focus-visible, .cbody:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Reduce Motion: the character holds still in every pose (driving and riding bumped before). */
@media (prefers-reduced-motion: reduce) { .mepose.k-drive .bob, .mepose.k-ride .bob, .mepose.k-still .bob { animation: none; } }
/* The parking pin shows your own car once it's set (park.js) */
.carpinwrap { cursor: pointer; padding-bottom: 6px; }
.carpin-car { transform: rotate(45deg); display: grid; place-items: center; }
.carpin-car svg { width: 28px; height: 28px; display: block; }
#pkSet { margin: 6px 0 10px; }
/* ✈️ Flight view (flight.js): a map drawn on the phone, big numbers, nothing that needs signal */
.flight { --fl-sea: #dbeafe; --fl-land: #c7ecd2; --fl-coast: #4fa36f; --fl-ink: #0f172a; --fl-track: #c2410c; --fl-plane: #0f766e; }
:root[data-theme="dark"] .flight { --fl-sea: #0b2540; --fl-land: #1d4a37; --fl-coast: #3f8a63; --fl-ink: #f1f5f9; --fl-track: #fbbf24; --fl-plane: #ffffff; }
.flight .flmap { position: relative; height: min(42vh, 360px); min-height: 220px; border-radius: 14px; overflow: hidden; background: var(--fl-sea); }
.flight .flmap canvas { display: block; width: 100%; height: 100%; }
.flight .flzoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.flight .flzoom button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); font-size: 22px; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; }
.flight .flscale { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: #0009; color: #fff; font-size: 12px; }
.flight .flstatus { margin: 10px 0 2px; color: var(--muted); font-size: 14px; }
.flight .flstatus.warn, .flight .flwarn { color: #b45309; }
:root[data-theme="dark"] .flight .flstatus.warn, :root[data-theme="dark"] .flight .flwarn { color: #fbbf24; }
.flight .fltiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: 8px; margin: 8px 0; }
.flight .fltile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.flight .fltile small { color: var(--muted); font-size: 13px; }
.flight .fltile b { font-size: 1.7em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.flight .fltile span { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.flight .flplaces p { margin: 6px 0; }
.flight .flarr { display: inline-block; font-weight: 800; }
.flight #flEnd { margin: 4px 0 12px; }
.drive.flpill { flex-direction: column; align-items: flex-start; gap: 2px; max-width: calc(100vw - 32px); border: 0; padding: 10px 18px; border-radius: 18px; background: var(--brand, #0f766e); color: #fff; font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.drive.flpill .l1 { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drive.flpill .l2 { font-size: 14px; font-weight: 600; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 70px); }
.flight .flwin { margin: 2px 0 8px; padding: 0; list-style: none; }
.flight .flwin li { margin: 4px 0; }
/* Flight view, round 2: where you're flying, and the map turning with the plane */
.flight .fldest { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.flight .fldest label { display: block; margin-bottom: 6px; font-weight: 700; }
.flight .fldest input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; }
.flight .flchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.flight .flchips .flchip { min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.flight .fldestname { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 4px; }
.flight .flprog { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.flight .flprog i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand, #0f766e); }
.flight .flzoom button.on { background: var(--brand, #0f766e); color: #fff; }

/* 🏫 School bus chip in a vehicle's details (NSW school routes, GTFS type 712). */
.vschool { margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: #fef08a; color: #713f12; font-size: 13px; font-weight: 800; white-space: nowrap; }
/* 🏫 My child's school bus is running (kidbus.js): above the dock, clear of the drive pill. */
.kidbus { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + var(--safe-b) + 66px); z-index: 4; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border: 0; border-radius: 18px; background: #facc15; color: #111827; box-shadow: var(--shadow); font: inherit; text-align: start; cursor: pointer; }
.kidbus .kbmain { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.kidbus .kbbell, .kidbus .kbshare { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #11182714; font-size: 20px; cursor: pointer; }
/* 🏫📍 Sharing a school bus you're on (busshare.js): a teal pill where the school bus card sits. */
.busshare { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + var(--safe-b) + 66px); z-index: 5; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 18px; background: #0f766e; color: #fff; box-shadow: var(--shadow); }
.busshare .bsmain { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.busshare .bsmain span:first-child { font-size: 22px; }
.busshare b { display: block; font-size: 15px; }
.busshare small { display: block; font-size: 12px; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 170px); }
.busshare .bsstop { flex: none; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: #ffffff2e; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.kidbus .kbmain span:first-child { font-size: 24px; }

.kidbus b { display: block; font-size: 16px; }
.kidbus small { display: block; font-size: 13px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 110px); }
/* 🌌 Where to see the aurora (auroraspots.js): the pill while the aurora layer is on, and the sheet. */
.aupill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + var(--safe-b) + 66px); z-index: 4; border: 0; border-radius: 999px; padding: 10px 18px; background: #052e2b; color: #a7f3d0; font: inherit; font-weight: 800; box-shadow: 0 0 0 1px #34d39966, var(--shadow); cursor: pointer; }
.auspots .auhere { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auspots b.ok { color: #15803d; }
.auspots b.no { color: var(--muted); }
.auspots b.maybe { color: #b45309; }
:root[data-theme="dark"] .auspots b.maybe { color: #fbbf24; }
.aulist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.aulist li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name verdict" "name go"; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.aulist li > div { grid-area: name; }
.aulist li > div b { display: block; }
.aulist li > div small { color: var(--muted); }
.aulist li > b { grid-area: verdict; justify-self: end; }
.aulist li > button { grid-area: go; justify-self: end; }
/* Tonight's strength against what it takes from here: a bar instead of Kp numbers. */
.aumeter { position: relative; height: 12px; margin: 8px 0 6px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.aumeter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #a3e635 45%, #c084fc); }
.aumeter b { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.aumkey { display: flex; gap: 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.aumkey i { display: inline-block; width: 16px; height: 8px; margin-right: 6px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, #22c55e, #c084fc); }
.aumkey b { display: inline-block; width: 4px; height: 12px; margin-right: 6px; border-radius: 2px; vertical-align: middle; background: var(--ink); }
/* 🚀 Fly me home: above "Leave Earth" on the zoomed-out globe. */
.spacebtn.homebtn { bottom: calc(env(safe-area-inset-bottom, 0px) + 206px); }
/* For you: the other nearby stops, one tap away. */
.fymore > summary { cursor: pointer; padding: 6px 2px 10px; color: var(--muted); font-weight: 700; font-size: 14px; }

/* 🏠 Going home (homecoming.js): over everything, even the Space view; the map shows through once the stars fade. */
.hc { position: fixed; inset: 0; z-index: 2600; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; color: #f8fafc; font-family: system-ui, -apple-system, sans-serif; }
.hc.in { opacity: 1; }
.hc.out { opacity: 0; transition: opacity 0.9s ease; }
.hc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc .hcstars { background: #01030a; transition: opacity 1.6s ease; }
.hc:not(.warp) .hcstars { opacity: 0; }
.hc.open .hcstars { opacity: 0; }
.hc .hcclouds { opacity: 0; transition: opacity 1.2s ease; }
.hc.cloudy .hcclouds { opacity: 1; }
.hc.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffffff 0%, #bfdbfe 35%, rgba(191, 219, 254, 0) 75%); animation: hcflash 0.9s ease-out forwards; }
@keyframes hcflash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.hc .hccap { position: absolute; left: 16px; right: 16px; top: 22%; margin: 0; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 2px 12px #000c; opacity: 0; transition: opacity 0.9s ease; font-variant-numeric: tabular-nums; }
.hc .hccap.on { opacity: 1; }
.hc .hcend { position: absolute; left: 16px; right: 16px; bottom: 26%; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease, transform 1.2s ease; text-shadow: 0 2px 14px #000d; }
.hc .hcend.on { opacity: 1; transform: none; }
.hc .hcend h1 { margin: 0 0 6px; font-size: 34px; }
.hc .hcend p { margin: 0; font-size: 17px; }
.hc .hcskip { position: absolute; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 14px); pointer-events: auto; border: 1px solid #ffffff55; border-radius: 999px; padding: 8px 16px; background: #0f172acc; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hc.flash::after { animation: none; } }
/* 🎬 While the trip home plays (and the intro's landing), the app steps aside: just the map and the film. */
body.cinema > :not(#map):not(.hc):not(.intro) { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.8s ease; }
body.cinema #map .maplibregl-control-container { opacity: 0; transition: opacity 0.8s ease; }
body.cinema-back > :not(#map):not(.hc):not(.intro) { animation: cinemaback 0.9s ease both; }
@keyframes cinemaback { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.cinema-back > * { animation: none; } }

/* 🚀 More: the space film, first thing (Rajbir, 8 Nov 2026: "a button if someone wants to watch that zoom out all the
   way out movie and come to current location"). */
.filmbanner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 6px; padding: 14px 16px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; color: #f8fafc;
  background: radial-gradient(circle at 85% 30%, rgba(167, 139, 250, 0.55), transparent 45%), radial-gradient(circle at 20% 120%, rgba(45, 212, 191, 0.45), transparent 55%), linear-gradient(135deg, #0b1026, #111c44 60%, #1e1b4b);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08); font: inherit; }
.filmbanner .fbi { font-size: 30px; flex: none; }
.filmbanner .fbt { flex: 1; display: grid; gap: 2px; }
.filmbanner .fbt b { font-size: 17px; }
.filmbanner .fbt small { color: #cbd5e1; font-size: 13px; }
.filmbanner .fbp { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f8fafc; color: #1e1b4b; font-size: 15px; padding-left: 2px; }
.more .setmenu { margin-top: 14px; }
.settings .laysel { margin-bottom: 4px; }

/* 🏫 A school's buses (place profile). */
.sbus li { display: grid; gap: 2px; }
.sbus .sbtag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; vertical-align: middle; }
:root[data-theme="dark"] .sbus .sbtag { background: #422006; color: #fde68a; }
.sbus .sblive { color: #15803d; font-weight: 600; }
:root[data-theme="dark"] .sbus .sblive { color: #4ade80; }
.sbus .sbact { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* 🌌 The aurora chip (first in the chip row while the aurora layer is on). */
.chip.auchip { background: #052e2b; color: #a7f3d0; box-shadow: inset 0 0 0 1px #34d39966; }

/* Space: the "pinch to zoom out…" tip sits at the bottom, above the time controls, where it can't cover the planets'
   names at the top (Rajbir's video, 8 Nov 2026). */
.space .sphint { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); padding: 6px 10px; border-radius: 12px; background: rgba(2, 6, 23, 0.55); }

/* 🆘 Emergency help (sos.js): a red row at the top of More, and the card itself. The call button is the biggest thing
   on the card and works with one thumb. */
.sosrow { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 8px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 16px; background: #fef2f2; color: #7f1d1d; font: inherit; text-align: left; cursor: pointer; }
.sosrow .sri { font-size: 26px; flex: none; }
.sosrow .srt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sosrow .srt b { font-size: 16px; color: #b91c1c; }
.sosrow .srt small { color: #7f1d1d; font-size: 12.5px; opacity: 0.85; }
.sosrow .chev { color: #b91c1c; font-size: 22px; }
:root[data-theme="dark"] .sosrow { background: rgba(127, 29, 29, 0.35); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }
:root[data-theme="dark"] .sosrow .srt b, :root[data-theme="dark"] .sosrow .chev { color: #fca5a5; }
:root[data-theme="dark"] .sosrow .srt small { color: #fecaca; }
.sos { display: grid; gap: 6px; }
.sos h3 { margin: 12px 0 2px; }
.sosbig { display: grid; gap: 2px; justify-items: center; padding: 16px 12px; border-radius: 18px; background: #dc2626; color: #fff; text-decoration: none; box-shadow: 0 8px 22px rgba(220, 38, 38, 0.35); }
.sosbig b { font-size: 24px; letter-spacing: 0.3px; }
.sosbig small { font-size: 13px; opacity: 0.92; }
.sosbig:active { transform: scale(0.98); }
.soswhere, .sosnear { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--soft); }
.soswhere p, .sosnear p { margin: 0; padding: 0; }
.sosaddr b, .soscode b { font-size: 16px; }
.soscode b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.5px; }
.sosrough { color: #b45309; font-size: 13px; }
.sosbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sosbtns .ghost, .sosbtns .primary { text-decoration: none; }
.sosplace { display: grid; gap: 3px; }
.sosnote { color: var(--muted); }
.sosnums { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sosnums li { display: flex; gap: 10px; align-items: flex-start; }
.sosnums .sostel { flex: none; min-width: 96px; padding: 6px 10px; border-radius: 10px; background: var(--soft); color: inherit; font-weight: 700; text-decoration: none; text-align: center; }
.sosnums span { font-size: 13px; }
.sossrc { color: var(--muted); font-size: 12px; margin-left: 4px; }
.sosved { margin: 8px 0 0; }
.sos [hidden] { display: none !important; }

/* ♿ Step-free stops (GTFS wheelchair_boarding). */
.sfok { font-size: 0.9em; }
.sfno { color: #b45309; }
.ropt .rtag.sfno { color: #b45309; }
:root[data-theme="dark"] .sfno, :root[data-theme="dark"] .ropt .rtag.sfno { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sfno, :root:not([data-theme="light"]) .ropt .rtag.sfno { color: #fbbf24; } }

/* 🗺️ Offline maps (offlinemaps.js): one row per city, a progress bar while it downloads. */
.offmaps, .offlist { display: grid; gap: 8px; }
.offrow { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.offrow > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.offbar { flex: 1 1 100%; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.offbar span { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.offfail { margin: 0; color: #b45309; }
:root[data-theme="dark"] .offfail { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offfail { color: #fbbf24; } }

/* ↪ Change here (your own way, slice 2). */
.ptstop .ptchg { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.ptstop { display: flex; align-items: center; gap: 8px; }

/* Paragraphs marked small line up with the headings above them (the padding of .small is for small buttons). */
p.small { padding-inline: 0; }
/* The speedometer hides while you stand still (speedo.js). */
.speedo.idle { display: none !important; }
/* Map credit as quiet text, not a white pill (9 Nov 2026: it took a whole row above the speedometer). The ⓘ still
   opens every source. */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { background: transparent; box-shadow: none; min-height: 18px; }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show)::before { font-size: 10px; color: #1f2937; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button { opacity: 0.7; transform: scale(0.8); }

/* Compact pickers in sheets, like iOS ("English ⇕"): the value with a small up/down mark, sized to its text. */
.sheet select { -webkit-appearance: none; appearance: none; width: auto; max-width: 100%; min-height: 36px; padding: 6px 30px 6px 12px; border-radius: 10px; border: 1px solid var(--hair, rgba(255,255,255,0.12)); background: rgba(127,127,127,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5L5 1.5 8.5 5M1.5 9L5 12.5 8.5 9' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 9px 13px; color: inherit; font: inherit; font-weight: 600; }
/* Fuel list header: fuel ▾ and brand ▾ side by side, then the state's price line. */
.nb-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.nb-pick .nb-brand { margin: 0; }
.nb-trend { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(127,127,127,0.1); }
.nb-trend svg { width: 100%; height: 56px; color: #14b8a6; }
.nb-trend .up { color: #dc2626; } .nb-trend .down { color: #16a34a; }
/* The directions button beside the search box. */
.searchbar .dirbtn { color: #2dd4bf; }

/* v296: a Home or Work chip that is not set yet reads as an offer, not a button with a place behind it. */
.chip.placechip.unset{opacity:.7;border-style:dashed}

/* v297: 'time for your usual trip' is an offer, not a warning. */
.utwarn.calm { background: #0f766e; color: #f0fdfa; }
.utwarn.calm .utgo { background: #ccfbf1; color: #134e4a; }

/* v298: fuel price alert */
.nb-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.nb-alert .nb-alertv { width: 5.5em; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line, #33415588); background: transparent; color: inherit; font: inherit; }