/* ─────────────────────────────────────────────────────────────────────────────
   /tog/arkiv — det som er togarkivet sitt eige.

   Forma eit arkiv har — figurane, fanene, dei rangerte radene, varmekartet,
   faktamargen og nedslagssidene — bur i /arkiv.css og er delt med /bok og
   /film. Att her står dei to tinga berre TOG har: koroplet-kartet over land, og
   reisekorta med den verkelege ruta si.

   Lastrekkjefølgje: /seksjon.css → /tog/tog.css → /arkiv.css → DENNE.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── the choropleth ──────────────────────────────────────────────────────────
   Inline SVG rather than a tile map: no third-party request, no promoting the
   vendored map library, and it takes the page's own palette. The geometry is
   the SAME committed file the social card draws from.

   Nothing is only in the map. Every figure on it is in the rows below, which is
   the rule docs/tilgjenge.md sets for the Viaduct embed and the /tuben charts;
   the <title>/<desc> and the summary carry it in words. */
.ark-kartramme {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-2); padding: 10px; margin-bottom: 12px;
}
.ark-kartramme .kart { display: block; width: 100%; height: auto; }
.ark-kartramme .strek { stroke: var(--bg-2); stroke-width: 0.6; }
.ark-kartramme .kontekst { fill: #1b2739; stroke: var(--bg-2); stroke-width: 0.6; }
.ark-kartramme a:focus-visible .strek { stroke: var(--kald); stroke-width: 2; }
.skala { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 2px 0; color: var(--muted); font-size: 0.8rem; }
.skala i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }

/* ── journeys ────────────────────────────────────────────────────────────────
   Each card leads with its own route, drawn from the REAL coordinates of the
   stations it called at (data/tog-land-ruter.json, ADR 0018) — straight lines
   between real places, not a decorative squiggle. A journey whose stations are
   not all in that table simply gets no sketch. */
.reiseliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reisekort {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-card);
}
.reisekort a.heile { display: block; color: inherit; text-decoration: none; }
.reisekort a.heile:hover .reise-namn { color: var(--varm); }
.reise-kropp { padding: 14px 15px 15px; }
.reise-dato {
  margin: 0 0 4px; font: 600 0.72rem var(--font-lab); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.reise-namn {
  margin: 0 0 6px; font-family: var(--font-disp); font-weight: 700; font-size: 1.3rem;
  line-height: 1.15;
}
.reise-kjede { margin: 0 0 8px; color: var(--muted); font-size: 0.86rem; }
.reise-kjede span + span::before { content: ' · '; opacity: 0.6; }
.reise-tal { margin: 0; font-size: 0.86rem; color: var(--muted); }
.reise-tal b { color: var(--varm); font-weight: 700; }

.ark-etappar { list-style: none; margin: 0; padding: 0; }
.ark-etappar li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line); margin-left: 6px; }
.ark-etappar li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ark-etappar .kule { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); }
.ark-etappar li.kjord .kule { background: var(--varm); border-color: var(--varm); }
.ark-etappar .rute { font-weight: 600; }
.ark-etappar .under { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }