/* ==========================================================================
   Kundeservice, del 4: den Gmail-like skjermen (4. oktober 2026,
   docs/kundeservice-design.md del 12.9).

   Theodor: panelet skal minne mest mulig om Gmail, «slik at hun egentlig
   føler hun jobber i det samme gamle systemet». Likheten ligger i oppsettet,
   rytmen og oppførselen, ikke i Googles farger eller ikoner: hver verdi her
   er et Lodd-token.

   ULESTE RADER ER HVITE OG FETE, LESTE ER LETT GRÅ. Det er det Theodor pekte
   på i skjermbildet av Gmail, og det er det eneste raden sier om lest. Et
   diskret «Besvart» sier om vi svarte sist, og alder-merket sier hvor lenge
   kunden har ventet. Tre ulike ting, tre ulike steder.

   Boksene til venstre er menyens nivå to, meldt med nordivaMeld, så
   Kundeservice ser ut som resten av appen. Fargen på «Må besvares» og den
   fete Innboksen står på <html> (data-ks-nivaa og data-ks-uleste), fordi
   tegnNivaaTo() i os.js lager radene og ikke skal kjenne kundeservice.

   Tre spalter inne på skjermen: lista, sidefeltet og den smale skinna med
   Huskeliste og Fakta. Under 1100 px står de over hverandre, med skinna
   øverst. Alt annet er ett kort.
   ========================================================================== */

:root {
  --ks-skinne: 44px;
  --ks-panel: 300px;
  --ks-rad: 44px;
  --ks-avsender: 180px;
  --ks-tid: 56px;
  --ks-alder: 40px;
  --ks-miniatyr: 64px;
  --ks-tall: 200px;
  --ks-sokefelt: 420px;
  --ks-svar-h: 160px;
  --ks-snutt-maks: 520px;
}

#skjerm-kundeservice .ks-flate { min-width: 0; }
#skjerm-kundeservice .ks-ingress { margin: 0 0 var(--s-5); }

#skjerm-kundeservice .ks-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#skjerm-kundeservice .ks-ikon { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- søkefeltet ------------------------------------------------------------
   «Søk i e-post», som i Gmail, men mot basen: emnet, snutten og avsenderen.
   Gmail har sitt eget søk, og «Åpne i Gmail» er veien dit. */
#skjerm-kundeservice .ks-sok {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--ks-sokefelt);
  margin: 0 0 var(--s-5);
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
}
#skjerm-kundeservice .ks-sok-ikon { display: flex; align-items: center; color: var(--ink-3); }
#skjerm-kundeservice .ks-sok input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--finger);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-4);
}
#skjerm-kundeservice .ks-sok input:focus { outline: none; }
#skjerm-kundeservice .ks-sok:focus-within { outline: 2px solid var(--brand-tekst); outline-offset: 2px; }

/* --- de to tallene ---------------------------------------------------------
   «Innboks» er Gmails uleste samtaler, «Må besvares» er køen. De to var
   ulike 4. oktober 2026, og det var riktig: derfor står de ved siden av
   hverandre med en setning hver, og aldri det samme tallet under to navn. */
#skjerm-kundeservice .ks-tall {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--ks-tall), 1fr));
  margin: 0 0 var(--s-5);
}
/* Kortet er Lodds eget .kort, så det deler skyggen med resten av appen. */
#skjerm-kundeservice .ks-tallkort {
  display: grid;
  gap: var(--s-1);
  color: var(--ink);
  text-decoration: none;
}
#skjerm-kundeservice .ks-tallverdi {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-7);
  line-height: var(--t-7-h);
}
#skjerm-kundeservice .ks-tallkort[data-nivaa="amber"] .ks-tallverdi { color: var(--amber); }
#skjerm-kundeservice .ks-tallkort[data-nivaa="rod"] .ks-tallverdi { color: var(--rod); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-kundeservice .ks-tallkort:hover { background: var(--flate-2); }
}
#skjerm-kundeservice .ks-tallkort:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: 2px; }

/* --- banneret -------------------------------------------------------------
   Én rolig linje når noe har ventet over grensa, og ingenting når alt er i
   rute. Dette er sikkerhetsnettet: det står på uansett bryter. */
#skjerm-kundeservice .ks-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--amber-svak);
  color: var(--amber);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-banner[data-nivaa="rod"] { background: var(--rod-svak); color: var(--rod); }
