/*
  NUVAB, Wilhelmsson Labs AB. Ytorna efter föreläsningen AI i arbetet, 9 oktober 2026.
  Identitet: Wilhelmsson Labs varumärkesbok v1.0 (10 maj 2026) och tokens v1.1.
  Mörk canvas, prismat först, Space Grotesk för rubriker, Inter för text,
  JetBrains Mono för metadata och siffror. Crimson är accent, aldrig yta.
  Alla värden kommer från wl-tokens.css (var(--wl-*)). De få värden som inte
  finns som token är kommenterade där de står.
  Klassnamnen (etikett, hylla, prick, falla med flera) är kvar från första
  versionen eftersom JavaScript och testerna hakar i dem.
*/

/* Lokala alias: gör komponenterna läsbara, pekar alltid på en token */
:root {
  --yta: var(--wl-color-bg);
  --kort: var(--wl-color-bg-elevated);
  --falt: var(--wl-color-bg-raised);
  --text: var(--wl-color-text);
  --text-2: var(--wl-color-text-muted);
  --text-3: var(--wl-color-text-dim);
  --lastext: var(--wl-neutral-300); /* lång brödtext: lugnare än #fafafa, 13,9:1 mot canvas */
  --linje: var(--wl-border-subtle);
  --linje-2: var(--wl-border-default);
  --linje-3: var(--wl-border-strong);
  /* Fältkant: komponentgräns måste klara 3:1 (WCAG 1.4.11). Neutral 500 mot kortet ger 4,0:1. */
  --faltkant: var(--wl-neutral-500);
  --accent: var(--wl-color-crimson);

  --gutter: clamp(var(--wl-space-4), 5vw, var(--wl-space-20));
  --sektion: clamp(var(--wl-space-20), 10vw, var(--wl-space-40));
  --matt: 68ch; /* radlängd för löptext, 65 till 75 tecken */
}

/* Grund */

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

html {
  color-scheme: dark;
  background: var(--yta);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--wl-font-body);
  font-size: clamp(var(--wl-text-base), 0.97rem + 0.18vw, var(--wl-text-lg));
  font-weight: var(--wl-weight-regular);
  line-height: 1.6;
  color: var(--text);
  background: var(--yta);
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Långa ord (e-postadresser, URL:er, sammansättningar) bryts i stället för att klippas vid 200 % text.
     Automatisk avstavning är avstängd med avsikt: den gav "an-vänder" och "rade-rar" i samtyckestexten. */
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  font-family: var(--wl-font-display);
  margin: 0;
  /* Svensk text: radavstånd minst 1,25 och luft ovanför, så att ringen i å och prickarna i ä och ö aldrig klipps */
  line-height: 1.25;
  padding-top: 0.04em;
  overflow: visible;
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
}

h1 {
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-tight);
}

h2 {
  font-weight: var(--wl-weight-semibold);
  letter-spacing: var(--wl-tracking-snug);
}

h3,
h4 {
  font-weight: var(--wl-weight-medium);
  letter-spacing: var(--wl-tracking-normal);
}

p,
li,
dd {
  text-wrap: pretty;
}

p {
  margin: 0;
}

b,
strong {
  font-weight: var(--wl-weight-semibold);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wl-color-text-dim);
  text-underline-offset: 0.24em;
  transition:
    color var(--wl-duration-fast) var(--wl-ease-standard),
    text-decoration-color var(--wl-duration-fast) var(--wl-ease-standard),
    text-decoration-thickness var(--wl-duration-fast) var(--wl-ease-standard);
}

/* Hover med två signaler: färg och tjockare understrykning */
a:hover {
  color: var(--wl-color-crimson-soft);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Fokus: 2 px off-vit ring med avstånd. Syns mot canvas, kort och fält. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important; /* utility: hidden måste vinna över display i komponenter */
}

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

/* Honungsfälla: utanför skärmen, aldrig synlig, aldrig i tabbordningen */
.falla {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nb {
  white-space: nowrap;
}

.siffra {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--wl-color-crimson-glow);
  color: var(--text);
}

/* Ramverk */

.wrap {
  width: 100%;
  max-width: var(--wl-container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Huvud: master lockup, prismat först och ordmärket efter */

.huvud {
  padding-block: clamp(var(--wl-space-5), 3vw, var(--wl-space-8)) 0;
}

.ordmarke {
  --ordmarke: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);
  display: inline-flex;
  align-items: center;
  /* Varumärkesboken: 24 px mellanrum vid 44 px text, alltså 0,545 gånger textens storlek */
  gap: calc(var(--ordmarke) * 0.545);
  margin: 0;
  /* Frizon minst 1x (höjden av W) runt loggan, här 12 px uppåt och nedåt */
  padding-block: var(--wl-space-3);
  font-family: var(--wl-font-display);
  font-size: var(--ordmarke);
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-tight);
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  /* Ordmärket bryts hellre i två rader än skapar sidledsscroll vid 200 % text */
  max-width: 100%;
}

a.ordmarke {
  text-decoration: none;
  min-height: 44px;
}

