/* pickthetrain city pages (build/citypages.py): /from/<city>/, /to/<city>/ and /from/. site.css's tokens only. */
.cityp{display:flex;flex-direction:column;gap:16px;padding-bottom:40px}
.cityp>.panel,.cityp>.facts{margin:0}
.cityp .rhead h1{text-wrap:balance}
.subq{font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:700;line-height:1.25;margin:-6px 0 0;color:var(--brand);text-wrap:balance}
.lede{font-size:1.12rem;line-height:1.55;max-width:62ch;margin:0}
.lede b{font-weight:700}
.pad{padding:0 16px 14px}
.cityp .panel h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cx{align-self:flex-start;font-weight:650;color:var(--brand);text-decoration:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px}
.cx:hover{background:var(--hover)}
.cx:focus-visible,.cf:focus-visible,.windbtn:focus-visible,.board a:focus-visible,#hq:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* where will the wind take you */
.wind-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;padding:16px;align-items:center}
.wind-q h2{padding:0!important}
.wind-q .small{margin:6px 0 14px}
.windbtn{display:inline-flex;align-items:center;gap:10px;font:700 1rem var(--sans);background:var(--brand);color:var(--brand-ink);border:0;border-radius:999px;padding:13px 20px;cursor:pointer}
.windbtn svg{width:20px;height:20px}
.windbtn:hover{filter:brightness(1.08)}
.wind-card{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.flap{display:flex;gap:3px;flex-wrap:wrap}
.flap i{font:700 clamp(15px,2.6vw,22px)/1 var(--mono);font-style:normal;background:var(--ink);color:var(--paper);min-width:1.15em;padding:7px 2px;text-align:center;border-radius:4px}
.flap i.sp{background:transparent;min-width:.5em}
#windtxt{margin-top:10px;font-size:.95rem;color:var(--muted)}
#windtxt b{color:var(--ink)}
#windtxt a{color:var(--brand);font-weight:600}

/* the city's map: its own lines, drawn out from the station (or in, for arrivals) */
.mapbox{padding:6px 10px 0;overflow:hidden}
.cmap{width:100%;height:auto;display:block}
.cmap .hop{opacity:.88;stroke-dasharray:var(--s,100);stroke-dashoffset:var(--s,100);animation:nw-in 1.1s cubic-bezier(.6,.05,.25,1) forwards;animation-delay:var(--d)}
.cmap .hop.nt{opacity:.55}
.cmap .ring{fill:none;stroke:var(--brand);stroke-width:2px;vector-effect:non-scaling-stroke;opacity:.6}
.cmap text{font-family:var(--sans);font-weight:650;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-linejoin:round}
.cmap text.focus{font-weight:800;fill:var(--brand)}
.maplegend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 16px 14px;font-size:.85rem;color:var(--muted);align-items:center}
.maplegend i{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* one country at a time */
.cfs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;align-items:center}
.cf{font:600 .85rem var(--sans);background:var(--card-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.cf b{font-family:var(--mono);color:var(--muted);margin-left:2px}
.cf.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cf.on b{color:var(--paper);opacity:.75}

/* night trains */
.nights{list-style:none;margin:0;padding:0}
.nights li{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 16px;border-top:1px solid var(--line)}
.nights .tm,.nights .ar{font:600 .98rem var(--mono);font-variant-numeric:tabular-nums}
.nights .ar{text-align:right}
.nights small{display:block;font-size:.8rem;color:var(--muted);font-family:var(--sans);font-weight:400}
.nights sup{font-size:.65em;color:var(--nt)}
.nightall{margin:0;padding:12px 16px 14px;border-top:1px solid var(--line);font-weight:600;font-size:.95rem}.nightall a{color:var(--nt);text-decoration:none}.nightall a:hover{text-decoration:underline}

/* good to know */
.faq{padding:6px 16px 14px}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;font-weight:650}
.faq p{margin:8px 0 2px;color:var(--muted);line-height:1.55;max-width:70ch}
.faq p b{color:var(--ink)}

/* arrivals: the next hour and the day's board */
.pulse{width:9px;height:9px;border-radius:50%;background:var(--win);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ring)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
#soon{padding:6px 16px 14px;display:grid;gap:8px}
.soonc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.soonc .tm{font:700 1.5rem/1 var(--mono);font-variant-numeric:tabular-nums}
.soonc .tm small{display:block;font:600 .72rem var(--mono);color:var(--muted);margin-top:4px}
.soonc .w{min-width:0}
.soonc .w b{display:block}
.soonc .w span{font-size:.88rem;color:var(--muted)}
.soonc .via{font-style:normal}
.plat{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.2em;padding:6px 8px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font:800 1.35rem/1 var(--mono)}
.plat.none{background:var(--card-2);color:var(--muted);border:1px solid var(--line);font-size:.9rem}
.plat small{font:600 .6rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.boardwrap{overflow-x:auto;padding:0 6px}
.board{width:100%;border-collapse:collapse;font-size:.94rem}
.board th{text-align:left;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.board td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.board td.tm{font:700 1.02rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.board td.tm.past{color:var(--faint);font-weight:500}
.board .fr b{display:block}
.board .fr span{font-size:.8rem;color:var(--muted)}
.board td.pl{text-align:center}
.board tr.none td{color:var(--muted);padding:16px 10px}
.board tr.none b{color:var(--ink)}
.board .pn{display:inline-block;min-width:2.2em;text-align:center;font:800 1.05rem var(--mono);background:var(--brand-soft);color:var(--brand);border-radius:8px;padding:5px 6px}
.board a.live,.soonc a.live{white-space:nowrap;font-weight:600;font-size:.86rem;color:var(--brand);text-decoration:none}
.board a.live{display:inline-block;margin-top:4px}
.board a.live:hover,.soonc a.live:hover{text-decoration:underline}

/* find your station */
.hsearch{display:flex;flex-direction:column;gap:6px;max-width:420px}
.hsearch label{font:600 .8rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#hq{font:500 1.05rem var(--sans);padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--input);color:var(--ink)}
.hcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:4px 22px;padding:6px 16px 16px}
.hg h3{font:600 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.hg ul{list-style:none;margin:0;padding:0}
.hg li{display:flex;flex-direction:column;padding:6px 0;border-top:1px solid var(--line)}
.hg li:first-child{border-top:0}
.hn{font-weight:650;color:var(--ink);text-decoration:none}
.hn:hover{color:var(--brand)}
.hg li .small a{color:var(--muted)}

@media (max-width:720px){
  .wind-in{grid-template-columns:1fr}
  .cmap text.lbl{display:none}
  .soonc{gap:10px;padding:10px 12px}.soonc .tm{font-size:1.2rem}.soonc .via{display:none}
  .board td.fr span{display:none}
}
@media (prefers-reduced-motion:reduce){.cmap .hop{animation:none;stroke-dasharray:none}.pulse{animation:none}}