/*
  diggs.no – stil for alle sider. Krever tokens.css først.
  Ingen byggesteg, ingen rammeverk. Moderne CSS: custom properties, nesting er IKKE brukt
  (enklere å lese og porte), subgrid og :has() bare som forbedring.
  Komponentene er beskrevet i design/DESIGN.md, avsnitt 5.
*/

/* ---------- 1. Grunnlag ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first;
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--leading);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  body { letter-spacing: 0.006em; }
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0;
  font-variant-numeric: lining-nums;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0; text-wrap: pretty; }

abbr[title] { text-decoration: none; }

strong, b { font-weight: 650; }

::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* Lenker: alltid understreket i løpende tekst (WCAG 1.4.1) */
a {
  color: var(--c-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease),
              text-decoration-thickness var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--c-accent-strong);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Fokus: synlig, 3 px, minst 3:1 mot bunnen (WCAG 2.4.7, 1.4.11) */
:focus-visible {
  outline: var(--focus-w) solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* Ankre lander ikke under noe (WCAG 2.4.11, teknikk C43) */
html { scroll-padding-top: var(--space-6); }

/* Sideovergang: bare krysstoning, bare når brukeren ikke har bedt om mindre bevegelse */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 150ms; }
}

/* ---------- 2. Snarvei og skjult tekst ---------- */

.skip {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
}
.skip:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Rutenett ---------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
  .page: én spalte på smal skjerm. Fra 62rem: venstre marg (metadata, merking),
  tekstspalte (33em), og resten til høyre (sidenoter, brede figurer).
*/
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-7) var(--space-9);
}
.page > * { min-width: 0; max-width: var(--measure); }
.page > .wide { max-width: none; }

@media (min-width: 62rem) {
  .page {
    grid-template-columns: var(--margin-col) minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: var(--col-gap);
  }
  .page > * { grid-column: 2; max-width: none; }
  .page > .wide { grid-column: 2 / 4; }
  .page > .full { grid-column: 1 / -1; }
}

/* ---------- 4. Toppen ---------- */

.site-header {
  border-bottom: var(--rule-w) solid var(--c-rule);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  line-height: var(--leading-ui);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  padding-block: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--c-ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--c-ink); text-decoration: none; }
.wordmark__name {
  font-family: var(--font-serif);
  font-weight: 650;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.wordmark__sub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--c-ink-2);
}

.site-nav { order: 3; flex-basis: 100%; }
@media (max-width: 30rem) {
  /* Smal skjerm: undertittelen under navnet, så språkvalget får plass på samme linje */
  .wordmark { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav ul { column-gap: var(--space-4); }
}
.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}
.site-nav a,
.lang {
  display: inline-block;
  padding-block: var(--space-2);      /* trykkflate minst 24 px høy (WCAG 2.5.8) */
  color: var(--c-ink);
  text-decoration-line: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.site-nav a:hover,
.lang:hover {
  color: var(--c-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--c-rule-strong);
}
.site-nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--c-accent);
  font-weight: 600;
}
.lang { order: 2; color: var(--c-ink-2); }

@media (min-width: 48rem) {
  .site-nav { order: 2; flex-basis: auto; }
  .lang { order: 3; }
}

/* ---------- 5. Bunnen ---------- */

