/* ===========================================================================
   Station Bus Nation — TRANSIT GUIDE
   ---------------------------------------------------------------------------
   Built to the conventions real transit sites follow, not to our main site's
   look. The main site is warm navy + gold + serif display; this is civic slate,
   flat surfaces, hairline borders, and colour reserved almost entirely for
   MEANING — route mode and service status. That colour-as-meaning contract is
   the strongest "official utility" signal a transit site has, so nothing here
   uses a mode colour as decoration.

   Palette: "Civic Slate". Type: Archivo (display) + Public Sans (body) —
   Public Sans is the US federal design system face, built for civic legibility.
   Radius ceiling: 8px cards, 4px inputs, full only on bullets and pills.
   =========================================================================== */

:root{
  /* surfaces — near monochrome by design */
  --tg-bg:#F7F8FA;
  --tg-surface:#FFFFFF;
  --tg-dark:#141A22;
  --tg-dark-2:#1E2630;
  --tg-line:#D8DDE3;
  --tg-line-dark:#313B47;

  /* ink */
  --tg-ink:#141A22;
  --tg-mute:#5B6673;
  --tg-inv:#EDF1F5;
  --tg-inv-mute:#9AA5B1;

  /* institutional accents — chrome only */
  --tg-primary:#12457A;
  --tg-secondary:#0F7B6C;

  /* service status — always paired with a word and an icon, never colour alone */
  --tg-ok:#1B7F3B;
  --tg-warn:#8A5A00;
  --tg-alert:#B3261E;

  /* MODE colours — identity only. Never used as a button fill or background. */
  --m-rail:#1565C0;
  --m-metro:#C7301F;
  --m-bus:#00796B;
  --m-light:#5E35B1;
  --m-ferry:#0E7C9B;
  --m-shuttle:#B48A00;
  --m-other:#5B6673;

  --tg-focus:#2E9BFF;
  --tg-max:1180px;

  --r-card:8px;
  --r-input:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--tg-bg); color:var(--tg-ink);
  font-family:"Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo","Public Sans",sans-serif; margin:0; line-height:1.15;
  letter-spacing:-.01em; font-weight:700}
h1{font-size:clamp(2.25rem,4.4vw,3rem)}
h2{font-size:1.75rem} h3{font-size:1.25rem} h4{font-size:1.0625rem; font-weight:600}
p{margin:0 0 .75rem}
a{color:var(--tg-primary)}
small,.tg-sm{font-size:.875rem}
.tg-cap{font-size:.75rem}
time,.tg-num,.tg-count{font-variant-numeric:tabular-nums}

/* focus — 2px outline + 2px offset, distinct from the accent */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--tg-focus); outline-offset:2px}

.tg-skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--tg-dark);
  color:#fff; padding:12px 18px; font-weight:600; text-decoration:none}
.tg-skip:focus{left:8px; top:8px}

.tg-wrap{width:100%; max-width:var(--tg-max); margin:0 auto; padding:0 20px}
.tg-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ utility bar */
.tg-util{background:var(--tg-dark-2); color:var(--tg-inv-mute); font-size:.8125rem;
  border-bottom:1px solid var(--tg-line-dark)}
.tg-util .tg-wrap{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; min-height:40px; padding-block:6px}
.tg-util a{color:var(--tg-inv); text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:7px; min-height:32px}
.tg-util a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- header */
.tg-head{background:var(--tg-dark); color:var(--tg-inv); position:sticky; top:0; z-index:40}
.tg-head .tg-wrap{display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap}
.tg-mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tg-inv)}
.tg-mark .tg-badge{width:34px;height:34px;border-radius:var(--r-card);background:var(--tg-primary);
  color:#fff; display:grid; place-items:center; font-size:19px}
.tg-mark b{font-family:"Archivo",sans-serif; font-size:1.15rem; line-height:1.05; display:block;
  letter-spacing:-.01em}
.tg-mark span span{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tg-inv-mute)}
.tg-nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.tg-nav a{color:var(--tg-inv-mute); text-decoration:none; font-weight:600; font-size:.9375rem;
  padding:11px 13px; border-radius:var(--r-card); display:inline-flex; align-items:center; gap:7px;
  min-height:44px}
