/* eeze.nu, riktningen Rapporten: vit rapportyta, bläck och hårfina linjer.
   Grönt betyder bara uppmätt resultat. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #101317;
  --ink-2: #4b5560;
  --ink-3: #646d7a;
  --rule: #e5e8ec;
  --rule-2: #cfd5dc;
  --ok: #0a6e45;
  --ok-tint: #e8f4ee;
  --ok-track: #b7dbc5;
  --surface: #f5f6f8;

  --font: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 1rem;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f12;
    --ink: #f2f4f7;
    --ink-2: #b4bcc6;
    --ink-3: #8b949f;
    --rule: #1f2329;
    --rule-2: #323840;
    --ok: #4fd197;
    --ok-tint: #10291d;
    --ok-track: #0d4f34;
    --surface: #15181c;
    color-scheme: dark;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: #2b323a;
    --ink-3: #3d4550;
    --rule: #8a939e;
    --rule-2: #646d7a;
    /* Spåret så mörkt det går med minst 3:1 mot de gröna strecken. */
    --ok-track: #8cc5a3;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --ink-2: #dde2e8;
    --ink-3: #c3cad3;
    --rule: #6b7480;
    --rule-2: #8b949f;
    --ok-track: #237050;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--rule-2) var(--bg);
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  font-synthesis: none;
  /* Avstavning bara vid ­ i sammansättningarnas leder (hyphens: manual är standard). Ett ord utan led
     bryts hellre än skjuter ut sidan. */
  overflow-wrap: break-word;
  caret-color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* Rubrikerna: tätare spårning och radavstånd ju större typen är. */
h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

small {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Behållare. Sidmarginalen växer med skärmen: 1, 2 och 4 rem. */
.wrap {
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .wrap {
    width: min(100% - 4rem, 82rem);
  }
}

@media (min-width: 80rem) {
  .wrap {
    width: min(100% - 8rem, 82rem);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nb {
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 20;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Menyn: genomskinligt material ovanpå sidan, mjuk kant när innehåll glider in under den. */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

.top::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 0.75rem;
  background: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .top::after {
    animation: edge-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 3rem;
  }
}

@keyframes edge-in {
  to {
    opacity: 1;
  }
}

/* Med större textstorlek bryts raden hellre än att Meny skärs av. */
.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  min-height: 4rem;
  padding-block: 0.5rem;
}

.word {
  margin-right: auto;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav-desktop {
  display: none;
}

.nav-desktop a {
  padding-block: 0.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
}

.summary-chip {
  display: none;
}

@media (min-width: 48rem) {
  .top-bar {
    gap: 1rem;
  }

  .word {
    margin-right: 1.5rem;
  }

  .nav-desktop {
    display: flex;
    gap: 1.75rem;
    margin-right: auto;
  }

  .menu {
    display: none;
  }
}

/* Sammanfattningschipet: dyker upp när resultatraden har passerat. Oskärpa och skala tillsammans. */
@media (min-width: 60rem) {
  .summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--ok-tint);
    color: var(--ok);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    filter: blur(6px);
    transform: scale(0.92);
    transition:
      opacity 200ms var(--ease-out),
      filter 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }

  html[data-past-result="true"] .summary-chip {
    opacity: 1;
    visibility: visible;
    filter: none;
    transform: none;
    transition:
      opacity 200ms var(--ease-out),
      filter 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s;
  }
}

.summary-chip b {
  font-weight: 700;
}

.menu > summary {
  display: inline-flex;
  align-items: center;
  height: 2.375rem;
  padding: 0 0.875rem;
  border-radius: 0.5rem;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  font-weight: 600;
  font-size: 0.9375rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu[open] > summary {
  background: var(--surface);
}

.menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  padding: 0 1rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-2);
}

/* Stängd meny ska inte ha någon låda. Annars lägger webbläsaren panelen i den inneslutna details-rutan. */
.menu:not([open]) .menu-panel {
  display: none;
}

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Knappar. Trycket syns direkt, på pointer-down. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.875rem;
  padding: 0 1.25rem;
  border-radius: 0.5rem;
  font: 600 1rem/1 var(--font);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 100ms ease-out,
    background-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.btn:active {
  transform: scale(0.97);
}

