* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
body { overflow: hidden; color: #14213d; }
#map { position: absolute; inset: 0; }

/* palette */
:root {
  --transit: #2563eb; --arrived: #2a9d8f; --future: #6c757d;   /* en route = calm blue (not an alarm) */
  --warn: #e63946;    /* delays / problems — the only place red means "something's wrong" */
  --live: #e63946;    /* brand LIVE accent (kept red on purpose) */
  --bg: #ffffff; --line: #e5e7eb;
}

/* top bar */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
/* brand: wordmark + a pulsing LIVE badge — the accent is real-time, vs a static timetable */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #14213d; flex: 0 0 auto; }
.brand .logo { font-size: 20px; line-height: 1; }
.brand .name { font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.live {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; color: var(--live); background: rgba(230,57,70,.10);
  padding: 3px 7px 3px 6px; border-radius: 999px; text-transform: uppercase;
}
.live .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(230,57,70,.6); animation: livepulse 1.8s infinite;
}
@keyframes livepulse { 70% { box-shadow: 0 0 0 7px rgba(230,57,70,0); } 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); } }
/* mobile sheet "swipe up" nudge */
@keyframes sheetHint { 0%,100% { transform: translateY(0); } 22% { transform: translateY(-16px); }
  44% { transform: translateY(0); } 63% { transform: translateY(-9px); } 80% { transform: translateY(0); } }
@keyframes gripHint { 0%,100% { width: 42px; background: #cfd5df; } 30% { width: 56px; background: #9aa3b2; } }
@media (prefers-reduced-motion: reduce) {
  .live .pulse, #detail.hint, #detail.hint .grip::after { animation: none; }
}

#topbar .stat { margin-left: auto; font-size: 13px; color: #444; white-space: nowrap; }
#topbar .stat b { font-size: 16px; color: var(--transit); font-variant-numeric: tabular-nums; }

/* language switcher: compact segmented control */
#lang { display: inline-flex; background: #eef1f6; border-radius: 8px; padding: 2px; flex: 0 0 auto; }
#lang button {
  border: 0; background: transparent; color: #6c757d; font-weight: 700; font-size: 12px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1;
}
#lang button.on { background: #14213d; color: #fff; }

#menu-toggle, #locate {
  border: 0; background: #14213d; color: #fff; width: 40px; height: 36px;
  border-radius: 8px; font-size: 17px; cursor: pointer; flex: 0 0 auto;
}
#locate { background: #eef1f6; }

/* panel footer: About + author link, pinned under the list */
.panel-foot {
  padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13px;
  display: flex; align-items: center; gap: 8px; background: var(--bg);
}
.panel-foot a { color: #14213d; text-decoration: none; font-weight: 600; }
.panel-foot a:hover { text-decoration: underline; }
.panel-foot .sep { color: #ccc; }

/* side panel */
#panel {
  position: absolute; z-index: 6; background: var(--bg);
  display: flex; flex-direction: column;
  top: 52px; left: 0; width: 340px; bottom: 0;
  border-right: 1px solid var(--line); transition: transform .25s ease;
}
.panel-head { padding: 10px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
#search {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; outline: none;
}
#fav-toggle {
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); background: #fbfcfe;
  color: #f5a623; border-radius: 8px; font-size: 19px; line-height: 1; cursor: pointer;
}
#fav-toggle.on { background: #14213d; border-color: #14213d; }
#filters { display: flex; gap: 6px; padding: 8px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 20px;
  cursor: pointer; user-select: none; opacity: .45;
}
.chip.on { opacity: 1; background: #f8fafc; }
.chip b { color: #333; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.transit { background: var(--transit); } .dot.arrived { background: var(--arrived); } .dot.future { background: var(--future); }

/* Train list = a live departure board (табло). Three columns line up the whole way down:
   tabular train number · route + live segment · status. A left colour-stripe codes the phase. */
#list { list-style: none; margin: 0; padding: 4px 0 12px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
#list li.row {
  display: grid; grid-template-columns: 3.1rem 1fr auto; align-items: center; column-gap: 11px;
  padding: 9px 12px 9px 14px; border-bottom: 1px solid #f1f3f5; cursor: pointer; position: relative;
}
#list li.row::before {              /* phase colour code down the left edge, like a board's key */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
}
#list li.transit::before { background: var(--transit); }
#list li.arrived::before { background: var(--arrived); }
#list li.future::before  { background: var(--future); }
#list li.row:hover { background: #f6f8fc; }
#list li.row.active { background: #eef3ff; box-shadow: inset 0 0 0 1px rgba(20,33,61,.10); }

