/* CityBus station board — pixel-matched to the hall slides the passengers
   already know (reference: the Didube/Ortachala Google Slides deck):

   • gray #595959 page, left yellow "estimated information" notice cell
   • left column: delay notice + help (gold heading, phone +995 706 777925)
   • white solid rows (on schedule) / cream rows (estimated/delayed),
     first cell a yellow time pill on solid rows
   • separate ESTIMATED column, plain colored STATUS text, no pills
   • gray bottom strip with logo, note, live clock                  */

.station{
  --sb-gray:#595959; --sb-yellow:#ffd866; --sb-cream:#fffdf0;
  --sb-ink:#1e2a44; --sb-ink-dim:#4d5b74; --sb-ink-faint:#7c8699;
  --sb-line:#e2e7f0; --sb-orange:#e88a1e;
  background:var(--sb-gray); color:var(--sb-ink);
}
.station .screen{
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  font-size: clamp(13px, 2vh, 26px);
  /* the hall board uses the whole panel — the 1280px content cap is for
     the onboard phone UI, not for a 1080p/4K hall screen */
  max-width:none; width:100%; margin:0; padding:0;
}

/* ---- language rotation: one language on screen at a time ---- */
.station .lang-en{ display:none; }
.station[data-lang="en"] .lang-en{ display:inline; }
.station[data-lang="en"] .lang-ka{ display:none; }
.station .lang-ka{ font-family:var(--ka); }
.station .lang-en{ font-family:var(--en); }

