/* ============================================================
   LAWO – Base
   Grunnstiler bygd UTELUKKENDE på variablene i tokens.css.
   Ingen harde verdier her – alt refererer var(--…).
   ============================================================ */

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

/* Robust global: hidden-attributtet skal ALLTID skjule. Uten !important kan en
   konkret display-regel (klasse/element) overstyre UA-ens [hidden]{display:none}
   (slik logo-kilde-lenka og feedback-panelet ble synlige). All visende JS i temaet
   fjerner hidden-attributtet for å vise, så !important knekker ingenting. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  background: var(--color-paper);
}

/* ---------- Typografi ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

small, .text-meta {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
}

img { max-width: 100%; height: auto; display: block; }

/* Visuelt skjult, men tilgjengelig for skjermlesere (standard a11y-teknikk). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Konstante etiketter (INTERNAL/CONFIDENTIAL o.l.) ----------
   «Hva flaten ER», ikke tilstand. Dempet — skal LESES, ikke rope. Lik foto-galleriets dempede
   INTERNAL. Metning reservert verifiseringsprikkene. (Ingen display → inline som en tekst-badge.) */
.lawo-etikett {
  background: var(--color-paper-warm);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: var(--fs-200, 0.8rem);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
/* --fare: dempet varselpreg (PII/konfidensielt) — dempet rød TEKST + rød-tonet hårfin ramme, ALDRI rød flate. */
.lawo-etikett--fare {
  color: var(--color-accent);
  border-color: rgba(138, 28, 43, 0.4);
}

/* ---------- Layout-hjelpere ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--text { max-width: var(--container-text); }

/* ---------- Header / footer ---------- */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.site-brand {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
/* «LAWO» som rolig merkenavn: kapitéler + lett sperring, ikke en logo-etterligning. */
.site-brand__mark {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink); /* eksplisitt, så «LAWO» aldri arver lenke-hover-fargen */
}
/* «Classics» i samme familie, lettere vekt og dempet farge. */
.site-brand__name {
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
  color: var(--color-ink-soft);
}
/* Fargestabil wordmark: behold egne farger i normal/hover/fokus – ingen lenke-hover-farge. */
.site-brand:hover,
.site-brand:focus,
.site-brand:focus-visible {
  color: var(--color-ink);
  text-decoration: none;
}
/* Synlig fokus-ring for tastatur-tilgjengelighet (lenkefunksjonen beholdes). */
.site-brand:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 3px;
}

.site-nav ul {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--color-ink);
  font-size: var(--fs-400);
}

.site-search {
  display: flex;
  gap: var(--space-2);
}
.site-search input[type="search"] {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  min-width: 10rem;
}

/* LAWO Classics-merke til høyre i header-en: hvit logo på sort flate i
   LAWO-cover-stil (skarpe hjørner, god kontrast mot lys header). Skaleres
   via CSS-høyde (SVG beholder eget sideforhold med width:auto). */
.site-logo {
  position: relative;
  display: block;
  flex: none;
  align-self: stretch;
  /* Kompenser headerens vertikale padding (.site-header__inner padding-block)
     med negative marginer, så den sorte flaten når kant til kant: flush mot
     toppen av siden og helt ned til bunnlinjen (border-bottom). IKKE rør dette. */
  margin-block: calc(-1 * var(--space-4));
  /* Eksplisitt høyde = headerens innholdshøyde (søk/merke-linjen + padding-block).
     Nødvendig fordi aspect-ratio i en flex-rad bare kan utlede BREDDEN fra en
     definert høyde, ikke fra stretch. 73px holder headeren på 74px (flush topp/bunn). */
  height: 73px;
  /* Merkevarens flate-proporsjon: bredde = høyde × 1.97 (= 144px). SVG-canvaset er
     1.97:1 med glyfen innbakt på 82.6% bredde / 60.3% høyde, vertikalt senter 48.4%
     – object-fit:contain fyller flaten, så glyfen lander på originalens proporsjoner. */
  aspect-ratio: 1.97 / 1;
  min-height: 0;
  background: #000; /* cover-flaten er ren sort – bevisst mørkere enn --color-ink */
}
/* Absolutt-posisjonert så SVG-ens intrinsic høyde IKKE blåser opp flex-høyden
   (da ville headeren vokst til SVG-en). Fyller flaten; canvas-forholdet matcher. */
