/*  06-komponent.css  ·  detaljar som ikkje høyrer til rasteret
    ------------------------------------------------------------ */

/* innledning i opninga */
.innledning {
  font: 400 var(--t-3)/var(--l-3) var(--serif);
  color: var(--demp-pa-natt);
  max-width: 46ch;
  margin: var(--b-5) 0 0;
}
.tavlefot {
  font-size: var(--t-1);
  line-height: var(--l-1);
  color: var(--demp-pa-natt);
  padding: var(--b-3) var(--b-4);
  border-top: 1px solid #2c3a41;
  margin: 0;
}
.tavlefot a { color: var(--aksent-natt); }
.tavle .pri { display: inline-block; margin-left: var(--b-2); }
.tavle .mål a { text-decoration: none; color: inherit; }
.tavle .mål a:hover { color: var(--aksent-natt); }

/* pillete lister */
.pillette, .punktliste { padding-left: 1.1rem; }
.pillette li { margin-bottom: var(--b-3); }
.punktliste li { margin-bottom: var(--b-3); }
.pillette { list-style: none; padding-left: 0; }
.pillette li { border-top: 1px solid var(--streke); padding-top: var(--b-2); }

/* samanlikningstabell */
.samanlikning td, .samanlikning th { white-space: nowrap; }
.tabell tr.sum th, .tabell tr.sum td {
  border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700;
}
.tabell .sum td { background: var(--papir-2); }

