/* oppsettet til designmanualen. her står ingen farger og ingen skriftnavn.
   alt slikt kommer fra tokens.css, som build.mjs lager fra tokens.json.
   alle mål på sidene er i tegningens px ganget med --px, eller avledet av marg og mellomrom.
   iosevka brukes bare der manualen sier det: nummer, koder, tall og fotnoter. */

*, *::before, *::after { box-sizing: border-box; }

html {
  --meny-h: 2.75rem;
  --luft: 0.75rem;
  --strek: max(1px, var(--px));
  background: var(--linje);
  color: var(--tekst);
  font-family: var(--skrift-tekst);
  font-weight: var(--vekt-tekst-1);
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: var(--vekt-tekst-3); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--aksent);
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.2em;
}
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; }

.ast { color: var(--aksent); }

.lesemelding {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* menyen */

.meny {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 2.5rem;
  height: var(--meny-h);
  padding: 0 1.5rem;
  background: var(--grunn);
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}
.meny a { text-decoration-line: none; }
.meny-dokument { color: var(--dempet); margin-left: 0.4ch; }
.meny-liste { display: flex; gap: 1.75rem; margin-left: auto; color: var(--dempet); }
.meny-liste a:hover, .meny-liste a[aria-current="true"] { color: var(--tekst); text-decoration-line: underline; }
.meny-knapp { display: none; }

/* arkene. hvert ark er en side i 16:9 som skaleres med containeren */

main {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--luft);
  padding: var(--luft) 0 calc(var(--luft) * 2);
}

.ark {
  container-type: inline-size;
  width: min(100% - var(--luft) * 2, (100svh - var(--meny-h) - var(--luft) * 2) * var(--side-bredde) / var(--side-hoyde));
  aspect-ratio: var(--side-bredde) / var(--side-hoyde);
  overflow: hidden;
  background: var(--grunn);
  color: var(--tekst);
  scroll-margin-top: calc(var(--meny-h) + var(--luft));
}

.side {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--kolonner), minmax(0, 1fr));
  grid-template-rows: calc(var(--marg) * 1.5) minmax(0, 1fr) var(--marg);
  column-gap: var(--mellomrom);
  padding: 0 var(--marg);
  font-size: var(--t-brod);
  line-height: 1.45;
}

.flate {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: subgrid;
  align-items: start;
  min-height: 0;
}
.venstre { grid-column: 1 / 4; }
.hoyre { grid-column: 5 / -1; min-height: 0; }

.fotnote {
  grid-column: 5 / -1; grid-row: 3;
  align-self: end;
  padding-bottom: calc(var(--mellomrom) * 1.5);
  font-family: var(--skrift-mono);
  font-size: var(--t-liten);
  line-height: 1.3;
  color: var(--dempet);
}

/* sidetallet vises bare på utskrift, siden menyen gjør jobben på skjerm */

.sidetall { display: none; }

/* venstre kolonne */

.undernummer {
  font-family: var(--skrift-mono);
  font-size: var(--t-liten);
  line-height: 1.2;
  color: var(--aksent);
}
.status-merke { font-family: var(--skrift-tekst); color: var(--dempet); margin-left: 1ch; }
.tittel {
  margin-top: calc(var(--mellomrom) * 0.75);
  font-size: var(--t-mellom);
  font-weight: var(--vekt-tekst-2);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.kort {
  margin-top: var(--mellomrom);
  font-size: var(--t-brod);
  line-height: 1.45;
  color: var(--dempet);
  text-wrap: pretty;
}

/* kommer */

.kommer { color: var(--dempet); font-size: var(--t-brod); line-height: 1.45; }
.kommer-merke { margin-right: 0.6ch; }

/* tekst til høyre, i sju kolonner så linjene ikke blir for lange */

.visning-oppslag { grid-column: 5 / 12; }
.visning-tekst > :not(.figurer) { max-width: calc((100% - 7 * var(--mellomrom)) / 8 * 7 + 6 * var(--mellomrom)); }
.visning-tekst > p, .visning-tekst > ol, .visning-tekst > ul:not(.ledeliste) {
  font-size: var(--t-ingress);
  line-height: 1.38;
  letter-spacing: -0.004em;
  text-wrap: pretty;
}
.visning-tekst > * + * { margin-top: 0.9em; }
.visning-tekst > ul:not(.ledeliste) > li + li { margin-top: 0.4em; }

/* liste med navnet til venstre */

.ledeliste {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--mellomrom);
  row-gap: calc(var(--mellomrom) * 1.5);
}
.ledeliste li { display: contents; }
.lede { grid-column: 1 / 3; font-weight: var(--vekt-tekst-2); }
.lede + span { grid-column: 3 / -1; text-wrap: pretty; }

