/* Longyears Chronicles. Tid som jordlag: torv, leire, bein og rav. */
:root {
  --torv: #1f1a17;     /* bakgrunn */
  --leire: #2b2420;    /* flater, felt */
  --leire-2: #352c26;  /* hover, aktive flater */
  --kant: #4a3d33;
  --bein: #ece4d4;     /* tekst */
  --aske: #a89c8a;     /* dempet tekst */
  --rav: #d9a441;      /* den udødelige, handlinger */
  --rust: #d9785f;     /* feil */
  --mose: #8fa98a;     /* ok */

  --antikva: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --bok: "Alegreya", "Iowan Old Style", Georgia, serif;  /* lastes bare på sidene som bruker den */
  --grotesk: "Alegreya Sans", "Gill Sans", "Segoe UI", sans-serif;

  --s1: 0.375rem; --s2: 0.75rem; --s3: 1.25rem; --s4: 2rem; --s5: 3.5rem;
  --r: 4px;
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .89 0 0 0 0 .83 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");  /* som i jord og gammelt papir */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--torv);
  /* korn, som i jord og gammelt papir */
  background-image: var(--korn);
  color: var(--bein);
  font-family: var(--grotesk);
  font-size: 1.125rem;
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums;
}
a { color: var(--rav); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--bein); }
:focus-visible { outline: 2px solid var(--rav); outline-offset: 3px; }
::selection { background: var(--rav); color: var(--torv); }

h1, h2, h3 { font-family: var(--antikva); font-weight: 600; line-height: 1.1; margin: 0 0 var(--s3); }
h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: 1.8rem; margin-top: var(--s5); }
h3 { font-size: 1.35rem; margin-top: var(--s4); }

