/*
 * Oppsettet på brettet, og ingenting mer.
 *
 * Fila deles av alle tre appene, og det er ikke pynt: skal demoen vise den
 * samme skjermen i tre rammeverk, kan ikke hver app ha sin egen utgave av
 * hvor boksene ligger. Hver app serverer denne fila på `/brett.css`.
 *
 * Regelen for hele demoen: alt du ser av knapper, felt, kort og tabeller er
 * Fristils egne komponenter. Det som skrives her er hvor boksene ligger, og
 * topplinja, som er spillets eget ansikt og ikke noe designsystemet skal
 * eie.
 *
 * Verdiene er Fristils tokens, ikke egne tall. De to unntakene er bredden på
 * sidestammen og lengden på en tekstlinje, som er avgjørelser om denne
 * siden.
 */

body {
  margin: 0;
  /* Skriften kommer fra temaet, som setter `--font-family-base`. Reserven er
     her fordi Fristil arver skrift med vilje: uten et tema er det
     nettleserens egen, og den er en serif. */
  font-family: var(
    --font-family-base,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif
  );
  color: var(--semantic-page-foreground);
  /* Flaten er sideflaten med et snev av tekstfargen i seg, slik at hvite
     kort løfter seg fra den. I mørkt tema snus det under. */
  background: color-mix(in oklab, var(--semantic-page-foreground) 5%, var(--semantic-page-background));
}

.stamme {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--size-4);
}

/* Topplinja
   ------------------------------------------------------------------ */

.topplinje {
  color: var(--palette-graphite-0);
  background: var(--palette-denim-100);
}

/* Sambandslinja legger seg øverst i vinduet når den først dukker opp.
   Uten dette dekker den navnet i topplinja. */
body:has(.fs-connection-status__bar) .topplinje {
  padding-block-start: var(--size-10);
}

.topplinje__innhold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-3) var(--size-5);
  padding-block: var(--size-3);
}

.topplinje__hoved {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-3) var(--size-5);
}

.topplinje__merke {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--size-3);
}

.topplinje__emblem {
  inline-size: var(--size-8);
  block-size: var(--size-8);
  flex: none;
}

