/* Rail Atlas / 2026. One surface system for exploration, journeys and live boards. */
:root {
  --bg:#0b151c; --panel:rgba(14,28,37,.97); --panel-solid:#172b36;
  --text:#f0f1e9; --dim:#a7bac0; --line:#ffffff18;
  --accent:#90ddbd; --accent2:#e9c18b; --route:#ff71b8;
  --tools-bottom:260px; --timeline-height:164px;
}
body { font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font-family:inherit; }
button { transition:background .16s,color .16s,border-color .16s; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,tr:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.icon-defs { position:absolute;width:0;height:0;overflow:hidden; }
svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.panel { border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px #0003;backdrop-filter:blur(18px); }
#topbar { top:24px;left:24px;width:354px;padding:22px;gap:18px;max-height:calc(100dvh - var(--timeline-height) - 64px);overflow:auto;scrollbar-width:thin; }
.brand { gap:13px; }
.brandmark { width:43px;height:48px;flex-shrink:0;border:1px solid #90ddbd38;border-radius:12px;background:#90ddbd08; }
.brandmark svg { width:27px;height:27px;stroke-width:1.35; }
h1 { font-size:25px;letter-spacing:3px;font-weight:600;margin:3px 0; }
.eyebrow { color:#91a6ae;font-size:9px;letter-spacing:2.1px; }
.brandrow p { font-size:10px;color:var(--dim); }
.icon { display:grid;place-items:center;width:34px;height:34px;flex-basis:34px;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--dim); }
.icon:hover { background:#ffffff08;color:var(--text);border-color:var(--line); }
.explore-tabs { display:flex;padding:4px;border:1px solid var(--line);border-radius:11px;gap:3px;background:#07121940; }
.explore-tabs button { flex:1;border:0;border-radius:7px;padding:8px 5px;background:transparent;color:var(--dim);font-size:12px;cursor:pointer;white-space:nowrap; }
.explore-tabs button[aria-pressed="true"] { background:#263b44;color:var(--text);box-shadow:0 2px 4px #0002; }
#savedCount { color:var(--accent);font-size:10px;margin-left:3px; }
.searchrow { gap:4px; }
.searchicon { left:13px;display:flex; }
.searchicon svg { width:18px;height:18px; }
#q { padding:13px 10px 13px 40px;background:#091a23;border:1px solid #ffffff1c;border-radius:10px;font-size:12px; }
#q::placeholder { color:#91a6ae; }
#q:focus { border-color:#90ddbd88;box-shadow:0 0 0 3px #90ddbd0a; }
.search-hint { display:flex;justify-content:space-between;align-items:center;color:#7e98a2;font-size:10px;margin-top:10px; }
kbd { font-family:inherit;border:1px solid var(--line);padding:0 6px;border-radius:4px; }
.toolbar { border-top:1px solid var(--line);padding-top:12px;gap:7px;align-items:center; }
.basemap-btn { flex:1;min-width:0;font-size:10px;gap:6px; }
#basemapLabel { max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.basemap-btn .dot { width:5px;height:5px; }
.data-btn { padding:6px 8px;color:var(--dim);background:transparent;border-color:var(--line);font-size:10px; }
.data-btn[aria-expanded="true"] { color:var(--accent);border-color:#90ddbd55; }
.results { margin:12px 0 0;padding:5px 0;border-radius:10px;border:1px solid var(--line);max-height:30vh; }
.rrow { padding:12px 10px;gap:10px; }
.rrow .t1 { font-size:12px; }
.rrow .t2 { font-size:10px; }
.rrow .b { color:var(--accent);background:#90ddbd12; }
.rgroup { font-size:10px;padding:8px 10px; }
.station-pair { display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:6px;align-items:end; }
.station-pair label { min-width:0;display:flex;flex-direction:column;gap:7px; }
.station-pair label>span { font-size:10px;color:var(--dim); }
.station-pair input { width:100%;min-width:0;background:#091a23;color:var(--text);border:1px solid #ffffff1c;border-radius:9px;padding:12px 10px;font-size:13px; }
.station-pair input::placeholder { color:#78919b; }
#swapJourney { width:30px;height:40px;font-size:19px; }
.journey-actions { display:flex;gap:10px;margin-top:12px; }
.journey-actions select { min-width:0;flex:1;background:var(--panel-solid);color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:9px 7px;font-size:11px; }
.primary { display:flex;gap:12px;align-items:center;justify-content:center;background:var(--accent);color:#102c26;border:0;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:600;cursor:pointer; }
.primary:hover { background:#b0efd4; }
.journey-note { font-size:10px;color:var(--dim);line-height:1.7;margin:12px 0 0; }
.journey-results,.saved-list { overflow:auto;max-height:32vh;scrollbar-width:thin;scrollbar-color:#4e6670 transparent; }
.journey-card { display:block;width:100%;text-align:left;color:var(--text);border:1px solid var(--line);border-radius:12px;background:#172d3666;padding:13px;margin-top:10px;cursor:pointer; }
.journey-card:hover { background:#203b44;border-color:#90ddbd55; }
.journey-top,.journey-bottom { display:flex;justify-content:space-between;gap:12px;align-items:center; }
.journey-top strong { color:var(--accent);font-family:Consolas,monospace;font-size:13px; }
.journey-top>span { font-size:10px;color:var(--dim); }
.journey-times { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0 6px;font:22px/1.2 Consolas,monospace; }
.journey-times i { height:1px;background:#90ddbd40;flex:1;position:relative; }
.journey-times i:after { content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-top:1px solid #90ddbd80;border-right:1px solid #90ddbd80;transform:rotate(45deg); }
.journey-times small { font-family:inherit;font-size:10px;color:var(--accent2);vertical-align:top;margin-left:3px; }
.journey-bottom { font-size:10px;color:var(--dim); }
.journey-quality { white-space:nowrap; }
.saved-row { display:flex;gap:6px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line); }
.saved-train { display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer; }
.saved-train strong { color:var(--accent);font:600 14px Consolas,monospace; }
.saved-train span { color:var(--dim);font-size:11px; }
.empty-state { display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 10px;color:var(--dim); }
.empty-state svg { width:28px;height:28px;color:#90ddbd66; }
.empty-state strong { font-size:12px;font-weight:500;color:var(--text); }
.empty-state span { font-size:11px;line-height:1.7; }
#bottombar { width:650px;max-width:calc(100vw - 48px);bottom:24px;padding:17px 22px 13px;border-radius:18px; }
.daterow { padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);gap:5px; }
.datebtn,.datecur { background:transparent;border-color:transparent;height:28px; }
.datecur { min-width:132px;font-size:12px; }
.datenote { font-size:10px;line-height:1.6;margin-left:auto; }
.clockrow { gap:22px; }
.clock { font-size:31px;font-weight:400;color:var(--text); }
.clockblock .eyebrow { font-size:8px;letter-spacing:1.2px; }
#bottombar .stat { font-size:11px;line-height:1.7;color:var(--dim); }
.live { border:1px solid #90ddbd36;color:var(--accent);font-size:10px;padding:8px 12px;background:#90ddbd07; }
.live[aria-pressed="false"] { color:var(--accent2)!important;border-color:#e9c18b40; }
#timeslider { appearance:none;display:block;width:100%;height:3px;background:#49626b;border:0;border-radius:4px;margin:16px 0 12px; }
#timeslider::-webkit-slider-thumb { appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #90ddbd15; }
#timeslider::-moz-range-thumb { width:13px;height:13px;border:0;border-radius:50%;background:var(--accent); }
.timeline-note { font-size:9px;color:#8ca3ac; }
#trainPanel,#stationPanel { right:24px;top:96px;bottom:auto;width:390px;max-height:calc(100dvh - 128px);border-radius:20px;overflow:hidden; }
#trainPanel { display:flex;flex-direction:column; }
.trainhead { padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 34px 34px 34px;gap:13px 6px;align-items:center; }
.trainhead .badge { grid-column:1;grid-row:1;justify-self:start;max-width:100%;overflow-wrap:anywhere;background:#90ddbd10;color:var(--accent);border:1px solid #90ddbd25;border-radius:8px;font-size:17px;padding:6px 10px; }
.trainhead .trainmeta { grid-column:1/-1;grid-row:2;min-width:0; }
.trainhead .icon { grid-row:1; }
#tFavorite { grid-column:2; }
#tLink { grid-column:3; }
#tClose,#sClose { grid-column:4; }
.trainmeta strong { display:block;font-size:21px;font-weight:500;line-height:1.5;letter-spacing:.2px; }
.sub { display:block;font-size:11px;line-height:1.8;color:var(--dim);margin-top:7px; }
#tSub .cal { font-size:10px;margin:2px 0 0; }
.train-specs { border-top:1px solid var(--line);margin-top:10px;padding-top:8px; }
.train-specs summary { display:flex;justify-content:space-between;cursor:pointer;list-style:none;color:var(--dim);font-size:10px;padding:2px 0; }
.train-specs summary::-webkit-details-marker { display:none; }
.train-specs[open] summary { color:var(--accent);margin-bottom:5px; }
.train-specs[open] summary span { transform:rotate(45deg); }
#tFavorite[aria-pressed="true"] { color:var(--accent2);background:#e9c18b10; }
#tFavorite[aria-pressed="true"] svg { fill:#e9c18b25; }
.trainkind { background:#08182066;color:#8fa9b3;padding:10px 18px;display:flex;flex-direction:column;gap:3px;font-size:9px; }
.tablewrap { min-height:90px;overflow:auto;max-height:none; }
#tTable { font-size:12px; }
#tTable th { padding:10px 16px;background:#19303b;font-size:9px;color:#9bb1b9; }
#tTable td { padding:12px 16px;border-bottom:1px solid #ffffff08; }
#tTable tr { cursor:pointer; }
#tTable tr:hover { background:#ffffff04; }
#tTable tr.cur { background:#90ddbd09; }
#tTable tr.cur .nm { color:var(--accent); }
.tablewrap,.boardwrap { scrollbar-width:thin;scrollbar-color:#3e5b65 transparent; }
.boardbar { gap:6px;padding:10px 15px;flex-wrap:wrap; }
.boardbar button { margin-left:0;border-radius:7px;font-size:10px; }
.boardbar .ball[aria-pressed="true"] { color:var(--accent);border-color:#90ddbd66;background:#90ddbd0c; }
.boardbar button:disabled { opacity:.4;cursor:default; }
.bstate.late { color:#f6b888; }
.bstate.early { color:#a0d9ed; }
.bstate.ontime { color:var(--accent); }
.bfoot { font-size:9px;line-height:1.7; }
#legend { top:24px;right:24px;bottom:auto;background:rgba(14,28,37,.9);padding:11px 16px;border-radius:12px;border-color:var(--line);gap:16px; }
#basemapMenu,#dataPanel,#filterPanel { top:calc(var(--tools-bottom) + 12px);left:24px;width:354px;max-height:calc(100dvh - var(--tools-bottom) - 36px);overflow:auto; }
#dataPanel,#filterPanel { padding:22px; }
#filterPanel h2 { font-size:20px;font-weight:500; }
#notice { top:28px;max-width:calc(100vw - 32px);background:#1d3540;color:var(--text); }
#hovercard { background:#102834f5;border-color:var(--line);border-left-color:var(--accent);border-radius:12px;padding:12px 16px; }
.maplibregl-ctrl-attrib { font-size:9px!important;color:var(--dim)!important; }
.maplibregl-ctrl-attrib a { color:var(--dim)!important; }
.maplibregl-ctrl-bottom-right { bottom:16px;right:16px; }
.maplibregl-ctrl-group { border:1px solid var(--line);border-radius:10px!important;box-shadow:none!important; }
.maplibregl-ctrl-group button { width:36px;height:36px; }
.qstat { border-color:var(--line); }
@media (max-width:1100px) and (min-width:721px) {
  #topbar { width:318px;padding:18px; }
  #trainPanel,#stationPanel { width:340px; }
  #basemapMenu,#dataPanel,#filterPanel { width:318px; }
  #bottombar { width:570px; }
}
@media (max-width:720px) {
  #topbar { top:max(12px,env(safe-area-inset-top));left:12px;right:12px;width:auto;padding:14px 16px;gap:11px;border-radius:17px;max-height:calc(100dvh - var(--timeline-height) - 48px); }
  .brandmark { width:32px;height:37px;border-radius:9px; }
  .brandmark svg { width:23px;height:23px; }
  h1 { font-size:21px;letter-spacing:2px;margin:0; }
  .brandrow p { font-size:9px; }
  .eyebrow { font-size:7px;letter-spacing:1.7px; }
  .explore-tabs { padding:3px; }
  .explore-tabs button { padding:7px 4px;font-size:11px; }
  #q { padding-top:11px;padding-bottom:11px;font-size:11px; }
  .search-hint { display:none; }
  .toolbar { padding-top:7px; }
  .data-btn { font-size:9px;padding:5px 7px; }
  #basemapLabel { max-width:140px;font-size:9px; }
  .results { max-height:24vh; }
  .journey-results,.saved-list { max-height:24vh; }
  #bottombar { left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;transform:none;max-width:none;padding:12px 16px 10px;border-radius:17px; }
  .daterow { display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:4px;margin-bottom:8px;padding-bottom:8px; }
  .datecur { min-width:0;justify-self:center;height:24px;font-size:11px; }
  .datebtn { width:24px;height:24px; }
  .datenote { grid-column:1/-1;margin:0;text-align:center;font-size:9px;line-height:1.5; }
  .clockrow { gap:14px; }
  .clock { font-size:26px; }
  .clockblock .eyebrow { font-size:7px;letter-spacing:0; }
  #bottombar .stat { font-size:9px;line-height:1.6; }
  .live { font-size:9px;padding:7px 9px; }
  #timeslider { margin:12px 0 10px; }
  .timeline-note { font-size:8px; }
  #trainPanel,#stationPanel { left:12px;right:12px;top:auto;bottom:calc(var(--timeline-height) + max(12px,env(safe-area-inset-bottom)) + 12px);width:auto;max-height:calc(100dvh - var(--tools-bottom) - var(--timeline-height) - 44px);border-radius:17px; }
  .trainhead { padding:13px 15px;gap:9px 5px;grid-template-columns:minmax(0,1fr) 32px 32px 32px;max-height:max(110px,calc(100dvh - var(--tools-bottom) - var(--timeline-height) - 172px));overflow:auto;flex-shrink:0; }
  .trainhead .icon { width:32px;height:32px; }
  .trainhead .badge { font-size:15px;padding:5px 8px; }
  .trainmeta strong { font-size:19px; }
  .sub { font-size:10px;line-height:1.65;margin-top:5px; }
  #tSub .cal { font-size:9px; }
  .train-specs { margin-top:7px;padding-top:5px; }
  .trainkind { padding:7px 15px;font-size:8px; }
  #tTable td { padding:10px 12px;font-size:11px; }
  #tTable th { padding:8px 12px; }
  #legend { top:calc(var(--tools-bottom) + 10px);right:12px;left:auto;padding:6px 10px;gap:10px;font-size:8px;background:#0e1c25d9; }
  body[data-explore-view="journey"] #legend,body[data-explore-view="saved"] #legend { display:none; }
  #basemapMenu,#dataPanel,#filterPanel { left:12px;right:12px;width:auto;top:calc(var(--tools-bottom) + 10px);max-height:calc(100dvh - var(--tools-bottom) - var(--timeline-height) - 38px); }
  #notice { top:calc(var(--tools-bottom) + 10px);font-size:11px; }
  .maplibregl-ctrl-bottom-right { right:10px;bottom:calc(var(--timeline-height) + 30px); }
  .maplibregl-ctrl-group button { width:30px;height:30px; }
}
@media (max-height:650px) {
  #topbar { max-height:calc(100dvh - 190px); }
  #trainPanel,#stationPanel { max-height:55dvh;z-index:7; }
}
@media (prefers-reduced-motion:reduce) { button { transition:none; } }