/* ---------- topp ---------- */
.topp {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s3) clamp(1rem, 4vw, 3rem) var(--s2);
}
.merke {
  font-family: var(--antikva); font-size: 1.5rem; font-weight: 600; font-style: italic;
  color: var(--bein); text-decoration: none; letter-spacing: 0.005em;
}
.merke:hover { color: var(--rav); }
.topp nav { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.topp nav a { color: var(--aske); text-decoration: none; }
.topp nav a:hover, .topp nav a[aria-current] { color: var(--bein); }
.topp form { margin: 0; }
.stripe { display: block; width: 100%; height: 22px; margin-bottom: var(--s4); }

main { padding: 0 clamp(1rem, 4vw, 3rem) var(--s5); }

/* ---------- knapper ---------- */
.knapp {
  display: inline-block;
  background: var(--rav); color: var(--torv);
  border: 0; border-radius: var(--r);
  padding: 0.75rem 1.5rem;
  font: 700 1.05rem/1.2 var(--grotesk);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 240, 200, 0.35) inset, 0 2px 0 #8a6421;
}
.knapp:hover { background: #e8b858; color: var(--torv); }
.knapp:active { transform: translateY(1px); box-shadow: 0 1px 0 #8a6421; }
.knapp.liten { padding: 0.5rem 1rem; font-size: 0.95rem; }
.knapp.fare { background: var(--rust); box-shadow: 0 2px 0 #8a3f2c; }
.knapp.dempet { background: var(--leire-2); color: var(--bein); box-shadow: 0 2px 0 #17120f; }
.knapp.dempet:hover { background: var(--kant); }
.sekundaer { color: var(--bein); }
.lenkeknapp {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--aske); text-decoration: underline; text-underline-offset: 0.18em;
}
.lenkeknapp:hover { color: var(--bein); }
.topp .lenkeknapp { text-decoration: none; }
.lenkeknapp.fare { color: var(--rust); font-size: 0.95rem; }

/* ---------- meldinger ---------- */
.melding { margin: 0 clamp(1rem, 4vw, 3rem) var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--aske); background: var(--leire); border-radius: 0 var(--r) var(--r) 0; }
.melding-ok { border-color: var(--mose); }
.melding-feil, .feil { border-left: 3px solid var(--rust); }
.feil { background: var(--leire); padding: var(--s2) var(--s3); border-radius: 0 var(--r) var(--r) 0; }
.feltfeil { color: var(--rust); margin: var(--s1) 0 0; font-size: 1rem; }

/* ---------- forside ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  min-height: min(84vh, 52rem);
  padding-top: var(--s3);
}
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.9rem); font-weight: 500; line-height: 1.02; max-width: 12ch; margin-bottom: var(--s4); }
.ingress { color: var(--aske); max-width: 34rem; font-size: 1.22rem; }
.handlinger { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.handlinger .hjelp { margin: 0; }

/* Lysbildene: ett maleri per hendelse, og ved siden av et snitt med ett lag per hendelse.
   Ravtråden klatrer opp til laget for bildet som vises, og prikken er den udødelige. */
.lysbilder { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; }
.bilder { grid-column: 1; grid-row: 1; display: grid; }
/* Det nye maleriet tones inn oppå det gamle, og den gamle teksten er borte før den nye kommer. */
.hendelse { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 1.1s; }
.hendelse.aktiv { visibility: visible; z-index: 1; transition: none; }
.hendelse img { opacity: 0; transition: opacity 0s linear 1.1s; }
.hendelse.aktiv img { opacity: 1; transition: opacity 1.1s ease; }
.hendelse .tekst { opacity: 0; transition: opacity 0.35s ease; }
.hendelse.aktiv .tekst { opacity: 1; transition: opacity 0.6s ease 0.45s; }
.hendelse img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: var(--leire); border-radius: 2px 0 0 2px; }
.hendelse .tekst { padding: var(--s3) var(--s3) 0 0; max-width: 36rem; }
.hendelse p { margin: 0; }
.hendelse .aar { font: italic 600 1.9rem/1.1 var(--antikva); }
.hendelse .tittel { font: 600 1.4rem/1.2 var(--antikva); margin-bottom: var(--s1); }
.hendelse .om { color: var(--aske); }
.hendelse .verk { color: var(--aske); font-size: 0.92rem; margin-top: var(--s2); }
.hendelse cite { font-style: italic; }

.kontroller { grid-column: 1; grid-row: 2; display: flex; gap: var(--s2); padding-top: var(--s3); }
.kontroller button {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--kant); border-radius: 50%; background: none; color: var(--aske); cursor: pointer;
}
.kontroller button:hover { color: var(--bein); border-color: #6b5a4a; }
.kontroller svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spill path { display: none; }
.spill .start { fill: currentColor; stroke: none; }
.spill[data-tilstand="pause"] .pause, .spill[data-tilstand="start"] .start, .spill[data-tilstand="igjen"] .igjen { display: inline; }

.soyle { grid-column: 2; grid-row: 1 / 3; position: relative; border-radius: 0 2px 2px 0; overflow: hidden; }
.lagene, .traad { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lagene .grense { fill: none; stroke: rgba(236, 228, 212, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.traad {
  clip-path: inset(calc(var(--y) * 1%) 0 0 0);
  filter: drop-shadow(0 0 5px rgba(217, 164, 65, 0.45));
  transition: clip-path 1.2s cubic-bezier(.45, 0, .2, 1);
}
.traad svg { width: 100%; height: 100%; display: block; transform: translateX(calc(var(--skyv, 0) * 1%)); }
.traad path { fill: none; stroke: var(--rav); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.naa {
  position: absolute; left: calc((var(--x) + var(--skyv, 0)) * 1%); top: calc(var(--y) * 1%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--rav); box-shadow: 0 0 0 3px rgba(31, 26, 23, 0.5), 0 0 14px rgba(217, 164, 65, 0.65);
  transition: top 1.2s cubic-bezier(.45, 0, .2, 1), left 1.2s cubic-bezier(.45, 0, .2, 1);
}
.soyle .lag {
  position: absolute; left: 0; width: 100%; display: flex; align-items: center;
  padding: 0 0 0 2.4rem; border: 0; background: none; cursor: pointer; text-align: left;
  font: italic 600 1rem/1 var(--antikva); color: rgba(236, 228, 212, 0.62);
}
.soyle .lag:hover { color: var(--bein); background: rgba(236, 228, 212, 0.05); }
.soyle .lag.aktiv { color: var(--bein); }
.soyle .lag:focus-visible { outline-offset: -2px; }
.lysbilder:not(.styrt) .lag { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hendelse, .hendelse.aktiv, .hendelse img, .hendelse.aktiv img, .hendelse .tekst, .hendelse.aktiv .tekst, .traad, .naa { transition: none; }
}

.slik { max-width: 44rem; margin-top: var(--s4); }
.slik ol { list-style: none; padding: 0; margin: 0; counter-reset: steg; }
.slik li {
  counter-increment: steg;
  display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--kant);
}
.slik li::before {
  content: counter(steg, upper-roman); grid-row: span 2;
  font: italic 600 1.9rem/1 var(--antikva); color: var(--rav);
}
.slik li strong { font-family: var(--antikva); font-size: 1.4rem; font-weight: 600; }
.slik li span { color: var(--aske); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 0; gap: var(--s4); }
  /* Snittet står bare ved siden av bildet, og årstallene står i teksten under. Bredden er hele skjermen. */
  .lysbilder { order: -1; margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)); grid-template-columns: minmax(0, 1fr) 2.5rem; }
  .hendelse img { border-radius: 0; }
  .hendelse .tekst { padding: var(--s3) clamp(1rem, 4vw, 3rem) 0; }
  .kontroller { grid-column: 1 / 3; padding-left: clamp(1rem, 4vw, 3rem); }
  .hendelse .aar { font-size: 1.6rem; }
  .bilder { grid-column: 1 / 3; }
  .hendelse img { width: calc(100% - 2.5rem); }
  .soyle { grid-row: 1; align-self: start; height: calc((100vw - 2.5rem) * 0.8); border-radius: 0; --skyv: 30; }
  .soyle .lag { pointer-events: none; }
  .soyle .lag span { display: none; }
}

/* ---------- skjema ---------- */
.skjema-side { max-width: 30rem; margin: 0 auto; }
.skjema-side.bred { max-width: 42rem; }
.skjema-side > .ingress { margin-top: calc(-1 * var(--s2)); }
.skjema { display: flex; flex-direction: column; counter-reset: del; }
.skjema > .knapp { align-self: flex-start; margin-top: var(--s4); }
fieldset {
  border: 0; border-top: 1px solid var(--kant); margin: var(--s4) 0 0; padding: var(--s3) 0 0;
  display: flex; flex-direction: column; counter-increment: del;
}
legend { font-family: var(--antikva); font-size: 1.7rem; font-weight: 600; padding: 0 var(--s2) 0 0; }
.skjema.deler legend::before {
  content: counter(del, upper-roman) "  "; white-space: pre;
  font-style: italic; color: var(--rav);
}
label, .etikett { margin-top: var(--s3); font-weight: 500; }
.valgfritt { color: var(--aske); font-weight: 400; }
.hjelp { color: var(--aske); font-size: 0.98rem; margin: var(--s1) 0 0; }
input, select, textarea {
  margin-top: var(--s1);
  background: var(--leire); color: var(--bein);
  border: 1px solid var(--kant); border-bottom-color: #5d4d40; border-radius: var(--r);
  padding: 0.65rem 0.8rem;
  font: inherit; width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}
textarea { resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: #7f7365; }
input:focus, select:focus, textarea:focus { border-color: #8c7a66; background: var(--leire-2); outline: none; }
[aria-invalid="true"] { border-color: var(--rust); }
.kort { max-width: 8rem; }
.aar { display: flex; gap: var(--s2); align-items: center; }
.sluttaar { margin: var(--s2) 0 0; color: var(--aske); }
.sluttaar strong { color: var(--bein); font-family: var(--antikva); font-size: 1.2rem; }
.aar select { width: auto; }
.eksempler { margin-top: var(--s2); }
.eksempler > summary { cursor: pointer; color: var(--rav); width: fit-content; }
.eksempler[open] > summary { color: var(--aske); }
.eksempler ul { list-style: none; padding: 0; margin: var(--s2) 0 0; color: var(--aske); font-size: 0.98rem; }
.eksempler li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s2); }
.eksempler li + li { margin-top: var(--s1); }
.eksempler .lenkeknapp { color: var(--rav); text-align: left; align-self: start; font-variant-numeric: lining-nums; }
.eksempler .lenkeknapp:hover { color: var(--bein); }
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; flex: none; margin: 0; padding: 0;
  border: 1.5px solid #8c7a66; border-radius: 50%; background: transparent; box-shadow: none;
  display: inline-grid; place-content: center; cursor: pointer;
}
input[type="radio"]::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rav); transform: scale(0); transition: transform 0.12s ease; }
input[type="radio"]:checked { border-color: var(--rav); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="radio"]:focus-visible { outline: 2px solid var(--rav); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input[type="radio"]::before { transition: none; } }