#skjerm-kundeservice .ks-banner .knapp { margin-left: auto; }

#skjerm-kundeservice .ks-merk {
  margin: 0 0 var(--s-5);
  color: var(--ink-3);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}

/* --- rommet: lista, sidefeltet og skinna ---------------------------------- */

#skjerm-kundeservice .ks-rom { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
#skjerm-kundeservice .ks-midten { min-width: 0; }
@container innhold (min-width: 820px) {
  #skjerm-kundeservice .ks-rom {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
  }
  /* Skinna står først i DOM-en, for telefonen. Her hører den til høyre. */
  #skjerm-kundeservice .ks-skinne { order: 3; }
  #skjerm-kundeservice .ks-midten { order: 1; }
  #skjerm-kundeservice .ks-panel { order: 2; width: var(--ks-panel); }
}

/* Den smale ikonraden ytterst, som Gmails eget sidepanel. */
#skjerm-kundeservice .ks-skinne {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
/* Under 820 er skinna to vanlige knapper med navn. .ikonknapp er 32 bred,
   så bredden må slippes fri her, ellers renner navnet ut av knappen. */
#skjerm-kundeservice .ks-skinneknapp { gap: var(--s-3); width: auto; padding: 0 var(--s-4); }
#skjerm-kundeservice .ks-skinnenavn { color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
@container innhold (min-width: 820px) {
  /* Fra her er den Gmails smale ikonrad i kanten: navnet står i tittelen. */
  #skjerm-kundeservice .ks-skinne {
    flex-direction: column;
    align-items: center;
    flex: 0 0 var(--ks-skinne);
    padding-left: var(--s-3);
    border-left: 1px solid var(--line);
    align-self: stretch;
  }
  #skjerm-kundeservice .ks-skinneknapp { width: 32px; padding: 0; }
  #skjerm-kundeservice .ks-skinnenavn { display: none; }
}
#skjerm-kundeservice .ks-skinneknapp[aria-pressed="true"] { background: var(--brand-svak); color: var(--brand-tekst); }

#skjerm-kundeservice .ks-panel {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}

/* --- verktøylinja over lista --------------------------------------------- */

#skjerm-kundeservice .ks-faner { margin: 0 0 var(--s-4); }
#skjerm-kundeservice .ks-verktoy {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin: 0 0 var(--s-4);
}
#skjerm-kundeservice .ks-valgtall { color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-kundeservice .ks-teller {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  line-height: var(--t-3-h);
}

/* Avkryssingsboksen med en klikkflate en finger treffer. */
#skjerm-kundeservice .ks-kryss {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--finger);
  min-height: var(--finger);
  cursor: pointer;
}
/* Feltet dekker hele flata og er usynlig. Ruta og haken tegnes av etiketten,
   så det man ser er 16 og det man treffer er 44. */
#skjerm-kundeservice .ks-kryss input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#skjerm-kundeservice .ks-kryss::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  background: var(--flate);
}
#skjerm-kundeservice .ks-kryss:has(input:checked)::before { border-color: var(--brand); background: var(--brand); }
#skjerm-kundeservice .ks-kryss:has(input:checked)::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid var(--brand-blekk);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
#skjerm-kundeservice .ks-kryss:has(input:focus-visible)::before { outline: 2px solid var(--brand-tekst); outline-offset: 2px; }

/* --- lista ---------------------------------------------------------------- */

#skjerm-kundeservice .ks-liste { padding: 0; overflow: hidden; }
#skjerm-kundeservice .ks-tom { padding: var(--s-2) var(--s-5); }

#skjerm-kundeservice .ks-rad {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  min-height: var(--ks-rad);
  padding: 0 var(--s-3);
  border-top: 1px solid var(--line);
  /* LEST: lett grå, som i Gmail. */
  background: var(--flate-2);
}
#skjerm-kundeservice .ks-rad:first-child { border-top: 0; }
/* ULEST: hvit og fet. */
#skjerm-kundeservice .ks-rad[data-ulest="ja"] { background: var(--flate); }
#skjerm-kundeservice .ks-rad[data-ulest="ja"] .ks-avsender,
#skjerm-kundeservice .ks-rad[data-ulest="ja"] .ks-emne { font-weight: 600; color: var(--ink); }
/* Raden j og k står på. Outline og ikke skygge: en skygge her ville sett ut
   som at raden flyter, og den gjør den ikke. */