/* val-panel */
.valgt {
  border-left: 3px solid var(--aksent);
  background: var(--papir-2);
  padding: var(--b-4) var(--b-5);
  margin-bottom: var(--b-6);
}
.valgt-tittel {
  font: 400 var(--t-4)/var(--l-4) var(--serif);
  margin: var(--b-1) 0 var(--b-2);
}
.val-hint { font-size: var(--t-1); line-height: var(--l-1); color: var(--ink-2); margin-bottom: var(--b-4); }
.talgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--b-3) var(--b-4); margin: 0 0 var(--b-4);
}
.talgrid > div { border-top: 1px solid var(--streke); padding-top: var(--b-1); }
.talgrid dt {
  font: 400 var(--t-0)/var(--l-0) var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.talgrid dd {
  margin: 0; font: 400 var(--t-3)/var(--l-3) var(--mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.talgrid dd.navnelag { font: 400 var(--t-1)/var(--l-2) var(--sans); white-space: normal; }

/* merknader */
.datamat { font-size: var(--t-1); color: var(--ink-2); max-width: 66ch; }
.metodik { font-size: var(--t-1); color: var(--ink-2); max-width: 66ch; }
.dim-merke::before { content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--papir-2); border: 1px solid var(--streke-2); margin-right: 6px; }

/* teiknforklaring */
.legende .prikk { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.legende .linje { width: 18px; height: 0; border-top: 2px solid var(--ink-2); flex: none; }
.legende .linje[data-linje="ferge"] { border-top-style: dashed; }
.legende .linje[data-linje="local"] { border-top-style: dotted; }
.legende .vald { width: 12px; height: 12px; border-radius: 50%;
  background: var(--papir); border: 2px solid var(--aksent); flex: none; }
[data-prikk="elektrisk"] { background: var(--b-elektrisk); }
[data-prikk="hydrogen"] { background: var(--b-hydrogen); }
[data-prikk="lng"] { background: var(--b-lng); }
[data-prikk="hybrid"] { background: var(--b-hybrid); }
[data-prikk="diesel"] { background: var(--b-diesel); }
td [data-prikk], th [data-prikk] { display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* kartdetaljar */
.land { fill: var(--land); }
.hav { fill: var(--hav); }
.kyst { fill: none; stroke: #8ea0a8; stroke-width: 1.3; stroke-linejoin: round; }
.oyar .land { stroke: #8ea0a8; stroke-width: 1; }
.skjer circle { fill: var(--land); stroke: #97a8b0; stroke-width: .9; }
.grense { fill: none; stroke: var(--streke-2); stroke-width: 1.1; stroke-dasharray: 7 4; opacity: .85; }
.havnamn { font-family: var(--serif); font-style: italic; font-size: var(--t-1);
  fill: #7e97a3; letter-spacing: .1em; }
.bygdnamn { font-family: var(--sans); font-size: var(--t-0); letter-spacing: .2em;
  text-transform: uppercase; fill: var(--ink-3); }
.bygdnamn.nabo { fill: #b4bfc4; }
.gratl line { stroke: #cfd9dd; stroke-width: .7; }
.gratl-tekst { font: 400 var(--t-0)/1 var(--mono); fill: var(--ink-3); }
.merknad .skala { stroke: var(--ink-2); stroke-width: 1.2; }
.orn { fill: var(--ink-2); }
.bogar .bue { cursor: pointer; }
.hamner circle { fill: var(--ink); stroke: var(--papir); stroke-width: 1; }
.hamner .hn { font: 400 var(--t-0)/1 var(--sans); fill: var(--ink-2); }
.hamner .hub .hn { font-weight: 700; fill: var(--ink); }
.kart [data-valgt] .havn { opacity: .5; }

/* kart/data-spalte */
.kartdata { min-width: 0; }
.kartdata figure { margin-bottom: var(--b-6); }

/* filter og sortering */
.filtertal, .sort-melding {
  font: 400 var(--t-1)/var(--l-1) var(--mono); color: var(--ink-2); margin: 0;
}
.sort-melding { min-height: var(--l-1); margin: calc(-1 * var(--b-3)) 0 var(--b-4); }
.chip .prikk { border-radius: 2px; }
.chip:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }

/* topplinje: du er her */
.påkostnad { font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.påkostnad b { color: var(--ink); font-weight: 400; }
@media (max-width: 1279px) { .påkostnad { display: none; } }

/* helseboks og styreteksen */
.helseboks, .styretekst { max-width: 68ch; }
.helseboks { border-left: 3px solid var(--aksent); padding-left: var(--b-5); }
.brev ol.fotnot, ol.fotnot {
  list-style: none; counter-reset: fn; padding-left: 0; margin-top: var(--b-6);
  border-top: 1px solid var(--streke); padding-top: var(--b-4);
  max-width: 68ch; font-size: var(--t-1); line-height: var(--l-1); color: var(--ink-2);
}
ol.fotnot li { counter-increment: fn; margin-bottom: var(--b-3); padding-left: 1.6em; position: relative; }
ol.fotnot li::before {
  content: counter(fn); position: absolute; left: 0; top: 2px;
  font: 400 var(--t-0)/1 var(--mono); color: var(--aksent);
}
.tilbake { color: var(--aksent); text-decoration: none; }
.fnlenke { text-decoration: none; }
.fnlenke:hover { text-decoration: underline; }
:target { background: var(--aksent-svak); }
ol.fotnot li:target { background: var(--aksent-svak); scroll-margin-top: var(--fortrinn); }
[id^="r-"], [id^="s-"], [id^="m-"] { scroll-margin-top: calc(var(--fortrinn) + var(--b-6)); }

/* botn */
.botn {
  border-top: 1px solid var(--ink);
  padding-block: var(--b-7) var(--b-8);
  font-size: var(--t-1); color: var(--ink-2);
}
.botn p { max-width: 72ch; }
.sjekliste { font-size: var(--t-0); line-height: var(--l-0); color: var(--ink-3); }

/* val-state på skipstabellen */
#flotetabell tr.valdrad { background: var(--aksent-svak); }

/* utskriftsvarsel */
.noscript {
  background: var(--papir-2); border-top: 1px solid var(--streke);
  padding: var(--b-4) var(--b-6); font-size: var(--t-1); color: var(--ink-2);
}

/* flåtelistene: skilje mellom ruter i same celle */
.ruter a + a::before { content: "· "; color: var(--ink-3); }
.ruter a { white-space: normal; }
@media (min-width: 720px) { .ruter a { white-space: nowrap; } }