.topplinje__ord {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.topplinje__navn {
  /* `<h1>` har egne marger fra nettleseren, og de skilte navnet fra
     etatsnavnet under. */
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topplinje__etat {
  font-size: var(--font-size-xs);
  color: color-mix(in oklab, var(--palette-graphite-0) 75%, transparent);
}

.topplinje__fase {
  margin: 0;
  font-size: var(--font-size-m);
  font-weight: 600;
}

.topplinje__klokke {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  line-height: 1.1;
}

.topplinje__merkelapp {
  font-size: var(--font-size-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--palette-graphite-0) 75%, transparent);
}

/* Fargene nedtellingen blandes av. De står på alle nedtellinger, ikke bare
   den i toppen: skriptet skriver `color` på hver av dem, og en variabel som
   ikke finnes ville gjort erklæringen ugyldig. */
.nedtelling {
  --spill-frist-start: var(--palette-graphite-0);
  --spill-frist-slutt: var(--palette-burgundy-30);
}

/* Inne i et kort står tallet på sidens egen flate, ikke på den mørkeblå. */
.brett .nedtelling {
  --spill-frist-start: var(--semantic-page-foreground);
  --spill-frist-slutt: var(--semantic-danger-main);
}

/*
 * Ristingen under de siste ti sekundene.
 *
 * Utslaget er `--spill-rist`, et tall mellom 0 og 1 som skriptet setter
 * for hvert sekund. Selve bevegelsen står her, så den kan slås av for den
 * som har bedt om mindre av den.
 */
@keyframes spill-rist {
  0%, 100% { translate: 0 0; }
  20% { translate: calc(var(--spill-rist, 0) * -3px) 0; }
  40% { translate: calc(var(--spill-rist, 0) * 3px) 0; }
  60% { translate: calc(var(--spill-rist, 0) * -2px) 0; }
  80% { translate: calc(var(--spill-rist, 0) * 2px) 0; }
}

.nedtelling[data-rister] {
  display: inline-block;
  animation: spill-rist 220ms linear infinite;
}

/* En klokke som rister er et press, ikke en opplysning. Den som har bedt
   om mindre bevegelse får fargen alene, som sier det samme. */
@media (prefers-reduced-motion: reduce) {
  .nedtelling[data-rister] { animation: none; }
}

.topplinje .nedtelling {
  color: var(--spill-frist-start);
  font-size: var(--font-size-mega);
  font-weight: 600;
  line-height: 1;
  /* Tallene skal ikke hoppe sidelengs mens sekundene går. */
  font-variant-numeric: tabular-nums;
}

/* Hvem du er. Med flere vinduer oppe er det ikke til å se ellers. */
.topplinje__meg {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  margin: 0;
  padding-inline-start: var(--size-3);
  border-inline-start: 1px solid color-mix(in oklab, var(--palette-graphite-0) 30%, transparent);
  font-size: var(--font-size-s);
}

.topplinje__meg .fs-avatar {
  color: var(--palette-denim-100);
  background: var(--palette-graphite-0);
}

.topplinje__stack {
  padding: var(--size-0-5) var(--size-2);
  font-size: var(--font-size-xs);
  border: 1px solid color-mix(in oklab, var(--palette-graphite-0) 45%, transparent);
  border-radius: var(--size-1);
}

/*
 * Temavelgeren står på den mørkeblå flata og må se ut deretter.
 *
 * Størrelsen settes med komponentvariablene, som er veien Fristil peker
 * på. Fargene finnes det ingen variabler for, og skal ikke finnes: all
 * komponent-CSS ligger i `@layer fristil`, så appens egne regler vinner
 * uansett spesifisitet. Dette er den tilpasningen dokumentasjonen lover.
 */
.temavelger {
  --fs-toggle-group-height: var(--size-8);
  --fs-toggle-group-padding: 0 var(--size-3);
  border-color: color-mix(in oklab, var(--palette-graphite-0) 45%, transparent);
}

.temavelger .fs-toggle-group__option {
  font-size: var(--font-size-xs);
  color: color-mix(in oklab, var(--palette-graphite-0) 85%, transparent);
  background: transparent;
  border-inline-start-color: color-mix(in oklab, var(--palette-graphite-0) 45%, transparent);
}

.temavelger .fs-toggle-group__option:hover {
  background: color-mix(in oklab, var(--palette-graphite-0) 12%, transparent);
}

.temavelger .fs-toggle-group__option:has(input:checked) {
  color: var(--palette-denim-100);
  background: var(--palette-graphite-0);
}

/* Velgeren mellom de tre utgavene
   ------------------------------------------------------------------ */

.utgavevelger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-1);
  font-size: var(--font-size-xs);
}

.utgavevelger__lenke,
.utgavevelger__her {
  padding: var(--size-0-5) var(--size-2);
  border-radius: var(--size-1);
  border: 1px solid transparent;
}

.utgavevelger__lenke {
  color: color-mix(in oklab, var(--palette-graphite-0) 80%, transparent);
  text-decoration: none;
  border-color: color-mix(in oklab, var(--palette-graphite-0) 30%, transparent);
}

.utgavevelger__lenke:hover {
  color: var(--palette-graphite-0);
  background: color-mix(in oklab, var(--palette-graphite-0) 12%, transparent);
}

.utgavevelger__lenke:focus-visible {
  outline: var(--semantic-focus-ring);
  outline-color: var(--palette-graphite-0);
  outline-offset: 2px;
}

.utgavevelger__her {
  color: var(--palette-denim-100);
  background: var(--palette-graphite-0);
  font-weight: 600;
}

/* Velkomsthilsenen
   ------------------------------------------------------------------ */

/* Toppen, fargen og luften mellom delene kommer fra dialogen selv:
   `fs.dialog({ color: "brand" })` med en `header`-del. Her står bare bredden. */
.velkomst {
  --fs-dialog-width: min(38rem, 100%, calc(100vw - var(--size-8)));
}

.velkomst .fs-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.velkomst .fs-dialog__body p { margin: 0; line-height: 1.6; }

.velkomst__valg { margin: var(--size-2) 0 0; }

.velkomst__liste {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin: 0;
  padding: 0;
}

