/* SmartIK — stilark
 *
 * To regler gjelder hele filen:
 *
 * 1. INGEN FARGE UTENFOR EN VARIABEL. Kundens egne farger kommer fra
 *    serveren og settes på :root av app.js. Står det en farge i en
 *    regel her som ikke går gjennom en variabel, er det en feil.
 *
 * 2. INGEN AVSTAND UTENFOR LUFTSKALAEN. Grupper og felter skal ha
 *    luft mellom seg og aldri presse hverandre. Skriv `var(--luft-N)`,
 *    ikke et tall du synes så bra ut akkurat der — se skalaen under
 *    :root. Håndplukkede avstander var grunnen til at teamskjermen
 *    endte med paneler som lå klistret sammen mens nabo­skjermen
 *    hadde 18 px og en tredje 20: ingen av dem var gale hver for seg,
 *    men til sammen fantes det ingen rytme å lese etter.
 *
 *    Gjelder også `stil: {}` i app.js — også der skrives
 *    `var(--luft-N)`.
 */

/* ---------------------------------------------------------------
   Skrifter
 *
 * De ligger på vår egen server, ikke hos Google. Grunnen er ikke
 * hastighet: en <link> til fonts.googleapis.com sender IP-adressen
 * til hver eneste ansatt som åpner appen, til en tredjepart i USA,
 * ved hvert sidevisning. Det er en overføring av personopplysninger
 * vi verken har hjemmel for eller har ført opp i underleverandør-
 * listen i databehandleravtalen.
 *
 * Filene er ikke med i koden — hent dem med klient/hent-skrifter.sh.
 * Mangler de, faller appen tilbake på systemets egne skrifter og
 * virker som før.
 * --------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-display: swap;
  font-weight: 400;
  src: url('/aktiva/skrift/roboto-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-display: swap;
  font-weight: 500;
  src: url('/aktiva/skrift/roboto-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-display: swap;
  font-weight: 700;
  src: url('/aktiva/skrift/roboto-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap;
  /* Filen er ExtraBold — én fast vekt, ikke en variabel skrift.
   * Området er satt vidt nok til at nettleseren aldri prøver å lage
   * sin egen fete variant av en skrift som allerede er fet:
   * syntetisk fet oppå ExtraBold blir grøt. Alle overskrifter
   * bruker 700, som ligger innenfor. */
  font-weight: 600 800;
  src: url('/aktiva/skrift/bricolage-grotesque.woff2') format('woff2');
}
/* ---------------------------------------------------------------
   Fargene, og hvorfor de heter det de heter
 *
 * Et navn som sier hvordan fargen SER UT, slutter å stemme i det
 * øyeblikket det finnes en natt-modus: «--merke-lys» er ikke lys når
 * bakgrunnen er mørk. Navnene sier derfor hvilken ROLLE fargen har:
 *
 *   --merke-flate   flaten et merkevareelement står på
 *   --merke-tekst   teksten som skal kunne leses PÅ den flaten
 *   --merke-kant    kanten rundt den
 *
 * De tre snus i natt-modus. Rollen er den samme; verdien er ikke.
 * Det samme gjelder --flate-mild, --flate-stille og --spor.
 * --------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Merkevare — overskrives per kunde, og regnes ut mot riktig bunn */
  --merke:        #0A5F51;
  --merke-tekst:  #05594A;
  /* Merkefargen som TEKST PÅ HVITT.
   *
   * --merke lysnes om natta for å leses som flate mot en mørk side.
   * Men den valgte brikka i sidemenyen er HVIT i begge moduser, og på
   * hvitt falt den lysnede fargen til 4,43:1 — under kravet. Denne
   * gjør ikke det: den er mørk uansett modus, fordi flaten den står
   * på er lys uansett modus. */
  --merke-dyp:    #095246;
  --merke-flate:  #E2F1EC;
  --merke-kant:   #BEDFD4;
  /* Teksten som står oppå selve merkefargen — i topplinja og på
   * hovedknappen. Hvit i begge moduser: merkefargen endrer seg ikke. */
  --paa-merke:    #FFFFFF;

  /* Grunnfarger */
  --papir:        #F4F2ED;
  --kort:         #FFFFFF;
  --kort-trykk:   #FBFAF8;
  --blekk:        #15181B;
  --blekk-svak:   #4C545B;
  --blekk-svakest:#5F686F;
  --blekk-tomt:   #B9B4AB;
  --kant:         #E0DCD3;
  --kant-svak:    #EFEAE3;
  --felt:         #F1EFE9;
  --spor:         #E8E4DB;
  --knapp-av:     #B6BEC0;

  /* Flater som ligger så vidt av gårde fra kortet: annenhver rad i en
   * tabell, et avvik som er lukket, et kort som er åpent. */
  --flate-mild:   #FEFCFB;
  --flate-stille: #FAF9F6;

  /* Status. Validert for kontrast både mot papir og hvitt. */
  --ok:           #00846E;
  --ok-tekst:     #05594A;
  --vent:         #B07800;
  --vent-tekst:   #6A4B08;
  --vent-flate:   #FBF3E6;
  --vent-flate-mild: #FDF8EF;
  --vent-kant:    #EBD9B4;
  --feil:         #A62F1A;
  --feil-tekst:   #8C2715;
  --feil-tekst-svak: #6A3328;
  --feil-fyll:    #A62F1A;   /* bærer hvit tekst: 6,9:1 */
  --feil-flate:   #F9E6E1;
  --feil-flate-mild: #FCEFEB;
  --feil-kant:    #E7C9C0;

  /* Portalen er vår egen side og skal aldri kunne forveksles med
   * kundens app. Den er mørk i begge moduser — det er poenget. */
  --portal-morke: #1B2430;
  --portal-topp:  #EEF1F4;
  --portal-kant:  #D7DDE4;

  /* Skygge og gjennomskinnelige flater. I natt-modus er skyggen
   * dypere og de lyse sløra svakere — ellers gløder alt. */
  --skygge-stor:  0 12px 32px rgba(21, 24, 27, .16), 0 2px 6px rgba(21, 24, 27, .06);
  --skygge-liten: 0 1px 3px rgba(0, 0, 0, .18);
  --slor:         rgba(255, 255, 255, .12);
  --slor-kant:    rgba(255, 255, 255, .18);
  --slor-sterk:   rgba(255, 255, 255, .92);

  --radius:       14px;
  --radius-liten: 12px;

  /* ---------------------------------------------------------------
     Luft
   *
   * Avstandene sto spredt utover filen som håndplukkede tall: 18 her,
   * 20 der, 0 på teamskjermen fordi klassen som skulle holdt panelene
   * fra hverandre aldri ble skrevet. Resultatet var at hver ny skjerm
   * fant opp sitt eget luftrom, og at grupper presset hverandre.
   *
   * Seks trinn, og de brukes etter HVA som skilles — ikke etter hvor
   * mye plass det tilfeldigvis var:
   *
   *   luft-1  inni et par som hører tett sammen (ikon og tekst)
   *   luft-2  mellom en etikett og feltet den hører til
   *   luft-3  mellom to felter i samme gruppe
   *   luft-4  mellom to grupper inni et panel
   *   luft-5  mellom to paneler
   *   luft-6  mellom to bolker, og inn mot kanten av innholdet
   *
   * Regelen er at avstanden skal VOKSE med hvor langt fra hverandre
   * to ting hører. Er to avstander like store, leses de som like nært
   * beslektet — og da er grupperingen borte uansett hvor pent det ser
   * ut ellers.
   * --------------------------------------------------------------- */
  --luft-1:  6px;
  --luft-2: 10px;
  --luft-3: 16px;
  --luft-4: 24px;
  --luft-5: 28px;
  --luft-6: 40px;

  /* Plass til statuslinje og hjemknapp på telefonen */
  --topp: env(safe-area-inset-top, 0px);
  --bunn: env(safe-area-inset-bottom, 0px);

  /* To familier. Bricolage Grotesque bærer overskriftene; Roboto
   * bærer alt annet, i tre vekter: 400 vanlig, 500 medium, 700 fet.
   *
   * 500 er arbeidshesten. Korttitler, etiketter og måleverdier skal
   * være litt tyngre enn brødteksten uten å rope — en liste med ti
   * utstyrsnavn i helfet blir tung å lese. Stilarket ba før om 600,
   * en vekt vi ikke har filen til; nettleseren løste den til 700 og
   * gjorde hele lista fet. Nå står det 500, som er det som faktisk
   * tegnes.
   *
   * --skrift-tall peker nå på samme familie som brødteksten. Den
   * beholdes likevel som egen variabel, fordi den sier noe annet:
   * «dette er et tall som skal kunne sammenlignes nedover en
   * kolonne». Skal tallene en dag tilbake i en egen skrift, er det
   * denne ene linjen som endres. */
  --skrift: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --skrift-tittel: 'Bricolage Grotesque', var(--skrift);
  --skrift-tall: var(--skrift);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--skrift);
  background: var(--papir);
  color: var(--blekk);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Sifrene skal ha samme bredde overalt. Da står desimaltegnene
     under hverandre i en kolonne med 2,0, −18,0 og 8,5 — som er
     hele grunnen til at måleverdiene er høyrestilt. Tallene lå før
     i en fast bredde-skrift; nå ligger de i Roboto, og da må
     tabellsifrene slås på eksplisitt. */
  font-variant-numeric: tabular-nums;
  /* Kjøkkenpersonale bruker denne med våte eller kalde fingre. Dobbelttrykk
     som zoomer er til hinder, ikke til hjelp. */
  touch-action: manipulation;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--merke); text-decoration: none; }
a:hover { color: var(--merke-tekst); }

/* Tastaturfokus skal være godt synlig. Den som ikke bruker mus,
   skal kunne se hvor hun er. */
:focus-visible {
  outline: 3px solid var(--merke);
  outline-offset: 2px;
  border-radius: 6px;
}

.skjult {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------
   Skjermen
   --------------------------------------------------------------- */
#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  background: var(--papir);
}

.skjerm { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }

.topplinje {
  background: var(--merke);
  color: var(--paa-merke);
  padding: calc(16px + var(--topp)) 20px 18px;
}
.topplinje--avvik { background: var(--feil-fyll); }

.topplinje__rad {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topplinje__sted {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; opacity: .92;
}
.topplinje__sted span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topplinje__dato { font-family: var(--skrift-tall); font-size: 12px; opacity: .85; white-space: nowrap; }
.topplinje h1 {
  margin: 12px 0 0;
  font-family: var(--skrift-tittel);
  font-size: 30px; font-weight: 700; letter-spacing: -.015em;
}
.topplinje p { margin: 3px 0 0; font-size: 14px; opacity: .9; }

/* Lys topplinje med tilbakeknapp */
.tilbakelinje {
  background: var(--kort);
  border-bottom: 1px solid var(--kant);
  padding: calc(var(--luft-3) + var(--topp)) 14px var(--luft-3);
  display: flex; align-items: center; gap: var(--luft-2);
}
.tilbakelinje h1 { margin: 0; font-family: var(--skrift-tittel); font-size: 19px; font-weight: 700; }
.tilbakelinje p { margin: 1px 0 0; font-size: 12px; color: var(--blekk-svakest); }

.knapp-ikon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-liten);
  color: var(--blekk);
}
.knapp-ikon:active { background: var(--felt); }

/* ---------------------------------------------------------------
   Framdrift
   --------------------------------------------------------------- */
.framdrift {
  background: var(--kort);
  border-bottom: 1px solid var(--kant);
  padding: 13px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.framdrift__rad { display: flex; align-items: baseline; justify-content: space-between; }
.framdrift__antall { font-size: 14px; font-weight: 500; }
.framdrift__frist {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--feil-tekst);
}
.framdrift__spor { height: 8px; border-radius: 4px; background: var(--spor); overflow: hidden; }
.framdrift__fylt { height: 8px; border-radius: 4px; background: var(--ok); transition: width .3s ease; }

/* ---------------------------------------------------------------
   Innhold og kort
   --------------------------------------------------------------- */
.innhold {
  flex-grow: 1;
  padding: var(--luft-4) 20px var(--luft-5);
  display: flex; flex-direction: column; gap: var(--luft-3);
  overflow-y: auto;
}

.bolk {
  margin: 4px 0 0;
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-svakest);
}

.kort {
  display: block; width: 100%; text-align: left;
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: inherit;
}
button.kort:active, a.kort:active { background: var(--kort-trykk); }
.kort--gjort { opacity: .62; }
.kort h2 { margin: 11px 0 3px; font-size: 17px; font-weight: 500; }
.kort p  { margin: 0; font-size: 14px; color: var(--blekk-svak); }
.kort__topp { display: flex; align-items: center; gap: 10px; }
.kort__frist { font-family: var(--skrift-tall); font-size: 12px; color: var(--blekk-svakest); margin-left: auto; }

.merkelapp {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  background: var(--felt); color: var(--blekk-svak);
}
.merkelapp--over   { background: var(--feil-flate); color: var(--feil-tekst); }
.merkelapp--gjort  { background: var(--merke-flate); color: var(--merke-tekst); }
.merkelapp--venter { background: var(--vent-flate); color: var(--vent-tekst); }

/* ---------------------------------------------------------------
   Bunnmeny
   --------------------------------------------------------------- */
/* Bunnmenyen bærer kundens merkefarge, som topplinja. To grunner:
 * den er alltid synlig mens man jobber, så det er den flaten som
 * faktisk sier hvem sin app dette er — og på en telefon der fingeren
 * hviler nederst, er den lettere å sikte på når den er en sammen-
 * hengende flate enn når den er hvit på hvitt.
 *
 * Fargen er en variabel. En kunde med rød profil får en rød bunnmeny
 * uten at en eneste linje her endres. */
.bunnmeny {
  background: var(--merke);
  color: var(--paa-merke);
  display: flex; align-items: stretch;
  padding-bottom: calc(6px + var(--bunn));
  position: sticky; bottom: 0;
}
.bunnmeny a, .bunnmeny button {
  flex-grow: 1; min-height: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: none; background: none;
  font-size: 11px; font-weight: 500;
  /* Hvitt, men dempet. Forskjellen på «her er du» og «hit kan du gå»
   * bæres av lysstyrken, ikke av to forskjellige farger — to farger
   * på en merkevareflate blir fort en farge for mye.
   *
   * 0,88 og ikke 0,72: om natta lysnes merkefargen, og hvitt på 72 % av
   * den ga 3,81:1 — under kravet. Dempingen er der fortsatt, den er
   * bare ikke lenger så sterk at teksten blir vanskelig å lese. */
  color: var(--paa-merke); opacity: .88;
}
.bunnmeny [aria-current="page"] { opacity: 1; font-weight: 700; }
.bunnmeny button:active { background: var(--slor); }

/* Streken over det valgte punktet. Den sitter i toppen av knappen,
 * i flukt med kanten av menyen, slik at den leses som en fane. */
.bunnmeny [aria-current="page"]::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%;
  height: 3px; border-radius: 0 0 3px 3px;
  background: var(--paa-merke);
}
.bunnmeny a, .bunnmeny button { position: relative; }

