/* NextHalt. Quiet ink-and-white surroundings; the only strong colour is Lanka Metro's own route
   colours, carried by the route strip, the route plates and the lines on the map. */
:root {
  --ink: #1e2633;
  --ink-2: #2f3a4b;
  --slate: #5a6577;
  --slate-2: #8a94a3;
  --mist: #dce1e8;
  --canvas: #f3f5f8;
  --paper: #ffffff;
  --signal: #0f766e;
  --signal-soft: #e3f3f1;
  --error: #b42318;
  --shadow-panel: 0 0 0 1px rgba(30, 38, 51, .06), 0 8px 28px rgba(30, 38, 51, .14);
  --shadow-float: 0 1px 2px rgba(30, 38, 51, .12), 0 6px 18px rgba(30, 38, 51, .16);
  --r-plate: 5px;
  --r-ctl: 10px;
  --r-surface: 16px;
  --sidebar-w: 400px;
  --sheet-h: 46vh;
  /* Overpass (from road-sign lettering, narrow enough for long stop names) for Latin; Yaldevi, from
     the Sri Lankan foundry Mooniak, for Sinhala; Catamaran for Tamil. Each script falls through. */
  --font: "Overpass", "Yaldevi", "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #e9ecef; overflow: hidden; font-size: 15px; line-height: 1.45; }
:lang(si) body, :lang(ta) body, body:lang(si), body:lang(ta) { line-height: 1.6; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--slate-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.ms.fill { font-variation-settings: "FILL" 1; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

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

/* ---------- placeholder when the map can't load ---------- */
#map-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, #e2e6eb 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, #e2e6eb 0 1px, transparent 1px 48px),
    var(--canvas);
  padding: 24px 24px 24px calc(var(--sidebar-w) + 24px);
}
.ph-card { max-width: 360px; background: var(--paper); border-radius: var(--r-surface); box-shadow: var(--shadow-float); padding: 24px; text-align: center; }
.ph-card h2 { font-size: 19px; font-weight: 700; margin: 8px 0; }
.ph-card p { color: var(--slate); margin: 0; }
.ph-icon { color: var(--ink); font-size: 40px; font-variation-settings: "FILL" 1; }

/* ---------- panel ---------- */
#sidebar {
  position: absolute; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--paper); box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column; z-index: 3;
}
#search { padding: 12px 16px 14px; border-bottom: 1px solid var(--mist); position: relative; z-index: 2; background: var(--paper); }
.search-top { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; min-height: 40px; }

.brand {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
  border: 0; background: none; padding: 4px 6px 4px 0; cursor: pointer; text-align: left; border-radius: var(--r-ctl);
}
/* The NextHalt logo as supplied; its small icon replaces it when the phone header folds. */
.brand-mark { display: none; width: 30px; height: 30px; flex: none; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 1px; }
.brand-top { display: flex; align-items: center; gap: 6px; }
.brand-logo { display: block; height: 32px; width: auto; flex: none; }
.brand-by { display: block; width: 120px; height: auto; flex: none; }   /* the logo's width: 32px × 180/48 */
.tagline { margin: -11px 0 12px; font-size: 13px; line-height: 1.3; color: var(--slate); }
/* Not final yet. */
.beta {
  flex: none; padding: 0 5px; border-radius: 4px; background: var(--mist); color: var(--slate);
  font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .04em; text-transform: uppercase;
}

.trip-summary { display: none; }