.velkomst__lenke,
.velkomst__her {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--size-2);
  padding: var(--size-3) var(--size-4);
  border: 1px solid var(--semantic-divider-30);
  border-radius: var(--size-1);
  color: var(--semantic-page-foreground);
  text-decoration: none;
}

.velkomst__lenke:hover {
  border-color: var(--semantic-interactive-main);
  background: var(--semantic-neutral-background);
}

.velkomst__lenke:focus-visible {
  outline: var(--semantic-focus-ring);
  outline-offset: 2px;
}

.velkomst__her { background: var(--semantic-neutral-background); }

.velkomst__om {
  flex: 1 1 auto;
  color: var(--semantic-muted-foreground);
  font-size: var(--font-size-s);
}

.velkomst__fotnote {
  margin-block-start: var(--size-2);
  font-size: var(--font-size-s);
  color: var(--semantic-muted-foreground);
}

/* Brettet
   ------------------------------------------------------------------ */

.brett {
  padding-block: var(--size-6) var(--size-10);
}

.brett__innhold {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--size-5);
  align-items: start;
}

.brett__hoved {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
}

.kort { padding: var(--size-5); }

/* Saken
   ------------------------------------------------------------------ */

.sakskort__stempel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-3);
  margin: 0;
}

.sakskort__status {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--semantic-muted-foreground);
}

.sakskort__tittel {
  margin-block: var(--size-1) 0;
}

.sakskort__ingress {
  margin: 0;
  font-size: var(--font-size-l);
  line-height: 1.5;
  color: var(--semantic-muted-foreground);
}

.sakskort__faner {
  display: block;
  margin-block-start: var(--size-3);
}

.sakskort__tekst {
  max-width: 62ch;
  margin: 0;
  font-size: var(--font-size-m);
  line-height: 1.7;
}

.sakskort__signatur {
  margin-block: var(--size-4) 0;
  color: var(--semantic-muted-foreground);
}

/* Vedtaket
   ------------------------------------------------------------------ */

.vedtakskort__ingress {
  margin: 0;
  font-size: var(--font-size-s);
  color: var(--semantic-muted-foreground);
}

/* Fristil setter ingen avstand utenpå komponentene, for det er sidens
   avgjørelse. Her er avgjørelsen tatt. */
.skjema {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
  margin-block-start: var(--size-2);
}

.skjema fs-field,
.skjema fs-suggestion {
  display: block;
}

.skjema__send {
  align-self: start;
}

/* Hjelpen til hjemlene hører til feltet over, og skal stå på linje med
   feltene og ikke rykket inn av knappens eget innrykk. Innrykket er en
   komponentvariabel, altså veien Fristil peker på for slikt. */
.hjelpelenke {
  display: block;
  margin-block-start: calc(var(--size-4) * -1);
}

.hjelpelenke .fs-button {
  --fs-button-padding: var(--size-1) 0;
}

/* Kvitteringen
   ------------------------------------------------------------------ */

.kvittering {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.kvittering__linje {
  display: grid;
  grid-template-columns: 1fr auto var(--size-8);
  gap: var(--size-3);
  align-items: baseline;
  padding-block: var(--size-2);
  border-block-end: 1px solid var(--semantic-divider-30);
}

.kvittering__linje:last-child { border-block-end: 0; }

.kvittering__dom {
  font-weight: 600;
  color: var(--semantic-danger-main);
}

.kvittering__linje[data-riktig="true"] .kvittering__dom {
  color: var(--semantic-success-foreground);
}

.kvittering__verdt {
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--semantic-muted-foreground);
}

/* Fasiten
   ------------------------------------------------------------------ */

.fasitkort__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
}

.fasitkort__topp .fs-heading { margin: 0; }

.fasit {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  margin: 0;
}

.fasit__rad {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--size-3);
  padding-block: var(--size-2);
  border-block-end: 1px solid var(--semantic-divider-30);
}

.fasit__rad:last-child { border-block-end: 0; }
.fasit dt { color: var(--semantic-muted-foreground); }
.fasit dd { margin: 0; font-weight: 600; }

.poeng {
  margin: 0;
  font-size: var(--font-size-l);
}