/* ---------------------------------------------------------------
   Måleskjermen
   --------------------------------------------------------------- */
.grenseboks {
  margin: 14px 20px 0;
  background: var(--merke-flate);
  border: 1px solid var(--merke-kant);
  border-radius: var(--radius);
  padding: 12px 14px;
}
/* Brytes når grenseteksten er lang («−18 °C eller lavere»). Da går
   verdien ned på egen linje i stedet for å presse etiketten sammen. */
.grenseboks__rad {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px 10px; flex-wrap: wrap;
}
.grenseboks__navn { font-size: 13px; font-weight: 700; color: var(--merke-tekst); }
.grenseboks__verdi { font-family: var(--skrift-tall); font-size: 17px; font-weight: 500; color: var(--merke-tekst); }
.grenseboks__hjemmel { margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--merke-tekst); opacity: .82; }

.maler { flex-grow: 1; display: flex; flex-direction: column; padding: 0 20px; min-height: 0; }
.maler__felt {
  flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 0;
}
.maler__etikett { font-size: 13px; font-weight: 500; color: var(--blekk-svak); }
.maler__verdi { display: flex; align-items: baseline; gap: 6px; }
.maler__tall {
  font-family: var(--skrift-tall);
  font-size: 68px; font-weight: 500; letter-spacing: -.02em;
  min-width: 150px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.maler__tall--tom { color: var(--blekk-tomt); }
.maler__enhet { font-family: var(--skrift-tall); font-size: 30px; font-weight: 500; color: var(--blekk-svakest); }

/* Minusknappen. Den ligger ved tallet og ikke på tastaturet, fordi
   tastaturet har tolv plasser og alle tolv er i bruk. */
.plussminus {
  width: 52px; height: 52px; flex-shrink: 0;
  align-self: center;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort);
  font-family: var(--skrift-tall); font-size: 26px; font-weight: 500;
  color: var(--blekk-svak);
}
.plussminus[aria-pressed="true"] {
  background: var(--merke); border-color: var(--merke); color: var(--paa-merke);
}
.maler__under { margin: 2px 0 0; font-family: var(--skrift-tall); font-size: 12px; color: var(--blekk-svakest); }

/* Varsel FØR lagring. Den forteller hva som kommer til å skje, men
   avgjør ingenting — serveren gjør vurderingen. */
.maler__hint {
  margin: 0; font-size: 13px; font-weight: 500; text-align: center;
  min-height: 20px;
}
.maler__hint--utenfor { color: var(--feil-tekst); }
.maler__hint--innenfor { color: var(--ok-tekst); }

.tastatur {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding-bottom: 12px;
}
.tastatur button {
  height: 56px; border-radius: var(--radius-liten);
  border: 1px solid var(--kant); background: var(--kort);
  font-family: var(--skrift-tall); font-size: 24px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.tastatur button:active { background: var(--felt); }
.tastatur button.tastatur__slett { background: var(--felt); }

.bunnfelt {
  padding: var(--luft-3) 20px calc(var(--luft-4) + var(--bunn));
  display: flex; flex-direction: column; gap: var(--luft-2);
}

.knapp {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; width: 100%;
  border: none; border-radius: var(--radius);
  background: var(--merke); color: var(--paa-merke);
  font-size: 17px; font-weight: 700;
}
/* En avslått knapp skal fortsatt kunne LESES. Hvit tekst på den
 * grå flaten lå på 1,9:1 — WCAG gjør unntak for avslåtte kontroller,
 * men en knapp der man ikke ser hva som er avslått, er like ubrukelig
 * som ingen knapp. Teksten bærer derfor blekkfargen, ikke merkets. */
.knapp:disabled {
  background: var(--felt); color: var(--blekk-svakest);
  border-color: var(--kant); cursor: default;
}
.knapp--stille {
  background: var(--kort); color: var(--blekk);
  border: 1px solid var(--kant); font-weight: 500; font-size: 14px; min-height: 48px;
}
.knapp--tekst {
  background: none; border: none; color: var(--blekk-svak);
  font-size: 14px; font-weight: 500; min-height: 44px;
}

.finskrift {
  margin: 0; text-align: center;
  font-size: 11.5px; line-height: 1.5; color: var(--blekk-svakest);
}

/* ---------------------------------------------------------------
   Avviksskjermen
   --------------------------------------------------------------- */
.maleboks {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: var(--luft-4) 18px;
}
.maleboks__rad { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.maleboks__navn { margin: 0 0 2px; font-size: 12px; font-weight: 500; color: var(--blekk-svakest); }
.maleboks__stor { margin: 0; font-family: var(--skrift-tall); font-size: 40px; font-weight: 500; color: var(--feil-tekst); line-height: 1; }
.maleboks__liten { margin: 0; font-family: var(--skrift-tall); font-size: 17px; font-weight: 500; color: var(--blekk-svak); line-height: 1.3; }
.maleboks__merknad {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--kant-svak);
  font-size: 12px; color: var(--blekk-svakest); line-height: 1.5;
}

.skala { margin-top: 13px; height: 10px; border-radius: 5px; background: var(--kant-svak); position: relative; }
.skala__innenfor { height: 10px; background: var(--merke-kant); border-radius: 5px 0 0 5px; }
.skala__nal { position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px; background: var(--feil); }
.skala__tekst {
  margin-top: 6px; display: flex; justify-content: space-between;
  font-family: var(--skrift-tall); font-size: 10.5px; color: var(--blekk-svakest);
}

.forslag { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.forslag button {
  min-height: 36px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--kant); background: var(--kort);
  color: var(--blekk-svak); font-size: 13px; font-weight: 500;
}
.forslag button[aria-pressed="true"] {
  border-color: var(--merke); background: var(--merke-flate); color: var(--merke-tekst);
}

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  border: 1px solid var(--kant); border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;   /* under 16px zoomer Safari inn ved fokus */
  background: var(--kort);
  resize: none;
}

.varselstripe {
  display: flex; align-items: center; gap: 10px;
  background: var(--vent-flate); border: 1px solid var(--vent-kant);
  border-radius: var(--radius-liten); padding: 11px 14px;
}
.varselstripe p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--vent-tekst); }
.varselstripe svg { flex-shrink: 0; }

/* ---------------------------------------------------------------
   Min logg
   --------------------------------------------------------------- */
.logg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.logg li {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius-liten); padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.logg__tid { font-family: var(--skrift-tall); font-size: 12px; color: var(--blekk-svakest); padding-top: 2px; flex-shrink: 0; }
.logg__hva { margin: 0; font-size: 14px; font-weight: 500; }
.logg__om  { margin: 2px 0 0; font-size: 13px; color: var(--blekk-svak); }
.logg__om--avvik { color: var(--feil-tekst); }
.logg__om--ok    { color: var(--ok-tekst); }

.forklaring {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 13px 15px;
  display: flex; align-items: flex-start; gap: 10px;
}
.forklaring p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--blekk-svak); }
.forklaring svg { flex-shrink: 0; margin-top: 1px; }

.filtre { display: flex; gap: 7px; }
.filtre button {
  min-height: 36px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--kant); background: var(--kort);
  color: var(--blekk-svak); font-size: 13px; font-weight: 500;
}
.filtre button[aria-pressed="true"] {
  border-color: var(--merke); background: var(--merke-flate);
  color: var(--merke-tekst); font-weight: 700;
}

/* ---------------------------------------------------------------
   Innlogging
   --------------------------------------------------------------- */
.innlogging {
  flex-grow: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 24px calc(24px + var(--bunn));
  gap: 18px;
}
.innlogging__merke {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.innlogging__merke img { max-width: 160px; max-height: 64px; }
.innlogging__navn {
  font-family: var(--skrift-tittel); font-size: 26px; font-weight: 700;
  letter-spacing: -.015em; text-align: center;
}
.innlogging label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.innlogging__hjelp { margin: 0; font-size: 13px; color: var(--blekk-svak); line-height: 1.5; }

.pinprikker { display: flex; justify-content: center; gap: 14px; margin: 6px 0 2px; }
.pinprikk {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--kant); background: var(--kort);
}
.pinprikk--fylt { background: var(--merke); border-color: var(--merke); }

/* ---------------------------------------------------------------
   Beskjeder
   --------------------------------------------------------------- */
.beskjed {
  border-radius: var(--radius-liten); padding: 12px 14px;
  font-size: 14px; line-height: 1.45;
}
.beskjed--feil { background: var(--feil-flate); color: var(--feil-tekst); font-weight: 500; }
.beskjed--ok   { background: var(--merke-flate); color: var(--merke-tekst); font-weight: 500; }
.beskjed--info { background: var(--felt); color: var(--blekk-svak); }

.tomt {
  text-align: center; padding: 40px 20px;
  color: var(--blekk-svakest); font-size: 15px;
}

/* Stripe som forteller at enheten er uten nett. Den er ikke en feil
   — målingene lagres og sendes når nettet er tilbake — så den er
   gul og ikke rød. */
.nettstripe {
  background: var(--vent-flate);
  border-bottom: 1px solid var(--vent-kant);
  color: var(--vent-tekst);
  font-size: 13px; font-weight: 500;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 8px;
}

.laster {
  flex-grow: 1; display: flex; align-items: center; justify-content: center;
  color: var(--blekk-svakest); font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===============================================================
   Eierens skjermbilder
 *
 * Samme farger og samme komponenter som de ansattes, men en annen
 * form: sidestolpe og bredere innhold. Under 900 px legger
 * sidestolpen seg som en stripe på toppen — eieren sjekker ofte
 * dette på telefonen på vei hjem.
 * =============================================================== */

#app.bred { max-width: 1440px; }

.eier {
  display: flex;
  flex-grow: 1;
  min-height: 100dvh;
  min-width: 0;
}

.sidestolpe {
  width: 236px; flex-shrink: 0;
  background: var(--merke); color: var(--paa-merke);
  display: flex; flex-direction: column;
  padding: calc(20px + var(--topp)) 14px 20px;
}
.sidestolpe__merke {
  padding: 0 8px 18px;
  font-family: var(--skrift-tittel);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
}

.sidemeny { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.sidemeny button {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  border: none; background: none; width: 100%; text-align: left;
  color: var(--paa-merke); opacity: .88;
  font-size: 14px; font-weight: 500; min-height: 44px;
}
.sidemeny button[aria-current="page"] {
  background: var(--paa-merke); color: var(--merke-dyp); font-weight: 700;
}
/* Portalen bærer ikke kundens merkefarge — det står i kommentaren over
 * .sidestolpe--portal, og det gjaldt alt UNNTATT denne ene linja. Det
 * valgte punktet arvet kundens farge, og om natta ga den 3,72:1 på den
 * hvite brikka. Nå står den i portalens egen mørke, som er både
 * riktigere og lesbar. */
.sidestolpe--portal .sidemeny button[aria-current="page"] { color: var(--portal-morke); }
.sidemeny__teller {
  margin-left: auto;
  background: var(--feil-fyll); color: var(--paa-merke);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.sidemeny button[aria-current="page"] .sidemeny__teller { background: var(--feil-fyll); }

.sidestolpe__bunn {
  margin-top: auto; padding: 12px 10px 0;
  border-top: 1px solid var(--slor-kant);
  display: flex; align-items: center; gap: 9px;
}
.sidestolpe__runding {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--merke-flate); color: var(--merke-tekst);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.sidestolpe__bunn b { display: block; font-size: 13px; font-weight: 500; }
.sidestolpe__bunn small { display: block; font-size: 11.5px; opacity: .7; }

.eier__hoved { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

/* Tittellinja har kundens lyse merkefarge, ikke hvitt. Den skiller
 * toppen fra innholdet under uten en strek, og den er det samme
 * feltet på hver eneste side — så man ser hvor man er før man leser.
 * Fargen er en variabel: en kunde med rød merkevare får sin egen. */
.eier__topp {
  background: var(--merke-flate); border-bottom: 1px solid var(--merke-kant);
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.eier__topp h1 {
  margin: 0; font-family: var(--skrift-tittel);
  font-size: 27px; font-weight: 700; letter-spacing: -.015em;
}
.eier__topp p { margin: 3px 0 0; font-size: 13.5px; color: var(--merke-tekst); opacity: .85; }

/* Innholdsflaten holder panelene fra hverandre selv. Før dette måtte
 * hver skjerm huske det i en egen wrapper med sin egen gap — og
 * teamskjermen glemte det, så panelene der lå klistret sammen. Nå er
 * det ikke mulig å glemme. */
.eier__innhold {
  flex-grow: 1;
  padding: var(--luft-6) 32px var(--luft-6);
  display: flex; flex-direction: column; gap: var(--luft-5);
}

/* Samme oppførsel for en enkeltspalte. Klassen ble brukt av
 * teamskjermen uten at den fantes i stilarket. */
.smal { display: flex; flex-direction: column; gap: var(--luft-5); }

/* En loddrett stabel av paneler inni en spalte. Fantes før som
 * `stil: { display: flex, flexDirection: column, gap: 20px }` på fem
 * steder, med 20 hvert sted og 18 i containeren rundt — to nesten
 * like avstander som leste som én uryddig. */
.stabel {
  display: flex; flex-direction: column; gap: var(--luft-5); min-width: 0;
}

.knapp--liten {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; width: auto; padding: 0 17px;
  border: none; border-radius: 11px;
  background: var(--merke); color: var(--paa-merke);
  font-size: 14px; font-weight: 500;
}
.knapp--omriss {
  background: var(--kort); color: var(--blekk);
  border: 1px solid var(--kant); font-weight: 500;
}

/* --- Talltavler --- */
.tavler {
  /* 170 px slik at fem tavler får plass på én rad ved siden av
     sidestolpen. Med 210 brakk den femte ned på egen linje. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.tavle {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: 16px; padding: 18px 20px;
}
.tavle__navn { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--blekk-svak); }
.tavle__tall {
  margin: 0; font-family: var(--skrift-tall);
  font-size: 38px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tavle__tall small { font-size: 20px; color: var(--blekk-svakest); font-weight: 500; }
.tavle__under { margin: 13px 0 0; font-size: 12.5px; color: var(--blekk-svakest); }
.tavle__rad { display: flex; align-items: center; gap: 10px; }

/* --- Todelt innhold --- */
.todelt {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--luft-5); align-items: start;
}

.panel {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: 16px; padding: var(--luft-4) 26px;
}
/* Seksjonsoverskriftene er overskrifter og skal stå i tittelskriften,
 * som h1. Kort- og radtitler under gjør det IKKE: de gjentas titalls
 * ganger nedover en liste, og en display-skrift på 15 px i en lang
 * liste er slitsom å lese. Skillet går mellom «overskrift over et
 * område» og «navnet på en ting i en liste». */
.panel h2 {
  margin: 0 0 4px;
  font-family: var(--skrift-tittel);
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
}
/* Ingressen under en paneloverskrift hører til overskriften, ikke til
 * det som kommer etter — derfor tett opp, og luft under. */
.panel h2 + p {
  margin: 0 0 var(--luft-4); font-size: 13px; line-height: 1.55;
  color: var(--blekk-svakest);
}
.panel h2.senere { margin-top: var(--luft-5); }

.radliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--luft-2); }
.radliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--kant-svak);
  border-radius: 12px;
}
.radliste li.mangler { border-color: var(--vent-kant); background: var(--vent-flate); }
.radliste__tekst { flex-grow: 1; min-width: 0; }
.radliste__tekst b { display: block; font-size: 14px; font-weight: 500; }
.radliste__tekst small { display: block; font-size: 12.5px; color: var(--blekk-svakest); }

.strekliste { list-style: none; margin: 0; padding: 0; }
.strekliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--kant-svak);
  font-size: 13.5px;
}
.strekliste li:last-child { border-bottom: none; }
.strekliste__tid {
  font-family: var(--skrift-tall); font-size: 12.5px;
  color: var(--blekk-svakest); width: 46px; flex-shrink: 0;
}
.strekliste__hva { flex-grow: 1; min-width: 0; }
.strekliste__av { font-size: 12.5px; color: var(--blekk-svakest); flex-shrink: 0; }
.verdi { font-family: var(--skrift-tall); font-weight: 500; }
.verdi--ok { color: var(--ok-tekst); }
.verdi--feil { color: var(--feil-tekst); }
.verdi--ukjent { color: var(--vent-tekst); font-family: var(--skrift); font-size: 12.5px; }