.tg-nav a:hover{background:var(--tg-dark-2); color:var(--tg-inv)}
.tg-nav a.on{background:var(--tg-primary); color:#fff}

/* ---------------------------------------------- alert banner (only if real) */
.tg-alert{display:flex; gap:12px; align-items:flex-start; background:var(--tg-surface);
  border:1px solid var(--tg-line); border-left:6px solid var(--tg-warn);
  border-radius:var(--r-card); padding:13px 16px; margin:0 0 16px}
.tg-alert i{font-size:20px; color:var(--tg-warn); flex:0 0 auto}
.tg-alert b{display:block; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tg-warn)}
.tg-alert p{margin:2px 0 0; font-size:.9375rem; color:var(--tg-ink)}
.tg-alert.info{border-left-color:var(--tg-primary)} .tg-alert.info i,.tg-alert.info b{color:var(--tg-primary)}

/* ------------------------------------------------------------------ intro */
.tg-intro{background:var(--tg-dark); color:var(--tg-inv); padding:30px 0 34px}
.tg-intro h1{color:#fff}
.tg-intro p{color:var(--tg-inv-mute); font-size:1.0625rem; max-width:62ch; margin-top:10px}
.tg-kick{display:inline-flex; align-items:center; gap:9px; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tg-inv-mute); margin-bottom:10px}
.tg-kick::before{content:""; width:24px; height:3px; background:var(--tg-primary)}

/* photo behind the intro band. Feathering is done here, not baked into the
   file, so the same JPEG blends at any width. Three layers: a radial mask
   dissolves the outer edges, a slate wash keeps the headline legible, and a
   top/bottom vignette stops the band ending on a hard line. The planner card
   overlaps this band at z-index 5, so everything here stays at 1-2. */
.tg-intro{position:relative; overflow:hidden}
.tg-intro.has-photo{padding:48px 0 56px}
.tg-intro .tg-wrap{position:relative; z-index:3}
.tg-intro-photo{position:absolute; inset:0; z-index:1; opacity:.68;
  background-size:cover; background-position:58% 54%;
  -webkit-mask-image:radial-gradient(130% 120% at 74% 50%, #000 20%, rgba(0,0,0,.5) 54%, transparent 84%);
          mask-image:radial-gradient(130% 120% at 74% 50%, #000 20%, rgba(0,0,0,.5) 54%, transparent 84%)}
.tg-intro::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    var(--tg-dark) 0%, var(--tg-dark) 26%, rgba(20,26,34,.80) 48%,
    rgba(20,26,34,.38) 70%, rgba(20,26,34,.26) 100%)}
.tg-intro::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    var(--tg-dark) 0%, rgba(20,26,34,0) 22%, rgba(20,26,34,0) 74%, var(--tg-dark) 100%)}
@media(max-width:860px){
  .tg-intro.has-photo{padding:34px 0 40px}
  .tg-intro-photo{opacity:.32; background-position:62% 52%}
  .tg-intro::before{background:linear-gradient(180deg,
    rgba(20,26,34,.86) 0%, rgba(20,26,34,.80) 60%, var(--tg-dark) 100%)}
}

/* scene photo — feathered so it blends instead of ending in a hard box.
   margin:0 is load-bearing: <figure> carries a 40px UA side margin. */
.tg-photo{position:relative; margin:0}
.tg-photo img{display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 55%, transparent 92%);
          mask-image:radial-gradient(115% 115% at 50% 50%, #000 55%, transparent 92%)}
.tg-photo figcaption{font-size:.8125rem; color:var(--tg-mute); margin-top:8px; text-align:center}

/* ------------------------------------------- Eastern Corridor line diagram
   The coverage area drawn the way a transit system draws itself: one line,
   north to south, each state a station. Built at runtime from TG.states and
   TG.agencies so the counts can never drift. States we cover that sit off the
   corridor hang off it as branch stops rather than pretending to be on it. */
.tg-corridor{position:relative; padding-left:34px}
.tg-corridor::before{content:""; position:absolute; left:11px; top:10px; bottom:10px; width:4px;
  border-radius:2px;
  background:linear-gradient(to bottom, var(--tg-secondary) 0%, var(--tg-primary) 14%,
    var(--tg-primary) 86%, var(--tg-secondary) 100%)}
.tg-stop{position:relative; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; text-decoration:none; color:inherit; border-radius:4px}
.tg-stop::before{content:""; position:absolute; left:-28px; top:14px; width:12px; height:12px;
  border-radius:50%; background:var(--tg-surface); border:3px solid var(--tg-primary);
  box-shadow:0 0 0 3px var(--tg-surface)}
.tg-stop:hover{background:var(--tg-bg)}
.tg-stop:hover::before{background:var(--tg-secondary); border-color:var(--tg-secondary)}
.tg-stop-ab{font:700 .8125rem/1 "Archivo","Public Sans",sans-serif; letter-spacing:.06em;
  color:var(--tg-primary); background:var(--tg-bg); border:1px solid var(--tg-line);
  border-radius:4px; padding:4px 7px; min-width:38px; text-align:center; flex:0 0 auto}
.tg-stop-nm{font-weight:600; color:var(--tg-ink)}
.tg-stop-ct{font-size:.8125rem; color:var(--tg-mute); margin-left:auto;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.tg-stop.branch{margin-left:20px}
.tg-stop.branch::before{left:-48px; width:10px; height:10px; border-style:dashed}
.tg-stop.branch::after{content:""; position:absolute; left:-40px; top:19px; width:20px; height:2px;
  background:var(--tg-line-dark); opacity:.4}
.tg-corridor-cap{display:flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tg-mute); margin:0 0 6px -34px}
.tg-corridor-cap i{color:var(--tg-primary); font-size:16px}
@media(max-width:560px){
  .tg-corridor{padding-left:30px}
  .tg-stop-ct{margin-left:0}
  .tg-stop-ct::before{content:"\00b7\00a0"}
  .tg-stop-nm{font-size:.9375rem}
}
.tg-split{display:grid; gap:30px; grid-template-columns:1.05fr .95fr; align-items:start}
@media(max-width:860px){.tg-split{grid-template-columns:1fr}}
.tg-panel-plain{background:var(--tg-surface); border:1px solid var(--tg-line);
  border-radius:var(--r-card); padding:20px}

/* --------------------------------------------------------------- sections */
.tg-sec{padding:36px 0}
.tg-sec.alt{background:var(--tg-surface); border-block:1px solid var(--tg-line)}
.tg-sec-head{margin-bottom:20px}
.tg-sec-head p{color:var(--tg-mute); max-width:66ch; margin-top:6px}

/* ------------------------------------------------- planner (the real hero) */
.tg-planner{background:var(--tg-surface); border:1px solid var(--tg-line);
  border-radius:var(--r-card); padding:20px; margin-top:-26px; position:relative; z-index:5}
.tg-planner h2{font-size:1.25rem; margin-bottom:14px}
.tg-fields{display:grid; gap:12px; grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.tg-fields{grid-template-columns:1fr}}
.tg-field label{display:block; font-weight:600; font-size:.8125rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tg-mute); margin-bottom:6px}
.tg-field select,.tg-field input{width:100%; min-height:48px; padding:12px 13px; font-size:1rem;
  font-family:inherit; color:var(--tg-ink); background:var(--tg-surface);
  border:1px solid var(--tg-line); border-radius:var(--r-input)}
.tg-field select:disabled{background:var(--tg-bg); color:var(--tg-mute)}

/* segmented control — neutral, never mode-coloured */
.tg-seg{display:flex; gap:0; margin-top:16px; border:1px solid var(--tg-line);
  border-radius:var(--r-input); overflow:hidden; flex-wrap:wrap}
