/*
 * «Spør Nausto» på forsiden: de tre eksemplene som trekkspill, med samtalen animert i ren CSS
 * (ADR 060: ingen JavaScript). Fargene er profilens roller fra /brand/nausto.css i lyst og mørkt
 * tema; tekst står i rem, så større rotfont gir større tekst, mens avstander og radier følger
 * referansen i piksler.
 *
 * Samtalen: boksen er 520 px høy ved vanlig tekststørrelse, med innholdet nederst. Hver melding
 * er et rutenett som vokser fra 0fr til 1fr, så det eldste skyves ut i toppen når nytt kommer
 * inn. Takten ligger i nøkkelrammene spor-s1 … spor-s8 (meldingene) og spor-d1 … spor-d2
 * (skriveprikkene) over en syklus på 42 s: samtalen bygges opp i rundt 20 s, står i ro i rundt
 * 20 s, tones ut ved 95 % og starter på nytt.
 * Animasjonen gjelder bare når trekkspillet er åpent (details[open]), så et klikk starter
 * samtalen fra begynnelsen. Redusert bevegelse viser hele samtalen statisk uten prikker.
 */

.spor-eksempel {
  border: 1px solid var(--nausto-border);
  border-radius: var(--nausto-radius-card);
  background: var(--nausto-surface);
  color: var(--nausto-text);
  font-family: var(--nausto-font);
  overflow: hidden;
}

/* Sammendraget: treffmål minst 44 px, og min-height så større tekst ikke klippes. */
.spor-eksempel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 3.5rem;
  padding: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.spor-eksempel > summary::-webkit-details-marker {
  display: none;
}
.spor-eksempel > summary::marker {
  content: '';
}
.spor-eksempel > summary:hover {
  color: var(--nausto-action);
}
/* Fokusringen ligger innenfor kortet, siden kortet klipper til hjørnene. */
.spor-eksempel > summary:focus-visible {
  outline: 2px solid var(--nausto-focus);
  outline-offset: -4px;
  border-radius: 12px;
}
/* Spørsmålet brytes heller enn å skyve pila ut av kortet ved stor tekst på smal telefon. */
.spor-sporsmal {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.spor-ikon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--nausto-surfaceSubtle);
  color: var(--nausto-action);
}
.spor-chev {
  flex: none;
  color: var(--nausto-action);
  transition: transform 0.2s ease;
}
.spor-eksempel[open] > summary .spor-chev {
  transform: rotate(180deg);
}

/* Samtaleboksen: 520 px ved 16 px rotfont. Med større tekst vokser boksen dobbelt så fort som
 * teksten (65rem − 520px), siden meldingene også brytes over flere linjer; ved 200 % er den
 * 1560 px, og den høyeste enkeltmeldingen (1036 px på 390) får plass. Med mindre tekst følger
 * den teksten. */
.spor-samtale {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: max(32.5rem, 65rem - 520px);
  padding: 0 16px 16px;
  border-top: 1px solid var(--nausto-border);
  overflow: hidden;
}
/* Det eldste ruller ut i toppen og kuttes der: en toning fra kortets flate under skillelinja gjør
 * kuttet mykt i begge temaer. Toningen ligger innenfor kanten, så skillelinja står, og over
 * meldingene, som får egen stakkekontekst av opacity-animasjonen. */