/* plassering: midt i innholdet stiller figurene midt i feltet til høyre, både på langs og på tvers */

.hoyre.midtstilt {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--mellomrom) * 3);
}
.hoyre.midtstilt > .figurer + .figurer { margin-top: 0; }
.hoyre.midtstilt:has(> .figurer + .figurer) > .figurer { --maks-h: calc(var(--marg) * 3); }

/* figurer og tomme rammer. figurene i en rad deler høyden, og raden blir aldri høyere enn --maks-h */

.figurer {
  --maks-h: calc(var(--marg) * 6);
  --figurluft: calc(var(--mellomrom) * 2);
  display: flex; align-items: flex-start;
  gap: var(--figurluft);
  width: min(100%, var(--sum) * var(--maks-h) + (var(--antall) - 1) * var(--figurluft));
}
.hoyre > .figurer + * { margin-top: calc(var(--mellomrom) * 1.5); }
.figur { flex: var(--vekst) 1 0%; min-width: 0; }
.figur-flate { aspect-ratio: var(--forhold); }
.figur-flate > img, .figur-flate > svg { width: 100%; height: 100%; }
.ramme {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--mellomrom) / 4);
  padding: calc(var(--mellomrom) / 2);
  border: var(--strek) dashed var(--dempet);
  color: var(--dempet);
  font-size: var(--t-liten);
  line-height: 1.3;
  text-align: center;
}
.ramme .kommer-merke { margin: 0; }
.figur figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  column-gap: var(--mellomrom); row-gap: 0.15em;
  margin-top: calc(var(--mellomrom) / 2);
  font-size: var(--t-liten);
  line-height: 1.3;
  color: var(--dempet);
}
.figur figcaption > span { flex: 0 0 auto; max-width: 100%; }
.figur figcaption a { color: var(--tekst); white-space: nowrap; }

/* omslag */

.omslag-topp {
  grid-column: 1 / -1; grid-row: 1;
  align-self: start;
  display: grid; grid-template-columns: subgrid;
  padding-top: calc(var(--mellomrom) * 1.5);
  font-family: var(--skrift-mono);
  font-size: var(--t-liten);
  line-height: 1.2;
}
.omslag-dokument { grid-column: 1 / 4; }
.omslag-versjon { grid-column: 4 / 7; color: var(--dempet); }
.omslag-merke { grid-column: 1 / 10; grid-row: 2; align-self: end; }
.omslag-merke .figurer { --maks-h: calc(var(--marg) * 5); }

/* innhold */

.mal-innhold .tittel { margin-top: 0; font-size: var(--t-tittel); font-weight: var(--vekt-tekst-1); }
.innhold-liste {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(var(--rader), auto);
  grid-auto-flow: column;
  row-gap: calc(var(--mellomrom) * 2.5);
}
.innhold-liste li { grid-column: span 3; border-top: var(--strek) solid var(--linje); }
.innhold-liste li:nth-child(n + 5) { grid-column: 5 / span 3; }
.innhold-liste a { display: block; padding-top: calc(var(--mellomrom) * 0.75); text-decoration-line: none; }
.ih-nr {
  display: block;
  font-family: var(--skrift-mono);
  font-size: var(--t-liten);
  line-height: 1.2;
  color: var(--aksent);
}
.ih-navn {
  display: block;
  margin-top: calc(var(--mellomrom) / 2);
  font-size: var(--t-tittel);
  line-height: 1;
  letter-spacing: -0.015em;
}
.innhold-liste a:hover .ih-navn { text-decoration-line: underline; text-decoration-color: var(--aksent); }