.btn-ink {
  background: var(--ink);
  color: var(--bg);
}

.btn-line {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule-2);
}

.btn-sm {
  height: 2.375rem;
  padding: 0 0.875rem;
  font-size: 0.9375rem;
}

/* Knapparna i en handlingsrad får bryta texten på två rader när den inte ryms, till exempel med större
   textstorlek. Höjden blir då ett golv i stället för ett mått. Knappen i menyn står alltid på en rad. */
.actions .btn {
  height: auto;
  min-height: 2.875rem;
  padding-block: 0.625rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

@media (hover: hover) {
  .btn-ink:hover {
    background: color-mix(in srgb, var(--ink) 84%, var(--bg));
  }

  .btn-line:hover {
    box-shadow: inset 0 0 0 1.5px var(--ink-3);
  }

  .nav-desktop a:hover {
    color: var(--ink);
  }
}

/* Pekytan är minst 44 px hög (Apples minsta), också där kontrollen ser mindre ut. */
.word,
.btn-sm,
.menu > summary,
.addr,
.copy {
  position: relative;
}

.word::after,
.btn-sm::after,
.menu > summary::after,
.addr::after,
.copy::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2.75rem;
  translate: 0 -50%;
}

/* Förstavyn: rubriken till vänster, rapporten till höger. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  padding-block: 2.5rem 3.5rem;
}

.lede {
  max-width: 34em;
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: center;
    min-height: calc(100vh - 14rem);
    min-height: calc(100svh - 14rem);
    padding-block: 4rem 3.5rem;
  }

  .hero-copy {
    grid-column: 1 / span 6;
  }

  .report {
    grid-column: 8 / span 5;
  }
}

/* Från 60rem står rubriken som tre fraser, en per rad, som i kompen. Storleken följer spalten så att den längsta
   frasen alltid får plats; utan containerenheter och under 60rem bryts rubriken fritt. */
@media (min-width: 60rem) {
  @supports (font-size: 1cqi) {
    .hero-copy {
      container-type: inline-size;
    }

    .hero-copy h1 {
      font-size: min(4.4rem, 9.4cqi);
    }

    .hero-copy h1 .phrase {
      white-space: nowrap;
    }
  }
}

/* Rapporten: filter, period och en markerad cell. */
.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 1rem;
}