#skjerm-kundeservice .ks-rad[data-peker="ja"] { outline: 2px solid var(--brand-tekst); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-kundeservice .ks-rad:hover { background: var(--flate-3); }
}

#skjerm-kundeservice .ks-stjerneknapp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--finger);
  min-height: var(--finger);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
#skjerm-kundeservice .ks-stjerneknapp[aria-pressed="true"] { color: var(--amber); }
#skjerm-kundeservice .ks-stjerneknapp:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: -2px; }

#skjerm-kundeservice .ks-apne {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-apne:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: -2px; border-radius: var(--r-1); }
#skjerm-kundeservice .ks-avsender {
  flex: 0 0 var(--ks-avsender);
  width: var(--ks-avsender);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}
#skjerm-kundeservice .ks-linje {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#skjerm-kundeservice .ks-emne { color: var(--ink); }
#skjerm-kundeservice .ks-snutt { color: var(--ink-3); }
#skjerm-kundeservice .ks-radmerker { display: flex; gap: var(--s-2); flex: 0 0 auto; }

/* Alder-merket: hvor lenge kunden har ventet. Amber etter 24 timer, rødt
   etter 48, og grensene kommer fra serveren. */
#skjerm-kundeservice .ks-alder {
  flex: 0 0 auto;
  min-width: var(--ks-alder);
  padding: 0 var(--s-2);
  border-radius: var(--r-1);
  background: var(--amber-svak);
  color: var(--amber);
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-alder[data-nivaa="rod"] { background: var(--rod-svak); color: var(--rod); }

#skjerm-kundeservice .ks-tid {
  flex: 0 0 auto;
  min-width: var(--ks-tid);
  text-align: right;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-radhoyre { display: flex; gap: var(--s-2); align-items: center; flex: 0 0 auto; }
#skjerm-kundeservice .ks-radknapper { display: flex; gap: var(--s-1); flex: 0 0 auto; }
#skjerm-kundeservice .ks-radknapper .ikonknapp[aria-pressed="true"] { color: var(--gronn); }

/* Brikkene: fylt flate, ingen kant, og fargen betyr noe. */
#skjerm-kundeservice .ks-brikke {
  display: inline-block;
  padding: 0 var(--s-2);
  border-radius: var(--r-1);
  background: var(--flate-3);
  color: var(--ink-2);
  font-size: var(--t-2);
  line-height: var(--t-3-h);
  font-weight: 500;
  white-space: nowrap;
}
#skjerm-kundeservice .ks-brikke[data-slag="venter"] { background: var(--amber-svak); color: var(--amber); }
#skjerm-kundeservice .ks-brikke[data-slag="feil"] { background: var(--rod-svak); color: var(--rod); }
#skjerm-kundeservice .ks-brikke[data-slag="gjort"] { background: var(--gronn-svak); color: var(--gronn); }

/* Telefon og mellombredder: raden blir et kort, som i Gmail-appen. To
   linjer: avkryssing og stjerne til venstre med alder, tid og knappene til
   høyre, og hele teksten på linja under. Med alt på én flyt falt tiden ned
   til venstre under teksten, og raden ble tre linjer høy. */
@container innhold (max-width: 699px) {
  #skjerm-kundeservice .ks-rad { flex-wrap: wrap; align-items: center; row-gap: 0; padding: var(--s-2) var(--s-3); }
  #skjerm-kundeservice .ks-rad .ks-kryss { order: 1; }
  #skjerm-kundeservice .ks-stjerneknapp { order: 1; }
  #skjerm-kundeservice .ks-radhoyre { order: 2; margin-left: auto; }
  #skjerm-kundeservice .ks-apne {
    order: 3;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding: 0 0 var(--s-3);
  }
  #skjerm-kundeservice .ks-avsender { flex: 0 0 auto; width: auto; max-width: 100%; }
  #skjerm-kundeservice .ks-linje { white-space: normal; max-width: var(--ks-snutt-maks); }
  #skjerm-kundeservice .ks-radmerker { flex-wrap: wrap; }
  #skjerm-kundeservice .ks-tid { min-width: 0; }
}

