/* Which Side? — design tokens + layout. Mobile-first. Ticket look: dark band, white slips, one amber accent. */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/chakra-petch-600.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/chakra-petch-700.woff2) format("woff2"); }
:root {
  --bg: #e8ebf0; --bg-elev: #ffffff; --bg-soft: #f1f3f6; --line: #dfe3e9; --line-strong: #c3c8d1; --text: #12151c; --muted: #565d6b; --faint: #565d6b;
  --band: #12151c; --on-band: #ffffff; --band-muted: #a7aebb; --band-line: #2c323e; --amber: #ffb020; --on-amber: #12151c; --accent: #12151c;
  --left: #2b59c3; --left-soft: #e3eafb; --right: #c2410c; --right-soft: #fbe7dc; --either: #6b7280;
  --sun: #f59e0b; --sun-soft: #fff3d6; --rain: #3b82f6; --rain-soft: #dbeafe; --wind: #06b6d4; --dust: #a16207; --hill: #65a30d; --hill-edge: #854d0e; --sea: #0ea5e9; --night: #1e293b; --warn: #c81e1e; --warn-soft: #fde8e8;
  --radius: 16px; --shadow: 0 1px 2px rgba(18, 21, 28, .08), 0 10px 28px -18px rgba(18, 21, 28, .3);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --display: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0d12; --bg-elev: #171a21; --bg-soft: #1f232c; --line: #2a2f3a; --line-strong: #3d4452; --text: #e9ecf1; --muted: #a2a9b6; --faint: #a2a9b6; --accent: #ffb020; --left: #7ea2ff; --left-soft: #1c2747; --right: #fb923c; --right-soft: #3a1f10; --hill-edge: #ca8a04; --sun-soft: #3a2a08; --rain-soft: #172554; --warn: #f87171; --warn-soft: #3b1212; --shadow: 0 1px 2px rgba(0, 0, 0, .5); color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #0b0d12; --bg-elev: #171a21; --bg-soft: #1f232c; --line: #2a2f3a; --line-strong: #3d4452; --text: #e9ecf1; --muted: #a2a9b6; --faint: #a2a9b6; --accent: #ffb020; --left: #7ea2ff; --left-soft: #1c2747; --right: #fb923c; --right-soft: #3a1f10; --hill-edge: #ca8a04; --sun-soft: #3a2a08; --rain-soft: #172554; --warn: #f87171; --warn-soft: #3b1212; --shadow: 0 1px 2px rgba(0, 0, 0, .5); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.45; font-size: 16px; }
a { color: inherit; text-underline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 .6rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
small { color: var(--muted); font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar :focus-visible, .band :focus-visible, .ticket-head :focus-visible, .board :focus-visible { outline-color: var(--amber); }
#verdictBig:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(100% - 24px, 600px); margin-inline: auto; }
.lbl, .slip .field > label { display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* top bar + band */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--band); color: var(--on-band); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { font: 700 17px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); text-decoration: none; white-space: nowrap; }
.top-actions { display: flex; align-items: center; margin-right: -10px; }
.top-btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--on-band); font-weight: 600; font-size: 15px; }
.top-btn:hover { background: var(--band-line); }
.top-btn.install { color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); margin-right: 4px; }
.top-btn.install:hover { background: var(--amber); color: var(--on-amber); }
.band { background: var(--band); color: var(--on-band); padding: 6px 0 52px; }
.band h1 { font: 700 clamp(1.7rem, 7.4vw, 2.3rem)/1.08 var(--display); text-wrap: balance; }
.modes { display: flex; gap: 24px; margin-top: 16px; border-bottom: 1px solid var(--band-line); }
.mode { min-height: 44px; padding: 0; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--band-muted); font: 700 14px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.mode.active { color: var(--on-band); border-bottom-color: var(--amber); }

/* ticket slips */
.slip { position: relative; background: var(--bg-elev); border-radius: var(--radius); box-shadow: var(--shadow); }
.planner .slip { margin-top: -40px; }
.slip-sec { padding: 16px 18px; }
.perf { position: relative; height: 0; margin: 0 14px; border-top: 2px dashed var(--line); }
.perf::before, .perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.perf::before { left: -26px; } .perf::after { right: -26px; }

