@charset "UTF-8";
/* Ventetid. Bygger paa kommune.css og legger bare til det som er nytt.
   @charset staar forst fordi content-verdiene under bruker tegn utenfor
   ASCII, og en CSS-fil uten erklaering arver ikke sidens koding. */

/* ── Nokkeltall ────────────────────────────────────────────────── */
.vt-nokkeltall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}
.vt-tall {
  background: #fff;
  border: 1px solid var(--border, #E4E4E4);
  border-radius: 10px;
  padding: 18px 20px;
  text-align: center;
}
.vt-tall-n { display: block; font-size: 1.9rem; font-weight: 700; color: var(--teal, #086B4F); line-height: 1.1; }
.vt-tall-t { display: block; font-size: .82rem; color: var(--text-muted, #6B7280); margin-top: 6px; }
/* Under 60 % rapportering er ikke en noytral opplysning. */
.vt-tall-varsel .vt-tall-n { color: #B45309; }

/* ── Tabell ────────────────────────────────────────────────────── */
/* Definisjonen av hva tallet i tabellen faktisk er. Den er ikke finskrift:
   staar den mindre enn brodteksten, leses den som forbehold og hoppes
   over, og da er tallet like naken som for. Derfor samme storrelse som
   resten av teksten, rett over tabellen. */
.vt-definisjon {
  font-size: .95rem; color: var(--text-sub, #4B5563);
  margin: 16px 0 4px; max-width: 68ch; line-height: 1.5;
}
.vt-tabellwrap { overflow-x: auto; margin: 18px 0 8px; }
.vt-tabell { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vt-tabell th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted, #6B7280);
  border-bottom: 2px solid var(--border, #E4E4E4); padding: 10px 12px;
}
.vt-tabell td { border-bottom: 1px solid #F0F0F0; padding: 12px; vertical-align: top; }
.vt-tabell .sted strong { display: block; font-weight: 600; }
.sted-sted { display: block; font-size: .82rem; color: var(--text-muted, #6B7280); }
.vt-tabell .uker { white-space: nowrap; font-weight: 600; }
.vt-tabell .antall { white-space: nowrap; text-align: right; color: var(--text-sub, #4B5563); }
.vt-tabell .antall .ar { font-size: .78rem; color: var(--text-muted, #6B7280); }
.vt-tabell .tom { color: #B0B0B0; }

/* Stedene uten oppgitt ventetid skal se annerledes ut, ikke skjules. */
.vt-tabell tr.ikke-oppdatert .uker { font-weight: 500; color: #B45309; }
.vt-tabell tr.ikke-oppdatert .sted strong { font-weight: 500; }

/* ── Klikkbart behandlingssted ──────────────────────────────────── */
.vt-apne {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; background-color: transparent;
  border: 0; border-radius: 0; box-shadow: none; outline: none;
  padding: 0; margin: 0; font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
}
.vt-apne strong { position: relative; padding-right: 20px; }
.vt-apne strong::after {
  content: ''; position: absolute; right: 4px; top: .42em;
  width: 6px; height: 6px;
  border-right: 2px solid var(--text-muted, #6B7280);
  border-bottom: 2px solid var(--text-muted, #6B7280);
  transform: rotate(45deg); transition: transform .15s;
}
.vt-apne.apen strong::after { transform: rotate(-135deg); top: .62em; }
.vt-apne:hover strong { color: var(--teal, #086B4F); }
.vt-apne:focus-visible { outline: 2px solid var(--teal, #086B4F); outline-offset: 3px; }

.vt-detaljrad td { background: var(--bg-subtle, #F7F9F8); padding: 0 !important; }
.vt-detalj { padding: 16px 12px 18px; }
.vt-detalj-rad { display: flex; gap: 12px; padding: 5px 0; font-size: .9rem; flex-wrap: wrap; }
.vt-detalj-merk {
  min-width: 84px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted, #6B7280); padding-top: 2px;
}
.vt-detalj-merk { flex: 0 0 auto; }
.vt-detalj-obs {
  margin: 12px 0 4px; padding: 10px 12px; font-size: .88rem;
  background: #FEF6E7; border-left: 3px solid #B45309; color: #7C4A08;
}
/* Behandlingsstedets egen merknad er sitat, ikke var vurdering. */
.vt-detalj-merknad {
  margin: 12px 0 4px; padding: 10px 12px; font-size: .88rem;
  background: #fff; border-left: 3px solid var(--border, #E4E4E4);
  color: var(--text-sub, #4B5563);
}
/* Lenke til behandlingsstedets egen side, med kildemerking.
 *
 * Storrelsen er ikke et designvalg. FNSPs bruksvilkaar krever at
 * merkingen staar «i samme storrelse som resten av teksten» og er «godt
 * synlig for publikum», i tilknytning til innholdet. Brodteksten her er
 * .9rem (se .vt-detalj-rad), saa kilden skal ogsaa vaere .9rem — ikke
 * .74rem som .vt-detalj-merk, og ikke lys graatekst.
 * Se https://dev.fnsp.no/bruksvilkar */
.vt-detalj-fnsp  { margin: 6px 0 2px; font-size: .9rem; }
.vt-detalj-kilde { margin: 0 0 4px; font-size: .9rem; color: var(--text-sub, #4B5563); }

.vt-detalj-tittel {
  margin: 16px 0 6px; font-size: .95rem; font-weight: 600;
  color: var(--text, #1A1A1A);
}
.vt-detalj-tittel:first-child { margin-top: 0; }
.vt-ukjent { color: #B45309; }
.vt-detalj-knapp { display: inline-block; margin-top: 16px; }

/* ── Sykehusavdelinger ──────────────────────────────────────────
   Egen stripe, ikke et kort i lista: den som er henvist skal ogsaa
   moete opp et sted, og det er et annet sporsmaal enn «hvor er
   ventetiden kortest». Ligger etter beltet saa den ikke stjeler
   oppmerksomhet fra soket. */
.vt-sykehus { background: var(--bg-subtle, #EFF5F1); border-top: 1px solid var(--border-light, #E6ECE8);
  border-bottom: 1px solid var(--border-light, #E6ECE8); padding: 26px 24px; margin: 8px 0 4px; }
.vt-sykehus-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center;
  gap: 22px; flex-wrap: wrap; }
.vt-sykehus h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.2px; }
.vt-sykehus p { font-size: .95rem; color: var(--text-sub, #44514B); margin: 0; max-width: 62ch; line-height: 1.6; }
.vt-sykehus-inner > div { flex: 1 1 340px; }
.vt-sykehus-knapp { background: var(--teal, #086B4F); color: #fff; padding: 11px 22px;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.vt-sykehus-knapp:hover { background: var(--teal-dark, #05503A); }
@media (max-width: 640px) { .vt-sykehus-knapp { width: 100%; text-align: center; } }

/* ── Avstand ────────────────────────────────────────────────────── */
.vt-avstand { margin: 0 0 20px; }
.vt-avstand-merk { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.vt-velg {
  padding: 10px 12px; font-size: .95rem; font-family: inherit; min-width: 260px;
  border: 1px solid var(--border, #E4E4E4); border-radius: 8px; background: #fff;
}
.vt-velg:focus { outline: 2px solid var(--teal, #086B4F); outline-offset: 1px; }
.sted-km { white-space: nowrap; }

/* Bytte sortering er en lenke etter tabellteksten, ikke et valg foran
   den. Knapp av hensyn til tastatur og skjermleser, lenke visuelt. */
.vt-sortbytt { margin: 6px 0 0; font-size: .9rem; }
.vt-lenkeknapp {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--teal, #086B4F); text-decoration: underline;
}
.vt-lenkeknapp:hover { color: var(--teal-dark, #05503A); }
.vt-lenkeknapp:focus-visible { outline: 2px solid var(--teal, #086B4F); outline-offset: 3px; }
.vt-sortbytt-note { display: block; margin-top: 3px; color: var(--text-muted, #6B7280); font-size: .86rem; }

/* ── Trend ──────────────────────────────────────────────────────── */
.vt-trend { display: block; font-size: .78rem; font-weight: 500; margin-top: 3px; }
.vt-trend-ned  { color: #1A7A38; }   /* kortere ventetid */
.vt-trend-opp  { color: #B45309; }   /* lengre ventetid */
.vt-trend-flat { color: var(--text-muted, #6B7280); font-style: italic; }

/* ── Ventetid mot volum ─────────────────────────────────────────── */
.vt-graf-seksjon { margin: 36px 0; }
.vt-grafwrap { margin: 14px 0 6px; }
.vt-graf { width: 100%; height: auto; }
.vt-graf .vt-akse { stroke: var(--text-muted, #6B7280); stroke-width: 1; }
.vt-graf .vt-rute { stroke: var(--border, #E4E4E4); stroke-width: 1; stroke-dasharray: 2 4; }
.vt-graf .vt-aksetekst { font-size: 12px; fill: var(--text-muted, #6B7280); }
.vt-graf .vt-akseittel { font-size: 12px; font-weight: 600; fill: var(--text-sub, #4B5563); }

/* Hvit kontur rundt prikkene skiller dem fra hverandre der de overlapper.
   Uten den smelter en klynge sammen til en formløs flekk. */
.vt-graf .vt-prikk circle {
  fill: var(--teal, #086B4F); fill-opacity: .78;
  stroke: #fff; stroke-width: 1.5;
}
.vt-graf .vt-prikk:hover circle { fill-opacity: 1; stroke: var(--teal-dark, #05503A); }

.vt-graf .vt-prikktall {
  font-size: 10.5px; font-weight: 700; fill: #fff; pointer-events: none;
}

/* Tegnforklaringen er det som gjor prikkene lesbare. Uten den er de
   nummer uten navn, og da er diagrammet pynt. */
.vt-tegnforklaring {
  list-style: none; padding: 0; margin: 14px 0 10px;
  display: grid; gap: 4px 22px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  font-size: .88rem;
}
.vt-tegnforklaring li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px;
  align-items: baseline; padding: 4px 0; border-bottom: 1px solid #F2F2F2;
}
.vt-tegn-nr {
  background: var(--teal, #086B4F); color: #fff; border-radius: 50%;
  width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 700;
}
.vt-tegn-navn { line-height: 1.35; }
.vt-tegn-tall { color: var(--text-muted, #6B7280); font-size: .82rem; white-space: nowrap; }

/* ── Varselskjema ───────────────────────────────────────────────── */
.vt-varselkort { margin-top: 32px; }
.vt-varselform { margin-top: 14px; }
.vt-varselrad { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.vt-varselrad label { min-width: 168px; font-size: .93rem; }
.vt-varselinput { display: flex; gap: 8px; align-items: center; }
.vt-varselinput input, .vt-varselinput select {
  padding: 10px 12px; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--border, #E4E4E4); border-radius: 8px; background: #fff;
}
.vt-varselinput input[type="number"] { width: 88px; }
.vt-varselinput input[type="email"]  { min-width: 240px; }
.vt-varselinput input:focus, .vt-varselinput select:focus {
  outline: 2px solid var(--teal, #086B4F); outline-offset: 1px;
}

/* Knappen staar ved siden av et felt og maa ha samme hoyde og samme
   kantradius som feltet. Den arvede pilleformen med slagskygge horte
   hjemme i en frittstaende CTA, ikke her. */
.vt-varselknapp {
  padding: 10px 20px; font: inherit; font-size: .95rem; font-weight: 600;
  border: 1px solid var(--teal, #086B4F); border-radius: 8px; box-shadow: none;
  background: var(--teal, #086B4F); color: #fff; cursor: pointer; line-height: 1.35;
  white-space: nowrap;
}
.vt-varselknapp:hover:not(:disabled) {
  background: var(--teal-dark, #05503A); border-color: var(--teal-dark, #05503A);
}
.vt-varselknapp:focus-visible { outline: 2px solid var(--teal, #086B4F); outline-offset: 3px; }
.vt-varselknapp:disabled { opacity: .6; cursor: default; }
.vt-varselsvar { margin: 10px 0 0; font-size: .9rem; min-height: 1.2em; }
.vt-varselsvar.ok   { color: #1A7A38; }
.vt-varselsvar.feil { color: #B45309; }

.vt-knapperad { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }

/* ── Resultat og sidestruktur ───────────────────────────────────── */
.vt-resultat { margin: 8px 0 28px; }
.vt-resultat h2 { margin-bottom: 4px; }
.vt-sortlinje { margin: 0 0 10px; font-size: .92rem; color: var(--text-sub, #4B5563); }
.vt-sortlinje .vt-lenkeknapp { margin-left: 8px; }

/* Stedene uten tall er en fotnote til svaret, ikke et eget kapittel med
   egen tabell og overskrift. De ligger sammenslaatt til den som vil se. */
.vt-mangler {
  border: 1px solid var(--border, #E4E4E4); border-radius: 10px;
  padding: 14px 18px; margin: 0 0 28px; background: #fff;
}
.vt-mangler summary { cursor: pointer; font-size: .93rem; }
.vt-mangler summary strong { color: var(--text, #17211C); }
.vt-mangler summary span { display: block; color: var(--text-muted, #6B7280); margin-top: 3px; }
.vt-mangler summary::-webkit-details-marker { color: var(--text-muted, #6B7280); }
.vt-mangler[open] summary { margin-bottom: 8px; }

.vt-veileder { margin-top: 8px; }
.vt-veileder-h3 { font-size: .98rem; margin: 20px 0 6px; }
.vt-kilde {
  font-size: .85rem; color: var(--text-muted, #6B7280);
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border-light, #E6ECE8);
}

/* ── Forbehold ──────────────────────────────────────────────────── */
.vt-forbehold { margin: 12px 0 10px; padding-left: 20px; }
.vt-forbehold li { margin: 10px 0; }

/* ── Steg for aa bytte behandlingssted ──────────────────────────── */
.vt-steg { margin: 10px 0 14px; padding-left: 20px; }
.vt-steg li { margin: 7px 0; }


/* ── Hero med bilde ──────────────────────────────────────────────
   Samme oppsett som forsiden: tekst til venstre, bilde til hoyre.
   Bildet er der for tilliten. En helsetjeneste uten ansikt leser som
   en database, og det er ikke det vi selger.

   Skulle bildefila mangle, fjerner onerror hele spalten. Da faller
   teksten tilbake til full bredde, og ingen ser et knust ikon. */
/* Heroen hadde bilde til hoyre — et stockfoto av en kirurg i
   operasjonsstue. Samme grep som ble tatt paa forsiden 21. august og paa
   barometeret 22.: bildet er kjopt, ett langt trykk avslorer det, og
   bunnteksten maa benekte den kliniske tilknytningen det antyder. Her
   var det i tillegg feil bilde for oppgaven: den som er henvist til MR
   av hodet skal finne et sted aa gaa, ikke se et inngrep.

   Naa ett midtstilt loep, likt barometeret: overskrift, ingress, felt,
   snarveier, tre tall. Ingenting ved siden av. */
.vt-hero { max-width: 720px; margin: 0 auto; text-align: center; }
.vt-hero-tekst { min-width: 0; }
.vt-hero-tekst h1 { max-width: none; }
.vt-hero-tekst .hero-desc { max-width: 56ch; margin: 0 auto; }
.vt-hero .vt-sok-merk, .vt-hero .vt-sok { text-align: left; }
.vt-snarvei { justify-content: center; }

/* Tallene fra beltet, flyttet inn under feltet. Beltet var en egen
   seksjon med hvit bakgrunn og egne kanter, og det gjorde tre tall til
   et kapittel. */
.vt-hero-tall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px;
  margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-light, #EDEFEE);
  list-style: none; }
.vt-hero-tall li { text-align: center; }
.vt-hero-tall a { text-decoration: none; display: block; }
/* Samme tallstil som forsidens hero-tall (26. august 2026). */
.vt-hero-tall .t { display: block; font-family: var(--font-display, 'Schibsted Grotesk', -apple-system, sans-serif);
  font-size: 1.45rem; font-weight: 700; color: var(--teal, #086B4F);
  line-height: 1.15; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.vt-hero-tall .l { display: block; margin-top: 2px; font-size: .83rem; color: var(--text-muted, #6B7280); line-height: 1.35; }
.vt-hero-tall a:hover .t { color: var(--teal-dark, #05503A); }
.vt-hero-maalt { font-size: .78rem; color: var(--text-muted, #6B7280); margin: 10px 0 0; }
@media (max-width: 520px) {
  .vt-hero-tall { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Indeksside ────────────────────────────────────────────────── */
.vt-gruppe { margin: 36px 0; }
.vt-gruppe h3 { margin: 22px 0 8px; font-size: 1.02rem; color: var(--text-sub, #4B5563); }
.vt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.vt-liste li { padding: 9px 0; border-bottom: 1px solid #F2F2F2; }
.vt-liste a { font-weight: 500; }
.vt-liste-meta { display: block; font-size: .8rem; color: var(--text-muted, #6B7280); margin-top: 2px; }

/* ── Soket i heroen ──────────────────────────────────────────────
   Samme kort som .search-form paa forsiden: hvitt, samme runding,
   samme skygge, samme feisthoyde paa feltet. Forskjellen er at her
   soker man i 291 behandlinger mens man skriver, saa det er ingen
   knapp. En knapp som ikke gjor noe er verre enn ingen knapp. */
.vt-sokform {
  background: #fff; border: 1px solid var(--border, #E4E4E4);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 18px 18px; margin: 24px 0 0; max-width: 100%;
}
.vt-sokfelt { display: flex; flex-direction: column; gap: 5px; }
.vt-sok {
  width: 100%; box-sizing: border-box; height: 56px; padding: 0 16px;
  font-size: 1rem; font-family: inherit; color: var(--text, #17211C);
  border: 1.5px solid var(--border, #E4E4E4); border-radius: var(--radius, 10px);
  margin: 0; transition: border-color .15s; outline: none;
}
.vt-sok:focus { border-color: var(--teal, #086B4F); box-shadow: 0 0 0 3px rgba(12,74,62,.16); }
.vt-status { font-size: .88rem; color: var(--text-muted, #6B7280); margin: 10px 0 18px; }

/* Hero-en arver stor luft fra kommune.css. Her er det soket som skal
   vaere over folden, ikke tomrom. */
.kom-hero { padding-top: 24px; padding-bottom: 24px; }
.kom-hero { padding-top: 32px; padding-bottom: 36px; }
.kom-hero .hero-desc { margin-bottom: 0; max-width: 62ch; }
/* Forsiden bruker 2,7rem. Samme storrelse her. */
.vt-hero h1 { font-size: 2.7rem; font-weight: 600; line-height: 1.13; }
main > .content-wrap { padding-top: 22px; }

.vt-sok-merk {
  display: block; font-size: .88rem; font-weight: 700;
  color: var(--text, #17211C); letter-spacing: .1px;
}

/* ── Beltet under heroen ─────────────────────────────────────────
   Speilet fra .proof-band / .proof-inner / .hero-stats paa forsiden.
   Endres den ene, maa den andre folge. */
.vt-belte {
  background: #fff; border-top: 1px solid var(--border-light, #EDEFEE);
  border-bottom: 1px solid var(--border-light, #EDEFEE); padding: 20px 24px;
}
.vt-belte-inner {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center;
}
.vt-belte-tall { min-width: 0; }
.vt-stats { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.vt-stats li { padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--border, #E4E4E4); }
.vt-stats li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.vt-stats b {
  display: block; font-family: var(--font-display); font-size: 1.45rem;
  font-weight: 700; color: var(--teal, #086B4F); line-height: 1.15; letter-spacing: -.4px;
}
.vt-stats span {
  display: block; font-size: .83rem; color: var(--text-muted, #6B7280);
  line-height: 1.35; margin-top: 2px; max-width: 17ch;
}
.vt-stats-maalt { font-size: .78rem; color: var(--text-muted, #6B7280); margin: 8px 0 0; }

/* Hoyre side av beltet. Samme form som .hero-usp paa forsiden, men
   innholdet er en opplysning om datagrunnlaget, ikke et salg: at en
   tredel av ventetidene mangler er det viktigste vi vet om tallene. */
.vt-belte-boks {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px;
  text-align: left; background: var(--teal-light, #E7F3ED);
  border: 1.5px solid var(--teal-mid, #C3E0D2); border-radius: var(--radius-lg, 16px);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.vt-belte-boks:hover { background: #DCEDE4; border-color: var(--teal, #086B4F); transform: translateY(-1px); }
.vt-belte-boks:active { transform: translateY(0); }
.vt-belte-boks:focus-visible { outline: 3px solid var(--teal, #086B4F); outline-offset: 2px; }
.vt-belte-ikon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--teal, #086B4F); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700;
}
.vt-belte-tekst { min-width: 0; }
.vt-belte-hoved { display: block; font-size: 1.02rem; font-weight: 800; color: var(--text, #17211C); line-height: 1.25; }
.vt-belte-sub { display: block; font-size: .85rem; color: var(--text-sub, #4B5563); margin-top: 2px; }
.vt-belte-pil { margin-left: auto; flex-shrink: 0; color: var(--teal, #086B4F); font-size: 1.5rem; line-height: 1; }

@media (max-width: 860px) {
  .vt-belte-inner { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .vt-belte { padding: 18px 20px; }
  .vt-stats li { padding-right: 14px; margin-right: 14px; }
  .vt-stats b { font-size: 1.18rem; }
  .vt-stats span { font-size: .76rem; max-width: 16ch; }
  .vt-sokform { padding: 16px 14px; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.09); }
  .vt-sok { height: 52px; }
}

/* Hjelpeteksten under soekefeltet (12. september 2026). To setninger:
   at du kan soeke paa sted OG behandling, som er det Helsenorge ikke kan,
   og hva tallet faktisk er. Den siste sto foer i en FAQ nederst paa sida,
   altsaa etter at folk hadde lest tallet og bestemt seg for hva det betyr. */
.vt-sokhjelp {
  max-width: 62ch; margin: 14px auto 0; font-size: .88rem; line-height: 1.6;
  color: var(--text-sub, #3E4A44);
}
.vt-hero .vt-sokhjelp { text-align: center; }

/* Ofte sokt: de fem som fanger flest, ett klikk unna. */
.vt-snarvei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 4px; }
.vt-snarvei-merk { font-size: .84rem; color: var(--text-muted, #6B7280); }
.vt-snarvei a {
  font-size: .86rem; text-decoration: none; padding: 5px 12px;
  border: 1px solid var(--border, #E4E4E4); border-radius: 999px;
  color: var(--teal-dark, #05503A); background: #fff;
}
.vt-snarvei a:hover { background: var(--teal-light, #E7F3ED); border-color: var(--teal-mid, #C3E0D2); }

/* Tallene rett under soket. Det tredje er var egen maling, og er en lenke. */
.vt-nokkeltall { margin: 22px 0 30px; }
a.vt-tall { text-decoration: none; color: inherit; }
a.vt-tall:hover .vt-tall-t { text-decoration: underline; }

/* ── Bla gjennom ─────────────────────────────────────────────────
   Lukket som standard. Apen la 291 lenker mellom brukeren og alt
   annet pa siden. */
.vt-bla { margin: 10px 0 36px; }
.vt-bla > h2 { font-size: 1.15rem; margin: 0 0 10px; text-align: center; }

.vt-omrade { border-bottom: 1px solid var(--border-light, #E6ECE8); }
.vt-omrade > summary, .vt-under > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; padding: 14px 0;
}
.vt-omrade > summary::-webkit-details-marker,
.vt-under  > summary::-webkit-details-marker { display: none; }
.vt-omrade > summary::before, .vt-under > summary::before {
  content: '›'; flex: none; width: 14px; font-size: 1.1rem; line-height: 1;
  color: var(--text-muted, #6B7280); transition: transform .12s;
}
.vt-omrade[open] > summary::before, .vt-under[open] > summary::before { transform: rotate(90deg); }
.vt-omrade > summary:hover, .vt-under > summary:hover { color: var(--teal-dark, #05503A); }
.vt-omrade > summary:focus-visible, .vt-under > summary:focus-visible {
  outline: 2px solid var(--teal, #086B4F); outline-offset: 2px; border-radius: 4px;
}
.vt-omrade-navn { flex: 1; font-weight: 700; font-size: 1rem; }
.vt-omrade-tall { flex: none; font-size: .8rem; color: var(--text-muted, #6B7280); font-variant-numeric: tabular-nums; }

.vt-under { margin-left: 14px; border-top: 1px solid var(--border-light, #E6ECE8); }
.vt-under > summary { padding: 11px 0; }
.vt-under-navn { flex: 1; font-weight: 500; font-size: .93rem; color: var(--text-sub, #4B5563); }
.vt-under .vt-liste { padding: 0 0 12px 14px; }

.vt-treff-tall { font-size: .86rem; color: var(--text-muted, #6B7280); margin: 0 0 4px; }
.vt-ingen { font-size: .95rem; color: var(--text-sub, #4B5563); margin: 0 0 24px; }

.vt-kort-lenker { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.vt-kilde { font-size: .82rem; color: var(--text-muted, #6B7280); margin: 14px 0 0; }

/* ── Omradekortene paa forsiden ──────────────────────────────────
   Aapne kort med et utvalg synlig, ikke fire lukkede rader. Et
   sammendragspunkt som bare sier «Behandling» kan ikke velges av den
   som leter etter «coloskopi». */
.vt-bla-intro { color: var(--text-sub, #4B5563); margin: 0 auto 18px; max-width: 56ch; text-align: center; }
.vt-omrade-kort { background: #fff; border: 1px solid var(--border-light, #EDEFEE);
  border-radius: var(--radius-lg, 16px); padding: 20px 22px; margin: 0 0 16px; }
.vt-omrade-kort h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 1.08rem; font-weight: 700; color: var(--text, #17211C); margin: 0 0 12px; }
.vt-omrade-kort h3 .vt-omrade-tall { font-size: .82rem; font-weight: 400; color: var(--text-muted, #6B7280); }
.vt-omrade-topp { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; }
.vt-omrade-topp a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 8px 0; text-decoration: none; color: var(--teal-dark, #05503A);
  font-size: .95rem; font-weight: 600; border-bottom: 1px solid var(--border-light, #EDEFEE); }
.vt-omrade-topp a:hover { color: var(--teal, #086B4F); }
.vt-omrade-topp .v-tall { font-weight: 400; font-size: .8rem; color: var(--text-muted, #6B7280); white-space: nowrap; }
.vt-omrade-kort > .vt-omrade { margin-top: 14px; }
@media (max-width: 620px) {
  .vt-omrade-topp { grid-template-columns: 1fr; }
}