/* Header, top right: language, saved routes, menu. */
.search-top > .brand { margin-right: auto; }
.lang { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 8px 0 10px; border-radius: 18px;
  border: 1px solid var(--mist); background: var(--paper); color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 600;
}
.lang-btn:hover { border-color: var(--slate-2); }
.lang-btn .ms { font-size: 20px; color: var(--slate); }
.lang-btn .caret { display: none; }
.lang-btn { padding: 0 12px 0 9px; }
.lang-name { display: none; }
.lang-code { letter-spacing: .02em; }
.lang-opt-code { width: 24px; flex: none; font-size: 12px; font-weight: 700; color: var(--slate); }
.lang-pop button > .lang-opt-code + span { flex: 1; }
.saved-btn { position: relative; color: var(--ink); }
.saved-btn[aria-pressed="true"] .ms { font-variation-settings: "FILL" 1; }
.count-badge {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.lang-pop {
  position: absolute; right: 0; top: 42px; z-index: 30; min-width: 170px; background: var(--paper); border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-float), 0 0 0 1px rgba(30,38,51,.06);
}
.lang-pop button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 16px; color: var(--ink); text-align: left;
}
.lang-pop button:hover { background: var(--canvas); }
.lang-pop button[aria-pressed="true"] { font-weight: 700; }
.lang-pop button .ms { font-size: 18px; color: var(--ink); }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--slate); flex: none;
}
.icon-btn:hover { background: var(--canvas); color: var(--ink); }
.menu-btn { color: var(--ink); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; overflow: hidden; flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.dir-form { display: flex; align-items: center; gap: 8px; }
.dir-icons { display: flex; flex-direction: column; align-items: center; width: 20px; flex: none; }
.ico-origin { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--ink); }
.ico-dest { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.dots { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-2); display: block; }
.dir-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field { position: relative; }
.field input {
  width: 100%; height: 44px; border: 1px solid transparent; border-radius: var(--r-ctl);
  padding: 0 40px 0 14px; font-size: 16px; color: var(--ink); background: var(--canvas);
  outline: none; text-overflow: ellipsis;
}
.field input::placeholder { color: var(--slate); }
.field input:focus { background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.clear-btn {
  position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--slate); cursor: pointer; display: grid; place-items: center;
}
.clear-btn .ms { font-size: 20px; }
.clear-btn:hover { background: var(--mist); color: var(--ink); }

/* ---------- suggestions ---------- */
.suggest { margin: 12px -16px -14px; border-top: 1px solid var(--mist); max-height: min(60vh, 460px); overflow-y: auto; padding: 4px 0; background: var(--paper); }
.sug {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 16px; border: 0; background: none;
  text-align: left; cursor: pointer; min-height: 56px;
}
.sug:hover, .sug.active { background: var(--canvas); }
.sug-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--canvas); color: var(--slate); display: grid; place-items: center; flex: none; }
.sug-ico .ms { font-size: 20px; }
.sug.active .sug-ico, .sug:hover .sug-ico { background: var(--mist); }
.sug-ico.me { background: var(--ink); color: #fff; }
.sug-text { min-width: 0; flex: 1; }
.sug-main { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-main b { font-weight: 700; }
.sug-sub { color: var(--slate); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.sug-note { padding: 12px 16px; color: var(--slate); font-size: 14px; }

/* ---------- panel content ---------- */
#sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.sheet-handle { display: none; }
/* A column, so the credit sits at the foot of the panel when there's little above it. */
#sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 64px; display: flex; flex-direction: column; }
#sheet-body > * { flex-shrink: 0; }
.credit { margin: auto 0 0; padding: 12px 16px 0; font-size: 13px; color: var(--slate); }
.credit strong { color: var(--ink); font-weight: 700; }
.modal-body .credit { margin-top: 18px; padding: 12px 0 0; border-top: 1px solid var(--mist); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 16px 6px; }
.section-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.section-head .muted, .section-head .text-link { font-size: 14px; }
.muted { color: var(--slate); }
.text-link { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--slate-2); text-underline-offset: 2px; cursor: pointer; }

.lead-note { margin: 16px 16px 4px; color: var(--slate); font-size: 14px; }
.lead-note strong { color: var(--ink); font-weight: 600; }

.route-list { list-style: none; margin: 0; padding: 0 0 8px; }
.route-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none;
  text-align: left; cursor: pointer; min-height: 60px;
}
.route-item:hover { background: var(--canvas); }
.route-item .ri-text { min-width: 0; flex: 1; }
.route-item .ri-name { font-size: 16px; }
.route-item .ri-sub { color: var(--slate); font-size: 13px; }
.ri-live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Route plates: Lanka Metro's colour, like the number board on the bus. */
.badge {
  background-color: var(--c); display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 7px; border-radius: var(--r-plate);
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums;
}
.badge .ms { font-size: 16px; }
.badge.lg { height: 28px; font-size: 14px; padding: 0 9px; }
.badge.sm { height: 20px; font-size: 12px; padding: 0 5px; }
/* No tracked bus heading your way: the whole box shaded with bold stripes; a halo in the route's
   colour keeps the route number readable on them. */
.badge.untracked, .strip-bus.untracked {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.72) 0 5px, transparent 5px 10px);
}
.badge.untracked .lbl, .strip-bus.untracked .lbl { text-shadow: 0 0 2px var(--c), 0 0 3px var(--c), 0 0 5px var(--c); }