.avvikskort {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--feil-kant); background: var(--feil-flate);
  border-radius: 12px; padding: 15px 16px; color: inherit;
}
.avvikskort h3 { margin: 11px 0 4px; font-size: 15px; font-weight: 700; }
.avvikskort p { margin: 0; font-size: 13px; color: var(--feil-tekst-svak); line-height: 1.5; }
.avvikskort__topp { display: flex; align-items: center; gap: 8px; }
.merkelapp--alvor {
  background: var(--feil-fyll); color: var(--paa-merke);
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.avvikskort__frist {
  font-family: var(--skrift-tall); font-size: 11.5px;
  color: var(--feil-tekst); margin-left: auto;
}

/* --- Hendelseslogg --- */
.tidslinje { list-style: none; margin: 0; padding: 0; }
.tidslinje li { display: flex; gap: 14px; padding-bottom: 18px; }
.tidslinje li:last-child { padding-bottom: 0; }
.tidslinje__spor { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.tidslinje__prikk {
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--felt); color: var(--blekk-svak);
}
.tidslinje__prikk--feil { background: var(--feil-flate); color: var(--feil-tekst); }
.tidslinje__prikk--ok   { background: var(--merke-flate); color: var(--merke-tekst); }
.tidslinje__strek { width: 2px; flex-grow: 1; background: var(--kant-svak); margin-top: 6px; }
.tidslinje li:last-child .tidslinje__strek { display: none; }
.tidslinje__tekst { padding-top: 3px; min-width: 0; }
.tidslinje__tekst b { display: block; font-size: 14px; font-weight: 500; }
.tidslinje__tekst q {
  display: block; margin-top: 3px; font-size: 13px;
  color: var(--blekk-svak); line-height: 1.5;
}
.tidslinje__tekst small { display: block; margin-top: 2px; font-size: 13px; color: var(--blekk-svakest); }

/* --- Fakta --- */
.fakta { margin: 0; display: flex; flex-direction: column; gap: 13px; }
.fakta dt { font-size: 12px; font-weight: 500; color: var(--blekk-svakest); }
.fakta dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.fakta dd.tall { font-family: var(--skrift-tall); font-size: 15px; }

/* --- Rapportvelger --- */
.periode { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.periode label { display: block; font-size: 12px; font-weight: 500; color: var(--blekk-svak); margin-bottom: 4px; }
.periode input {
  width: auto; min-width: 150px; min-height: 44px;
}

@media (max-width: 900px) {
  .eier { flex-direction: column; }
  .sidestolpe {
    width: auto; flex-direction: row; align-items: center;
    gap: 12px; padding: calc(10px + var(--topp)) 14px 10px;
    overflow-x: auto;
  }
  .sidestolpe__merke, .sidestolpe__bunn { display: none; }
  .sidestolpe .nedtrekk__tekst small { display: none; }

  /* Avdelingsvelgeren krympet til NULL piksler her. Menypunktene har
   * «white-space: nowrap» og gir seg ikke, så flex tok all plassen fra
   * den ene tingen som kunne krympe. Igjen sto en tom, blek pille
   * klemt inntil første menypunkt — en kontroll som ikke viser noe, og
   * som så ut til å ligge oppå naboen.
   *
   * Den skal ikke gi seg. Stolpen ruller allerede vannrett, og en meny
   * man må dra litt på er bedre enn en velger man ikke kan lese. */
  .sidestolpe .nedtrekk { flex: 0 0 auto; min-width: 150px; max-width: 230px; }

  /* 4 px mellom to knapper er under det laveste trinnet i luftskalaen
   * (--luft-1 er 6). Det var et håndplukket tall, og det bryter regelen
   * fra 2br: ingen avstand utenfor skalaen. Stående har menyen 2 px
   * fordi punktene ligger UNDER hverandre og leses som en liste;
   * vannrett står de ved siden av hverandre og trenger et skille. */
  .sidemeny { margin-top: 0; flex-direction: row; gap: var(--luft-2); }
  .sidemeny button { white-space: nowrap; padding: 8px 14px; }
  .eier__topp, .eier__innhold { padding-left: 20px; padding-right: 20px; }
  .todelt { grid-template-columns: minmax(0, 1fr); }
}

/* ===============================================================
   Nedtrekkslister
 *
 * Avrundede hjørner hele veien — på knappen, på panelet og på hvert
 * valg. Det er grunnen til at dette ikke er et <select>: lista i et
 * <select> tegnes av operativsystemet, og CSS når ikke inn i den.
 * =============================================================== */
.nedtrekk { position: relative; min-width: 0; }

/* En etikett hører til feltet UNDER seg. Den skal derfor ligge tett
 * på sitt eget felt (luft-2) og ha ordentlig luft opp til det
 * forrige (luft-4) — ellers leses den som en avslutning på feltet
 * over i stedet for som en overskrift på det neste. */
.nedtrekk__etikett {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--blekk-svak); margin-bottom: var(--luft-2);
}

.nedtrekk__knapp {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--kant);
  border-radius: var(--radius-liten);
  background: var(--kort); color: inherit;
  text-align: left;
}
.nedtrekk__knapp:disabled { opacity: 1; cursor: default; }
.nedtrekk__knapp[aria-expanded="true"] {
  border-color: var(--merke);
  box-shadow: 0 0 0 3px var(--merke-flate);
}
.nedtrekk__tekst { min-width: 0; flex-grow: 1; }
.nedtrekk__tekst b {
  display: block; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nedtrekk__tekst small { display: block; font-size: 11.5px; opacity: .72; }
.nedtrekk__knapp > svg:last-child { flex-shrink: 0; opacity: .7; }

.nedtrekk__liste {
  position: absolute; z-index: 40;
  top: calc(100% + 6px); left: 0;
  /* Bredden følger innholdet, men aldri smalere enn knappen. Lista
     ligger i sidestolpen, som er smal — navnene skal ikke brekke. */
  min-width: 100%; width: max-content; max-width: min(340px, 82vw);
  margin: 0; padding: 6px;
  /* Egen tekstfarge, ikke arvet. I sidestolpen er teksten hvit, og
     panelet har hvit bakgrunn — uten denne linjen blir valgene
     usynlige der. */
  color: var(--blekk);
  list-style: none;
  max-height: 320px; overflow-y: auto;
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge-stor);
}
.nedtrekk__liste[hidden] { display: none; }

.nedtrekk__valg {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  border-radius: 10px;          /* også hvert valg */
  cursor: pointer;
}
.nedtrekk__valg[data-peker] { background: var(--felt); }
.nedtrekk__valg[aria-selected="true"] { color: var(--merke-tekst); }
.nedtrekk__valg[aria-selected="true"] b { font-weight: 700; }
.nedtrekk__valgtekst { min-width: 0; flex-grow: 1; }
.nedtrekk__valgtekst b { display: block; font-size: 14px; font-weight: 500; }
.nedtrekk__valgtekst small { display: block; font-size: 12px; color: var(--blekk-svakest); }
.nedtrekk__valg > svg { flex-shrink: 0; color: var(--merke); }

/* I sidestolpen står nedtrekket på merkefargen */
.sidestolpe .nedtrekk__knapp {
  background: var(--slor);
  border-color: var(--slor-kant);
  color: var(--paa-merke); min-height: 52px;
  border-radius: 11px;
}
.sidestolpe .nedtrekk__knapp[aria-expanded="true"] {
  border-color: var(--slor-sterk);
  box-shadow: 0 0 0 3px var(--slor);
}

/* Et ekte <select>, om det skulle dukke opp et sted: samme form.
   Lista i den tegnes av systemet og kan ikke rundes — bruk nedtrekk()
   der lista faktisk skal se ut som resten. */
select {
  min-height: 48px; padding: 8px 36px 8px 12px;
  border: 1px solid var(--kant);
  border-radius: var(--radius-liten);
  background: var(--kort)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B747C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  appearance: none;
}

/* Datofelt får samme form som resten */
input[type="date"] {
  border: 1px solid var(--kant);
  border-radius: var(--radius-liten);
  background: var(--kort);
  padding: 10px 12px;
}

/* Tids- og datokolonnene ble for smale da formatet ble utvidet
   til HH:MM:SS og DD.MM.YYYY. */
.strekliste__tid { width: 68px; }
.strekliste__tid--dato { width: 86px; }

/* ===============================================================
   Rapporten på skjerm
 *
 * Samme gruppering som i PDF-en: datoen står én gang per dag, ikke
 * på hver rad, og avvikene får plass til hele setningen.
 * =============================================================== */
.gruppeband {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 18px 0 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--felt);
  font-size: 13px;
}
.gruppeband b { font-weight: 700; }
.gruppeband span { font-size: 12.5px; opacity: .85; }
.gruppeband--vent { background: var(--vent-flate); color: var(--vent-tekst); }
.gruppeband--feil { background: var(--feil-flate); color: var(--feil-tekst); }
.gruppeband--ok   { background: var(--merke-flate); color: var(--merke-tekst); }

.gruppetittel {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 10px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blekk-svak);
}
.gruppetittel__prikk { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.rapportavvik {
  border: 1px solid var(--kant);
  border-left: 4px solid var(--kant);
  border-radius: var(--radius-liten);
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--flate-mild);
}
.rapportavvik--lukket { background: var(--flate-stille); }
.rapportavvik__topp {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rapportavvik__topp b { font-size: 15px; font-weight: 700; flex-grow: 1; min-width: 0; }
.rapportavvik__spor {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--blekk-svakest);
}
.rapportavvik__felt {
  display: flex; gap: 12px; margin-top: 9px;
  align-items: baseline;
}
.rapportavvik__felt > span {
  flex-shrink: 0; width: 88px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--blekk-svakest);
}
.rapportavvik__felt p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--blekk-svak); }

/* Under 560 px stables etiketten over teksten */
@media (max-width: 560px) {
  .rapportavvik__felt { flex-direction: column; gap: 2px; }
  .rapportavvik__felt > span { width: auto; }
}

/* Strekliste med to linjer per rad */
.strekliste__hva small { font-size: 12px; margin-top: 1px; }
.strekliste li { align-items: flex-start; }
.strekliste__tid { padding-top: 1px; }

/* På smal skjerm får ikke tid, innhold og navn plass på én linje.
   Navnet flyttes ned under innholdet i stedet for å klemmes inn. */
@media (max-width: 560px) {
  .strekliste li { flex-wrap: wrap; }
  .strekliste__hva { flex-basis: calc(100% - 80px); }
  .strekliste__av {
    flex-basis: 100%;
    padding-left: 80px;
    margin-top: 2px;
  }
}

/* ---------------------------------------------------------------
   Rapportens to listeseksjoner
 *
 * Samme oppbygning som i PDF-en: dag → rutine → punkter for de
 * manglende, og en rad med prikk og høyrejusterte tall for
 * målingene.
 * --------------------------------------------------------------- */
.bolkband {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  /* Et bånd innleder en ny bolk. Det trenger mer luft OVER seg enn
   * under: under står det som hører til det. */
  margin: var(--luft-4) 0 var(--luft-1);
  /* Venstrekanten er 29px = 12 (innrykk) + 7 (prikk) + 10 (mellomrom),
   * altså nøyaktig der teksten i punktene under starter. Rutinenavnet
   * og punktene skal stå på samme loddrette linje; gjør de ikke det,
   * ser punktene ut til å høre til noe annet enn rutinen over dem.
   * Samme regel gjelder i PDF-en — se bolkhode() i pdf.js. */
  padding: 6px 12px 6px 29px;
  border-radius: 6px;
  background: var(--vent-flate-mild);
  font-size: 12.5px;
}
.bolkband b { font-weight: 700; color: var(--blekk-svak); }
.bolkband span { font-size: 12px; font-weight: 700; }
.bolkband--vent { color: var(--vent-tekst); }

.prikk {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; margin-top: 7px;
  background: var(--blekk-svakest);
}
.prikk--ok   { background: var(--ok); }
.prikk--feil { background: var(--feil); }
.prikk--vent { background: var(--vent); }

.prikkliste { list-style: none; margin: 0; padding: 0; }
.prikkliste li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 5px 12px;
  font-size: 13.5px; line-height: 1.45;
}

/* En dag i rapporten. Punktene under et dagband har ingen egen
 * bakgrunn, og avstanden alene er for svak til å vise hvor én dag
 * slutter og den neste begynner. Streken står MELLOM dagene — aldri
 * over den første; en strek uten noe over seg er en kant, og da ser
 * lista ut som en boks. Samme regel i PDF-en, se skillelinje i pdf.js. */
.dagbolk + .dagbolk {
  border-top: 1px solid var(--kant);
  margin-top: 14px;
  padding-top: 4px;
}

/* --- Kolonneoverskrift over målingene ---
 * Den er en etikett, ikke en rad: lys, liten og med luft mellom
 * tegnene. Den hadde en strek under seg i PDF-en, rett under streken
 * fra seksjonstittelen, og to streker med fire ord imellom ser ut som
 * en tabell som har mistet resten av seg. Det fargede dagbandet rett
 * under gjør jobben streken skulle gjort. */
.malehode {
  display: grid;
  grid-template-columns: 7px 62px minmax(0, 1fr) 78px 122px 96px minmax(0, 104px);
  gap: 14px; align-items: baseline;
  padding: 0 12px 6px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--blekk-svakest); opacity: 0.75;
  /* «Godkjent område» er det lengste navnet og brøt over to linjer i
   * en 108 px kolonne. En overskrift på to linjer over en kolonne med
   * én linje ser ut som en feil. Den får heller kuttes. */
  white-space: nowrap;
}
.malehode span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Bare Målt er høyrestilt — se kommentaren over kolonnene i
 * rapport.js. Tre høyrestilte kolonner på rad gir tre ujevne
 * venstrekanter, og da finner ikke øyet kolonnene i det hele tatt. */
.malehode span:nth-child(4) { text-align: right; }