.site-footer {
  border-top: var(--rule-w) solid var(--c-rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: var(--leading-ui);
  color: var(--c-ink-2);
}
.site-footer .wrap {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
}
@media (min-width: 48rem) {
  .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; }
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer a { color: var(--c-ink-2); }
.site-footer a:hover { color: var(--c-ink); }
.site-footer .mono { font-family: var(--font-mono); font-size: var(--step--1); }

/* ---------- 6. Små byggesteiner ---------- */

.mono, time, .meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.meta {
  font-size: var(--step--1);
  line-height: var(--leading-ui);
  color: var(--c-ink-2);
}
.meta a { color: inherit; }

.lede {
  font-size: 1.25rem;
  line-height: 1.5;
}

.muted { color: var(--c-ink-2); }

/* Knapper og handlingslenker */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;                 /* 44 px */
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.button:hover {
  background: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  color: var(--c-on-accent);
  text-decoration: none;
}
.button--quiet {
  background: transparent;
  color: var(--c-accent);
}
.button--quiet:hover {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  color: var(--c-accent-strong);
}

/* «Les mer»-lenke med pil. Pilen er tekst, ikke ikon: den leses som «til». */
.more {
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

/* ---------- 7. Seksjoner på forsiden og faste sider ---------- */

.section {
  padding-top: var(--space-7);
  margin-top: var(--space-7);
  border-top: var(--rule-w) solid var(--c-rule);
}
.section > * + * { margin-top: var(--space-4); }
.section > h2 + * { margin-top: var(--space-5); }

@media (min-width: 62rem) {
  /* Seksjonsnummeret henger i margen: «01», «02» … */
  .section[data-n] { position: relative; }
  .section[data-n]::before {
    content: attr(data-n);
    position: absolute;
    right: calc(100% + var(--col-gap));
    top: calc(var(--space-7) + 0.35em);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--c-ink-2);
  }
}

.intro { padding-top: var(--space-4); }
.intro h1 {
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 21em;
}
.intro > * + * { margin-top: var(--space-5); }
.intro .byline {
  font-family: var(--font-ui);
  font-size: var(--ui-size);
  color: var(--c-ink-2);
}

/* Statusboks: «Status, oktober 2026» */
.status {
  background: var(--c-raised);
  border-left: 3px solid var(--c-accent);
  padding: var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.status h2 {
  font-size: var(--step-0);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0;
}
.status > * + * { margin-top: var(--space-3); }

/* Standard-kort (doktrinen på forsiden) */
.standard-card {
  border: var(--rule-w) solid var(--c-rule-strong);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
}
.standard-card > * + * { margin-top: var(--space-4); }
.standard-card .kicker { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }
.standard-card blockquote {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.35;
  font-style: italic;
}

/* Lenkeliste («Stemmen i min egen kode →» …) */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-top: var(--rule-w) solid var(--c-rule); }
.link-list li:last-child { border-bottom: var(--rule-w) solid var(--c-rule); }
.link-list a { display: block; padding-block: var(--space-3); }

/* ---------- 8. Tidslinje (bakgrunn) ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--rule-w) solid var(--c-rule);
}
.timeline time, .timeline .year {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--c-ink-2);
  padding-top: 0.3em;
}
.timeline h3 { font-size: var(--step-0); }
.timeline p { margin-top: var(--space-1); }
.timeline .link-to-fou { color: var(--c-ink-2); font-style: italic; }
@media (max-width: 30rem) {
  .timeline li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9. Oppføringer (artikler og logg) ---------- */

.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: var(--rule-w) solid var(--c-rule);
}
.entries .entry:last-child { border-bottom: var(--rule-w) solid var(--c-rule); }
.entry__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.entry__title { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.entry__title a { color: var(--c-ink); text-decoration-color: var(--c-rule-strong); }
.entry__title a:hover { color: var(--c-accent-strong); text-decoration-color: currentColor; }
.entry__excerpt { color: var(--c-ink-2); }

/* Formatmerke: «Analyse», «Logg», «Metode» */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.3;
  padding: 0 0.4em;
  border: var(--rule-w) solid var(--c-rule-strong);
  border-radius: var(--radius);
  color: var(--c-ink-2);
}

/* ---------- 10. Dokumenthode (artikkel, doktrine, metode) ---------- */

.doc-head {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: var(--rule-w) solid var(--c-rule);
}
.doc-head > * + * { margin-top: var(--space-4); }
.doc-head .crumbs { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }
.doc-head .crumbs a { color: inherit; }
.doc-head .lede { color: var(--c-ink-2); max-width: 30em; }

/* Metadata som linjer: «5. oktober 2026 · Analyse», «Av …», «Sist oppdatert: …» */
.doc-meta {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
  color: var(--c-ink-2);
}
.doc-meta a { color: inherit; }

/* Metadata som definisjonsliste: Publisert, Revidert, Versjon, Av */
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
}
.facts dt { color: var(--c-ink-2); }
.facts dd { margin: 0; }