/* ---------- live ---------- */
.live { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--slate); }
.live.ok, .ri-live.ok { color: var(--signal); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; position: relative; }
/* Only the trip in focus pulses: the option shown on the map, and the first bus of open directions. */
.pulse.ok .live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.4); opacity: 0; } }
.none .live-dot { background: var(--mist); }

/* ---------- the route strip ---------- */
.strip { display: flex; align-items: center; gap: 3px; height: 28px; margin: 10px 0 8px; min-width: 0; }
.strip-bus {
  background-color: var(--c); flex: 1 1 0; min-width: 52px; height: 100%; border-radius: 4px; display: flex; align-items: center;
  padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden;
}
.strip-walk, .strip-tuk { flex: 0 0 22px; height: 100%; }
.strip-walk { background: radial-gradient(circle, var(--slate-2) 1.7px, transparent 2.1px) 2px 50% / 7px 7px repeat-x; }
.strip-tuk { background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 10px) 0 50% / 100% 3px no-repeat; }
.strip.direct .strip-walk, .strip.direct .strip-tuk { flex: 1 1 auto; }
.strip-end { width: 10px; height: 10px; flex: none; }
.strip-end.from { border-radius: 50%; border: 2.5px solid var(--ink); }
.strip-end.to { border-radius: 2px; background: var(--ink); }

/* ---------- results ---------- */
.list-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--mist); }
.list-head .lh-text { min-width: 0; flex: 1; }
.lh-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-sub { font-size: 13px; color: var(--slate); }