a.ordmarke:hover {
  color: var(--text);
}

a.ordmarke:hover span {
  color: var(--text-2);
}

.prisma {
  display: block;
  flex: none;
  /* Proportion från varumärkesboken: 134 px symbol till 44 px text */
  height: calc(var(--ordmarke) * 2.2);
  width: auto;
  aspect-ratio: 180 / 200;
}

.ordmarke span {
  transition: color var(--wl-duration-fast) var(--wl-ease-standard);
}

/* Metadata-raden ovanför rubriken: mono, dämpad */
.rad {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-sm);
  font-weight: var(--wl-weight-regular);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

/* Webbplatsens signatur: lätt rubrik där ett nyckelord är crimson. Bara i rubriker över 18 px. */
.nyckel {
  color: var(--accent);
}

/* Hjälte */

.hjalte {
  padding-block: clamp(var(--wl-space-6), 7vw, var(--wl-space-24)) var(--sektion);
  display: grid;
  gap: clamp(var(--wl-space-8), 5vw, var(--wl-space-12));
}

.hjalte--kort {
  padding-bottom: var(--wl-space-16);
}

.hjalte__text {
  display: grid;
  gap: var(--wl-space-6);
  align-content: start;
}

.hjalte h1 {
  font-size: clamp(var(--wl-text-4xl), 1.6rem + 3.2vw, var(--wl-text-7xl));
}

.hjalte h1 > span:not(.nyckel) {
  display: block;
  color: var(--text-2);
}

.ingress {
  font-size: clamp(var(--wl-text-lg), 1.05rem + 0.4vw, var(--wl-text-2xl));
  line-height: 1.5;
  max-width: 34ch;
  color: var(--text-2);
}

@media (min-width: 960px) {
  .ruta {
    font-size: var(--wl-text-base);
  }

  .hjalte {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(var(--wl-space-16), 7vw, var(--wl-space-32));
    align-items: start;
  }

  .hjalte .hylla {
    margin-top: var(--wl-space-12);
  }
}

/* Kortet: lyft yta med hårfin kant och en kort crimson accentlinje upptill */

.etikett {
  position: relative;
  min-width: 0;
  color: var(--text);
  background: var(--kort);
  border: 1px solid var(--linje-2);
  border-radius: var(--wl-radius-xl);
  padding: clamp(var(--wl-space-5), 4vw, var(--wl-space-10));
  box-shadow: var(--wl-shadow-lg);
}

/* Accentlinje: varumärkesbokens "border-top på pillars", 48 px, långt under 5 procent av ytan */
.etikett::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(var(--wl-space-5), 4vw, var(--wl-space-10));
  width: var(--wl-space-12);
  height: 2px;
  background: var(--accent);
}

.etikett a {
  color: var(--text);
}

.etikett__namn {
  font-size: clamp(var(--wl-text-xl), 1.1rem + 0.4vw, var(--wl-text-2xl));
  margin-bottom: var(--wl-space-6);
}

.etikett__rad {
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.etikett__namn + .etikett__forklaring {
  margin-top: calc(var(--wl-space-3) * -1);
  margin-bottom: var(--wl-space-6);
}

@media (prefers-reduced-motion: no-preference) {
  .hylla {
    animation: stiga var(--wl-duration-hero) var(--wl-ease-out-expo) 120ms both;
  }
}

@keyframes stiga {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Formulär */

.form {
  display: grid;
  gap: var(--wl-space-6);
}

.falt {
  display: grid;
  gap: var(--wl-space-2);
}

.falt > label {
  font-size: var(--wl-text-base);
  font-weight: var(--wl-weight-medium);
  line-height: 1.4;
  color: var(--text);
}

.falt__valfri {
  font-weight: var(--wl-weight-regular);
  color: var(--text-2);
}

.falt__hjalp {
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.inmatning {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px var(--wl-space-4); /* 14 px ger 56 px höjd med 1,4 i radhöjd och 1 px kant */
  font-family: var(--wl-font-body);
  font-size: max(16px, var(--wl-text-base)); /* 16 px eller mer: iOS zoomar inte in vid fokus */
  line-height: 1.4;
  color: var(--text);
  background: var(--falt);
  border: 1px solid var(--faltkant);
  border-radius: var(--wl-radius-md);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--wl-duration-fast) var(--wl-ease-standard),
    background-color var(--wl-duration-fast) var(--wl-ease-standard);
}

.inmatning:hover {
  border-color: var(--wl-neutral-400);
}

.inmatning:focus-visible {
  border-color: var(--wl-neutral-400);
  background: var(--yta);
}

.inmatning[aria-invalid="true"] {
  border-color: var(--wl-color-danger);
  box-shadow: inset 0 0 0 1px var(--wl-color-danger);
}

/* Ogiltigt fält med fokus: både fokusringen och den inre markeringen syns */
.inmatning[aria-invalid="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--wl-color-danger);
}

textarea.inmatning {
  min-height: 128px;
  resize: vertical;
}

/* Kryssrutor: hela raden är tryckyta */

.rutor {
  display: grid;
  gap: var(--wl-space-1);
}

.ruta {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--wl-space-3);
  align-items: start;
  min-height: 44px;
  padding-block: var(--wl-space-2);
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text-2);
  cursor: pointer;
}