@media (min-width: 62rem) {
  .doc-head { grid-column: 1 / -1 !important; display: grid; grid-template-columns: subgrid; }
  .doc-head > * { grid-column: 2 / 4; }
  .doc-head > .doc-meta { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin-top: 0.55rem; }
  .doc-head > .facts { grid-column: 1; grid-row: 1 / span 4; align-self: start; grid-template-columns: minmax(0, 1fr); margin-top: 0.4rem; }
  .doc-head > .facts dd + dt { margin-top: var(--space-3); }
  .doc-head > * + * { margin-top: 0; }
  .doc-head > h1 + * { margin-top: var(--space-4); }
  .doc-head > .crumbs + h1 { margin-top: var(--space-3); }
}

/* ---------- 11. Brødtekst (Markdown blir til dette) ---------- */

.prose > * + * { margin-top: var(--space-4); }
.prose > h2 { margin-top: var(--space-7); }
.prose > h3 { margin-top: var(--space-6); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--space-3); }

.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.4em; }
.prose :is(ul, ol):not([class]) li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--c-ink-2); font-family: var(--font-mono); font-size: 0.9em; }

.prose blockquote {
  margin-inline: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--c-rule-strong);
  font-style: italic;
}

.prose code, .prose kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--c-raised);
  padding: 0.05em 0.3em;
  border-radius: var(--radius);
}

.prose hr { border: 0; border-top: var(--rule-w) solid var(--c-rule); margin-block: var(--space-7); }

/* Daterte revisjonsmerknader øverst i en tekst: en kompakt logg, ikke tre kursive avsnitt */
.revisions {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--c-raised);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
}
.revisions li + li { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--rule-w) solid var(--c-rule); }
.revisions em { font-style: normal; }

/* Innholdsfortegnelse: i margen på bred skjerm, øverst på smal */
.toc { font-family: var(--font-ui); font-size: 0.9375rem; line-height: var(--leading-ui); }
.toc h2 { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600; color: var(--c-ink-2); }
.toc ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.toc li + li { margin-top: var(--space-2); }
.toc a { color: var(--c-ink); text-decoration-color: var(--c-rule-strong); }
@media (min-width: 62rem) {
  /* Ikke klebrig: margen deles med merkingen av påstandstype lenger ned */
  .page > .toc { grid-column: 1; grid-row: 2 / span 20; align-self: start; }
}

/* ---------- 12. Merking av påstandstype ---------- */
/*
  Tre lag: dokumentert (heltrukken strek, fylt kvadrat), slutning (stiplet, halvfylt),
  vurdering (prikket, tomt). Linjestil + form + ord: aldri bare farge (WCAG 1.4.1).
*/
.claim {
  position: relative;
  padding-left: var(--space-5);
  border-left: 3px solid var(--c-ink-2);
}
.claim > * + * { margin-top: var(--space-3); }
.claim[data-claim="slutning"],  .claim[data-claim="inference"]  { border-left-style: dashed; }
.claim[data-claim="vurdering"], .claim[data-claim="assessment"] { border-left-style: dotted; border-left-width: 4px; }

.claim__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
  color: var(--c-ink-2);
}
.claim__label strong { font-weight: 600; color: var(--c-ink); }
.claim__label::before {
  content: "";
  flex: none;
  width: 0.7em; height: 0.7em;
  border: 1.5px solid var(--c-ink);
  background: var(--c-ink);
}
.claim[data-claim="slutning"] .claim__label::before,
.claim[data-claim="inference"] .claim__label::before {
  background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%);
}
.claim[data-claim="vurdering"] .claim__label::before,
.claim[data-claim="assessment"] .claim__label::before { background: transparent; }

@media (min-width: 62rem) {
  .claim__label {
    position: absolute;
    top: 0.3em;
    right: calc(100% + var(--col-gap));
    width: var(--margin-col);
    justify-content: flex-start;   /* i row-reverse betyr det: mot høyre, inntil streken */
    flex-direction: row-reverse;
    text-align: right;
  }
  .claim > .claim__label + * { margin-top: 0; }
}

/* Påstandsforklaring (legend) */
.claim-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }
.claim-key li { display: flex; align-items: center; gap: 0.5em; }
.claim-key li::before { content: ""; width: 0.7em; height: 0.7em; border: 1.5px solid var(--c-ink); background: var(--c-ink); }
.claim-key li[data-claim="slutning"]::before, .claim-key li[data-claim="inference"]::before { background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); }
.claim-key li[data-claim="vurdering"]::before, .claim-key li[data-claim="assessment"]::before { background: transparent; }