/* planner */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > label { font-weight: 600; font-size: .92rem; }
.field input, .field textarea, .field select { width: 100%; min-width: 0; border: 1.5px solid var(--line-strong); background: var(--bg-elev); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.field input { min-height: 46px; }
.slip .field input { min-height: 44px; padding: 6px 0 8px; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; font: 600 19px var(--display); }
.slip .field input:focus-visible { outline-offset: 4px; }
.slip #depart { font: 600 17px var(--mono); }
@media (max-width: 380px) { .slip #depart { font-size: 15px; letter-spacing: -.02em; } }
.od { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; align-items: end; margin-bottom: 14px; }
.od:last-child { margin-bottom: 0; }
.od .field { margin-bottom: 0; }
.swap { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--bg-elev); color: var(--text); }
.swap:hover { border-color: var(--text); }
.swap svg { width: 18px; height: 18px; }
.ac { position: relative; }
.ac-list { position: absolute; z-index: 40; left: 0; right: -54px; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.ac-list:empty { display: none; }
.ac-list li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.ac-list li:hover, .ac-list li.active { background: var(--bg-soft); }
.ac-list .nm { font-weight: 600; } .ac-list .sb { color: var(--faint); font-size: .78rem; white-space: nowrap; }
.ac-list .ad { color: var(--muted); font-size: .82rem; }
.ac-list li.msg { color: var(--muted); cursor: default; }
.ac-list li.msg:hover { background: none; }
.slip .field.when { margin-bottom: 0; }
.inline { display: flex; gap: 10px; align-items: flex-end; }
.inline input { flex: 1 1 auto; min-width: 0; }
.prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (min-width: 440px) { .prefs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip { min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); color: var(--text); font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.chip:hover { border-color: var(--text); }
.chip.active { background: var(--text); border-color: var(--text); color: var(--bg-elev); }

/* buttons */
.btn { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--bg-elev); color: var(--text); font-weight: 600; }
.btn:hover { border-color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.btn.tk { font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.btn.primary { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }
.btn.primary:hover { filter: brightness(.95); }
.btn.primary:disabled { opacity: .7; cursor: progress; }
.btn.wide { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 16px; border-radius: 12px; font: 700 17px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.btn.wide svg { width: 18px; height: 18px; }
.link-btn { padding: 10px 0; border: 0; background: none; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.status { min-height: 1.2em; margin: 10px 2px 0; color: var(--muted); font-size: .95rem; }
.planner > .status:empty { margin: 0; min-height: 0; }
.status.err { color: var(--warn); font-weight: 600; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* folding sections */
details summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
details[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
#gmaps { margin-top: 14px; padding: 0 18px; background: var(--bg-elev); border-radius: var(--radius); box-shadow: var(--shadow); }
#gmaps[open] { padding-bottom: 14px; }
#more { margin-top: 4px; }
#more > summary { justify-content: center; }
.more-body { padding: 14px 18px 6px; }
.more-body details { border-top: 1px solid var(--line); }
.more-body details[open] { padding-bottom: 10px; }
.radio { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: .92rem; }
.radio input { width: 18px; height: 18px; }
.vias .via { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; align-items: end; margin-bottom: 8px; }
.via-extra { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; margin: -4px 0 10px; }
.via-extra input[type="time"] { border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; background: var(--bg-elev); }
.via-extra label { display: flex; gap: 4px; align-items: center; color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* answer ticket */
#results { margin-top: 28px; scroll-margin-top: 68px; }
.ticket-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 18px 16px; border-radius: var(--radius) var(--radius) 0 0; background: var(--band); color: var(--on-band); }
.trip-route { margin: 0; font: 700 clamp(1.4rem, 6.4vw, 1.9rem)/1.08 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.trip-meta { margin: 6px 0 0; color: var(--band-muted); font: 13px/1.45 var(--mono); }
.ticket-head .btn { flex: none; border-color: var(--band-line); background: none; color: var(--on-band); }
.stale { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; background: var(--sun-soft); font-weight: 700; }
#results.is-stale > :not(.verdict), #results.is-stale .verdict > :not(.stale) { filter: grayscale(1); opacity: .75; }
#verdictBig .big { display: block; margin-top: 6px; font: 700 clamp(2rem, 10.5vw, 3rem)/1 var(--display); }
.verdict-sub { margin: 10px 0 0; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.stats .v { display: block; margin-top: 4px; font: 700 1.6rem/1.1 var(--display); }
.stats .o .v { color: var(--muted); }
.notice { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sun-soft); font-size: .9rem; }
.seatmap { display: flex; flex-direction: column; align-items: center; }
.seatmap .lbl { align-self: flex-start; }
.vehicle svg { display: block; width: min(100%, 260px); height: auto; margin: 10px auto 0; }
.vehicle text { font: 700 13px var(--display); letter-spacing: .12em; }
.side-help { margin: 8px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.reasons, .warnings, .facts, .tips { list-style: none; margin: 0; padding: 0; }
.reasons { margin-top: 4px; }
.reasons li { padding: 10px 0; border-top: 1px solid var(--line); }
.reasons li:first-child { border-top: 0; }
.reasons li.more-li { padding: 2px 0 0; }
.t { font: 600 .9em var(--mono); white-space: nowrap; }
.warnings li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); }
.warnings li::before { content: "!"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: var(--bg-elev); font: 700 13px var(--display); }
.share-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.share-row .btn { padding: 8px 6px; border-color: transparent; }
.share-row .btn:hover { border-color: var(--text); }

/* departure board */
.board { margin-top: 24px; padding: 16px 18px 6px; border-radius: var(--radius); background: var(--band); color: var(--on-band); }
.board h3 { font: 700 1.2rem var(--display); }
.board-head, .board-row { display: grid; grid-template-columns: 6.9rem 5rem minmax(0, 1fr); gap: 8px; align-items: center; }
.board-head { margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--band-line); color: var(--amber); font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.board-row { width: 100%; min-height: 50px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--band-line); background: none; color: var(--on-band); text-align: left; }
.board-row:last-child { border-bottom: 0; }
button.board-row:hover .sd { text-decoration: underline; text-underline-offset: 4px; }
.board-row .tm { font: 600 14px var(--mono); }
.board-row .sd { font: 700 16px var(--display); letter-spacing: .06em; }
.board-row .nt { color: var(--band-muted); font-size: 13px; line-height: 1.3; }
.board-row.cur, .board-row.cur .nt { color: var(--amber); }

/* map */
.route { margin-top: 24px; }
.route > .lbl { margin: 0 4px 8px; }
#map { width: 100%; height: 320px; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 4px 0; color: var(--muted); font-size: .82rem; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 6px; border-radius: 2px; vertical-align: middle; background: var(--c); }
.legend span.dotted::before { height: 5px; background: radial-gradient(circle, var(--c) 2.4px, transparent 2.6px) 0 50% / 7px 5px repeat-x; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: .9rem; }
.ev { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.ev-sunrise, .ev-sunset { background: #ffb020; } .ev-switch, .ev-reversal { background: #12151c; } .ev-moon { background: #cbd5e1; }

/* details */
.folds { margin-top: 16px; padding: 0 18px; }
.folds details + details { border-top: 1px solid var(--line); }
.folds details[open] { padding-bottom: 16px; }
.folds .lbl { margin: 14px 0 4px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp thead th { color: var(--muted); font: 600 11px var(--mono); letter-spacing: .1em; }
.cmp td { width: 26%; font-weight: 600; }
.cmp tbody th { font-weight: 400; }
.facts li, .tips li { padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.facts li:first-child, .tips li:first-child { border-top: 0; }

/* timeline */
.timeline-wrap { position: relative; }
.timeline-wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.tl-tip { position: absolute; z-index: 5; width: 200px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); box-shadow: var(--shadow); font-size: .82rem; line-height: 1.45; pointer-events: none; }
@media (max-width: 560px) { .tl-tip { display: none !important; } }
.tl-tip b { display: block; margin-bottom: 2px; }
.scrub { width: 100%; min-height: 32px; margin: 10px 0; accent-color: var(--text); }
.inspector { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-soft); }
.inspector .compass svg { width: 120px; height: 120px; }
.inspector dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .92rem; }
.inspector dt { color: var(--muted); } .inspector dd { margin: 0; font-weight: 600; }
@media (max-width: 480px) { .inspector { grid-template-columns: 1fr; justify-items: center; } .inspector dl { width: 100%; } }

/* hourly table */
.tbl-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
table.hourly { width: 100%; border-collapse: collapse; font-size: .84rem; white-space: nowrap; }
.hourly th, .hourly td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.hourly th { position: sticky; top: 0; background: var(--bg-elev); color: var(--muted); font-weight: 700; font-size: .8rem; }
.pill { display: inline-block; padding: 1px 6px; border-radius: 6px; font-weight: 700; font-size: .78rem; }
.pill.left { background: var(--left-soft); color: var(--left); } .pill.right { background: var(--right-soft); color: var(--right); } .pill.none { background: var(--bg-soft); color: var(--muted); }
.srcs { display: grid; gap: 6px; font-size: .9rem; }
.srcs dt { font-weight: 700; } .srcs dd { margin: 0 0 6px; color: var(--muted); }

/* footer, dialogs, toast */
footer { padding: 28px 0 36px; color: var(--muted); font-size: .82rem; }
footer p { margin: 0 0 6px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.sheet { width: calc(100% - 32px); max-width: 360px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.sheet::backdrop { background: rgba(18, 21, 28, .5); }
.sheet.help { max-width: 440px; max-height: 88vh; overflow: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sheet h3 { font: 700 1.3rem var(--display); }
.sheet h4 { margin: 16px 0 4px; font: 700 1rem var(--display); }
.steps { margin: 10px 0 14px; padding-left: 20px; line-height: 1.5; }
.sheet.help .steps { margin: 4px 0 6px; font-size: .9rem; }
.steps li { margin: 4px 0; }
.steps b { white-space: nowrap; }
.toast { position: fixed; bottom: 20px; left: 50%; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 600; opacity: 0; transform: translateX(-50%); transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: 1; }
@media print { .topbar, .band, .planner, .share-row, .scrub, footer { display: none !important; } .slip { box-shadow: none; break-inside: avoid; } }