/*  05-grafik.css  ·  figurtekst, axlar, suler, brød, linjer
    Alle figurar har sin eigen datatabell. Fargar er definerte her,
    ikkje i SVG-attributt, slik at variablane kan bytte seg i print.
    ---------------------------------------------------------- */

.graf { display: block; width: 100%; height: auto; overflow: visible; }
.graf text {
  font-family: var(--sans);
  font-size: var(--t-0);
  fill: var(--ink-2);
}
.graf-tick { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.graf-verdi { font-family: var(--mono); font-size: var(--t-1); fill: var(--ink); font-variant-numeric: tabular-nums; }
.graf-eining { font-family: var(--sans); font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.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.2; }
.graf-samanband { stroke: var(--streke-2); stroke-width: 1; stroke-dasharray: 3 3; }

.sule { fill: var(--ink-3); }
.sule-vald { fill: var(--aksent); }
.sule-billett { fill: var(--ink); }
.sule-tilskudd { fill: var(--ink-3); }
.sule-annen { fill: var(--streke-2); }

.bru { stroke: var(--ink); stroke-width: .8; }
.bru-stolpe { fill: var(--ink); }
.bru-opp { fill: var(--aksent); }
.bru-ned { fill: var(--papir); stroke: var(--aksent); stroke-dasharray: 3 2; }

.band { fill: var(--b-lng); opacity: .16; }
.linje { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.linje-punkt { fill: var(--papir); stroke: var(--ink); stroke-width: 2; }
.referanse { stroke: var(--aksent); stroke-width: 1.6; stroke-dasharray: 5 4; }

.brenselbåge rect { stroke: none; }
.brenselbåge.vald rect { stroke: var(--aksent); stroke-width: 2.4; }

/* sjoline i opningsfeltet (mørk bakgrunn) */
.sjolinje-flater { fill: #24333a; }
.sjolinje-kurve { fill: none; stroke: var(--aksent-natt); stroke-width: 2.2; stroke-linejoin: round; }
.sjolinje-punkt { fill: var(--aksent-natt); }
.sjolinje-maned { font-family: var(--sans); font-size: var(--t-0); fill: var(--demp-pa-natt); letter-spacing: .1em; }
.sjolinje-verdi { font-family: var(--mono); font-size: var(--t-1); fill: var(--lys-pa-natt); }

/* småbileter */
.bitt { margin: 0; }
.bitt .graf { height: auto; }
.bitt-tittel {
  font: 700 var(--t-1)/var(--l-1) var(--sans);
  display: flex; justify-content: space-between; gap: var(--b-3);
  border-bottom: 1px solid var(--streke); padding-bottom: var(--b-1); margin-bottom: var(--b-2);
}
.bitt-tittel span { font-weight: 400; color: var(--ink-2); font-family: var(--mono); }
.sm-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--b-5) var(--b-6);
}
.sm-forklaring { font-size: var(--t-1); color: var(--ink-2); max-width: 62ch; }

/* tabellar oppi oppslag */
details.datatabell { margin: var(--b-3) 0 var(--b-5); }
details.datatabell > summary {
  cursor: pointer;
  font: 400 var(--t-1)/var(--l-1) var(--sans);
  color: var(--ink-2);
  list-style: none;
  padding-left: 1.1em;
  position: relative;
}
details.datatabell > summary::-webkit-details-marker { display: none; }
details.datatabell > summary::before {
  content: "+"; position: absolute; left: 0; color: var(--aksent); font-family: var(--mono);
}
details.datatabell[open] > summary::before { content: "\2212"; }
details.datatabell > summary:hover { color: var(--ink); }
details.datatabell[open] { padding-bottom: var(--b-4); }
details.datatabell[open] > summary { margin-bottom: var(--b-3); }

/* skipstegningar: felles målestokk */
.profilboks { border-top: 1px solid var(--ink); padding-top: var(--b-4); }
.profil { display: block; width: 100%; height: auto; }
.profil .skrog { fill: var(--papir-2); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.profil .overbygg { fill: var(--ink-2); }
.profil .hus { fill: var(--ink); }
.profil .vasslinje { stroke: var(--streke-2); stroke-width: 1; }
.profil .rutenett { stroke: var(--papir-3); stroke-width: 1; }
.profil .mas { stroke: var(--ink); stroke-width: 1.6; }
.profil .merke { fill: var(--aksent); }
.profil .prikk { fill: var(--ink-3); }
.profil text { font-family: var(--sans); font-size: var(--t-0); fill: var(--ink-2); }
.profil .navn { font-size: var(--t-1); fill: var(--ink); }
.profil .skala { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.profil .skalahjorn { stroke: var(--ink); stroke-width: 1.4; }

/* tavle */
.havnbillette { transition: background var(--g) var(--kurve); }
.havnbillette.vald { background: #24333a; }
.havnbillette.vald td.mål { color: var(--aksent-natt); }

/* utsegningslenkjer */
.datamat { font-size: var(--t-1); color: var(--ink-2); }

/* småfigurar: månadsbokstavar */
.sm-maned { font: 400 9px var(--frakt); fill: var(--ink-3); letter-spacing: .04em; }