.site-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Synlig fokus-ring for tastatur-tilgjengelighet (speiler .site-brand). */
.site-logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Steg 1a: valgfri oppgave-overskrift (bold, over teksten). Delt av alle oppgave-flater. */
.oppgave-tittel { display: block; font-weight: 600; }
/* Steg 4a: seksjon-etikett (oppgave knyttet til en spesifikk ramme). */
.oppgave-seksjon-etikett { display: inline-block; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-line); color: var(--color-ink-soft); font-size: .78em; font-weight: var(--fw-medium, 600); text-transform: uppercase; letter-spacing: .02em; }
/* Steg 1b: oppgave-logg (opprettet/løst · dato · hvem). Blokk-linjer, dempet. Delt av alle flater. */
.oppgave-logg__linje { display: block; font-size: var(--fs-200, 0.8rem); color: var(--color-ink-soft); }
/* Steg 1c: forfallsdato. Editerbar (label+input) album/needs-action; read-only visning dropdowns. */
.oppgave-forfall { display: inline-flex; align-items: baseline; gap: var(--space-1); flex-basis: 100%; font-size: var(--fs-200, 0.8rem); color: var(--color-ink-soft); }
.oppgave-forfall__input { font: inherit; font-size: var(--fs-200, 0.8rem); }
.oppgave-forfall--vis { display: block; }
.oppgave-forfall--overdue { color: var(--color-accent); font-weight: 600; }

/* ---------- Synlighets-segment (Public/Unlisted/Hidden) – kun redaktører.
   Bor i base.css fordi den brukes på både single-person og A–Å-arkivet.
   Forfinet pill: ingen harde inner-delelinjer; ●-statusprikk + semantisk aktiv-tint
   per tilstand (data-lawo-person-tilstand). Alt CSS-only — markup/JS urørt. */