.spor-samtale::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 3.5rem;
  background: linear-gradient(
    to bottom,
    var(--nausto-surface) 0,
    color-mix(in srgb, var(--nausto-surface) 60%, transparent) 40%,
    transparent 100%
  );
  pointer-events: none;
}
.spor-melding {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Avstanden mellom meldingene ligger inne i det som klippes, så en skjult melding tar 0 px. */
.spor-melding > *,
.spor-prikker > * {
  min-height: 0;
  overflow: hidden;
}
.spor-melding > * > :first-child,
.spor-prikker > * > :first-child {
  margin-top: 12px;
}
.spor-prikker {
  display: none;
}
.spor-prikker > * {
  display: flex;
}

/* Lukket innhold er display: none, ikke content-visibility: hidden som i Chromium ellers, så
 * animasjonene avbrytes og starter fra begynnelsen når eksempelet åpnes igjen. */
.spor-eksempel:not([open])::details-content {
  display: none;
}

/* Avspilling: bare i et åpent trekkspill, så samtalen starter på nytt ved hvert klikk. */
.spor-eksempel[open] > .spor-samtale .spor-melding,
.spor-eksempel[open] > .spor-samtale .spor-prikker {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  animation-duration: 42s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.spor-eksempel[open] > .spor-samtale .spor-s1 {
  animation-name: spor-s1;
}
.spor-eksempel[open] > .spor-samtale .spor-s2 {
  animation-name: spor-s2;
}
.spor-eksempel[open] > .spor-samtale .spor-s3 {
  animation-name: spor-s3;
}
.spor-eksempel[open] > .spor-samtale .spor-s4 {
  animation-name: spor-s4;
}
.spor-eksempel[open] > .spor-samtale .spor-s5 {
  animation-name: spor-s5;
}
.spor-eksempel[open] > .spor-samtale .spor-s6 {
  animation-name: spor-s6;
}
.spor-eksempel[open] > .spor-samtale .spor-s7 {
  animation-name: spor-s7;
}
.spor-eksempel[open] > .spor-samtale .spor-s8 {
  animation-name: spor-s8;
}
.spor-eksempel[open] > .spor-samtale .spor-d1 {
  animation-name: spor-d1;
}
.spor-eksempel[open] > .spor-samtale .spor-d2 {
  animation-name: spor-d2;
}

/* Spørsmålet fra brukeren, høyrestilt boble på surfaceSubtle. */
.spor-du {
  display: flex;
  justify-content: flex-end;
}
.spor-boble {
  margin: 0;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--nausto-surfaceSubtle);
  font-size: 0.9375rem;
  line-height: 1.47;
}

/* Svaret fra Nausto: tekst, steg, kilder og kort i én kolonne. */
.spor-svar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spor-svar > p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.47;
}
/* Plassen til tallene følger tekststørrelsen, så de ikke klippes ved stor tekst. */
.spor-steg {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.43;
}
.spor-steg > li + li {
  margin-top: 2px;
}

/* Skriveprikkene før hvert svar. */
.spor-prikkboble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--nausto-background);
}
.spor-prikk {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--nausto-action);
  animation: spor-prikk 1.2s ease-in-out infinite;
}
.spor-prikk:nth-child(2) {
  animation-delay: 0.2s;
}
.spor-prikk:nth-child(3) {
  animation-delay: 0.4s;
}

/* Kildebrikker. Ved stor tekst går detaljen på neste linje i brikken, og et langt ord brytes
 * heller enn å klippes. */
.spor-kilder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spor-kilde {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 2rem;
  padding: 4px 10px;
  border-radius: var(--nausto-radius-field);
  background: var(--nausto-surfaceSubtle);
  color: var(--nausto-action);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.spor-kilde > svg {
  flex: none;
}
.spor-kilde-detalj {
  font-weight: 500;
  color: var(--nausto-textMuted);
}

/* Delelista med status. Statusen står til høyre for navnet og går under det når raden blir for
 * smal, som ved stor tekst. */
.spor-deler {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nausto-border);
  border-radius: 12px;
  overflow: hidden;
}
.spor-del {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 2.5rem;
  padding: 6px 12px;
  font-size: 0.875rem;
  line-height: 1.43;
}
.spor-del + .spor-del {
  border-top: 1px solid var(--nausto-border);
}
.spor-del-navn {
  flex: 1 1 8rem;
  font-weight: 600;
}

/* Statusbrikker og merkelapper: action på surfaceSubtle, «Mangler» danger på dangerSurface,
 * delvis på lager warning på warningSurface. Statusen står på én linje; merkelappen brytes heller
 * enn å klippes ved stor tekst. */
.spor-status,
.spor-merke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--nausto-surfaceSubtle);
  color: var(--nausto-action);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
}
.spor-status {
  white-space: nowrap;
}
.spor-status--mangler {
  background: var(--nausto-dangerSurface);
  color: var(--nausto-danger);
}
.spor-status--delvis {
  background: var(--nausto-warningSurface);
  color: var(--nausto-warning);
}
.spor-merke {
  align-self: flex-start;
}

/* Utkast- og rutekortet på papirflaten. */
.spor-kort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--nausto-background);
}
.spor-kort-tittel {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.47;
  font-weight: 600;
}
.spor-kort--rute .spor-kort-tittel {
  font-size: 1.0625rem;
  line-height: 1.42;
  font-weight: 700;
}
.spor-kort-detalj {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--nausto-textMuted);
}
.spor-kort--rute .spor-kort-detalj {
  font-size: 0.875rem;
  line-height: 1.43;
}