.opt {
  display: block; width: 100%; border: 0; border-bottom: 1px solid var(--mist); background: none; text-align: left;
  padding: 14px 16px 14px; cursor: pointer; position: relative;
}
.opt:hover { background: var(--canvas); }
.opt[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ink); }
.facts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.fare { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fact { font-size: 14px; color: var(--slate); white-space: nowrap; }
.fact.strong { color: var(--ink); font-weight: 600; }
.opt-board { font-size: 14px; }
/* An option with a bus that has no tracked bus coming: the whole box shaded, its contents a little
   faded, and a tag saying which route. The note above the options says what shading means. */
.opt.shaded, .shade-swatch { background: repeating-linear-gradient(135deg, #eef0f4 0 10px, #e2e6ec 10px 20px); }
.opt.shaded:hover { background: repeating-linear-gradient(135deg, #e7eaef 0 10px, #dadfe6 10px 20px); }
.opt.shaded .facts > :not(.shade-tag), .opt.shaded > .strip, .opt.shaded > .opt-board, .opt.shaded > .live { opacity: .7; }
.shade-tag {
  margin-left: auto; align-self: center; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.shaded-note { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--mist); font-size: 13px; color: var(--ink); }
.shaded-note > .ms { font-size: 18px; color: var(--slate); flex: none; }
.shade-swatch { width: 34px; height: 20px; flex: none; border-radius: 4px; border: 1px solid #c3cad4; }
.opt .live { margin-top: 2px; }
.list-note { padding: 12px 16px 0; font-size: 13px; color: var(--slate); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px;
  border-radius: var(--r-ctl); border: 1px solid var(--mist); background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; text-decoration: none;
}
.btn:hover { border-color: var(--slate-2); }
.btn .ms { font-size: 20px; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-2); }
.btn.block { width: 100%; height: 46px; }
.btn.saved .ms { font-variation-settings: "FILL" 1; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-google svg { width: 18px; height: 18px; }

/* ---------- trip detail ---------- */
/* back | facts | save on the first row, the strip under the facts and save. */
.detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 4px; align-items: start; padding: 10px 16px 12px 6px; border-bottom: 1px solid var(--mist); }
.detail-head .dh-text { padding-top: 6px; min-width: 0; }
.detail-head .dh-actions { padding-top: 0; }
.detail-head > .strip { grid-column: 2 / 4; margin-bottom: 0; }
.dh-title { font-size: 16px; font-weight: 700; }
.dh-sub { color: var(--slate); font-size: 14px; margin-top: 2px; }

.timeline { list-style: none; margin: 0; padding: 14px 16px 8px; }
.tl { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; position: relative; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-body { padding-bottom: 14px; min-width: 0; }
.tl-node .tl-rail::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c, var(--ink));
  margin-top: 4px; position: relative; z-index: 1; box-sizing: border-box;
}
.tl-node.end .tl-rail::before { border-color: var(--ink); }
.tl-node.dest .tl-rail::before { border-radius: 3px; background: var(--ink); border-color: var(--ink); }
/* Lines join stop to stop: a walk or ride runs from the top of its row down to the centre of the next
   stop's circle (11 px into that row), and each stop row carries the line that follows it from its
   circle centre to its bottom edge (.down-*, set in the directions code). */
.tl-seg .tl-rail::after, .tl-node[class*="down-"] .tl-rail::after { content: ""; position: absolute; width: 6px; background: var(--c, var(--slate-2)); }
.tl-seg .tl-rail::after { top: 0; bottom: -11px; }
.tl-node[class*="down-"] .tl-rail::after { top: 11px; bottom: 0; background: var(--d, var(--slate-2)); }
.tl-seg.walk .tl-rail::after, .tl-node.down-walk .tl-rail::after {
  width: 4px; background: radial-gradient(circle, var(--slate-2) 1.8px, transparent 2.2px) center top / 4px 8px repeat-y;
}
.tl-seg.tuk .tl-rail::after, .tl-node.down-tuk .tl-rail::after {
  width: 4px; background: repeating-linear-gradient(to bottom, var(--slate) 0 7px, transparent 7px 11px);
}
.tl-seg:has(+ .tl-node.dest) .tl-rail::after { bottom: 0; }
.tl-name { font-size: 16px; font-weight: 700; }
.tl-meta { color: var(--slate); font-size: 14px; }
.tl-seg .tl-body { padding: 4px 0 16px; }
.tl-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-line .towards { font-size: 15px; }
.line-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; border: 0; background: none;
  padding: 2px 0; text-align: left; cursor: pointer;
}
.line-btn:hover .towards { text-decoration: underline; }
.line-btn .live .ms { font-size: 18px; }
.ride-text { font-size: 14px; color: var(--slate); padding: 4px 0; }
.text-btn {
  border: 0; background: none; padding: 4px 0; color: var(--slate); cursor: pointer; display: inline-flex;
  align-items: flex-start; gap: 2px; font-size: 14px; margin-left: -4px; text-align: left;
}
.text-btn:hover { color: var(--ink); }
.text-btn .ms { font-size: 20px; transition: transform .15s ease; }
.text-btn[aria-expanded="true"] .ms { transform: rotate(180deg); }
.mid-stops { list-style: none; margin: 4px 0 0; padding: 0; color: var(--slate); font-size: 14px; }
.mid-stops li { padding: 3px 0; position: relative; }
.mid-stops li::before { content: ""; position: absolute; left: -27px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
/* Where the bus is: passed stops ticked, a bus mark where it is now. */
.bus-mark {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(30,38,51,.4);
}
.bus-mark .ms { font-size: 14px; }
.progress { list-style: none; margin: 2px 0 6px; padding: 0; font-size: 14px; }
.progress li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.progress li > .ms { font-size: 16px; width: 22px; text-align: center; }
.progress .o { width: 22px; display: flex; justify-content: center; flex: none; }
.progress .o::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--slate-2); box-sizing: border-box; }
.progress li.yours { font-weight: 700; }
.progress li.yours .o::before { width: 11px; height: 11px; border: 3px solid var(--ink); }
.progress .note { color: var(--slate); font-size: 13px; font-weight: 400; }
.progress li.passed, .mid-stops li.passed { color: var(--slate-2); }
.progress li.bus-here, .mid-stops li.bus-here { color: var(--signal); font-weight: 600; }
.mid-stops li.passed { display: flex; align-items: center; gap: 4px; }
.mid-stops li.passed > .ms { font-size: 15px; }
.mid-stops li.bus-here { display: flex; align-items: center; min-height: 28px; }
.mid-stops li.bus-here::before { display: none; }
.mid-stops li.bus-here .bus-mark { position: absolute; left: -36px; }
.text-btn.not-on { display: block; margin: 2px 0 2px -4px; padding: 2px 4px; text-decoration: underline; text-decoration-color: var(--slate-2); text-underline-offset: 2px; }
.walk-row { display: flex; align-items: center; gap: 6px; color: var(--slate); font-size: 14px; }
.walk-row > .ms { font-size: 20px; }
.walk-text { flex: 1; min-width: 0; }
.walk-row .maps-link { flex: none; height: 32px; padding: 0 10px; gap: 4px; font-size: 13px; text-decoration: none; }
.walk-row .maps-link .ms { font-size: 16px; }
.asat-box { background: var(--canvas); border-radius: var(--r-ctl); padding: 10px 12px; margin: 10px 0; }
.footnote { padding: 12px 16px 20px; color: var(--slate); font-size: 13px; line-height: 1.5; }

/* next buses at a stop */
.dep-to { font-size: 16px; font-weight: 700; }
.dep-list { list-style: none; margin: 0; padding: 0; }
.dep-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--mist); background: none; text-align: left;
}
button.dep-row { cursor: pointer; }
button.dep-row:hover { background: var(--canvas); }
.dep-row.picked { background: var(--signal-soft); }
.dep-main { min-width: 0; }
.dep-when { font-size: 16px; font-weight: 600; }
.dep-sub { font-size: 14px; color: var(--slate); }
.dep-right { flex: none; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; color: var(--signal); }
.dep-right .ms { font-size: 18px; }
.dep-note { padding: 12px 16px; font-size: 14px; color: var(--slate); }
/* Every bus on a route, with what it's doing; parked ones (depot, last stop, stopped) faded. */
.bus-row { justify-content: flex-start; align-items: flex-start; }
.bus-row .bus-mark { margin-top: 1px; }
.bus-row .dep-when { font-size: 15px; }
.bus-row.idle .bus-mark { opacity: .5; }