/*
 * Sluttskjermen: plasseringen først, og pallen i omgangens resultat.
 *
 * En vakt er over på få minutter, og det eneste man sitter igjen med er hvor
 * det gikk. Da skal det stå med store bokstaver framfor å gjemmes i en rad i
 * en tabell. Medaljefargene er Skatteetatens egne: oker for gull, grafitt for
 * sølv og burgunder for bronse.
 */
.plassering {
  display: flex;
  align-items: center;
  gap: var(--size-4);
  margin-block: var(--size-3) var(--size-5);
}

.plassering__ord {
  margin: 0;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: var(--semantic-line-height-heading);
}

.plassering__linje {
  margin: 0;
  color: var(--semantic-muted-foreground);
}

.medalje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-6);
  block-size: var(--size-6);
  border-radius: 50%;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  background: var(--semantic-neutral-background);
  color: var(--semantic-neutral-foreground);
}

.medalje--stor {
  inline-size: var(--size-12);
  block-size: var(--size-12);
  font-size: var(--font-size-xl);
}

.medalje[data-plass="1"] {
  background: var(--palette-ochre-30);
  color: var(--palette-ochre-100);
}

.medalje[data-plass="2"] {
  background: var(--palette-graphite-10);
  color: var(--palette-graphite-100);
}

.medalje[data-plass="3"] {
  background: var(--palette-burgundy-10);
  color: var(--palette-burgundy-100);
}

/* «deg» står ved siden av navnet ditt i omgangens resultat. */
.deg {
  margin-inline-start: var(--size-2);
  padding: 0 var(--size-2);
  border-radius: var(--size-4);
  font-size: var(--font-size-xs);
  background: var(--semantic-interactive-background);
  color: var(--semantic-interactive-foreground);
}

/* Resultatdialogen
   ------------------------------------------------------------------ */

.resultat {
  --fs-dialog-width: min(34rem, 100%, calc(100vw - var(--size-8)));
}

/* Utfallet står som et eget felt øverst, med dialogens egne farger:
   `data-color` på dialogen og en `header`-del rundt overskriften. */

.resultat .fs-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.resultat__poeng {
  margin: 0;
  font-size: var(--font-size-xl);
  color: inherit;
}

.resultat__forklaring {
  margin: 0;
  line-height: 1.5;
}