/* Knappene i eksemplene er illustrasjon (span), ikke kontroller. */
.spor-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spor-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 8px 14px;
  border-radius: var(--nausto-radius-button);
  background: var(--nausto-action);
  color: var(--nausto-onAction);
  font-size: 0.875rem;
  line-height: 1.43;
  font-weight: 600;
}
.spor-knapp--sekundaer {
  background: var(--nausto-surfaceSubtle);
  color: var(--nausto-text);
}

/* Merknaden fra sist på warningSurface, med fliser for bildene til ekte bilder finnes. */
.spor-merknad {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--nausto-warningSurface);
  color: var(--nausto-warning);
}
.spor-merknad > p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.43;
}
.spor-bilder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.spor-bilde {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--nausto-surface);
}
.spor-bilder-tekst {
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Deletabellen: ekte tabell, som ruller sidelengs inne i boksen når kolonnen er smal. */
.spor-tabell {
  border: 1px solid var(--nausto-border);
  border-radius: 12px;
  overflow-x: auto;
}
.spor-tabell > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.spor-tabell th,
.spor-tabell td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--nausto-border);
  text-align: left;
  white-space: nowrap;
}
.spor-tabell th {
  font-weight: 600;
  color: var(--nausto-textMuted);
}
.spor-tabell td:first-child {
  font-weight: 600;
}
.spor-tabell td:nth-child(2) {
  font-variant-numeric: tabular-nums;
}
.spor-tabell tr:last-child > td {
  border-bottom: 0;
}

/* Smal telefon: delnavnet brytes, og tabellen får caption-størrelse og mindre luft, så den får
 * plass ned til 360 px; smalere enn det ruller den sidelengs som over. Sammendraget og samtalen
 * får 12 px sidemarg, likt, og tabellen 8 px innenfor kanten i begge ender. */
@media (max-width: 480px) {
  .spor-eksempel > summary,
  .spor-samtale {
    padding-inline: 12px;
  }
  .spor-tabell > table,
  .spor-tabell .spor-status {
    font-size: 0.75rem;
  }
  .spor-tabell th,
  .spor-tabell td {
    padding: 8px 6px;
  }
  .spor-tabell th:first-child,
  .spor-tabell td:first-child {
    padding-left: 8px;
    white-space: normal;
  }
  .spor-tabell th:last-child,
  .spor-tabell td:last-child {
    padding-right: 8px;
  }
  .spor-tabell .spor-status {
    padding: 2px 6px;
  }
}

.spor-veiledende {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--nausto-textMuted);
}

/* Bare for skjermleser: hvem som sier hva. */
.spor-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Takten over 42 s: referansens rytme strukket så siste melding er inne ved 49 % (20,6 s), så
 * samtalen står i ro i rundt 20 s til 95 % (39,9 s) før den tones ut og starter på nytt. */
@keyframes spor-s1 {
  0%,
  2.4% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  3.9%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s2 {
  0%,
  12.7% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  14.2%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s3 {
  0%,
  19% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  20.5%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s4 {
  0%,
  24.5% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  26%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s5 {
  0%,
  30.1% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  31.6%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s6 {
  0%,
  37.2% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  38.7%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s7 {
  0%,
  42.8% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  44.3%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-s8 {
  0%,
  47.5% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  49%,
  95% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  99.5% {
    grid-template-rows: 1fr;
    opacity: 0;
  }
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-d1 {
  0%,
  4.9% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  5.8%,
  12% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  13.3%,
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-d2 {
  0%,
  26.9% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  27.8%,
  36.3% {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  37.5%,
  100% {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes spor-prikk {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
}

/* Redusert bevegelse: hele samtalen statisk, uten prikker, og boksen får sin egen høyde. */
@media (prefers-reduced-motion: reduce) {
  .spor-samtale {
    height: auto;
  }
  .spor-samtale::before {
    display: none;
  }
  .spor-eksempel[open] > .spor-samtale .spor-melding {
    grid-template-rows: 1fr;
    opacity: 1;
    animation: none;
  }
  .spor-eksempel[open] > .spor-samtale .spor-prikker {
    display: none;
  }
  .spor-prikk {
    animation: none;
  }
  .spor-chev {
    transition: none;
  }
}