/* ─────────────────────────────────────────────────────────────────────────────
   /tog/arkiv — the archive, and its three detail templates.

   The palette, the shell, the tabs and the state primitives come from
   tog/tog.css; this file is only what the archive itself draws: the four loose
   figures, the choropleth, the heatmap, the ranked rows and the journey cards.

   One file for four pages (the hub and the three detail templates) for the same
   reason tog/land/land.css served two: they are one thing seen at two depths,
   and a second stylesheet is where a section starts to drift.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── the head of the page ────────────────────────────────────────────────── */
.ark-hero { padding-top: 4px; }
.ark-hero .tog-h1 { margin-bottom: 0.35em; }

/* Four figures as loose type. No boxes: a box around a number turns a headline
   into a widget, and these ARE the headline. */
.ark-tal {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 0 0 22px;
}
.ark-tal .boks { min-width: 0; }
.ark-tal .n {
  display: block;
  font: 700 clamp(2rem, 4.5vw, 2.6rem)/1 var(--font-lab);
  color: var(--lamp); letter-spacing: 0.01em;
}
.ark-tal .m {
  display: block; margin-top: 2px;
  color: var(--muted); font-size: 0.85rem;
}

.ark-faner { margin: 0 0 16px; flex-wrap: wrap; }
.ark-mal { margin: 0 0 14px; }
.ark-mal button[aria-pressed="true"] { background: var(--lamp); color: var(--bg); }

.ark-h2 { margin: 26px 0 10px; }
.ark-note { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.ark-meir { margin: 14px 0 0; }
.ark-lenkjeknapp {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--rail); font: 600 0.9rem var(--font-ui); padding: 10px 0; min-height: 44px;
}
.ark-lenkjeknapp:hover { text-decoration: underline; }
.ark-lenkjeknapp[hidden] { display: none; }

/* ── 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(--rail); 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; }

/* ── ranked rows ─────────────────────────────────────────────────────────────
   The design draws these as rows with a bar under them rather than as a table:
   on a phone a five-column table is a horizontal scroll, and the only two
   figures that matter per row are the distance and the count. */
.ark-rader { list-style: none; margin: 0; padding: 0; }
.ark-rader li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ark-rader li:last-child { border-bottom: 0; }
.ark-rad-topp {
  display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap;
}
.ark-rad-namn {
  font-family: var(--font-disp); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); text-decoration: none;
}
a.ark-rad-namn:hover { color: var(--lamp); }
.ark-rad-tal { margin-left: auto; font-size: 0.88rem; color: var(--muted); }
.ark-rad-tal b { color: var(--lamp); font-weight: 700; }
.ark-stolpe {
  display: block; height: 6px; margin-top: 8px; border-radius: 999px;
  background: var(--lamp);
}
.ark-stolpe-spor { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--bg); }
.ark-stolpe-spor .ark-stolpe { margin-top: 0; }
/* Transit-only: a country crossed on the way somewhere else. Warm, because it
   is a fact about the trip rather than a derived number. */
.ark-merke {
  font: 600 0.72rem var(--font-ui); color: var(--lamp);
  border: 1px solid rgba(255, 206, 107, 0.45); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap;
}
.ark-rader--rangert li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 12px; }
.ark-rader--rangert .plass { color: var(--muted); font: 600 0.85rem var(--font-lab); }

/* ── the heatmap ─────────────────────────────────────────────────────────────
   One row per year, twelve cells. The running month is HATCHED and links like
   the rest, but is excluded from the scale, the average and every ranking
   (ADR 0021) — a month three days in would otherwise win "quietest ever" every
   single month. */
.heat { overflow-x: auto; padding-bottom: 4px; }
.heat-rad {
  display: grid; grid-template-columns: 3rem repeat(12, minmax(20px, 1fr));
  gap: 4px; align-items: center; margin-bottom: 4px; min-width: 320px;
}
.heat-aar { font: 600 0.8rem var(--font-lab); letter-spacing: 0.08em; color: var(--muted); }
.heat-hovud { text-align: center; font: 600 0.72rem var(--font-lab); color: var(--muted); }
.heat .rute {
  display: block; aspect-ratio: 1; border-radius: 5px;
  background: rgba(255, 206, 107, var(--i, 0));
  border: 1px solid var(--line);
}
.heat a.rute { text-decoration: none; }
.heat a.rute:hover { outline: 2px solid var(--rail); outline-offset: 1px; }
.heat .rute.open {
  background:
    repeating-linear-gradient(135deg, rgba(111, 183, 255, 0.55) 0 4px, transparent 4px 8px),
    var(--bg-2);
  border-color: var(--rail);
}
.ark-skala { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 0.8rem; margin: 10px 0 0; }
.ark-skala i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.ark-skala .hatch {
  background: repeating-linear-gradient(135deg, rgba(111, 183, 255, 0.55) 0 4px, transparent 4px 8px), var(--bg-2);
  border-color: var(--rail);
}

/* ── 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(--lamp); }
.reise-skisse { display: block; width: 100%; height: 150px; background: var(--bg-2); }
.reise-skisse .line { fill: none; stroke: var(--lamp); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.reise-skisse .prikk { fill: var(--lamp); }
.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(--lamp); font-weight: 700; }

/* ── the rail ───────────────────────────────────────────────────────────── */
.ark-fakta { margin: 0; display: grid; gap: 9px; }
.ark-fakta .par { display: flex; align-items: baseline; gap: 10px; }
.ark-fakta dt { color: var(--muted); font-size: 0.88rem; min-width: 0; }
.ark-fakta dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; }
.ark-fakta dd .tal { color: var(--lamp); }
.ark-kjelde p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.6; }

/* ── the three detail pages ──────────────────────────────────────────────── */
.ark-smul { margin: 0 0 4px; }
.ark-smul a { color: var(--rail); text-decoration: none; }
.ark-smul a:hover { text-decoration: underline; }
.ark-lede { color: var(--muted); margin: 0 0 18px; max-width: 62ch; line-height: 1.6; }

.ark-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ark-liste li { background: var(--bg-2); padding: 11px 15px; display: grid; grid-template-columns: 4rem 1fr auto; gap: 10px; align-items: baseline; font-size: 0.88rem; }
.ark-liste .dag { font: 600 0.76rem var(--font-lab); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ark-liste .under { display: block; color: var(--muted); font-size: 0.78rem; }
.ark-liste .km { color: var(--lamp); font: 700 0.95rem var(--font-lab); }

.ark-naboar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ark-naboar a { flex: 1 1 40%; }

/* The month page's photo strip and the journey page's leg timeline both reuse
   the primitives in tog/tog.css; only their own two rules live here. */
.ark-bilete { display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ark-bilete img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 42%; display: block; background: var(--well); }

.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(--lamp); border-color: var(--lamp); }
.ark-etappar .rute { font-weight: 600; }
.ark-etappar .under { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }