/*
 * Forsida — «Flisene».
 *
 * Ingen hex-koder her; alt kommer fra `felles/stil/tema.css`, og `vakt_farger`
 * krever at det forblir slik.
 *
 * ┌───────────────────────────────────────────────────────────────────────────┐
 * │ ELLEVE LIKE FLATER ER INGEN MENY — DET ER EN VEGG.                       │
 * │                                                                           │
 * │ Den gamle forsida ga hvert verktøy nøyaktig samme boks. Da må øyet lese   │
 * │ alle elleve før det kan velge, hver eneste gang. Her er hierarkiet gjort  │
 * │ til form:                                                                 │
 * │                                                                           │
 * │   1. Førstevalget får full bredde, is-kant, eget tall og en pil.          │
 * │   2. Fliser med et tall står foran fliser uten — klienten sorterer.       │
 * │   3. Alt annet er rolig: samme flate, samme vekt, ingen konkurranse.      │
 * │                                                                           │
 * │ «Clean» er ikke fravær av ting. Det er at bare ÉN ting roper.             │
 * └───────────────────────────────────────────────────────────────────────────┘
 */

/* ── Mens vi venter ─────────────────────────────────────────────────────── */

/*
 * Sida var HELT blank til to kall etter hverandre var hjemme.
 *
 * `/api/meg` må stå alene FØR `/api/forsiden` — se begrunnelsen i hub.js — og
 * begge seksjonene i markupen er `hidden` til det siste svaret lander. På 4G
 * er det lett 600–1 200 ms med tom navy flate, og en blank skjerm sier ikke om
 * noe lastes eller om noe er ødelagt; man laster på nytt, og venter på nytt.
 *
 * Linja fjernes av den første av de tre vis-funksjonene som får kjøre, også
 * den som viser innloggingen når kallet feilet.
 */
.laster {
  min-height: 100dvh;
  display: grid; place-items: center;
  margin: 0; padding: var(--marg);
  text-align: center; color: var(--muted); font-size: 14px;
}

/* ── Innlogging ─────────────────────────────────────────────────────────── */

/*
 * Innloggingsskjermen OG den påtvungne passordbytte-skjermen.
 *
 * `--marg` og ikke 20 px flatt: dette er den ene sida i huben som IKKE har
 * `.wrap`, og den sto derfor 20 px fra kanten der alt annet står 16 (14 under
 * 360). Hakket og hjemindikatoren må med her av samme grunn — `body` bærer
 * dem ikke lenger, se begrunnelsen i base.css. Uten dem lå «Hold meg
 * innlogget» og «Lagre og fortsett» delvis bak hjemindikatoren på iPhone.
 */
.midt {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: calc(var(--marg) + env(safe-area-inset-top)) var(--marg)
           calc(var(--marg) + env(safe-area-inset-bottom));
}
/*
 * `.kort` i markupen, ikke en egen bakgrunn her.
 *
 * Feltene er navy fordi de overalt ellers står på et navy2-kort. Innloggingen
 * var den ENESTE flata uten kort, og hadde derfor sin egen `background:
 * var(--navy2)` på feltene — en kopi som fortalte at kortet manglet.
 * Sett i nettleseren 21.08.2026: uten kortet forsvinner feltene i sida, og
 * bare den tynne kanten skiller dem fra bakgrunnen.
 */
.inn { width: 100%; max-width: 340px; display: grid; gap: 8px; padding: 22px; }
/* `font-size` sto her fra den gang merket var TEKST. Merket er en PNG nå, så
   regelen traff ingenting. */
.inn .merke.stor { margin-bottom: 18px; }
/* `.inn` er et rutenett med `gap: 8px` — avstanden UNDER etiketten kommer
   derfra, ikke fra marga base.css gir den. */