/* route view */
.stop-list { list-style: none; margin: 0; padding: 8px 16px 16px; }
.stop-list li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; position: relative; }
.stop-list .sl-rail { position: relative; display: flex; justify-content: center; }
.stop-list .sl-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--c); }
.stop-list li:first-child .sl-rail::after { top: 12px; }
.stop-list li:last-child .sl-rail::after { bottom: calc(100% - 12px); }
.stop-list .sl-rail::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c); margin-top: 7px; position: relative; z-index: 1; }
.stop-list button { border: 0; background: none; text-align: left; padding: 4px 0 10px; cursor: pointer; font-size: 15px; color: var(--ink); }
.stop-list button:hover { text-decoration: underline; }
.stop-list .xfer { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.dir-toggle { margin: 10px 16px 0; }

.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px;
  border: 1px solid var(--mist); background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 14px;
}
.chip-btn:hover { border-color: var(--slate-2); }
.chip-btn .ms { font-size: 18px; }

/* saved routes */
.saved-list { list-style: none; margin: 0; padding: 0; }
.saved-item { display: flex; align-items: center; border-bottom: 1px solid var(--mist); }
.saved-open { flex: 1; min-width: 0; display: block; border: 0; background: none; text-align: left; padding: 12px 4px 12px 16px; cursor: pointer; }
.saved-open:hover { background: var(--canvas); }
.saved-ends { display: flex; align-items: center; gap: 6px; font-size: 16px; min-width: 0; }
.saved-ends span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.saved-ends .ms { font-size: 18px; color: var(--slate); flex: none; }
.saved-routes { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.saved-item .icon-btn { margin-right: 8px; }
.empty { padding: 28px 24px; text-align: center; color: var(--slate); }
.empty .ms { font-size: 36px; color: var(--slate-2); display: block; margin: 0 auto 8px; }
.empty p { margin: 0 0 14px; }

/* skeleton */
.skel { padding: 16px; border-bottom: 1px solid var(--mist); }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 50%, #eceff3 75%); background-size: 200% 100%; animation: sh 1.2s infinite linear; }
.skel i + i { margin-top: 10px; height: 24px; }
.skel i + i + i { height: 12px; width: 60%; }
@keyframes sh { to { background-position: -200% 0; } }

/* ---------- map overlays ---------- */
.hm { position: absolute; transform: translate(-50%, -50%); }
.hm.pin { transform: translate(-50%, -100%); }
.stop-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
}
.stop-dot:hover { transform: scale(1.4); }
#map.z-low .stop-dot:not(.key) { width: 7px; height: 7px; border-width: 1.5px; }
#map.z-far .stop-dot:not(.key) { display: none; }
.stop-dot.key { width: 14px; height: 14px; border-width: 3px; }
/* A trip's halts stay visible at any zoom. */
.stop-dot.trip { border-width: 2.5px; }
#map.z-far .stop-dot.trip { display: block; width: 8px; height: 8px; border-width: 2px; }
.live-bus {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(30,38,51,.45);
}
.live-bus .ms { font-size: 15px; }
#map.z-far .live-bus:not(.planned) { width: 12px; height: 12px; border-radius: 4px; border-width: 1.5px; }
#map.z-far .live-bus:not(.planned) .ms { display: none; }
.live-bus.idle:not(.planned) { opacity: .5; }
/* During a trip: buses not heading your way stay on the map, smaller and faded. */
.live-bus.other:not(.planned) { opacity: .55; transform: scale(.82); }
.live-bus.planned { width: 30px; height: 30px; box-shadow: 0 0 0 4px rgba(15,118,110,.5), 0 1px 3px rgba(30,38,51,.45); z-index: 2; }
.origin-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: var(--shadow-float); }
.dest-pin { width: 27px; height: 40px; display: block; filter: drop-shadow(0 1px 1px rgba(30,38,51,.35)); }
.map-label {
  background: #fff; border-radius: var(--r-plate); padding: 2px 7px; font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-float); transform: translate(10px, -50%); pointer-events: none; position: absolute; left: 0; top: 0;
  font-family: var(--font);
}
.stop-pop { font-family: var(--font); min-width: 190px; max-width: 250px; padding: 2px 2px 0; color: var(--ink); }
.stop-pop h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.stop-pop .pop-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.stop-pop .pop-row { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; cursor: pointer; font-size: 14px; color: var(--ink); text-align: left; font-family: var(--font); }
.stop-pop .pop-row:hover span { text-decoration: underline; }
.stop-pop .pop-sub { font-size: 13px; color: var(--slate); margin: 2px 0; }
.stop-pop .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.stop-pop .chip-btn { font-family: var(--font); }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 25; }
.menu-card {
  position: absolute; top: 60px; left: calc(var(--sidebar-w) - 336px); width: 328px; max-height: calc(100% - 72px); overflow-y: auto;
  background: var(--paper); border-radius: var(--r-surface); box-shadow: var(--shadow-float), 0 0 0 1px rgba(30,38,51,.06);
  padding: 8px 0;
}
.acct { padding: 12px 16px 14px; border-bottom: 1px solid var(--mist); }
.acct h3 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.acct p { margin: 0 0 12px; color: var(--slate); font-size: 14px; }
.acct-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-user .who { min-width: 0; }
.acct-user .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-user .email { color: var(--slate); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-list { list-style: none; margin: 0; padding: 6px 0; }
.menu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: none;
  cursor: pointer; text-align: left; font-size: 15px;
}
.menu-item:hover { background: var(--canvas); }
.menu-item .ms { font-size: 22px; color: var(--slate); }
.menu-item .count { margin-left: auto; color: var(--slate); font-size: 14px; }
.menu-list.signout { border-top: 1px solid var(--mist); }

