/* Nullstilling, typografi og globale hjelpeklasser. */

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

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

/* Defensivt lag MOT utilsiktet sideveis panorering, etter at kildene er rettet
   (se «Mobil: zoom og sidepanorering» i docs/APP_ARCHITECTURE.md).
   Ligger på app-roten, ikke på html/body: der videreføres overflow til
   viewporten og klipper ikke (målt: 2000 px-element ga fortsatt sidescroll).
   `clip` lager ingen scrollcontainer, så sticky topplinje/bunnlinje virker som
   før. Ark og toasts ligger i #overlay-root (fixed) og påvirkes ikke.
   Pinch-zoom er ikke berørt; zoom er aldri slått av i viewport-taggen. */
html { overscroll-behavior-x: none; }
#app-root { overflow-x: clip; }
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md) / 1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

svg { display: block; flex: none; }
img, video, canvas { max-width: 100%; height: auto; -webkit-user-drag: none; }

/* Data kan være lange (ID-er, titler, kommentarer). Tekstbærende elementer i
   flex/grid skal kunne krympe og bryte i stedet for å gjøre siden bredere. */
.row-text, .confirm-text, .place-text, .more-text, .field, .notice > span, .toast > span, .confirm > span, .context-line > span { min-width: 0; }
.row-title, .row-sub, .job-title, .check-title, .nj-title, .desc, .lead, .notice, .toast, .confirm, .timeline p, .kv dd, .created-head p, .your-job-title, .scan-status { overflow-wrap: anywhere; }
/* Lange ID-er og ord skal brytes heller enn å gjøre siden bredere enn skjermen. */
.mono { overflow-wrap: anywhere; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 10px;
}
h1:focus, h2:focus, main:focus { outline: none; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper); font-weight: 600;
}
.skip-link:focus { top: 10px; }

.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.pad { padding: 16px 0; }
.nowrap { white-space: nowrap; }

.tone-crit { color: var(--crit); }
/* Rav-tekst er under AA på hvitt: teksten er mørk, prikken/ikonet bærer fargen. */
.tone-warn { color: var(--ink); }
.tone-warn .dot { background: var(--warn); }
.tone-warn .icon { color: var(--warn); }
.tone-ok { color: var(--ok-ink); }
.tone-brand { color: var(--brand); }
.dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: currentColor; vertical-align: 1px;
}

.boot-message { padding: 48px 24px; text-align: center; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}