/* ---------- 13. Tabeller og registeret ---------- */

.table-scroll {
  overflow-x: auto;
  /* skygge som viser at tabellen fortsetter (ren CSS, ingen JS) */
  background:
    linear-gradient(to right, var(--c-paper) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--c-paper) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--c-ink) 18%, transparent), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--c-ink) 18%, transparent), transparent) right / 0.75rem 100% no-repeat scroll;
}
.table-scroll:focus-visible { outline-offset: 4px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--c-ink-2);
  padding-bottom: var(--space-3);
  caption-side: top;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--rule-w) solid var(--c-rule);
}
thead th {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-ink-2);
  border-bottom: 2px solid var(--c-ink);
}
.register { min-width: 36rem; }
.register td:first-child { font-weight: 600; }

/* Status i registeret: ord + form + farge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.3;
  padding: 0.15em 0.5em;
  border-radius: var(--radius);
  color: var(--c-neutral);
  background: var(--c-neutral-bg);
}
.status-badge::before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; border: 1.5px solid currentColor; }
.status-badge[data-status="byttet"],  .status-badge[data-status="replaced"] { color: var(--c-ok); background: var(--c-ok-bg); }
.status-badge[data-status="byttet"]::before, .status-badge[data-status="replaced"]::before { background: currentColor; }
.status-badge[data-status="star"],    .status-badge[data-status="stays"] { color: var(--c-warn); background: var(--c-warn-bg); }
.status-badge[data-status="star"]::before, .status-badge[data-status="stays"]::before { border-radius: 0; transform: rotate(45deg) scale(0.85); }
.status-badge[data-status="fjernet"], .status-badge[data-status="removed"] { background: transparent; border: var(--rule-w) dashed var(--c-rule-strong); }
.status-badge[data-status="fjernet"]::before, .status-badge[data-status="removed"]::before { border: 0; border-radius: 0; height: 1.5px; background: currentColor; }
.status-badge time { font: inherit; }

/* Teller: én rute per avhengighet. Figuren er pynt for den som ser; tallene står i teksten. */
.tally { display: grid; gap: var(--space-4); }
.tally__numbers { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.tally__numbers b { font-size: var(--step-2); color: var(--c-ink); font-weight: 600; font-family: var(--font-serif); margin-right: 0.25em; }
.tally__grid { display: grid; grid-template-columns: repeat(12, 1.1rem); gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .tally__grid { grid-template-columns: repeat(24, 1.1rem); } }
.tally__grid li { aspect-ratio: 1; border: 1.5px solid var(--c-ink-2); border-radius: 1px; }
.tally__grid li[data-status="byttet"] { background: var(--c-ok); border-color: var(--c-ok); }
.tally__grid li[data-status="star"] { background: var(--c-warn-bg); border-color: var(--c-warn); }
.tally__grid li[data-status="fjernet"] { border-style: dashed; opacity: 0.6; }
.tally__grid li[data-layer="b"] { border-radius: 50%; }
.tally__grid li[data-layer="c"] { transform: rotate(45deg) scale(0.8); }
.tally__grid li[data-layer="d"] { border-style: dotted; }
.tally__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }
.tally__legend li { display: flex; align-items: center; gap: 0.5em; }
.tally__legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border: 1.5px solid var(--c-ink-2); }
.tally__legend i[data-layer="b"] { border-radius: 50%; }
.tally__legend i[data-layer="c"] { transform: rotate(45deg) scale(0.8); }
.tally__legend i[data-layer="d"] { border-style: dotted; }

/* ---------- 14. Doktrinen: standard, tester og versjoner ---------- */

.standard {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 2px solid var(--c-ink);
}
.standard__head > * + * { margin-top: var(--space-3); }
.standard__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); line-height: var(--leading-ui); }
.standard__changes {
  font-size: 1rem;
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
  background: var(--c-raised);
  border-radius: var(--radius);
}
.standard__changes b { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600; display: block; color: var(--c-ink-2); }

/* Prinsipp- og testliste: nummer i mono i margen */
.principles { list-style: none; margin: 0; padding: 0; }
.principles li { padding-block: var(--space-3); border-top: var(--rule-w) solid var(--c-rule); }

