/*
 * The station summary the server writes into station-shell.html's #root (design:
 * docs/design/2026-10-station-initial-html.md §3.3). Linked by that shell only.
 *
 * It is a fixed layer over the whole viewport, like the loading shell in app-shell.css: React's
 * first render replaces it with the map and the station panel, and taking a fixed layer away moves
 * nothing else on the page, so the swap adds no layout shift. The card sits where the panel will
 * be (left column on desktop, bottom sheet on a phone) so the eye does not jump either.
 *
 * Colours mirror theme.css, keyed off the data-theme /theme-init.js sets before paint. No inline
 * style anywhere in the summary: the CSP stays at style-src 'self'.
 */
.app-shell--station {
  display: block;
  overflow: auto;
  text-align: left;
  padding: 0;
}
.station-ssr {
  box-sizing: border-box;
  max-width: 420px;
  min-height: 100%;
  margin: 0;
  padding: 22px 24px 28px;
  background: #ffffff;
  color: #102a30;
  /* The system face, not Space Grotesk: a web font arriving while the summary is on screen would
     reflow it — a layout shift on exactly the slow connection this summary is for. */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
:root[data-theme='dark'] .station-ssr {
  background: #10282e;
  color: #e4eff1;
}
.station-ssr a {
  color: #0b4f5c;
}
:root[data-theme='dark'] .station-ssr a {
  color: #7fd3df;
}
.station-ssr__crumbs {
  font-size: 12px;
  opacity: 0.75;
  margin: 0 0 10px;
}
.station-ssr h1 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.station-ssr h2 {
  margin: 18px 0 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.station-ssr__lead,
.station-ssr address {
  margin: 0 0 6px;
  font-style: normal;
}
/* The operator's verified call centre (operator.contact; never the EPDK station phone). The tel:
   link is a thumb-sized target, as in the panel that replaces this summary. */
.station-ssr__contact {
  margin: 4px 0 6px;
}
.station-ssr__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-underline-offset: 3px;
}
.station-ssr__note {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(196, 120, 0, 0.12);
}
.station-ssr__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 12px 0 0;
}
.station-ssr__facts dt {
  font-weight: 600;
}
.station-ssr__facts dd {
  margin: 0;
}
.station-ssr ul {
  margin: 0;
  padding-left: 18px;
}
.station-ssr li {
  margin: 3px 0;
}
.station-ssr .app-shell__hint {
  margin-top: 18px;
}
/* A phone: the card is the bottom sheet's place — full width, from a third of the way down. */
@media (max-width: 720px) {
  .station-ssr {
    max-width: none;
    min-height: 0;
    margin-top: 30vh;
    border-radius: 18px 18px 0 0;
  }
}