.ruta input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  background: var(--falt);
  border: 1.5px solid var(--wl-neutral-400);
  border-radius: var(--wl-radius-xs);
  cursor: pointer;
  transition:
    background-color var(--wl-duration-fast) var(--wl-ease-standard),
    border-color var(--wl-duration-fast) var(--wl-ease-standard);
}

.ruta input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--text);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform var(--wl-duration-fast) var(--wl-ease-out-expo);
}

.ruta input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.ruta input:checked::before {
  transform: scale(1);
}

.ruta:hover input:not(:checked) {
  border-color: var(--text);
}

.ruta input:checked + span {
  color: var(--text);
}

.ruta input[aria-invalid="true"] {
  border-color: var(--wl-color-danger);
  box-shadow: 0 0 0 2px var(--kort), 0 0 0 4px var(--wl-color-danger);
}

.ruta input[aria-invalid="true"]:focus-visible {
  box-shadow: none;
}

@media (forced-colors: active) {
  .ruta input {
    -webkit-appearance: auto;
    appearance: auto;
  }

  .ruta input::before {
    content: none;
  }

  .etikett::before {
    content: none;
  }
}

/* Knappar: crimson pill. #fafafa på #dc2626 ger 4,63:1, alltså AA även för normal text.
   Hover byter aldrig till ljusare crimson (#ef4444 ger 3,5:1), den lyfter och lyser i stället. */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 var(--wl-space-6);
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-lg);
  font-weight: var(--wl-weight-medium);
  line-height: 1.25;
  letter-spacing: var(--wl-tracking-snug);
  color: var(--text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--wl-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--wl-duration-base) var(--wl-ease-out-expo),
    box-shadow var(--wl-duration-base) var(--wl-ease-standard),
    background-color var(--wl-duration-base) var(--wl-ease-standard);
}

.knapp:hover {
  box-shadow: var(--wl-shadow-glow);
}

.knapp:active {
  background: var(--wl-color-crimson-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .knapp:hover {
    transform: translateY(-1px);
  }

  .knapp:active {
    transform: translateY(0);
  }
}

.knapp:focus-visible {
  outline-offset: 4px;
}

.knapp[aria-disabled="true"] {
  background: var(--wl-color-crimson-deep);
  border-color: var(--wl-color-crimson-deep);
  box-shadow: none;
  cursor: progress;
  transform: none;
}

/* Sekundär knapp: spökpill, samma höjd */
.knapp-spok,
.dela,
.qr-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wl-space-3);
  min-height: 48px;
  padding: 0 var(--wl-space-6);
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-base);
  font-weight: var(--wl-weight-medium);
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--linje-3);
  border-radius: var(--wl-radius-pill);
  transition:
    transform var(--wl-duration-base) var(--wl-ease-out-expo),
    border-color var(--wl-duration-base) var(--wl-ease-standard),
    color var(--wl-duration-base) var(--wl-ease-standard);
}

.knapp-spok:hover,
.dela:hover,
.qr-panel a:hover {
  color: var(--wl-color-crimson-soft);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .knapp-spok:hover,
  .dela:hover,
  .qr-panel a:hover {
    transform: translateY(-1px);
  }
}

.lank-knapp {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wl-color-text-dim);
  text-underline-offset: 0.24em;
  cursor: pointer;
}

.lank-knapp:hover {
  color: var(--wl-color-crimson-soft);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Meddelanden: ikon och text, aldrig bara färg. Funktionell röd, hel kant, ingen sidostrimma. */

.medd {
  display: flex;
  gap: var(--wl-space-2);
  align-items: flex-start;
  padding: var(--wl-space-2) var(--wl-space-3);
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text);
  background: var(--wl-color-crimson-tint);
  border: 1px solid var(--wl-color-crimson-glow);
  border-radius: var(--wl-radius-sm);
}

.medd svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--wl-color-crimson-soft);
}

.medd:empty {
  display: none;
}

/* Klart-läge i kortet */

.klart {
  display: grid;
  gap: var(--wl-space-4);
  color: var(--text-2);
}

.klart:focus {
  outline: none;
}

.klart h2 {
  font-size: clamp(var(--wl-text-xl), 1.1rem + 0.4vw, var(--wl-text-2xl));
  color: var(--text);
}

.klart [data-adress] {
  font-family: var(--wl-font-mono);
  color: var(--text);
  overflow-wrap: anywhere;
  hyphens: none;
}

/* Betyget: fem cirklar, riktiga radioknappar under */

