/*  03-oppsett.css  ·  raster, navigasjon, komponentar
    -------------------------------------------------- */

/* ---------- raster ---------- */
.skal {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--b-6);
}
@media (max-width: 1099px) { .skal { padding-inline: var(--b-5); } }
@media (max-width: 639px)  { .skal { padding-inline: var(--b-4); } }

.rute12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--spalte); }
.k-3  { grid-column: span 3; }  .k-4 { grid-column: span 4; }
.k-5  { grid-column: span 5; }  .k-6 { grid-column: span 6; }
.k-7  { grid-column: span 7; }  .k-8 { grid-column: span 8; }
.k-9  { grid-column: span 9; }  .k-12 { grid-column: span 12; }
@media (max-width: 1099px) {
  .k-3, .k-4, .k-5, .k-6, .k-7, .k-8, .k-9 { grid-column: 1 / -1; }
}

.kapittel { padding-block: var(--b-9) var(--b-8); border-top: 1px solid var(--streke); }
.kapittel:first-of-type { border-top: 0; }
@media (max-width: 1099px) { .kapittel { padding-block: var(--b-7) var(--b-6); } }

.kapittelhovud {
  display: flex; align-items: baseline; gap: var(--b-4);
  margin-bottom: var(--b-6);
}
.nummer {
  font: 400 var(--t-1)/var(--l-1) var(--mono);
  color: var(--aksent);
  letter-spacing: 0.04em;
  flex: none;
}
.kapittelhovud h2 { text-wrap: balance; }
.kapittelinnledning {
  font: 400 var(--t-3)/var(--l-3) var(--serif);
  color: var(--ink-2);
  max-width: 44rem;
  margin: 0 0 var(--b-6);
}

/* ---------- fast navigasjon ---------- */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: var(--papir);
  border-bottom: 1px solid var(--streke);
}
.toppinnside {
  display: flex; align-items: center; gap: var(--b-4);
  min-height: var(--topp);
  position: relative;
}
.merke {
  font: 700 var(--t-1)/var(--l-1) var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.merke span { color: var(--ink-3); font-weight: 400; }

.meny { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.meny > summary {
  list-style: none;
  cursor: pointer;
  font: 400 var(--t-1)/var(--l-1) var(--sans);
  color: var(--ink);
  border: 1px solid var(--streke);
  padding: var(--b-2) var(--b-3);
  white-space: nowrap;
}
.meny > summary::-webkit-details-marker { display: none; }
.meny > summary::after { content: " \25BE"; color: var(--ink-2); }
.meny[open] > summary { background: var(--papir-2); }
.meny > summary:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }

.kapittelliste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--b-1) var(--b-4);
}
.kapittelliste a {
  display: inline-flex; align-items: baseline; gap: var(--b-2);
  padding: var(--b-1) 0 var(--b-1) var(--b-1);
  font: 400 var(--t-1)/var(--l-1) var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.kapittelliste i {
  font: 400 var(--t-0)/1 var(--mono);
  font-style: normal;
  color: var(--ink-3);
}
.kapittelliste a:hover { color: var(--ink); border-bottom-color: var(--streke-2); }
.kapittelliste a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--aksent); font-weight: 700; }
.kapittelliste a[aria-current="true"] i { color: var(--aksent); }

