@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 ────────────────────────────────────────────────────── */
.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);
}
.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; }

/* ── 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. */
/* Samme hero som forsiden: tekst til venstre, bilde til hoyre, samme
   spaltevekt, samme luft, samme hjornerunding og skygge. Verdiene er
   speilet fra .hero-inner og .hero-media i index.html. Endres den ene,
   maa den andre folge, ellers foler brukeren at han bytter nettsted. */
.vt-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; text-align: left; }
.vt-hero-tekst { min-width: 0; }
.vt-hero-tekst h1 { max-width: 16ch; }
.vt-hero-tekst .hero-desc { max-width: 46ch; margin-bottom: 0; }
.vt-hero-bilde { min-width: 0; position: relative; }
.vt-hero-bilde img {
  width: 100%; height: auto; aspect-ratio: 1/1; max-height: 430px;
  object-fit: cover; object-position: center 22%;
  border-radius: 20px; display: block; box-shadow: var(--shadow-lg);
}
/* Uten bilde skal teksten ikke bli staaende i en halv spalte. */
.vt-hero:not(:has(.vt-hero-bilde)) { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .vt-hero { grid-template-columns: 1fr; gap: 28px; }
  .vt-hero-bilde img { max-height: 280px; aspect-ratio: 16/10; object-position: center 20%; }
}
@media (max-width: 560px) {
  /* Over folden paa en telefon er soket viktigere enn bildet. */
  .vt-hero-bilde { display: none; }
}

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

.vt-sok {
  width: 100%; padding: 13px 16px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--border, #E4E4E4); border-radius: 8px; margin-bottom: 14px;
}
.vt-sok:focus { outline: 2px solid var(--teal, #086B4F); outline-offset: 1px; border-color: transparent; }
.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:has(.vt-hero-bilde) { padding-top: 40px; padding-bottom: 44px; }
.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-seksjon { margin: 0 0 8px; }
.vt-sok-merk {
  display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 8px;
}

/* Ofte sokt: de fem som fanger flest, ett klikk unna. */
.vt-snarvei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 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: 30px 0 36px; }
.vt-bla > h2 { font-size: 1.15rem; margin-bottom: 12px; }

.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; }