:root {
  color-scheme: dark;
  --bg:#071a2c; --panel:#10293f; --panel-raised:#16334c; --border:#2c4960;
  --text:#edf6ff; --muted:#a6c0d4; --mint:#60e6bf; --mint-dark:#0d4d45;
  --amber:#ffd67e; --danger:#ff9b9b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(ellipse 70% 37% at 50% 0%,#16435d 0%,transparent 95%),var(--bg)}
button,input,select{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.page-shell{max-width:850px;min-height:100vh;margin:auto;padding:0 22px;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:29px 0 23px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.brand-mark{height:47px;width:47px;border-radius:15px;display:grid;place-items:center;color:#082134;background:var(--mint);box-shadow:0 10px 32px #60e6bf22}
.brand-mark svg{width:34px;height:34px}
.brand-type{font-weight:850;font-size:26px;letter-spacing:-1.5px;line-height:1}
.brand-type>span{color:var(--mint)}
.brand-type small{display:block;margin-top:7px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:2.1px}
.demo-label{display:inline-flex;align-items:center;gap:7px;border:1px solid #466074;border-radius:20px;padding:8px 11px;color:#c4d6e4;font-size:10px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.demo-dot{height:6px;width:6px;border-radius:50%;background:var(--amber)}
.app-content{flex:1}
.eyebrow{font-weight:800;letter-spacing:2px;font-size:11px;text-transform:uppercase;color:var(--mint);margin:4px 0 12px}
.hero{padding:22px 0 26px}
.hero h1{font-size:clamp(36px,6vw,56px);line-height:1.05;letter-spacing:-2.4px;margin:0 0 12px}
.hero h1 span{color:var(--mint)}
.hero p{color:var(--muted);font-size:16px;max-width:550px;line-height:1.55;margin:0}
.card{background:linear-gradient(145deg,#123149,#102538);border:1px solid var(--border);box-shadow:0 18px 42px #00000025;border-radius:22px;padding:25px}
.card+.card{margin-top:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.section-head h2,.card h2{font-size:20px;letter-spacing:-.5px;margin:0}
.subtle{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:12px;color:#ccdfed}
.field input,.field select{width:100%;min-width:0;min-height:48px;padding:12px 13px;background:#092034;color:var(--text);border:1px solid #36586f;border-radius:11px;outline:none;appearance:none}
.field input:focus,.field select:focus{border-color:var(--mint);box-shadow:0 0 0 3px #60e6bf22}
.field input::placeholder{color:#7695a8}
.helper{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.form-actions{margin-top:23px}
.btn{border-radius:12px;border:1px solid #517086;padding:13px 17px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;transition:transform .15s ease,filter .15s ease,background .15s ease}
.btn:active{transform:scale(.98)}
.btn-primary{color:#062b2c;background:var(--mint);border-color:var(--mint)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{color:var(--text);background:#244157}
.btn-ghost{color:var(--muted);background:transparent}
.btn-danger{color:#ffd5d5;border-color:#87535b;background:#542e3c}
.btn-full{width:100%}
.results-title{margin:32px 2px 14px;font-size:17px;font-weight:800}
.service-list{display:grid;gap:10px}
.service-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#112c41;border:1px solid #30516a;border-radius:15px;padding:16px;color:var(--text)}
.service-card:hover{background:#193a52;border-color:var(--mint)}
.train-time{font-variant-numeric:tabular-nums;font-weight:850;font-size:25px;letter-spacing:-1px}
.service-route{flex:1;min-width:0}
.service-route strong{font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-route span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.chevron{color:var(--mint);font-size:24px}
.notice{background:#40381e;border:1px solid #837144;color:#ffe6ae;border-radius:12px;padding:13px 15px;font-size:12px;line-height:1.5;margin-bottom:20px}
.status-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.status-pill{padding:8px 12px;border-radius:30px;font-size:11px;font-weight:900;letter-spacing:.4px;background:var(--mint-dark);color:var(--mint);border:1px solid #297c68}
.status-pill.warn{background:#5b4625;color:var(--amber);border-color:#947341}
.status-pill.danger{background:#562c39;color:var(--danger);border-color:#97525d}
.watch-time{font-weight:850;font-size:clamp(43px,8vw,64px);letter-spacing:-3px;font-variant-numeric:tabular-nums;line-height:1;margin:6px 0 9px}
.watch-destination{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:0 0 5px}
.route-line{color:var(--muted);line-height:1.5;font-size:14px;margin:0}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:24px 0;gap:14px}
.stat{background:#092338;border:1px solid #28485f;border-radius:14px;padding:17px}
.stat-label{font-size:11px;color:var(--muted);font-weight:750;margin-bottom:6px}
.stat-value{font-size:30px;letter-spacing:-1px;font-weight:800;font-variant-numeric:tabular-nums}
.stat-value.warn{color:var(--amber)}.stat-value.green{color:var(--mint)}
.train-progress{display:flex;align-items:center;gap:7px;margin:4px 0 25px}
.train-progress span{height:5px;flex:1;background:#476176;border-radius:20px}
.train-progress span.active{background:var(--mint)}
.train-progress-labels{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;margin-top:-17px;margin-bottom:22px}
.callout{background:#0d3240;border:1px solid #286675;border-radius:14px;padding:16px;margin-bottom:19px}
.callout h3{font-size:16px;margin:0 0 5px}
.callout p{color:#bad7dc;font-size:13px;line-height:1.5;margin:0}
.callout.warning{background:#463820;border-color:#927346}
.callout.warning p{color:#ffdda0}
.callout.critical{background:#462936;border-color:#915063}
.actions{display:grid;gap:10px}
.actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.divider{height:1px;background:var(--border);margin:22px 0}
.activity-list{padding:0;margin:0;list-style:none;display:grid;gap:15px}
.activity-list li{display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:start}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);margin-top:5px}
.activity-item strong{font-size:13px;display:block}
.activity-item span{font-size:11px;color:var(--muted);display:block;margin-top:4px}
.demo-tools{margin-top:20px;border:1px dashed #547080;border-radius:15px;padding:17px}
.demo-tools h3{font-size:13px;margin:0 0 6px;color:var(--amber)}
.demo-tools p{font-size:12px;color:var(--muted);margin:0 0 12px}
.demo-button-row{display:flex;gap:8px;flex-wrap:wrap}
.demo-button-row .btn{min-height:39px;font-size:12px;padding:9px 13px}
.end-row{display:flex;justify-content:center;margin-top:18px}
.empty{text-align:center;padding:26px;color:var(--muted)}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid #234056;color:#7f9aac;font-size:11px;padding:25px 0;margin-top:35px}
.toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:13px 18px;background:#d9fff0;color:#08372f;border-radius:12px;box-shadow:0 15px 45px #0008;max-width:calc(100vw - 32px);width:max-content;font-weight:700;font-size:13px;z-index:10}
@media(max-width:550px){
 .page-shell{padding:0 16px}.topbar{padding:19px 0}.brand-type{font-size:23px}.brand-mark{height:43px;width:43px}
 .hero{padding:22px 0}.hero h1{font-size:39px}
 .card{padding:20px 16px}.field-grid{gap:13px}
 .stat-grid{gap:10px}.stat{padding:15px 12px}.stat-value{font-size:27px}
 .service-card{padding:14px 12px;gap:10px}.service-route strong{font-size:13px}
}
@media(max-width:385px){.field-grid{grid-template-columns:1fr}.demo-label{font-size:9px;padding:6px}.hero h1{font-size:35px}.actions.two{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* BoardPing skin system. All skins share the same accessible controls and logic. */
.theme-wrap{display:flex;gap:8px;align-items:center}
.theme-wrap label{font-size:9px;letter-spacing:1.4px;color:var(--muted);font-weight:800}
.theme-wrap select{color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 9px;min-width:106px;font-size:12px;font-weight:700}

/* 1980s amber dot-matrix style without copyrighted logos or railway trademarks. */
:root[data-theme="railboard"]{
 color-scheme:dark;--bg:#100e0a;--panel:#242016;--panel-raised:#30271a;
 --border:#67532a;--text:#ffe6a4;--muted:#bca36c;--mint:#ffbe4c;--mint-dark:#4a3515;
 --amber:#ffe08b;--danger:#ff9983;
 font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace
}
:root[data-theme="railboard"] body{background:radial-gradient(ellipse at top,#29200c 0%,transparent 75%),var(--bg)}
:root[data-theme="railboard"] .card{background:#1e1a11;border-radius:5px;box-shadow:0 0 0 3px #251e12}
:root[data-theme="railboard"] .btn,:root[data-theme="railboard"] .field input,:root[data-theme="railboard"] .field select,:root[data-theme="railboard"] .service-card,:root[data-theme="railboard"] .stat{border-radius:4px}
:root[data-theme="railboard"] .service-card,:root[data-theme="railboard"] .stat,:root[data-theme="railboard"] .field input,:root[data-theme="railboard"] .field select{background:#241f14;border-color:#67532a}
:root[data-theme="railboard"] .brand-mark{border-radius:6px}
:root[data-theme="railboard"] .watch-time,:root[data-theme="railboard"] .train-time{letter-spacing:1px;text-shadow:0 0 12px #ffbe4c66}
:root[data-theme="railboard"] .hero h1{letter-spacing:-2px}

/* Original space-console inspired interface; clean, colourful and distinct from default. */
:root[data-theme="starship"]{
 --bg:#080f20;--panel:#172643;--panel-raised:#28345f;
 --border:#6a64a0;--text:#f2eefd;--muted:#c0b7d9;--mint:#ffb383;--mint-dark:#644b66;
 --amber:#ffdb8c;--danger:#ff9aa9;
}
:root[data-theme="starship"] body{background:radial-gradient(ellipse at top right,#30316a 0%,transparent 65%),var(--bg)}
:root[data-theme="starship"] .card{background:#172440;border-left:9px solid #e79bb0;border-radius:30px 9px 30px 9px}
:root[data-theme="starship"] .btn{border-radius:28px 7px 28px 7px}
:root[data-theme="starship"] .btn-primary{background:#ffb383;color:#241c32}
:root[data-theme="starship"] .brand-mark{background:#ffb383;color:#241c32}
:root[data-theme="starship"] .service-card{border-radius:20px 7px 20px 7px;background:#263359}
:root[data-theme="starship"] .field input,:root[data-theme="starship"] .field select{background:#1d2950;border-radius:16px 5px 16px 5px}
:root[data-theme="starship"] .stat{background:#2c2a55;border-radius:22px 5px 22px 5px}
@media(max-width:550px){.theme-wrap{gap:5px}.theme-wrap label{display:none}.theme-wrap select{min-width:92px;max-width:100px}}


/* On installed iPhone/iPad web apps, the system clock and signal icons sit
   over the webpage when the translucent iOS status bar is enabled.
   Keep an OPAQUE dark backing fixed behind them as BoardPing scrolls, and
   reserve the exact same height above the app's header. */
:root.boardping-standalone {
 --tp-status-height:max(56px, env(safe-area-inset-top, 0px));
}
:root.boardping-standalone body::before {
 content:"";position:fixed;inset:0 0 auto;height:var(--tp-status-height);
 background:linear-gradient(180deg,#020915,#061522);z-index:100;
 border-bottom:1px solid #ffffff12;box-shadow:0 5px 15px #0005;
 pointer-events:none;
}
:root.boardping-standalone .page-shell {
 padding-top:var(--tp-status-height);
 padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
}
/* CSS-only detection works even before installation JavaScript runs. */
@media (display-mode:standalone), (display-mode:fullscreen) {
 :root {
   --tp-status-height:max(56px, env(safe-area-inset-top, 0px));
 }
 body::before {
   content:"";position:fixed;inset:0 0 auto;height:var(--tp-status-height);
   background:linear-gradient(180deg,#020915,#061522);z-index:100;
   border-bottom:1px solid #ffffff12;box-shadow:0 5px 15px #0005;
   pointer-events:none;
 }
 .page-shell {
   padding-top:var(--tp-status-height);
   padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
 }
}


/* BoardPing: station-board identity. The board-and-train symbol is a separate
   reusable asset so app icons, browser favicons and the header stay consistent. */
.brand-mark {
 background:transparent;
 box-shadow:0 6px 25px #0006;
 border:1px solid #3d5668;
 border-radius:13px;
 overflow:hidden;
}
.brand-mark img {display:block;width:100%;height:100%;object-fit:cover}
.brand-type {letter-spacing:-1.2px}
.topbar {border-bottom:1px solid #ffffff14}
:root[data-theme="railboard"] .brand-mark {border-radius:4px}
:root[data-theme="starship"] .brand-mark {background:transparent;color:inherit}
.install-icon {background:#071a2c;padding:0;overflow:hidden;box-shadow:0 0 45px #56e8bc55}
.install-icon img {display:block;width:100%;height:100%;object-fit:contain}


/* Station autocomplete is typo-tolerant and keyboard-accessible. */
.station-field{position:relative}
.station-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
 background:#092034;border:1px solid var(--mint);border-radius:12px;padding:5px;
 box-shadow:0 22px 50px #000a;max-height:310px;overflow-y:auto}
.station-suggestions[hidden]{display:none}
.station-option{width:100%;border:0;background:transparent;border-radius:8px;color:var(--text);
 display:flex;justify-content:space-between;gap:10px;text-align:left;font-size:14px;padding:12px 10px;min-height:44px}
.station-option small{font-size:11px;letter-spacing:1px;color:var(--mint);font-weight:900}
.station-option:hover,.station-option.active{background:#245271}
.footer a{color:var(--muted);text-underline-offset:3px}


/* Fastest direct train finder */
.search-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.search-tab{border:1px solid var(--border);padding:14px 9px;border-radius:13px;
 background:var(--panel);color:var(--muted);font-size:13px;font-weight:800}
.search-tab.active{background:var(--mint-dark);border-color:var(--mint);color:var(--mint)}
.fastest-description{color:var(--muted);font-size:14px;line-height:1.55;margin:-4px 0 23px}
.recent-destinations{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:17px}
.recent-destinations>span{width:100%;font-size:10px;letter-spacing:1.3px;font-weight:800;color:var(--muted)}
.recent-destinations button{background:var(--panel-raised);border:1px solid var(--border);
 color:var(--text);border-radius:30px;padding:7px 11px;font-size:12px}
.fastest-note{margin:16px 4px}
.fastest-results{display:grid;gap:12px}
.fastest-result{padding:19px;border:1px solid var(--border);border-radius:17px;background:var(--panel)}
.fastest-result.winner{border-color:var(--mint);background:linear-gradient(145deg,var(--panel-raised),var(--panel))}
.fastest-result-head{display:flex;justify-content:space-between;gap:8px;color:var(--muted);
 font-size:10px;font-weight:850;letter-spacing:1px}
.fastest-result.winner .fastest-result-head span:first-child{color:var(--mint)}
/* Shared label row keeps times level even when the arrival label wraps.
   The arrow has its own grid cell, so it cannot collide with departure time. */
.fastest-result-main{display:grid;grid-template-columns:minmax(0,1.15fr) 26px minmax(0,1.85fr);
 grid-template-rows:auto auto;align-items:end;column-gap:8px;row-gap:6px;margin:20px 0}
.fastest-result-main>div:not(.fastest-arrow){display:contents}
.fastest-result-main small{min-width:0;color:var(--muted);display:block;
 font-weight:850;letter-spacing:.8px;font-size:10px;line-height:1.35}
.fastest-result-main strong{display:block;min-width:0;font-variant-numeric:tabular-nums;
 font-size:clamp(25px,7vw,43px);letter-spacing:-1.8px;line-height:1.1;white-space:nowrap}
.fastest-result-main>div:first-child small{grid-column:1;grid-row:1}
.fastest-result-main>div:first-child strong{grid-column:1;grid-row:2}
.fastest-result-main>div:last-child small{grid-column:3;grid-row:1}
.fastest-result-main>div:last-child strong{grid-column:3;grid-row:2;color:var(--mint)}
.fastest-arrow{grid-column:2;grid-row:2;justify-self:center;align-self:center;
 font-size:clamp(19px,5vw,24px);line-height:1;color:var(--muted);white-space:nowrap}
.fastest-result-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
 border-top:1px solid var(--border);padding-top:13px}
.fastest-result-foot>span{font-size:12px;line-height:1.55;color:var(--muted)}
.fastest-result-foot button{white-space:nowrap;padding:10px 12px;font-size:12px;min-height:42px}
@media(max-width:550px){
 .search-tabs{gap:6px}.search-tab{padding:12px 6px;font-size:12px}
 .fastest-result-foot{align-items:stretch;flex-direction:column}
 .fastest-result-foot button{width:100%}
 .fastest-result-head span:last-child{max-width:42%;text-align:right}
}


/* Real opt-in push status and test controls */
.push-panel{margin:18px 0}
.push-panel h3{margin:0 0 6px;font-size:16px}
.push-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.push-controls .btn{min-height:42px;font-size:12px}
@media(max-width:550px){.push-controls .btn{flex:1}}


/* Optional disruption assistance: visually separate from normal calm BoardPing. */
.chaos-invite{margin:18px 0;padding:18px 19px;border:1px solid #82434a;
  border-radius:17px;background:linear-gradient(145deg,#351f2d,#211d2e)}
.chaos-invite>span{color:#ffb3bb;font-size:11px;font-weight:900;letter-spacing:1.1px}
.chaos-invite p{color:#e8c8ce;margin:9px 0 16px;font-size:13px;line-height:1.5}
.chaos-trigger{border:1px solid #e36a75;background:#933744;color:#fff5f4;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  font-weight:850;min-height:48px}
.chaos-trigger:hover{background:#b34753}
.chaos-alert{margin:14px 0 20px;padding:17px;border-radius:15px;
  border:1px solid #df6670;background:linear-gradient(140deg,#493038,#30252e)}
.chaos-alert strong{font-size:15px;color:#ffe0e0}
.chaos-alert p{font-size:13px;line-height:1.5;color:#f0c8cf;margin:7px 0 14px}
.chaos-zone{padding:4px 0 22px}
.chaos-zone .alternative-search{border-color:#a14a57;
  background:linear-gradient(140deg,#3e2736,#1a2737 65%)}
.chaos-header{align-items:center;gap:12px}
.chaos-header .chaos-exit{flex:none;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 13px;border:1px solid var(--border);
  border-radius:10px;background:var(--panel-raised);color:var(--text);
  font-size:13px;font-weight:850;white-space:nowrap}
.chaos-header .chaos-exit:hover{border-color:var(--mint);color:var(--mint)}
.chaos-header .chaos-exit span{font-size:19px;line-height:1;font-weight:500}
.chaos-mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;margin:-7px 0 13px}
.chaos-mode-choice{min-width:0;min-height:42px;padding:7px 8px;border-radius:9px;
  font-size:12px;line-height:1.25;font-weight:800;cursor:pointer;
  color:#e9d1da;background:#332634;border:1px solid #86555f;text-align:center}
.chaos-mode-choice:hover{background:#513044;color:#fff}
.chaos-mode-choice.active{color:#fff0f0;background:#832f42;border-color:#eb7180;
  box-shadow:inset 0 0 0 1px #d96674}
.chaos-mode-choice:focus-visible{outline:3px solid #ffc6ce;outline-offset:2px}
.way-result{border-left:4px solid #b45c67}
.way-result.way-direct{border-left-color:#36bd8f}
.way-route-label{font-size:13px;color:var(--muted);margin:9px 0 -7px;line-height:1.4}
.way-warning{font-size:12px;line-height:1.55;padding:11px 12px;margin:0 0 12px;
  border:1px solid #397d72;border-radius:10px;background:#193d3b;color:#caeee4}
.way-warning.way-needs-onward{background:#49313b;border-color:#a96770;color:#ffe1dc}
.way-result .fastest-result-main>div:last-child{max-width:54%}
.way-result .fastest-result-main>div:last-child strong{overflow-wrap:anywhere}

.chaos-zone .alternative-group{margin:16px 0 25px}
.chaos-zone .alternative-group>.results-title{margin-bottom:4px}
.chaos-zone .alternative-group>.helper{line-height:1.5;margin-bottom:10px}
.chaos-zone .alternative-result .fastest-result-main strong{font-size:clamp(23px,6vw,35px)}
.chaos-zone .alternative-result .fastest-result-foot>span{line-height:1.55}
.chaos-zone .alternative-result .fastest-result-foot button{white-space:normal}
.chaos-zone .alternative-status,.chaos-zone .alternative-disclaimer{margin:16px 3px;line-height:1.5}
@media(max-width:550px){
 .chaos-invite{padding:15px}
 .chaos-zone .alternative-result{padding:15px 13px}

}

/* A Fastest API suggestion without corroborating live departures must not
   look like a confirmed departure or invite selection. */
.fastest-result.unverified{border-color:#bb6c76;background:linear-gradient(135deg,#352836,var(--panel))}
.fastest-result.unverified .fastest-result-head span:first-child{color:#ffc3c3}
.fastest-verification{margin:0 0 13px}
.fastest-verification h3{font-size:13px}
.fastest-unverified-action{display:inline-block;color:#ffd0cf;background:#582d39;
  border:1px solid #99525e;border-radius:8px;font-size:10px;font-weight:900;
  letter-spacing:.45px;padding:10px;line-height:1.4;text-align:center}


/* ONE-SCREEN WATCH. Prioritise legibility, positive confirmation of an active
   server watch and usable 44px controls on small/older phones. All three skins
   share the same layout; their inherited variables retain each theme. */
.page-shell:has(.watch-compact) .topbar{padding:10px 0 11px}
.page-shell:has(.watch-compact) .brand{gap:8px}
.page-shell:has(.watch-compact) .brand-mark{height:33px;width:33px;border-radius:8px}
.page-shell:has(.watch-compact) .brand-type{font-size:20px;letter-spacing:-.65px}
.page-shell:has(.watch-compact) .brand-type small{display:none}
.page-shell:has(.watch-compact) .footer{display:none}
.page-shell:has(.watch-compact) .theme-wrap select{padding:6px 8px;font-size:11px}
.watch-compact{margin:11px 0 6px;padding:19px 20px 17px;background:var(--panel);box-shadow:0 15px 35px #0003}
.watch-compact-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.watch-compact-eyebrow{color:var(--muted);font-weight:850;letter-spacing:1.5px;font-size:11px}
.watch-compact-head .status-pill{max-width:70%;text-align:center;line-height:1.3;padding:7px 12px}
.watch-journey{display:grid;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);
  gap:10px;align-items:center;margin:15px 0 7px}
.watch-station{min-width:0;display:flex;flex-direction:column;gap:3px}
.watch-station>span{font-size:10px;letter-spacing:.95px;color:var(--muted);font-weight:800}
.watch-station strong{font-size:clamp(18px,5vw,27px);letter-spacing:-.5px;
  font-weight:850;line-height:1.12;overflow-wrap:break-word}
.watch-station-to{text-align:right;align-items:flex-end}
.watch-direction{color:var(--mint);font-size:23px;text-align:center}
.watch-service-end{font-size:11px;color:var(--muted);margin:0 0 6px}
.watch-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}
.watch-metric{min-width:0;display:flex;flex-direction:column;gap:5px;
  padding:14px 7px 12px;text-align:center;background:var(--bg);
  border:1px solid var(--border);border-radius:12px}
.watch-metric>span{font-size:10px;font-weight:850;letter-spacing:.35px;
  color:var(--muted);min-height:24px;display:flex;justify-content:center;align-items:center}
.watch-metric strong{font-size:clamp(22px,5.6vw,34px);font-weight:900;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere}
.watch-metric small{color:var(--muted);font-size:10px;line-height:1.35;min-height:14px}
.watch-metric-platform strong{color:var(--mint);font-size:clamp(29px,7.5vw,40px)}
.watch-waypoint{font-size:12px;color:var(--amber);line-height:1.45;
  background:var(--panel-raised);border:1px solid var(--border);
  margin:0 0 13px;padding:9px 11px;border-radius:9px}
.watch-alert{display:flex;align-items:center;gap:10px;min-height:69px;
  padding:10px 12px;border:1px solid var(--border);border-radius:12px}
.watch-alert-icon{font-size:22px;flex-shrink:0}
.watch-alert>div{flex:1;min-width:0}
.watch-alert strong{font-size:15px;display:block;line-height:1.3}
.watch-alert small{display:block;font-size:11px;line-height:1.4;margin-top:4px}
.watch-alert-on{background:#153b35;border-color:#34836d;color:#dbffed}
.watch-alert-on small{color:#c0e6d5}
.watch-alert-off{background:#41351f;border-color:#8b6937;color:#ffe7b0;flex-wrap:wrap}
.watch-alert-off small{color:#ffdfa4}
.watch-alert-pending{background:var(--panel-raised);color:var(--text)}
.watch-alert-enable{width:100%;min-height:44px;padding:9px}
.watch-quick-actions{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:8px 2px 3px;min-height:39px}
.watch-checked{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.watch-refresh{font-size:13px;font-weight:800;background:transparent;color:var(--mint);
  border:0;padding:9px 4px;min-height:44px;white-space:nowrap}
.watch-refresh:disabled{opacity:.6}
.watch-inline-warning{font-size:12px;line-height:1.45;border-radius:8px;
  color:var(--amber);margin:10px 0;padding:9px 11px;
  background:var(--panel-raised);border:1px solid var(--border)}
.watch-alternatives-link{display:flex;align-items:center;justify-content:center;
  width:100%;background:transparent;border:0;color:var(--muted);
  text-decoration:underline;text-underline-offset:4px;font-size:12px;
  font-weight:750;min-height:42px;padding:8px}
.watch-alternatives-link span{margin-left:7px}
.watch-disruption{display:flex;flex-direction:column;gap:6px;border-radius:12px;
  padding:11px;background:#452a35;border:1px solid #b86470;margin:9px 0}
.watch-disruption strong{font-size:14px;color:#ffe1e5}
.watch-disruption>span{font-size:11px;color:#f0cbd0;line-height:1.4}
.watch-disruption .chaos-trigger{min-height:44px;margin-top:4px;padding:9px 13px}
.watch-details{border-top:1px solid var(--border);margin:1px 0 0;padding:1px 0;
  color:var(--muted);font-size:12px}
.watch-details>summary{cursor:pointer;min-height:37px;display:flex;align-items:center;
  font-size:12px;font-weight:700;list-style:revert;padding:7px 1px}
.watch-details>summary::marker{color:var(--mint)}
.watch-details>p{font-size:12px;line-height:1.5;margin:0 0 10px}
.watch-details .activity-list{padding:5px 0 10px;gap:7px}
/* Beta departure checks: full-width rows, never the activity timeline's
   9px grid column (which forced every word onto a separate iPhone line). */
.watch-tech-details{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  padding:8px 0 11px;border-top:1px solid var(--border)}
.watch-tech-details>summary{cursor:pointer;font-size:12px;font-weight:800;
  min-height:36px;line-height:1.5}
.watch-tech-details>p{font-size:12px;line-height:1.55;margin:8px 0;overflow-wrap:break-word}
.watch-tech-checks{display:grid;gap:7px;margin:10px 0}
.watch-tech-check{display:block;min-width:0;padding:10px 12px;
  border-radius:9px;border:1px solid var(--border);background:var(--panel-raised)}
.watch-tech-check-head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:5px 12px;font-size:12px;line-height:1.4}
.watch-tech-check-head>span{font-variant-numeric:tabular-nums;white-space:nowrap}
.watch-tech-check-head>strong{font-size:12px;color:var(--text)}
.watch-tech-check>p{font-size:12px;margin:5px 0 0;line-height:1.4;overflow-wrap:break-word}
/* Arrival diagnostics are standalone full-width rows, not the two-column activity timeline. */
.watch-arrival-checks{display:flex;flex-direction:column;gap:6px;margin:10px 0;min-width:0}
.watch-arrival-check{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:3px 7px;width:100%;min-width:0;padding:9px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--panel-raised);
  font-size:11px;line-height:1.5;overflow-wrap:normal;word-break:normal}
.watch-arrival-check>span{min-width:0}
.watch-arrival-check-time{white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--text);font-weight:800}
.watch-arrival-checks>p{margin:4px 0;font-size:12px}
/* Each receipt is readable on an iPhone, without the activity timeline grid. */
.watch-delivery-checks{display:grid;gap:7px;min-width:0;margin:10px 0}
.watch-delivery-check{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:5px 12px;
  align-items:baseline;min-width:0;width:100%;padding:10px 11px;
  border:1px solid var(--border);background:var(--panel-raised);
  border-radius:9px;font-size:11px;line-height:1.5}
.watch-delivery-check strong{width:100%;color:var(--text);font-size:12px}
.watch-delivery-check span{min-width:0;font-variant-numeric:tabular-nums;
  overflow-wrap:normal;word-break:normal;white-space:normal}
.watch-delivery-checks>p{font-size:12px;margin:4px 0}
.watch-extra-actions{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 10px}
.watch-extra-actions .btn{min-height:44px;font-size:12px;padding:8px 10px}
.watch-bottom-actions{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;gap:7px;margin-top:9px;border-top:1px solid var(--border);padding-top:14px}
.watch-bottom-actions .btn,.watch-bottom-actions .watch-help{
  min-width:0;min-height:48px;padding:9px 7px;font-size:12px;line-height:1.25;
  text-align:center;white-space:normal;overflow-wrap:normal}
.watch-help{border-radius:10px;font-weight:800;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.watch-help-quiet{color:var(--text);background:#782d3b22;border:1px solid #bb6276}
.watch-help-quiet:hover{color:#ffe6eb;background:#782d3b44;border-color:#e78398}
.watch-help-disrupted{color:#ffe5e5;background:#712d3b;border:1px solid #db6877}
.watch-help-disrupted:hover{background:#903749}
.watch-chaos-primary{font-size:inherit;font-weight:850;line-height:1.1}
.watch-chaos-caption{color:#ffc1cc;font-weight:850;font-size:9px;
  letter-spacing:.65px;line-height:1.2;white-space:nowrap}
.watch-help-disrupted .watch-chaos-caption{color:#ffe2e8}
.watch-help:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.watch-help:disabled{opacity:.55;cursor:not-allowed}
.watch-stop{color:var(--muted);border-color:var(--border)}
.service-watch-label{font-size:12px;color:var(--mint);font-weight:850;white-space:nowrap;display:flex;gap:5px;align-items:center}
@media(max-width:550px){
 .page-shell:has(.watch-compact){padding-left:12px;padding-right:12px}
 .watch-compact{padding:15px 13px 13px;border-radius:16px}
 .watch-journey{gap:6px}
 .watch-metric{padding:10px 4px 9px;gap:4px}
 .watch-metric>span{font-size:9px;letter-spacing:0}
 .watch-metric small{font-size:9px}
 .watch-compact-head .status-pill{padding:6px 9px;font-size:10px}
 .watch-bottom-actions .btn,.watch-bottom-actions .watch-help{padding:7px 4px;font-size:11px}
 .service-watch-label{font-size:11px}
}
@media(max-width:375px){
 .watch-compact{padding:12px 10px}
 .watch-station strong{font-size:17px}
 .watch-metric strong{font-size:22px}
 .watch-metric-platform strong{font-size:29px}
 .watch-bottom-actions{gap:5px}
 .chaos-mode-choice{padding:6px 4px;font-size:11px}
 .service-watch-label{max-width:105px;white-space:normal;text-align:center}
}
:root[data-theme="railboard"] .watch-compact,:root[data-theme="railboard"] .watch-metric{
  border-radius:5px}
:root[data-theme="railboard"] .watch-station strong,:root[data-theme="railboard"] .watch-metric strong{letter-spacing:0}
:root[data-theme="starship"] .watch-compact{border-radius:23px 8px 23px 8px}
:root[data-theme="starship"] .watch-metric{border-radius:15px 5px 15px 5px}

/* Browsing another train never disarms the existing registration. */
.watch-browse-banner{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;background:var(--panel-raised);border:1px solid var(--mint);
  border-radius:13px;padding:13px 15px;margin:0 0 16px}
.watch-browse-banner>div{display:flex;flex-direction:column;gap:5px;flex:1 1 190px}
.watch-browse-banner strong{font-size:14px;color:var(--mint)}
.watch-browse-banner span{font-size:12px;color:var(--muted)}
.watch-browse-banner .btn{min-height:44px;font-size:12px;padding:9px 12px}
.watch-browse-error{color:var(--danger)!important;font-weight:700}
@media(max-width:550px){.watch-browse-banner .btn{width:100%}}

/* The finder navigation is primary; its separate Chaos shortcut is
   deliberately low-key beneath each search form. */
.search-navigation{margin:0 0 16px}
.search-navigation .search-tabs{margin:0}
.search-navigation .search-tab{min-height:49px;display:flex;align-items:center;
  justify-content:center;gap:7px;line-height:1.3;padding:10px 8px}
.search-navigation .search-tab span[aria-hidden="true"]{flex-shrink:0;font-size:18px;line-height:1}
.search-navigation .search-tab span:last-child{min-width:0}
/* Secondary, occasional-use destination: outlined rather than filled. */
.search-chaos-row{display:flex;align-items:center;justify-content:center;
  width:min(100%,390px);margin:16px auto 12px;padding:2px 10px;
  border:1px solid #bd6671;border-radius:12px;background:transparent}
.search-chaos-link{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;gap:5px;padding:7px 9px;color:var(--muted);
  background:transparent;border:0;border-radius:9px;font-size:12px;font-weight:750;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.search-chaos-link:hover{color:var(--text);background:var(--panel-raised)}
.search-chaos-link:focus-visible,.search-tab:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.search-chaos-link span[aria-hidden="true"]{font-size:13px}
.search-chaos-description{font-weight:500}
@media(max-width:385px){
 .search-navigation .search-tab{gap:5px;font-size:11px}
 .search-navigation .search-tab span[aria-hidden="true"]{font-size:16px}
 .search-chaos-link{font-size:11px}
}

/* Shared, accessible rolling live-board time search, themed using existing tokens. */
.search-time-field{margin-top:15px;max-width:195px}
.search-time-field input{min-height:46px}
.search-window-hint{margin:11px 2px 15px;line-height:1.5}
.search-window-next{display:flex;justify-content:flex-end;margin:14px 0 6px}
.search-window-next .btn{min-height:44px;padding:10px 16px;font-size:13px}
@media(max-width:420px){.search-window-next .btn{width:100%}}

/* The Now shortcut belongs only to the specific-train finder. */
.search-time-row{display:flex;align-items:flex-end;gap:9px;flex-wrap:nowrap}
.search-time-row .search-time-field{flex:0 1 195px;min-width:0}
.search-now-button{flex:none;min-height:46px;padding:9px 16px;margin-top:15px;font-weight:800}

/* An already watched train is a return action, not a second watch choice. */
.chaos-current-return{min-height:44px;padding:10px 15px;font-size:12px;font-weight:850;
  white-space:nowrap;border-color:var(--mint);color:var(--mint)}
.chaos-current-return:hover{background:var(--panel-raised)}
.chaos-current-return:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media(max-width:550px){.chaos-current-return{width:100%}}


/* ================================================================
   BOARDPING ART COLLECTION: six original static SVG landscapes.
   Current Modern, Classic Rail and Starship stay unchanged.
   Artwork is decorative, fully pointer-transparent, and never sits
   on top of controls. Text-bearing surfaces stay dark and opaque.
   ================================================================ */
.theme-art{display:none;pointer-events:none}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) body{
  background:var(--bg);
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .theme-art{
  display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--art-veil),var(--art-image);
  background-repeat:no-repeat;background-size:cover;background-position:center top;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .page-shell{
  position:relative;z-index:1;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .topbar{
  border-color:var(--art-border);
  background:linear-gradient(100deg,rgba(9,15,32,.80),rgba(9,15,32,.44));
  border-radius:0 0 18px 18px;padding-left:12px;padding-right:12px;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .hero{
  background-image:linear-gradient(95deg,rgba(9,15,32,.96),rgba(9,15,32,.76) 68%,rgba(9,15,32,.42)),
    var(--art-image);
  background-size:cover;background-position:center top;
  padding:26px 24px;margin:13px 0 17px;
  border:1px solid var(--art-border);border-radius:19px;
  box-shadow:0 18px 50px #02081755;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) :is(.card,.watch-compact,.fastest-result){
  background:linear-gradient(145deg,var(--art-card-top),var(--art-card-bottom));
  border-color:var(--art-border);
  box-shadow:0 14px 35px #02081766;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) :is(
  .field input,.field select,.theme-wrap select,.service-card,.stat,.watch-metric,
  .search-tab,.recent-destinations button){
  background:var(--art-control);
  border-color:var(--art-border);
  color:var(--text);
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) :is(
  .btn-secondary,.watch-browse-banner,.watch-waypoint,.watch-inline-warning){
  background:var(--art-control);border-color:var(--art-border);
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .field label{
  color:var(--text);
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) :is(.callout,.chaos-zone .alternative-search){
  background:var(--art-card-bottom);border-color:var(--art-border);
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .footer{
  color:var(--muted);border-color:var(--art-border);
  text-shadow:0 1px 2px #000c;
}
:root[data-theme="sunrise"]{
  --bg:#131d34;--panel:#24253c;--panel-raised:#353148;
  --border:#a08188;--text:#fff3ed;--muted:#e8c8c8;
  --mint:#ffce91;--mint-dark:#604057;--amber:#ffe198;--danger:#ffc1bd;
  --art-image:url("./assets/theme-sunrise.svg");
  --art-veil:linear-gradient(180deg,#1a1c3733,#151c3366 52%,#081525d9);
  --art-card-top:#2b293ff2;--art-card-bottom:#151d34f7;
  --art-control:#242842f5;--art-border:#c398a16e;
}
:root[data-theme="sunrise"] .btn-primary{background:#ffd29c;border-color:#ffd29c;color:#292039}
:root[data-theme="sunrise"] .hero h1 span{text-shadow:0 2px 24px #ffb39a66}
:root[data-theme="midnight"]{
  --bg:#061326;--panel:#12263c;--panel-raised:#203d55;
  --border:#3b8294;--text:#e9f7ff;--muted:#afd4e3;
  --mint:#88eee1;--mint-dark:#1c555e;--amber:#ffe2a3;--danger:#ffa7b7;
  --art-image:url("./assets/theme-midnight.svg");
  --art-veil:linear-gradient(180deg,#08132744,#07152b66 55%,#051225e3);
  --art-card-top:#112940f1;--art-card-bottom:#071d35f8;
  --art-control:#102c43f7;--art-border:#72b8c76b;
}
:root[data-theme="midnight"] :is(.brand-type>span,.watch-metric-platform strong){
  text-shadow:0 0 17px #8ceaff55;
}
:root[data-theme="pride"]{
  --bg:#1b142d;--panel:#281e3e;--panel-raised:#3b2a58;
  --border:#9a6fa6;--text:#fff1ff;--muted:#e0c8ed;
  --mint:#ffb6e1;--mint-dark:#563157;--amber:#ffe1a2;--danger:#ff9fa9;
  --art-image:url("./assets/theme-pride.svg");
  --art-veil:linear-gradient(180deg,#22153233,#170f2e73 58%,#0c1425e8);
  --art-card-top:#2c2041f2;--art-card-bottom:#18172ff8;
  --art-control:#281d42f8;--art-border:#d1a0ea7d;
}
:root[data-theme="pride"] :is(.hero h1 span,.brand-type>span){
  background:linear-gradient(100deg,#ffb3c7,#ffe3a7,#96f0b8,#9bdeff,#d4b7ff);
  background-clip:text;-webkit-background-clip:text;color:transparent;
}
:root[data-theme="pride"] .btn-primary{
  background:linear-gradient(105deg,#ffb6c6,#ffe4a3,#96f0b8,#91d7fc,#d4b5ff);
  border-color:#ffcde6;color:#201c36;
}
:root[data-theme="pride"] .watch-metric-platform strong{color:#c8dfff}
:root[data-theme="neon"]{
  --bg:#0c0c29;--panel:#1b1742;--panel-raised:#30205f;
  --border:#844ba7;--text:#fff1ff;--muted:#d4bcea;
  --mint:#5ef0ef;--mint-dark:#234767;--amber:#ffcd8d;--danger:#ffa3ca;
  --art-image:url("./assets/theme-neon.svg");
  --art-veil:linear-gradient(180deg,#130d312e,#100d2b8c 62%,#090b21e5);
  --art-card-top:#261941f2;--art-card-bottom:#101435f8;
  --art-control:#1c1d48f8;--art-border:#dc71d28c;
}
:root[data-theme="neon"] :is(.hero h1 span,.watch-metric-platform strong){
  text-shadow:0 0 18px #31e4f48c;
}
:root[data-theme="neon"] .btn-primary{
  background:linear-gradient(100deg,#5ef0ef,#aaadff);
  border-color:#5ef0ef;color:#081a33;
}
:root[data-theme="neon"] .card{box-shadow:0 18px 48px #e848bd26,0 0 0 1px #32e4fa18}
:root[data-theme="disco"]{
  --bg:#170c31;--panel:#271c45;--panel-raised:#38265a;
  --border:#b779c5;--text:#fff1ff;--muted:#e4c3f0;
  --mint:#ffd0f2;--mint-dark:#60406e;--amber:#ffe3a8;--danger:#ffabbd;
  --art-image:url("./assets/theme-disco.svg");
  --art-veil:linear-gradient(180deg,#1b0b343d,#180e366e 52%,#0a1028df);
  --art-card-top:#352045f3;--art-card-bottom:#171633f8;
  --art-control:#2a2148f8;--art-border:#eca6e58c;
}
:root[data-theme="disco"] .btn-primary{
  background:linear-gradient(105deg,#ffd0f2,#c4bdff);
  border-color:#ffd0f2;color:#25152e;
}
:root[data-theme="disco"] .hero h1 span{text-shadow:0 0 21px #f7a6f4a0}
:root[data-theme="disco"] :is(.brand-mark,.card){
  box-shadow:0 12px 34px #ee7ae526;
}
:root[data-theme="tropical"]{
  --bg:#092b41;--panel:#183a4d;--panel-raised:#255466;
  --border:#62a6ad;--text:#edfcfb;--muted:#bee2e5;
  --mint:#ffe29f;--mint-dark:#45645c;--amber:#ffe2a9;--danger:#ffb3a5;
  --art-image:url("./assets/theme-tropical.svg");
  --art-veil:linear-gradient(180deg,#27264e3a,#102b4873 50%,#072338e3);
  --art-card-top:#1e4057f2;--art-card-bottom:#0b2a40f8;
  --art-control:#17394df8;--art-border:#a2dfd67a;
}
:root[data-theme="tropical"] .btn-primary{
  background:linear-gradient(110deg,#ffe39f,#ffc29b);
  border-color:#ffe39f;color:#2e3148;
}
:root[data-theme="tropical"] .hero h1 span{text-shadow:0 1px 16px #ffc9a066}
@media(max-width:550px){
 :root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .hero{
  padding:21px 17px;margin:10px 0 13px;
 }
 :root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"]) .theme-art{
  background-position:60% top;
 }
 .theme-wrap select{width:clamp(105px,30vw,144px);max-width:144px;min-width:105px;
   text-overflow:ellipsis}
 .theme-wrap{flex-shrink:0}
}
@media(max-width:385px){
 .theme-wrap select{width:110px;min-width:0}
 .topbar{gap:6px}
 .brand{gap:6px}
 .brand-mark{width:38px;height:38px}
 .brand-type{font-size:21px}
}

/* ART-SKIN SEARCH SELECTION: artwork surface colours must not mask
   the active Specific Train / Fastest Train To feedback. */
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"])
  .search-navigation .search-tab[aria-pressed="true"]{
  background:linear-gradient(125deg,var(--mint-dark),var(--panel-raised));
  color:var(--mint);border-color:var(--mint);
  box-shadow:inset 0 0 0 1px var(--mint),0 4px 20px #0005;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"])
  .search-navigation .search-tab[aria-pressed="false"]{
  background:var(--art-control);color:var(--muted);border-color:var(--art-border);
  box-shadow:none;
}
:root:is([data-theme="sunrise"],[data-theme="midnight"],[data-theme="pride"],
  [data-theme="neon"],[data-theme="disco"],[data-theme="tropical"])
  .search-navigation .search-tab[aria-pressed="false"]:hover{
  color:var(--text);border-color:var(--mint);
}

/* A departed service may be shown as information, never as a boarding choice.
   Its state stays readable across all artwork skins. */
.service-card.service-departed,.service-card.service-departed:hover{
  cursor:not-allowed;opacity:.78;background:var(--panel);
  border-color:var(--border);
}
.service-card.service-departed .service-watch-label{color:var(--amber);
  white-space:normal;text-align:right;font-weight:850}
.fastest-result.unverified .fastest-result-head span:first-child{
  color:var(--amber);
}

/* User-initiated searches scroll to the results rather than leaving them
   below the fold. In an installed iPhone PWA, keep the results visible below
   its fixed system status bar. No sticky layer or theme-specific colors. */
.search-scroll-target {
  scroll-margin-top: calc(18px + var(--tp-status-height, 0px));
}


/* Pre-launch UX: clearly identify direct-only routes and a safe station swap. */
.direct-emphasis{font-weight:900;text-decoration:underline;text-underline-offset:3px}
.direct-note{font-size:12px;line-height:1.5;margin:13px 2px -2px}
.station-swap{display:flex;align-items:center;justify-content:center;gap:7px;
  width:max-content;max-width:100%;min-height:44px;margin:7px auto 0;
  padding:8px 12px;border-radius:11px;color:var(--mint);background:var(--panel-raised);
  border:1px solid var(--border);font-size:12px;font-weight:850}
.station-swap:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* Never let long station names or a fixed-width CTA widen a phone viewport. */
.page-shell,.app-content,.service-list{min-width:0}
.service-list,.service-card{max-width:100%}
.service-card{min-width:0}
.service-card .train-time{flex-shrink:0}
.service-card .service-route{min-width:0;overflow-wrap:anywhere}
.service-card .service-watch-label{min-width:0}

@media(max-width:550px){
  .service-card{display:grid;grid-template-columns:max-content minmax(0,1fr);
    grid-template-areas:"time route" "action action";align-items:center;
    column-gap:10px;row-gap:10px}
  .service-card .train-time{grid-area:time;font-size:clamp(20px,6vw,25px)}
  .service-card .service-route{grid-area:route}
  .service-card .service-route strong{white-space:normal;overflow:visible;
    text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
  .service-card .service-route span{overflow-wrap:anywhere;line-height:1.4}
  .service-card .service-watch-label{grid-area:action;justify-self:end;
    max-width:100%;white-space:normal;text-align:right}
}

/* A share action must fit alongside last checked and refresh on small screens. */
.watch-quick-actions{flex-wrap:wrap}
.watch-quick-buttons{display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;gap:8px;min-width:0}
.watch-share{color:var(--text)}
@media(max-width:385px){
  .watch-quick-actions{gap:3px}
  .watch-quick-buttons{width:100%;justify-content:space-between}
}

/* A shared journey is an informational landing page, not an active watch. */
.shared-journey{margin:20px 0}
.shared-journey-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:14px}
.shared-journey-head h2{font-size:21px}
.shared-readonly{color:var(--muted);font-weight:900;letter-spacing:1px;
  border:1px solid var(--border);border-radius:50px;padding:7px 10px;font-size:10px}
.shared-route{font-size:clamp(19px,5vw,28px);line-height:1.3;overflow-wrap:anywhere;
  margin:8px 0 12px}
.shared-schedule{font-size:15px;color:var(--text);line-height:1.5}
.shared-live-status{display:flex;flex-direction:column;gap:6px;border-radius:12px;
  border:1px solid var(--border);background:var(--panel-raised);
  padding:14px;margin:17px 0;font-size:14px}
.shared-live-status span{font-size:12px;color:var(--muted);line-height:1.5}
.shared-live-note,.shared-current-watch{border:1px solid var(--border);
  background:var(--panel-raised);border-radius:12px;padding:12px;
  font-size:12px;line-height:1.5;margin:15px 0}
.shared-current-watch{color:var(--mint)}
.shared-journey-actions{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}
.shared-journey-actions .btn{flex:1 1 155px;font-size:12px;min-height:44px;
  white-space:normal}

/* Quiet, always-visible feedback access, including compact tracking view. */
.feedback-link{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:7px 10px;border:1px solid var(--muted);border-radius:9px;background:transparent;color:var(--text);text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
.feedback-link:hover,.feedback-link:focus-visible{border-color:var(--mint);color:var(--mint)}
@media(max-width:420px){.feedback-link{font-size:11px;padding:6px 7px;margin-left:3px}}

/* Mobile header: keep logo and skin on first row; feedback on its own right-aligned row.
   Avoids horizontal overflow on narrow iPhone Home Screen web apps. */
@media(max-width:550px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:5px}
  .topbar .brand{grid-column:1;grid-row:1;min-width:0}
  .topbar .theme-wrap{grid-column:2;grid-row:1;min-width:0}
  .topbar .feedback-link{grid-column:1 / -1;grid-row:2;justify-self:end;margin:0;padding:5px 9px;font-size:11px}
}


/* 2026 BoardPing identity — approved Option C.
   The fixed blue tile is used for installation and print; this very same
   train + departure board + signal vector is theme-aware only in the header.
   No filter/recolouring of the fixed PWA icon, and no JS required. */
.topbar .brand-mark{
  display:grid;place-items:center;flex:0 0 auto;
  background:transparent;border:0;box-shadow:none;
  border-radius:0;overflow:visible;
}
.topbar .brand-mark .bp-dynamic-symbol{
  display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--mint) 22%,transparent));
}
.topbar .bp-board-surface{fill:var(--bg);stroke:var(--mint);stroke-width:8}
.topbar .bp-board-bar{fill:var(--amber)}
.topbar .bp-train-body{fill:var(--text)}
.topbar .bp-train-window{fill:var(--bg)}
.topbar .bp-train-track{fill:none;stroke:var(--text);stroke-width:7;stroke-linecap:round}
.topbar .bp-radio-waves{fill:none;stroke:var(--mint);stroke-width:9;stroke-linecap:butt}
.topbar .brand-type{white-space:nowrap}
.topbar .brand-ping{display:inline-block;position:relative}
.topbar .brand-word-waves{
  position:absolute;top:-16px;right:-9px;width:27px;height:23px;
  fill:none;stroke:var(--mint);stroke-width:4;stroke-linecap:round;
  pointer-events:none;
}
:root[data-theme="railboard"] .topbar .bp-train-body{fill:#ffd47b}
:root[data-theme="railboard"] .topbar .bp-train-track{stroke:#ffd47b}
:root[data-theme="starship"] .topbar .bp-train-body{fill:#ffb383}
:root[data-theme="starship"] .topbar .bp-train-track{stroke:#e79bb0}
:root[data-theme="pride"] .topbar .bp-train-body{fill:url(#bp-rainbow-mark)}
:root[data-theme="pride"] .topbar .bp-train-track{stroke:url(#bp-rainbow-mark)}
:root[data-theme="pride"] .topbar .bp-radio-waves{stroke:#ffb6e1}
@media(max-width:550px){
  .topbar .brand-word-waves{width:22px;height:20px;right:-7px;top:-14px}
}
@media(max-width:385px){
  .topbar .brand-mark{width:35px;height:35px}
  .topbar .brand-type{font-size:20px}
  .topbar .brand-word-waves{width:20px;height:18px;right:-6px;top:-13px}
}


/* Private feedback dialog. The watched train stays active behind the form. */
.feedback-dialog:not([open]){display:none!important}
.feedback-dialog{
  width:min(100% - 24px,530px);max-width:530px;
  max-height:calc(100dvh - 34px);overflow-y:auto;overscroll-behavior:contain;
  padding:0;margin:auto;border:1px solid var(--border);border-radius:20px;
  background:var(--panel);color:var(--text);
  box-shadow:0 22px 70px #000b
}
.feedback-dialog::backdrop{background:#020b19d9}
.feedback-sheet{padding:clamp(17px,4vw,25px)}
.feedback-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.feedback-head h2{font-size:clamp(23px,5vw,30px);margin:2px 0 9px;letter-spacing:-.7px;line-height:1.2}
.feedback-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--mint);font-weight:800;margin:0}
.feedback-intro{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.feedback-close{flex:0 0 44px;min-width:44px;min-height:44px;font-size:28px;line-height:1;
  border:1px solid var(--border);border-radius:12px;background:var(--panel-raised);color:var(--text)}
.feedback-dialog form{display:flex;flex-direction:column;gap:8px}
.feedback-dialog label{font-size:14px;font-weight:750;margin-top:8px;color:var(--text)}
.feedback-dialog input,.feedback-dialog select,.feedback-dialog textarea{
  width:100%;min-height:46px;padding:12px;background:var(--bg);color:var(--text);
  border:1px solid #52738a;border-radius:11px;font-size:16px;line-height:1.45
}
.feedback-dialog textarea{min-height:130px;resize:vertical}
.feedback-dialog input:focus,.feedback-dialog select:focus,.feedback-dialog textarea:focus{
  border-color:var(--mint);outline:2px solid #60e6bf55;outline-offset:1px
}
.feedback-dialog .feedback-optional{font-size:12px;font-weight:500;color:var(--muted)}
.feedback-privacy{color:var(--muted);font-size:12px;line-height:1.5;margin:9px 0 6px}
.feedback-status{background:#12463e;border:1px solid var(--mint);color:#d7fff0;
  border-radius:9px;font-size:14px;padding:12px;line-height:1.5;margin:4px 0}
.feedback-status[hidden]{display:none!important}
.feedback-status.feedback-error{background:#4b2430;border-color:var(--danger);color:#ffe2e2}
.feedback-send{width:100%;min-height:50px;background:var(--mint);color:#082b2c;
  border:0;border-radius:11px;font-size:17px;font-weight:850}
.feedback-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important}
@media(max-width:380px){.feedback-sheet{padding:16px}.feedback-head h2{font-size:23px}}