:root{
  --bg:#f6f7f9; --surface:#fff; --ink:#15181d; --muted:#6b7280; --line:#e3e6ea;
  --accent:#1466c4; --accent-ink:#fff;
  --live:#0f9d58; --warn:#d1720b; --danger:#c62828;
  --radius:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101317; --surface:#181c22; --ink:#e8eaed; --muted:#9aa3ae; --line:#272c34;
    --accent:#5aa2f0; --accent-ink:#0b1017; --live:#46c98a; --warn:#e6a14a; --danger:#ef6a6a;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,
    "Noto Sans Tamil","Latha","Tamil Sangam MN",sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px calc(14px);background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:500}
h1{margin:0;font-size:19px;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:12px}
.status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.status.ok .dot{background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent)}
.status.err .dot{background:var(--danger)}

.tabs{display:flex;gap:6px;padding:10px 16px 0;background:var(--surface)}
.tab{flex:1;padding:10px;border:1px solid var(--line);border-bottom:none;
  border-radius:10px 10px 0 0;background:transparent;color:var(--muted);
  font:inherit;font-weight:600;cursor:pointer}
.tab.active{background:var(--bg);color:var(--ink);border-color:var(--line)}

main{padding:16px;max-width:760px;margin:0 auto}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.pill{background:var(--accent);color:var(--accent-ink);border-radius:20px;
  padding:1px 9px;font-size:11px;letter-spacing:0}
.pill.muted{background:var(--line);color:var(--muted)}

#map{height:320px;border-radius:var(--radius);border:1px solid var(--line);
  overflow:hidden;background:var(--surface)}

.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.bar label{display:flex;align-items:center;gap:6px;color:var(--muted)}
select,input[type=text],input:not([type]){font:inherit;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.check input{width:16px;height:16px;accent-color:var(--accent)}
button{font:inherit;cursor:pointer}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:7px 12px;border-radius:8px}
.primary{width:100%;padding:15px;border:none;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:16px}
.primary.stop{background:var(--danger)}

.bus{display:flex;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.bus.approaching{border-left-color:var(--live)}
.bus.receding{border-left-color:var(--muted);opacity:.72}
.bus .grow{flex:1;min-width:0}
.bus .route{font-weight:700}
.bus .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.bus .eta{text-align:right;font-weight:700;font-size:17px;white-space:nowrap}
.bus .eta small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.bus.approaching .eta{color:var(--live)}
.bus .note{font-size:12px;color:var(--warn);margin-top:3px}

.sched{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
.sched .when{font-variant-numeric:tabular-nums;font-weight:600}
.sched .in{color:var(--muted);font-size:13px;white-space:nowrap}
.sched.soon .in{color:var(--warn);font-weight:600}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;color:var(--muted);font-size:14px}
.empty strong{display:block;color:var(--ink);margin-bottom:5px;font-size:15px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:16px}
.card h2{margin:0 0 8px;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:14px}
.field{display:block;margin-bottom:14px;font-size:13px;color:var(--muted);font-weight:600}
.field select,.field input{width:100%;margin-top:6px;padding:12px;font-weight:400;color:var(--ink)}
.opt{font-weight:400;opacity:.7}
.ride-status{margin-top:14px;padding:14px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--live) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--live) 35%,transparent);font-size:14px}
.ride-status b{color:var(--live)}
.note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:14px}

.bus-icon{display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:2px solid #fff;border-radius:50%;
  font-size:11px;font-weight:700;box-shadow:0 1px 5px rgba(0,0,0,.4)}
.me-icon{background:var(--danger);border:3px solid #fff;border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,.4)}


/* ---- bilingual route identity ---- */
.bus .head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.num{background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:12px;
  letter-spacing:.02em;padding:2px 8px;border-radius:6px;flex:none}
.num.small{font-size:11px;padding:1px 6px}
.dest-ta{font-size:18px;font-weight:700;line-height:1.3}
.dest-en{font-size:14px;font-weight:600;color:var(--ink);margin-top:1px}
.dest-en .via,.via-ta{font-weight:400;color:var(--muted);font-size:12.5px}
.via-ta{margin-top:1px}
.thru{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--warn);border:1px solid currentColor;border-radius:5px;padding:1px 5px}
.empty .en{display:block;color:var(--muted);font-size:13px;margin-bottom:10px}
.empty p{margin:0;font-size:13.5px}
.ta{font-weight:400;opacity:.75}

.sched{align-items:flex-start}
.sched .left{display:flex;align-items:center;gap:9px;min-width:0}
.sched .names{display:flex;flex-direction:column;min-width:0}
.sched .names b{font-size:15px;line-height:1.25}
.sched .names .en{font-size:12px;color:var(--muted)}
.sched .right{text-align:right;flex:none}
.est{display:block;font-size:10px;color:var(--warn);margin-top:2px}