.resultat__liste {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.resultat__rad {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto;
  gap: var(--size-1) var(--size-3);
  align-items: baseline;
  padding-block: var(--size-2);
  border-block-end: 1px solid var(--semantic-divider-30);
}

.resultat__rad:last-child { border-block-end: 0; }

.resultat__felt {
  grid-column: 1;
  color: var(--semantic-muted-foreground);
}

.resultat__ditt {
  grid-column: 2;
  margin: 0;
  font-weight: 600;
}

.resultat__dom {
  grid-column: 3;
  margin: 0;
  font-weight: 600;
  color: var(--semantic-danger-main);
}

.resultat__rad[data-riktig="true"] .resultat__dom {
  color: var(--semantic-success-foreground);
}

.resultat__riktig {
  grid-column: 2 / -1;
  margin: 0;
  font-size: var(--font-size-s);
  color: var(--semantic-muted-foreground);
}

/* Tavla
   ------------------------------------------------------------------ */

.tavle__tabell { font-size: var(--font-size-s); }

.tavle__navn {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

.tavle__navn .fs-avatar { flex: none; }

.tavle__deg { color: var(--semantic-muted-foreground); }

/* Poengene fra runden som nettopp ble gjort opp, ved siden av totalen. */
.tavle__runde {
  color: var(--semantic-success-foreground);
  font-weight: 600;
}

.beste {
  margin: 0;
  line-height: 1.5;
}

.vedtakskort__svart {
  margin: 0;
  font-size: var(--font-size-s);
  color: var(--semantic-muted-foreground);
}

.vedtakskort__svart[data-alle="true"] {
  color: var(--semantic-success-foreground);
  font-weight: 600;
}
.tavle__poeng { font-variant-numeric: tabular-nums; }
.tavle .meg { font-weight: 600; }

.tavle__fot {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--semantic-muted-foreground);
}

/* Møt på vakt
   ------------------------------------------------------------------ */

.blimed { max-width: 34rem; }
.blimed__ingress { margin: 0; line-height: 1.6; }
.blimed form { display: flex; flex-direction: column; gap: var(--size-4); }
.blimed fs-field { display: block; }

/* Mørkt tema
   ------------------------------------------------------------------ */

/*
 * I mørkt tema snus forholdet: sideflaten er den mørkeste, og kortene
 * løftes. Samme regel begge veier ville gitt kort som er mørkere enn
 * siden.
 *
 * Reglene står to ganger, med de samme selektorene Fristil bruker:
 * mediespørringen gjelder når spilleren ikke har valgt noe, og
 * `[data-theme]` når hun har. Bare mediespørringen ville gjort velgeren
 * halvvirksom: et mørkt valg på en lys maskin ville snudd tokenene uten å
 * snu disse to reglene.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background: var(--semantic-page-background);
  }

  :root:not([data-theme="light"]) .fs-card {
    background: color-mix(in oklab, var(--semantic-page-foreground) 8%, var(--semantic-page-background));
    border-color: color-mix(in oklab, var(--semantic-page-foreground) 18%, transparent);
  }
}

[data-theme="dark"] body {
  background: var(--semantic-page-background);
}

[data-theme="dark"] .fs-card {
  background: color-mix(in oklab, var(--semantic-page-foreground) 8%, var(--semantic-page-background));
  border-color: color-mix(in oklab, var(--semantic-page-foreground) 18%, transparent);
}

@media (max-width: 900px) {
  .brett__innhold { grid-template-columns: 1fr; }
}

/*
 * På smal skjerm legges topplinja i et rutenett, ikke i en flytende rad.
 *
 * Raden brøt ulikt i de tre utgavene, og grunnen var teksten: merket sier
 * «Kotlin · Datastar», «React · TanStack Start» eller «Serverside · Astro»,
 * og navnet ditt står ved siden av. Med `flex-wrap` bestemmer lengden på
 * den teksten hvor bruddet havner, og på 375 og 393 piksler ble headeren
 * fire linjer høy i én app og fem i en annen. Det er nettopp den forskjellen
 * demoen sier at du ikke skal se.
 *
 * Rutenettet gir faste plasser: etaten øverst, runde og klokke på neste
 * linje, merket og navnet på den siste. Da er det bare teksten inni som er
 * ulik, og den klippes med ellipse om den blir for lang.
 */
@media (max-width: 640px) {
  .topplinje__hoved {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--size-2) var(--size-4);
  }

  .topplinje__merke { grid-column: 1 / -1; }

  .topplinje__klokke {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--size-2);
  }

  .topplinje__stack,
  .topplinje__meg {
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Merket skal klemme seg rundt teksten sin, ikke strekke seg over hele
     cellen: strukket ser det ut som et skjemafelt. */
  .topplinje__stack { justify-self: start; }
  .topplinje__meg { justify-self: end; }

  .topplinje .nedtelling { font-size: var(--font-size-xl); }
}

@media (max-width: 560px) {
  .kort { padding: var(--size-4); }

  /*
   * Avataren i tavla er pynt, og den tar plassen fra navnet. På 375 piksler
   * ble «Mobil astro (deg)» brutt over tre linjer, med initialene ved siden
   * av. Den er `aria-hidden`, så ingen mister noe på at den skjules her.
   */
  .tavle__navn .fs-avatar { display: none; }
  .tavle__navn { gap: 0; }

  .resultat__rad {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .resultat__felt { grid-column: 1 / -1; }
  .resultat__ditt { grid-column: 1; }
  .resultat__dom { grid-column: 2; }
  /* Den sto igjen på `2 / -1`, altså den smale kolonnen ved siden av
     «Feil», og klemte ditt eget svar sammen. */
  .resultat__riktig { grid-column: 1 / -1; }

  /* Med 12rem til ledeteksten fikk verdien rundt 95 piksler, og
     «Ingen, saken var i orden» brakk over fem linjer. */
  .fasit__rad { grid-template-columns: 1fr; gap: 0; }
}

/*
 * Panelet som viser hva som ble oppdatert, hvordan, og med hva.
 *
 * Alt her er felles, av samme grunn som resten av fila: de tre utgavene skal
 * se like ut, så forskjellen man ser er den ekte forskjellen og ikke to ulike
 * stilark. Skriptet ligger i `felles/panel.js`.
 */
.panelvert {
  position: fixed;
  inset-block-end: var(--size-4);
  inset-inline-end: var(--size-4);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--size-2);
  max-inline-size: min(56rem, calc(100vw - var(--size-8)));
}