.t-num {
  font: 700 15px/1.05 ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  color: #14213d; text-align: right; letter-spacing: .3px;
  font-variant-numeric: tabular-nums; align-self: start; padding-top: 1px;
}
#list li.active .t-num { color: var(--transit); }
.t-main { min-width: 0; }            /* allow ellipsis inside the grid cell */
.t-route { font-size: 13.5px; color: #14213d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-route i { color: #b5bcc6; font-style: normal; margin: 0 3px; }
.t-sub { color: #6c757d; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list .empty { color: #8a94a6; padding: 22px 14px; text-align: center; font-size: 13px; }
.rcell { display: inline-flex; align-items: center; gap: 6px; }
.gpspip { width: 6px; height: 6px; border-radius: 50%; background: #1a8a4a; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(26,138,74,.18); }

.badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; color: #fff; white-space: nowrap;
}
.badge.transit { background: var(--transit); } .badge.arrived { background: var(--arrived); } .badge.future { background: var(--future); }
.delay { color: var(--warn); font-weight: 600; }

/* SEO: real heading text for crawlers, hidden from sighted users */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript { max-width: 640px; margin: 70px auto; padding: 0 20px; color: #14213d; line-height: 1.5; }

/* detail popup card */
#detail {
  position: absolute; z-index: 7; background: #fff; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22); padding: 14px 16px;
  left: 360px; top: 64px; width: 300px; max-height: 78vh; overflow-y: auto;
}
#detail.hidden { display: none; }
#detail h3 { margin: 0 4px 2px 0; font-size: 16px; padding-right: 46px; }
#detail .grip { display: none; }   /* mobile-only grab handle (shown in the ≤720 bottom-sheet) */
/* header controls: minimize + close (top-right) */
#detail .dctrl { position: absolute; top: 11px; right: 12px; display: flex; gap: 11px; align-items: center; }
#detail h3 { padding-right: 108px; }              /* clear the ★ ⤴ – × control cluster */
#detail .fav { cursor: pointer; color: #c7ccd6; font-size: 19px; line-height: 1; }
#detail .fav.on { color: #f5a623; }
#detail .shr { cursor: pointer; color: #9aa2b1; display: inline-flex; align-items: center; }
#detail .shr:hover { color: #14213d; }
#list .favrow .t-num { font-size: 15px; }
#list .favstar { cursor: pointer; color: #f5a623; font-size: 16px; align-self: center; }
#detail .min, #detail .close { cursor: pointer; color: #9aa2b1; line-height: 1; }
#detail .min { font-size: 20px; width: 16px; text-align: center; }
#detail .close { font-size: 21px; }
#detail .min:hover, #detail .close:hover { color: #14213d; }
#detail .min::after { content: "\2013"; }              /* – */
#detail.collapsed .min::after { content: "+"; }
#detail.collapsed { max-height: none; }
#detail.collapsed ol, #detail.collapsed .meta.times { display: none; }
#detail .meta { color: #555; font-size: 13px; margin: 6px 0 10px; }
#detail .est { font-size: 11px; color: #97a0b0; margin: -4px 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail .est.gps { color: #1a8a4a; font-weight: 600; }   /* live GPS — confident green */
#detail ol { margin: 0; padding-left: 4px; list-style: none; max-height: 46vh; overflow-y: auto; }
#detail ol li { position: relative; padding: 4px 0 4px 18px; font-size: 13px; border-left: 2px solid var(--line); margin-left: 4px; }
#detail ol li::before { content: ""; position: absolute; left: -6px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
#detail ol li.done::before { background: var(--arrived); }
#detail ol li.head::before { background: var(--transit); box-shadow: 0 0 0 4px rgba(37,99,235,.25); }
#detail ol li.head { font-weight: 700; }
#detail ol li .stn { cursor: pointer; border-bottom: 1px dotted transparent; }
#detail ol li .stn:hover { color: var(--transit); border-bottom-color: var(--transit); }

#status {
  position: absolute; z-index: 5; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(20,33,61,.9); color: #fff; font-size: 12px;
  padding: 5px 12px; border-radius: 16px; pointer-events: none; transition: opacity .3s;
}
#status.hide { opacity: 0; }

/* Trains are drawn as native MapLibre GL layers (glow + dot + nose + 🚂 + number),
   so they stay pixel-locked to the rails at every zoom. See app.js map 'load'. */
.me-marker { font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* station board table + list distance + detail times */
#list .km { font-size: 12px; color: #14213d; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#detail .tm, #list .tm { color: #6c757d; font-variant-numeric: tabular-nums; }
#detail ol li .tm { display: inline-block; min-width: 84px; margin-right: 6px; font-size: 12px; }
table.board { width: 100%; border-collapse: collapse; font-size: 13px; }
table.board td { padding: 6px 4px; border-bottom: 1px solid #f1f3f5; vertical-align: top; cursor: pointer; }
table.board td.tm { white-space: nowrap; color: #6c757d; font-variant-numeric: tabular-nums; }
table.board tr:hover td { background: #f1f6ff; }

/* mobile */
@media (max-width: 720px) {
  #panel { top: 52px; width: 86%; max-width: 360px; transform: translateX(-101%); box-shadow: 2px 0 16px rgba(0,0,0,.25); }
  #panel.open { transform: translateX(0); }
  /* detail as a native bottom sheet: flush to the bottom edge, rounded top, grab handle */
  #detail {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 48vh;
    border-radius: 18px 18px 0 0; padding: 20px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  }
  /* big, obvious grab handle: tap to expand/collapse, swipe down to dismiss (see app.js) */
  #detail .grip { display: block; height: 26px; margin: -20px -16px 4px; position: relative;
    cursor: pointer; touch-action: none; }
  #detail .grip::after { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 5px; border-radius: 3px; background: #cfd5df; transition: background .15s, width .15s; }
  #detail .grip:active::after { background: #aeb6c3; width: 52px; }
  #detail .dctrl { top: 18px; }
  #detail h3 { margin-top: 2px; }
  #detail ol { max-height: 28vh; }
  #detail.collapsed { max-height: none; }
  #detail .min { display: none; }   /* the grab handle replaces the tiny minimize button on mobile */
  /* first-open nudge: gently bounce the sheet up to hint "swipe me up" */
  #detail.hint { animation: sheetHint 1.7s ease-in-out; }
  #detail.hint .grip::after { animation: gripHint 1.7s ease-in-out; }
  #topbar { gap: 7px; padding: 0 8px; }
  #topbar .stat { display: none; }                 /* per-phase counts live in the panel chips */
  #topbar #lang { margin-left: auto; }             /* .stat held the auto-margin; it's hidden here */
  #lang button { padding: 5px 6px; }
}
@media (max-width: 380px) {
  .live .pulse { margin: 0; }
  .live span:last-child { display: none; }          /* keep only the pulsing dot when very tight */
  .live { padding: 5px; }
}
@media (min-width: 721px) {
  #menu-toggle { display: none; }
  #panel.collapsed { transform: none; }
}