.tg-seg button{flex:1 1 180px; min-height:48px; display:flex; align-items:center;
  justify-content:center; gap:9px; padding:12px 14px; cursor:pointer;
  font:600 .9375rem/1 "Public Sans",sans-serif; color:var(--tg-mute);
  background:var(--tg-surface); border:0; border-right:1px solid var(--tg-line)}
.tg-seg button:last-child{border-right:0}
.tg-seg button i{font-size:18px}
.tg-seg button.on{background:var(--tg-dark); color:#fff}

/* ----------------------------------------------------------------- cards */
.tg-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
/* when a card has its route list open, let it span wider so the rows breathe */
/* still widen a little so route names and times don't wrap awkwardly */
.tg-card:has(.tg-routes[open]){grid-column:span 2; max-width:720px}
@media(max-width:900px){.tg-card:has(.tg-routes[open]){grid-column:span 1; max-width:none}}
/* Single vertical column on purpose. Multi-column looked tidier closed, but the
   moment a rider expanded a route the stops flowed into the next column and the
   list jumped sideways off screen. Vertical keeps what you opened under your
   finger, which matters more than density. */
.tg-card{background:var(--tg-surface); border:1px solid var(--tg-line);
  border-radius:var(--r-card); padding:16px 18px; display:flex; flex-direction:column; gap:9px}
.tg-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.tg-card h3,.tg-card h4{margin:0}
.tg-card p{margin:0; font-size:.9375rem; color:var(--tg-mute)}
.tg-full{font-size:.8125rem; color:var(--tg-mute)}

/* mode badges — identity. Circle-ish pill, colour is the meaning. */
.tg-modes{display:flex; flex-wrap:wrap; gap:6px}
.tg-mode{display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700;
  color:#fff; padding:4px 10px; border-radius:999px; white-space:nowrap; background:var(--m-other)}
.tg-mode.rail{background:var(--m-rail)}
.tg-mode.metro{background:var(--m-metro)}
.tg-mode.bus{background:var(--m-bus)}
.tg-mode.light{background:var(--m-light)}
.tg-mode.ferry{background:var(--m-ferry)}
.tg-mode.shuttle{background:var(--m-shuttle)}

/* state chips are neutral with a coloured dot — keeps colour unique to identity */
.tg-flag{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600;
  padding:4px 10px; border-radius:999px; white-space:nowrap; background:var(--tg-bg);
  border:1px solid var(--tg-line); color:var(--tg-mute)}
.tg-flag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--tg-mute)}
.tg-flag.live::before{background:var(--tg-ok)}
.tg-flag.sched::before{background:var(--tg-mute)}

/* --------------------------------------------------------------- buttons */
.tg-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 16px; font:600 .9375rem/1 "Public Sans",sans-serif;
  border-radius:var(--r-input); text-decoration:none; cursor:pointer;
  border:1px solid var(--tg-primary); background:var(--tg-primary); color:#fff}
.tg-btn:hover{filter:brightness(1.08)}
.tg-btn.ghost{background:var(--tg-surface); border-color:var(--tg-line); color:var(--tg-ink)}
.tg-btn.dark{background:var(--tg-dark); border-color:var(--tg-dark); color:#fff}
.tg-btn.sm{min-height:40px; padding:9px 13px; font-size:.875rem}
.tg-btn.wide{width:100%}
.tg-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}

/* ---------------------------------------------------------------- notices */
.tg-note{display:flex; gap:11px; align-items:flex-start; font-size:.875rem; line-height:1.6;
  color:var(--tg-mute); background:var(--tg-surface); border:1px solid var(--tg-line);
  border-left:4px solid var(--tg-primary); border-radius:var(--r-card);
  padding:13px 15px; margin-top:16px}
.tg-note i{font-size:18px; color:var(--tg-primary); flex:0 0 auto}
.tg-note.warn{border-left-color:var(--tg-warn)} .tg-note.warn i{color:var(--tg-warn)}

.tg-updated{display:inline-flex; align-items:center; gap:7px; font-size:.8125rem;
  color:var(--tg-mute); margin-top:10px}