/* ============ top/bottom strips share 25% of the height between them ============ */
.topstrip{
  display:flex; flex:0 0 auto; height:12vh; max-height:12vh; min-height:80px;
}
.topstrip-notice{
  flex:0 0 26%; background:var(--sb-yellow); color:#202020;
  display:flex; align-items:center; justify-content:center; gap:.7em;
  font-weight:800; font-size:clamp(12px, 2.4vh, 30px);
  text-transform:uppercase; letter-spacing:.06em; padding:0 1em;
}
.ico-warn{ width:1.5em; height:1.5em; flex:0 0 auto; color:#202020; }
.topstrip-title{
  flex:1; min-width:0; background:#143a75; color:var(--sb-cream);
  display:flex; align-items:center; gap:.6em; padding:0 1.2em;
}
.ico-bus{ display:inline-flex; width:1.6em; height:1.6em; color:var(--sb-cream);
          font-size:clamp(16px, 4vh, 44px); }
.ico-bus svg{ width:100%; height:100%; }
/* direction tiles: square with an arrow — up-right departures, down-right arrivals;
   the square is exactly as tall as the გასვლები / ჩამოსვლები word next to it */
.ico-dir{ display:inline-flex; align-items:center; justify-content:center;
          width:1em; height:1em; }
.ico-dir svg{ width:100%; height:100%; display:block; }
.topstrip-title .ico-dir{ font-size:clamp(18px, 5.6vh, 62px); flex:0 0 auto; }
.tg-head .ico-dir{ font-size:1em; }
.title-text{
  font-family:var(--ka); font-weight:800; text-transform:uppercase;
  font-size:clamp(18px, 5.6vh, 62px); letter-spacing:.03em;
  /* Georgian descenders (ჟ  ქ  ღ  ფ) crop at line-height:1 — give the glyphs room */
  line-height:1.35; padding-bottom:.05em;
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.station[data-lang="en"] .title-text{ font-family:var(--en); }
/* the page kind (გასვლები / ჩამოსვლები) dominates; the station name rides smaller */
.title-text .station-name{ font-size:.52em; font-weight:700; opacity:.92; }
/* platform lives in the table, not the header */
.station-platform{ display:none !important; }
/* Didube is the secondary terminal — same blue strip, noticeably smaller */
.station[data-station="didube"] .title-text{ font-size:clamp(13px, 3.4vh, 38px); }
.station[data-station="didube"] .ico-bus{ font-size:clamp(12px, 2.6vh, 28px); }
.station[data-station="didube"] .topstrip-title .ico-dir{ font-size:clamp(13px, 3.4vh, 38px); }

/* ============ main: side column + board ============ */
.main{ flex:1; display:flex; min-height:0; }

/* the left info column gets its own colour so it reads as a separate block
   from the board itself */
.side{
  flex:0 0 26%; display:flex; flex-direction:column;
  padding:2.2vh 2vw; gap:3vh; color:#e8e8e8;
  background:#464646;
  box-shadow:inset -1px 0 0 #6a6a6a;
}
.side-title{
  font-size:clamp(13px, 3vh, 38px); font-weight:800; margin:0 0 .55em;
  color:#ffffff; letter-spacing:.02em;
}
.side-notice .side-title{ color:var(--sb-yellow); }
.help-title{ color:var(--sb-yellow); text-transform:uppercase; }
.side-text{
  margin:0; font-size:clamp(11px, 2.2vh, 30px); line-height:1.5; color:#d9d9d9;
}
.side-text b{ color:#ffffff; }

/* ---- the variable box sits at the FOOT of the side column ----
   The delay notice stays at the top where passengers look for exceptions; the
   rotating card and the fixed-size weather strip are pushed to the bottom, so
   the weather never moves as the card text changes length — a still anchor
   for the eye. Both get their own surface so they read as cards, not as more
   of the grey panel. */
.side-notice{ flex:0 0 auto; }
.side-help{
  margin-top:auto;
  background:#525252; padding:1.8vh 1.4vw;
  box-shadow:0 6px 20px rgba(0,0,0,.38);
}

/* ---- local weather strip: permanent, this station's own coordinates ---- */
.side-wx{
  display:flex; flex-direction:column; gap:.3vh;
  padding:1.6vh 1.4vw; background:#333333;
  border-left:4px solid var(--sb-yellow);
  box-shadow:0 6px 20px rgba(0,0,0,.38);
}
.wx-top{ display:flex; align-items:center; gap:.7vw; }
.wx-ico{ width:clamp(26px, 5.2vh, 66px); height:clamp(26px, 5.2vh, 66px); display:block; }
.wx-ico svg{ width:100%; height:100%; display:block; }
.wx-temp{
  font-size:clamp(22px, 5vh, 62px); font-weight:800; color:#ffffff;
  line-height:1; letter-spacing:-.01em;
}
.wx-place{ font-size:clamp(11px, 2.1vh, 27px); font-weight:700; color:#ffffff; }
.wx-meta{
  display:flex; justify-content:space-between; gap:.8em;
  font-size:clamp(10px, 1.9vh, 24px); color:#c9c9c9;
}

/* ============ board ============ */
.board-wrap{
  flex:1; min-height:0; display:flex;
  padding:1.6vh 2vw 0; overflow:hidden;
  background:#eef1f5;   /* light field behind the departure cards */
}
/* one board can show TWO TABLES: the current terminal first in full size,
   the other terminal below in the same style but smaller — each under its
   own CityBus-blue station header */
#tables{ flex:1; min-height:0; display:flex; flex-direction:column;
  gap:clamp(6px, 1.2vh, 18px); }
.tg-head{
  background:#143a75; color:var(--sb-cream);
  display:flex; align-items:center; gap:.55em; padding:.42em .9em;
  font-family:var(--ka); font-weight:800; text-transform:uppercase;
  font-size:clamp(13px, 2.3vh, 30px); letter-spacing:.03em; line-height:1.35;
}
.station[data-lang="en"] .tg-head{ font-family:var(--en); }

.tg-head .tg-title{ min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; line-height:1.35; padding-bottom:.08em; }
.tg-head .tg-st, .tg-head .tn-st-st{ font-size:.6em; font-weight:700; opacity:.92; }
.tg-head.tg-sm{ font-size:clamp(10px, 1.5vh, 20px); background:#1d4a8f;
  padding:.34em .9em; }

.board{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0 clamp(5px, 1vh, 12px); }
.board col.w-time{width:11%;} .board col.w-dest{width:auto;} .board col.w-bus{width:13%;}
.board col.w-plat{width:9%;}  .board col.w-est{width:12%;}  .board col.w-status{width:13%;}
/* rows share the board height evenly (the --rh value comes from station.js) */
.board tbody tr{ height:var(--rh, auto); }

/* the second (other terminal's) table: same look, noticeably smaller */
.board.sub-sm tbody tr td{ background:#f2f3f6; }
.board.sub-sm tbody tr.is-solid td.c-time{ background:#e0e4eb; border-color:#ccd3de; }
.board.sub-sm tbody tr.is-tent td{ background:#e8ecf1; border-color:#d6dce6; }
.board.sub-sm tbody tr.is-tent td.c-time{ background:#d3d9e4; border-color:#c4ccd9; }
.board.sub-sm .row-time{ font-size:calc(var(--f-time, 2.9vh) * 0.72); }
.board.sub-sm .row-dest{ font-size:calc(var(--f-dest, 2.2vh) * 0.72); }
.board.sub-sm .row-route{ font-size:.5em; }
.board.sub-sm .row-via, .board.sub-sm .row-other{ font-size:calc(var(--f-via, 1.4vh) * 0.72); }
.board.sub-sm .row-bus{ font-size:calc(var(--f-bus, 1.7vh) * 0.72); }
.board.sub-sm .row-plat{ font-size:calc(var(--f-plat, 2.6vh) * 0.72); }
.board.sub-sm .row-est{ font-size:calc(var(--f-est, 2.2vh) * 0.72); }
.board.sub-sm .st-word{ font-size:calc(var(--f-st, 1.7vh) * 0.72); }
.board.sub-sm tbody tr td{ padding:calc(var(--pad, .6vh) * 0.7) clamp(8px, 1.4vh, 22px); }
.board.sub-sm th{ font-size:clamp(8px, 1.3vh, 17px); }
.board th{
  font-size:clamp(9px, 1.8vh, 23px); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#68738a; text-align:left;
  padding:0 clamp(8px, 1.4vh, 22px) clamp(3px, .7vh, 12px);
}
.board td{
  background:#fff; border-top:1px solid var(--sb-line); border-bottom:1px solid var(--sb-line);
  padding:var(--pad, clamp(4px, 1vh, 18px)) clamp(8px, 1.4vh, 22px); vertical-align:middle;
  overflow:hidden;  /* a long via line clips instead of growing its row */
}
.board tbody tr td:first-child{ border-left:1px solid var(--sb-line); }
.board tbody tr td:last-child { border-right:1px solid var(--sb-line); }

/* solid = proven (still on schedule windows) — white card, light-gray time
   cell. tentative = the shown time is an estimate (delayed / already gone) —
   a deeper gray grade with a darker time cell; the delayed time turns red. */
tr.is-tent td{ background:#e4e8ef; border-color:#ccd2dd; }
tr.is-tent td.c-time{ background:#ccd3df; border-color:#bcc4d2; }
.board td.c-time{ padding-left:clamp(6px,.5vw,12px); padding-right:clamp(6px,.5vw,12px); }
tr.is-solid td.c-time{ background:#e6e9ef; border-color:#d2d8e2; }

.row-time{
  font-family:var(--en); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:var(--f-time, clamp(18px, 4.6vh, 64px)); color:var(--sb-ink); line-height:1; white-space:nowrap;
}
tr.is-solid td.c-time .row-time{ color:#202020; }
.row-time .tomorrow{
  display:block; font-size:.4em; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sb-ink-faint); margin-top:.3em;
}

.row-dest{ font-family:var(--ka); font-weight:800; font-size:var(--f-dest, clamp(14px, 3.6vh, 48px)); color:var(--sb-ink); }
.station[data-lang="en"] .row-dest{ font-family:var(--en); }
.row-head{ display:inline-flex; align-items:baseline; gap:.55em; flex-wrap:wrap; }
.row-route{
  font-family:var(--en); font-weight:800; font-size:.55em;
  color:var(--sb-orange); background:rgba(232,138,30,.10);
  border:1.5px solid rgba(232,138,30,.45);
  display:inline-block; padding:.12em .5em; vertical-align:baseline;
}
.row-via{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:var(--f-via, clamp(9px, 1.7vh, 23px)); font-weight:500; font-style:italic;
  color:var(--sb-ink-faint); margin-top:.2em;
}
.row-other{
  display:block; margin-top:.15em; font-size:clamp(10px, 1.9vh, 26px);
  font-weight:800; color:#c26a00; font-style:normal;
}
.row-other-in{ font-weight:800; color:#c26a00; font-style:normal; white-space:nowrap; }

.row-bus{
  font-family:var(--en); font-variant-numeric:tabular-nums;
  font-size:var(--f-bus, clamp(11px, 2.2vh, 30px)); font-weight:700; color:var(--sb-ink-dim);
  border:2px solid #d5dce8;
  display:inline-block; padding:.25em .6em; white-space:nowrap;
}
/* the phone platform chip next to the destination (column hidden there) */
.row-plat-m{
  display:none; font-family:var(--en); font-weight:800; font-size:.62em;
  color:var(--sb-ink-dim); border:1.5px solid #d5dce8; padding:.18em .5em;
}
.row-plat-m.plat-other{ color:#c26a00; }
.row-plat{
  font-family:var(--en); font-variant-numeric:tabular-nums; font-weight:800;
  font-size:var(--f-plat, clamp(15px, 3.8vh, 56px)); color:var(--sb-ink);
  display:inline-block; min-width:1.4em; text-align:center;
}
.plat-none{ color:var(--sb-ink-faint); font-weight:600; }
.row-plat.plat-other{ color:#c26a00; }

/* ESTIMATED column: navy tabular, em-dash when inactive */
.row-est{
  font-family:var(--en); font-variant-numeric:tabular-nums; font-weight:800;
  font-size:var(--f-est, clamp(13px, 3.2vh, 46px)); color:var(--sb-ink); white-space:nowrap;
  display:inline-block; padding:.1em .45em;
}
/* a live delayed estimate jumps off the board: white digits in a red box */
.row-est:not(.est-off){ background:#b91c1c; color:#ffffff; }
.row-est.est-off{ color:#c3c9d6; font-weight:600; background:none; padding:0; }

/* STATUS: plain colored bold text (a delayed row also paints its time red) */
.st-word{ font-weight:800; font-size:var(--f-st, clamp(11px, 2.2vh, 30px)); white-space:nowrap; }
.st-ontime{ color:#15803d; }
.st-soon  { color:#9a6b00; }
.st-delay { color:#b45309; }
.st-gone  { color:#64748b; }
tr.st-delayed td.c-time .row-time{ color:#b91c1c; }
tr.is-past td{ opacity:.5; }
tr.is-cancel td{ opacity:.5; }
tr.is-cancel .row-dest, tr.is-cancel .row-time{ text-decoration:line-through; text-decoration-thickness:2px; }

/* ---- empty state ---- */
.board-empty{ margin:auto; text-align:center; padding:2em 1em; }
.board-empty-big{ font-family:var(--ka); font-weight:800; font-size:clamp(18px, 5vh, 58px); color:#1e2a44; }
.station[data-lang="en"] .board-empty-big{ font-family:var(--en); font-weight:700; }
.board-empty-sub{ margin-top:.5em; font-size:clamp(11px, 2vh, 28px); color:#68738a; }

/* ============ bottom strip — CityBus blue, square, yellow brand line ============ */
.bottomstrip{
  flex:0 0 auto; display:flex; align-items:center; gap:2em;
  background:#143a75; color:#dfe6f2;
  height:14vh; max-height:14vh; min-height:88px; box-sizing:border-box;
  padding:0 clamp(14px, 1.6vw, 46px);
  border-top:3px solid var(--sb-yellow);
}
.foot-logo{ height:clamp(30px, 4.2vh, 64px); width:auto; }
.strip-note{ flex:1; text-align:center; font-size:clamp(10px, 1.9vh, 25px); font-weight:600; color:#c7d2e8; }
/* reads as plain text on the hall TVs; on phones it remains tappable */
.strip-link{ color:#e8eefb; text-decoration:none; font-weight:600; cursor:text; }
@media (hover:hover) and (pointer:fine){
  .strip-link{ pointer-events:none; }  /* TVs show it as text, not a link */
}
.strip-right{ display:flex; align-items:center; gap:1.2em; }
.page-cols{ display:flex; gap:.5em; align-items:center; }
.chip{
  font-size:clamp(9px, 1.7vh, 22px); font-weight:800; letter-spacing:.06em;
  padding:.25em .8em; white-space:nowrap;
}
.chip-kind{ background:var(--sb-yellow); color:#202020; text-transform:uppercase; }
body[data-mode="arr"] .chip-kind{ background:#7cc4ff; color:#10243a; }
.chip-count{ background:#0d2b5e; color:#e8eefb; border:1px solid #2f5aa8; }
.clock-status{
  display:flex; gap:.5em; align-items:center;
  font-size:clamp(9px, 1.7vh, 22px); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#c7d2e8;
}
.station .dot{ width:.6em; height:.6em; border-radius:50%; background:#35c46f; }
.station .dot.stopped{ background:#9a9a9a; }
.clock-time{
  font-family:var(--en); font-variant-numeric:tabular-nums; font-weight:800;
  font-size:clamp(18px, 4.4vh, 58px); color:var(--sb-cream); line-height:1;
}
.board-note{ font-variant-numeric:tabular-nums; font-weight:700;
             font-size:clamp(10px, 1.8vh, 24px); color:#9c9c9c; }

/* ============ phones / narrow: the column layout does not fit ============ */
@media (max-width: 1024px){
  /* the global shell locks body scrolling (for the onboard tablets) — unlock
     it here or nothing on a phone ever scrolls */
  body.station{ overflow-y:auto; overflow-x:hidden; }
  .station .screen{ overflow-y:visible; height:auto; min-height:100vh; }
  /* flatten the layout into one column of cards: title, tables, notice, info, footer */
  .topstrip{ display:contents; }
  .main{ display:contents; }
  .topstrip-title{ order:1; font-size:16px; padding:8px 10px; min-height:52px; }
  .board-wrap{ order:2; }
  .topstrip-notice{ order:3; flex:none; width:auto; margin:6px 4px; font-size:11px; padding:10px; gap:8px; align-items:center; }
  .side{ order:4; }
  .bottomstrip{ order:5; }
  .title-text{ font-size:16px; }
  .side{ padding:12px 14px; gap:12px; margin:4px; }
  .side-title{ font-size:13px; }
  /* on a phone the column is short, so the auto-margin push is unnecessary */
  .side-help{ margin-top:0; padding:12px; }
  .side-wx{ padding:10px 12px; gap:2px; }
  .wx-ico{ width:26px; height:26px; }
  .wx-temp{ font-size:22px; }
  .wx-place{ font-size:12px; }
  .wx-meta{ font-size:11px; }
  .side-text{ font-size:11px; }
  .board-wrap{ padding:6px 4px; overflow-x:hidden; display:block; min-width:0; margin:0 4px; }
  #tables{ flex:none; min-width:0; }
  .board{ border-spacing:0 5px; }
  /* four visible columns on a phone: time, destination, est, status.
     platform number lives inside the destination cell (small amber chip) */
  /* hide the bus/platform COLUMNS entirely — width:0 + display:none cells
     makes Chrome shift the visible cells onto the zero-width columns */
  .board col.w-time{width:19%;} .board col.w-bus, .board col.w-plat{display:none;}
  .board col.w-est{width:21%;} .board col.w-status{width:27%;}
  .board th, .board td{ overflow:visible; }
  .board th{ font-size:8px; padding:2px 2px; letter-spacing:0; white-space:nowrap; }
  .board th:nth-child(4), .board td:nth-child(4){ display:none; }
  .row-plat-m{ display:inline-block; }
  .tg-head{ font-size:11px; } .tg-head.tg-sm{ font-size:9px; }
  .board td{ padding:5px 3px; }
  .row-time{ font-size:17px; }
  .row-dest{ font-size:14px; }
  .row-bus{ display:none; }
  .board th:nth-child(3), .board td:nth-child(3){ display:none; }
  .row-plat{ font-size:15px; }
  .row-est{ font-size:12px; }
  .st-word{ font-size:9.5px; }
  .row-via{ display:none; } .row-other{ font-size:10px; }

  /* three rows: live+clock · page name+count · logo+site — nothing overlaps */
  .bottomstrip{
    display:grid; grid-template-columns:auto auto; align-items:center;
    row-gap:7px; column-gap:8px; padding:10px 10px;
    height:auto; max-height:none; min-height:0; margin:8px 4px; overflow:hidden;
  }
  .strip-right{ display:contents; }
  .clock-status{ grid-row:1; grid-column:1; justify-self:start; }
  .clock-time{ grid-row:1; grid-column:2; justify-self:end; font-size:18px; }
  .page-cols{
    grid-row:2; grid-column:1 / span 2;
    display:flex; justify-content:space-between; gap:.5em; min-width:0;
  }
  .foot-logo{ grid-row:3; grid-column:1; justify-self:start; height:18px; }
  .strip-note{
    display:block; grid-row:3; grid-column:2;
    justify-self:end; text-align:right; flex:0 0 auto;
  }
  .strip-note .strip-link{ font-size:11px; }
}

/* ================= agency view: station picker in the side panel ==========
   Staff-facing, never on a passenger wall screen: the weather/info box is
   replaced by a picker so one browser tab can answer for any stop. */
.side-pick{
  margin-top:auto;
  display:flex; flex-direction:column; gap:1.2vh;
  padding:1.8vh 1.4vw; background:#525252;
  box-shadow:0 6px 20px rgba(0,0,0,.38);
}
.pick-title{ color:var(--sb-yellow); margin-bottom:.4vh; }
.pick-lab{
  font-size:clamp(10px, 1.8vh, 22px); font-weight:600; color:#c9c9c9;
  letter-spacing:.02em;
}
.pick-sel{
  width:100%; box-sizing:border-box; font:inherit;
  font-size:clamp(13px, 2.4vh, 30px); font-weight:700;
  padding:.5em .6em; color:#143a75; background:#ffffff;
  border:2px solid #ffffff; border-radius:0; cursor:pointer;
}
.pick-sel:focus{ outline:3px solid var(--sb-yellow); outline-offset:2px; }
.pick-row{ display:flex; gap:.5vw; }
.pick-btn{
  flex:1; font:inherit; font-size:clamp(10px, 1.9vh, 24px); font-weight:700;
  padding:.5em .3em; cursor:pointer; border:2px solid #7a7a7a;
  background:#3f3f3f; color:#e8e8e8; border-radius:0;
}
.pick-btn:hover{ border-color:#c9c9c9; }
.pick-btn.on{ background:var(--sb-yellow); border-color:var(--sb-yellow); color:#143a75; }
.pick-meta{
  font-size:clamp(10px, 1.7vh, 21px); color:#c9c9c9; border-top:1px solid #6a6a6a;
  padding-top:.8vh;
}
@media (max-width: 1024px){
  .side-pick{ margin-top:0; padding:12px; gap:10px; }
  .pick-sel{ font-size:15px; }
  .pick-btn{ font-size:12px; }
  .pick-row{ gap:6px; }
}

/* the agency board names the Tbilisi terminal on every row, since staff read
   the two terminals as one list rather than as two tables on a wall */
.row-term{
  display:inline-block; margin-left:.5vw; padding:.12em .5em;
  font-size:clamp(9px, 1.5vh, 19px); font-weight:800; letter-spacing:.01em;
  color:#143a75; background:#e6e9ef; border:1px solid #b9c2d2; white-space:nowrap;
}
.row-term.term-other{ color:#7a4b00; background:#ffeccc; border-color:#e0b465; }
.pick-hint{
  margin:0; font-size:clamp(9px, 1.5vh, 19px); line-height:1.4; color:#c9c9c9;
}
@media (max-width: 1024px){
  .row-term{ margin-left:6px; font-size:10px; }
  .pick-hint{ font-size:11px; }
}

/* ---- boarding call: the info card gives way to the departure itself ----
   Yellow, because it is the one thing on the panel a waiting passenger must
   act on. Same box, same footprint — nothing moves, only the surface. */
.side-help.is-boarding{
  background:var(--sb-yellow);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.side-help.is-boarding .side-title{ color:#143a75; }
.side-help.is-boarding .side-text{ color:#143a75; }
.side-help.is-boarding .side-text b{ color:#143a75; }
.side-text .bd-dest{
  display:block; font-size:clamp(15px, 3.1vh, 40px); font-weight:800; line-height:1.15;
  color:#143a75; margin-bottom:.5vh;
}
.bd-route{
  display:inline-block; padding:.05em .35em; font-size:.62em; font-weight:800;
  color:#7a4b00; background:#fff3d6; border:1px solid #d9a53a; vertical-align:.18em;
}
.side-text .bd-line{
  display:block; font-size:clamp(13px, 2.5vh, 32px); line-height:1.3; color:#143a75;
}
.bd-was{ text-decoration:line-through; opacity:.55; font-weight:600; }
.side-text .bd-late{
  display:inline-block; margin-top:.5vh; padding:.1em .45em;
  font-size:clamp(11px, 2vh, 26px); font-weight:800; color:#ffffff; background:#b91c1c;
}
.side-text .bd-state{
  display:block; margin-top:.6vh; font-size:clamp(11px, 2vh, 25px); font-weight:700;
  color:#5c4300;
}
@media (max-width: 1024px){
  .side-text .bd-dest{ font-size:17px; }
  .side-text .bd-line{ font-size:14px; }
  .side-text .bd-state{ font-size:12px; }
  .side-text .bd-late{ font-size:12px; }
}

/* ---- boarding call colour ------------------------------------------------
   Green while the service boards to time, deep red once it is late — the
   surface says which before a word is read. Both are dark with white type, so
   only the meaning changes, never the weight or the size of the box. */
.side-help.is-boarding.bd-ontime{ background:#15733f; }
.side-help.is-boarding.bd-late-box{ background:#8f1d1d; }
.side-help.is-boarding.bd-ontime .side-title,
.side-help.is-boarding.bd-late-box .side-title{ color:#ffffff; }
.side-help.is-boarding.bd-ontime .side-text,
.side-help.is-boarding.bd-late-box .side-text,
.side-help.is-boarding.bd-ontime .side-text b,
.side-help.is-boarding.bd-late-box .side-text b,
.side-help.is-boarding.bd-ontime .bd-dest,
.side-help.is-boarding.bd-late-box .bd-dest,
.side-help.is-boarding.bd-ontime .side-text .bd-line,
.side-help.is-boarding.bd-late-box .side-text .bd-line{ color:#ffffff; }
.side-help.is-boarding.bd-ontime .side-text .bd-state,
.side-help.is-boarding.bd-late-box .side-text .bd-state{ color:rgba(255,255,255,.82); }
.side-help.is-boarding.bd-ontime .bd-route,
.side-help.is-boarding.bd-late-box .bd-route{
  color:#ffffff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45);
}
.side-help.is-boarding .bd-was{ color:rgba(255,255,255,.7); }
.side-help.is-boarding.bd-late-box .side-text .bd-late{ background:#ffffff; color:#8f1d1d; }
/* the instruction card: one line, the largest type the box carries */
.side-text .bd-act{
  display:block; font-size:clamp(17px, 3.6vh, 46px); font-weight:800; line-height:1.12;
  color:#ffffff; margin-bottom:.6vh;
}
@media (max-width: 1024px){ .side-text .bd-act{ font-size:19px; } }

/* the alternating instruction line: reverse of the box — white panel, the
   box's own colour as type — so it reads as an instruction, not as status */
.side-text .bd-go{
  display:block; margin-top:.7vh; padding:.6vh .8vw; border-radius:4px;
  background:#ffffff; color:#15733f; font-weight:800; letter-spacing:.01em;
  font-size:clamp(14px, 2.5vh, 32px); line-height:1.15; text-align:center;
}
.side-text .bd-go.bd-go-late{ color:#8f1d1d; }
@media (max-width: 1024px){ .side-text .bd-go{ font-size:15px; padding:5px 8px; } }

/* agency board: plates are links into the live vehicle-tracking widget */
.row-bus-link{ color:#7ab3ff; text-decoration:none; border-bottom:1px dashed rgba(122,179,255,.55); }
.row-bus-link:hover{ color:#a8ccff; border-bottom-style:solid; }