.framgang {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--papir-3);
  pointer-events: none;
}
.framgang span {
  display: block; height: 100%; width: 0;
  background: var(--aksent);
  transition: width var(--g) linear;
}
.prosent {
  font: 400 var(--t-0)/var(--l-0) var(--mono);
  color: var(--ink-2);
  flex: none;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) {
  .topp .merke span { display: none; }
  .merke { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1099px) {
  .meny { position: relative; }
  .meny > ul {
    display: none;
    position: absolute; right: 0; top: calc(100% + var(--b-2));
    flex-direction: column; gap: 0;
    background: var(--papir);
    border: 1px solid var(--streke);
    padding: var(--b-2) var(--b-4);
    min-width: 12rem;
    box-shadow: 0 var(--b-3) var(--b-5) rgba(18, 25, 29, .10);
  }
  .meny[open] > ul { display: flex; }
  .meny > ul a { display: block; padding: var(--b-2) 0; border-bottom: 1px solid var(--papir-3); width: 100%; }
  .meny > ul li:last-child a { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .meny > summary { display: none; }
  .meny > ul { display: flex; }
}

/* ---------- 01 avgang ---------- */
.avgang { background: var(--natt); color: var(--lys-pa-natt); }
.avgang .kapittel { border-top: 0; }
.avgang .skal { padding-block: var(--b-8) var(--b-9); }
@media (max-width: 1099px) { .avgang .skal { padding-block: var(--b-6) var(--b-7); } }
.mast { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--b-7); align-items: end; }
@media (max-width: 1099px) { .mast { grid-template-columns: 1fr; gap: var(--b-6); } }
.avgang h1 { color: var(--lys-pa-natt); font-size: var(--t-6); line-height: var(--l-6); }
@media (max-width: 639px) { .avgang h1 { font-size: var(--t-5); line-height: var(--l-5); } }
.avgang .mikro { color: var(--demp-pa-natt); }
.underlinje { color: var(--aksent-natt); }
.metakjede {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--b-5);
  margin: var(--b-5) 0 0; padding: var(--b-4) 0 0; border-top: 1px solid #2c3a41;
  font: 400 var(--t-1)/var(--l-1) var(--sans); color: var(--demp-pa-natt);
}
.metakjede b { color: var(--lys-pa-natt); font: 400 var(--t-1)/var(--l-1) var(--mono); }