/* --- Målingsrader --- */
.malerader { list-style: none; margin: 0; padding: 0; }
.malerader li {
  display: grid;
  grid-template-columns: 7px 62px minmax(0, 1fr) 78px 122px 96px minmax(0, 104px);
  gap: 14px; align-items: baseline;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.malerader li:nth-child(even) { background: var(--flate-stille); }
.malerader li.malerad--utenfor { background: var(--feil-flate-mild); }

.malerad__tid    { font-family: var(--skrift-tall); font-size: 12px; color: var(--blekk-svakest); }
.malerad__utstyr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.malerad__verdi  { font-family: var(--skrift-tall); font-weight: 500; text-align: right; }
.malerad__grense { font-family: var(--skrift-tall); font-size: 12px; color: var(--blekk-svakest); }
.malerad__utenfor{
  font-family: var(--skrift-tall); font-size: 12px; font-weight: 500;
  color: var(--feil-tekst);
}
.malerad__av { font-size: 12.5px; color: var(--blekk-svakest);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Under 720 px blir sju kolonner for mye. Tid og verdi står øverst,
   resten legger seg under — men rekkefølgen er den samme, slik at
   den som kjenner den brede visningen finner seg igjen. */
@media (max-width: 720px) {
  .malerader li {
    grid-template-columns: 7px 62px minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  /* Radene stables; da er det ingen kolonner igjen å sette navn på. */
  .malehode { display: none; }
  .malerad__grense { grid-column: 3 / 5; text-align: left; font-size: 11.5px; }
  .malerad__utenfor { grid-column: 3 / 5; text-align: left; }
  .malerad__av { grid-column: 3 / 5; }
}

/* ---------------------------------------------------------------
 * Utstyr og grenser
 *
 * Grensen er det viktigste tallet på skjermen — det er den
 * målingene vurderes mot. Den står derfor i tallskriften, til
 * høyre, med samme vekt som en måleverdi i rapporten.
 * --------------------------------------------------------------- */
.utstyrsrad {
  display: flex; flex-direction: column; gap: var(--luft-1);
  padding: var(--luft-3) 16px;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort);
  margin-top: var(--luft-2);
}
.utstyrsrad--ute { opacity: .62; }

.utstyrsrad__hoved { display: flex; align-items: baseline; gap: 16px; }
.utstyrsrad__navn { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.utstyrsrad__navn b     { font-size: 15px; font-weight: 500; }
.utstyrsrad__navn small { font-size: 12.5px; color: var(--blekk-svakest); }

/* Grensen og knappen skyves ut til høyre med margin-left: auto, ikke
 * med flex-grow på navnet. Navnet er den eneste teksten som kan bli
 * lang, og den skal få all plassen som blir til overs — ellers
 * brytes «Kjøleskap / kjølerom» over to linjer midt i en rad. */
.utstyr__grense {
  margin-left: auto;
  font-family: var(--skrift-tall); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
/* .knapp er full bredde som standard — den er bygget for en tommel
 * på et nettbrett. Inne i en rad må den være så bred som teksten,
 * ellers spiser den hele raden og navnet klemmes til null. */
.utstyrsrad__hoved .knapp { width: auto; flex-shrink: 0; padding: 4px 6px; }

/* Er grensen svakere enn standarden, står grunnen rett under tallet.
 * Ikke i en fotnote, ikke bak et klikk: det er nettopp dette
 * Mattilsynet spør om, og det eieren selv har glemt om et år. */
.utstyr__avvikende {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--vent-flate); border: 1px solid var(--vent-kant);
  border-radius: 8px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.45; color: var(--vent-tekst);
}
.utstyr__avvikende b { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.utstyr__avvikende svg { flex-shrink: 0; }

.utstyr__satt { margin: 0; text-align: left; }

.utstyrsskjema {
  display: flex; flex-direction: column; gap: var(--luft-4);
  margin: var(--luft-3) 0 var(--luft-1);
  padding: var(--luft-4);
  border: 1px solid var(--merke-kant); border-radius: var(--radius-liten);
  background: var(--merke-flate);
}
/* Et felt med etikett er ÉN ting: etiketten bærer selv avstanden ned
 * til feltet sitt (margin-bottom), og foreldrenes gap skiller
 * gruppene. Her sto det en gang en regel som gjorde HVER div til en
 * flex-kolonne — den kollapset rutenettene inni skjemaet, så «Hvem»
 * og «Dato» la seg under hverandre i stedet for ved siden av. */
/* Hjelpetekstene under feltene er venstrestilt. .finskrift er
 * midtstilt som standard — den brukes ellers under et helt kort —
 * men i et skjema hører den til feltet rett over, ikke til boksen. */
.utstyrsskjema .finskrift { text-align: left; }
.utstyrsskjema label {
  font-size: 12.5px; font-weight: 700; color: var(--blekk-svak);
  margin-bottom: var(--luft-2);
}
.utstyrsskjema__grenser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-3); }
.utstyrsskjema__grenser > div { display: flex; flex-direction: column; gap: 0; }
.utstyrsskjema__grenser input { font-family: var(--skrift-tall); }
.utstyrsskjema__knapper { display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap; }
.utstyrsskjema__knapper .knapp--tekst { width: auto; white-space: nowrap; }

/* Hjemmelsfeltene dukker opp i det øyeblikket grensen blir svakere
 * enn standarden, og forsvinner igjen om eieren strammer inn. De
 * står ikke der hele tiden: da ville de lest som noe man alltid
 * måtte fylle ut, og folk fyller ut slike felt med «ok». */
.hjemmelsboks {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--vent-flate); border: 1px solid var(--vent-kant);
  border-radius: 10px; padding: 13px;
}
.hjemmelsboks[hidden] { display: none; }
.hjemmelsboks__hvorfor {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--vent-tekst);
}

.utstyrslogg li { align-items: flex-start; }
.utstyrslogg b     { display: block; font-size: 13px; font-weight: 500; }
.utstyrslogg small { font-size: 12px; color: var(--blekk-svakest); }

@media (max-width: 560px) {
  /* Navn og grense på én linje, knappen på neste — men helt ut til
     høyre, ikke midt i ingenmannsland under navnet. */
  .utstyrsrad__hoved { flex-wrap: wrap; }
  .utstyrsrad__hoved .knapp { margin-left: auto; }
  .utstyrsskjema__grenser { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
 * Plattformportalen
 *
 * Den skal se ut som vår side, ikke kundens. Sidestolpen er mørkere
 * og bærer ikke kundens merkefarge — står man i portalen, skal det
 * være umulig å tro at man står i en kundes egen app.
 * --------------------------------------------------------------- */
.sidestolpe--portal { background: var(--portal-morke); }
.portalmerke {
  margin: 0 8px 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--slor);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  align-self: flex-start;
}
.eier__topp--portal { background: var(--portal-topp); border-bottom-color: var(--portal-kant); }
.eier__topp--portal p { color: var(--blekk-svak); opacity: 1; }

.talltavle {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tallkort {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: 14px 16px;
}
.tallkort__navn { font-size: 12.5px; font-weight: 500; color: var(--blekk-svakest); }
.tallkort__tall {
  font-family: var(--skrift-tall); font-size: 26px; font-weight: 500;
  letter-spacing: -.02em;
}
.tallkort__tall--feil { color: var(--feil-tekst); }
.tallkort__tall--vent { color: var(--vent-tekst); }

.kundekort {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; text-align: left;
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius-liten);
  padding: 13px 15px; margin-top: 10px;
  color: inherit;
}
.kundekort:active { background: var(--kort-trykk); }
.kundekort__hoved { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kundekort__navn { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.kundekort__navn b     { font-size: 15.5px; font-weight: 500; }
.kundekort__navn small { font-size: 12.5px; color: var(--blekk-svakest); }

/* Tallene under navnet er signalene, ikke pynt. De står i
 * tallskriften slik at de kan sammenlignes nedover lista. */
.kundekort__tall {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--skrift-tall); font-size: 12px;
  color: var(--blekk-svakest);
}
.kundekort__stille { color: var(--vent-tekst); font-weight: 500; }

.faktaliste {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 20px; margin: 0;
}
.faktaliste dt { font-size: 12.5px; font-weight: 700; color: var(--blekk-svakest); }
.faktaliste dd { margin: 0; font-size: 14px; }

@media (max-width: 560px) {
  .faktaliste { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .faktaliste dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------
 * Bilder på et avvik
 *
 * Miniatyrene er små med vilje: de skal si «her er det et bilde»,
 * ikke ta over siden. Trykk åpner bildet i full størrelse.
 * --------------------------------------------------------------- */
.bilder {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
}
.bilder:empty { display: none; }

.bilde { margin: 0; position: relative; }

/* Flaten holder plassen mens bildet lastes, med bildets eget
 * forhold, slik at lista ikke hopper når bildene kommer inn. */
.bilde__flate {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--felt);
  display: flex; align-items: center; justify-content: center;
}
.bilde__flate a { display: block; width: 100%; height: 100%; }
.bilde__flate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bilde__borte {
  font-size: 11.5px; color: var(--blekk-svakest); text-align: center; padding: 8px;
}

.bilde figcaption {
  margin-top: 5px; font-size: 11px; line-height: 1.4;
  color: var(--blekk-svakest);
  display: flex; flex-direction: column;
}
.bilde figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sletteknappen ligger oppå bildet, men er liten og lys. Den skal
 * kunne treffes med en tommel, ikke oppdages ved et uhell. */
.bilde__slett {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--slor-sterk); color: var(--blekk-svak);
  box-shadow: var(--skygge-liten);
}
.bilde__slett:hover { color: var(--feil-tekst); }

.bilder__status {
  margin: 10px 0 0; font-size: 12px; color: var(--blekk-svakest);
}

/* Kameraknappen er full bredde på telefon — den trykkes med hansker
 * på, av noen som står foran et kjøleskap. */
.maleboks .knapp--omriss { width: 100%; }

/* ---------------------------------------------------------------
   Natt
 *
 * Ikke en omvendt dag. Tre ting er annerledes enn en ren inversjon:
 *
 * 1. Bunnen er ikke svart. Ren svart bak hvit tekst gir en hard kant
 *    som flimrer på en OLED-skjerm, og et kjøkken er sjelden helt
 *    mørkt. #14171A er mørk nok til å hvile øyet og lys nok til at
 *    kortene kan løftes fra den.
 *
 * 2. Kortene løftes med lys, ikke med skygge. En skygge på mørk bunn
 *    er usynlig, så det som ligger nærmest leseren er LYSEST.
 *
 * 3. Statusfargene blir lysere, ikke mørkere. Rødt på mørk bunn må
 *    opp i lyshet for å nå samme kontrast som mørk rødt på lys bunn.
 *    Et avvik skal ikke bli vanskeligere å se om natta.
 * --------------------------------------------------------------- */
:root[data-tema="natt"] {
  color-scheme: dark;

  --papir:        #14171A;
  --kort:         #1D2125;
  --kort-trykk:   #272C31;
  --blekk:        #E9ECEE;
  --blekk-svak:   #B4BBC1;
  --blekk-svakest:#8E969D;
  --blekk-tomt:   #5B636A;
  --kant:         #333A40;
  --kant-svak:    #272C31;
  --felt:         #23282D;
  --spor:         #333A40;
  --knapp-av:     #3B4248;

  --flate-mild:   #22272B;
  --flate-stille: #1A1E22;

  /* Kontrasten mot --papir er regnet: alle ligger over 4,5:1. */
  --ok:           #2FAD91;
  --ok-tekst:     #6FD9BF;
  --vent:         #D79B22;
  --vent-tekst:   #F0C978;
  --vent-flate:   #2B2417;
  --vent-flate-mild: #24201A;
  --vent-kant:    #4C3F20;
  --feil:         #D96A52;
  --feil-fyll:    #B4432C;   /* bærer hvit tekst: 5,6:1 */
  --feil-tekst:   #F19B86;
  --feil-tekst-svak: #DFA292;
  --feil-flate:   #2E1D19;
  --feil-flate-mild: #261D1A;
  --feil-kant:    #4C2E26;

  /* Portalen er mørk uansett. Om natta møter den resten på veien, og
   * topplinja må slutte å være nesten hvit. */
  --portal-topp:  #232C38;
  --portal-kant:  #333E4C;

  /* Skyggen bærer ikke lenger; den holder bare kanten fra å flyte ut.
   * Slørene dempes — .18 hvitt oppå en mørk flate gløder. */
  --skygge-stor:  0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --skygge-liten: 0 1px 3px rgba(0, 0, 0, .5);
  --slor:         rgba(255, 255, 255, .10);
  --slor-kant:    rgba(255, 255, 255, .16);
  --slor-sterk:   rgba(28, 32, 36, .92);

  /* Standardmerkevaren i natt-utgave. Kundens egne farger regnes ut
   * av app.js på samme måte — mot mørk bunn, ikke mot hvit. */
  --merke:        #128570;
  --merke-tekst:  #7FD8C1;
  --merke-flate:  #16302A;
  --merke-kant:   #25554A;
}

/* Bildet i et galleri er kundens eget, og et bilde av et kjølerom er
 * ofte lyst. Om natta står det da som en lyskaster midt på siden.
 * Det dempes så vidt — nok til at siden holder sammen, lite nok til
 * at et termometer fortsatt kan leses. Trykk åpner bildet urørt. */
:root[data-tema="natt"] .bilde__flate img { filter: brightness(.88); }

/* Merk at det ikke står noen @media (prefers-color-scheme: dark) her.
 * Systemets valg leses av seks linjer i index.html, som setter
 * data-tema før første strek tegnes. Et andre sett nattfarger i en
 * media-spørring ville vært en kopi av blokka over — og to sett som
 * skal være like, blir ulike den dagen bare det ene rettes. */

/* ---------------------------------------------------------------
 * Dag/natt
 *
 * En segmentert pille: begge valgene står der, og det som gjelder nå
 * er løftet opp på en egen brikke. Da er det ingenting å gjette på —
 * i motsetning til én knapp som viser en måne, der man ikke vet om
 * månen er tilstanden eller handlingen før man har trykket.
 *
 * Sporet låner farge fra flaten den ligger på. Pilla står på tre
 * slags bakgrunn — den mørke sidestolpen, den lyse tittellinja og den
 * grønne topplinja på telefon — og ingen av dem skal trenge å vite om
 * den.
 * --------------------------------------------------------------- */
.temabytte {
  display: inline-flex; flex-shrink: 0;
  padding: 3px; gap: 2px;
  border-radius: 999px;
  background: var(--felt);
}
.temabytte--loddrett { flex-direction: column; }

.temabytte__valg {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px;
  background: none; color: var(--blekk-svakest);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.temabytte__valg:hover { color: var(--blekk); }

/* Brikka bærer kundens profilfarge, med hvitt ikon i. Den er det
 * eneste stedet merkefargen brukes i denne kontrollen, og det er
 * nettopp derfor man ser hva som er valgt.
 *
 * Ringen, ikke skyggen, er det som gjør brikka til en brikke. Pilla
 * ligger på fire slags underlag, og fyllet alene rekker ikke på alle:
 * på den grønne sidestolpen er en grønn brikke 1,3:1 mot sporet, og
 * på et mørkt kort om natta 2,8:1 — begge under de 3:1 en kontroll
 * trenger for å kunne skilles ut. Den hvite ringen er 7,6:1 mot
 * stolpen og 16:1 mot kortet. Der fyllet holder alene, gjør ringen
 * ingen skade: den forsvinner i et lyst spor.
 *
 * En skygge ville ikke løst det. På en mettet farge blir en skygge en
 * grå kant, ikke en løftefølelse. */
.temabytte__valg[aria-pressed="true"] {
  background: var(--merke); color: var(--paa-merke);
  box-shadow: 0 0 0 2px var(--paa-merke);
  cursor: default;
}
.temabytte__valg:focus-visible {
  outline: 2px solid var(--merke); outline-offset: 2px;
}

/* På merkevareflatene — sidestolpen og topplinja på telefon — er
 * teksten rundt hvit, og et lyst spor ville forsvunnet i den. Der er
 * sporet et slør, og det dempede ikonet hvitt. */
.sidestolpe .temabytte,
.topplinje .temabytte { background: var(--slor); }
.sidestolpe .temabytte__valg,
.topplinje .temabytte__valg { color: var(--paa-merke); opacity: .82; }
.sidestolpe .temabytte__valg:hover,
.topplinje .temabytte__valg:hover { opacity: 1; }
.sidestolpe .temabytte__valg[aria-pressed="true"],
.topplinje .temabytte__valg[aria-pressed="true"] { opacity: 1; }
.sidestolpe .temabytte__valg:focus-visible,
.topplinje .temabytte__valg:focus-visible {
  outline-color: var(--paa-merke);
}

/* Navnet skal krympe før pilla gjør det. */
.sidestolpe__hvem { min-width: 0; flex-grow: 1; }
.sidestolpe__hvem b,
.sidestolpe__hvem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eier__topphandling {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
/* På brede skjermer står pilla allerede nederst i sidestolpen. To av
 * dem på samme side er én for mye. */
@media (min-width: 901px) {
  .eier__topphandling .temabytte { display: none; }
}


/* Fritt langs kanten — telefonens variant.
 *
 * Den står utenfor alle topplinjene, slik at ingen av de fem
 * variantene trenger å vite om den, og slik at den er på samme sted
 * uansett hvilken skjerm man er på. Ett fast sted å lete etter er
 * verdt mer enn en knapp som flytter seg.
 *
 * Den ligger over innholdet, så den er smal og halvgjennomsiktig i
 * hvile: den skal kunne finnes uten å stå i veien for en frist eller
 * et klokkeslett i høyre kant av et kort. Ved berøring blir den hel. */
.temabytte--fritt {
  /* Festet til kanten av app-kolonnen, ikke til kanten av skjermen.
   * På et nettbrett er #app en kolonne på 560 px midt i bildet, og en
   * knapp ute i margen ser ut som den hører til noe annet. */
  position: fixed; right: max(8px, calc(50vw - 280px + 8px));
  top: 50%; transform: translateY(-50%);
  z-index: 40;
  padding: 4px;
  background: var(--kort);
  border: 1px solid var(--kant);
  box-shadow: var(--skygge-stor);
  opacity: .88;
  transition: opacity .15s ease;
}
.temabytte--fritt:hover, .temabytte--fritt:focus-within { opacity: 1; }

/* På de brede skjermene står pilla i sidestolpen. To på samme side er
 * én for mye. */
#app.bred .temabytte--fritt { display: none; }

/* Liggende telefon.
 *
 * Midt på høyre kant er midt i tastaturet på måleskjermen, og nede i
 * hjørnet er lagreknappen. Begge er ting man treffer med tommelen,
 * og en pille som ligger oppå dem er ikke en pynteting — den er en
 * feilregistrering som venter på å skje.
 *
 * Den går derfor opp i topplinja, og pilla legges VANNRETT der. Og
 * plassen den trenger, tas av topplinja selv: overskriftene er
 * venstrestilte, så 96 piksler til høyre koster ingenting — og da
 * ligger pilla på tom flate fordi layouten sier det, ikke fordi det
 * tilfeldigvis er ledig der. */
@media (max-height: 520px) {
  .temabytte--fritt {
    /* Plain 12px her, ikke kolonneankeret over: på liggende telefon
     * er #app ikke en kolonne på 560 px — den er 900 px bred (se
     * lenger ned) — og ankeret ville lagt pilla midt oppå datoen i
     * topplinja. */
    top: calc(7px + var(--topp)); bottom: auto; right: 12px;
    transform: none;
    flex-direction: row;
    background: var(--slor-sterk);
  }
  .topplinje, .tilbakelinje { padding-right: 96px; }
}

/* ===============================================================
   Liggende telefon
 *
 * En telefon lagt på siden er ikke en liten PC. Den er 390 piksler
 * høy, og i de 390 skal det fortsatt være plass til noe annet enn
 * overskriften. Et nettbrett i stativ på kjøkkenbenken ligger som
 * regel slik, og det er DEN skjermen den ansatte faktisk måler på.
 *
 * Regelen slår inn på høyde, ikke på bredde. En kort skjerm er kort
 * enten den er en telefon på siden eller et vindu noen har dratt
 * sammen, og svaret er det samme i begge tilfeller.
 * =============================================================== */
@media (max-height: 520px) and (min-width: 480px) {

  /* Bredden får lov til å bli brukt. 900 er grensen: over det blir
   * et kort så bredt at øyet mister starten på neste linje. */
  #app { max-width: 900px; }

  /* Toppen er der det er mest å hente. «Min dag» i 30 piksler tar en
   * åttendedel av skjermen; navnet under står allerede i bunnmenyen
   * og i loggen, og forsvinner her. */
  /* 96 til høyre er plassen pilla står på. Se blokka over. */
  .topplinje { padding: calc(9px + var(--topp)) 96px 11px 20px; }
  .topplinje h1 { margin: 6px 0 0; font-size: 21px; }
  .topplinje p { display: none; }
  .tilbakelinje { padding: calc(7px + var(--topp)) 96px 7px 14px; }

  .framdrift { padding-top: 9px; padding-bottom: 9px; }

  /* Bunnmenyen er fast og spiser høyde hele tiden. Ikonet over ordet
   * blir til ikonet ved siden av ordet. */
  .bunnmeny a, .bunnmeny button {
    min-height: 48px; flex-direction: row; gap: 7px; font-size: 12px;
  }

  /* Kortene legges i to spalter i stedet for å bli 860 piksler brede.
   * Rutinene er få og korte; de leses raskere ved siden av hverandre
   * enn under hverandre med halve skjermen tom. */
  .innhold {
    display: grid; align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--luft-3);
    padding: var(--luft-3) 20px var(--luft-3);
  }
  /* En bolkoverskrift hører til alt som står under den, ikke til én
   * spalte. Den går over begge. */
  .innhold > .bolk,
  .innhold > .beskjed,
  .innhold > .varselstripe,
  .innhold > .nettstripe,
  .innhold > .forklaring,
  .innhold > .framdrift__spor { grid-column: 1 / -1; }

  /* --- Måleskjermen ---
   *
   * Dette er den ene skjermen som blir BEDRE liggende. Stående må
   * tallet og tastaturet dele høyden; liggende får tallet hele
   * venstresiden og tastaturet hele høyresiden, og tommelen når
   * begge deler uten å flytte hånda. */
  .maler {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
    grid-template-areas: "felt tastatur" "hint tastatur";
    align-content: center;
    gap: 0 22px;
    padding: 8px 20px;
  }
  .maler__felt { grid-area: felt; padding: 0; }
  .maler__hint { grid-area: hint; }
  .tastatur { grid-area: tastatur; padding-bottom: 0; gap: 6px; }
  .tastatur button { height: 46px; font-size: 21px; }
  .maler__tall { font-size: 54px; min-width: 120px; }
  .maler__enhet { font-size: 24px; }
  .plussminus { width: 46px; height: 46px; font-size: 23px; }

  /* Hjemmelen bak grensen er viktig, men den er tre linjer. Den
   * kuttes her og står i sin helhet på utstyrssiden. */
  .grenseboks { padding: 9px 14px; }
  .grenseboks__hjemmel { display: none; }

  .bunnfelt { padding: 0 20px calc(10px + var(--bunn)); gap: 6px; }
  .bunnfelt .knapp { min-height: 48px; font-size: 16px; }
  .bunnfelt .knapp--tekst { min-height: 36px; }

  /* Avviksskjermen: den røde toppen sier det samme med mindre plass. */
  .topplinje--avvik h1 { font-size: 20px; }
  .topplinje--avvik p { display: block; font-size: 12.5px; margin-top: 4px; }
}

/* Svært lav skjerm — en iPhone SE lagt på siden er 320 piksler høy,
 * og der teller hver eneste piksel. To spalter gjelder fortsatt (de
 * er nettopp det som redder måleskjermen her); alt krymper et hakk
 * til. Under dette finnes det ingen telefon. */
@media (max-height: 380px) and (min-width: 480px) {
  .topplinje { padding: calc(6px + var(--topp)) 92px 8px 16px; }
  .topplinje h1 { margin: 4px 0 0; font-size: 18px; }
  .tilbakelinje { padding: calc(5px + var(--topp)) 92px 5px 12px; }
  .tilbakelinje h1 { font-size: 16px; }
  .tilbakelinje p { display: none; }
  .grenseboks { padding: 6px 12px; }
  .grenseboks__navn, .grenseboks__verdi { font-size: 13px; }
  .maler { padding: 4px 16px; gap: 0 16px; }
  .maler__tall { font-size: 40px; min-width: 96px; }
  .maler__enhet { font-size: 19px; }
  .maler__etikett, .maler__under { display: none; }
  .plussminus { width: 40px; height: 40px; font-size: 20px; }
  .tastatur { gap: 5px; }
  .tastatur button { height: 38px; font-size: 18px; }
  .bunnfelt { padding: 0 16px calc(6px + var(--bunn)); }
  .bunnfelt .knapp { min-height: 42px; font-size: 15px; }
  /* Merknaden under lagreknappen er viktig, men den er lest én gang.
   * Den står i sin helhet på den stående skjermen. */
  .bunnfelt .finskrift { display: none; }
  .bunnmeny a, .bunnmeny button { min-height: 42px; font-size: 11.5px; }
}

/* Liggende og SMAL — en telefon under 480 piksler bred på siden.
 * Der er det ikke plass til to spalter, bare til mindre pynt. */
@media (max-height: 460px) and (max-width: 479px) {
  .topplinje { padding: calc(8px + var(--topp)) 92px 10px 20px; }
  .topplinje h1 { margin: 5px 0 0; font-size: 20px; }
  .topplinje p { display: none; }
  .bunnmeny a, .bunnmeny button {
    min-height: 46px; flex-direction: row; gap: 7px; font-size: 12px;
  }
  .maler__tall { font-size: 46px; }
  .tastatur button { height: 42px; font-size: 19px; }
  .bunnfelt .knapp { min-height: 46px; }
}

/* ---------------------------------------------------------------
 * Team
 *
 * Bygget på de samme radene som utstyrssiden. En person og et
 * kjøleskap er ikke det samme, men skjermen skal leses likt: navn til
 * venstre, tilstand i midten, én knapp til høyre.
 * --------------------------------------------------------------- */
.teamrad__merker {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
}

.inviter {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: var(--luft-3);
  align-items: end;
}
@media (max-width: 560px) {
  .inviter { grid-template-columns: minmax(0, 1fr); }
}

/* De to ekstra rettighetene. Hver av dem trenger en setning: «kan
 * endre temperaturgrenser» sier hva bryteren gjør, ikke hva det
 * betyr, og det er det siste eieren trenger å vite før hun slår den
 * på. */
.teamretter { display: flex; flex-direction: column; gap: var(--luft-3); }

.teamrett {
  display: flex; align-items: flex-start; gap: var(--luft-3);
  padding: var(--luft-3) 15px;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort); cursor: pointer;
}
.teamrett input { margin: 2px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--merke); }
.teamrett b     { display: block; font-size: 14px; font-weight: 500; }
.teamrett small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5;
                  color: var(--blekk-svakest); }

.teampin {
  padding-top: var(--luft-4);
  border-top: 1px solid var(--kant-svak);
}
.teampin__rad { display: flex; gap: var(--luft-3); align-items: center; flex-wrap: wrap; }
.teampin__rad input {
  width: 130px; font-family: var(--skrift-tall); letter-spacing: .18em;
}
.teampin__rad .knapp { width: auto; flex-shrink: 0; }

.opplaeringsskjema {
  display: grid; grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--luft-3);
  align-items: end;
}
@media (max-width: 560px) {
  .opplaeringsskjema { grid-template-columns: minmax(0, 1fr); }
}

.opplaeringsrad {
  display: flex; align-items: baseline; gap: var(--luft-3);
  padding: var(--luft-3) 2px;
  border-bottom: 1px solid var(--kant-svak);
}
.opplaeringsrad:last-child { border-bottom: none; }
.opplaeringsrad__dato {
  font-size: 12.5px; color: var(--blekk-svakest); flex-shrink: 0; margin-left: auto;
}

/* Ansvarlig på et avvik. Den ser ut som en verdi, ikke som en knapp,
 * helt til man holder over den — for det er en verdi, som tilfeldigvis
 * kan endres. */