.tg-updated::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--tg-mute)}
.tg-updated.live::before{background:var(--tg-ok)}

.tg-empty{text-align:center; padding:52px 20px; color:var(--tg-mute)}
.tg-empty i{font-size:44px; opacity:.3; display:block; margin-bottom:12px}
.tg-empty p{max-width:46ch; margin:0 auto}

.tg-count{font-size:.875rem; color:var(--tg-mute); margin-bottom:14px}

/* ------------------------------------------------------------------ steps */
.tg-steps{counter-reset:s; display:grid; gap:11px; margin:12px 0 0; padding:0; list-style:none}
.tg-steps li{counter-increment:s; position:relative; padding-left:42px; font-size:.9375rem;
  line-height:1.6}
.tg-steps li::before{content:counter(s); position:absolute; left:0; top:-1px; width:28px; height:28px;
  border-radius:50%; background:var(--tg-dark); color:#fff; display:grid; place-items:center;
  font:700 .8125rem/1 "Archivo",sans-serif}

/* transfer indicator */
.tg-xfer{display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.875rem;
  color:var(--tg-mute)}
.tg-xfer i{color:var(--tg-primary)}

/* ------------------------------------------------------------------ table */
.tg-table-wrap{overflow-x:auto; border:1px solid var(--tg-line); border-radius:var(--r-card);
  background:var(--tg-surface)}
.tg-table{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:520px}
.tg-table th,.tg-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--tg-line)}
.tg-table th{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tg-mute);
  font-weight:700; background:var(--tg-bg)}
.tg-table tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ modal */
.tg-modal{position:fixed; inset:0; background:rgba(20,26,34,.7); display:none;
  place-items:center; padding:20px; z-index:100}
.tg-modal.open{display:grid}
.tg-modal-box{background:var(--tg-surface); border-radius:var(--r-card); max-width:500px;
  width:100%; padding:24px}
.tg-modal-box h3{margin-bottom:8px; display:flex; align-items:center; gap:10px}
.tg-modal-box h3 i{color:var(--tg-warn); font-size:23px}
.tg-modal-box p{font-size:.9375rem; color:var(--tg-mute)}
.tg-modal-url{background:var(--tg-bg); border:1px solid var(--tg-line); border-radius:var(--r-input);
  padding:10px 12px; font-family:ui-monospace,Menlo,monospace; font-size:.8125rem;
  word-break:break-all; color:var(--tg-ink); margin:12px 0 16px}
.tg-modal-acts{display:flex; gap:10px; flex-wrap:wrap}
.tg-modal-acts .tg-btn{flex:1 1 150px}

/* ----------------------------------------------------------------- footer */
.tg-foot{background:var(--tg-dark); color:var(--tg-inv-mute); padding:32px 0 24px;
  margin-top:40px; font-size:.875rem}
.tg-foot a{color:var(--tg-inv); text-decoration:none}
.tg-foot a:hover{text-decoration:underline}
.tg-foot-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tg-foot h4{color:#fff; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:10px}
.tg-foot-links{display:flex; flex-direction:column; gap:8px}
.tg-foot-links a{min-height:24px}
.tg-foot-bottom{border-top:1px solid var(--tg-line-dark); margin-top:24px; padding-top:16px;
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; font-size:.8125rem}

.tg-legal{font-size:.8125rem; line-height:1.7; color:var(--tg-mute)}

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

/* inline planner (Maps hand-off) */
.tg-panel-inline{margin-top:2px}
.tg-panel-inline .tg-field input{min-height:48px}

/* ---------------------------------------------------- route list (from GTFS) */
.tg-routes{border:1px solid var(--tg-line); border-radius:var(--r-card);
  background:var(--tg-bg); margin-top:2px}
.tg-routes summary{cursor:pointer; padding:11px 14px; font-weight:600; font-size:.875rem;
  color:var(--tg-primary); min-height:44px; display:flex; align-items:center; gap:8px;
  list-style:none}
.tg-routes summary::-webkit-details-marker{display:none}
.tg-routes summary::before{content:"\ea5f"; font-family:"tabler-icons"; font-size:16px;
  transition:transform .15s}
.tg-routes[open] summary::before{transform:rotate(90deg)}
.tg-routes summary:hover{text-decoration:underline}
.tg-route-list{list-style:none; margin:0; padding:0 14px 12px;
  max-height:min(75vh,680px); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain}
.tg-route{display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--tg-line)}
.tg-route:last-child{border-bottom:0}
/* route bullet — rounded rect for bus, circle for rapid transit, per signage convention */
.tg-bullet{min-width:34px; height:26px; padding:0 7px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-size:.8125rem; font-weight:700; color:#fff;
  flex:0 0 auto; font-variant-numeric:tabular-nums}