/* tavle */
.tavle { border: 1px solid #2c3a41; overflow-x: auto; }
@media (max-width: 479px) {
  .tavle table { min-width: 26rem; }
  .tavle th, .tavle td { padding-inline: var(--b-3); }
}
.tavle caption {
  caption-side: top; text-align: left; padding: var(--b-3) var(--b-4);
  border-bottom: 1px solid #2c3a41;
  font: 400 var(--t-0)/var(--l-0) var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--demp-pa-natt);
}
.tavle table { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
.tavle th, .tavle td { text-align: left; padding: var(--b-2) var(--b-4); border-bottom: 1px solid #222f35; }
.tavle thead th {
  font: 400 var(--t-0)/var(--l-0) var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--demp-pa-natt); border-bottom: 1px solid #35454c;
}
.tavle td.kl { font: 400 var(--t-2)/var(--l-2) var(--mono); color: var(--lys-pa-natt); white-space: nowrap; }
.tavle td.mål { font-family: var(--serif); font-size: var(--t-2); }
.tavle tbody tr:last-child td { border-bottom: 0; }
.tavle tbody tr:hover { background: #1b262b; }
.tavle .pri { color: var(--aksent-natt); font: 400 var(--t-0)/var(--l-0) var(--mono); }

/* sjølinje / sesongkurve */
.sjølina { margin-top: var(--b-7); }
.sjølina svg { display: block; width: 100%; height: auto; }

/* ---------- 02 nøkkeltal ---------- */
.dominant {
  display: flex; align-items: baseline; gap: var(--b-4); flex-wrap: wrap;
  border-bottom: 3px solid var(--ink); padding-bottom: var(--b-3);
  margin-bottom: var(--b-6);
}
.dominant .tall {
  font: 400 var(--t-9)/0.9 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}
@media (max-width: 1099px) { .dominant .tall { font-size: var(--t-8); } }
@media (max-width: 639px)  { .dominant .tall { font-size: var(--t-7); } }
.dominant .eining { font: 400 var(--t-3)/var(--l-3) var(--serif); color: var(--ink-2); max-width: 22ch; }
.fanekolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b-6); margin: 0; }
@media (max-width: 1099px) { .fanekolar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .fanekolar { grid-template-columns: 1fr; gap: var(--b-5); } }
.fanekolar > div { border-top: 1px solid var(--streke); padding-top: var(--b-3); }
.fanekolar dt { font: 400 var(--t-0)/var(--l-0) var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fanekolar dd {
  margin: var(--b-2) 0 0; font: 400 var(--t-4)/var(--l-4) var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.fanekolar dd small { display: block; font: 400 var(--t-1)/var(--l-1) var(--sans); color: var(--ink-2); letter-spacing: 0; }
.stig { color: var(--aksent); font-family: var(--sans); font-size: var(--t-1); }

/* ---------- 03 rutekar ---------- */
.kartoppstilling {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: var(--b-7); align-items: start;
}
@media (max-width: 1199px) { .kartoppstilling { grid-template-columns: 1fr; } }
.kartboks { position: sticky; top: calc(var(--fortrinn) + var(--b-4)); }
@media (max-width: 1199px) { .kartboks { position: static; } }
.kart { display: block; width: 100%; height: auto; }
.legende {
  display: flex; flex-wrap: wrap; gap: var(--b-1) var(--b-4);
  margin: var(--b-4) 0 0; padding: var(--b-3) 0 0; border-top: 1px solid var(--streke);
  list-style: none; font: 400 var(--t-1)/var(--l-1) var(--sans); color: var(--ink-2);
}
.legende li { display: flex; align-items: center; gap: var(--b-2); }
.legende .prikk { width: 14px; height: 3px; background: var(--streke-2); flex: none; }

/* kart-språk */
.hav { fill: var(--hav); }
.land { fill: var(--land); }
.kyst { fill: none; stroke: var(--streke-2); stroke-width: 1; }
.gratl { stroke: #cfd9dd; stroke-width: .6; fill: none; }
.gratl-tekst { font: 400 var(--t-0)/1 var(--mono); fill: var(--ink-3); }
.orn { fill: var(--ink-3); }
.sti { fill: none; stroke: var(--ink-2); stroke-width: 1.4; opacity: .62; transition: opacity var(--g) var(--kurve), stroke-width var(--g) var(--kurve), stroke var(--g) var(--kurve); }
.sti.modus-ferge { stroke-dasharray: 5 3; }
.sti.modus-local { stroke-dasharray: 1.5 3; }
.sti.f-elektrisk { stroke: var(--b-elektrisk); }
.sti.f-hydrogen  { stroke: var(--b-hydrogen); }
.sti.f-lng       { stroke: var(--b-lng); }
.sti.f-hybrid    { stroke: var(--b-hybrid); }
.sti.f-diesel    { stroke: var(--b-diesel); }
.bue:hover .sti, .bue:focus .sti { opacity: 1; stroke-width: 2.6; }
.bue:focus { outline: none; }
.bue:focus-visible .sti { stroke: var(--aksent); opacity: 1; stroke-width: 3; }
.havn circle { fill: var(--ink); }
.havn .hn { font: 400 var(--t-0)/1 var(--sans); fill: var(--ink-2); }
.kart[data-valgt] .sti { opacity: .18; }
.kart .bue.vald .sti, .bue.vald .sti { opacity: 1; stroke-width: 3.2; stroke: var(--aksent); }
.bue.vald .havn circle { fill: var(--aksent); }

/* ---------- tabellar ---------- */
.tabell { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
.tabell caption { caption-side: top; text-align: left; color: var(--ink-2); font-size: var(--t-1); padding-bottom: var(--b-3); }
.tabell th, .tabell td {
  text-align: left; padding: var(--b-2) var(--b-3);
  border-bottom: 1px solid var(--streke); vertical-align: top;
}
.tabell thead th {
  position: sticky; top: calc(var(--topp) - 1px); z-index: 5;
  background: var(--papir);
  font: 400 var(--t-0)/var(--l-0) var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.tabell tbody th[scope="row"] { font-weight: 500; }
.tabell .merke { display: block; font: 400 var(--t-0)/var(--l-0) var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.tabell tbody tr:hover { background: var(--papir-2); }
.tabell tr[id] { scroll-margin-top: calc(var(--fortrinn) + var(--b-6)); }
.tabell .ruter { font-size: var(--t-1); color: var(--ink-2); }
.tabell .sep { color: var(--streke-2); padding: 0 var(--b-1); }
.tabell a { text-decoration: none; border-bottom: 1px solid var(--streke); color: var(--ink); }
.tabell a:hover { color: var(--aksent); border-bottom-color: currentColor; }
.dim { opacity: .38; }
.valdrad { background: var(--aksent-svak) !important; }
.valdrad th[scope="row"], .valdrad td { border-bottom-color: #e0c3a8; }
.no-treff { display: none; }

@media (max-width: 719px) {
  .stabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stabell, .stabell tbody, .stabell tr, .stabell th, .stabell td { display: block; width: auto; }
  .stabell tr {
    border: 1px solid var(--streke); border-left: 3px solid var(--streke-2);
    padding: var(--b-3); margin-bottom: var(--b-4); background: var(--papir);
  }
  .stabell tr.valdrad { border-left-color: var(--aksent); }
  .stabell th, .stabell td { border-bottom: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: var(--b-4); }
  .stabell td::before { content: attr(data-label); font: 400 var(--t-0)/var(--l-1) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); flex: none; }
  .stabell tbody th[scope="row"] { display: block; font-size: var(--t-2); margin-bottom: var(--b-2); }
  .stabell .merke { display: inline; margin-left: var(--b-2); }
  .tabell:not(.stabell) thead { position: static; }
}

/* ---------- 04 flåte ---------- */
.filter { display: flex; flex-wrap: wrap; gap: var(--b-3) var(--b-5); align-items: center; margin-bottom: var(--b-5); }
.filter fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--b-2); }
.filter legend { padding: 0 0 var(--b-2); font: 400 var(--t-0)/var(--l-0) var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: var(--b-2); border: 1px solid var(--streke); padding: var(--b-1) var(--b-3); font-size: var(--t-1); cursor: pointer; }
.chip:has(input:checked) { background: var(--ink); color: var(--papir); border-color: var(--ink); }
.chip input { accent-color: var(--aksent); margin: 0; }
.chip .prikk { width: 10px; height: 10px; border-radius: 50%; }
.knapp {
  font: 400 var(--t-1)/var(--l-1) var(--sans);
  background: none; border: 1px solid var(--streke); color: var(--ink);
  padding: var(--b-1) var(--b-3); cursor: pointer;
}
.knapp:hover { border-color: var(--ink); }
.sorter { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.sorter::after { content: " \2195"; color: var(--ink-3); }
th[aria-sort="ascending"] .sorter::after { content: " \2191"; color: var(--aksent); }
th[aria-sort="descending"] .sorter::after { content: " \2193"; color: var(--aksent); }

.profil { display: block; width: 100%; height: auto; }
.profil .skrog { fill: var(--papir-2); stroke: var(--ink); stroke-width: 1.4; }
.profil .dekk { fill: var(--ink-2); }
.profil .hus { fill: var(--ink); }
.profil .vasslinje { stroke: var(--streke-2); stroke-width: 1; stroke-dasharray: 6 4; }
.profil .merke { fill: var(--aksent); }
.profil .mas { stroke: var(--ink); stroke-width: 1.4; }
.profil .rute { stroke: var(--streke-2); stroke-width: 1; }
.profil text { font: 400 var(--t-0)/1 var(--sans); fill: var(--ink-2); }
.profil text.navn { fill: var(--ink); font-size: var(--t-1); }
.profil .skala { stroke: var(--ink); stroke-width: 1.4; }

/* ---------- 05 økonomi ---------- */
.graf { display: block; width: 100%; height: auto; overflow: visible; }
.graf .akse { stroke: var(--streke-2); stroke-width: 1; }
.graf .rutenett { stroke: var(--papir-3); stroke-width: 1; }
.graf .null { stroke: var(--ink); stroke-width: 1.4; }
.graf text { font: 400 var(--t-0)/1 var(--mono); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.graf text.verdi { font: 400 var(--t-1)/1 var(--sans); fill: var(--ink); }
.graf .sule { fill: var(--ink-2); }
.graf .sule.a { fill: var(--ink); }
.graf .sule.k { fill: var(--aksent); }
.graf .opp { fill: #2f7580; }
.graf .ned { fill: var(--aksent); }
.graf .band { fill: var(--b-elektrisk); opacity: .16; }
.graf .linje { fill: none; stroke: var(--ink); stroke-width: 2; }
.graf .referanse { stroke: var(--aksent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.graf .merke-prikk { fill: var(--aksent); }
.graf .verdi [data-verdi] { fill: var(--ink-3); }
.flere { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--b-6); }
.flere figure { margin: 0 0 var(--b-2); }
.flere figcaption { font-size: var(--t-1); color: var(--ink-2); }
.flere .tittel { font: 700 var(--t-1)/var(--l-1) var(--sans); color: var(--ink); }

/* ---------- 06 miljø ---------- */
.metodik { border-top: 1px solid var(--ink); padding-top: var(--b-4); margin-top: var(--b-6); }
.fotnote { font-size: var(--t-1); color: var(--ink-2); max-width: 62ch; }
.fotnote li { margin-bottom: var(--b-3); }
.fnlenke { text-decoration: none; font: 400 var(--t-0)/1 var(--mono); color: var(--aksent); }
.tilbake { font: 400 var(--t-0)/1 var(--mono); }

/* ---------- 07 melding ---------- */
.brev { max-width: var(--leserbredde); font: 400 var(--t-3)/var(--l-3) var(--serif); }
.brev p { margin-bottom: var(--b-5); }
.brev p:first-of-type::first-letter {
  float: left; font-size: 79px; line-height: 64px; padding: 0 var(--b-3) 0 0;
  color: var(--aksent); font-family: var(--serif);
}
.brev .signatur { margin-top: var(--b-6); font-style: italic; }
.brev .stellager { font: 400 var(--t-1)/var(--l-2) var(--sans); color: var(--ink-2); margin-top: var(--b-2); }
.brev aside {
  font: 400 var(--t-1)/var(--l-1) var(--sans); color: var(--ink-2);
  border-left: 2px solid var(--streke-2); padding-left: var(--b-4); margin: 0 0 var(--b-5);
}
@media (max-width: 639px) { .brev { font-size: var(--t-2); line-height: var(--l-2); } .brev p:first-of-type::first-letter { font-size: 61px; line-height: 52px; } }

/* ---------- 08 styre ---------- */
.mappe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--b-6) var(--b-7); margin: 0; }
.mappe > div { border-top: 1px solid var(--ink); padding-top: var(--b-3); }
.mappe dt { font: 400 var(--t-0)/var(--l-1) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mappe dd { margin: 0 0 var(--b-2); font-size: var(--t-1); }
.mappe .navn { font: 400 var(--t-4)/var(--l-4) var(--serif); margin-bottom: var(--b-1); }
.mappe .navn + dd { font-size: var(--t-2); }
.korps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--b-5); }

/* ---------- 09 metode ---------- */
.kolofon { font-size: var(--t-1); color: var(--ink-2); }
.kolofon dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--b-1) var(--b-5); margin: 0; }
.kolofon dt { font-weight: 700; color: var(--ink); }
.kolofon dd { margin: 0; }

fotnot, .fotnotlisten { scroll-margin-top: var(--fortrinn); }

/* ---------- bevegelse ---------- */
html { scroll-behavior: smooth; }
/* kapittla visast frå start: inga entrance-animasjon, berre styrte overgangar */
@media (prefers-reduced-motion: reduce) {
  :root { --g: 0ms; --g-sakte: 0ms; --kurve: linear; }
  html { scroll-behavior: auto; }
  .framgang span, .sti { transition: none; }
}

/* horisontell rulling for breie tabellar, utan sidestolping på sida */
.rulle { overflow-x: auto; }
.rulle > .tabell { min-width: 21rem; }
.mast > div { min-width: 0; }
.tavle { min-width: 0; }