.ansvarlig {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 8px 2px 9px; margin: -2px -8px -2px -9px;
  border: 1px solid transparent; border-radius: 999px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.ansvarlig:hover { border-color: var(--kant); background: var(--felt); }
.ansvarlig svg { color: var(--blekk-svakest); flex-shrink: 0; }

/* ---------------------------------------------------------------
 * Faner innenfor ett menypunkt
 *
 * Dokumentmodulen er to skjermer: arkivet og periodrapporten. De
 * hører til den samme jobben, og deler derfor én linje i menyen.
 * Fanen viser hvilken av dem man står i — den er ikke en ny meny,
 * og skal ikke leses som en.
 * --------------------------------------------------------------- */
/* ---------------------------------------------------------------
 * Faner
 *
 * Tre brikker, ikke tre ord på et spor.
 *
 * Den første utgaven var en segmentert pille som dag/natt-bryteren:
 * et spor med den valgte løftet opp. Den falt på ett tall. Sporet er
 * --felt (#F1EFE9) og sidebunnen --papir (#F4F2ED) — 1,03:1, med en
 * kant på 1,22:1. Sporet var i praksis usynlig, og da fantes det
 * ingen ramme rundt de tre: «Periode» og «Revisjon» leste som løs
 * tekst ved siden av en grønn knapp.
 *
 * Paletten er bevisst blek — hvert kort i systemet har en kant på
 * 1,22:1 mot papiret. Å presse sporet opp til 3:1 ville krevd en
 * mørkere grå enn noe annet i systemet bruker, og da ser fanene ut
 * som de hører til et annet produkt.
 *
 * Derfor den motsatte veien: hver fane får sin egen flate. En uvalgt
 * fane er nå nøyaktig en .knapp--omriss — hvitt kort, --kant rundt —
 * og den valgte er nøyaktig en fylt .knapp i profilfargen. Begge er
 * former øyet allerede har lært på hver eneste skjerm, og da trengs
 * ingen ramme rundt for å si at de er knapper.
 * --------------------------------------------------------------- */
.faner {
  display: flex; gap: var(--luft-2);
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.faner__fane {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--kant); border-radius: 999px;
  background: var(--kort); color: var(--blekk);
  font: inherit; font-size: 14px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.faner__fane:hover { background: var(--kort-trykk); border-color: var(--blekk-tomt); }

/* Den valgte bærer profilfargen med hvit tekst, slik alt annet valgt
 * i systemet gjør. Kanten bærer samme farge som fyllet — en grå kant
 * rundt en mettet flate ser ut som en feil.
 *
 * Fet, ikke bare farget: er man fargeblind, er vekten det som skiller
 * den valgte fra de to andre. */
/* Ringen er den samme løsningen som på dag/natt-brikka, og den er der
 * av nøyaktig samme grunn — målt til samme tall. Om natta er
 * merkefargen #277266 og det uvalgte kortet #1D2125: 2,84:1, altså
 * under de 3:1 en kontroll trenger for å kunne skilles ut. Fyllet
 * alene rekker ikke.
 *
 * Den hvite ringen er 16:1 mot det mørke kortet. I dagmodus, der
 * fyllet holder på 7,6:1, forsvinner den i det lyse papiret og gjør
 * ingen skade. Én regel som virker i begge moduser er bedre enn to
 * som skal holdes like. */
.faner__fane[aria-current="page"] {
  background: var(--merke); border-color: var(--merke);
  color: var(--paa-merke); font-weight: 700;
  box-shadow: 0 0 0 2px var(--paa-merke);
  cursor: default;
}
.faner__fane:focus-visible { outline: 2px solid var(--merke); outline-offset: 3px; }

/* På telefon deler de tre bredden likt. Da er hver av dem like stor,
 * og ingen av dem er den man bommer på. */
@media (max-width: 560px) {
  .faner { width: 100%; align-self: stretch; flex-wrap: nowrap; }
  .faner__fane { flex: 1 1 0; padding: 0 8px; }
}

/* MERK: her sto det en krøllparentes for mye, og den var ikke
 * harmløs. En løs `}` på øverste nivå er en parsefeil, og CSS-en
 * kommer seg etter den ved å lese den som starten på en ny regel —
 * som da sluker HELE regelen som kommer etter. Den som lå der,
 * `.panel--vent`, har aldri virket: panelet som venter på noe, har
 * stått med vanlig hvit bakgrunn i stedet for sin egen.
 *
 * Feilen ga ingen melding noe sted. Den ble funnet fordi den neste
 * regelen som havnet på den plassen — regelverksfanene under — heller
 * ikke virket, og to faner som skulle stått side om side, sto
 * under hverandre.
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * Regelverksfanene — IK-Mat og IK-Alkohol
 *
 * De står UNDER arkivfanene og ser annerledes ut med vilje: de to
 * stripene svarer på to forskjellige spørsmål. Arkivfanene sier
 * hvilken skjerm man er på; disse sier hvilket regelverk lista viser.
 * To like striper over hverandre ville sett ut som én stripe som
 * brøt seg i to linjer.
 *
 * Derfor har disse to linjer tekst — navnet og hvor mange farer som
 * står uten kontroll — og er firkantede der arkivfanene er runde.
 *
 * Er det bare ett regelverk, tegnes stripa ikke i det hele tatt. Et
 * valg med ett alternativ er et trykk uten innhold.
 * --------------------------------------------------------------- */
.regelfaner {
  display: flex; gap: var(--luft-2);
  flex-wrap: wrap;
  margin-bottom: var(--luft-2);
}
.regelfaner__fane {
  flex: 1 1 200px;
  min-height: 60px;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 2px;
  padding: var(--luft-2) var(--luft-3);
  border: 1px solid var(--kant); border-radius: 14px;
  background: var(--kort); color: var(--blekk);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.regelfaner__fane:hover { background: var(--kort-trykk); border-color: var(--blekk-tomt); }

.regelfaner__navn {
  display: inline-flex; align-items: center; gap: var(--luft-1);
  font-size: 15px; font-weight: 600;
}
.regelfaner__ikon { font-size: 15px; line-height: 1; }
.regelfaner__under { color: var(--blekk-svak); font-size: 13px; }

/* Den valgte bærer profilfargen med hvit tekst, som alt annet valgt i
 * systemet. Ringen og den fete vekten er de samme to grepene som på
 * arkivfanene, og de er der av samme grunn: fargen alene holder ikke
 * 3:1 mot det uvalgte kortet om natta, og den som ikke ser farge må
 * kunne se hvilken fane som gjelder. */
.regelfaner__fane[aria-current="page"] {
  background: var(--merke); border-color: var(--merke);
  color: var(--paa-merke);
  box-shadow: 0 0 0 2px var(--paa-merke);
  cursor: default;
}
.regelfaner__fane[aria-current="page"] .regelfaner__navn { font-weight: 700; }
/* Undertittelen arver den hvite teksten, ikke den svake blekkfargen —
 * --blekk-svak mot profilfargen er under 3:1 i begge moduser. */
.regelfaner__fane[aria-current="page"] .regelfaner__under {
  color: var(--paa-merke); opacity: .88;
}
.regelfaner__fane:focus-visible { outline: 2px solid var(--merke); outline-offset: 3px; }

/* På telefon står de under hverandre i full bredde. To fliser side om
 * side på 320 px gir 150 px hver, og «4 uten kontroll» brekker da til
 * tre linjer. */
@media (max-width: 560px) {
  .regelfaner { flex-direction: column; }
  .regelfaner__fane { flex: 1 1 auto; width: 100%; }
}

/* ---------------------------------------------------------------
 * Dokumentarkivet
 *
 * Radene er bygget som utstyrsradene: navn til venstre, tilstand til
 * høyre, knappene under. Det som skiller dem er at et dokument har
 * en historikk — og den ligger bak én knapp, ikke i lista, for ellers
 * vokser arkivet med én rad for hver gang HACCP-planen ble endret.
 * --------------------------------------------------------------- */
.panel--vent { border-color: var(--vent-kant); background: var(--vent-flate); }
.panel--feil { border-color: var(--feil-kant); background: var(--feil-flate); }
.panel--vent h2, .panel--feil h2 { color: var(--blekk); }

.utlopsrad {
  display: flex; align-items: center; gap: var(--luft-3);
  padding: var(--luft-2) 0;
  border-top: 1px solid var(--kant-svak);
}
/* Skillestreken må låne farge fra panelet den står i. --kant-svak er
 * lys og forsvinner mot en gul eller rød flate. */
.panel--vent .utlopsrad { border-top-color: var(--vent-kant); }
.panel--feil .utlopsrad { border-top-color: var(--feil-kant); }
.utlopsrad__navn { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.utlopsrad__navn b     { font-size: 14.5px; font-weight: 500; }
.utlopsrad__navn small { font-size: 12.5px; color: var(--blekk-svakest); }
.utlopsrad .merkelapp  { flex-shrink: 0; }

.dokumentrad {
  display: flex; flex-direction: column; gap: var(--luft-2);
  padding: var(--luft-3) 16px;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort);
  margin-top: var(--luft-2);
}
.dokumentrad--ute { opacity: .62; }

.dokumentrad__hoved { display: flex; align-items: flex-start; gap: var(--luft-3); }
/* Ikonet sier PDF eller bilde. Det er ikke pynt: en skannet attest og
 * en rutine man kan søke i, brukes ikke likt. */
.dokumentrad__type {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--merke-flate); color: var(--merke-tekst);
}
/* flex-basis 0, ikke auto. Med auto er utgangspunktet bredden på
 * teksten, og «Leverandørattest Nordisk Kjøtt AS» dytter seg selv ned
 * på linja under ikonet på en telefon. */
.dokumentrad__navn { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.dokumentrad__navn b     { font-size: 15px; font-weight: 500; }
.dokumentrad__navn small { font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest); }
.dokumentrad__merker {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; flex-shrink: 0;
}
.dokumentrad__notat {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--blekk-svak);
  padding-left: calc(34px + var(--luft-3));
}
.dokumentrad__knapper {
  display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap;
  padding-left: calc(34px + var(--luft-3));
}
/* .knapp er full bredde som standard — bygget for en tommel på et
 * nettbrett. Inne i en rad må den være så bred som teksten. */
.dokumentrad__knapper .knapp { width: auto; flex-shrink: 0; }

@media (max-width: 560px) {
  .dokumentrad__hoved { flex-wrap: wrap; }
  /* Merkelappen tar hele bredden i stedet for å klemme navnet. En
   * lang tittel og «Gikk ut for 85 dager siden» får ikke plass på
   * samme linje på en telefon, og navnet er det viktigste. */
  .utlopsrad { flex-wrap: wrap; }
  .utlopsrad__navn { flex: 1 1 100%; }
  .dokumentrad__merker { justify-content: flex-start; width: 100%; }
  .dokumentrad__notat, .dokumentrad__knapper { padding-left: 0; }
}

/* Skjemaet som åpnes under en rad — endre, ny versjon, historikk.
 * Samme form som utstyrsskjemaet: en boks i profilfargen, tydelig
 * knyttet til raden over. */
.underskjema {
  display: flex; flex-direction: column; gap: var(--luft-4);
  margin: var(--luft-2) 0 var(--luft-1);
  padding: var(--luft-4);
  border: 1px solid var(--merke-kant); border-radius: var(--radius-liten);
  background: var(--merke-flate);
}
.underskjema > b { font-size: 14px; font-weight: 700; }
.underskjema > b + p { margin: calc(var(--luft-4) * -1 + var(--luft-1)) 0 0;
                       font-size: 12.5px; line-height: 1.5; color: var(--blekk-svakest); }
.underskjema .finskrift { text-align: left; }

.dokumentskjema { display: flex; flex-direction: column; gap: var(--luft-4); }
.dokumentskjema label {
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--blekk-svak);
  margin-bottom: var(--luft-2);
}
.dokumentskjema .finskrift { text-align: left; margin: var(--luft-2) 0 0; }
.dokumentskjema input[type="date"] { width: auto; min-width: 170px; }
.dokumentskjema__knapper { display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap; }
.dokumentskjema__knapper .knapp { width: auto; white-space: nowrap; }

/* Filvelgeren. Den innebygde <input type="file"> ser forskjellig ut i
 * hver nettleser og lar seg ikke stile — derfor en vanlig knapp som
 * klikker på den, og navnet på den valgte filen ved siden av. */
.filvalg { display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap; }
.filvalg .knapp { width: auto; flex-shrink: 0; }
.filvalg__navn { margin: 0; text-align: left; min-width: 0; word-break: break-word; }

.arkivbryter {
  margin-top: var(--luft-4); padding-top: var(--luft-3);
  border-top: 1px solid var(--kant-svak);
}
.arkivbryter .knapp { width: auto; }

.versjonsrad {
  display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap;
  padding: var(--luft-3) 0;
  border-bottom: 1px solid var(--kant-svak);
}
.versjonsrad:last-child { border-bottom: none; }
.versjonsrad__navn { min-width: 0; flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.versjonsrad__navn b     { font-size: 14px; font-weight: 500; }
.versjonsrad__navn small { font-size: 12px; line-height: 1.45; color: var(--blekk-svakest); }
.versjonsrad .knapp { width: auto; flex-shrink: 0; }

/* Et panel som er én knapp til noen trykker på den. Brukes der
 * skjemaet er høyt og sjelden brukt — den som åpner dokumentsiden,
 * gjør det som regel for å FINNE noe, ikke for å legge inn noe. */
.panel--tynt { padding: 0; overflow: hidden; }

.sammenlagt__knapp {
  display: flex; align-items: center; gap: var(--luft-3);
  width: 100%; padding: var(--luft-3) 26px;
  border: none; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.sammenlagt__knapp b { flex: 1 1 auto; font-size: 14.5px; font-weight: 700; }
.sammenlagt__knapp svg { flex-shrink: 0; color: var(--merke-tekst); }
.sammenlagt__knapp:hover { background: var(--flate-mild); }
/* Pila snur når boksen er åpen. Den er det eneste som sier om det
 * som står under, er alt — eller begynnelsen på noe. */
.sammenlagt__knapp[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.sammenlagt:not(:empty) {
  padding: var(--luft-4) 26px var(--luft-4);
  border-top: 1px solid var(--kant-svak);
}

.nakenskjema { display: flex; flex-direction: column; gap: var(--luft-4); }
.nakenskjema__ingress {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--blekk-svakest);
}
.nakenskjema .finskrift { text-align: left; }

/* Tomme beskjedbokser skal ikke ta plass. De står mellom feltene og
 * knappen og venter på en feilmelding — uten denne regelen blir det
 * dobbel luft der ingenting er sagt. */
.nakenskjema > div:empty,
.underskjema > div:empty,
.dokumentskjema > div:empty { display: none; }

/* ---------------------------------------------------------------
 * Oppgaver
 *
 * Samme radform som utstyr og dokumenter: navn til venstre, tilstand
 * til høyre, knappene under. Det som skiller dem er at en oppgave kan
 * hukes av der den står — den har ingen punkter å gå gjennom.
 * --------------------------------------------------------------- */
.oppgaverad {
  display: flex; flex-direction: column; gap: var(--luft-2);
  padding: var(--luft-3) 16px;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort);
  margin-top: var(--luft-2);
}
.oppgaverad--ute { opacity: .62; }

.oppgaverad__hoved { display: flex; align-items: flex-start; gap: var(--luft-3); }
/* flex-basis 0, ikke auto — ellers dytter en lang tittel seg selv
 * ned på linja under merkelappene på en telefon. */
.oppgaverad__navn { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.oppgaverad__navn b     { font-size: 15px; font-weight: 500; }
.oppgaverad__navn small { font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest); }
.oppgaverad__merker {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; flex-shrink: 0;
}
.oppgaverad__merker .merkelapp svg { flex-shrink: 0; }
.oppgaverad__notat {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--blekk-svak);
}
.oppgaverad__notat b { font-weight: 700; color: var(--blekk-svakest); }
.oppgaverad__knapper {
  display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap;
}
/* .knapp er full bredde som standard — bygget for en tommel på et
 * nettbrett. Inne i en rad må den være så bred som teksten. */
.oppgaverad__knapper .knapp { width: auto; flex-shrink: 0; }

@media (max-width: 560px) {
  .oppgaverad__hoved { flex-wrap: wrap; }
  .oppgaverad__merker { justify-content: flex-start; width: 100%; }
}

/* Båndet over de forsinkede. Det er det eneste som skiller dem fra
 * resten av lista, og da må det bære fargen sin. */
.bolkband--forsinket { background: var(--vent-flate); }
.bolkband--forsinket b, .bolkband--forsinket span { color: var(--vent-tekst); }

/* Et oppgavekort i Min dag. Kortene der er knapper som åpner noe;
 * dette er ikke — oppgaven hukes av der den står. */