.person-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: 999px;               /* pill-container */
  background: var(--color-paper);
}
.person-segment__valg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-300);
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  background: transparent;
  border: 0;                          /* ingen harde delelinjer */
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
}
/* ●-statusprikk: farget per tilstand, vises på ALLE tre (også inaktive) → betydning ved et blikk. */
.person-segment__valg::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-ink-soft);  /* fallback */
  flex: none;
}
.person-segment__valg[data-lawo-person-tilstand="public"]::before { background: var(--color-success, #1f6f43); }
.person-segment__valg[data-lawo-person-tilstand="soft"]::before   { background: #9a6a00; }        /* amber */
.person-segment__valg[data-lawo-person-tilstand="hard"]::before   { background: #9a948a; }        /* dempet grå */
.person-segment__valg:hover { color: var(--color-ink); }
/* Aktiv: subtil tonet bakgrunn i tilstandens semantiske farge (lys tint, IKKE tung brand-rød). */
.person-segment__valg--aktiv { color: var(--color-ink); cursor: default; font-weight: var(--fw-medium, 600); }
.person-segment__valg[data-lawo-person-tilstand="public"].person-segment__valg--aktiv { background: #e6f4ea; color: #185737; } /* grønn tint */
.person-segment__valg[data-lawo-person-tilstand="soft"].person-segment__valg--aktiv   { background: #ecdfae; color: #5f4c0e; } /* amber tint (= person-badge--soft) */
.person-segment__valg[data-lawo-person-tilstand="hard"].person-segment__valg--aktiv   { background: #ececec; color: #4a4a48; } /* grå tint */
.person-segment__valg:disabled { opacity: 0.5; }

.site-footer {
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-line);
  background: var(--color-paper-warm);
  padding-block: var(--space-7);
  color: var(--color-ink-soft);
  font-size: var(--fs-300);
}

/* 6b: diskret login-lenke i footer (kun utlogget) — liten, lavmælt, ikke konkurrer med innholdet. */
.site-footer__login {
  margin-top: var(--space-2);
  font-size: var(--fs-200, 0.8em);
}
.site-footer__login a {
  color: var(--color-ink-soft);
  text-decoration: none;
  opacity: 0.7;
}
.site-footer__login a:hover,
.site-footer__login a:focus {
  opacity: 1;
  text-decoration: underline;
}

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-family: var(--btn-font);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn:hover { text-decoration: none; }

/* NIVÅ 1 — primær: dempet FYLT flate (varm papir), ramme --color-line, tekst --color-ink.
   Én per skjermområde. FARGEDISIPLIN (revidert 2026-09): farge på en handling er tillatt KUN som
   grønt fyll (.btn--success, Nivå 1b) og rødt fyll (.btn--danger, Nivå 3). Aldri aksent-rødt fyll på en
   handling ellers (unntak: .btn--buy, kommersiell CTA). Trafikklys, prikker og badges = tilstand.
   Rød TEKST uten flate = varsel/etikett (.lawo-etikett--fare), aldri en handling. */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}
.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

/* NIVÅ 1b — bekreftende handling: grønt fyll (--color-success). KUN ikke-destruktive handlinger
   der grønn er gjennomtenkt: godkjenning og steg på vei til godkjenning (Kommenter audio, Godkjenn,
   Bekreft) behandles likt. ALDRI på Slett/Fjern/Opphev (Nivå 3). Grønn her betyr «gå», ikke «er i
   orden» — tilstand vises med prikk/pill, ikke med knapp. Maks én per skjermområde, som Nivå 1. */
.btn--success {
  background: var(--color-success);
  color: var(--color-on-accent);
  border-color: var(--color-success);
}
.btn--success:hover {
  background: var(--color-success-hover);
  color: var(--color-on-accent);
}

/* NIVÅ 2 — sekundær: transparent, hårfin ramme, dempet tekst. Husets standard. */
.btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-fg);
}

/* NIVÅ 3 — destruktiv = RØD FLATE, alltid (--color-danger, hvit tekst). Slett/Fjern/Opphev skal se like ut
   overalt (husregel 2026-09-10; erstatter den tidligere «aldri fyll»-regelen og den lokale fare-klassen i person-identitet.css).
   Aldri rød flate på noe som ikke sletter. Rød tekst uten flate = varsel/etikett, ikke handling.
   .foto-admin__knapp--fare/--slett (person.css) bruker samme tokens. */
.btn--danger {
  background: var(--color-danger);
  color: var(--color-on-accent);
  border-color: var(--color-danger);
}
.btn--danger:hover {
  background: var(--color-danger-hover);
  color: var(--color-on-accent);
  border-color: var(--color-danger-hover);
}

/* KOMMERSIELL CTA (offentlig Listen/Buy/Booklet): beholder LAWO-aksent-fyllet. IKKE en
   tilstandsfarge — en merkevare-kjøpsknapp på publikumsflata. Skilt ut fra --primary så intern
   Nivå 1 kan dempes uten å mute den offentlige kjøpsknappen (uendret utseende). */
.btn--buy {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--buy:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* ---------- Enkel responsiv nav ---------- */
@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav ul { gap: var(--space-4); flex-wrap: wrap; }
  /* Samme prinsipp som desktop (eksplisitt høyde → aspect-ratio gir bredden),
     men en lavere flate som får plass ved siden av merket på rad 1. 40px holder
     1.97-forholdet (≈79px bred) og gir en glyf på ~24px – som før, bare i riktig
     proporsjonert flate. img-en arver desktop (absolutt, object-fit:contain). */
  .site-logo { height: 40px; }
  /* Mobil: KUN brand + logo på øverste linje (brand venstre, logo høyre).
     Meny og søk tvinges til egne linjer under (full bredde), så søkefeltets
     min-bredde aldri dytter logoen ut over kanten. */
  .site-nav { order: 3; flex: 1 1 100%; }
  .site-search { order: 4; flex: 1 1 100%; }
  /* LOGO-1280 (05.10): under ~350px var søkeraden (felt min 10rem + knapp = 313px) bredere enn vinduet. La feltet krympe
     (kun når det må — over ~350px er bredden som før). */
  .site-search { min-width: 0; }
  .site-search input[type="search"] { min-width: 0; flex: 0 1 auto; }
}

/* TOPMENY-1024 (2026-09-29): header-raden (merke 195 + meny 482 + søk 313 + logo 144 + 3 gap) er ~1206px
   og krymper ikke → horisontal rulling i hele 641–1253px. To bånd, begge under 1280 (desktop urørt) og over
   ≤640-mobilregelen (urørt):
   • 641–1099: menyen på egen rad under merke/søk/logo (som mobil, men logoen beholder desktop-flaten); søket
     høyrejusteres inntil logoen (margin-left:auto). Søkefeltet krymper i nedre del så rad 1 får plass også med
     klassisk 17px-rullefelt: clamp(5rem, 100vw − 35rem, 13rem) — 13rem ≈ dagens bredde.
     Seksjonsmenyen og docken finnes ikke under 1100px, så den høyere headeren kolliderer ikke med noe.
   • 1100–1279: ÉN rad beholdes (header 75px — seksjonsmenyene er fast-ankret mot den høyden), bare tettere
     gap og smalere søkefelt. Lengre menytekster (f.eks. norsk, LAWO_OFFENTLIG_NO) er IKKE dekket av båndet. */
@media (min-width: 641px) and (max-width: 1099px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { order: 3; flex: 1 1 100%; }
  .site-search { margin-left: auto; }
  .site-search input[type="search"] { width: clamp(5rem, calc(100vw - 35rem), 13rem); min-width: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-header__inner { gap: var(--space-4); }
  .site-nav ul { gap: var(--space-3); }
  .site-search input[type="search"] { width: 8rem; min-width: 0; }
}
/* LOGO-1280 (05.10): intern-menyen har ett punkt mer («Projects», .menu-item--prosjekt, ~80px) enn den offentlige. Raden krymper ikke,
   så logoen sto utenfor vinduet for innloggede ved 1100–1149px (inntil 50px) og 1280–1425px (inntil 77px ved 1280) → horisontal
   rulling på alle sider. Rettet ved årsaken, KUN når Projects-punktet finnes (:has) — den offentlige headeren er uendret i alle bredder:
   • 1100–1179: tettere menyluke + søkefelt som vokser med vinduet (clamp) til båndets 8rem.
   • 1280–1439: søkefeltet vokser med vinduet fra ~7,5rem til dagens bredde (13rem ≈ 207px); luker og logo urørt. ≥ 1440: som før. */
@media (min-width: 1100px) and (max-width: 1179px) {
  .site-header__inner:has(.menu-item--prosjekt) .site-nav ul { gap: var(--space-2); }
  .site-header__inner:has(.menu-item--prosjekt) .site-search input[type="search"] { width: clamp(5.5rem, calc(100vw - 62.7rem), 8rem); min-width: 0; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-header__inner:has(.menu-item--prosjekt) .site-search input[type="search"] { width: clamp(6rem, calc(50vw - 32.5rem), 13rem); min-width: 0; }
}

/* 4a: «Live»-pill (STAFF-ONLY) — vises ved View booklet (single) + på release-kort når
   utgivelsen er offentlig NÅ. Render-helper gater (staff + live); utlogget får aldri markupen.
   STATUSSPRÅK: nøytral chip + fylt ● (live). Metning reservert verifiseringsprikkene. */
.release-live-pill {
  display: inline-block;
  background: var(--color-paper-warm);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--fs-200, 0.8em);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-right: 0.5em; /* pusterom mot tittel (inline foran kort-tittel) / Edit-knapp */
}
.release-live-pill::before { content: "\25CF"; margin-right: 4px; color: var(--color-ink); } /* fylt ● = live */


/* ── Oppgave-kommentartråd (BUILD B) – delt full side + entitetspanel ── */
.oppgave-kommentarer { margin-top: 6px; }
.oppgave-kommentarer__toggle { background: none; border: none; padding: 0; color: var(--color-link, #1f4f7a); cursor: pointer; font-size: .82em; }
/* Steg 2d: kommentar-teller (dempet pille, kun N>0). */
.oppgave-kommentarer__badge { display: inline-block; margin-left: 4px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-line); color: var(--color-ink); font-size: .82em; font-weight: var(--fw-medium, 600); line-height: 1.5; }
/* Steg 3a: oppgave-vedlegg (md/pdf/jpg, INTERN-gated nedlasting). */
.oppgave-vedlegg { margin-top: 6px; }
.oppgave-vedlegg__liste { list-style: none; margin: 0 0 6px; padding: 0; }
.oppgave-vedlegg__rad { display: flex; align-items: baseline; gap: var(--space-2); font-size: .9em; }
.oppgave-vedlegg__lenke { color: var(--color-link, #1f4f7a); text-decoration: none; }
.oppgave-vedlegg__opplast { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: .85em; }
/* Fase 1: lim-inn-skjermdump-sone (delt modul lim-skjermdump.js) */
.oppgave-vedlegg__paste-hint { color: var(--color-ink-soft, #666); font-size: .82em; }
.oppgave-vedlegg__preview img { max-height: 56px; border-radius: 4px; display: block; }
.oppgave-kommentarer__panel { margin-top: 6px; padding-left: 10px; border-left: 2px solid #e2e2e2; }
.oppgave-kommentarer__liste { list-style: none; margin: 0 0 6px; padding: 0; }
.oppgave-kommentar { margin: 0 0 9px; font-size: .9em; }
.oppgave-kommentar__hode { display: block; font-size: .78em; color: #777; }
.oppgave-kommentar__navn { font-weight: 600; color: #333; }
.oppgave-kommentar__tekst { display: block; white-space: pre-wrap; margin: 1px 0; }
.oppgave-kommentar__handlinger { font-size: .78em; }
.oppgave-kommentar__svar, .oppgave-kommentar__slett { background: none; border: none; padding: 0 8px 0 0; cursor: pointer; color: var(--color-link, #1f4f7a); }
.oppgave-kommentar__slett { color: #a33; }
.oppgave-kommentar-ny { display: flex; gap: 6px; margin-top: 4px; }
.oppgave-kommentar-ny__felt { flex: 1; font-family: inherit; font-size: .9em; }

/* COVER-DIM: rød ramme rundt cover som ikke er eksakt 3000×3000 (kun interne flater; attributtet
   emitteres bare for lawo_kan_se_intern). Inset outline → ligger på cover-kanten, følger radius,
   kolliderer ikke med kortenes hover-box-shadow. */
[data-lawo-cover-avvik] { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* ==========================================================================
   MOBIL-OVERFLOW (05.10): ingen horisontal sidescroll for innloggede på smale skjermer (≤ 768 px).
   Alt ligger i denne ene blokka bak max-width: 768px — ingenting endres på bredere skjermer.
   «body » foran hver selektor: reglene skal vinne over komponentfilene (dock, person, catalog,
   utgivelse, intern + innebygde <style>) uansett lasterekkefølge. Siden klippes aldri — det som
   må være bredt, ruller i sin egen boks.
   ========================================================================== */
@media (max-width: 768px) {
  /* Brede interne tabeller (budsjett, regnskap, bunt-forhåndsvisning/-logg, innstillinger, budsjettmal,
     buntoppsett): tabellen er sin egen rullecontainer, så bare tabellen ruller — ikke siden. */
  body .lawo-budsjett__tabell,
  body .lawo-tripletex__tabell,
  body .lawo-gbat__tabell,
  body .lawo-innst__tabell,
  body .lawo-bmal__tabell,
  body .lawo-gbs__tabell { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Banner-pillene (designpakke, Pyramix, budsjett …): tittel + status + pil brytes i stedet for å skyve pila ut. */
  body .lawo-design-pakke__banner { flex-wrap: wrap; row-gap: 2px; }
  body .lawo-design-pakke__banner-tittel { min-width: 0; overflow-wrap: anywhere; }
  body .lawo-design-pakke__banner-status { flex-wrap: wrap; min-width: 0; }
  /* Personsiden: hodet (navn + rollelinje + interne valg) kan krympe i grid-kolonnen; heroen er aldri bredere enn kolonnen. */
  body .person__head-body { min-width: 0; }
  body .person__head-body > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  body .artist-hero { max-width: min(320px, 100%); }
  /* /projects/: telling + filtre ved overskriften brytes. */
  body .archive-head__meta { flex-wrap: wrap; min-width: 0; }
  body .archive-head__filters { white-space: normal; }
  /* Forsendelseskortene i trykk-bestillingen: kolonnen er aldri bredere enn panelet (280px-minimum gjelder bare når det er plass). */
  body .trykk-fs-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  body .trykk-fs-kort { max-width: 100%; box-sizing: border-box; }
  /* /innstillinger/tripletex-bunter/: feltene i buntkortene er aldri bredere enn kortet. */
  body .lawo-gbs__rad label { max-width: 100%; min-width: 0; }
  body .lawo-gbs__rad input[type="text"],
  body .lawo-gbs__rad select { max-width: 100%; box-sizing: border-box; }
  /* /innstillinger/ og /innstillinger/budsjettmal/: ett langt ord i overskriften krymper med vinduet (uendret fra ca. 400 px og opp). */
  body .lawo-innst h1,
  body .lawo-bmal h1 { font-size: min(var(--fs-900), 11vw); overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  /* En pille som brytes over flere linjer får vanlige hjørner. */
  body .lawo-design-pakke__banner { border-radius: 18px; }
}