:root {
  color-scheme: light;
  --bg: #f6f1e8;
  --panel: #fffdf8;
  --ink: #1f1a14;
  --muted: #5c5348;
  --line: #e2d8c8;
  --accent: #9a3412;
  --shadow: 0 12px 40px rgba(31, 26, 20, 0.08);
  font-family: "Source Sans 3", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { min-width: 320px; display: flex; flex-direction: column; overflow: hidden; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 700; line-height: 1.15; }
a { color: var(--accent); }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 0.85rem;
  color: var(--ink);
  background: linear-gradient(180deg, #fffdf8 0%, var(--bg) 100%);
}
h1 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.intro { margin: 0.35rem 0 0; max-width: 42rem; color: var(--muted); line-height: 1.45; font-size: 0.92rem; }
.subtitle { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }
.subtitle a { color: var(--accent); text-decoration: underline; }
.share-text-button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.share-text-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-status { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.78rem; }
.share-status:empty { display: none; }

.app-shell { flex: 1; display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); min-height: 0; }
#panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.filters { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.filters label { display: inline-block; margin-right: 12px; font-size: 0.9rem; }
.search-label { display: block !important; margin: 0.75rem 0 0.45rem !important; font-size: 0.78rem !important;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
#search { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 0.65rem; background: #fff; color: inherit; font: inherit; }
#search:focus-visible, .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#content { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; font-size: 0.95rem; }
.map-panel { position: relative; min-width: 0; min-height: 0; }
#map { width: 100%; height: 100%; background: #e7e6df; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.vb { background: #1565c0; } .dot.vd { background: #ef6c00; }
.hint { color: var(--muted); line-height: 1.5; }
.link { color: var(--accent); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.link:hover { text-decoration: underline; }
ul.list { list-style: none; padding: 0; margin: 8px 0; }
ul.list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
ul.stops { list-style: none; padding: 0 0 0 14px; margin: 8px 0; border-left: 3px solid var(--c, #1565c0); }
ul.stops li { position: relative; padding: 5px 0 5px 10px; }
ul.stops li::before { content: ""; position: absolute; left: -22px; top: 11px; width: 9px; height: 9px; background: #fff; border: 2px solid var(--c, #1565c0); border-radius: 50%; }
.back { margin-bottom: 8px; }
.train-no { display: inline-block; min-width: 4.2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.train-numbers { margin: 0 0 8px; color: var(--ink); }
.train-numbers small { color: var(--muted); }
.journey { margin: 0 0 8px; }
.journey small { color: var(--muted); }
h2 { font-size: 1.15rem; margin: 4px 0 8px; }
h3 { font-size: 0.78rem; font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 0; }
.tag { font-family: "Source Sans 3", system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: #fff; margin-left: 4px; vertical-align: middle; }
.tag.VB { background: #1565c0; } .tag.VD { background: #ef6c00; }
.note { font-size: 0.78rem; color: var(--muted); margin-top: 16px; }

@media (max-width: 760px) {
  body { height: auto; overflow: auto; }
  .site-header { align-items: stretch; flex-direction: column; gap: 0.35rem; padding-block: 1rem 0.85rem; }
  .app-shell { flex: none; grid-template-columns: 1fr; grid-template-rows: minmax(18rem, 46vh) minmax(19rem, 1fr); }
  .map-panel { grid-row: 1; }
  #panel { grid-row: 2; border-top: 1px solid var(--line); border-right: 0; }
}