/* ---------- toast & dialogs ---------- */
#toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: var(--r-ctl); font-size: 15px; box-shadow: var(--shadow-float); max-width: calc(100% - 32px);
}
.modal { position: fixed; inset: 0; background: rgba(30,38,51,.45); display: grid; place-items: center; z-index: 30; padding: 16px; }
/* Never taller than the window (a % height doesn't hold inside the centring grid); the body scrolls. */
.modal-card {
  background: var(--paper); border-radius: var(--r-surface); max-width: 540px; width: 100%;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-float);
}
.modal-card.narrow { max-width: 420px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px 20px; }
.modal-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.modal-body { padding: 0 20px 20px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; color: var(--ink); }
.modal-body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 4px; }
.modal-body ul { padding-left: 18px; margin: 4px 0; }
.modal-body li { margin: 6px 0; font-size: 14px; }
.lead { margin: 4px 0 12px; }
.fine { font-size: 13px; color: var(--slate); margin: 8px 0; }
.field-label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.modal textarea, .modal input[type="email"] {
  width: 100%; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--canvas); padding: 10px 12px;
  font-size: 16px; color: var(--ink); outline: none; resize: vertical;
}
.modal input[type="email"] { height: 44px; }
.modal textarea:focus, .modal input[type="email"]:focus { background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kind { position: relative; }
.kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind span {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--mist);
  font-size: 14px; font-weight: 600; color: var(--slate);
}
.kind input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.kind input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-error { color: var(--error); font-size: 14px; margin: 10px 0 0; }
#feedback-form .btn.block { margin-top: 16px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--slate); font-size: 13px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--mist); }
.signin-stack { display: flex; flex-direction: column; gap: 10px; }
.sent { text-align: center; padding: 8px 0 4px; }
.sent .ms { font-size: 40px; color: var(--ink); }