/* ---- current position and next stop ---- */
.stops{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:5px}
.stops .lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.stops b{font-size:15px}
.stops .en2{color:var(--muted);font-size:12px;font-weight:400}
.stops .nxt b{color:var(--live)}
.stops .d{float:right;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stops .rem{font-size:11.5px;color:var(--muted)}

/* ---- moving bus pins ---- */
.bus-pin{position:relative;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:#fff;letter-spacing:-.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.45)}
.bus-pin.live{background:var(--live);border:2px solid #fff}
.bus-pin.est{background:var(--accent);border:2px dashed #fff}
.bus-pin .arrow{position:absolute;inset:-7px;pointer-events:none}
.bus-pin .arrow::before{content:'';position:absolute;top:-3px;left:50%;
  margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:8px solid var(--accent);filter:drop-shadow(0 0 1px #fff)}
.bus-pin.live .arrow::before{border-bottom-color:var(--live)}

/* ---- popup ---- */
.pop{font:13px/1.4 system-ui,"Noto Sans Tamil",sans-serif}
.pop-head{margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid #ddd}
.pop-head b{font-size:16px;display:inline-block;margin-right:5px}
.pop-en{color:#666;font-size:11.5px;font-weight:400}
.pop table{border-collapse:collapse;width:100%}
.pop th{text-align:left;font-weight:500;color:#777;padding:2px 10px 2px 0;
  white-space:nowrap;vertical-align:top;font-size:11.5px}
.pop td{padding:2px 0;font-weight:600}
.pop-est{margin-top:7px;padding-top:6px;border-top:1px dashed #ccc;
  color:#b26a00;font-size:11px;font-weight:600}

/* ---- disclaimer ---- */
.disclaimer{margin-top:12px;padding:11px 13px;border-radius:10px;
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.disclaimer b{display:block;font-size:13.5px;margin-bottom:3px}
.disclaimer span{font-size:12px;color:var(--muted);line-height:1.45}
.bus.estimated{border-left-color:var(--accent)}

.pop-track{margin-top:7px;padding:7px 8px;border-radius:7px;
  background:rgba(15,157,88,.12);border:1px solid rgba(15,157,88,.4);
  color:#0b7a44;font-size:11px;font-weight:600;line-height:1.35}

/* ---- coming to your stop ---- */
.arr{display:flex;gap:13px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.arr.soon{border-left-color:var(--warn)}
.arr .when{min-width:52px;text-align:center;font-size:23px;font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums}
.arr.soon .when{color:var(--warn)}
.arr .when small{display:block;font-size:10px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;margin-top:2px}
.arr .meta{font-size:12px;color:var(--muted);margin-top:3px}
.arr .meta b{color:var(--ink)}
.trackable{margin-top:4px;font-size:11px;color:var(--live);font-weight:600}
.atnow{margin-top:4px;font-size:13px}
.atnow b{font-size:14.5px}
.atnow.pending{color:var(--muted);font-size:12px}
.arr .head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}


/* the bus actually heading to you */
.bus-pin.toyou{background:var(--warn);border:3px solid #fff;
  animation:pulse 1.8s ease-in-out infinite}
.bus-pin.toyou .arrow::before{border-bottom-color:var(--warn)}
@keyframes pulse{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 0 rgba(209,114,11,.55)}
  50%{box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 12px rgba(209,114,11,0)}}
.arr.findable{cursor:pointer}
.arr.findable:active{transform:scale(.995)}
.showmap{margin-top:5px;font-size:11.5px;font-weight:600;color:var(--accent)}

/* ---- approaching / leaving tabs ---- */
.tabs{display:flex;gap:8px;margin:20px 0 12px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 8px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--muted);font:inherit;cursor:pointer;
  position:relative;transition:border-color .12s,color .12s}
.tab .ta{font-size:13px;font-weight:700;line-height:1.2}
.tab .en{font-size:11px;letter-spacing:.02em}
.tab .pill{position:absolute;top:-7px;right:-4px;font-size:10px;padding:1px 7px}
.tab.active{border-color:var(--accent);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent)}
#panel-departing h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:20px 0 9px;font-weight:600}
.empty p{margin:8px 0 0;font-size:12.5px}
#panel-departing h3 .cnt{text-transform:none;letter-spacing:0;font-weight:500;
  color:var(--muted);margin-left:6px}
.sched .names b{font-size:14.5px;line-height:1.3}
.sched .names .en{font-size:11.5px;line-height:1.35}
.sched .left{gap:10px}

/* ---- location picker ---- */
.picker{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.picker label{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.picker select{flex:1;min-width:0;font-size:14px;font-weight:600;padding:8px 10px}

/* ---- already gone ---- */
.arr.gone{border-left-color:var(--muted);opacity:.85}
.arr.gone .when{color:var(--muted);font-size:19px}
.arr.gone .when small{font-size:9px}
.tabs{flex-wrap:wrap}
.tabs .tab{min-width:0;flex:1 1 30%}
.tab .en{text-align:center}
.gps-warn{margin-bottom:12px;padding:10px 13px;border-radius:10px;font-size:12.5px;
  background:color-mix(in srgb,var(--danger) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);line-height:1.45}
.ttfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
  font-size:12.5px;color:var(--muted);cursor:pointer}
.ttfilter .hint{width:100%;font-size:11px;opacity:.8;margin-left:24px}

/* ---- readable clock ---- */
.clock{display:flex;flex-direction:column;align-items:center;line-height:1.15;
  min-width:64px;flex:none}
.clock b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.clock i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);
  letter-spacing:.06em;margin-top:-1px}
.clock em{font-style:normal;font-size:10.5px;color:var(--warn);font-weight:600;
  margin-top:2px;white-space:nowrap}
.clock.big b{font-size:19px}
.sched .left{align-items:flex-start}

.no-service{background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.linkish{background:none;border:none;padding:0;font:inherit;font-weight:700;
  color:var(--accent);text-decoration:underline;cursor:pointer}

/* who is signed in */
.greet{display:block;font-size:12px;font-weight:600;color:var(--accent);
  margin-bottom:1px;letter-spacing:.01em}
.signout-bar{display:flex;align-items:center;gap:14px;margin:22px 0 6px;
  padding-top:16px;border-top:1px solid var(--line)}
.signout-bar .ghost{font-weight:600}
.privacy-link{color:var(--muted);font-size:12px;text-decoration:none}

.danger-link{background:none;border:none;padding:0;font:inherit;font-size:12px;
  color:var(--danger);text-decoration:underline;cursor:pointer;margin-left:auto}
.delete-box{border-color:color-mix(in srgb,var(--danger) 40%,transparent);margin-top:12px}


/* ---------- language switching ---------- */
/* Both halves are always in the HTML; only one is shown. */
body.lang-en .t-ta{display:none}
body.lang-ta .t-en{display:none}
.t-sep{display:none;color:var(--muted)}
body.lang-both .t-sep{display:inline}
.t-ta,.t-en{display:inline}

.lang-switch{display:inline-block;margin-bottom:3px;font-size:11px;padding:2px 6px;
  border-radius:6px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);max-width:140px}
.tab .t-ta,.tab .t-en{display:block}
.tab .t-sep{display:none !important}

/* language row sits below the greeting with room to breathe */
.langrow{display:flex;align-items:center;gap:7px;margin-top:8px;margin-bottom:4px}
.langlabel{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;white-space:nowrap}
.lang-switch{margin:0;font-size:12px;padding:3px 7px;max-width:120px}

/* Section heading inside a tab that holds two kinds of bus, so "leaves from
   here" is never mistaken for "only calls in on its way somewhere else". */
.grp{display:flex;align-items:center;gap:8px;margin:16px 2px 8px;
     font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
     color:var(--muted)}
.grp:first-child{margin-top:2px}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}
.grp-n{order:3;flex:none;min-width:20px;padding:1px 7px;border-radius:9px;
       background:var(--line);color:var(--ink);font-size:11px;
       letter-spacing:0;text-transform:none}
.grp-none{color:var(--muted);font-size:13px;padding:2px 4px 6px}

/* Shown only when the data on screen came from cache because the phone had no
   signal. Silence here would be a lie by omission. */
.stale{background:#fff4e0;color:#7a4a00;border:1px solid #e8c88a;border-radius:var(--radius);
       padding:9px 12px;margin:0 0 10px;font-size:13px;line-height:1.45}
@media (prefers-color-scheme: dark){
  .stale{background:#3a2c10;color:#f0d39a;border-color:#6b5320}
}

/* ---- phones -----------------------------------------------------------
   Nothing here had ever been sized for a narrow screen. English survived by
   luck: its words are short. Tamil words are long and contain no break
   opportunity, so a label that fitted in English escaped its box entirely.

   Two rules do most of the work. Let long words break, and stop the four
   tabs competing for width on one row. */
.tab{min-width:0}
.tab .ta,.tab .en{overflow-wrap:anywhere;text-align:center;max-width:100%}
h1{overflow-wrap:anywhere}

/* A popup wide enough to cover the zoom buttons is a popup you cannot close. */
.leaflet-popup-content{width:auto !important;max-width:72vw}

@media (max-width: 560px){
  header{flex-wrap:wrap;gap:6px;padding:12px 14px}
  header .place{flex:1 1 100%;min-width:0}
  header h1{font-size:17px}
  /* The status moves under the name rather than being squeezed off the edge,
     which is what truncated "3 buses scheduled" in Tamil. */
  .status{flex:1 1 100%;white-space:normal}
  main{padding:14px}

  /* Two rows of two. Every label then gets the same room, and no tab has to
     shrink because its neighbour is wordy. */
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tabs .tab{flex:none}
  .tab .ta{font-size:12px}
  .tab .en{font-size:10.5px}
  .tab .pill{top:-6px;right:-3px}
}