.valg-rad { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; }
.valg {
  margin: 0; display: flex; align-items: center; gap: var(--s1); font-weight: 400;
  padding: 0.4rem 0.9rem; border: 1px solid var(--kant); border-radius: 999px; cursor: pointer;
}
.valg:has(input:checked) { border-color: #6b5a4a; background: var(--leire-2); }
.bytt { color: var(--aske); margin-top: var(--s4); }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- valgene for fortellingen ---------- */
.valggruppe { font-size: 1.45rem; margin: var(--s4) 0 0; color: var(--rav); font-style: italic; }
.valgblokk { margin-top: var(--s3); }
.valgblokk .etikett { display: block; margin: 0; }
.alternativer { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.alternativ {
  margin: 0; display: grid; grid-template-columns: 1.15rem 1fr; column-gap: 0.7rem; align-items: start; align-content: start;
  padding: var(--s2);
  border: 1px solid var(--kant); border-radius: var(--r); background: transparent;
  font-weight: 400; cursor: pointer;
}
.alternativ input { grid-row: span 2; margin-top: 0.22rem; }
.alternativ:hover { background: rgba(53, 44, 38, 0.6); }
.alternativ:has(input:checked) { border-color: #6b5a4a; background: var(--leire-2); }
.alternativ:has(input:checked) .alt-navn { color: var(--rav); }
.alt-navn { font-family: var(--antikva); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.alt-kort { color: var(--aske); font-size: 0.95rem; line-height: 1.4; }
.anbefalt { font-family: var(--grotesk); font-size: 0.85rem; font-weight: 500; color: var(--aske); }

.fast-knapp {
  position: sticky; bottom: 0; z-index: 1;
  margin: var(--s4) calc(-1 * var(--s2)) 0; padding: var(--s3) var(--s2);
  background: linear-gradient(rgba(31, 26, 23, 0), var(--torv) 35%);
}
details.tilpass { margin-top: var(--s3); border: 1px solid var(--kant); border-radius: var(--r); padding: 0 var(--s3); }
details.tilpass[open] { padding-bottom: var(--s3); }
details.tilpass > summary { cursor: pointer; padding: var(--s2) 0; font-weight: 500; list-style-position: outside; margin-left: 1rem; }
details.tilpass > summary::marker { color: var(--aske); }
details.tilpass > summary .hjelp { display: block; font-weight: 400; }

/* ---------- historie ---------- */
.venter { border-left: 2px solid var(--rav); padding: var(--s1) 0 var(--s1) var(--s3); }
.venter h2 { margin-top: 0; font-size: 1.55rem; }
.venter h3 { margin-top: 0; }
.venter ul { padding-left: 1.2rem; }
/* lista over historiene: jordlagene i kanten, ravtråden så lenge historien pågår */
.historieliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.historieliste li {
  position: relative; background: var(--leire); border-radius: var(--r);
  padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 6px);
}
.historieliste li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--r) 0 0 var(--r);
  background: linear-gradient(90deg, transparent 2px, var(--rav) 2px 4px, transparent 4px), linear-gradient(#3b3029, #5c4532 30%, #7d5c3c 60%, #6f5139); }
.historieliste li.ferdig::before { background: linear-gradient(#3b3029, #5c4532 30%, #7d5c3c 60%, #6f5139); }
.historieliste li:hover { background: var(--leire-2); }
.historieliste a { font-family: var(--antikva); font-size: 1.55rem; font-weight: 600; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere; }
.historieliste a::after { content: ""; position: absolute; inset: 0; }  /* hele kortet kan trykkes på */
.historieliste p { margin: var(--s1) 0 0; color: var(--aske); overflow-wrap: anywhere; }
.historieliste .merk { margin-right: var(--s1); }
/* hvor fullt kapittelet er: jordlagene, med ravtråden i kanten */
.kapittelstripe { margin: var(--s2) 0; }
.kapittel-hode { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; align-items: baseline; }
.kapittel-navn { font-family: var(--antikva); font-size: 1.3rem; font-weight: 600; }
.kapittel-fase { color: var(--aske); font-size: 0.95rem; }
.kapittelstripe.snart .kapittel-fase, .kapittelstripe.fullt .kapittel-fase { color: var(--bein); }
.kapittel-spor { height: 8px; margin-top: var(--s1); background: var(--leire); border: 1px solid var(--kant); border-radius: var(--r); overflow: hidden; }
.kapittel-fyll { height: 100%; min-width: 2px; border-right: 2px solid var(--rav);
  background: linear-gradient(90deg, #3b3029, #5c4532 40%, #7d5c3c 80%, #6f5139); }

/* ---------- innstillinger ---------- */
.rolle { margin-top: var(--s2); }
.rolle label { display: block; }
.rolle-valg { display: flex; gap: var(--s2); align-items: center; }
.rolle-valg select { max-width: 16rem; }
.rolle-valg .knapp { margin-top: var(--s1); }
.nokler { list-style: none; padding: 0; margin: 0; }
.nokkel { border-top: 1px solid var(--kant); padding: var(--s3) 0; }
.nokkel-hode { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: baseline; }
.nokkel-navn { font-family: var(--antikva); font-size: 1.35rem; font-weight: 600; }
.firma { color: var(--aske); font-family: var(--grotesk); font-size: 1rem; font-weight: 400; }
.status { color: var(--mose); }
.status.tom { color: var(--aske); }
/* sammenligning av tjenestene (/tjenester) */
.tjenester .ingress { margin-bottom: var(--s4); }
.kort-fortalt { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s3); }
.kort-fortalt dt { font-family: var(--antikva); font-size: 1.3rem; font-weight: 600; color: var(--rav); }
.kort-fortalt dd { font-family: var(--grotesk); font-size: 1.05rem; font-weight: 400; }
.tjeneste { border-top: 1px solid var(--kant); margin-top: var(--s4); padding-top: var(--s3); }
.tjeneste h2 { margin-bottom: var(--s2); }
.tjeneste h3 { font-size: 1.2rem; margin: var(--s3) 0 var(--s1); }
.tjeneste ul, .tjenester > ul { padding-left: 1.2rem; margin: 0; }
.tjeneste li + li, .tjenester > ul li + li { margin-top: var(--s1); }
.kilder { padding-left: 1.2rem; }

/* status for en lagret nøkkel: merke øverst og kant til venstre i samme farge */
.nokkel.virker, .nokkel.virker-ikke, .nokkel.ukjent { border-left: 3px solid var(--aske); padding-left: var(--s3); }
.nokkel.virker { border-left-color: var(--mose); }
.nokkel.virker-ikke { border-left-color: var(--rust); }
.nokkelstatus { display: inline-flex; gap: 0.4em; align-items: baseline; padding: 0.1rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--aske); color: var(--aske); font-weight: 600; white-space: nowrap; }
.nokkelstatus.virker { border-color: var(--mose); color: var(--mose); background: rgba(143, 169, 138, 0.12); }
.nokkelstatus.virker-ikke { border-color: var(--rust); color: var(--rust); background: rgba(217, 120, 95, 0.12); }
.nokkel-feil { color: var(--rust); margin: var(--s1) 0 0; }
.nokkel-test { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; margin-top: var(--s2); }
.nokkel-test .hjelp { margin: 0; }
.nokkel-steg { margin: var(--s2) 0 0; padding-left: 1.4rem; }
.nokkel-steg li + li { margin-top: var(--s1); }
.nokkel-skjema { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s2); }
.nokkel-skjema input { margin-top: 0; }
.nokkel-skjema .knapp { white-space: nowrap; }
.nokkel form:last-child { margin-top: var(--s2); }
.nokkel-detaljer { margin-top: var(--s1); }
.nokkel-detaljer > summary { cursor: pointer; color: var(--rav); width: fit-content; }
.nokkel-detaljer[open] > summary { color: var(--aske); }
details.tilpass.farlig { border-color: rgba(217, 120, 95, 0.45); }
details.tilpass.farlig > summary { color: var(--rust); }
details.tilpass + details.tilpass { margin-top: var(--s2); }
.skjema .knapp.liten { align-self: flex-start; margin-top: var(--s3); }

/* ---------- admin ---------- */
.admin { max-width: 72rem; margin: 0 auto; }
.admin-nav { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s4); padding: 0; list-style: none; border-bottom: 1px solid var(--kant); }
.admin-nav a { display: block; padding: var(--s1) var(--s2) var(--s2); color: var(--aske); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-nav a:hover { color: var(--bein); }
.admin-nav a[aria-current] { color: var(--bein); border-color: var(--rav); }
.admin h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.admin h2 { font-size: 1.5rem; margin-top: var(--s4); }

.tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--kant); border: 1px solid var(--kant); border-radius: var(--r); overflow: hidden; margin: 0; }
.tall > div { background: var(--leire); padding: var(--s3); }
.tall dt { color: var(--aske); font-size: 0.95rem; }
.tall dd { margin: 0; font: 600 2.3rem/1.1 var(--antikva); font-variant-numeric: lining-nums; }
.tall dd small { font: 400 0.95rem var(--grotesk); color: var(--aske); margin-left: var(--s1); }

.kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s4); }
.tabell-ramme { overflow-x: auto; border: 1px solid var(--kant); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--kant); vertical-align: top; }
thead th { background: var(--leire); font-weight: 700; color: var(--aske); white-space: nowrap; }
thead th a { color: inherit; text-decoration: none; }
thead th a:hover, thead th a[aria-current] { color: var(--bein); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(53, 44, 38, 0.6); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.merk { display: inline-block; padding: 0 0.5rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid var(--kant); color: var(--aske); white-space: nowrap; }
.merk.rav { border-color: var(--rav); color: var(--rav); }
.merk.rust { border-color: var(--rust); color: var(--rust); }
.merk.mose { border-color: var(--mose); color: var(--mose); }

/* stolpediagram i ren CSS */
.stolper { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.stolper li { display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr 2.5rem; gap: var(--s2); align-items: center; font-size: 0.98rem; }
.stolper .bar { height: 0.9rem; background: var(--leire); border-radius: 2px; overflow: hidden; }
.stolper .bar span { display: block; height: 100%; background: var(--rav); border-radius: 2px; min-width: 2px; }
.stolper .n { text-align: right; color: var(--aske); font-variant-numeric: tabular-nums lining-nums; }
.tidslinje { display: flex; align-items: flex-end; gap: 3px; height: 8rem; padding: var(--s2) 0 0; border-bottom: 1px solid var(--kant); }
.tidslinje div { flex: 1; background: var(--rav); border-radius: 2px 2px 0 0; min-height: 2px; opacity: 0.85; }
.tidslinje div.null { background: var(--kant); }
.tidslinje-akse { display: flex; justify-content: space-between; color: var(--aske); font-size: 0.85rem; margin-top: var(--s1); }

.verktoy { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s3); }
.verktoy input, .verktoy select { width: auto; margin: 0; }
.handlingsliste { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.handling { display: flex; flex-direction: column; }
.handling > form, .handling > a { margin-top: auto; }
.handling { border: 1px solid var(--kant); border-radius: var(--r); padding: var(--s3); background: rgba(43, 36, 32, 0.5); }
.handling h3, .handling h2 { margin-top: 0; }
.ny-bruker { max-width: 40rem; margin-bottom: var(--s4); }
.ny-bruker label { flex: 1 1 14rem; }
.ny-bruker form input { width: 100%; }  /* overstyrer .handling input */
.handling form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }
.handling input { width: auto; flex: 1 1 12rem; margin: 0; }
.handling.farlig { border-color: rgba(217, 120, 95, 0.5); }
pre.kode { background: var(--leire); padding: var(--s3); border-radius: var(--r); overflow-x: auto; font-size: 0.9rem; white-space: pre-wrap; }
.tom-tekst { color: var(--aske); font-style: italic; }

@media (max-width: 520px) {
  .topp { flex-wrap: wrap; row-gap: var(--s1); }
  .merke { font-size: 1.25rem; white-space: nowrap; }
  .topp nav { gap: var(--s3); font-size: 1rem; }
  .nokkel-skjema { flex-direction: column; align-items: stretch; }
  .alternativer { grid-template-columns: 1fr; }
  .alternativ { padding-top: var(--s1); padding-bottom: var(--s1); }
}

/* ---------- kapittelet: samtalen langs ravtråden ----------
   Tråden er den udødelige. Det spilleren gjør, er prikker på tråden, og skrivefeltet er den tomme
   prikken der det neste skal stå. Fortellerens tekst er satt som en bok (--bok). Se DESIGN.md. */
.kapittelside {
  --traad-x: 0.55rem;  /* der tråden går, fra venstre kant av samtalen */
  --innrykk: 2.25rem;  /* der teksten begynner */
  --traad-farge: rgba(217, 164, 65, 0.5);
  max-width: 42rem; margin: 0 auto;
}
.kapittel-topp h1 { margin-bottom: var(--s1); }
.kapittel-tid { color: var(--aske); margin: 0 0 var(--s2); }

.samtale { list-style: none; margin: var(--s4) 0 0; padding: 0 0 var(--s1) var(--innrykk); position: relative; }
.samtale::before {  /* tråden kommer fram av jorda øverst i kapittelet */
  content: ""; position: absolute; left: var(--traad-x); top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, rgba(217, 164, 65, 0), var(--traad-farge) 3rem);
}
.replikk { position: relative; scroll-margin-top: var(--s4); }
.replikk + .replikk { margin-top: var(--s4); }
body.kapittel { overflow-anchor: none; }  /* siden ruller bare når kapittel.js ber om det */
.replikk.forteller { font-family: var(--bok); font-size: 1.2rem; line-height: 1.68; max-width: 36rem; }
.replikk.forteller p { margin: 0 0 0.9em; }
.replikk.forteller p:last-child { margin-bottom: 0; }
.replikk.spiller { font-size: 1.1rem; }
.replikk.spiller p { margin: 0; white-space: pre-line; }
.replikk.spiller::before, .replikk.feilet::before, .skriveplass .node {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  left: calc(var(--traad-x) - var(--innrykk) - 4px); top: 0.5em;
  background: var(--rav); box-shadow: 0 0 0 4px var(--torv);  /* en perle på tråden */
}
.replikk.feilet::before { background: var(--rust); }
.replikk.feilet > p { margin: 0; }