/* De fire testene som flyt (HTML, ikke bilde: teksten er ekte og skalerer) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: test; }
.flow li {
  counter-increment: test;
  position: relative;
  padding: var(--space-4);
  border: 1.5px solid var(--c-ink);
  border-radius: var(--radius);
  background: var(--c-paper);
  font-size: 1rem;
  line-height: 1.45;
}
.flow li::before {
  content: "Test " counter(test);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--c-ink-2);
}
.flow__name { font-weight: 650; font-size: var(--step-0); line-height: 1.3; }
.flow p { margin-top: var(--space-2); }
.flow .fail { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink); }
.flow .fail::before { content: "→ "; }
.flow-wrap { container-type: inline-size; margin: var(--space-5) 0; }
.flow-wrap figcaption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }
/* Container query: figuren tilpasser seg spalten den står i, ikke skjermen */
@container (min-width: 30rem) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 52rem) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-5));
    width: var(--space-5);
    border-top: 1.5px solid var(--c-ink);
  }
}

/* SVG-diagrammer: strek og tekst følger tokenene, så mørk modus virker av seg selv */
.diagram { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; color: var(--c-ink); }
.diagram .d-line { stroke: currentColor; stroke-width: 1.5; fill: none; }
.diagram .d-muted { stroke: var(--c-ink-2); }
.diagram .d-accent { stroke: var(--c-accent); fill: var(--c-accent); }
.diagram .d-dot { fill: var(--c-paper); stroke: currentColor; stroke-width: 1.5; }
.diagram .d-dot--now { fill: currentColor; }
.diagram text { font-family: var(--font-mono); font-size: 13px; fill: currentColor; }
.diagram text.d-label-2 { fill: var(--c-ink-2); }
.diagram figcaption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--c-ink-2); }

/* ---------- 15. Skjema ---------- */

.form { display: grid; gap: var(--space-5); font-family: var(--font-ui); font-size: var(--ui-size); line-height: var(--leading-ui); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend, .field > label { font-weight: 600; padding: 0; margin-bottom: var(--space-2); display: block; }
.field { display: grid; }
.field .hint { color: var(--c-ink-2); margin-top: calc(-1 * var(--space-1)); margin-bottom: var(--space-2); font-size: 0.9375rem; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  max-width: 34rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1.5px solid var(--c-rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.form textarea { min-height: 9rem; resize: vertical; font-family: var(--font-serif); font-size: var(--step-0); line-height: var(--leading); }
.form input:hover, .form textarea:hover { border-color: var(--c-ink); }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 0; border-color: var(--c-ink); }
.form input[type="email"] { max-width: 24rem; }
.form input[type="tel"] { max-width: 14rem; }

/* Rollevalg som radioknapper: alle valg synlige, ett trykk (ikke nedtrekksliste) */
.choices { display: grid; gap: var(--space-1); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding-inline: var(--space-2); border-radius: var(--radius); cursor: pointer; }
.choice:hover { background: var(--c-raised); }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-accent); flex: none; }
@media (min-width: 40rem) { .choices { grid-template-columns: repeat(2, minmax(0, 18rem)); } }

/* Feil: tekst først, så farge. Feltet får aria-invalid og aria-describedby. */
.field-error { color: var(--c-err); font-weight: 600; margin-bottom: var(--space-2); display: flex; gap: 0.4em; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--c-err); color: var(--c-paper); font-size: 0.85em; }
.form [aria-invalid="true"] { border-color: var(--c-err); border-width: 2px; }
.error-summary { border: 2px solid var(--c-err); background: var(--c-err-bg); padding: var(--space-4) var(--space-5); border-radius: var(--radius); }
.error-summary h2 { font-family: var(--font-ui); font-size: 1.125rem; }
.error-summary ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.error-summary a { color: var(--c-err); font-weight: 600; }
.notice-ok { border-left: 3px solid var(--c-ok); background: var(--c-ok-bg); color: var(--c-ink); padding: var(--space-4) var(--space-5); }

/* Honningkrukke: skjult for alle, også skjermleser */
.hp { display: none !important; }

/* ---------- 16. Utskrift ---------- */

@media print {
  .site-header nav, .lang, .skip, .site-footer, .form, .toc { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .page { display: block; padding: 0; }
  .claim__label { position: static; justify-content: flex-start; flex-direction: row; text-align: left; }
}