/* kapittelside */

.mal-kapittelside .flate { display: flex; flex-direction: column; align-items: stretch; }
.kap-nr {
  font-family: var(--skrift-mono);
  font-size: var(--t-mellom);
  line-height: 1;
  color: var(--aksent);
}
.kap-navn {
  margin-top: auto;
  font-family: var(--skrift-display);
  font-style: var(--stil-display);
  font-weight: var(--vekt-display-1);
  font-size: max(var(--display-minimum), var(--t-kapittel));
  line-height: 0.9;
  letter-spacing: -0.01em;
  padding-bottom: 0.22em; /* plass til underlengdene i kursiven, som i f og g */
}
.kap-om { font-size: var(--t-ingress); line-height: 1.3; }

/* regelside */

.regler {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: calc(var(--mellomrom) * 2);
}
.regel {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  padding-top: var(--mellomrom);
  border-top: var(--strek) solid var(--linje);
}
.regel-nr {
  grid-column: 1 / 2;
  font-family: var(--skrift-mono);
  font-weight: var(--vekt-mono-1);
  font-size: var(--t-stor);
  line-height: 0.74;
  color: var(--aksent);
}
.regel-tekst { grid-column: 2 / 8; }
.regel-kort {
  font-size: var(--t-ingress);
  font-weight: var(--vekt-tekst-2);
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.regel-kort strong { font-weight: inherit; }
.regel-forklaring {
  margin-top: calc(var(--mellomrom) / 2);
  font-size: var(--t-brod);
  line-height: 1.45;
  color: var(--dempet);
  text-wrap: pretty;
}

/* ordboka */

.visning-oppslag { font-size: var(--t-ingress); line-height: 1.38; }
.visning-oppslag > * + * { margin-top: 0.3em; }
.visning-oppslag > .oppslagsord:not(:first-child), .visning-oppslag > .oppslagsord ~ p:last-child { margin-top: 1.3em; }
.oppslagsord { position: relative; }
.oppslagsord > .ast:first-child { position: absolute; right: 100%; padding-right: 0.04em; }
.visning-oppslag strong { font-weight: var(--vekt-tekst-2); }
.visning-oppslag em { font-style: normal; color: var(--dempet); }
.visning-oppslag ol { counter-reset: def; }
.visning-oppslag ol > li { position: relative; padding-left: 1.3em; counter-increment: def; }
.visning-oppslag ol > li::before { content: counter(def); position: absolute; left: 0; color: var(--dempet); }
.visning-oppslag > p:last-child { font-size: var(--t-brod); line-height: 1.45; color: var(--dempet); }

/* fargene */

.striper {
  display: grid;
  grid-template-columns: repeat(var(--antall), minmax(0, 1fr));
  grid-template-rows: auto calc(var(--marg) * 4.5) auto;
  column-gap: var(--mellomrom);
}
.stripe { grid-row: span 3; display: grid; grid-template-rows: subgrid; min-height: 0; }
.stripe-navn { font-size: var(--t-brod); font-weight: var(--vekt-tekst-2); line-height: 1.2; }
.trinn-stabel {
  display: flex; flex-direction: column;
  min-height: 0;
  margin-top: calc(var(--mellomrom) / 2);
  outline: var(--strek) solid var(--linje);
}
.trinn {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--mellomrom) / 2);
  font-family: var(--skrift-mono);
  font-size: var(--t-mikro);
  line-height: 1.2;
}
.trinn:first-child { flex-grow: 2.4; }
.trinn-bunn { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; }
.trinn-kontrast { display: flex; gap: 1ch; }
.kode { text-decoration-line: none; text-underline-offset: 0.2em; }
.kode:hover { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: currentColor; }
.stripe-tekst { margin-top: calc(var(--mellomrom) * 0.75); font-size: var(--t-liten); line-height: 1.4; color: var(--dempet); text-wrap: pretty; }

/* rollene, lys og mørk */