/* Fortelleren skriver: en markør i rav står der teksten kommer */
#live:not(:empty) + .skriver-status { display: none; }
.skriver-status { margin: 0; color: var(--aske); font-family: var(--bok); font-style: italic; font-size: 1.2rem; }
#live > p:last-child::after, .skriver-status::after {
  content: ""; display: inline-block; width: 0.45em; height: 1.05em; margin-left: 0.2em; vertical-align: -0.15em;
  background: var(--rav); animation: markor 1.1s steps(2, jump-none) infinite;
}
@keyframes markor { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #live > p:last-child::after, .skriver-status::after { animation: none; } }

.svarvalg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.svarvalg form { margin: 0; }

/* Skrivefeltet følger med nederst på skjermen, på tråden */
.skriveplass {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s1) var(--s2);
  margin: 0; padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom)) var(--innrykk);
}
.skriveplass::after {  /* bakgrunnen med korn tones inn ovenfra, så teksten under glir bort */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--korn), var(--torv);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--s3));
  mask-image: linear-gradient(transparent, #000 var(--s3));
}
.skriveplass::before {  /* tråden går helt ned til skrivefeltet */
  content: ""; position: absolute; left: var(--traad-x); top: 0; height: calc(var(--s3) + 1.5rem); width: 2px;
  background: var(--traad-farge);
}
.skriveplass .node { left: calc(var(--traad-x) - 4px); top: calc(var(--s3) + 1.5rem - 5px); background: var(--torv); border: 2px solid var(--rav); }
.skriveplass textarea {
  margin: 0; min-height: 3rem; max-height: 40vh; resize: none; overflow-y: auto; line-height: 1.45;
}
.skriveplass .knapp { min-height: 3rem; }
.skrivefot { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s3); min-height: 1.6rem; font-size: 0.9rem; }
.tastehjelp { margin: 0; color: var(--aske); }
.skrivefot .lenkeknapp { margin-left: auto; }
@media (hover: none) { .tastehjelp { display: none; } }