.skala {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.skala legend {
  padding: 0;
  margin-bottom: var(--wl-space-3);
}

.skala legend h2 {
  font-size: clamp(var(--wl-text-xl), 1.1rem + 0.4vw, var(--wl-text-2xl));
}

.skala__hjalp {
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: var(--wl-space-6);
  max-width: 40ch;
}

.prickar {
  display: flex;
  justify-content: space-between;
  gap: var(--wl-space-2);
}

.prick {
  position: relative;
  flex: 1 1 0;
  min-width: 44px;
  max-width: 64px;
  aspect-ratio: 1;
}

.prick input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.prick__yta {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--wl-radius-full);
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-xl);
  font-weight: var(--wl-weight-regular);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
  background: var(--falt);
  border: 1px solid var(--faltkant);
  transition:
    background-color var(--wl-duration-fast) var(--wl-ease-standard),
    border-color var(--wl-duration-fast) var(--wl-ease-standard),
    transform var(--wl-duration-base) var(--wl-ease-out-expo);
}

.prick input:hover + .prick__yta {
  border-color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .prick input:hover + .prick__yta {
    transform: translateY(-1px);
  }
}

/* Valt: crimson fyllning, #fafafa siffra (4,63:1) */
.prick input:checked + .prick__yta {
  color: var(--text);
  background: var(--accent);
  border-color: var(--accent);
  transform: none;
}

.prick input:focus-visible + .prick__yta {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.skala__andar {
  display: flex;
  justify-content: space-between;
  gap: var(--wl-space-4);
  margin-top: var(--wl-space-3);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.skala__andar span:last-child {
  text-align: right;
}

/* Sektioner på canvas */

.sektion {
  padding-block: 0 var(--sektion);
}

.sektion h2 {
  font-size: clamp(var(--wl-text-3xl), 1.5rem + 1.2vw, var(--wl-text-4xl));
}

@media (min-width: 960px) {
  .delad {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(var(--wl-space-16), 7vw, var(--wl-space-32));
    align-items: start;
  }

  .delad > .delad__hoger {
    grid-column: 2;
  }
}

/* Det här får du: register, rubrik till vänster och text till höger. Inga likadana kort. */

.far {
  display: grid;
  gap: var(--wl-space-12);
  padding-top: var(--wl-space-12);
  /* Hårlinjen följer innehållets kant, inte wrap-elementets utfyllnad */
  background: linear-gradient(var(--linje), var(--linje)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.far__huvud {
  display: grid;
  gap: var(--wl-space-4);
  max-width: 40rem;
}

.far__huvud h3 {
  font-size: clamp(var(--wl-text-2xl), 1.2rem + 1.2vw, var(--wl-text-4xl));
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-snug);
}

.far__huvud p {
  font-size: clamp(var(--wl-text-base), 0.98rem + 0.3vw, var(--wl-text-xl));
  line-height: 1.55;
  color: var(--lastext);
}

.far__huvud .far__exempel {
  color: var(--text-2);
}

.far__exempel .siffra {
  font-family: var(--wl-font-mono);
  color: var(--text);
}

.far__ovriga {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  counter-reset: far;
}

.far__ovriga li {
  counter-increment: far;
  position: relative;
  padding-block: var(--wl-space-6);
  padding-left: var(--wl-space-12);
  border-top: 1px solid var(--linje);
}

.far__ovriga li::before {
  content: counter(far, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--wl-space-6);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-sm);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.far__ovriga h3 {
  font-size: clamp(var(--wl-text-lg), 1.02rem + 0.3vw, var(--wl-text-xl));
  margin-bottom: var(--wl-space-2);
}

.far__ovriga p {
  color: var(--text-2);
  max-width: 44ch;
}

@media (min-width: 720px) {
  .far__ovriga li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--wl-space-8);
    align-items: baseline;
  }

  .far__ovriga h3 {
    margin-bottom: 0;
  }
}

@media (min-width: 960px) {
  .far {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(var(--wl-space-12), 6vw, var(--wl-space-24));
  }

  .far > h2 {
    grid-row: 1 / span 2;
  }

  .far__ovriga {
    grid-column: 2;
  }
}

/* Så hanterar jag din adress */

.villkor {
  border-top: 1px solid var(--linje-2);
  border-bottom: 1px solid var(--linje-2);
}

.villkor summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wl-space-4);
  min-height: 64px;
  padding-block: var(--wl-space-3);
  font-family: var(--wl-font-display);
  font-size: clamp(var(--wl-text-lg), 1.02rem + 0.3vw, var(--wl-text-xl));
  font-weight: var(--wl-weight-medium);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color var(--wl-duration-fast) var(--wl-ease-standard);
}

.villkor summary:hover {
  color: var(--wl-color-crimson-soft);
}

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

.villkor summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--wl-duration-slow) var(--wl-ease-out-expo);
}

.villkor[open] summary::after {
  transform: rotate(45deg);
}

.villkor__text {
  display: grid;
  gap: var(--wl-space-4);
  padding-bottom: var(--wl-space-8);
  max-width: var(--matt);
  color: var(--text-2);
}

.dela {
  margin-top: var(--wl-space-8);
}

.dela svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* QR för grannen: helskärm via :target, fungerar utan JavaScript */