.kort--haster { border-color: var(--vent-kant); background: var(--vent-flate); }
.kort .knapp--liten { width: auto; }
.kort .underskjema { margin-top: var(--luft-3); }

/* ---------------------------------------------------------------
 * Avviksbehandling — de fem trinnene
 *
 * Nummerert, fordi rekkefølgen er hele poenget: årsaken før
 * tiltaket, og tiltaket før bekreftelsen på at det er gjort. Et
 * gjort trinn bytter nummeret sitt mot en hake og viser det som
 * står der; et trinn som venter, viser feltet som fyller det ut.
 * --------------------------------------------------------------- */
.trinn {
  display: flex; align-items: flex-start; gap: var(--luft-3);
  padding: var(--luft-3) 0;
  border-top: 1px solid var(--kant-svak);
}
.trinn:first-of-type { border-top: none; padding-top: var(--luft-2); }

.trinn__nr {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid var(--kant);
  font-family: var(--skrift-tall); font-size: 13px; font-weight: 700;
  color: var(--blekk-svakest);
}
.trinn--gjort .trinn__nr {
  background: var(--merke); border-color: var(--merke); color: var(--paa-merke);
}

.trinn__tekst { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; }
.trinn__tekst b     { font-size: 14.5px; font-weight: 700; }
.trinn__tekst small { font-size: 12px; line-height: 1.45; color: var(--blekk-svakest); }
/* Paragrafhenvisningen står under tittelen, ikke i den. Den som
 * kjenner veilederen finner igjen trinnet; den som ikke gjør det,
 * leser tittelen og går videre. */
.trinn__hjemmel { font-style: normal; }
.trinn__tekst q {
  display: block; margin-top: 4px;
  font-size: 14px; line-height: 1.5; color: var(--blekk);
}

.trinn__skjema:not(:empty) { padding: 0 0 var(--luft-3) calc(26px + var(--luft-3)); }
.trinn__venter { text-align: left; margin: 0; }

.trinnfelt { display: flex; flex-direction: column; gap: var(--luft-3); align-items: flex-start; }
.trinnfelt .knapp { width: auto; }

@media (max-width: 560px) {
  .trinn__skjema:not(:empty) { padding-left: 0; }
}

/* ---------------------------------------------------------------
 * Startsiden til den ansatte
 *
 * Kortbasert: en hilsen, tre snarveier, to fliser med tall, og det
 * som trenger et svar i dag. Alt bærer profilfargen — merkevaren
 * settes i app.js og gjelder hele siden, slik at en kunde med lilla
 * profil får en lilla startside uten at noe her endres.
 * --------------------------------------------------------------- */
.topplinje--hilsen { padding-bottom: var(--luft-4); }
.topplinje--hilsen h1 { margin-top: var(--luft-2); }

/* --- Snarveier --- */
.snarveier {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: var(--luft-3) 16px var(--luft-3);
  display: flex; flex-direction: column; gap: var(--luft-3);
}
.snarveier__navn {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blekk-svakest);
}
.snarveier__rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luft-3); }

.snarvei {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: var(--luft-3) 6px;
  border: 1px solid var(--merke-kant); border-radius: var(--radius-liten);
  background: var(--merke-flate); color: var(--merke-tekst);
  font: inherit; cursor: pointer; min-height: 78px;
  text-align: center;
}
.snarvei:hover { border-color: var(--merke); }
.snarvei__ikon { display: flex; line-height: 0; }
.snarvei__navn { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
/* En snarvei som ikke går noe sted, skal se ut som det. «Alt målt»
 * er et svar, ikke en knapp. */
.snarvei--av {
  background: var(--felt); border-color: var(--kant);
  color: var(--blekk-svakest); cursor: default;
}

/* --- Fliser med tall ---
 *
 * En enkelt verdi er en flis, ikke et diagram: tallet ER grafikken.
 * Forholdet gjort/totalt får en tynn rett skala under, med samme
 * farge i sporet — ikke en ring. En ring på to deler er et
 * kakediagram med to biter, og da leser man tallet uansett. */
.fliser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-3); }

.flis {
  background: var(--kort); border: 1px solid var(--kant);
  border-radius: var(--radius); padding: var(--luft-3) 16px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.flis__navn {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blekk-svakest);
}
/* Tallet i brødskriften, ikke i tittelskriften: en display-skrift på
 * et stort tall leser som pynt. Proporsjonale siffer, ikke
 * tabular — tabellsiffer gir «11» samme bredde som «00» og ser løst
 * ut i denne størrelsen. */
.flis__tall {
  margin: 0; font-family: var(--skrift); font-size: 40px; font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 8px;
}
.flis__av { font-size: 15px; font-weight: 500; color: var(--blekk-svakest); }
.flis__tomt { margin: 0; font-size: 15px; font-weight: 500; color: var(--blekk-svakest); }
.flis__under { margin: 0; font-size: 12.5px; color: var(--blekk-svakest); line-height: 1.4; }

.flis__spor { height: 6px; border-radius: 3px; background: var(--spor); overflow: hidden; }
.flis__fylt { height: 6px; border-radius: 3px; background: var(--merke); transition: width .3s ease; }

@media (max-width: 359px) {
  .fliser { grid-template-columns: 1fr; }
  .flis__tall { font-size: 34px; }
}

/* --- Viktig nå ---
 *
 * Statusfargen kommer aldri alene: båndet har både ikon og ordet
 * «Viktig nå», og hver rad sier hva den er. */
.viktig {
  background: var(--vent-flate); border: 1px solid var(--vent-kant);
  border-radius: var(--radius); padding: var(--luft-3) 16px;
  display: flex; flex-direction: column;
}
.viktig__topp {
  display: flex; align-items: center; gap: 8px;
  color: var(--vent-tekst); padding-bottom: var(--luft-2);
}
.viktig__topp b { font-size: 13px; font-weight: 700; }
.viktig__topp svg { flex-shrink: 0; }

.viktig__rad {
  display: flex; align-items: center; gap: var(--luft-3);
  width: 100%; padding: var(--luft-3) 0;
  border: none; border-top: 1px solid var(--vent-kant);
  background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.viktig__tekst { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.viktig__tekst b     { font-size: 14.5px; font-weight: 500; }
.viktig__tekst small { font-size: 12.5px; line-height: 1.4; color: var(--blekk-svak); }
/* Pila peker til høyre, ikke ned — raden åpner noe, den brettes ikke ut. */
.viktig__rad > svg { flex-shrink: 0; transform: rotate(-90deg); color: var(--blekk-svakest); }

/* Dokumenthodet: nummer og «sist endret» side om side. De to hører
 * sammen — det er det samme feltparet som står øverst på hvert ark
 * fra Mattilsynet. */
.dokumenthode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-3); }
.dokumenthode > div { min-width: 0; }
.dokumenthode input { width: 100%; }
@media (max-width: 480px) {
  .dokumenthode { grid-template-columns: minmax(0, 1fr); }
}

/* Et panel som ber om en handling, ikke et som advarer. Merkefarget,
 * slik at det ikke leses sammen med det gule «noe går ut»-panelet
 * rett over. */
.panel--merke { border-color: var(--merke-kant); background: var(--merke-flate); }
.panel--merke .utlopsrad { border-top-color: var(--merke-kant); }

/* ---------------------------------------------------------------
 * Datofelt
 *
 * Eget felt i stedet for <input type="date">. Grunnen står i ui.js:
 * nettleseren tegner det innebygde feltet etter sitt eget UI-språk,
 * ikke etter siden — «03/01/2026» og «07:00 AM» også i en norsk
 * nettleser. Her er formatet vårt, alltid.
 * --------------------------------------------------------------- */
.datofelt {
  font-family: var(--skrift-tall);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  width: auto; min-width: 11ch; max-width: 100%;
}
/* Med klokkeslett trengs det seks tegn til. */
.datofelt[maxlength="16"] { min-width: 17ch; }

/* En halvskrevet dato er ikke feil — den er ikke ferdig. Merket
 * settes bare når det som STÅR der, ikke kan bli en dato. */
.datofelt--ugyldig {
  border-color: var(--feil-kant);
  background: var(--feil-flate);
}

/* ---------------------------------------------------------------
 * Intern revisjon (§ 5.7)
 *
 * Forberedelsen er tall systemet har regnet ut, ikke felter noen skal
 * fylle inn. Da er den visuelle oppgaven å skille tallene som er
 * greie fra tallene som betyr at noen må se på noe — ellers er
 * panelet en tallvegg der alt veier like mye.
 * --------------------------------------------------------------- */
.panel--venter { border-color: var(--vent-kant); background: var(--vent-flate); }

.revisjonstall__rad {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--luft-3); margin-top: var(--luft-3);
}
.revisjonstall {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--luft-3) 14px;
  border: 1px solid var(--kant); border-radius: var(--radius-liten);
  background: var(--kort);
}
/* Tallet i brødskriften, ikke i tittelskriften. En display-skrift på
 * et stort tall leses som pynt; her er tallet selve svaret.
 * Proporsjonale siffer, ikke tabellsiffer: «11» skal ikke ha samme
 * bredde som «00» i denne størrelsen. */
.revisjonstall b {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: proportional-nums;
}
.revisjonstall span  { font-size: 12px; color: var(--blekk-svak); line-height: 1.35; }
.revisjonstall small { font-size: 11.5px; color: var(--blekk-svakest); }
/* Alarm er farge PLUSS en kant. Fargen alene bærer aldri betydning —
 * den som ikke skiller rødt fra svart skal se det samme. */
.revisjonstall--alarm {
  border-color: var(--feil-kant); background: var(--feil-flate);
}
.revisjonstall--alarm b { color: var(--feil-tekst); }

.revisjonsfunn {
  margin-top: var(--luft-4); padding-top: var(--luft-4);
  border-top: 1px solid var(--kant-svak);
}
.revisjonsfunn > b { font-size: 14px; font-weight: 700; }
.revisjonsfunn > p { margin: var(--luft-2) 0 0; font-size: 13px; color: var(--blekk-svak); }

.revisjonsrad {
  display: flex; align-items: flex-start; gap: var(--luft-3);
  padding: var(--luft-3) 0;
  border-top: 1px solid var(--kant-svak);
}
.revisjonsrad:first-of-type { border-top: none; }
.revisjonsrad__navn { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.revisjonsrad__navn b     { font-size: 14.5px; font-weight: 500; }
.revisjonsrad__navn small { font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest); }
/* Funnteksten er en setning, ikke en etikett. Den brytes og kuttes
 * aldri — det er nettopp setningen som dokumenterer hva som ble
 * funnet. Samme resonnement som avviksblokkene i rapporten. */
.revisjonsrad__tekst {
  margin: var(--luft-2) 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--blekk-svak); white-space: pre-wrap; overflow-wrap: anywhere;
}
/* width: auto er ikke pynt her. `.knapp` er full bredde som standard,
 * og en full-bredde knapp i en flex-rad klemmer tekstkolonnen ned til
 * null — funnteksten sto som én bokstav per linje. Samme felle som
 * `.dokumentskjema__knapper .knapp`. */
.revisjonsrad .knapp--tekst {
  flex-shrink: 0; width: auto; padding: 0;
}

/* Funnene ligger i sin egen boks inni revisjonspanelet. Den arver
 * ikke panelets fôring — .panel--tynt ville gitt null, og teksten
 * ville ligget inntil sin egen kant. */
.funnpanel { padding: var(--luft-4) 20px; }
.funnpanel > b { font-size: 14px; font-weight: 700; }
.funnpanel > p { margin: var(--luft-2) 0 var(--luft-3); font-size: 13px; color: var(--blekk-svak); }
.funnpanel .underskjema { margin-top: var(--luft-4); }

.revisjonstekst { margin-top: var(--luft-4); }
.revisjonstekst > b { font-size: 13px; font-weight: 700; color: var(--blekk-svak); }
.revisjonstekst > p {
  margin: var(--luft-2) 0 0; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Avkrysningen som avgjør om funnet blir et avvik. Boksen og teksten
 * står på samme linje, og hele linja er klikkbar gjennom <label for>. */
.avkrysning { display: flex; align-items: center; gap: var(--luft-3); }
.avkrysning input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }
.avkrysning label { margin: 0 !important; font-weight: 400 !important; color: inherit !important; }

/* På telefon blir fire tall ved siden av hverandre 70 px brede. To og
 * to leses; fire gjør det ikke. */
@media (max-width: 560px) {
  .revisjonstall__rad { grid-template-columns: repeat(2, 1fr); }
  .revisjonstall b { font-size: 22px; }
}

/* ---------------------------------------------------------------
 * Fareanalysen (§ 5a)
 *
 * Tiltaket er svaret på «hva gjør dere med det». Det er den setningen
 * tilsynet leser, og den kuttes aldri — samme resonnement som
 * avviksblokkene i rapporten og funnteksten i revisjonen.
 * --------------------------------------------------------------- */
.farekort__tiltak {
  margin: var(--luft-2) 0 0; font-size: 13.5px; line-height: 1.55;
  padding-left: calc(34px + var(--luft-3));
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.farekort__tiltak b { font-weight: 700; color: var(--blekk-svak); }
.farekort__spor {
  display: block; margin-top: var(--luft-2);
  padding-left: calc(34px + var(--luft-3));
  font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest);
}
/* Kortet har ingen typeikon som dokumentradene har, så innrykket over
 * ville skjøvet teksten inn mot ingenting på telefon. */
@media (max-width: 560px) {
  .farekort__tiltak, .farekort__spor { padding-left: 0; }
}

/* ---------------------------------------------------------------
 * Nedkjøling på Min dag
 *
 * Bolken står på den samme skjermen som listene, og den skal ikke
 * rope høyere enn dem: et forløp som går, er en opplysning, ikke et
 * varsel. Er det over fristen, får kortet .kort--haster og sier fra
 * der — én gang, på kortet det gjelder.
 * --------------------------------------------------------------- */
/* Toppen og regellinja deles av nedkjølingsbolken og skjenkeloggen.
 * Navnene var en gang nedkjølingens egne, og da den andre bolken
 * lånte dem, traff `.bolktopp` to elementer på Min dag — og
 * nedkjølingstesten stoppet på «strict mode violation». Et navn som
 * sier «nedkjøling» på noe to bolker bruker, er et navn som lyver. */
.bolktopp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--luft-3); flex-wrap: wrap;
}
/* Knappen er full bredde som standard (.knapp). I en rad med en
 * overskrift ville den presset overskriften til null bredde — samme
 * feil som ble rettet på revisjonsradene. */
.bolktopp .knapp { width: auto; flex: 0 0 auto; }
.bolktopp h2 { margin: 0; }

.bolkregel {
  margin: 4px 0 var(--luft-4);
  font-size: 13px; line-height: 1.55; color: var(--blekk-svakest);
}
.nedkjoling__tomt {
  margin: 0; font-size: 13.5px; color: var(--blekk-svakest);
}
/* Kortene inni panelet har allerede sin egen ramme. Uten luft over
 * det første ligger det klistret til regelteksten. */
.nedkjoling .kort { margin-top: var(--luft-3); }

