/* ── /tog/kart ────────────────────────────────────────────────────────────────
   Forma som berre denne sida har. Alt som er delt bur i /seksjon.css, og
   paletten i /tog/tog.css — ingen tokens blir erklærte på nytt her, og
   test/contrast.test.js held på det.

   Rampefargane står med vilje IKKJE her, men i app.js: dei blir rekna ut per
   strekk (hsl med lysheita interpolert på tal), så eit hardkoda hex i denne
   fila ville vera ein kopi som ikkje kan halda følgje. TOKEN_SOURCES i
   contrast-testen peikar på app.js av same grunn. */

/* Kartet. Høgda er sida sitt eine store val: dette ER sida, på ein måte
   #map på /tog/no ikkje er — der ligg kartet under eit kort. */
.kartramme {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  padding: 8px;
  overflow: hidden;
}
#kart { height: clamp(360px, 62vh, 640px); border-radius: 10px; }
/* Ei melding i staden for kartet når Leaflet ikkje er der. Ikkje ein tom
   boks: ein boks som seier kvifor han er tom. */
.kart-tekst { margin: 10px 2px 0; color: var(--muted); font-size: 0.86rem; }
.kart-tekst:empty { display: none; }

.kart-under {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 10px 2px 0;
}

/* Legenda. Same forma som skalaen under choropleten på /tog/arkiv, med
   verkelege tal i begge endar — ein rampe utan tal er ei stemning. */
.legende { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--muted); }
.legende .rampe {
  display: block; width: 108px; height: 9px; border-radius: 5px;
}
.legende .ende { font-variant-numeric: tabular-nums; }

.valt {
  margin: 0; margin-left: auto; color: var(--muted); font-size: 0.86rem;
  text-align: right;
}
.valt.har { color: var(--ink); }
.valt .tal { color: var(--varm); font-weight: 600; font-variant-numeric: tabular-nums; }
.valt .kvar { color: var(--ink); }
.valt .km { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Talrada øvst. Fire figurar, same rutenettet som resten av seksjonen. */
.talrad {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) { .talrad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.talrad .kva {
  display: block; margin-top: 2px; color: var(--muted);
  font-family: var(--font-lab); font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase;
}

/* Filterknappane. sek-faner gjev forma; berre notelina under er sida si. */
.filter-note { margin: 10px 0 0; color: var(--muted); font-size: 0.84rem; }

/* Rangeringane. Ei rad er ein knapp: han markerer strekket på kartet, som er
   det som gjer at tabellen og kartet er eitt datasett sett to gonger og ikkje
   to lister som tilfeldigvis liknar. */
.strekkliste { margin: 0; padding: 0; list-style: none; counter-reset: rad; }
.strekkliste > li { border-top: 1px solid var(--line); }
.strekkliste > li:first-child { border-top: 0; }
.strekkrad {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;
  align-items: baseline; width: 100%;
  padding: 9px 4px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.strekkrad:hover, .strekkrad:focus-visible { background: var(--well); }
.strekkrad[aria-pressed="true"] { background: var(--well); }
.strekkrad .gonger {
  font-family: var(--font-disp); font-weight: 600; font-size: 1.05rem;
  color: var(--varm); font-variant-numeric: tabular-nums;
  min-width: 2.6em;
}
.strekkrad .kvar { min-width: 0; overflow-wrap: anywhere; }
.strekkrad .km {
  color: var(--muted); font-size: 0.84rem; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Stolpen under kvar rad er delen av det mest reiste strekket, ikkje av alt:
   spørsmålet rangeringa svarar på er «kva er mest», ikkje «kor stor del av
   nettet». Ein stolpe mot totalen ville vore under éin prosent overalt. */
.strekkrad .stolpe {
  grid-column: 2 / -1; height: 4px; border-radius: 2px;
  background: var(--well); overflow: hidden;
}
.strekkrad .stolpe i { display: block; height: 100%; background: var(--varm); }

/* Fordelinga i sidespalta: kor mange kilometer er reist éin gong, to gonger, … */
.fordeling { margin: 0; padding: 0; list-style: none; }
.fordeling > li {
  display: grid; grid-template-columns: 3.2em 1fr auto; gap: 9px;
  align-items: center; padding: 5px 0; font-size: 0.86rem;
}
.fordeling .gonger { color: var(--ink); font-variant-numeric: tabular-nums; }
.fordeling .stolpe { height: 8px; border-radius: 4px; background: var(--well); overflow: hidden; }
.fordeling .stolpe i { display: block; height: 100%; }
.fordeling .km { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.fordeling-topp { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; }
.fordeling-topp[hidden] { display: none; }

/* Etappane utan geometri. Dei står som ei liste og ikkje som eit tal, av di
   eit tal er lett å lesa forbi og ei liste er lett å sjekka. */
.manglar-lede { margin: 0 0 10px; color: var(--muted); font-size: 0.86rem; }
.manglar { margin: 0; padding: 0; list-style: none; }
.manglar > li {
  padding: 6px 0; border-top: 1px solid var(--line);
  font-size: 0.84rem; overflow-wrap: anywhere;
}
.manglar > li:first-child { border-top: 0; }
.manglar .reise { display: block; color: var(--muted); font-size: 0.78rem; }