.inn label { margin-top: 8px; margin-bottom: 0; }
/*
 * Hjelpetekstene i passordbytte-kortet.
 *
 * `.under` er ikke definert i base.css — fem andre flater har hver sin lokale
 * utgave, og her fantes ingen. Følgen: begge avsnittene arvet 16 px offwhite,
 * altså TYNGRE enn de sølvfargede etikettene over feltene de forklarer. Sett
 * på skjermbildet 10.09.2026, 320 px: «Minst 12 tegn, og minst ett som ikke
 * er en bokstav» sto like tungt som overskriften «Velg ditt eget passord».
 */
.inn .under { margin: 0; color: var(--silver); font-size: 14px; line-height: 1.5; }
.inn .avkryss { margin-top: 14px; }
.inn .status:empty { display: none; }
.inn .knapp { margin-top: 10px; }

/* ── Rammen rundt innholdet ─────────────────────────────────────────────── */

/* Formen bor i base.css. Forsida er den bredeste flata i huben.
   `--stabel` er litt større her enn standarden: forsida er en meny med fire
   bolker, ikke en liste med tjue rader, og bolkene skal kunne skilles på ett
   blikk. */
.wrap { --wrap-maks: 940px; --stabel: 20px; }

/* Hilsenen står nærmere sitt eget innhold enn bolkene under står hverandre.
   Marg og ikke gap, fordi den hører TIL førstevalget under seg. */
.hilsen-rad { margin-bottom: 4px; }
#hei {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 34px); letter-spacing: -.025em;
  line-height: 1.1; margin: 0 0 5px;
}
.dagslinje { margin: 0; color: var(--silver); font-size: 15.5px; }

/* ── Førstevalget ───────────────────────────────────────────────────────── */