.panelknapp {
  box-shadow: 0 10px 30px -14px rgb(0 0 0 / 55%);
}

/* `[hidden]` er en regel i nettleserens eget stilark, og en klasse med
   `display` slår den. Uten denne linja sto panelet åpent fra start, mens
   knappen sa «Hva skjedde?» og trodde det var lukket. */
.panel[hidden] {
  display: none;
}

/*
 * Panelet er et kort, og arver flate, kant og hjørner av `.fs-card`. Det sto
 * en gang `var(--semantic-surface-background)` her, et token som ikke finnes,
 * så regelen var ugyldig og panelet var gjennomsiktig: sidens tekst slo
 * gjennom loggen. Mørkt tema har alt en regel for `.fs-card` lenger nede.
 *
 * Nyttelasten står i sin egen spalte og fyller høyden. Før delte den bredden
 * med loggen og fikk ti rader, så det som faktisk kom over ledningen måtte
 * rulles fram, og det er jo det panelet handler om.
 */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  /* `minmax(0, 1fr)` og ikke `1fr`: en rad med `auto` som minstemål vokser
     med innholdet, og da rant nyttelasten ut under panelet framfor å rulle i
     sin egen rute. */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "hva logg"
    "hva hvordan";
  gap: var(--size-4);
  inline-size: min(56rem, calc(100vw - var(--size-8)));
  /* Bestemt høyde og ikke bare et tak: en `1fr`-rad regnes mot en høyde som
     er kjent, og med `max-block-size` alene ble raden like høy som innholdet
     sitt. Nyttelasten ble da 768 piksler i et panel på 512, og rant ut. */
  block-size: min(32rem, 74vh);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgb(0 0 0 / 60%);
}

.panel__del--hva {
  grid-area: hva;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.panel__del--logg {
  grid-area: logg;
  min-block-size: 0;
  overflow: auto;
}

.panel__del--hvordan {
  grid-area: hvordan;
}

.panel__tittel {
  margin-block-end: var(--size-1);
}

/*
 * Spørsmålstegnet ved siden av «Med hva», og boksen det åpner.
 *
 * Panelet sier hva som skjedde i denne utgaven. Tabellen sier hva de to andre
 * ville gjort med det samme, og det er nettopp sammenligningen demoen finnes
 * for. Den står derfor her, i den delte fila, og ikke tre steder.
 */
.panel__hjelp {
  margin-inline-start: var(--size-2);
  padding: 0 var(--size-2);
  font-size: var(--font-size-xs);
  vertical-align: middle;
}

/* Boksen tar plass fra nyttelasten, men ikke all: uten taket ble ruta under
   presset ut av panelet, og den er det panelet handler om. */
.panel__utgaver {
  flex: 0 1 auto;
  min-block-size: 0;
  max-block-size: 17rem;
  overflow: auto;
  margin-block-end: var(--size-3);
}

.panel__utgaver[hidden] {
  display: none;
}

.panel__tabell {
  font-size: var(--font-size-xs);
}

.panel__tabell tr[aria-current="true"] {
  background: var(--semantic-interactive-background);
  color: var(--semantic-interactive-foreground);
}

/* Lenkene i utgavetabellen peker på koden bak hver utgave. `.fs-link` ville
   vært det opplagte valget, men stilarket lastes ikke i alle tre appene, og
   panelet skal se likt ut i alle tre. */
.panel__lenke {
  color: var(--semantic-interactive-foreground);
  text-underline-offset: 2px;
}

.panel__lenke:hover {
  text-decoration-thickness: 2px;
}

.panel__lenke:focus-visible {
  outline: var(--semantic-focus-ring);
  outline-offset: 2px;
  border-radius: var(--size-1);
}

.panel__her {
  font-weight: var(--font-weight-regular, 400);
  white-space: nowrap;
}

.panel__felles {
  margin-block-start: var(--size-2);
  font-size: var(--font-size-xs);
}

/* Merkelappen er svaret på «med hva», og skal leses før innholdet. */
.panel__merkelapp {
  margin-block-end: var(--size-2);
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--semantic-interactive-foreground);
}