.visning-roller {
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  row-gap: calc(var(--mellomrom) * 2.5);
}
.rollepanel {
  grid-column: span 4;
  padding: calc(var(--mellomrom) * 1.25) calc(var(--mellomrom) * 1.5);
  outline: var(--strek) solid var(--linje);
  background: var(--grunn);
  color: var(--tekst);
}
.rp-hode, .tr-hode { font-size: var(--t-liten); line-height: 1.3; color: var(--dempet); }
.rp-liste { margin-top: var(--mellomrom); display: grid; row-gap: calc(var(--mellomrom) / 3); }
.rp-rad { display: grid; grid-template-columns: 1fr auto 3em; gap: var(--mellomrom); align-items: baseline; }
.rp-prove { font-size: var(--t-ingress); line-height: 1.25; }
.rp-tekst .rp-prove { color: var(--tekst); }
.rp-dempet .rp-prove { color: var(--dempet); }
.rp-aksent .rp-prove { color: var(--aksent); }
.rp-det-ene .rp-prove { color: var(--det-ene); }
.rp-strek { display: inline-block; width: 100%; vertical-align: middle; border-top: max(1px, var(--px) * 2) solid var(--linje); }
.rp-ref { font-size: var(--t-liten); color: var(--dempet); }
.rp-tall { font-family: var(--skrift-mono); font-size: var(--t-liten); text-align: right; }

.trinnrad { grid-column: 1 / -1; }
.tr-ruter {
  display: grid;
  grid-template-columns: repeat(var(--antall), minmax(0, 1fr));
  gap: var(--mellomrom);
  margin-top: calc(var(--mellomrom) * 0.75);
}
.tr-rute {
  outline: var(--strek) solid var(--linje);
  display: grid; grid-template-columns: 1fr auto;
  row-gap: calc(var(--mellomrom) / 3);
  padding: calc(var(--mellomrom) * 0.75) var(--mellomrom);
}
.tr-prove { grid-column: 1 / -1; font-size: var(--t-ingress); line-height: 1.25; }
.tr-navn { font-size: var(--t-liten); }
.tr-tall { font-family: var(--skrift-mono); font-size: var(--t-liten); }

/* skriftprøver */

.visning-prove { align-self: stretch; }
.prove { display: flex; flex-direction: column; height: 100%; }
.prove-tekst { font-family: var(--skrift-tekst); }
.prove-display { font-family: var(--skrift-display); font-style: var(--stil-display); font-weight: var(--vekt-display-1); }
.prove-mono { font-family: var(--skrift-mono); }
.pr-stor { line-height: 1; text-wrap: balance; }
.prove-tekst .pr-stor { font-size: var(--t-stor); font-weight: var(--vekt-tekst-2); letter-spacing: -0.025em; }
.prove-display .pr-stor { font-size: max(var(--display-minimum), var(--t-tall)); }
.prove-mono .pr-stor { font-size: var(--t-tall); line-height: 0.9; }
.pr-avsnitt { margin-top: calc(var(--mellomrom) * 2); max-width: 30em; font-size: var(--t-brod); line-height: 1.45; text-wrap: pretty; }
.prove-display .pr-avsnitt { max-width: 22em; font-size: max(var(--display-minimum), var(--t-ingress)); line-height: 1.2; }
.pr-vekter { margin-top: auto; display: grid; row-gap: calc(var(--mellomrom) / 2); }
.pr-vekt { display: grid; grid-template-columns: calc(var(--mellomrom) * 3.5) 1fr; align-items: baseline; }
.pr-vekt-tall { font-size: var(--t-liten); color: var(--dempet); }
.prove-display .pr-vekt-tall { font-size: max(var(--display-minimum), var(--t-liten)); }
.pr-tegn { font-size: max(var(--display-minimum), var(--t-brod)); line-height: 1.2; overflow-wrap: anywhere; }
.prove-tekst .pr-tegn, .prove-mono .pr-tegn { font-size: var(--t-brod); }

/* små skjermer: ingen 16:9, sidene flyter i én kolonne med størrelser i rem */

