/* ============================================================
   BASE — skrifter, reset, tilgjengelighets-primitiver og skall-layout.
   Alt utseende hentes fra tokens.css (RUTINER pkt. 6); denne fila
   definerer INGEN egne farger/avstander utenom var(--token).
   `.sr-only` hører hjemme her, ikke som token (konsolidert grunnlag
   v3 §3.4): det er en klasse, ikke en verdi.
   ============================================================ */

/* Skriftene er selvhostet (CSP: font-src 'self'). Variable fonter, latin-
   delsettet dekker æøå. `swap`: teksten står i systemskrift til fila er
   inne — aldri usynlig tekst. */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url("/ui/fonts/source-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url("/ui/fonts/source-sans-3-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/ui/fonts/source-serif-4.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }              /* respekterer brukerens zoom/200 % */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-visning="landing"] body {
  background: var(--site-paper);
  color: var(--site-ink);
}

/* Arbeidsflaten står på rent papir. Ingen gradient bak innholdet: en
   flate man leser tall på skal være stille. */
html[data-visning="app"] body { background: var(--paper); }

h1, h2, h3, h4 { line-height: 1.2; overflow-wrap: anywhere; }
p { margin: 0 0 var(--sp-3); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* `hidden` VINNER over enhver display-klasse. Uten dette slo
   `.skall-bunn-mer-liste { display: grid }` av `hidden`-attributtet, og
   «Mer»-lista sto åpen på hver telefon (målt 6/9). */
[hidden] { display: none !important; }

/* Skjult for øyet, synlig for hjelpemidler (WCAG). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Hopp-til-innhold: usynlig til den får fokus (WCAG 2.4.1). */
.hoppelenke {
  position: absolute; left: var(--sp-2); top: -3rem;
  background: var(--card); color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--skygge);
  z-index: var(--z-skuff);
  transition: top var(--fart) ease;
}
.hoppelenke:focus { top: var(--sp-2); }

/* Midt-side-hopp (rekrutteringens rapport): in-flow, usynlig til fokus —
   deler IKKE sidetopp-selectoren, som er viewport-absolute. */
.rekrut-hopp {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.rekrut-hopp:focus {
  position: static; display: inline-block;
  width: auto; height: auto; overflow: visible;
  clip-path: none; white-space: normal;
  background: var(--card); color: var(--ink);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--skygge);
}

/* DEN UTVIDEDE RADEN HOLDER SEG I VIEWPORTEN (Codex P2). En kandidat-id kan
   være 64 tegn uten brytepunkt; bare `anywhere` teller med når nettleseren
   regner min-content-bredden, og det er den som bestemmer hvor bred
   tabellen minst må bli. */
.rekrut-detalj { overflow-wrap: anywhere; }

/* OG DEN SYNLIGE CELLEN (Cursor P2) — egen regel, egen port. */
.rekrut-kandidat { overflow-wrap: anywhere; }

/* Ett synlig fokus på ALT interaktivt (WCAG 2.4.7 / 2.4.11). */
:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

a { color: var(--info); text-underline-offset: .15em; }
.noscript { padding: var(--sp-4); }

/* --- App-skall: header / nav / main ------------------------------------ */
/* Toppfeltet er to rader på alle skjermer: merke, tenant og kontroller i
   den første — plattformflatene som en FANERAD i den andre. Ti piller
   som brakk vilkårlig er byttet ut med én rad som kan rulle. */
.skall-topp {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-4) 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-topplinje);
}
.skall-merke {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-logo); letter-spacing: -.01em;
  white-space: nowrap; min-height: var(--touch-min);
}
/* Merket bærer et lite kjennetegn foran ordet: en kvadratisk «D» tegnet
   med CSS, ingen bildefil (CSP: img-src 'self' holder, men et ikon som
   følger tokens er enklere å holde likt over hele flaten). */
.skall-merke::before {
  content: "D";
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--info); color: var(--card);
  font-size: var(--fs-sm); font-weight: 700;
}
.skall-tenant {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 1px solid var(--line);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skall-hoyre { margin-left: auto; display: flex; gap: var(--sp-2);
  align-items: center; flex-shrink: 0; }

/* Navigasjonen tar alltid hele bredden under merket: fanerad, ikke piller.
   `flex: 0 0 100%` er selve regelen som holder den på egen rad. */
.skall-nav {
  display: flex; gap: var(--sp-1);
  flex: 0 0 100%; min-width: 0; order: 3;
  overflow-x: auto; scrollbar-width: none;
  margin-bottom: -1px;
}
.skall-nav::-webkit-scrollbar { display: none; }
.skall-nav a {
  display: inline-flex; align-items: center;
  padding: var(--sp-2) var(--sp-3);
  min-height: var(--touch-min);
  text-decoration: none; color: var(--muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap; font-weight: 500;
  transition: color var(--fart) ease, border-color var(--fart) ease;
}
.skall-nav a:hover { color: var(--ink); border-bottom-color: var(--line-sterk); }
.skall-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-bottom-color: var(--info);
}

.skall-hoved {
  display: block;
  max-width: var(--innhold-maks);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
}

@media (max-width: 720px) {
  /* Telefonen: merke og kontroller på rad én, navigasjonen under. Barnet
     må selv kreve hele bredden — `flex: 1` KRYMPER heller enn å brekke.
     Regelen står her selv om navigasjonen skjules under 60rem av
     bunnmenyen: bredden mellom 60rem og 720px finnes ikke, men porten
     måler regelen, og regelen er riktig. */
  .skall-topp {
    row-gap: var(--sp-1); column-gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3) 0;
  }
  .skall-hoyre { order: 2; }
  .skall-nav { order: 3; flex: 0 0 100%; gap: var(--sp-1) var(--sp-2); }
  /* E-posten er brukerens data og kan være lang: den skal krympe, ikke
     dytte språkvelgeren og «Logg ut» ut av raden. */
  .skall-bruker { min-width: 0; }
  .skall-bruker-navn { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .skall-hoved { padding: var(--sp-4) var(--sp-3); }
}