.kapittelstart { margin-top: var(--s4); max-width: 34rem; }
.kapittelstart p { color: var(--aske); margin: 0 0 var(--s3); }
body.kapittel main { padding-bottom: 0; }  /* skrivefeltet er det siste på siden */

/* Lenkene under kapittelstripen. «Avslutt kapittelet» åpner seg på en egen linje. */
.kapittelvalg { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: 0.95rem; }
.kapittelvalg a, .avslutt > summary { color: var(--aske); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.kapittelvalg a:hover, .avslutt > summary:hover, .avslutt[open] > summary { color: var(--bein); }
.avslutt > summary { cursor: pointer; list-style: none; }
.avslutt > summary::-webkit-details-marker { display: none; }
.avslutt[open] { flex-basis: 100%; }
.avslutt-innhold { margin-top: var(--s2); padding: var(--s3); border: 1px solid var(--kant); border-radius: var(--r); font-size: 1.05rem; }
.avslutt-innhold > p { margin: 0; }
.avslutt-innhold .hjelp + p { margin-top: var(--s2); }
.avslutt-innhold form > p { margin: var(--s3) 0 0; }

@media (max-width: 520px) {
  .kapittelside { --innrykk: 1.75rem; --traad-x: 0.35rem; }
  .replikk.forteller { font-size: 1.12rem; }
}

/* ---------- historiesiden: tittelbladet for ett liv gjennom tiden ----------
   Tidslinjen er et bånd av jordlag fra startåret til sluttåret. Ravtråden går fram til der hovedpersonen
   står nå (--andel, 0 til 1), og veien videre er stiplet. Resten av siden er rolig typografi uten bokser. */
.historieside { max-width: 60rem; margin: 0 auto; }
.livslinje { --naa: calc(7px + (100% - 14px) * var(--andel, 0)); }  /* prikken står alltid inne i båndet */
.historieside h1 { margin-bottom: var(--s1); overflow-wrap: anywhere; }
.historie-sted { margin: 0; max-width: 40rem; color: var(--aske); font-family: var(--antikva); font-style: italic; font-size: 1.4rem; line-height: 1.35; }

.livslinje { margin: var(--s5) 0 0; }
.livslinje-naa {
  position: relative; left: var(--naa); display: inline-block; transform: translateX(-50%);
  margin-bottom: var(--s2); white-space: nowrap;
  font-family: var(--antikva); font-size: 1.35rem; font-weight: 600; font-variant-numeric: lining-nums;
}
.livslinje-naa.venstre { transform: translateX(-7px); }
.livslinje-naa.hoyre { transform: translateX(calc(-100% + 7px)); }
.tidsband { position: relative; height: 1.75rem; }
.tidsband .stripe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: var(--r); transform: scaleX(-1); }
.tidsband::after {  /* veien videre */
  content: ""; position: absolute; left: var(--naa); right: 0; top: 50%;
  border-top: 2px dotted rgba(217, 164, 65, 0.45); transform: translateY(-1px);
}
.tidsband .levd { position: absolute; left: 0; top: 50%; width: var(--naa); height: 2px; margin-top: -1px; background: var(--rav); }
.tidsband .prikk {
  position: absolute; left: var(--naa); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--rav); box-shadow: 0 0 0 4px var(--torv);
}
.livslinje-aar {
  display: flex; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0 0;
  color: var(--aske); font-size: 0.95rem; font-variant-numeric: lining-nums;
}
.livslinje-aar span:nth-child(2) { text-align: center; }
.livslinje-aar span:last-child { text-align: right; }