/* --- en tråd -------------------------------------------------------------- */

#skjerm-kundeservice .ks-tradverktoy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin: 0 0 var(--s-4);
}
#skjerm-kundeservice .ks-tradverktoy .ikonknapp[aria-pressed="true"] { color: var(--amber); }
#skjerm-kundeservice .ks-tradverktoy .knapp[aria-pressed="true"] { background: var(--gronn-svak); color: var(--gronn); }

#skjerm-kundeservice .ks-tradtittel { margin: 0 0 var(--s-4); }
#skjerm-kundeservice .ks-tradtittel h2 { margin: 0 0 var(--s-3); font-size: var(--t-6); line-height: var(--t-6-h); overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-merker { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Grunnen øverst: hvorfor saken trenger et menneske, før tråden. */
#skjerm-kundeservice .ks-grunn {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--line-3);
}
#skjerm-kundeservice .ks-grunn[data-slag="venter"] { border-left-color: var(--amber); }
#skjerm-kundeservice .ks-grunn[data-slag="feil"] { border-left-color: var(--rod); }
#skjerm-kundeservice .ks-grunn p { margin: var(--s-2) 0 0; font-size: var(--t-4); line-height: var(--t-4-h); overflow-wrap: anywhere; }

/* Reglenes forslag, aldri en regel som tar en kundemelding ut av køen selv:
   ett klikk, og et menneske tok valget. */
#skjerm-kundeservice .ks-forslag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}

#skjerm-kundeservice .ks-trad { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
#skjerm-kundeservice .ks-melding { padding: 0; overflow: hidden; }
#skjerm-kundeservice .ks-melding.er-oss { background: var(--flate-2); }
#skjerm-kundeservice .ks-meldinghode {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  width: 100%;
  min-height: var(--finger);
  padding: var(--s-3) var(--s-5);
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  /* En <button> arver verken familie eller størrelse: uten dette sto navnet
     i nettleserens egen 13,33 px, som ikke er på skalaen. */
  font-family: var(--font-ui);
  font-size: var(--t-4);
  line-height: var(--t-4-h);
}
#skjerm-kundeservice .ks-meldinghode:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: -2px; }
/* Avsenderen er en kunde og har ingen personfarge i TEAM, så .avatar.person
   står uten flate og med hvitt blekk. Her får den sin egen, og vårt eget svar
   får merkets. */
#skjerm-kundeservice .ks-meldinghode .avatar { background: var(--flate-3); color: var(--ink-2); }
#skjerm-kundeservice .ks-melding.er-oss .ks-meldinghode .avatar { background: var(--brand); color: var(--brand-blekk); }
#skjerm-kundeservice .ks-meldingnavn { flex: 1 1 auto; min-width: 0; }
#skjerm-kundeservice .ks-meldingnavn .tittel { display: block; font-weight: 500; }
#skjerm-kundeservice .ks-meldingnavn .under {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-meldingtid {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-tekst {
  margin: 0;
  padding: 0 var(--s-5) var(--s-5);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--t-4);
  line-height: var(--t-5-h);
}

#skjerm-kundeservice .ks-vedlegg { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0 var(--s-5) var(--s-5); }
#skjerm-kundeservice .ks-fil {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--finger);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-miniatyr {
  width: var(--ks-miniatyr);
  height: var(--ks-miniatyr);
  border-radius: var(--r-1);
  object-fit: cover;
}
#skjerm-kundeservice .ks-filikon { display: flex; color: var(--ink-3); }
#skjerm-kundeservice .ks-filnavn { overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-filstorrelse { color: var(--ink-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-kundeservice .ks-fil:hover { background: var(--flate-3); }
}

/* --- svarboksen -----------------------------------------------------------
   Nederst i tråden, som i Gmail. Signaturen står UNDER feltet, ikke i det:
   serveren legger den på når svaret går ut, så den ikke kan redigeres bort
   ved et uhell. */
#skjerm-kundeservice .ks-svarboks { padding: var(--s-4) var(--s-5) var(--s-5); }
#skjerm-kundeservice .ks-svarhode { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; margin: 0 0 var(--s-3); }
#skjerm-kundeservice .ks-mottaker { color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-svarboks .skrivefelt { min-height: var(--ks-svar-h); max-height: none; overflow-y: auto; }
/* ORD I GEIST, TALL I MONO (husregelen). En PC-signatur er navn, tittel og
   telefon, altså ord, og den står under feltet hele dagen mens Silja
   skriver. At den er stillere enn svaret, bærer --ink-3 og --t-2. */
#skjerm-kundeservice .ks-signatur {
  margin: var(--s-3) 0 0;
  color: var(--ink-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-ui);
  font-size: var(--t-2);
  line-height: var(--t-3-h);
}
/* Linja om at ingen signatur er hentet, er en beskjed og ikke en signatur:
   den brytes som vanlig tekst. */
#skjerm-kundeservice .ks-signatur-mangler { white-space: normal; }
#skjerm-kundeservice .ks-svarknapper { margin: var(--s-4) 0 0; }

/* ANGRELINJA: svaret ligger i tråden, og sendingen skjer først når fristen
   er ute. Trykker hun Angre, skjer den aldri. */
#skjerm-kundeservice .ks-angrelinje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-kundeservice .ks-angrelinje .knapp { margin-left: auto; }

/* «Til Silja» og «Avvis» spør etter grunnen her, aldri i en dialog. */
#skjerm-kundeservice .ks-grunnfelt { margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); }
#skjerm-kundeservice .ks-grunnfelt input { width: 100%; }
#skjerm-kundeservice .ks-grunnfelt .knapperad { padding: var(--s-3) 0 0; }

#skjerm-kundeservice .ks-kvittering { margin: var(--s-3) 0 0; color: var(--gronn); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-kundeservice .ks-kvittering:empty { display: none; }
#skjerm-kundeservice .ks-svarboks .feilmelding:empty { display: none; }

/* --- fakta og kontrollrunden i sidefeltet -------------------------------- */

#skjerm-kundeservice .ks-bolk { min-width: 0; }
#skjerm-kundeservice .ks-fakta {
  margin: 0;
  padding: var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--t-2);
  line-height: var(--t-4-h);
}
#skjerm-kundeservice .ks-flagg { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
#skjerm-kundeservice .ks-flagg li { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); }
#skjerm-kundeservice .ks-sendtliste { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); color: var(--ink-3); font-size: var(--t-2); line-height: var(--t-3-h); }

#skjerm-kundeservice .ks-versjon { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
#skjerm-kundeservice .ks-versjon:first-of-type { border-top: 0; }
#skjerm-kundeservice .ks-versjon .tittel { display: flex; gap: var(--s-3); align-items: center; font-weight: 500; }
#skjerm-kundeservice .ks-versjon .under { display: block; color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-kundeservice .ks-funnliste { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-3); }
#skjerm-kundeservice .ks-funn { display: grid; gap: var(--s-1); justify-items: start; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-sitat { color: var(--ink); }

/* --- huskelista ----------------------------------------------------------
   Siljas egen, som Google Oppgaver ved siden av Gmail. Ingen andre ser
   punktene, heller ikke admin. */
#skjerm-kundeservice .ks-hl { padding: var(--s-4) var(--s-5) var(--s-5); min-width: 0; }
/* I sidefeltet er panelet alt et kort, og luften er panelets. */
#skjerm-kundeservice .ks-panel .ks-hl { padding: 0; }
#skjerm-kundeservice .ks-hl-ny { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-3) 0 var(--s-4); }
#skjerm-kundeservice .ks-hl-ny input[type="text"] { flex: 1 1 200px; min-width: 0; }
#skjerm-kundeservice .ks-hl-ny input[type="date"] {
  flex: 0 0 auto;
  min-height: var(--finger);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: var(--flate-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-3);
}
#skjerm-kundeservice .ks-hl-liste { list-style: none; margin: 0; padding: 0; display: grid; }
#skjerm-kundeservice .ks-hl-punkt {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--finger);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
#skjerm-kundeservice .ks-hl-punkt:first-child { border-top: 0; }
#skjerm-kundeservice .ks-hl-tekst { flex: 1 1 auto; min-width: 0; }
#skjerm-kundeservice .ks-hl-tekst .tittel { display: block; font-size: var(--t-4); line-height: var(--t-4-h); overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-hl-tekst .under { display: block; color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); overflow-wrap: anywhere; }
#skjerm-kundeservice .ks-hl-frist { display: inline-block; margin-right: var(--s-3); color: var(--ink-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-2); }
#skjerm-kundeservice .ks-hl-lenke { font-size: var(--t-2); }
/* Haken kommer inn med en rolig bevegelse, og teksten dempes når punktet er
   gjort. Det er en animasjon og ikke en overgang, fordi lista tegnes på nytt:
   en overgang trenger den samme noden, en animasjon spiller når den nye
   kommer. */
