/* Shared styles for trasop.no. Map blue marks Trasop today; purple marks the former Vestre Trasop. */

/* Self-hosted fonts, so visitors make no requests to Google. Latin subsets from Fontsource 5.3.0,
   SIL Open Font License 1.1 (licences next to the files). Literata is variable (opsz and wght);
   its weight range stops at 600 so that <b> renders at 600, as with the previous Google Fonts setup. */
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/literata-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");
}

:root {
  --bg: #f3f4f0; --paper: #fbfbf8; --fg: #1d2422; --muted: #5d6763; --line: #c9cec8;
  --trasop: #1f5f8b; --metro: #b0662a; --late: #a3402c; --ok: #2f7a4a;
  /* Map overlays sit on light Kartverket tiles in both themes, so they have no dark variant.
     Purple is rare on the topo map, unlike the browns and oranges of buildings, roads and paths. */
  --map-trasop: #1f5f8b; --map-vestre: #7b2d9b; --map-paper: #f2eee4;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141917; --paper: #1a201e; --fg: #e4e8e4; --muted: #9aa4a0; --line: #36403c;
    --trasop: #6fb2e0; --metro: #e3a066; --late: #e38a76; --ok: #7cc496; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.6; }
a { color: var(--trasop); }
:focus-visible { outline: 2px solid var(--trasop); outline-offset: 2px; }

.site { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
/* width: 100% because main is a flex column, where auto margins would shrink .inner to its content. */
.inner { width: 100%; max-width: 1040px; margin: 0 auto; }

header.top { border-bottom: 1px solid var(--line); background: var(--paper); }
header.top .inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding-block: 14px; }
.logo { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--fg); text-decoration: none; letter-spacing: .01em; }
nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--display); font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a[aria-current="page"], nav a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }

main { padding-block: 28px 56px; display: flex; flex-direction: column; gap: 32px; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 10px; }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.lede { max-width: 62ch; margin: 10px 0 0; }
.prose { max-width: 64ch; }
.prose p { margin: 0 0 14px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--display); font-size: 14px; color: var(--muted); margin-top: 8px; }
.sw { display: inline-block; width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }

/* One column on narrow screens with the short weather panel first, so it is not buried
   under the long list of departures. Side by side, departures come first. */
.cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.cols > section { min-width: 0; }
.cols > .weather { order: -1; }
@media (min-width: 760px) {
  .cols { grid-template-columns: 1fr 1fr; }
  .cols > .weather { order: 0; }
}
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.meta { font-family: var(--display); font-size: 13px; color: var(--muted); }

.stop { padding-block: 10px; border-top: 1px solid var(--line); }
.stop:first-of-type { border-top: 0; padding-top: 0; }
.stop h3 { font-family: var(--display); font-weight: 600; font-size: 16px; margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; }
.stop h3 small { font-weight: 400; color: var(--muted); }
.dep { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.line { font-family: var(--display); font-weight: 600; text-align: center; border-radius: 3px; background: var(--trasop); color: var(--paper); }
.line.metro { background: var(--metro); }
.dep .when { text-align: right; }
.late { color: var(--late); }
.cancelled { text-decoration: line-through; color: var(--muted); }

.wx-now { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.wx-temp { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.wx-hours div { display: flex; flex-direction: column; gap: 2px; }
.wx-hours b { font-family: var(--display); font-weight: 500; color: var(--muted); }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tbl { overflow-x: auto; }

footer { border-top: 1px solid var(--line); }
footer .inner { padding-block: 18px 28px; font-size: 13px; color: var(--muted); }

.leaflet-container { font-family: var(--display); }
@media (prefers-color-scheme: dark) { .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) saturate(.8); } }

.lang { margin-left: auto; font-family: var(--display); font-size: 14px; }
.lang a { color: var(--muted); }

.prose h2 { margin-top: 28px; }
#map { height: min(62vh, 560px); min-height: 340px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
/* Swatches mimic the map: overlay colour on a light tile-like background, in both themes. */
.sw-current { background: color-mix(in srgb, var(--map-trasop) 25%, var(--map-paper)); border: 1.5px solid var(--map-trasop); }
.sw-former { background: color-mix(in srgb, var(--map-vestre) 15%, var(--map-paper)); border: 2px dashed var(--map-vestre); }
.sw-stop { background: var(--paper); border: 2px solid var(--fg); border-radius: 50%; width: 11px; }