.historie-handling { margin-top: var(--s4); }
.historie-handling form { margin: 0; }

.historie-spalter { display: grid; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--kant); }
@media (min-width: 860px) { .historie-spalter { grid-template-columns: 3fr 2fr; } }
.historie-spalter h2 { margin: 0 0 var(--s3); font-size: 1.75rem; }
.historie-spalter h3 { margin: var(--s4) 0 var(--s1); font-size: 1.2rem; font-style: italic; color: var(--aske); }
.historie-spalter h2 + h3 { margin-top: 0; }
.spalte-valg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s4) 0 0; }

/* Korte fakta på linjer med prikker mellom, som i en innholdsfortegnelse */
.fakta { margin: 0; }
.fakta > div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.fakta > div::after { content: ""; order: 1; flex: 1 1 1rem; border-bottom: 1px dotted #5d4d40; transform: translateY(-0.3em); }
.fakta dt { order: 0; color: var(--aske); }
.fakta dd { order: 2; margin: 0; max-width: 60%; text-align: right; font-family: var(--antikva); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.fakta + .hjelp { margin-top: var(--s2); }

/* Det lengre om hovedpersonen, satt som en bok */
.avsnitt { margin: var(--s2) 0 0; }
.avsnitt dt { margin-top: var(--s3); color: var(--aske); font-size: 0.95rem; }
.avsnitt dd, .profiltekst { margin: var(--s1) 0 0; max-width: 36rem; white-space: pre-line; font-family: var(--bok); font-size: 1.12rem; line-height: 1.6; }

.historie-fot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--kant);
}
.historie-fot details { margin: 0; flex: 0 1 auto; }
.historie-fot details[open] { flex-basis: 100%; }
.historie-fot details p { color: var(--aske); }
.slett-skjema { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.slett-skjema input { flex: 1 1 12rem; width: auto; margin: 0; }