.forste {
  display: flex; align-items: center; gap: 17px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--navy2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--ice);
  color: inherit; text-decoration: none;
  transition: background .13s ease, border-color .13s ease;
}
.forste:hover { background: var(--navy3); border-color: var(--border-hover); border-left-color: var(--ice); }
.forste-ikon { display: flex; color: var(--ice); }
.forste-ikon .ikn { width: 26px; height: 26px; }
.forste-tekst { display: grid; gap: 2px; min-width: 0; }
.forste-navn { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.015em; }
.forste-hva { font-size: 14px; color: var(--silver); }
.forste-tall {
  margin-left: auto; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1; color: var(--ice);
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.forste-tall small {
  display: block; margin-top: 3px;
  font-family: var(--font); font-weight: 400; font-size: 11.5px;
  color: var(--muted); letter-spacing: 0; text-align: right;
}
.forste-pil { display: flex; color: var(--muted); }
.forste-pil .ikn { width: 19px; height: 19px; }
.forste:hover .forste-pil { color: var(--ice); }

/* ── Rutenettet ─────────────────────────────────────────────────────────── */

.rutenett {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.rutenett > li { display: flex; }

.flis {
  flex: 1; display: grid; gap: 9px; align-content: start;
  padding: 16px 17px 17px;
  border-radius: var(--r-md);
  background: var(--navy2); border: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: background .13s ease, border-color .13s ease;
}
.flis:hover { background: var(--navy3); border-color: var(--border-hover); }
.flis-hode { display: flex; align-items: center; gap: 10px; }
.flis-hode .ikn { width: 19px; height: 19px; color: var(--ice); flex: none; }
.flis-navn { font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.flis-hva { font-size: 13px; color: var(--muted); line-height: 1.45; }
.flis-tall {
  margin-top: 2px; font-size: 13px; color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.flis-tall b { font-family: var(--font-display); font-weight: 700; font-size: 15px; }

/*
 * Et verktøy uten skjerm blir en flate UTEN lenke, med et ord om hvorfor.
 * I 1.0 hadde grå knapper `pointer-events:none`, så klikket aldri nådde fram
 * til noe som kunne forklart hva som manglet.
 */
.flis.kommer { cursor: default; }
.flis.kommer:hover { background: var(--navy2); border-color: var(--border); }
.flis.kommer .flis-navn, .flis.kommer .flis-hode .ikn { color: var(--muted); }

/* ── Avvikene ───────────────────────────────────────────────────────────── */

.avvik-seksjon { margin-top: 20px; }
.seksjonstittel {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}
.seksjonstittel .ikn { width: 15px; height: 15px; color: var(--warn); }

.avvik { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/*
 * Kanten og flata bor på `li`, luften og innholdet på `.avvik-rad`.
 *
 * Grunnen til delingen: raden er en `<a>` når varselet peker et sted og en
 * `<div>` når det ikke gjør det. Var luften på `li`, ville lenka bare dekket
 * teksten — og en trykkflate som er 20 px høy midt i et 44 px kort er en
 * bomming som ser ut som at ingenting skjedde.
 */
.avvik li {
  border-radius: var(--r-md);
  background: var(--navy2); border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  font-size: 14.5px;
}
.avvik li.hoy { border-left-color: var(--bad); }

.avvik-rad {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--trykk);
  padding: 14px 16px;
  border-radius: inherit;
}
/*
 * ALVORET SKAL FORTSATT LESES PÅ ET BLIKK.
 *
 * Derfor arver lenka tekstfargen i stedet for å bli is. Blir alle varslene
 * blå, ser de like presserende ut, og den røde venstrekanten er det eneste som
 * skiller en forfalt faktura fra et lead gitt opp for tidlig.
 *
 * At det ER en lenke, sies med tre andre midler: en tynn understrek som våkner
 * på hover og fokus, is-pilla med pil til høyre, og hele raden som trykkflate.
 */
a.avvik-rad { color: inherit; text-decoration: none; }
a.avvik-rad:hover { background: var(--navy3); }
a.avvik-rad .avvik-hva {
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
}
a.avvik-rad:hover .avvik-hva,
a.avvik-rad:focus-visible .avvik-hva { text-decoration-color: var(--ice); }

.avvik-midt { display: grid; gap: 3px; min-width: 0; }
.avvik-hva { line-height: 1.4; }
.avvik-eks { font-size: 12.5px; color: var(--muted); }
.avvik-rad .antall {
  margin-left: auto; flex: none;
  font-family: var(--font-display); font-weight: 700;
  background: var(--fill-subtle); color: var(--offwhite);
  font-variant-numeric: tabular-nums;
}
.avvik-rad .hvor { flex: none; }
.avvik-rad .antall + .hvor { margin-left: 0; }
.avvik-rad .hvor:first-of-type { margin-left: auto; }
.avvik-rad .hvor .ikn { width: 13px; height: 13px; color: inherit; }
.avvik-fot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* En rolig dag skal SE rolig ut, ikke ut som at noe ikke lastet. */
/* `.rolig` er borte 11.09.2026: den var en tredje stiplet boks ved siden av
   `.tomt.figur` i base.css. Se `#avvik-rolig` i index.html. */

/* ── Skjelettet ─────────────────────────────────────────────────────────────
 * ┌───────────────────────────────────────────────────────────────────────────┐
 * │ HØYDENE ER MÅLT PÅ DET EKTE INNHOLDET, IKKE GJETTET.                      │
 * │                                                                           │
 * │ Det er hele poenget med et skjelett: sida skal ikke hoppe når svaret       │
 * │ lander. Målt 11.09.2026 mot `/api/forsiden` holdt igjen i Chrome:          │
 * │                                                                           │
 * │   førstevalget   91 px på 390, 97 på 700 og 1440                          │
 * │   en flis        82 px på 390 (to kolonner, beskrivelsen skjult)           │
 * │                 141 px over 560 (beskrivelsen synlig)                      │
 * │   en avviksrad  148 og 107 px på 390 — teksten brekker ulikt               │
 * │                  71 og 59 px på 1440                                      │
 * │                                                                           │
 * │ Formen og pulsen bor i `.skjelett` i base.css. Her står bare plassen.      │
 * └───────────────────────────────────────────────────────────────────────────┘ */

/* `1em` fra `.skjelett.sk-linje` er skriftstørrelsen, ikke linjeboksen. Disse to
   skal være like høye som teksten de venter på, og linjehøydene er `1.1` på
   `#hei` og body-ens `1.6` på `.dagslinje` — derfor tallene og ikke px: da
   følger de med når `clamp()` gir hilsenen 26 px på telefon og 34 på bredt. */
.skjelett.sk-hei { width: 9ch; height: 1.1em; }
.skjelett.sk-dagslinje { width: 20ch; height: 1.6em; }

#forste-plass { min-height: 91px; border-radius: var(--r-md); }

/* `flex: 1` fordi `.rutenett > li` er en flexboks — uten den står plassen som
   en 0 px strek i en celle som ellers er riktig stor. */
.rutenett > li > .skjelett { flex: 1; min-height: 141px; border-radius: var(--r-md); }

/* Kantene og flata bor på `li` fra før (se `.avvik li`), så raden trenger bare
   en flate som pulserer inni den. `inherit` henter `li`-ens egne hjørner. */
.avvik li > .skjelett { min-height: 65px; border-radius: inherit; }

/* ── Smalere skjermer ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rutenett { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /*
   * ┌─────────────────────────────────────────────────────────────────────────┐
   * │ FLISENE BLIR TO KOLONNER PÅ TELEFON, IKKE ÉN.                           │
   * │                                                                         │
   * │ Målt på skjermbildet 10.09.2026, 390 px: med én kolonne ble hver flis   │
   * │ 118–160 px høy, og de sju flisene til sammen 1 010 px — tre skjermhøyder│
   * │ med rulling for en MENY. På skrivebordet er den samme flisa 85 px, og   │
   * │ hele huben synlig uten å rulle. Forskjellen var ikke telefonen; det var │
   * │ at én kolonne gjør beskrivelsen tre linjer lang.                        │
   * │                                                                         │
   * │ To kolonner gir 173 px bred flis på 390 px. Navnet får plass på én      │
   * │ linje, tallet under, og beskrivelsen — som er en hjelpetekst man leser  │
   * │ én gang — går ut. Ni fliser blir da 5 rader og 458 px målt 10.09.2026:  │
   * │ samme tetthet som skrivebordet, uten å gjøre noe mindre enn det tåler.  │
   * │                                                                         │
   * │ Under 360 px faller de tilbake til én kolonne: 145 px flis brekker      │
   * │ «Kunder og Løypa» over tre linjer, og da er tettheten borte likevel.    │
   * └─────────────────────────────────────────────────────────────────────────┘
   */
  /*
   * `grid-auto-rows: 1fr` — alle flisene NØYAKTIG like høye.
   *
   * Uten den ble radene 110, 65 og 110 px, fordi fire av flisene har et tall
   * under navnet mens fem ikke har det. Et rutenett der annenhver rad er
   * halvparten så høy, leses som at noe mangler — og det gjør det ikke; de
   * fem uten tall har bare ingenting å telle. Én høyde for alle er valget som
   * sier det.
   *
   * Men `1fr` FORSTERKER en brekking: brekker ett navn over to linjer, vokser
   * hver eneste flis. Målt på skjermbildet 10.09.2026, 390 px: «Kunder og
   * Løypa» brakk, og da sto alle ni flisene 108 px høye for ett ord. Med
   * navnet på én linje er den samme flisa 81 px. Derfor står navnebredden
   * under — og derfor må `1fr` bort igjen på én kolonne.
   */
  .rutenett { grid-template-columns: repeat(2, 1fr); gap: var(--rom-3); grid-auto-rows: 1fr; }
  /* Beskrivelsen er skjult her, så flisa er 82 px og ikke 141 — målt
     11.09.2026 på 390 px. Avviksradene brekker motsatt vei og blir høyere enn
     på skrivebordet: 148 og 107 px, der 110 er midten mellom dem. */
  .rutenett > li > .skjelett { min-height: 82px; }
  .avvik li > .skjelett { min-height: 110px; }
  .flis { padding: var(--rom-3); gap: var(--rom-2); }
  .flis-hode { gap: var(--rom-2); }
  .flis-hva { display: none; }
  /*
   * «Kunder og Løypa» er det lengste navnet i settet, og det er navnet som
   * bestemmer hele rutenettets høyde.
   *
   * Målt på skjermbildet 10.09.2026, 390 px: navnet er 113,8 px ved 14,5 px,
   * og kolonna det står i var 114 — det brakk. 12 px kortluft i stedet for
   * 14, 8 px mellom ikon og navn i stedet for 10, og 14 px med −.01em gir et
   * navn på 111 px i en kolonne på 120,5, altså 9,5 px klaring — målt på
   * skjermbildet etterpå. Rutenettet faller fra 589 til 458 px.
   *
   * Under 374 px brekker det igjen; da er `1fr` det som holder flisene like.
   */
  .flis-navn { font-size: 14px; letter-spacing: -.01em; }
  /*
   * Plass under det siste kortet til assistentboblen.
   *
   * Boblen er `position: fixed` og ligger alltid nederst til høyre. Uten
   * denne marga dekker den siste rad i lista permanent — målt på
   * skjermbildet 10.09.2026: den lå oppå «Ting som ikke henger sammen».
   * 54 px bobbel + 16 px luft + 16 px til.
   */
  .wrap { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

  /*
   * ┌─────────────────────────────────────────────────────────────────────────┐
   * │ UNDERTITTELEN FÅR EGEN RAD. DEN STO I SAMME RAD SOM TALLET.             │
   * │                                                                         │
   * │ Målt på skjermbildet 10.09.2026, 390 px: ikon 26, tall 44, pil 19 og    │
   * │ tre mellomrom à 14 tok 131 av 317 px. «Dagens kø, samtaler og           │
   * │ historikk» er målt til 211,5 px og fikk 186 — den brakk over to linjer, │
   * │ og kortet ble 106 px høyt av ren brekking.                              │
   * │                                                                         │
   * │ Tallet spenner over BEGGE radene i stedet for å stå i den øverste.      │
   * │ Blokka er 47 px («445» pluss «å ringe») og de to radene til sammen 57,  │
   * │ så den får plass uten å gjøre kortet høyere. Undertittelen får da 235   │
   * │ px — én linje — og kortet faller fra 108 til 85 px, målt på             │
   * │ skjermbildet etterpå.                                                   │
   * └─────────────────────────────────────────────────────────────────────────┘
   */
  .forste {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "ikon navn tall pil"
      "hva  hva  tall pil";
    align-items: center;
    column-gap: var(--rom-3);
    row-gap: var(--rom-1);
    padding: var(--rom-4);
  }
  .forste-ikon { grid-area: ikon; }
  /* Navn og undertittel skal være grid-barn her, ikke to rader i sin egen
     stabel — det er hele poenget med å gi undertittelen en annen bredde. */
  .forste-tekst { display: contents; }
  .forste-navn { grid-area: navn; min-width: 0; }
  .forste-hva { grid-area: hva; }
  .forste-tall { grid-area: tall; margin-left: 0; font-size: 26px; }
  .forste-pil { grid-area: pil; }

  /*
   * ┌─────────────────────────────────────────────────────────────────────────┐
   * │ RUTENETT OG IKKE `flex-wrap`: PILLA HADDE TO HVILEPLASSER.              │
   * │                                                                         │
   * │ `.avvik-rad .hvor:first-of-type { margin-left: auto }` er (0,2,1) og    │
   * │ slår `.avvik-rad .hvor { margin-left: 0 }` (0,2,0) uansett rekkefølge.  │
   * │ Følgen når raden brakk: en rad UTEN antall-merke la handlingspilla i    │
   * │ HØYRE kant, en rad MED la den i VENSTRE — for på en rad med merke er    │
   * │ pilla ikke lenger første `span`, og `:first-of-type` slutter å treffe.  │
   * │ To ulike svar i samme liste, seks rader fra hverandre.                  │
   * │                                                                         │
   * │ Med rutenett er plasseringen bestemt og ikke et biprodukt av hvor       │
   * │ flyten tilfeldigvis brakk: antallet øverst til høyre der et antall      │
   * │ hører hjemme, pilla på egen rad langs samme venstrekant som teksten.    │
   * └─────────────────────────────────────────────────────────────────────────┘
   */
  .avvik-rad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    /* Ikke `column-gap`: merket finnes bare når gruppa har mer enn ett
       tilfelle (`g.antall > 1` i hub.js), og alle de andre radene ville
       betalt 12 px av tekstbredden for en tom kolonne. Marga bor på merket,
       som er det eneste som noen gang står i kolonne 2. */
    column-gap: 0;
    row-gap: var(--rom-2);
  }
  .avvik-midt { grid-column: 1; grid-row: 1; }
  .avvik-rad .antall { grid-column: 2; grid-row: 1; margin-left: var(--rom-3); }
  /* BEGGE velgerne. Uten den andre står `:first-of-type` igjen og drar pilla
     til høyre på nøyaktig de radene som ikke har et merke. */
  .avvik-rad .hvor,
  .avvik-rad .hvor:first-of-type {
    grid-column: 1; grid-row: 2; justify-self: start; margin-left: 0;
  }
}

/* Under 360 px er en 145 px flis smalere enn navnet den skal bære. */
@media (max-width: 360px) {
  /*
   * `grid-auto-rows` MÅ tilbake til `auto` her.
   *
   * `1fr` finnes for at to fliser SIDE OM SIDE skal være like høye. På én
   * kolonne har ingen flis en nabo — da strekker den bare hver eneste rad opp
   * til den høyeste. Målt på skjermbildet 10.09.2026, 320 px: «Kundesider»
   * har to linjer beskrivelse, og de ni flisene ble 127 px høye hver, altså
   * ~60 px tom navy i sju av dem. 1 143 px rulling for en meny med ni valg.
   */
  .rutenett { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .flis-hva { display: block; }
  /*
   * Navnekolonna i førstevalget er 131 px her, så undertittelen får bare 169
   * av de 211,5 px den måler. Under tallet også gir 225 px — én linje. Tallet
   * står da alene i øverste rad, og kortet ble målt til 95 px etterpå, mot
   * 130 før.
   */
  .forste { grid-template-areas: "ikon navn tall pil" "hva hva hva pil"; }
}

/* ── Assistentboblen ────────────────────────────────────────────────────── */

/*
 * Assistenten er ikke et sted man drar til.
 *
 * Som flis i rutenettet ba den deg forlate siden for å stille et spørsmål OM
 * siden. Som boble ligger den der man er, og panelet legger seg oppå uten at
 * man mister plassen sin.
 */
.boble-knapp {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 3;
  width: 54px; height: 54px; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--ice); color: var(--navy);
  cursor: pointer; box-shadow: var(--elev-card);
  transition: transform .13s ease;
}
.boble-knapp:hover { transform: translateY(-2px); }
/* Navy, ikke is: boblen HAR is som bakgrunn. Uten denne linja tegnes ikonet i
   samme farge som flata under, og boblen står som en tom sirkel. */
.boble-knapp .ikn { width: 23px; height: 23px; color: var(--navy); }

.prat {
  width: min(440px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 24px));
  margin: auto 22px 22px auto; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--navy2); color: var(--offwhite);
  box-shadow: var(--elev-card);
  /* Panelet er en samtale: hodet står, lista ruller, feltet står. */
  display: none; grid-template-rows: auto auto 1fr auto auto;
  overflow: hidden;
}
.prat[open] { display: grid; }
.prat::backdrop { background: var(--scrim); }

.prat-topp {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.prat-tittel {
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.prat-tittel .ikn { width: 17px; height: 17px; color: var(--ice); }
.prat-topp .knapp { min-height: var(--trykk); padding: 0 12px; font-size: 13px; }

.prat-av {
  margin: 0; padding: 12px 14px;
  background: var(--warn-svak); color: var(--warn);
  font-size: 13.5px; border-bottom: 1px solid var(--border);
}

.samtale {
  list-style: none; margin: 0; padding: 14px; overflow-y: auto;
  /* Ruller man til bunnen av samtalen, skal ikke sida bak ta over og flytte
     en på et annet sted enn der man leste. Samme svar som treffruta i
     base.css har. */
  overscroll-behavior: contain;
  display: grid; gap: 12px; align-content: start;
}
.samtale li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.samtale .ikn { width: 17px; height: 17px; margin-top: 3px; color: var(--muted); }
.samtale .du .ikn { color: var(--silver); }
.samtale .svar .ikn { color: var(--ice); }
.samtale .feilsvar .ikn { color: var(--bad); }
.samtale .boble {
  /* Formen på svaret beholdes av CSS, ikke av en parser som kan tolke markup. */
  white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; min-width: 0;
}
.samtale .du .boble { color: var(--offwhite); font-weight: 500; }
.samtale .venter .boble { color: var(--muted); }
.samtale .feilsvar .boble { color: var(--bad-text); }
.samtale .hva-na { display: block; margin-top: 5px; font-size: 13px; color: var(--silver); }

/* Formen kommer nå fra `.tomt.figur` i base.css — ikon, setning, stiplet ramme
   — og er den samme som /assistent bruker for nøyaktig denne tilstanden. Her
   står bare marga: `.tomt.figur` har `margin: 0` og la ramma kant i kant med
   panelet. 14 px er det samme innrykket forslagsknappene under har.

   `#prat-tomt` og ikke `.prat-tomt`: `.tomt.figur` er to klasser og slår én.
   Med klassevelgeren traff marga aldri — målt til 13 px fra panelkanten der
   den skulle vært 26, og ramma sto dessuten venstrestilt fordi `.tomt` sin
   `max-width: 38ch` ble stående uten `margin-inline: auto`. */
#prat-tomt { margin: 0 14px 12px; }

.prat-forslag { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.prat-forslag button {
  /* var(--trykk) — også her. Vakta fanget 36 px, og den har rett: dette er
     knapper man trykker på med tommelen mens man holder telefonen. */
  min-height: var(--trykk); padding: 7px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--navy3); color: var(--silver);
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
.prat-forslag button:hover { border-color: var(--border-hover); color: var(--offwhite); }

.prat-skjema {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 12px 14px; border-top: 1px solid var(--border);
}
/* Skrivefeltet er ÉN linje som vokser til 120 px og aldri dras i for hånd —
   resten av formen står i base.css. */
.prat-skjema textarea { flex: 1; max-height: 120px; resize: none; }
.prat-skjema .knapp { white-space: nowrap; }

@media (max-width: 560px) {
  .boble-knapp { right: var(--rom-4); bottom: calc(var(--rom-4) + env(safe-area-inset-bottom)); }
  /*
   * Panelet er et bunnark her, og bunnen flytter seg når tastaturet kommer.
   *
   * iOS krymper ikke layout-visningsporten for tastaturet — bare den visuelle
   * — så et ark som henger i bunnen av en side som fortsatt er 844 px høy,
   * havner BAK et tastatur på ~336 px. Det som forsvant var skrivefeltet og
   * «Spør»: det ene i en samtale som ikke får være skjult. `--tastatur` måles
   * av felles/tastatur.js og er 0 når det er lukket, så skrivebordet og en
   * telefon uten tastatur oppe står som før.
   */
  .prat {
    margin: auto var(--rom-3)
            calc(var(--rom-3) + env(safe-area-inset-bottom) + var(--tastatur));
    width: calc(100vw - 2 * var(--rom-3));
    max-height: calc(80dvh - var(--tastatur));
  }
  /* «Åpne siden» er en snarvei, ikke en nødvendighet. Plassen trengs til tittelen. */
  #prat-hel { display: none; }
}