@media (max-width: 420px) {
  /* På den smaleste telefonen får overskrift og knapp hver sin linje
   * heller enn å dele en linje som ikke er bred nok til begge. */
  .bolktopp .knapp { width: 100%; }
}

/* ---------------------------------------------------------------
 * Kontrollknappen
 *
 * Fast plass, som dag/natt-pilla — og av en grunn til: en inspektør
 * står i døra, og da er ett sted å lete etter verdt mer enn en knapp
 * som flytter seg.
 *
 * Nede til høyre, OVER bunnmenyen. Bunnmenyen er sticky og ligger
 * alltid nederst i vinduet, så en knapp på `bottom: 12px` ville lagt
 * seg oppå «Min logg».
 * --------------------------------------------------------------- */
.kontrollknapp {
  position: fixed;
  /* Festet til kanten av app-kolonnen, ikke til kanten av skjermen —
   * samme resonnement som for dag/natt-pilla. */
  right: max(12px, calc(50vw - 280px + 12px));
  bottom: calc(86px + var(--bunn));
  z-index: 40;

  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 76px; min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--kant);
  border-radius: 18px;
  background: var(--kort);
  box-shadow: var(--skygge-stor);
  color: var(--feil-tekst);
  font-family: var(--skrift);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.kontrollknapp:hover { background: var(--flate-mild); }

/* Ikonet i en egen sirkel, slik at fargen bæres av en flate og ikke
 * bare av teksten. En rød tekst alene på et hvitt kort leser som en
 * feilmelding; en sirkel med et skjold i leser som en knapp. */
.kontrollknapp__ikon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--feil-flate);
}
.kontrollknapp__navn { line-height: 1.1; }

/* Liggende telefon: nede til høyre er lagreknappen på måleskjermen,
 * og midt på kanten er tastaturet. Knappen går opp i topplinja, ved
 * siden av dag/natt-pilla — som alt har tatt 96 px der. Den legger
 * seg til venstre for den, og topplinja får plass til begge. */
@media (max-height: 520px) {
  .kontrollknapp {
    top: calc(7px + var(--topp)); bottom: auto; right: 116px;
    flex-direction: row; gap: 6px;
    min-width: 0; min-height: 34px; padding: 4px 10px;
    border-radius: 999px;
  }
  .kontrollknapp__ikon { width: 22px; height: 22px; }
  /* 224 og ikke 210: dag/natt-pilla tar 96 px fra kanten, og
   * kontrollknappen ligger på 116 px med en bredde på 98. Venstre
   * kant er dermed 214 px inn, og en overskrift som slutter der,
   * ligger inntil knappen. Målt, ikke gjettet — nettlesertesten
   * meldte 4 piksler overlapp på 210. */
  .topplinje, .tilbakelinje { padding-right: 224px; }
}

/* De brede skjermene har ingen bunnmeny å klare, og innholdet ligger
 * i en kolonne med marg til høyre. */
#app.bred .kontrollknapp { bottom: 24px; right: 24px; }

/* Innholdet får plass til knappen.
 *
 * En flytende knapp ligger oppå det den flyter over — det er hele
 * poenget med den. Men uten dette blir den SISTE boksen på siden
 * liggende under den for alltid, og da er det ikke en knapp som
 * dekker noe man kan rulle forbi: det er innhold man aldri får se.
 * Målt i nettleseren, ikke antatt. */
.skjerm .innhold { padding-bottom: 110px; }
@media (max-height: 520px) { .skjerm .innhold { padding-bottom: var(--luft-6); } }

/* ---------------------------------------------------------------
 * Tilsynsvelgeren
 * --------------------------------------------------------------- */
.tilsynsvelger { display: flex; flex-direction: column; gap: var(--luft-2); }

.tilsynsvalg {
  display: flex; align-items: center; gap: var(--luft-3);
  width: 100%; min-height: 64px;
  padding: var(--luft-3) var(--luft-4);
  border: 1px solid var(--kant); border-radius: 16px;
  background: var(--kort);
  font-family: var(--skrift); font-size: 15px;
  color: var(--blekk); text-align: left;
  cursor: pointer;
}
.tilsynsvalg:hover { background: var(--flate-mild); }
.tilsynsvalg__ikon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
/* min-width: 0 er det som gjør at teksten faktisk får krympe. Uten
 * den presses tekstkolonnen til null av naboene i flex-raden — samme
 * feil som ble rettet på revisjonsradene og i den vannrette menyen. */
.tilsynsvalg__tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tilsynsvalg__tekst b { font-weight: 700; }
.tilsynsvalg__tekst small { font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest); }
.tilsynsvalg svg { flex: 0 0 auto; transform: rotate(-90deg); color: var(--blekk-svakest); }

/* ---------------------------------------------------------------
 * Beredskapen — hva kommer tilsynet til å finne?
 * --------------------------------------------------------------- */
.beredskap { display: flex; flex-direction: column; gap: 1px; }

.beredskap__rad {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--luft-3); flex-wrap: wrap;
  padding: var(--luft-2) var(--luft-3);
  border-radius: 10px;
  font-size: 13.5px;
}
/* Fargen kommer aldri alene: raden med en advarsel har også en egen
 * kant til venstre, slik at den kan skilles ut uten farge. */
.beredskap__rad--advarsel {
  background: var(--flate-mild);
  box-shadow: inset 3px 0 0 var(--feil-tekst);
}
/* ---------------------------------------------------------------
 * Beredskapsrader med en forklaring under tittelen
 *
 * Alkoholskjermen bruker de samme radene, men med TO linjer i hver:
 * tittelen, og setningen som sier hva som mangler. Da holder ikke
 * avstandene fra énlinjeradene.
 *
 * Tre ting settes her, og alle tre av samme grunn — at gruppene ikke
 * skal presse hverandre:
 *   1. luft MELLOM radene, ikke 1 px. Tre tolinjers rader med
 *      hårstrek mellom seg leser som én blokk tekst.
 *   2. mer luft INNE i raden, så tittelen ikke klistrer seg til
 *      kanten over og setningen ikke til kanten under.
 *   3. luft mellom tittelen og setningen, som <p> ikke gir av seg
 *      selv her — margenene nullstilles i grunnstilen.
 * --------------------------------------------------------------- */
.beredskap--forklart { gap: var(--luft-3); margin-top: var(--luft-3); }

.beredskap--forklart .beredskap__rad {
  /* flex-start og ikke baseline: med to linjer til venstre og én til
   * høyre stiller baseline hjemmelen på linje med TITTELEN, men gir
   * den ingen plass til å puste. */
  align-items: flex-start;
  padding: var(--luft-3);
  gap: var(--luft-2) var(--luft-4);
}

.beredskap__tekst {
  display: flex; flex-direction: column; gap: var(--luft-1);
  /* Setningen skal få bryte, og hjemmelen skal få plass ved siden av
   * på brede skjermer. Er det ikke plass, faller hjemmelen ned på
   * egen linje av seg selv.
   *
   * MERK: her sto det `flex: 1 1 320px`, og det var feil på telefon.
   * Under 560 px snur en mediespørring raden til en KOLONNE, og da
   * er hovedaksen loddrett — flex-basis ble en HØYDE på 320 px, og
   * hjemmelen havnet et kvart skjermbilde under teksten sin.
   *
   * min-width virker på tvers av begge retninger: i en rad er den
   * terskelen som utløser bruddet, og i en kolonne er den kappet av
   * 100 % og gjør ingenting. */
  flex: 1 1 auto; min-width: min(100%, 320px);
}
.beredskap__tekst p { margin: 0; line-height: 1.5; }
.beredskap__tekst b { line-height: 1.4; }

.beredskap__navn { font-weight: 500; }
.beredskap__svar { color: var(--blekk-svakest); }
.beredskap__rad--advarsel .beredskap__svar { color: var(--feil-tekst); font-weight: 500; }

.kontrollhandlinger {
  display: flex; gap: var(--luft-2); flex-wrap: wrap;
  margin-top: var(--luft-3);
}
.kontrollhandlinger .knapp { width: auto; flex: 0 1 auto; }

/* ---------------------------------------------------------------
 * Seksjonene
 * --------------------------------------------------------------- */
.kontrollseksjon { padding: 0; overflow: hidden; }

.kontrollseksjon__hode {
  display: flex; align-items: center; gap: var(--luft-3);
  width: 100%; padding: var(--luft-3) 26px;
  border: none; background: none;
  font-family: var(--skrift); color: var(--blekk); text-align: left;
  cursor: pointer;
}
.kontrollseksjon__hode:hover { background: var(--flate-mild); }
.kontrollseksjon__navn { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.kontrollseksjon__navn b { font-size: 15px; font-weight: 700; }
.kontrollseksjon__navn small { font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest); }
.kontrollseksjon__hode svg { flex: 0 0 auto; color: var(--blekk-svakest); }
.kontrollseksjon__hode[aria-expanded="true"] svg { transform: rotate(180deg); }
.kontrollseksjon__hode .merkelapp { flex: 0 0 auto; }

.kontrollseksjon__kropp {
  padding: 0 26px var(--luft-4);
  border-top: 1px solid var(--kant);
  padding-top: var(--luft-3);
}

.kontrollrad {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--luft-3); flex-wrap: wrap;
  padding: var(--luft-2) 0;
  border-bottom: 1px solid var(--kant);
}
.kontrollrad:last-child { border-bottom: none; }
.kontrollrad__tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.kontrollrad__tekst b { font-size: 14px; font-weight: 500; }
.kontrollrad__tekst small {
  font-size: 12.5px; line-height: 1.45; color: var(--blekk-svakest);
  overflow-wrap: anywhere;
}

/* På telefon får hodet overskrift og merkelapp på hver sin linje.
 * Tre ting på 390 px gir en merkelapp på førti piksler. */
@media (max-width: 560px) {
  .kontrollseksjon__hode { flex-wrap: wrap; padding-left: var(--luft-4); padding-right: var(--luft-4); }
  .kontrollseksjon__navn { flex-basis: 100%; }
  .kontrollseksjon__kropp { padding-left: var(--luft-4); padding-right: var(--luft-4); }
}

/* Tilsynsraden i plattformportalen */
.tilsynsrad {
  display: flex; align-items: center; gap: var(--luft-3);
  padding: var(--luft-2) 0;
  border-bottom: 1px solid var(--kant);
}
.tilsynsrad:last-child { border-bottom: none; }
.tilsynsrad__ikon { font-size: 19px; line-height: 1; flex: 0 0 auto; }
.tilsynsrad__tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tilsynsrad__tekst b { font-size: 14px; font-weight: 500; }
.tilsynsrad__tekst small { font-size: 12px; line-height: 1.4; color: var(--blekk-svakest); }
.tilsynsrad__grunn { font-style: italic; }
.tilsynsrad__svar { color: var(--feil-tekst); }
.tilsynsrad .merkelapp, .tilsynsrad .knapp { flex: 0 0 auto; }

@media (max-width: 560px) {
  .tilsynsrad { flex-wrap: wrap; }
  .tilsynsrad__tekst { flex-basis: calc(100% - 40px); }
}

/* Beredskapsraden er en knapp: den går til seksjonen sin. Å lese «3
 * uten måling siste uke» og så måtte lete etter hvor det står, er
 * halve jobben gjort. */
button.beredskap__rad {
  width: 100%; border: none;
  font-family: var(--skrift); font-size: 13.5px;
  text-align: left; cursor: pointer;
}
button.beredskap__rad:hover { background: var(--felt); }

/* På telefon stables etiketten og svaret alltid. Med
 * space-between og flex-wrap ble det tilfeldig: de korte radene sto
 * på én linje og de lange på to, i samme liste. En liste man skal
 * skumme, skal ha samme form på hver rad. */
@media (max-width: 560px) {
  .beredskap__rad { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---------------------------------------------------------------
 * Skjenkeloggen på Min dag
 *
 * Den er bygget som nedkjølingsbolken og gjenbruker toppen og
 * regellinja derfra — de to svarer på samme slags spørsmål, og to
 * nesten like former på samme skjerm leser som én uryddig.
 *
 * Det som er ANNERLEDES er bevisst: ingen advarselsfarge, ingen
 * alarmramme, ingen rød teller. En avvisning er ikke et avvik — å
 * nekte en 17-åring øl er kontrollen som virket. En bolk som lyste
 * rødt hver gang noen gjorde jobben sin, ville lært den ansatte at
 * det lønner seg å la være å føre.
 * --------------------------------------------------------------- */
.skjenkelogg__tall {
  margin: 0 0 var(--luft-2);
  font-size: 13.5px; color: var(--blekk-svakest);
}

.skjenkerad {
  display: flex; flex-direction: column; gap: var(--luft-1);
  padding: var(--luft-3);
}
.skjenkerad__hoved {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--luft-3); flex-wrap: wrap;
}
.skjenkerad__tid {
  font-size: 13px; color: var(--blekk-svakest);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* En trukket føring står med strek over. Den er STRØKET, ikke borte —
 * og det skal synes uten at man må lese sporlinja for å finne det ut.
 *
 * Streken alene ville vært for svak på en liten skjerm, og opasitet
 * alene ville bare gjort raden vanskeligere å lese uten å si hvorfor.
 * Derfor begge, og sporlinja under sier hvem som trakk den og hvorfor. */
.skjenkerad--trukket .skjenkerad__hoved b { text-decoration: line-through; }
.skjenkerad--trukket { opacity: .72; }

@media (max-width: 420px) {
  .skjenkerad__hoved { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------
 * Alkoholskjermen
 * --------------------------------------------------------------- */
.gruppevalg { display: flex; flex-direction: column; gap: var(--luft-2); }

/* Én ukedag: navnet og tre tider. Grid og ikke flex, fordi de sju
 * radene skal ha SAMME kolonnebredder — med flex ville «Mandag» og
 * «Onsdag» gitt hver sin plassering av feltene, og en tabell man skal
 * lese nedover, skal stå i støpte kolonner. */
.tidsrad {
  display: grid;
  grid-template-columns: 90px repeat(3, minmax(0, 1fr));
  align-items: end; gap: var(--luft-2) var(--luft-3);
  padding: var(--luft-2) 0;
}
.tidsrad__dag { font-size: 14px; }
.tidsrad__felt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tidsrad__felt label {
  margin: 0 !important; font-size: 11.5px; font-weight: 400 !important;
  color: var(--blekk-svakest) !important;
}
.tidsrad__felt input { width: 100%; }

/* På telefon får dagen sin egen linje, og de tre feltene deler
 * bredden under. Fire kolonner på 320 px gir 60 px hver, og «TT:MM»
 * får ikke plass. */
@media (max-width: 560px) {
  .tidsrad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tidsrad__dag { grid-column: 1 / -1; }
}

/* De to bryterne i portalen — tilsyn og regelverk — står side om side
 * og åpner hver sin liste under seg. Wrap, fordi den ene lista kan
 * være åpen mens den andre lukkes. */
.portalbrytere { display: flex; gap: var(--luft-3); flex-wrap: wrap; align-items: flex-start; }
.portalbrytere > div { flex: 1 1 260px; min-width: 0; }