.report-head h2 {
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.period {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.period svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--ink-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  color: var(--ink-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

.result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  margin: 1.375rem 0 0;
}

/* Cellerna får krympa under sitt längsta ord, annars skjuter ett långt ord ut hela raden. */
.result > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.result > .rate {
  grid-column: 1 / -1;
}

@media (min-width: 30rem) {
  .result {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }

  .result > .rate {
    grid-column: auto;
  }
}

.result dt {
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-3);
  font-size: 0.875rem;
}

.result dd {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* När siffran står i samma rad står värdena i höjd med den, inte längst ned under ett tomrum. */
@media (min-width: 30rem) {
  .result dd {
    justify-content: center;
  }
}

.result dd small {
  margin-top: 0.25rem;
  color: var(--ink-3);
}

/* I en egen kolumn står etiketten över siffran i den gröna cellen. Under 30rem står den under From och To och
   börjar vid samma kant som de. */
@media (min-width: 30rem) {
  .result .rate dt {
    padding-inline: 0.875rem;
  }
}

.result .rate dd {
  padding: 1.125rem 0.875rem 1rem;
  background: var(--ok-tint);
  color: var(--ok);
}

.result .rate strong {
  --figure-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: 700;
  font-size: var(--figure-size);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Siffran och procenttecknet står alltid på en rad. Där cellen är smal, i den delade förstavyn upp till
   cirka 1200 px, följer storleken cellen på samma sätt som rubriken följer sin spalt. */
@supports (font-size: 1cqi) {
  .result .rate dd {
    container-type: inline-size;
  }

  .result .rate strong {
    font-size: min(var(--figure-size), 42cqi);
  }
}

.result .rate small {
  margin-top: 0.5rem;
  color: var(--ok);
}

/* Mätaren under resultatraden: hundra streck i spårets ljusa grön, och graden av hundra tänds i godkänt grönt,
   ett streck i taget från vänster. Utan JS tänds de efter tre sekunder; med JS väntar de tills mätaren syns
   (site.js). Där rapporten är smal är strecken 1 px, så att mellanrummen syns. */
.meter {
  --meter-start: 3s;
  --meter-step: 70ms;
  margin-top: 1.25rem;
}

.meter[data-motion="play"] {
  --meter-start: 0s;
}

.meter-ticks {
  display: flex;
  justify-content: space-between;
  height: 1rem;
}

.meter-ticks span {
  position: relative;
  width: 1px;
  border-radius: 1px;
  background: var(--ok-track);
}

@media (min-width: 30rem) {
  .meter-ticks span {
    width: 2px;
  }
}

.meter-ticks .on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ok);
  transform-origin: 50% 100%;
  animation: meter-on 400ms var(--ease-out) both;
  animation-delay: calc(var(--meter-start) + var(--n, 0) * var(--meter-step));
}

/* Strecket på plats n väntar n steg. Reglerna räcker till tolv gröna streck. */
.meter-ticks .on:nth-child(2) {
  --n: 1;
}

.meter-ticks .on:nth-child(3) {
  --n: 2;
}

.meter-ticks .on:nth-child(4) {
  --n: 3;
}

.meter-ticks .on:nth-child(5) {
  --n: 4;
}

.meter-ticks .on:nth-child(6) {
  --n: 5;
}

.meter-ticks .on:nth-child(7) {
  --n: 6;
}

.meter-ticks .on:nth-child(8) {
  --n: 7;
}

.meter-ticks .on:nth-child(9) {
  --n: 8;
}

.meter-ticks .on:nth-child(10) {
  --n: 9;
}

.meter-ticks .on:nth-child(11) {
  --n: 10;
}

.meter-ticks .on:nth-child(12) {
  --n: 11;
}

.meter[data-motion="wait"] .meter-ticks .on::after {
  animation-play-state: paused;
}

/* Ett nytt animationsnamn startar animationen om från början. */
.meter[data-motion="play"] .meter-ticks .on::after {
  animation-name: meter-on-now;
}

@keyframes meter-on {
  from {
    opacity: 0;
    transform: scaleY(0.4);
  }
}

@keyframes meter-on-now {
  from {
    opacity: 0;
    transform: scaleY(0.4);
  }
}

@keyframes meter-fade {
  from {
    opacity: 0;
  }
}

@keyframes meter-fade-now {
  from {
    opacity: 0;
  }
}

/* Raden under strecken är två undertexter (small, Caption): början av skalan till vänster, slutet till höger. */
.meter-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  color: var(--ink-3);
}

/* Rapportraderna under förstavyn: rubrik till vänster, text till höger. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: clamp(2.5rem, 1.75rem + 2.4vw, 3.75rem);
  border-top: 1px solid var(--rule-2);
}

.row-text {
  max-width: 40em;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
}

.row-body > * + .row-text {
  margin-top: 1.25rem;
}

/* Där raderna är långa flyttas ett långt ord hellre till nästa rad än avstavas i en led. */
@media (min-width: 75rem) {
  .lede,
  .row-text {
    -webkit-hyphens: none;
    hyphens: none;
  }
}

@media (min-width: 60rem) {
  .row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    /* Rubriken står på samma baslinje som radens första textrad. */
    align-items: baseline;
  }

  .row > h2 {
    grid-column: 1 / span 4;
  }

  .row > .row-text {
    grid-column: 5 / span 6;
  }

  .row > .row-body {
    grid-column: 5 / -1;
  }
}

.steps ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-content: start;
  column-gap: 0.5rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  grid-row: span 2;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.steps h3 {
  font-size: 1.0625rem;
}