.panel__logg {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  font-size: var(--font-size-s);
}

.panel__linje {
  display: flex;
  flex-direction: column;
  padding: var(--size-1);
  border-radius: var(--size-1);
}

/* Bare linjene med en nyttelast kan velges, og bare de skal se klikkbare ut. */
.panel__linje[data-hendelse] {
  cursor: pointer;
}

.panel__linje[data-hendelse]:hover {
  background: var(--semantic-interactive-background);
}

/* Den som er vist i nyttelastruta, og den nyeste, skal skille seg ut. */
.panel__linje[aria-current="true"] {
  background: var(--semantic-interactive-background);
  color: var(--semantic-interactive-foreground);
}

/* Merkelappen arver fargen på den valgte raden. Sto den dempede fargen igjen,
   ble den 3,45:1 mot den lyse flaten, altså under kravet på 4,5:1. */
.panel__linje[aria-current="true"] .panel__linjelapp,
.panel__linje[data-hendelse]:hover .panel__linjelapp {
  color: inherit;
}

.panel__linje:first-child .panel__nar {
  font-weight: 600;
}

.panel__linjelapp {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs);
  color: var(--semantic-muted-foreground, inherit);
}

.panel__teknikk {
  font-weight: 600;
}

.panel__nyttelast {
  flex: 1 1 0;
  min-block-size: 8rem;
  overflow: auto;
  margin: 0;
  padding: var(--size-2);
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--semantic-page-background);
  border: 1px solid var(--semantic-divider-30);
  border-radius: var(--size-1);
}

/*
 * Ramma som lyser der noe nettopp ble byttet ut.
 *
 * `outline` og ikke `border`: en ramme som tar plass ville flyttet innholdet
 * hver gang noe oppdaterte seg, og da er det ikke lenger det samme brettet.
 *
 * Fargene sto en gang som `--semantic-info-*`, og de tokenene finnes ikke i
 * Fristil. En ugyldig `var()` gjør hele regelen ugyldig, så `outline` ble
 * `none` og markeringen tegnet aldri noe. Fristil har ingen «info»-status;
 * det som er framhevet og aktivt heter `interactive`.
 */
.panel-lyser {
  outline: 2px solid var(--semantic-interactive-main);
  outline-offset: 2px;
  border-radius: var(--size-1);
  animation: panel-puls 1.2s ease-out;
}

@keyframes panel-puls {
  from {
    outline-color: var(--semantic-interactive-main);
    background-color: var(--semantic-interactive-background);
  }
  to {
    outline-color: transparent;
    background-color: transparent;
  }
}

/* Den som har bedt om mindre bevegelse får rammen uten pulsen. */
@media (prefers-reduced-motion: reduce) {
  .panel-lyser {
    animation: none;
  }
}

@media (max-width: 860px) {
  .panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "hva"
      "logg"
      "hvordan";
    block-size: auto;
    max-block-size: 70vh;
    overflow: auto;
  }

  .panel__del--logg {
    overflow: visible;
  }

  .panel__nyttelast {
    min-block-size: 9rem;
  }

  .panelvert {
    inset-inline: var(--size-3);
    align-items: stretch;
  }
}

/* Hjemmelhjelpen
   ------------------------------------------------------------------ */

/* Forklaringen står under navnet, dempet. Lista har en makshøyde og ruller:
   med sju hjemler ble panelet høyere enn vinduet, sprettoppvinduet ble
   skjøvet opp i hjørnet, og de siste hjemlene sto utenfor skjermen. `tabindex`
   står på lista i markupen, så den som ruller med tastaturet kommer til. */
.hjemmelhjelp__liste {
  max-block-size: min(32rem, 70vh);
  overflow-y: auto;
}

.hjemmelhjelp__om {
  display: block;
  color: var(--semantic-muted-foreground);
}