.qr-panel {
  display: none;
}

.qr-panel:target,
.qr-panel--oppen {
  position: fixed;
  inset: 0;
  z-index: var(--wl-z-modal);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--wl-space-6);
  padding: var(--wl-space-6);
  color: var(--text);
  background: var(--yta);
  text-align: center;
  overflow: auto;
}

.qr-panel .qr {
  width: min(84vw, 60vh);
  border-radius: var(--wl-radius-lg);
  overflow: hidden;
}

.qr-panel__adress {
  font-family: var(--wl-font-mono);
  font-size: clamp(var(--wl-text-lg), 1rem + 1vw, var(--wl-text-2xl));
  letter-spacing: 0.01em;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.qr {
  aspect-ratio: 1;
}

.qr svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

/* Sidfot */

.sidfot {
  background: var(--kort);
  border-top: 1px solid var(--linje);
  color: var(--text-2);
  padding-block: var(--wl-space-12) var(--wl-space-16);
  font-size: var(--wl-text-sm);
  line-height: 1.6;
}

.sidfot .wrap {
  display: grid;
  gap: var(--wl-space-2);
}

.sidfot a {
  color: var(--text);
}

/* Enkla sidor: tack, fel, betyg-tack, integritet */

.enkel {
  padding-block: clamp(var(--wl-space-10), 7vw, var(--wl-space-24)) var(--sektion);
  display: grid;
  gap: var(--wl-space-12);
}

.enkel__text {
  display: grid;
  gap: var(--wl-space-4);
  max-width: var(--matt);
  align-content: start;
}

.enkel h1 {
  font-size: clamp(var(--wl-text-4xl), 1.6rem + 3vw, var(--wl-text-6xl));
  margin-bottom: var(--wl-space-2);
}

.enkel__text h2 {
  font-size: clamp(var(--wl-text-xl), 1.1rem + 0.5vw, var(--wl-text-2xl));
  margin-top: var(--wl-space-6);
}

.enkel__text p {
  color: var(--lastext);
}

.enkel__text > p:first-of-type {
  font-size: clamp(var(--wl-text-lg), 1.05rem + 0.3vw, var(--wl-text-xl));
  line-height: 1.5;
}

.enkel__text .lagom {
  font-size: var(--wl-text-base);
  color: var(--text-2);
}

.orsaker {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--wl-space-2);
  color: var(--lastext);
}

.orsaker li::marker {
  color: var(--text-3);
}

@media (min-width: 960px) {
  .enkel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(var(--wl-space-16), 7vw, var(--wl-space-32));
    align-items: start;
  }

  .enkel > .enkel__text:only-child {
    grid-column: 1 / -1;
  }
}

/* Kalkylatorn: ett Labs-verktyg. Mono och tabulära siffror i resultatet. */

.kalk__grupp {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: var(--wl-space-4);
}

.kalk__grupp + .kalk__grupp {
  padding-top: var(--wl-space-6);
  border-top: 1px solid var(--linje);
}

.kalk__grupp legend {
  padding: 0;
  margin-bottom: var(--wl-space-3);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  font-weight: var(--wl-weight-medium);
  line-height: 1.5;
  letter-spacing: var(--wl-tracking-widest);
  text-transform: uppercase;
  color: var(--text-2);
}

.kalk__par {
  display: grid;
  gap: var(--wl-space-6);
  align-items: start;
}

/* Två fält i bredd bara när kortet självt är brett nog, annars hamnar fälten på olika höjd */
[data-kalk] {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .kalk__par {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-kalk] .inmatning {
  font-family: var(--wl-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Stämpeln "Räkneexempel, inte statistik": mono-pill */
.stampel {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--wl-space-2);
  padding: var(--wl-space-1) var(--wl-space-3);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-2);
  border: 1px solid var(--linje-3);
  border-radius: var(--wl-radius-pill);
}

.stampel::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--wl-radius-full);
  background: var(--accent);
}

.stampel--flaska {
  color: var(--text-2);
}

.kvitto {
  margin: 0;
  display: grid;
  gap: 0;
}

.kvitto div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wl-space-4);
  align-items: baseline;
  padding-block: var(--wl-space-3);
  border-top: 1px solid var(--linje-2);
}

.kvitto dt {
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.kvitto dd {
  margin: 0;
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
  hyphens: none;
}

@media (max-width: 479px) {
  .kvitto div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wl-space-1);
  }

  .kvitto dd {
    text-align: left;
  }
}

.kvitto .kvitto__summa {
  border-top: 2px solid var(--accent);
  padding-top: var(--wl-space-4);
  margin-top: var(--wl-space-2);
}

.kvitto .kvitto__summa dt {
  color: var(--text);
  font-weight: var(--wl-weight-medium);
}

.kvitto .kvitto__summa dd {
  font-family: var(--wl-font-display);
  font-size: clamp(var(--wl-text-3xl), 1.4rem + 1.6vw, var(--wl-text-5xl));
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-tight);
  line-height: 1.25;
}