@media screen and (max-width: 899.98px) {
  html { --meny-h: 3rem; --strek: 1px; }

  .meny { gap: 1rem; padding: 0 var(--marg); }
  .meny-knapp { display: block; margin-left: auto; text-decoration-line: underline; text-decoration-color: var(--aksent); text-underline-offset: 0.2em; }
  .meny-liste {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 0.25rem var(--marg) 1rem;
    background: var(--grunn);
    border-bottom: 1px solid var(--linje);
    font-size: 1rem;
  }
  .js .meny:not(.apen) .meny-liste { display: none; }
  .meny-liste a { display: block; padding: 0.7rem 0; }

  main { gap: 0.5rem; padding: 0.5rem 0; }
  .ark { width: 100%; aspect-ratio: auto; overflow: visible; container-type: normal; }
  .side { display: flex; flex-direction: column; gap: 2.5rem; height: auto; padding: 2.5rem var(--marg) 3rem; }
  .flate { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
  .fotnote { align-self: stretch; padding: 0; }
  .tittel { margin-top: 0.5rem; }
  .kort { margin-top: 0.75rem; }

  .omslag-topp { display: flex; gap: 1.5rem; padding: 0.5rem 0 0; }
  .mal-omslag .side { min-height: 75svh; }
  .omslag-merke { margin-top: auto; align-self: stretch; }
  .figurer { --maks-h: 18rem; --figurluft: 1.5rem; flex-direction: column; width: 100%; }
  .visning-tekst > :not(.figurer) { max-width: none; }
  .hoyre.midtstilt { display: flex; align-items: stretch; gap: 2rem; }
  .hoyre.midtstilt:has(> .figurer + .figurer) > .figurer { --maks-h: 9rem; }
  .figur { flex: none; width: min(100%, var(--maks-h) * var(--vekst)); }
  .omslag-merke .figurer { --maks-h: 10rem; }

  .ledeliste { display: flex; flex-direction: column; gap: 1.25rem; }
  .ledeliste li { display: block; }
  .lede { display: block; }

  .innhold-liste { display: flex; flex-direction: column; gap: 1.5rem; }

  .mal-kapittelside .side { min-height: 26rem; }
  .mal-kapittelside .flate { flex: 1 1 auto; gap: 0; }
  .kap-navn { padding-top: 3rem; }
  .kap-om { margin-top: 0.5rem; }

  .regler { display: flex; flex-direction: column; gap: 2rem; }
  .regel { display: grid; grid-template-columns: 2.5rem 1fr; }
  .regel-nr { grid-column: 1; line-height: 0.8; }
  .regel-tekst { grid-column: 2; }

  .striper { display: flex; flex-direction: column; gap: 2.5rem; }
  .stripe { display: flex; flex-direction: column; }
  .trinn-stabel { display: grid; grid-template-columns: 1fr 1fr; }
  .trinn { min-height: 5rem; gap: 0.5rem; }

  .visning-roller { display: flex; flex-direction: column; gap: 2rem; }
  .tr-ruter { grid-template-columns: 1fr 1fr; }

  .prove { gap: 2rem; height: auto; }
  .pr-avsnitt { margin-top: 0; }
  .pr-vekter { margin-top: 0; }
  .pr-vekt { grid-template-columns: 3rem 1fr; }
}

/* utskrift: én side per ark, 16:9, uten marger fra nettleseren */

@media print {
  html { background: none; }
  .meny, .lesemelding { display: none; }
  main { display: block; padding: 0; }
  .ark {
    width: 100%;
    height: var(--ark-hoyde);
    aspect-ratio: auto;
    break-after: page;
    break-inside: avoid;
  }
  .ark:last-child { break-after: auto; }
  .fotnote { grid-column: 5 / 12; }
  .sidetall {
    display: block;
    grid-column: 12 / 13; grid-row: 3;
    align-self: end; justify-self: end;
    padding-bottom: calc(var(--mellomrom) * 1.5);
    font-family: var(--skrift-mono);
    font-size: var(--t-liten);
    line-height: 1.3;
    color: var(--dempet);
  }
  html, .ark, .ark * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}