@keyframes ks-hake-inn {
  from { opacity: 0; transform: translateY(-1px) rotate(45deg) scale(.5); }
  to   { opacity: 1; transform: translateY(-1px) rotate(45deg) scale(1); }
}
#skjerm-kundeservice .ks-hl-punkt .ks-kryss:has(input:checked)::after {
  animation: ks-hake-inn var(--tid-3) var(--kurve) both;
}
#skjerm-kundeservice .ks-hl-punkt[data-fullfort="ja"] .ks-hl-tekst .tittel {
  color: var(--ink-3);
  text-decoration: line-through;
}
#skjerm-kundeservice .ks-hl-ferdige { margin: var(--s-4) 0 0; }
#skjerm-kundeservice .ks-hl-ferdige summary {
  min-height: var(--finger);
  display: flex;
  align-items: center;
  color: var(--ink-2);
  font-size: var(--t-3);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  #skjerm-kundeservice .ks-hl-punkt .ks-kryss:has(input:checked)::after { animation: none; }
}

/* --- tastaturhjelpen ------------------------------------------------------ */

#skjerm-kundeservice .ks-hjelp { padding: var(--s-4) var(--s-5) var(--s-5); margin: 0 0 var(--s-5); }
#skjerm-kundeservice .ks-hjelpliste {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(var(--ks-tall), 1fr));
}
#skjerm-kundeservice .ks-hjelpliste li { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-2); }
#skjerm-kundeservice .ks-hjelpliste .mono { font-family: var(--font-mono); color: var(--ink); }

/* MED FINGER ER GULVET 44. Lodds .ikonknapp er 32 med et usynlig lag utenpå,
   men her står knappene så tett at lagene dekker hverandre, og da er det
   naboknappen fingeren treffer. Her blir flata ekte. */
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  #skjerm-kundeservice .ikonknapp,
  #skjerm-kundeservice .ks-skinneknapp {
    min-width: var(--finger);
    min-height: var(--finger);
  }
  #skjerm-kundeservice .ks-radknapper { gap: var(--s-2); }
  #skjerm-kundeservice .ks-verktoy { gap: var(--s-4); }
}

/* --- tallene i menyen ----------------------------------------------------
   Nivået står på <html>, satt av kundeservice.js: tegnNivaaTo() i os.js
   lager radene under systemet, og skallet skal ikke kjenne innsiden av en
   modul. «Må besvares» får farge når noe har ventet over grensa, og
   Innboksen blir fet når noe er ulest, som i Gmail. */
:root[data-ks-nivaa="amber"] .sidemeny [data-deler="kundeservice"] [data-til="kundeservice/besvares"] .tall,
#kundeservice-tall[data-nivaa="amber"] { background: var(--amber-svak); color: var(--amber); }
:root[data-ks-nivaa="rod"] .sidemeny [data-deler="kundeservice"] [data-til="kundeservice/besvares"] .tall,
#kundeservice-tall[data-nivaa="rod"] { background: var(--rod-svak); color: var(--rod); }
:root[data-ks-uleste="ja"] .sidemeny [data-deler="kundeservice"] [data-til="kundeservice/innboks"] { font-weight: 600; }

/* --- rollen kundeservice ------------------------------------------------- */

/* Silja ser bare panelet (4. oktober 2026). Skallet setter data-rolle, og
   alt som ville spurt en annen del av appen, står ikke der. Serveren
   stenger uansett: dette er for at ingenting skal se ødelagt ut. */
:root[data-rolle="kundeservice"] #sidemeny button[data-til]:not([data-til="kundeservice"]):not([data-til^="kundeservice/"]),
:root[data-rolle="kundeservice"] #sidemeny .etikett,
:root[data-rolle="kundeservice"] #modulmeny,
:root[data-rolle="kundeservice"] .sokefelt,
:root[data-rolle="kundeservice"] #chatknapp,
:root[data-rolle="kundeservice"] #kompisknapp { display: none; }