.steg {
  list-style: none;
  counter-reset: steg;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: var(--matt);
}

.steg li {
  counter-increment: steg;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--wl-space-4);
  padding-block: var(--wl-space-4);
  border-top: 1px solid var(--linje);
}

.steg li::before {
  content: counter(steg, decimal-leading-zero);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-sm);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.steg b,
.steg [data-ut] {
  font-variant-numeric: tabular-nums;
}

.prosa {
  display: grid;
  gap: var(--wl-space-4);
  max-width: var(--matt);
}

.prosa h3 {
  font-size: clamp(var(--wl-text-lg), 1.02rem + 0.3vw, var(--wl-text-xl));
  margin-top: var(--wl-space-6);
}

.prosa a {
  color: var(--text);
}

.flaska-text {
  color: var(--lastext);
}

.flaska-text strong,
.flaska-text b {
  font-weight: var(--wl-weight-semibold);
  color: var(--text);
}

/* Paketsidan: ett dokument på canvas, innehållet till vänster */

.ark-wrap {
  padding-bottom: var(--sektion);
}

.ark {
  padding: clamp(var(--wl-space-6), 6vw, var(--wl-space-24)) clamp(var(--wl-space-5), 6vw, var(--wl-space-24)) clamp(var(--wl-space-12), 8vw, var(--wl-space-32));
  box-shadow: none;
}

.ark::before {
  left: clamp(var(--wl-space-5), 6vw, var(--wl-space-24));
}

.ark__grid {
  display: grid;
  gap: var(--wl-space-12);
}

.innehall-nav h2 {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  font-weight: var(--wl-weight-medium);
  letter-spacing: var(--wl-tracking-widest);
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--wl-space-3);
}

.innehall-nav ol {
  list-style: none;
  counter-reset: nav;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linje);
}

.innehall-nav li {
  counter-increment: nav;
  border-bottom: 1px solid var(--linje);
}

.innehall-nav a {
  display: flex;
  align-items: center;
  gap: var(--wl-space-3);
  min-height: 48px;
  font-size: var(--wl-text-sm);
  line-height: 1.35;
  color: var(--text-2);
  text-decoration: none;
}

.innehall-nav a::before {
  content: counter(nav, decimal-leading-zero);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.innehall-nav a:hover {
  color: var(--text);
}

@media (min-width: 1024px) {
  .ark__grid {
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: clamp(var(--wl-space-12), 6vw, var(--wl-space-24));
  }

  .innehall-nav > div {
    position: sticky;
    top: var(--wl-space-8);
  }
}

.dokument {
  display: grid;
  gap: var(--wl-space-24);
  min-width: 0;
}

.del {
  display: grid;
  gap: var(--wl-space-4);
  max-width: var(--matt);
  scroll-margin-top: var(--wl-space-8);
  color: var(--lastext);
}

.del > h2 {
  font-size: clamp(var(--wl-text-2xl), 1.3rem + 1vw, var(--wl-text-4xl));
  margin-bottom: var(--wl-space-2);
  color: var(--text);
}

.del h3 {
  font-size: clamp(var(--wl-text-lg), 1.02rem + 0.3vw, var(--wl-text-xl));
  margin-top: var(--wl-space-6);
  color: var(--text);
}

.del p,
.del li,
.del dd {
  color: var(--lastext);
}

.del a {
  color: var(--text);
}

.del b {
  color: var(--text);
}

.del ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--wl-space-2);
}

.del ul li::marker {
  color: var(--text-3);
}

.notis {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.del .notis,
.notis {
  color: var(--text-2);
}

.fyra {
  list-style: none;
  counter-reset: fyra;
  margin: var(--wl-space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.fyra > li {
  counter-increment: fyra;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--wl-space-4);
  padding-block: var(--wl-space-6);
  border-top: 1px solid var(--linje-2);
}

.fyra > li::before {
  content: counter(fyra, decimal-leading-zero);
  font-family: var(--wl-font-display);
  font-size: var(--wl-text-4xl);
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-tight);
  line-height: 1;
  color: var(--text-3);
}

.fyra > li:first-child::before {
  color: var(--accent);
}

.fyra h3 {
  margin-top: 0;
  margin-bottom: var(--wl-space-2);
}

.fyra p + p {
  margin-top: var(--wl-space-3);
}

.lista-atta {
  list-style: none;
  counter-reset: atta;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.lista-atta > li {
  counter-increment: atta;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--wl-space-4);
  padding-block: var(--wl-space-4);
  border-top: 1px solid var(--linje);
}

.lista-atta > li::before {
  content: counter(atta, decimal-leading-zero);
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-sm);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.lista-atta b {
  font-family: var(--wl-font-display);
  font-weight: var(--wl-weight-medium);
  font-size: clamp(var(--wl-text-base), 0.98rem + 0.2vw, var(--wl-text-lg));
  line-height: 1.35;
  display: block;
  margin-bottom: var(--wl-space-1);
}

.tidslinje {
  margin: var(--wl-space-2) 0 0;
  display: grid;
  gap: 0;
}

.tidslinje div {
  display: grid;
  gap: var(--wl-space-1);
  padding-block: var(--wl-space-4);
  border-top: 1px solid var(--linje);
}

.tidslinje dt {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-sm);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text);
}

