: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}