.steps li p {
  margin-top: 0.375rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 37.5rem) {
  .steps ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (min-width: 60rem) {
  .steps ol {
    grid-column: 5 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.chips-lg li {
  height: 2.25rem;
  padding: 0 1rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.chips-lg .more {
  padding-left: 0.25rem;
  box-shadow: none;
  color: var(--ink-3);
}

/* Personerna som rapportrader: namn, roll, mejl och kopiera. */
.people {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-2);
}

.people li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "person role"
    "addr copy";
  align-items: center;
  gap: 0.375rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.person {
  grid-area: person;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.role {
  grid-area: role;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.addr {
  grid-area: addr;
  justify-self: start;
  font-size: 1.0625rem;
}

.copy {
  grid-area: copy;
  justify-self: end;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.875rem/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 100ms ease-out,
    background-color 150ms ease-out;
}

.copy:active {
  transform: scale(0.97);
}

@media (min-width: 40rem) {
  .people li {
    /* Kopiera-spåret rymmer den längsta etiketten, "Markera och kopiera", så att raden står still. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 10rem;
    grid-template-areas: "person role addr copy";
  }

  .role {
    justify-self: start;
  }
}

.company {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.foot {
  padding-bottom: 2.5rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}

.foot .wrap {
  padding-top: 2rem;
  border-top: 1px solid var(--rule-2);
}

.foot p + p {
  margin-top: 0.375rem;
}

/* Punkten står bara mellan två delar på samma rad. Varje del bär sin punkt framför sig, raden är flyttad en
   punktbredd åt vänster, och klippet tar bort punkten framför den del som börjar en rad. Klippet lämnar
   plats för fokusringen. */
.foot p {
  --dot: 1.25em;
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: calc(-1 * var(--dot));
  clip-path: inset(-0.5em -0.5em -0.5em calc(var(--dot) - 0.45em));
}

.foot p > * {
  position: relative;
  padding-inline-start: var(--dot);
}

.foot p > *::before {
  content: "·";
  content: "·" / "";
  position: absolute;
  inset-inline-start: 0;
  width: var(--dot);
  text-align: center;
}

.foot a {
  color: var(--ink-2);
}

/* Tillgänglighet: mindre rörelse, mindre genomskinlighet, mer kontrast. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-chip,
  html[data-past-result="true"] .summary-chip {
    filter: none;
    transform: none;
    transition: none;
  }

  /* Mätarens streck tonar in på 200 ms, alla samtidigt och utan att växa. Långformerna låter pausen stå kvar. */
  .meter {
    --meter-step: 0ms;
  }

  .meter-ticks .on::after {
    animation-name: meter-fade;
    animation-duration: 200ms;
    animation-timing-function: ease;
  }

  .meter[data-motion="play"] .meter-ticks .on::after {
    animation-name: meter-fade-now;
  }

  /* Trycket syns som färg i stället för skala, direkt och utan övergång. */
  .btn,
  .copy {
    transition: none;
  }

  .btn:active,
  .copy:active {
    transform: none;
  }

  .btn-ink:active {
    background: color-mix(in srgb, var(--ink) 72%, var(--bg));
  }

  .btn-line:active {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }

  .copy:active {
    background: color-mix(in srgb, var(--ink) 12%, var(--surface));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .top {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .top {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--rule-2);
  }

  .btn-line {
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
}

/* Tvingade färger gör alla bakgrunder till systemets Canvas. Mätaren behåller sina streck i systemets färger. */
@media (forced-colors: active) {
  .meter-ticks span {
    forced-color-adjust: none;
    background: GrayText;
  }

  .meter-ticks .on::after {
    background: CanvasText;
  }
}

/* Integritetssidan och 404: samma värld, en spalts dokument. Sidfoten står i botten även på en kort sida. */
.page-doc {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-doc main {
  flex: 1;
}

.doc-head {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 2.4vw, 3.75rem);
}

/* Under startsidans rubrik på varje bredd: den följer sin spalt och är 41 px vid 60rem. */
.doc-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 1.6vw, 3rem);
}

.doc-head .lede {
  margin-top: 1.25rem;
}

.updated {
  margin-top: 1.25rem;
  color: var(--ink-3);
  font-size: 0.875rem;
}