.tg-bullet.metro,.tg-bullet.rail{border-radius:999px; min-width:26px}
.tg-route-n{font-size:.8125rem; color:var(--tg-mute); line-height:1.35}

/* ------------------------------------------------- feed facts (from GTFS) */
.tg-facts{display:flex; flex-direction:column; gap:6px; background:var(--tg-bg);
  border:1px solid var(--tg-line); border-radius:var(--r-card); padding:10px 12px}
.tg-fact{display:flex; gap:9px; align-items:flex-start; font-size:.8125rem; color:var(--tg-mute);
  line-height:1.45}
.tg-fact i{font-size:16px; color:var(--tg-primary); flex:0 0 auto; margin-top:1px}
.tg-fact b{color:var(--tg-ink)}
.tg-fact.warn i{color:var(--tg-warn)}
.tg-fact a{font-variant-numeric:tabular-nums}
.tg-route-txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.tg-route-d{font-size:.75rem; color:var(--tg-mute); opacity:.85}
.tg-route-out{margin-left:auto; flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:var(--r-input); color:var(--tg-mute);
  text-decoration:none; border:1px solid transparent}
.tg-route-out:hover{background:var(--tg-surface); border-color:var(--tg-line); color:var(--tg-primary)}
.tg-route-out i{font-size:15px}
.tg-route-w{font-size:.75rem; color:var(--tg-ink); font-weight:600;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------ stop lists (lazy loaded) */
.tg-route{display:block; padding:0}
/* the entire row is a button — obvious target, obvious label */
.tg-route-main{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:8px 4px; border-radius:var(--r-input);
  font:inherit; color:inherit}
.tg-route-main:hover{background:var(--tg-surface)}
.tg-route-main:hover .tg-route-n{text-decoration:underline}
.tg-route-cta{margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:700; color:var(--tg-primary); white-space:nowrap;
  border:1px solid var(--tg-line); border-radius:999px; padding:5px 10px; background:var(--tg-surface)}
.tg-route-cta i{font-size:14px; transition:transform .15s}
.tg-route-main[aria-expanded="true"] .tg-route-cta{background:var(--tg-primary);
  border-color:var(--tg-primary); color:#fff}
.tg-route-main[aria-expanded="true"] .tg-route-cta i{transform:rotate(180deg)}
@media(max-width:520px){.tg-route-cta-txt{display:none}}
.tg-route-foot{padding:0 4px 8px 44px}
.tg-route-out{display:inline-flex; align-items:center; gap:7px; font-size:.75rem;
  color:var(--tg-mute); text-decoration:none; width:auto; height:auto; border:0; padding:0}
.tg-route-out:hover{color:var(--tg-primary); text-decoration:underline; background:none}
.tg-stoplist{padding:2px 4px 10px 44px}
.tg-stops-tag{font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tg-primary); background:var(--tg-bg); border:1px solid var(--tg-line);
  border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:1px}
.tg-stops-loading{font-size:.8125rem; color:var(--tg-mute)}
.tg-stops-dir{font-size:.75rem; color:var(--tg-mute); margin:6px 0 4px}
.tg-stops{list-style:none; margin:0; padding:0; border-left:2px solid var(--tg-line)}
.tg-stops li{position:relative; padding:3px 0 3px 16px; font-size:.8125rem; color:var(--tg-ink)}
.tg-stops li::before{content:""; position:absolute; left:-5px; top:10px; width:8px; height:8px;
  border-radius:50%; background:var(--tg-surface); border:2px solid var(--tg-mute)}
.tg-stops li:first-child::before,.tg-stops li:last-child::before{
  background:var(--tg-primary); border-color:var(--tg-primary)}
.tg-leaves{font-size:.75rem; color:var(--tg-mute); margin:10px 0 2px; line-height:1.5;
  padding-top:10px; border-top:1px solid var(--tg-line)}
.tg-btn.sm i + i,.tg-btn.sm .ti-external-link{font-size:13px; opacity:.75; margin-left:2px}

/* ===========================================================================
   DEPARTURE BOARD
   ---------------------------------------------------------------------------
   The board you stand under in a concourse. Dark slab, tabular figures, one
   row per route, colour used only for service state — which is the same
   colour-as-meaning contract the rest of this stylesheet keeps.

   Deliberately NOT a split-flap pastiche: the animation is charming for about
   four seconds and then it is a thing standing between a rider and the answer
   to "have I missed the last bus". The drama is in the typography instead.
   =========================================================================== */
.db-board{
  background:var(--tg-dark);border:1px solid var(--tg-line-dark);border-radius:8px;
  overflow:hidden;color:var(--tg-inv);
}
.db-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--tg-line-dark);
  background:var(--tg-dark-2);
}
.db-title{display:flex;align-items:center;gap:9px;font-family:Archivo,system-ui,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.db-title i{font-size:19px;color:#F2B33D}
.db-pick{margin-left:auto}
.db-pick select{
  background:var(--tg-dark);color:var(--tg-inv);border:1px solid var(--tg-line-dark);
  border-radius:4px;padding:7px 10px;font:inherit;font-size:13px;max-width:210px;
}
.db-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.db-clock{text-align:right;line-height:1.25}
.db-clock span{font-variant-numeric:tabular-nums;font-weight:700;font-size:17px}
.db-clock small{display:block;font-size:11px;color:var(--tg-inv-mute)}

.db-cols{
  display:grid;grid-template-columns:78px 1fr 150px;gap:12px;
  padding:8px 16px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tg-inv-mute);border-bottom:1px solid var(--tg-line-dark);
}
.db-rows{list-style:none;margin:0;padding:0}
.db-row{
  display:grid;grid-template-columns:78px 1fr 150px;gap:12px;align-items:center;
  padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.db-row:last-child{border-bottom:0}
.db-badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:26px;
  border-radius:4px;padding:0 8px;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.db-dest b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.db-dest small{display:block;font-size:11.5px;color:var(--tg-inv-mute);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-state{text-align:right}
.db-state b{display:block;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.db-state small{display:block;font-size:11px;color:var(--tg-inv-mute);margin-top:2px}

/* service state — the only colour on the board */
.db-row.is-run  .db-state b{color:#4FD18B}
.db-row.is-last .db-state b{color:#F2B33D}
.db-row.is-soon .db-state b{color:#8FB6E8}
.db-row.is-ended{opacity:.5}
.db-row.is-ended .db-state b{color:var(--tg-inv-mute)}

.db-foot{
  margin:0;padding:11px 16px;font-size:11.5px;line-height:1.5;
  color:var(--tg-inv-mute);background:var(--tg-dark-2);
  border-top:1px solid var(--tg-line-dark);
  display:flex;gap:8px;align-items:flex-start;
}
.db-foot i{font-size:14px;flex:0 0 auto;margin-top:1px}
.db-foot a{color:#8FB6E8}

@media (max-width:640px){
  .db-cols{display:none}
  .db-row{grid-template-columns:64px 1fr;row-gap:6px}
  .db-state{grid-column:2;text-align:left}
  .db-state b{display:inline}
  .db-state small{display:inline;margin-left:8px}
}