.tidslinje dd {
  margin: 0;
}

@media (min-width: 720px) {
  .tidslinje div {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--wl-space-6);
  }
}

/* Trappan: varje steg ett snäpp in, som en trappa */
.trappa {
  list-style: none;
  counter-reset: trappa;
  margin: var(--wl-space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.trappa > li {
  counter-increment: trappa;
  padding-block: var(--wl-space-4);
  border-top: 1px solid var(--linje-2);
  display: grid;
  gap: var(--wl-space-1);
}

.trappa > li:nth-child(2) { margin-left: calc(1 * clamp(var(--wl-space-2), 2.4vw, var(--wl-space-8))); }
.trappa > li:nth-child(3) { margin-left: calc(2 * clamp(var(--wl-space-2), 2.4vw, var(--wl-space-8))); }
.trappa > li:nth-child(4) { margin-left: calc(3 * clamp(var(--wl-space-2), 2.4vw, var(--wl-space-8))); }
.trappa > li:nth-child(5) { margin-left: calc(4 * clamp(var(--wl-space-2), 2.4vw, var(--wl-space-8))); }
.trappa > li:nth-child(6) { margin-left: calc(5 * clamp(var(--wl-space-2), 2.4vw, var(--wl-space-8))); }

.trappa__steg {
  font-family: var(--wl-font-display);
  font-size: clamp(var(--wl-text-base), 0.98rem + 0.2vw, var(--wl-text-lg));
  font-weight: var(--wl-weight-medium);
  line-height: 1.35;
  color: var(--text);
}

.trappa__pris {
  font-family: var(--wl-font-mono);
  font-size: var(--wl-text-xs);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.kallor {
  display: grid;
  gap: var(--wl-space-2);
}

.kallor ul {
  list-style: none;
  padding: 0;
  gap: 0;
}

.kallor li {
  font-size: var(--wl-text-sm);
  line-height: 1.5;
  padding-block: var(--wl-space-2);
  border-top: 1px solid var(--linje);
  overflow-wrap: anywhere;
}

.kallor a {
  display: inline;
}

.kallor .notis {
  margin-top: var(--wl-space-4);
}

/* Reducerad rörelse: inga övergångar alls, även bocken i kryssrutan och plustecknet */
@media (prefers-reduced-motion: reduce) {
  a,
  .ordmarke span,
  .inmatning,
  .ruta input,
  .ruta input::before,
  .knapp,
  .knapp-spok,
  .dela,
  .qr-panel a,
  .lank-knapp,
  .prick__yta,
  .villkor summary,
  .villkor summary::after {
    transition: none;
  }
}

/* Skärmsidan: 16:9, läsbar på 8 meters avstånd. Allt mäts i en enhet (u) som följer
   den mindre av höjd och bredd, så att duken alltid är exakt 16:9 och aldrig scrollar.
   1 u = 1 procent av dukens höjd, 10,8 px på 1920x1080. */

.skarm {
  --u: min(1vh, 0.5625vw);
  --duk-bg: var(--wl-color-bg);
  --duk-text: var(--wl-color-text);
  --duk-text-2: var(--wl-color-text-muted);
  --duk-linje: var(--wl-border-default);
  page: duk;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--duk-text);
  background: var(--duk-bg);
  overflow: hidden;
}

.skarm--ljus {
  --duk-bg: var(--wl-color-bg-light);
  --duk-text: var(--wl-color-text-on-light);
  --duk-text-2: var(--wl-color-text-muted-on-light);
  --duk-linje: var(--wl-border-on-light);
  color-scheme: light;
}

/* Utskrift till PDF: en sida per duk, exakt 1920x1080 px (20 x 11,25 tum) */
@page duk {
  size: 1920px 1080px;
  margin: 0;
}

.duk {
  position: relative;
  width: calc(var(--u) * 177.78);
  height: calc(var(--u) * 100);
  padding: calc(var(--u) * 8) calc(var(--u) * 9);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: calc(var(--u) * 9);
  background: var(--duk-bg);
}

/* Lockup: prisma först, ordmärket efter. Proportioner från varumärkesboken:
   symbolen 3,05 gånger textens storlek, mellanrummet 0,545 gånger. Frizon: dukens kant
   ligger 8 u (86 px) bort, mer än 2x höjden av W (cirka 2 x 34 px). */
.duk__ordmarke {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4.4 * 0.545);
  margin: 0;
  font-family: var(--wl-font-display);
  font-size: calc(var(--u) * 4.4);
  font-weight: var(--wl-weight-light);
  letter-spacing: var(--wl-tracking-tight);
  line-height: 1;
  white-space: nowrap;
  color: var(--duk-text);
}

.duk__ordmarke svg {
  display: block;
  flex: none;
  height: calc(var(--u) * 4.4 * 3.05);
  width: auto;
  aspect-ratio: 180 / 200;
  /* Den vita konturen på vänstersidan är det enda som bär den sidan mot svart. Optisk
     justering: symbolens luft inuti viewBox (cirka 12 procent) dras in så att prismat
     linjerar med rubrikens vänsterkant och med QR-plattans överkant. */
  margin: calc(var(--u) * -1.6) 0 calc(var(--u) * -1.6) calc(var(--u) * -1.6);
}

.duk__text {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: grid;
  gap: calc(var(--u) * 3.6);
}

.duk__text h1 {
  font-size: calc(var(--u) * 7.8);
  font-weight: var(--wl-weight-light);
  line-height: 1.25;
  letter-spacing: var(--wl-tracking-tight);
  text-wrap: balance;
}

.duk__text p {
  font-family: var(--wl-font-body);
  font-size: calc(var(--u) * 3.3);
  line-height: 1.45;
  color: var(--duk-text-2);
  max-width: 44ch;
}

.duk__fot {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: calc(var(--u) * 3.2);
  padding-top: calc(var(--u) * 2.4);
  border-top: 1px solid var(--duk-linje);
  font-family: var(--wl-font-mono);
  font-size: calc(var(--u) * 2.4);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--duk-text-2);
}