/* Google map controls clear the panel */
.gm-bundled-control { margin-bottom: 24px !important; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --sidebar-w: 0px; }
  #map-placeholder { padding: 160px 16px calc(var(--sheet-h) + 16px); align-items: start; }
  #sidebar { inset: 0; width: auto; background: transparent; box-shadow: none; pointer-events: none; }
  #search {
    pointer-events: auto; margin: max(8px, env(safe-area-inset-top)) 8px 0; border-radius: var(--r-surface); box-shadow: var(--shadow-float);
    border-bottom: 0; padding: 8px 8px 10px 12px;
  }
  .search-top { margin-bottom: 8px; }
  .brand-logo { height: 28px; }
  .brand-by { width: 105px; }
  .tagline { margin: -7px 0 8px; font-size: 12px; }
  .search-top { gap: 2px; }
  .lang-btn { border: 0; background: transparent; padding: 0 4px 0 6px; gap: 3px; height: 40px; }
  .lang-code { font-size: 14px; }
  .lang-pop { top: 44px; }
  .suggest { margin: 10px -8px -10px -12px; max-height: calc(100dvh - 200px); border-radius: 0 0 var(--r-surface) var(--r-surface); }
  /* With a trip open, the search folds to one line so the map gets the room. */
  #search.compact { padding: 6px 6px 6px 10px; }
  #search.compact .search-top { margin-bottom: 0; }
  #search.compact .brand-text, #search.compact .tagline, #search.compact .dir-form, #search.compact .suggest { display: none !important; }
  #search.compact .brand { flex: none; padding-right: 2px; }
  #search.compact .brand-mark { display: block; }
  #search.compact .trip-summary {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 44px; padding: 0 10px 0 12px;
    border: 0; border-radius: var(--r-ctl); background: var(--canvas); cursor: pointer; text-align: left;
  }
  /* Start over destination, marked like the search fields, so long names in any script fit. */
  .trip-summary .ts-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.25; }
  .trip-summary .ts-text > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .trip-summary .ts-text > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .trip-summary .ts-from::before, .trip-summary .ts-to::before { content: ""; width: 8px; height: 8px; flex: none; }
  .trip-summary .ts-from::before { border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; }
  .trip-summary .ts-to::before { border-radius: 2px; background: var(--ink); }
  .trip-summary > .ms { font-size: 20px; color: var(--slate); }
  #sheet {
    pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h);
    border-radius: var(--r-surface) var(--r-surface) 0 0; box-shadow: 0 -4px 18px rgba(30,38,51,.16); transition: height .22s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sheet.dragging { transition: none; }
  .sheet-handle { display: flex; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; flex: none; }
  .sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: var(--mist); }
  .section-head { padding-top: 8px; }
  #toast { bottom: calc(var(--sheet-h) + 12px); }
  .gm-bundled-control { display: none; }
  .menu { background: rgba(30,38,51,.45); }
  .menu-card {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88dvh; border-radius: var(--r-surface) var(--r-surface) 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .modal { align-items: end; padding: 0; }
  .modal-card, .modal-card.narrow { max-width: none; border-radius: var(--r-surface) var(--r-surface) 0 0; max-height: 92dvh; }
  .modal-body { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  #sheet, .text-btn .ms { transition: none; }
  .skel i, .pulse .live-dot::after { animation: none; }
}

/* ---------- your location ---------- */
.me-dot {
  width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(30,38,51,.18), 0 1px 4px rgba(30,38,51,.35);
}
.locate-btn {
  position: fixed; right: 10px; bottom: 104px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; color: var(--slate); box-shadow: 0 1px 4px rgba(30,38,51,.3); display: grid; place-items: center; cursor: pointer;
}
.locate-btn[hidden] { display: none; }
.locate-btn.on { color: #1a73e8; }
.locate-btn .ms { font-size: 22px; }
@media (max-width: 760px) { .locate-btn { right: 12px; bottom: calc(var(--sheet-h) + 12px); } }
.me-card {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; margin: 10px 16px 0; padding: 10px 12px; border-radius: 10px;
  background: #e8f0fe; color: var(--ink); font-size: 15px; font-weight: 600;
}
.me-card > .ms { color: #1a73e8; font-size: 20px; }
.me-card > span:nth-child(2) { flex: 1; min-width: 0; }
.me-card .me-acc { flex-basis: 100%; padding-left: 28px; font-size: 13px; font-weight: 400; color: var(--slate); }
.me-card.off { background: none; padding: 0; }
.me-card.off .chip-btn .ms { color: #1a73e8; }
.me-card.free > .ms { margin-top: 1px; }
.free-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.free-sub { font-size: 13px; font-weight: 400; color: var(--slate); }
.free-acts { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* ---------- beta ---------- */
.beta-box { background: var(--signal-soft); border-radius: var(--r-ctl); padding: 12px 14px 14px; margin: 4px 0 14px; }
.beta-box h3 { margin: 0 0 4px !important; }
.beta-box p { margin: 0 0 10px; }
.beta-box .chip-btn .ms { font-size: 18px; }
ol.how { margin: 4px 0 12px; padding-left: 22px; }
ol.how li { margin: 6px 0; }
ol.how li::marker { font-weight: 700; }
/* About: questions and answers, one tap to open each */
.faq { font-family: "Overpass", system-ui, sans-serif; border-top: 1px solid var(--mist); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--mist); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 44px; padding: 10px 2px; font-size: 14px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg);
  transition: transform .15s;
}
.faq details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq summary:hover { color: var(--signal); }
.faq details > :not(summary) { font-size: 14px; margin: 0 0 10px; }
.faq details > ul { padding-left: 18px; }
.faq details[open] { padding-bottom: 4px; }
.faq + .credit { border-top: 0; }
.beta-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 16px 0; padding: 8px 6px 8px 12px; border-radius: var(--r-ctl);
  background: var(--canvas); font-size: 13px; color: var(--slate); }
.beta-note .beta { margin-top: 1px; }
.beta-note .beta-text { flex: 1; min-width: 0; }
.beta-note a { color: var(--ink); }
.beta-note .icon-btn.sm { width: 28px; height: 28px; flex: none; margin-top: -4px; }
.beta-note .icon-btn.sm .ms { font-size: 18px; }