.duk__kod {
  grid-column: 2;
  grid-row: 1 / span 2;
  /* Plattans överkant linjerar med lockupens överkant */
  align-self: start;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 2.4);
}

/* Plattan: off-vit #fafafa med mörka moduler #050508, tyst zon 4 moduler ingår i SVG:n */
.duk__kod .qr {
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border-radius: calc(var(--u) * 1.6);
  overflow: hidden;
}

.skarm--ljus .duk__kod .qr {
  box-shadow: 0 0 0 1px var(--wl-border-on-light);
}

.duk__kod figcaption {
  font-family: var(--wl-font-mono);
  font-size: calc(var(--u) * 4);
  font-weight: var(--wl-weight-medium);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--duk-text);
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Utskrift: paketsidan ska gå att skriva ut som ett vanligt dokument.
   Färgerna byts redan av utskriftsläget i wl-tokens.css. */

@media print {
  .huvud,
  .sidfot,
  .innehall-nav,
  .qr-panel {
    display: none;
  }

  .etikett,
  .ark {
    border: 0;
    box-shadow: none;
    background: var(--wl-color-bg);
    padding: 0;
  }

  .etikett::before {
    content: none;
  }

  .hylla {
    animation: none;
  }

  .del {
    break-inside: auto;
  }

  .kallor a::after {
    content: " " attr(href);
    font-size: 0.85em;
  }
}

/* Mobil: handlingen (e-post, samtycke, knapp) ska synas utan att scrolla. Bara under 600 px. */
@media (max-width: 600px) {
  .huvud {
    padding-block: var(--wl-space-2) 0;
  }

  .hjalte {
    padding-block: var(--wl-space-2) var(--wl-space-16);
    gap: var(--wl-space-4);
  }

  .hjalte__text {
    gap: var(--wl-space-3);
  }

  .hjalte h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.125rem);
  }

  .ingress {
    font-size: var(--wl-text-base);
    line-height: 1.5;
    max-width: 36ch;
  }

  .etikett {
    padding: var(--wl-space-5);
    border-radius: var(--wl-radius-lg);
  }

  .etikett::before {
    left: var(--wl-space-5);
  }

  .etikett__namn {
    font-size: var(--wl-text-lg);
    margin-bottom: var(--wl-space-3);
  }

  .form {
    gap: var(--wl-space-4);
  }

  .rutor {
    gap: 0;
  }

  .ruta {
    line-height: 1.4;
  }
}

/* Alla vanliga mobiler (synlig höjd under 900 px): ingressen och metadataraden får vänta,
   kortet förklarar sig självt och knappen ska synas. */
@media (max-width: 600px) and (max-height: 900px) {
  .hjalte .ingress,
  .hjalte .rad {
    display: none;
  }
}

/* Låga mobilskärmar (Safari med adressfält, mindre Android) */
@media (max-width: 600px) and (max-height: 780px) {
  .hjalte {
    gap: var(--wl-space-3);
  }

  .hjalte h1 {
    font-size: clamp(1.625rem, 7vw, 1.875rem);
  }

  .etikett {
    padding: var(--wl-space-4) var(--wl-space-4) var(--wl-space-5);
  }

  .etikett::before {
    left: var(--wl-space-4);
  }

  .etikett .falt {
    gap: var(--wl-space-1);
  }

  .ruta {
    font-size: 0.8125rem; /* 13 px, mellan tokens xs och sm, bara på låga skärmar */
    line-height: 1.38;
    padding-block: 6px;
  }
}

/* Mycket smala skärmar: 5 betygscirklar om minst 44 px ska rymmas i kortet */
@media (max-width: 359px) {
  .etikett {
    padding-inline: var(--wl-space-4);
  }

  .prickar {
    gap: var(--wl-space-1);
  }
}