/* ==========================================================================
   TEKNOLOGISTEN — guideartikel
   Bygger ovanpå .prose i style.css. Den här filen lägger bara till det
   style.css inte har: bredare block, faktaruta, tabell, källista, verktyg
   och guidekortet på guider.html.
   ========================================================================== */

/* ── Metarad under rubriken ───────────────────────────────────────────── */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.article__meta > span { display: inline-flex; align-items: center; gap: 8px; }

.article__meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
  animation: none;
}

@media (max-width: 640px) {
  /* Statusraden döljer datumet på smala skärmar, så metaraden får bryta fritt */
  .article__meta { row-gap: 10px; }
}

/* Sidhuvudet och första sektionen lade 52 px och 100 px ovanpå varandra, vilket
   gav 187 px tom yta mellan metaraden och "Kort svar". Faktarutan har redan
   34 px egen marginal, så sektionen behöver ingen egen toppmarginal här. */
.page-head:has(.article__meta) + .section { padding-top: 0; }

/* ── Radlängd ─────────────────────────────────────────────────────────── */
/* style.css kapar .prose till 680 px. I en guide behöver tabeller och verktyg
   kunna använda mer än så, och hela innehållskolumnen ligger därför på 980 px:
   samma mått som diagrammen. Före det hade brödtexten ett eget tak på 68 tecken
   (omkring 673 px) medan rubriker och diagram gick ut till 974, så en artikel
   såg ut att bestå av två kolumner. Att flytta taket hit i stället för att ta
   bort det helt är avsiktligt: vid 1440 px blev styckena annars 1144 px breda
   och stack ut 164 px förbi varje diagram, alltså samma otakt fast omvänd.

   Ett tak på en enda nivå gör att text, rubriker, tabeller, kort och diagram
   delar bäde vänster- och högerkant vid varje bredd över 980 px. Vill du ändra
   radlängden är det den här raden som gäller; tak per element var just det som
   fick kolumnerna att glida isär. */
.prose { max-width: 980px; }

/* Källistan och faktarutan har egna, smalare mått. De är inskott och breder
   med flit inte ut sig över hela kolumnen. */
.prose > ul.sources { max-width: 92ch; }

/* Rubriken får en hårfin linje över sig som avdelare mellan avsnitten. */
.prose h2 {
  border-top: 1px solid var(--line);
  padding-top: 0.7em;
  margin-top: 2.4em;
  scroll-margin-top: 90px;
}

.prose h3 { scroll-margin-top: 90px; }

/* ── Faktaruta ───────────────────────────────────────────────────────── */
.callout {
  position: relative;
  max-width: 76ch;
  background: linear-gradient(180deg, var(--panel) 0%, rgba(18, 16, 29, 0.35) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 34px 0;
  overflow: hidden;
}

.callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--signal), transparent);
}

.callout__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

.callout__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.35;
}

/* Faktarutan har egna punkter med diamantmarkör, inte .prose-dashboarden. */
.prose .callout__list,
.prose .sources { display: block; gap: 0; margin-bottom: 0; }

.prose .callout__list > li,
.prose .sources > li { padding-left: 0; }

.prose .callout__list > li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.prose .callout__list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-lit);
  background: transparent;
  transform: rotate(45deg);
}

.prose .sources > li::before { content: none; }

.callout__list strong { color: var(--ink); }

/* ── Gränsvärden ─────────────────────────────────────────────────────── */
.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 240px));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 26px 0;
  max-width: 860px;
}

.limits__item { background: var(--void); padding: 18px 20px; }

.limits__value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.limits__value span { font-size: 0.78rem; color: var(--muted); margin-left: 5px; }

.limits__label {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Jämförelsetabell ────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table.regler {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.regler th,
table.regler td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.regler thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  background: var(--panel);
}

table.regler tbody tr:last-child td { border-bottom: 0; }
table.regler tbody th { font-weight: 500; color: var(--ink-2); }
table.regler td { color: var(--ink-2); }
table.regler .yes { color: var(--signal-bright); }
table.regler .no { color: var(--amber); }

/* ── Verktyg: klassificerare ─────────────────────────────────────────── */
.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 28px 0;
  overflow: hidden;
}

@media (min-width: 860px) {
  .tool { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}

.tool__controls { background: var(--panel); padding: 24px; }

.tool__field + .tool__field { margin-top: 26px; }

/* Etikettsraden får vika så att ett långt reglagervärde aldrig trycker ut
   verktyget i smal ruta -- nowrap-värdet är litet, men hel mening ska platsa. */
.tool__label { flex-wrap: wrap; }

.tool__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.tool__num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--signal-bright);
  white-space: nowrap;
}

.tool__num small { color: var(--muted); font-size: 0.8em; }

.tool input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin-top: 8px;
  background: transparent;
  cursor: pointer;
}

.tool input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.tool input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }

.tool input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(145, 132, 255, 0.16), 0 0 14px var(--signal-glow);
}

.tool input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(145, 132, 255, 0.16), 0 0 14px var(--signal-glow);
}

.tool input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.tool input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Raden är en etikett och alltså hela träffytan, inte bara den lilla rutan.
   Utan utfyllnad blir den tjugoen pixlar hög, vilket är för lite för ett finger,
   så raden får en minsta höjd på 44 px. Kryssrutan hålls kvar högst upp i raden
   även när texten bryts över flera rader. */
.tool__switch {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-height: 44px;
  padding-block: 12px;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
  cursor: pointer;
}

.tool__switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 1px;
  border: 1px solid var(--line-lit);
  border-radius: 2px;
  background: var(--void);
  cursor: pointer;
  position: relative;
}

.tool__switch input:checked { background: var(--signal); border-color: var(--signal); }

.tool__switch input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tool__switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tool__out { background: var(--void); padding: 26px 24px; }

.tool__class {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.tool__class[data-level="ok"] { color: var(--signal-bright); }
.tool__class[data-level="ii"] { color: var(--amber); }
.tool__class[data-level="i"] { color: var(--bad); }

.tool__verdict {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.7;
}

.tool__verdict strong { color: var(--ink); }

.tool__reqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 160px));
  gap: 14px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.tool__reqs dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tool__reqs dd { margin-top: 5px; font-size: 0.9rem; color: var(--ink-2); }
.tool__reqs dd[data-state="yes"] { color: var(--signal-bright); }
.tool__reqs dd[data-state="no"] { color: var(--amber); }

.tool__meter { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

.tool__meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.tool__meter-label span:first-child { max-width: 56ch; }
.tool__meter-value { font-family: var(--font-mono); color: var(--ink); }

.tool__meter-track {
  margin-top: 12px;
  max-width: 640px;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.tool__meter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--signal), var(--signal-bright));
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tool__meter-fill[data-level="i"] { background: linear-gradient(90deg, var(--amber), var(--bad)); }

/* Nottext under verktyget och i brödtexten. Radlängden är inte kapad, av samma
   skäl som brödtexten: noten hör till ett räkneverk som är 974 px brett och en
   not på 68 tecken blev en smal remsa under något brett. */
.tool__note {
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Noten hör till verktyget, inte till reglagen. Som sista barn till .tool blir
   den en fotrad över båda kolumnerna. Den låg förut sist i .tool__controls, och
   så snart kolumnen blev en på smal skärm hamnade den mellan reglagen och
   svaret: man tryckte på ett val och fick scrolla förbi en förklarande paragraf
   för att se vad som hände. Med noten under verktyget ligger svaret direkt under
   reglagen, och noten läses som den fotnot den är. */
.tool > .tool__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 24px 18px;
  background: var(--panel);
}

/* Pekvänliga reglage. Under 860 px står kolumnen i en rad och det är fingret
   som styr: reglaget får en högre träffyta och kulan blir större, medan spåret
   behåller sina två pixlar. Snabbvalen får samma minsta höjd. */
@media (max-width: 859px) {
  .tool input[type="range"] { height: 44px; margin-top: 2px; }
  .tool input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  .tool input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  .tool__preset { min-height: 44px; padding: 9px 14px; font-size: 0.76rem; }
}

/* Tabellrubriker som bara skärmläsaren behöver. Tabellerna i guiderna har sin
   egen synliga rubrik i diagramhuvudet, så tabelltexten dubbleras inte. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Källor ──────────────────────────────────────────────────────────── */
.sources { margin: 26px 0 0; border-top: 1px solid var(--line); }

.sources li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.65;
}

.sources li a { color: var(--ink); border-bottom: 1px solid var(--line-lit); }
.sources li a:hover { color: var(--signal-bright); border-bottom-color: var(--signal); }

.sources .src-kind {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Kategorilänk ─────────────────────────────────────────────────────── */
.category-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 18px;
  align-items: center;
  margin: 0 0 28px;
  padding: 22px 26px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(110deg, var(--panel), var(--void));
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.category-banner:hover { border-color: var(--signal); transform: translateY(-2px); }
.category-banner__label { grid-column: 1; color: var(--signal-bright); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.category-banner__title { grid-column: 2; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.category-banner__text { grid-column: 2; color: var(--muted); font-size: 0.92rem; }
.category-banner__arrow { grid-column: 3; grid-row: 1 / span 2; color: var(--signal-bright); font-size: 1.5rem; }

/* ── Guidekort (guider.html) ────────────────────────────────────────── */
.guide-list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.guide-card {
  display: block;
  background: var(--void);
  padding: 26px 28px;
  transition: background 0.3s var(--ease);
}

.guide-card:hover { background: var(--panel); }

.guide-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-top: 12px;
  color: var(--ink);
}

.guide-card:hover .guide-card__title { color: var(--signal-bright); }

.guide-card__text {
  margin-top: 10px;
  max-width: 78ch;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.7;
}

.guide-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.guide-card__foot .go { color: var(--signal-bright); }

/* ── Kategorikorten ─────────────────────────────────────────────────── */

/* Sajtens två spår, elcyklar och drönare, ritas av `_meny/kategorier.mjs` på
   produktsidan, registersidan, recensionssidan och guidelistan. Kortet är
   guidekortet plus en symbol, en markering för den kategori läsaren står i
   och ett filterläge där klicket filtrerar listan i stället för att ladda en
   ny sida. Symbolen ligger i övre högra hörnet, och därför har texten ett
   avstånd till högerkanten: ett kort får aldrig skriva under sin egen bild. */
.kategori-kort { position: relative; }

.kategori-kort .guide-card__meta,
.kategori-kort .guide-card__title,
.kategori-kort .guide-card__text,
.kategori-kort .guide-card__foot { padding-right: 112px; }

.kategori-kort__symbol {
  position: absolute;
  top: 24px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 44px;
  color: var(--signal);
  opacity: 0.9;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.kategori-kort__symbol svg { display: block; width: 100%; height: 100%; overflow: visible; }

.kategori-kort__hjul,
.kategori-kort__ram,
.kategori-kort__data,
.kategori-kort__rotor,
.kategori-kort__arm,
.kategori-kort__kropp,
.kategori-kort__kamera,
.kategori-kort__skärm,
.kategori-kort__bas,
.kategori-kort__knapp {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kategori-kort__hjul,
.kategori-kort__ram,
.kategori-kort__rotor,
.kategori-kort__kropp,
.kategori-kort__kamera,
.kategori-kort__skärm,
.kategori-kort__bas { stroke-width: 2.5; }

.kategori-kort__knapp { stroke-width: 2; }

.kategori-kort__data { stroke-width: 3; }
.kategori-kort__arm { stroke-width: 2; }

.kategori-kort:hover .kategori-kort__symbol {
  color: var(--signal-bright);
  opacity: 1;
  transform: translateY(-2px);
}

/* Den kategori läsaren står i märks, så att raden visar var man är och inte
   bara vad som finns att välja på. */
.kategori-kort.is-aktuell { background: var(--panel); }
.kategori-kort.is-aktuell .kategori-kort__symbol { color: var(--signal-bright); opacity: 1; }
.kategori-kort.is-aktuell .guide-card__title { color: var(--signal-bright); }

/* Filterläget på guider.html: korten är länkar, men webbläsaren fångar
   klicket och filtrerar listan i stället. Utan JavaScript leder länken
   vidare till guidelistan med kategorin i adressen. */
.kategori-kort[data-filter] { cursor: pointer; }

/* Två kort i rad när det finns plats. Under 860 px ligger de under varandra,
   som vilken lista som helst. Kategorikorten och listan över recensionerna
   delar regeln: båda är korta kort som läses i par. */
.guide-list--kategori,
.guide-list--tva { margin-bottom: 38px; }

@media (min-width: 860px) {
  .guide-list--kategori,
  .guide-list--tva { grid-template-columns: 1fr 1fr; }
}

/* En guide som filtret har stängt av. Klass och inte attributet `hidden`,
   eftersom listan är ett rutnät och en dold ruta annars lämnar ett tomrum. */
.guide-card.ar-dold { display: none; }

@media (max-width: 760px) {
  .kategori-kort__symbol { top: 22px; right: 18px; }

  .kategori-kort .guide-card__meta,
  .kategori-kort .guide-card__title,
  .kategori-kort .guide-card__text,
  .kategori-kort .guide-card__foot { padding-right: 100px; }
}

/* ── Tillbaka-länk ──────────────────────────────────────────────────── */
.next { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 40px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-2);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-ghost:hover { border-color: var(--line-lit); color: var(--ink); background: var(--signal-wash); }

/* ── Guideartikelns egna tillägg i smala fönster ─────────────────────── */
@media (max-width: 640px) {
  .category-banner { grid-template-columns: 1fr auto; padding: 20px; }
  .category-banner__label, .category-banner__title, .category-banner__text { grid-column: 1; }
  .category-banner__arrow { grid-column: 2; grid-row: 1 / span 3; }
  .callout { padding: 20px; }
  .guide-card { padding: 22px 20px; }
  table.regler { min-width: 560px; font-size: 0.85rem; }
  table.regler th, table.regler td { padding: 11px 12px; }
}

/* ==========================================================================
   Diagram: fordonsslag
   Stapeldiagram med två mått (hastighet och effekt) och en gemensam
   kategorifärg per fordonsslag. Färgerna kommer från --viz-1 … --viz-5, som
   annars ligger oanvända i style.css. Rutnät och axlar använder --viz-grid
   och --viz-axis. Allt ritas med CSS, ingen extern paketberoende.
   ========================================================================== */

.chart {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.chart__head {
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel) 0%, rgba(18, 16, 29, 0.2) 100%);
}

.chart__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.chart__sub {
  margin-top: 7px;
  max-width: 76ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  margin-top: 15px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.chart__legend span { display: inline-flex; align-items: center; gap: 8px; }

.chart__swatch {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.chart__plot { padding: 18px 24px 22px; }

/* Kolumnrubriker och rader delar samma spårbredder. På smala skärmar ligger
   fordonsslaget ovanför sina två mått, så måtten får egna rubriker. */
.chart__cols,
.chart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
}

.chart__cols {
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.chart__cols span:first-child { display: none; }

.chart__rows { display: grid; gap: 1px; background: var(--line-soft); }

.chart__row {
  position: relative;
  margin: 0 -24px;
  padding: 14px 24px;
  background-color: var(--void);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.chart__row:hover { background-color: var(--panel); }
.chart__row.is-active { background-color: var(--panel-2); }

/* Aktiv rad markeras i kanten, som ett registerblad i en pärm. */
.chart__row.is-active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--signal);
}

.chart__row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.chart__name {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
}

.chart__row.is-active .chart__name { color: var(--ink); }

.chart__measure { display: grid; gap: 6px; align-content: center; }

.chart__track {
  position: relative;
  display: block;
  height: 14px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
  overflow: hidden;
}

.chart__fill {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--viz-1);
  transition: opacity 0.25s var(--ease);
}

/* Fordon som fortsätter förbi axelns slut: randig stapel i stället för ett
   godtyckligt slutvärde. */
.chart__fill--open {
  background-image: repeating-linear-gradient(135deg,
    rgba(8, 7, 13, 0.5) 0 3px, transparent 3px 7px);
}

.chart__row[data-typ="cykel"] .chart__fill { background-color: var(--viz-1); }
.chart__row[data-typ="klass2"] .chart__fill { background-color: var(--viz-2); }
.chart__row[data-typ="klass1"] .chart__fill { background-color: var(--viz-3); }
.chart__row[data-typ="mc"] .chart__fill { background-color: var(--viz-5); }

/* En gränslinje inuti spåret. Några diagram mäter varje stapel mot samma tal,
   och då ska linjen stå på samma plats i varje rad. Den ritas därför inne i
   spåret och inte i figuren, och den följer spårets egen skala. */
.chart__limit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed var(--viz-axis);
  pointer-events: none;
}

/* Ovalda staplar dämpas så att valet syns hela tiden, även före första klicket.
   Höjden på staplarna är oförändrad, så diagrammet går fortfarande att läsa. */
.chart__row:not(.is-active) .chart__fill { opacity: 0.42; }
.chart__row:hover .chart__fill { opacity: 1; }

.chart__value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.chart__value small { font-size: 0.85em; }
.chart__row.is-active .chart__value { color: var(--ink); }

.chart__note {
  margin-top: 15px;
  max-width: 76ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Noten hamnar i två olika lägen beroende på hur diagrammet är byggt. De flesta
   ritar sitt innehåll i ett __plot-element som har 24 px egen luft, och då
   ligger noten redan rätt. Fem komponenter lägger noten direkt i kortet i
   stället, och kortet har bara en ram och inget padding: noten hamnade då 1 px
   från kanten och mötte ramen med brödtexten. Regeln nedan ger de fallen samma
   luft som __plot har.

   Selektorn är medvetet riktad mot barn och inte mot .chart__note rakt av.
   Tio av de femton noterna ligger inne i ett __plot, och ett bredare tak hade
   gett dem 48 px i stället för 24 och slitit dem ur led med diagrammet ovanför.
   Listan tar alla kort som kan bära en not, inte bara de fem som gör det i dag,
   så att nästa komponent inte behöver upptäcka samma sak. */
.chart > .chart__note,
.ruler > .chart__note,
.weigh > .chart__note,
.funnel > .chart__note,
.rack > .chart__note,
.lager > .chart__note,
.whmatris > .chart__note,
.energikallor > .chart__note,
.fartsband > .chart__note,
.vaxellaget > .chart__note,
.kedja > .chart__note,
.rackkurva > .chart__note,
.ytor > .chart__note,
.tryckkurva > .chart__note { padding: 0 24px 22px; }

@media (min-width: 760px) {
  .chart__cols,
  .chart__row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
  }

  .chart__cols span:first-child { display: block; }
  .chart__name { grid-column: auto; }
}

/* Diagram med ett enda mått. Raden får därför två spår i stället för tre, så
   att namnet står i första kolumnen och stapeln tar resten av bredden i stället
   för att lämna en tom tredjedel. På smal skärm staplas de, så att ett långt
   modellnamn får hela bredden och stapeln hamnar under det. */
.chart--ett .chart__cols,
.chart--ett .chart__row {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .chart--ett .chart__cols,
  .chart--ett .chart__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}

.chart--ett .chart__cols span:first-child { display: block; }
.chart--ett .chart__name { grid-column: auto; }

/* ── Väljare för fordonsslag ─────────────────────────────────────────── */
.seg {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background-color: var(--void);
  border: 0;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.seg__btn::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: var(--line);
  transition: background-color 0.2s var(--ease);
}

.seg__btn[data-typ="cykel"]::before { background-color: var(--viz-1); opacity: 0.45; }
.seg__btn[data-typ="klass2"]::before { background-color: var(--viz-2); opacity: 0.45; }
.seg__btn[data-typ="klass1"]::before { background-color: var(--viz-3); opacity: 0.45; }
.seg__btn[data-typ="mc"]::before { background-color: var(--viz-5); opacity: 0.45; }

.seg__btn:hover { background-color: var(--panel); color: var(--ink); }

.seg__btn.is-active {
  background-color: var(--panel-2);
  color: var(--ink);
}

.seg__btn.is-active::before { opacity: 1; }
.seg__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.tool__class[data-level="mc"] { color: var(--viz-5); }

/* ==========================================================================
   Skala: hastighetsgränser
   En tallinje i stället för staplar. Bara de gränser som lagen faktiskt anger
   får nålar: 25 km/h där assistansen upphör och 30 km/h på cykelgata. Gångfart
   och "ingen gräns" ritas streckade, eftersom de inte har någon siffra.
   ========================================================================== */

.ruler {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.ruler__head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel) 0%, rgba(18, 16, 29, 0.2) 100%);
}

.ruler__body { padding: 26px 24px 22px; }

/* Själva tallinjen. Nålarna står på den och når upp genom fältet. */
.ruler__plot { position: relative; margin: 0 0 30px; }

.ruler__track {
  position: relative;
  height: 56px;
  border-bottom: 1px solid var(--viz-axis);
}

.ruler__mark {
  position: absolute;
  bottom: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  opacity: 0.34;
  transition: opacity 0.25s var(--ease);
}

.ruler__mark:hover,
.ruler__mark.is-on { opacity: 1; }
.ruler__mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Nål: ett streck uppåt med siffran ovanför. Knappen är trettio pixlar bred
   och strecket ritas av ::before, eftersom en två pixlar bred träffyta inte går
   att pricka med ett finger på en telefon. Den synliga nålen är alltså
   oförändrad två pixlar. */
.ruler__pin {
  left: var(--at);
  width: 30px;
  height: 56px;
  margin-left: -15px;
  background: none;
}

.ruler__pin::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--pin, var(--viz-1));
}

/* Siffran står högst upp på nålen, en bra bit från skalans egna siffror under
   linjen. Annars står samma tal två gånger ovanpå varandra. */
.ruler__pin span {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  background-color: var(--void);
  white-space: nowrap;
}

/* "Ingen gräns" ritas inte som ett fält, eftersom avsaknaden av en markering är
   själva beskedet. I stället markeras hela linjen, och nålarna dämpas. */
.ruler__open {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.ruler__track.is-open .ruler__open { opacity: 1; }

/* Streckade fält: gångfart i början, ingen gräns i slutet. Fältet är tio pixlar
   högt men knappen betydligt högre, av samma skäl som nålen är bredare än sitt
   streck. Bandet ritas av ::before och ligger kvar strax ovanför linjen.

   Träffytan är bandet plus tolv pixlar åt varje håll, alltså minst 44 px även
   när bandet är som smalast (8 % av en skala på 250 px är 20 px). Bandet självt
   mäter fortfarande exakt --w och ligger exakt på --from, eftersom ::before
   drar in samma tolv pixlar igen: bredden blir (--w + 24 px) − 24 px = --w och
   vänsterkanten (--from − 12 px) + 12 px = --from. */
.ruler__hatch {
  left: calc(var(--from) - 12px);
  width: calc(var(--w) + 24px);
  height: 44px;
  background: none;
}

.ruler__hatch::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 10px;
  background-color: var(--panel-2);
  background-image: repeating-linear-gradient(135deg,
    var(--viz-axis) 0 1px, transparent 1px 5px);
}

.ruler__axis { position: relative; height: 16px; margin-top: 7px; }

.ruler__axis span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

/* Väljare + förklaring under skalan */
.ruler__split {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 760px) {
  .ruler__split { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); }
}

.ruler__split > * { background-color: var(--void); }
.ruler__out { padding: 20px 22px; }

.ruler__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.ruler__text {
  margin-top: 9px;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.ruler__text strong { color: var(--ink); }

.ruler__note {
  margin-top: 16px;
  max-width: 76ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Länken som svarar på var frågan läses vidare. Den står i samma ruta som
   svaret och hör till det, därför en tunn linje och inte en egen rubrik. */
.ruler__link {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* Färg per regel, samma i väljaren och på skalan. */
.seg__btn[data-regel="gangfart"]::before { background-color: var(--viz-2); opacity: 0.45; }
.seg__btn[data-regel="assist"]::before { background-color: var(--viz-1); opacity: 0.45; }
.seg__btn[data-regel="cykelgata"]::before { background-color: var(--viz-3); opacity: 0.45; }
.seg__btn[data-regel="ingen"]::before { background-color: var(--muted); opacity: 0.45; }

.seg__btn[data-regel].is-active::before { opacity: 1; }

/* ── Statiskt diagram: staplar utan interaktion ─────────────────────── */
.chart--static .chart__row { cursor: default; }
.chart--static .chart__row:hover { background-color: var(--void); }
.chart--static .chart__row .chart__fill { opacity: 1; }
.chart--static .chart__value { color: var(--ink-2); }
.chart--static .chart__name { color: var(--ink); }

/* ==========================================================================
   Diagram: vikt kontra elcykel
   En rad per ålder med barnets ungefärliga vikt som stapel. Elcykelns vikt
   ligger som ett streckat fält ovanpå spåret i stället för som en fjärde
   stapel, eftersom den är ett intervall och inte en mätpunkt. Skalan går till
   60 kg, så fältet hamnar på samma plats i varje rad och raderna går att
   jämföra direkt. Rutnätet kommer från --viz-grid, stapeln från --viz-1 och
   fältet från --amber, samma palett som resten av sajten.
   ========================================================================== */

.weigh {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.weigh__plot { padding: 18px 24px 22px; }

.weigh__rows { display: grid; gap: 1px; background: var(--line-soft); }

.weigh__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 54px;
  gap: 8px 12px;
  align-items: center;
  padding: 11px 0;
  background-color: var(--void);
}

.weigh__age {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.weigh__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 16.6667% 100%;
  border-radius: 2px;
}

.weigh__fill {
  display: block;
  width: var(--w);
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px 0 0 2px;
}

/* Elcykelns vikt. Fältet sticker ut en aning över spåret så att det syns även
   när stapeln är kortare än fältet, vilket är hela poängen för de yngsta. */
.weigh__band {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--b);
  width: var(--bw);
  border-left: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
  background-image: repeating-linear-gradient(135deg,
    var(--amber) 0 1px, transparent 1px 4px);
  opacity: 0.55;
  pointer-events: none;
}

.weigh__value {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.weigh__axis {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 54px;
  gap: 8px 12px;
  margin-top: 11px;
}

.weigh__axis-track { position: relative; height: 14px; }

.weigh__axis-track span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

/* Ändvärdena ska inte sticka utanför spåret. */
.weigh__axis-track span:first-child { transform: none; }
.weigh__axis-track span:last-child { transform: translateX(-100%); }

.chart__swatch--band {
  background-color: transparent;
  border: 1px solid var(--amber);
  background-image: repeating-linear-gradient(135deg,
    var(--amber) 0 1px, transparent 1px 4px);
  opacity: 0.7;
}

/* ==========================================================================
   Diagram: egenvikten per utförande
   En rad per utförande med spannet mellan lättaste och tyngsta modell i
   registret, medianen som ett streck och antalet modeller. Ritas ur
   `_meny/modeller.db` av `_verktyg/rita_typvikter.py`, så att siffrorna i raden
   och siffrorna i registret inte kan glida ifrån varandra.
   ========================================================================== */

.typer {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.typer__plot { padding: 18px 24px 22px; }

.typer__rows { display: grid; gap: 1px; background: var(--line-soft); }

.typer__row {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 104px);
  gap: 8px 14px;
  align-items: center;
  padding: 12px 0;
  background-color: var(--void);
}

.typer__namn {
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink);
}

.typer__namn small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Skalan kommer från `--steg`, som skriptet sätter utifrån registret: ett
   streck var tionde kilo, alltså 12,5 procent när taket är 80. Spåret är det
   dämpade fältet, spannet den fyllda stapeln och medianen det tunna strecket. */
.typer__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: var(--steg, 12.5%) 100%;
  border-radius: 2px;
}

.typer__span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fran);
  width: var(--bredd);
  /* Ett utförande där alla modeller väger lika mycket har inget spann att rita.
     Strecket blir kvar ändå, så att raden inte läses som om uppgiften saknas. */
  min-width: 4px;
  background-color: var(--viz-1);
  border-radius: 2px;
}

.typer__median {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--at);
  width: 2px;
  margin-left: -1px;
  background-color: var(--ink);
  opacity: 0.8;
}

.typer__varde {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.typer__varde small {
  display: block;
  margin-top: 3px;
  font-size: 0.64rem;
  color: var(--muted);
}

.typer__axis {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 104px);
  gap: 8px 14px;
  margin-top: 11px;
}

.typer__axis-track { position: relative; height: 14px; }

.typer__axis-track span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.typer__axis-track span:first-child { transform: none; }
.typer__axis-track span:last-child { transform: translateX(-100%); }

/* På smal skärm får spåret en egen rad under namnet. Namn och siffra står kvar
   sida vid sida, eftersom siffran hör till raden och inte till spåret.

   Raderna sätts ut med grid-rad och grid-kolumn för hand. Utan det hamnar
   siffran på en egen rad: spåret vill ha hela bredden (1 / -1) och skjuter då
   automatiskt fram nästa led till raden under, medan den andra kolumnen står
   tom och kollapsar till noll. Siffran blir kvar men tappar sin kolumn. */
@media (max-width: 760px) {
  .typer__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
  }

  .typer__namn { grid-column: 1; grid-row: 1; }
  .typer__varde { grid-column: 2; grid-row: 1; }
  .typer__track { grid-column: 1 / -1; grid-row: 2; }

  .typer__axis { grid-template-columns: minmax(0, 1fr); }
  .typer__axis > span { display: none; }
}

/* ── Verktyget Ålderskollen ─────────────────────────────────────────── */
.tool__class[data-level="krav"] { color: var(--amber); }
.tool__class[data-level="nej"] { color: var(--bad); }

.tool__reqs dd[data-state="krav"] { color: var(--amber); }

/* Fordonsvalet i verktyget är en egen lista, med samma prickfärg som
   fordonsslaget har i diagrammet i guiden om klassificering. */
.seg--val { margin: 0; }

.seg--val .seg__btn { font-size: 0.84rem; padding: 11px 13px; }

/* ==========================================================================
   Diagram: stöldens väg
   Två staplar som visar hur många stölder som anmäls och hur många som når ett
   försäkringsbolag, plus det streckade fältet för resten. Siffrorna kommer från
   Brå, Svensk Försäkring och Dina Försäkringars sammanställning för 2025.
   ========================================================================== */

.funnel {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.funnel__plot { padding: 20px 24px 22px; }

.funnel__rows { display: grid; gap: 20px; }

.funnel__score { display: grid; gap: 9px; }

.funnel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.funnel__num {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.funnel__cap { font-size: 0.86rem; color: var(--ink-2); }

.funnel__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
  overflow: hidden;
}

.funnel__fill {
  display: block;
  width: var(--w);
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px;
}

/* Resten: stölder som aldrig nådde ett försäkringsbolag. Streckat fält i
   stället för en stapel, eftersom siffran är en rest och inte en mätning. */
.funnel__fill--rest {
  background-color: transparent;
  background-image: repeating-linear-gradient(135deg,
    var(--amber) 0 1px, transparent 1px 5px);
  border: 1px solid var(--amber);
  box-sizing: border-box;
  opacity: 0.75;
}

/* Verktyget Räkna på din elcykel har flera listor, så de får två kolumner när
   utrymmet medger det. */
.seg--tva { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.seg[data-valgrupp] .seg__btn::before { background-color: var(--line-lit); opacity: 0.45; }
.seg[data-valgrupp] .seg__btn.is-active::before { opacity: 1; }

/* Låset är den enda faktorn som har en tydlig skala i sig. */
.seg--las .seg__btn[data-varde="ssf"]::before { background-color: var(--viz-1); }
.seg--las .seg__btn[data-varde="annat"]::before { background-color: var(--viz-4); }
.seg--las .seg__btn[data-varde="olast"]::before { background-color: var(--bad); }

.tool__formel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.tool__formel dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tool__formel dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink-2);
}

.tool__formel div + div { margin-top: 14px; }
.tool__formel dd[data-state="minus"] { color: var(--amber); }
.tool__formel dd[data-state="summa"] { color: var(--signal-bright); }

/* ==========================================================================
   Jämförelse: ersättning per bolag
   En rad per försäkringsbolag, sorterad så att den högsta ersättningen hamnar
   överst. Staplarnas längd är andel av nypriset, så raderna går att jämföra
   även när man byter belopp i verktyget.
   ========================================================================== */

.bolag {
  display: grid;
  gap: 1px;
  margin-top: 16px;
  background: var(--line-soft);
}

.bolag__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 78px;
  gap: 8px 12px;
  align-items: center;
  padding: 9px 0;
  background-color: var(--void);
}

/* Tre faktarutor i samma rad, utan en tom plats till höger. */
.limits--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

@media (max-width: 720px) {
  .limits--tre { grid-template-columns: minmax(0, 1fr); }
}

/* I smala fönster får namnet och beloppet en egen rad och stapeln hela bredden. */
@media (max-width: 560px) {
  .bolag__row { grid-template-columns: minmax(0, 1fr) auto; }
  .bolag__track { grid-column: 1 / -1; }
}

.bolag__namn {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.bolag__track {
  position: relative;
  height: 12px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
  overflow: hidden;
}

.bolag__fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px;
  transition: width 0.4s var(--ease);
}

.bolag__belopp {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

/* Högsta ersättningen i listan markeras i turkos, samma färg som klass I har
   i diagrammet över fordonsslag. */
.bolag__row[data-hogst="ja"] .bolag__fill { background-color: var(--viz-3); }
.bolag__row[data-hogst="ja"] .bolag__namn { color: var(--ink); }

/* Samma lista används för kostnader. Där är den största posten ingen vinst,
   så den markeras i gult i stället. */
.bolag--kostnad .bolag__row[data-hogst="ja"] .bolag__fill { background-color: var(--viz-4); }
.bolag--kostnad .bolag__row[data-hogst="ja"] .bolag__namn { color: var(--ink); }

/* ==========================================================================
   Diagram: räckvidden
   Batteripackarnas wattimmar räknas om till kilometer vid tre assistansnivåer.
   Det streckade fältet är intervallet handeln brukar ange, och det ligger på
   samma plats i varje rad så att man ser hur mycket av intervallet som faktiskt
   nås. Kapaciteterna är de paket en svensk återförsäljare säljer.
   ========================================================================== */

.rack {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rack__pick { padding: 16px 24px; border-bottom: 1px solid var(--line-soft); }

.rack__plot { padding: 18px 24px 22px; }

.rack__rows { display: grid; gap: 1px; background: var(--line-soft); }

.rack__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 62px;
  gap: 8px 12px;
  align-items: center;
  padding: 11px 0;
  background-color: var(--void);
}

.rack__name {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.rack__name small { display: block; font-size: 0.66rem; color: var(--muted); }

.rack__track {
  position: relative;
  height: 18px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
}

.rack__fill {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--w);
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px 0 0 2px;
  transition: width 0.5s var(--ease);
}

/* Handelns intervall. Streckat, för det är ett anspråk och inte en mätning. */
.rack__claim {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--c);
  width: var(--cw);
  border-left: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
  background-image: repeating-linear-gradient(135deg,
    var(--amber) 0 1px, transparent 1px 4px);
  opacity: 0.5;
  pointer-events: none;
}

.rack__value {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.rack__axis {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 62px;
  gap: 8px 12px;
  margin-top: 11px;
}

.rack__axis-track { position: relative; height: 14px; }

.rack__axis-track span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Ändvärdena ska inte sticka utanför spåret. */
.rack__axis-track span:first-child { transform: none; }
.rack__axis-track span:last-child { transform: translateX(-100%); }

/* Väljaren för assistansnivå har tre lika stora knappar. */
.seg--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .seg--tre { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .rack__pick { padding: 14px 16px; }
  .rack__plot { padding: 16px 16px 18px; }
  .rack__row,
  .rack__axis { grid-template-columns: 64px minmax(0, 1fr) 48px; gap: 8px; }
  .rack__name { font-size: 0.72rem; }
  .rack__name small { display: none; }
  .rack__value { font-size: 0.7rem; }
}

/* På de smalaste skärmarna får namnet en egen rad, så att spåret blir brett
   nog att läsa av. */
@media (max-width: 480px) {
  .rack__row { grid-template-columns: minmax(0, 1fr) 48px; column-gap: 8px; row-gap: 6px; }
  .rack__name { grid-column: 1 / -1; }
  .rack__name small { display: inline; margin-left: 6px; }
  .rack__axis { grid-template-columns: minmax(0, 1fr) 48px; }
  .rack__axis > span:first-child { display: none; }
}

/* ==========================================================================
   Diagram: vad förvaringen kostar
   Två staplar per temperatur, en för vardera laddningsnivå. Staplarna visar
   hur mycket kapacitet som går förlorad på ett år, inte hur mycket som är
   kvar. Det är skillnaden mellan 96 och 80 procent som är själva poängen, och
   två nästan lika långa staplar hade dolt den. Underlaget är mätningar av
   lagring vid olika temperatur och laddningsnivå, och staplarna ligger därför
   på fasta höjder i markupen. Bara stapelns bredd behöver räknas om.
   ========================================================================== */

.lager {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.lager__plot { padding: 20px 24px 22px; }

.lager__grupper { display: grid; gap: 20px; }

.lager__temp {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.lager__temp strong { font-weight: 500; color: var(--ink-2); }

.lager__rows { display: grid; gap: 8px; margin-top: 10px; }

.lager__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 50px;
  gap: 8px 12px;
  align-items: center;
}

.lager__label {
  font-size: 0.78rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.lager__track {
  position: relative;
  height: 15px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
  overflow: hidden;
}

.lager__fill {
  display: block;
  width: var(--w);
  height: 100%;
  background-color: var(--viz-3);
  border-radius: 2px;
}

/* Full laddning är den dyra vanan, och får varningsfärgen. */
.lager__row[data-niva="full"] .lager__fill { background-color: var(--viz-4); }

.lager__value {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.lager__row[data-niva="full"] .lager__value { color: var(--ink); }

/* Axelns siffror står under spåret, med samma spaltbredder som raderna. */
.lager__axis {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 50px;
  gap: 0 12px;
  margin-top: 16px;
}

.lager__scale { position: relative; height: 14px; grid-column: 2; }

.lager__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

/* Ändvärdena ska inte sticka utanför spåret. */
.lager__scale span:first-child { transform: none; }
.lager__scale span:last-child { transform: translateX(-100%); }

.chart__swatch--bra { background-color: var(--viz-3); }
.chart__swatch--full { background-color: var(--viz-4); }

@media (max-width: 560px) {
  .lager__plot { padding: 18px 16px 20px; }
  .lager__row,
  .lager__axis { grid-template-columns: 62px minmax(0, 1fr) 46px; gap: 0 8px; }
  .lager__rows { gap: 7px; }
  .lager__label { font-size: 0.73rem; }
  .lager__value { font-size: 0.72rem; }
}

/* ── Verktyget Batterikollen ────────────────────────────────────────── */
.tool__class[data-level="bra"] { color: var(--signal-bright); }
.tool__class[data-level="bevaka"] { color: var(--viz-4); }
.tool__class[data-level="slut"] { color: var(--bad); }

.tool__meter-fill[data-level="bevaka"] { background: linear-gradient(90deg, var(--viz-4), var(--amber)); }
.tool__meter-fill[data-level="slut"] { background: linear-gradient(90deg, var(--amber), var(--bad)); }

/* De två klockorna ställs mot varandra sida vid sida i utdatapanelen. */
.tool__tva {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}

@media (max-width: 560px) {
  .tool__tva { grid-template-columns: minmax(0, 1fr); }
}

/* Kostnadsraderna i verktyget ligger tätt och utan stapel, som en prislista. */
.tool__pris { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.tool__pris div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 7px 0;
}

.tool__pris dt { font-size: 0.84rem; color: var(--ink-2); }

.tool__pris dd {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--ink);
  white-space: nowrap;
}



/* ==========================================================================
   Diagram: wattimmar över spänning och kapacitet
   En matris i stället för staplar. Raderna är nominell spänning och kolumnerna
   amperetimmar, och rutan där de möts visar wattimmar. Färgen följer
   energimängden, inte siffran i rutan, så två rutor med samma tal får samma
   ton var de än ligger. Det är hela poängen: 10 Ah är 240 Wh i en 24-voltscykel
   och 520 Wh i en 52-voltscykel, och amperetimmarna säger ingenting förrän man
   vet vilken rad de står i. Rutnätet kommer från --viz-grid, tonen från
   --signal och undantaget från --amber.
   ========================================================================== */

.whmatris {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.whmatris__plot { padding: 20px 24px 22px; overflow-x: auto; }

.whmatris__grid {
  display: grid;
  grid-template-columns: 58px repeat(6, minmax(46px, 1fr));
  gap: 2px;
  min-width: 440px;
}

.whmatris__head,
.whmatris__rowlabel {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.whmatris__head { justify-content: center; padding-bottom: 5px; }

.whmatris__rowlabel { padding-right: 12px; color: var(--ink-2); }

/* Raden ovanför elcykelstandardens tak markeras, inte döljs. */
.whmatris__rowlabel[data-utanfor="ja"] { color: var(--amber); }

.whmatris__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgba(145, 132, 255, calc(0.05 + 0.5 * var(--k)));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  cursor: crosshair;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.whmatris__cell[data-stark="ja"] { color: var(--ink); }

/* Rad och kolumn tänds tillsammans, så att multiplikationen syns i rutnätet. */
.whmatris__cell.is-kol,
.whmatris__cell.is-rad { border-color: var(--line-lit); }

.whmatris__cell.is-vald {
  border-color: var(--signal);
  color: var(--ink);
}

.whmatris__readout {
  margin-top: 18px;
  min-height: 46px;
  padding: 12px 16px;
  border-left: 2px solid var(--signal);
  background: var(--panel);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.whmatris__readout strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
}

.whmatris__readout em { font-style: normal; color: var(--signal-bright); }

.chart__swatch--lag { background-color: rgba(145, 132, 255, 0.12); border: 1px solid var(--line); }
.chart__swatch--hog { background-color: rgba(145, 132, 255, 0.55); }
.chart__swatch--utanfor { background-color: transparent; border: 1px solid var(--amber); }

/* ==========================================================================
   Verktyget Cellkalkylen
   Paketet byggs upp cell för cell. Rutnätet ritar en cell per ruta, så att
   antalet syns: tio celler i serie ger 36 V, och varje kolumn som läggs
   parallellt adderar amperetimmar utan att spänningen rör sig. Fyllningen
   följer cellkapaciteten, inte paketets, eftersom det är cellen man byter.
   ========================================================================== */

.seg--fem { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cellkalkyl__cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cellkalkyl__grid {
  display: grid;
  grid-template-columns: repeat(var(--p), 22px);
  gap: 4px;
  margin-top: 12px;
}

.cellkalkyl__cell {
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background-color: var(--panel-3);
  transition: background-color 0.25s var(--ease);
}

.cellkalkyl__cell[data-cell="liten"] { background-color: rgba(145, 132, 255, 0.3); }
.cellkalkyl__cell[data-cell="mellan"] { background-color: rgba(145, 132, 255, 0.5); }
.cellkalkyl__cell[data-cell="stor"] { background-color: rgba(145, 132, 255, 0.72); }

.cellkalkyl__stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 150px));
  gap: 1px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.cellkalkyl__stat > div { padding-right: 14px; }

.cellkalkyl__stat dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.cellkalkyl__stat dd {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cellkalkyl__stat dd small { font-size: 0.72rem; color: var(--muted); margin-left: 3px; }

/* ==========================================================================
   Diagram: vad som faktiskt laddar ett batteri
   Fyra energimängder på en och samma wattimmesskala. Skalan är medvetet
   linjär och går till paketets 500 Wh, eftersom det är hela argumentet: en
   inbromsning och en nedförsbacke hamnar som nubbar i kanten. Staplarna har
   en minsta bredd så att de syns alls, och siffran står i kolumnen till
   höger. Färgen skiljer källorna åt: batteriet från --viz-3, trampningen
   från --viz-4 och återvinningen från --viz-2.
   ========================================================================== */

.energikallor {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.energikallor__plot { padding: 20px 24px 22px; }

.energikallor__rows { display: grid; gap: 1px; background: var(--line-soft); }

.energikallor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 6px 14px;
  padding: 15px 0;
  background-color: var(--void);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.energikallor__row:hover { background-color: var(--panel); }
.energikallor__row.is-active { background-color: var(--panel-2); }
.energikallor__row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.energikallor__name {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.3;
}

.energikallor__name small { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 3px; }

.energikallor__row.is-active .energikallor__name { color: var(--ink); }

.energikallor__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
}

.energikallor__fill {
  display: block;
  width: var(--w);
  min-width: 3px;
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px;
  transition: opacity 0.25s var(--ease);
}

.energikallor__row[data-typ="batteri"] .energikallor__fill { background-color: var(--viz-3); }
.energikallor__row[data-typ="trampning"] .energikallor__fill { background-color: var(--viz-4); }
.energikallor__row[data-typ="regen"] .energikallor__fill { background-color: var(--viz-2); }

.energikallor__row:not(.is-active) .energikallor__fill { opacity: 0.5; }
.energikallor__row:hover .energikallor__fill { opacity: 1; }

.energikallor__value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.energikallor__row.is-active .energikallor__value { color: var(--ink); }

.energikallor__axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 6px 14px;
  margin-top: 12px;
}

.energikallor__scale { position: relative; height: 14px; }

.energikallor__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.energikallor__scale span:first-child { transform: none; }
.energikallor__scale span:last-child { transform: translateX(-100%); }

.energikallor__readout {
  margin-top: 18px;
  min-height: 46px;
  padding: 12px 16px;
  border-left: 2px solid var(--signal);
  background: var(--panel);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.energikallor__readout strong { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.energikallor__readout em { font-style: normal; color: var(--signal-bright); }

.chart__swatch--batteri { background-color: var(--viz-3); }
.chart__swatch--trampning { background-color: var(--viz-4); }
.chart__swatch--regen { background-color: var(--viz-2); }

/* ==========================================================================
   Diagram: motorns vridmoment och kraften vid hjulet
   Samma 250-wattsmotor ger olika kraft beroende på om den driver hjulet
   direkt eller via växlarna. Raderna färgas per drivning, som i diagrammet
   över fordonsslag.
   ========================================================================== */
.chart__row[data-typ="nav"] .chart__fill { background-color: var(--viz-2); }
.chart__row[data-typ="mitt-hog"] .chart__fill { background-color: var(--viz-1); }
.chart__row[data-typ="mitt-lag"] .chart__fill { background-color: var(--viz-3); }

.chart__swatch--nav { background-color: var(--viz-2); }
.chart__swatch--mitt-hog { background-color: var(--viz-1); }
.chart__swatch--mitt-lag { background-color: var(--viz-3); }

/* ==========================================================================
   Verktyg: watt, vridmoment och kadens
   Läsaren ställer in sin egen kombination av kadens och vridmoment i
   vevpartiet. Kurvan är den kombination som motsvarar 250 watt kontinuerlig
   märkeffekt, alltså den lagliga gränsen: allt ovanför kurvan är mer än 250
   watt. Kurvan är ritad ur P = T · ω och ligger därför alltid rätt i
   förhållande till reglagen. Punkten är rödgul när kombinationen hamnar över
   gränsen.
   ========================================================================== */

.effektplot { position: relative; margin: 0 0 22px; }

.effektplot svg { display: block; width: 100%; height: auto; }

.effektplot__grid { stroke: var(--viz-grid); stroke-width: 1; }
.effektplot__axis { stroke: var(--viz-axis); stroke-width: 1; }

.effektplot__kurva {
  fill: none;
  stroke: var(--viz-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effektplot__etikett {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

.effektplot__kurvetikett {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: var(--viz-1);
}

.effektplot__guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.65; }

.effektplot__punkt { fill: var(--signal); stroke: var(--void); stroke-width: 2.5; }
.effektplot[data-level="over"] .effektplot__punkt { fill: var(--amber); }

/* Snabbval av de vridmoment som faktiskt står i annonserna. */
.tool__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.tool__preset {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--void);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tool__preset:hover { border-color: var(--line-lit); color: var(--ink); }
.tool__preset[aria-pressed="true"] { border-color: var(--signal); color: var(--signal-bright); }
.tool__preset:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Kombinationen ligger över den lagliga kontinuerliga effekten. */
.tool__class[data-level="over"] { color: var(--amber); }
.tool__reqs dd[data-state="over"] { color: var(--amber); }

/* ==========================================================================
   Diagram: effekten som krävs för att hålla 15 km/h
   Två mått per stigning: all effekt som krävs och den del som blir kvar till
   cyklisten. Det andra måttet är noll ända fram till den stigning där motorns
   250 watt inte längre räcker, och det är själva poängen med diagrammet.
   ========================================================================== */
.chart__fill--du { background-color: var(--viz-4); }
.chart__swatch--krav { background-color: var(--viz-1); }
.chart__swatch--du { background-color: var(--viz-4); }

/* ==========================================================================
   Diagram: fartband
   En rad per regim på en gemensam km/h-skala, i stället för en tallinje med
   nålar: här är det intervallen som är poängen. Stödbandet slutar vid 25,
   bandet där du trampar själv fortsätter ända ut, och mopedbanden är streckade
   eftersom motorn då inte längre räknas som cykelassistans. Skalan går till
   90 km/h, så rutnätet står var tionde kilometer.
   ========================================================================== */

.fartsband {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.fartsband__plot { padding: 20px 24px 22px; }

.fartsband__rows { display: grid; gap: 1px; background: var(--line-soft); }

.fartsband__row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  background-color: var(--void);
}

.fartsband__namn {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.fartsband__namn small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body, inherit);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.fartsband__track {
  position: relative;
  height: 18px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 11.1111% 100%;
  border-radius: 2px;
}

.fartsband__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fran);
  width: var(--w);
  border-radius: 2px;
}

/* Streckad stapel: motorn går över gränsen och fordonet är något annat. */
.fartsband__band--streckad {
  background-image: repeating-linear-gradient(135deg,
    rgba(8, 7, 13, 0.55) 0 3px, transparent 3px 7px);
}

.fartsband__row[data-regim="stod"] .fartsband__band { background-color: var(--viz-3); }
.fartsband__row[data-regim="sjalv"] .fartsband__band { background-color: var(--viz-1); }
.fartsband__row[data-regim="spark"] .fartsband__band { background-color: var(--viz-2); }
.fartsband__row[data-regim="klass1"] .fartsband__band { background-color: var(--viz-4); }
.fartsband__row[data-regim="mc"] .fartsband__band { background-color: var(--viz-5); }

.fartsband__varde {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.fartsband__axis { margin-top: 11px; }

.fartsband__scale { position: relative; height: 14px; }

.fartsband__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.fartsband__scale span:first-child { transform: none; }
.fartsband__scale span:last-child { transform: translateX(-100%); }

@media (min-width: 760px) {
  .fartsband__row,
  .fartsband__axis {
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 104px;
    gap: 22px;
    align-items: center;
  }
}

/* ==========================================================================
   Verktyget Rullomkretsen
   Felvisningen är en kvot och inte ett påslag: displayen visar inställd
   omkrets delat med verklig omkrets gånger den verkliga farten. Därför slår
   samma fel olika mycket i km/h beroende på hur fort du kör, och därför
   flyttar en felinställning den fart där stödet släpper.
   ========================================================================== */
/* Felinställd omkrets: gult när stödet hamnar fel, rött när det hamnar över
   25-gränsen och fordonet därmed inte längre är en cykel. */
.tool__class[data-level="fel"] { color: var(--amber); }
.tool__class[data-level="olaglig"] { color: var(--bad); }
.tool__reqs dd[data-state="fel"] { color: var(--amber); }
.tool__reqs dd[data-state="olaglig"] { color: var(--bad); }

/* ==========================================================================
   Diagram: växelomfång per växelsystem
   En rad per system och en stapel för hela omfånget, alltså hur många gånger
   fortare du kan trampa i högsta växeln än i den lägsta. Skalan går till
   600 procent så att staplarna går att jämföra direkt, och färgen skiljer
   navväxlar byggda för elcykel från vanliga navväxlar och från
   utanpåliggande växlar. Poängen med raderna är att antalet växlar står i
   namnraden men inte styr stapellängden: fler växlar är inte samma sak som
   längre växelband.
   ========================================================================== */

.vaxellaget {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.vaxellaget__plot { padding: 20px 24px 22px; }

.vaxellaget__rows { display: grid; gap: 1px; background: var(--line-soft); }

.vaxellaget__row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  background-color: var(--void);
}

.vaxellaget__namn {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.vaxellaget__namn small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body, inherit);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.vaxellaget__track {
  position: relative;
  height: 18px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 16.6667% 100%;
  border-radius: 2px;
}

.vaxellaget__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--fran);
  width: var(--w);
  border-radius: 2px;
}

.vaxellaget__row[data-typ="ecykel"] .vaxellaget__band { background-color: var(--viz-1); }
.vaxellaget__row[data-typ="nav"] .vaxellaget__band { background-color: var(--viz-2); }
.vaxellaget__row[data-typ="utanpa"] .vaxellaget__band { background-color: var(--viz-3); }

/* Fältet markerar var 25 km/h hamnar när bandet läggs så att lägsta växeln
   ger 10 km/h vid 80 varv per minut. Streckat, för det är ett läge och inte
   ett mått på bandet. */
.vaxellaget__marke {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--m);
  width: 0;
  border-left: 1px dashed var(--ink-2);
  opacity: 0.6;
}

.vaxellaget__varde {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.vaxellaget__axis { margin-top: 11px; }

.vaxellaget__scale { position: relative; height: 14px; }

.vaxellaget__scale span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.vaxellaget__scale span:first-child { transform: none; }
.vaxellaget__scale span:last-child { transform: translateX(-100%); }

@media (min-width: 760px) {
  .vaxellaget__row,
  .vaxellaget__axis {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 104px;
    gap: 22px;
    align-items: center;
  }
}

/* ==========================================================================
   Verktyget Navvridet
   Vridmomentet som når navet är motorns vridmoment gånger drevet delat med
   klingan, alltså tvärtemot utväxlingen: en liten klinga multiplicerar
   vridmomentet in i navet. Därför går det att räkna ut om en stark mittmotor
   ligger över navets märkning innan något går sönder.
   ========================================================================== */
.tool__class[data-level="nara"] { color: var(--amber); }
.tool__class[data-level="over"] { color: var(--bad); }
.tool__reqs dd[data-state="nara"] { color: var(--amber); }
.tool__reqs dd[data-state="over"] { color: var(--bad); }

/* ==========================================================================
   Diagram: elsystemets kedja
   Fyra rutor i den ordning signalen går, med en pil mellan varje. Kedjan är
   poängen: displayen sätter gränserna men det är styrenheten som släpper fram
   strömmen, så en trasig kontakt längst bak i kedjan ser ut som en trasig
   display längst fram. Rutorna staplas på smala skärmar och pilen vrids så att
   den pekar nedåt i stället.
   ========================================================================== */

.kedja {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.kedja__head {
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel) 0%, rgba(18, 16, 29, 0.2) 100%);
}

.kedja__plot { padding: 22px 24px 24px; }

.kedja__rad { display: flex; flex-direction: column; }

.kedja__pil {
  display: grid;
  place-items: center;
  padding: 7px 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--line-lit);
  transform: rotate(90deg);
}

.kedja__nod {
  padding: 15px 17px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.kedja__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kedja__namn {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.kedja__text {
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Displayen är den ruta som sätter gränserna, alltså den som avgör om en
   ersättare måste vara av samma sort. */
.kedja__nod[data-roll="grans"] { border-color: var(--signal); }
.kedja__nod[data-roll="grans"] .kedja__tag { color: var(--signal-bright); }

.kedja__fot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  max-width: 76ch;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
}

/* En tidslinje med fler steg än fyra blir oläslig som en enda rad på bred
   skärm. Guiden delar den därför i två rader, och de behöver luft mellan sig
   både när raderna ligger sida vid sida och när de staplas som kolumner. */
.kedja__rad + .kedja__rad { margin-top: 22px; }

@media (min-width: 760px) {
  .kedja__rad { flex-direction: row; align-items: stretch; }
  .kedja__nod { flex: 1 1 0; }
  .kedja__pil { flex: none; padding: 0 11px; transform: none; }
}

/* Diagrammet över kabelns förlust. Den ena stapeln är körningen som pågår
   hela tiden och den andra är de korta stunder då styrenheten släpper fram
   allt den får. Båda mäts i watt, så staplarna delar skala. */
.chart__fill--jamn { background-color: var(--viz-3); }
.chart__fill--topp { background-color: var(--viz-4); }
.chart__swatch--jamn { background-color: var(--viz-3); }
.chart__swatch--topp { background-color: var(--viz-4); }

/* Steglistan i verktyget Felsökningen. Numren är avsiktligt små och grå: de
   visar ordningen, inte vikten. */
.tool__steg {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  counter-reset: steg;
  list-style: none;
}

.tool__steg li {
  position: relative;
  padding-left: 36px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.tool__steg li::before {
  counter-increment: steg;
  content: counter(steg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.tool__steg li strong { color: var(--ink); }

/* Rubriken i felsökningen: neutral när felet troligen sitter i en kontakt och
   gul när det troligen blir en del att byta. */
.tool__class[data-level="trolig"] { color: var(--ink); }
.tool__class[data-level="kostar"] { color: var(--amber); }

/* Elsystemet driver utan att någon trampar. Det är ett säkerhetsfel och inte en
   utgift, så det får den röda tonen och inte den gula. */
.tool__class[data-level="fara"] { color: var(--bad); }

/* ==========================================================================
   Diagram: räckvidden mot farten
   Tre kurvor för samma 500-wattimmarsbatteri vid tre assistansnivåer. Formen är
   hela poängen: räckvidden faller brantare än farten stiger, eftersom effekten
   som krävs växer med farten i kubik medan energin per kilometer växer med
   kvadraten. Kurvorna tar slut vid 25 kilometer i timmen, där motorn slutar
   hjälpa och räckvidden därför inte längre är en fråga om batteriet. Punkterna
   är räknade ur fysik, inte uppmätta.
   ========================================================================== */

.rackkurva {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rackkurva__plot { padding: 18px 24px 22px; }

/* Kurvorna och axlarna är ritade i en fast viewBox, så texten i diagrammet
   krymper med bredden. På smala skärmar får diagrammet därför behålla en
   minsta bredd och rulla i sidled i stället, samma val som tabellerna gör. */
.rackkurva__scroll { overflow-x: auto; }

.rackkurva svg { display: block; width: 100%; min-width: 640px; height: auto; }

.rackkurva__grid { stroke: var(--viz-grid); stroke-width: 1; }
.rackkurva__axis { stroke: var(--viz-axis); stroke-width: 1; }

.rackkurva__kurva {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rackkurva__kurva--spar { stroke: var(--viz-3); }
.rackkurva__kurva--normal { stroke: var(--viz-1); }
.rackkurva__kurva--full { stroke: var(--viz-4); }

.rackkurva__etikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

.rackkurva__kurvetikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.rackkurva__kurvetikett--spar { fill: var(--viz-3); }
.rackkurva__kurvetikett--normal { fill: var(--viz-1); }
.rackkurva__kurvetikett--full { fill: var(--viz-4); }

.rackkurva__grans { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }

.rackkurva__gransetikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--amber);
}

/* Räckviddskalkylen. Tre reglage och tre valgrupper fyller kontrollkolumnen,
   så fälten får mindre luft mellan sig än i de kortare verktygen. */
.tool--tat .tool__field + .tool__field { margin-top: 20px; }

/* Rubriken i räckviddsverktyget: grön när batteriet räcker långt, neutral i
   mellanläget och gul när det inte räcker till pendlingen. */
.tool__class[data-level="rak"] { color: var(--ink); }
.tool__class[data-level="lang"] { color: var(--signal-bright); }
.tool__class[data-level="kort"] { color: var(--amber); }

/* ==========================================================================
   Diagram: underlaget som effektbehov
   En rad per yta med effekten som krävs vid hjulet i en och samma skala, och
   en streckad linje vid 250 watt som är motorns kontinuerliga märkeffekt. Det
   är samma sorts stapel som .weigh använder, men taket är en gräns i stället
   för ett intervall och ritas därför som en streckad linje med etikett.
   Skalan går till 600 watt, så att den yta som kräver mest får plats utan att
   staplarna klipps. Bredder sätts med --w i markupen, så diagrammet visas
   korrekt även utan JavaScript. Färgen kommer från --viz-1 för att det är en
   enda serie och från --amber för taket.
   ========================================================================== */

.ytor {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.ytor__plot { padding: 18px 24px 22px; }

.ytor__rows { display: grid; gap: 1px; background: var(--line-soft); }

.ytor__row {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 92px;
  gap: 6px 14px;
  align-items: center;
  padding: 12px 0;
  background-color: var(--void);
}

.ytor__namn {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.3;
}

.ytor__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 16.6667% 100%;
  border-radius: 2px;
}

.ytor__fill {
  display: block;
  width: var(--w);
  height: 100%;
  background-color: var(--viz-1);
  border-radius: 2px 0 0 2px;
}

/* Motorns tak. Linjen ligger på samma plats i varje rad, så staplarna går att
   jämföra direkt mot den i stället för mot varandra. */
.ytor__tak {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--tak);
  border-left: 1px dashed var(--amber);
  opacity: 0.85;
  pointer-events: none;
}

.ytor__varde {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.ytor__varde small { display: block; color: var(--muted); font-size: 0.92em; }

.ytor__axis {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 92px;
  gap: 0 14px;
  margin-top: 12px;
}

.ytor__axis-track { position: relative; height: 14px; }

.ytor__axis-track span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

.ytor__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0 24px 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ytor__legend span { display: inline-flex; align-items: center; gap: 8px; }

.ytor__swatch {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 1px;
  background-color: var(--viz-1);
}

.ytor__swatch--tak {
  width: 0;
  height: 12px;
  border-left: 1px dashed var(--amber);
  border-radius: 0;
}

@media (max-width: 620px) {
  .ytor__row,
  .ytor__axis { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 72px; gap: 6px 10px; }
  .ytor__namn { font-size: 0.78rem; }
  .ytor__varde { font-size: 0.7rem; }
  .ytor__legend { padding: 12px 18px 18px; }
}

/* ==========================================================================
   Diagram: däcktryckets kurva
   Rullmotståndet delat i sina två delar. Däckets deformation faller med
   trycket, marken stiger med det, och summan är ett U vars botten ligger
   exakt där de två delarna möts. Det är därför båda delarna ritas och inte
   bara summan: minimum är korsningen, inte en punkt någonstans emellan.
   Samma ram som .rackkurva, och samma val att låta diagrammet rulla i sidled
   i stället för att krympa texten på smala skärmar.
   ========================================================================== */

.tryckkurva {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tryckkurva__plot { padding: 18px 24px 22px; }

.tryckkurva__scroll { overflow-x: auto; }

.tryckkurva svg { display: block; width: 100%; min-width: 640px; height: auto; }

.tryckkurva__grid { stroke: var(--viz-grid); stroke-width: 1; }
.tryckkurva__axis { stroke: var(--viz-axis); stroke-width: 1; }

.tryckkurva__linje {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tryckkurva__linje--dack { stroke: var(--viz-2); }
.tryckkurva__linje--mark { stroke: var(--viz-3); }

/* Summan är den linje läsaren ska följa, så den ligger överst och är tyngre. */
.tryckkurva__linje--summa { stroke: var(--viz-1); stroke-width: 2.6; }

.tryckkurva__grans {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.tryckkurva__punkt { fill: var(--viz-1); stroke: var(--void); stroke-width: 2; }

.tryckkurva__etikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}

.tryckkurva__gransetikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--amber);
}

.tryckkurva__serieetikett {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Rubriken i tryckverktyget: grön när trycket står på optimum och gul när
   det ligger på någon av sidorna om det. */
/* Varvtalsväljaren: en vanlig kombination är grön, en ovanlig är bärnstensgul. */
.tool__class[data-level="vanlig"] { color: var(--signal-bright); }
.tool__class[data-level="ovanlig"] { color: var(--amber); }

.tool__class[data-level="ratt"] { color: var(--signal-bright); }
.tool__class[data-level="hogt"] { color: var(--amber); }
.tool__class[data-level="lagt"] { color: var(--amber); }

.tryckkurva__serieetikett--dack { fill: var(--viz-2); }
.tryckkurva__serieetikett--mark { fill: var(--viz-3); }
.tryckkurva__serieetikett--summa { fill: var(--viz-1); }

/* ==========================================================================
   Skala: däcktrycket per underlag
   En rad per yta med optimum utsatt som en punkt på en gemensam bar-skala.
   En punkt och inte en stapel, eftersom det är ett tryck och inte en mängd.
   Bredden kommer från --p i markupen, så raden visas korrekt utan JavaScript.
   ========================================================================== */

.tryckstegar {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 24px 22px;
}

.tryckstegar__rows { display: grid; gap: 1px; background: var(--line-soft); }

.tryckstegar__row {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 92px;
  gap: 6px 14px;
  align-items: center;
  padding: 11px 0;
  background-color: var(--void);
}

.tryckstegar__namn {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.3;
}

.tryckstegar__track {
  position: relative;
  height: 16px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
}

.tryckstegar__punkt {
  position: absolute;
  left: var(--p);
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background-color: var(--viz-1);
  box-shadow: 0 0 0 3px var(--void);
}

.tryckstegar__varde {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.tryckstegar__axis {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 92px;
  gap: 0 14px;
  margin-top: 12px;
}

.tryckstegar__axis-track { position: relative; height: 14px; }

.tryckstegar__axis-track span {
  position: absolute;
  left: var(--p);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .tryckstegar { padding: 14px 18px 18px; }
  .tryckstegar__row,
  .tryckstegar__axis { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 72px; gap: 6px 10px; }
  .tryckstegar__namn { font-size: 0.78rem; }
  .tryckstegar__varde { font-size: 0.7rem; }
}

/* ==========================================================================
   Diagram: färgvalen i registret
   En rad per färg, stapeln är andelen modeller som finns i den, och reglagen
   ovanför byter vilka modeller som listas under. Färgen på stapeln är färgen
   raden handlar om, så att diagrammet inte behöver enlegend som säger samma
   sak nio gånger. Proverna är våra egna tolkningar av butikens färgnamn.

   Två rader är förvalda på olika sätt: den vanligaste färgen har öppet läge i
   markupen, eftersom en sida utan JavaScript ska visa något och inte en tom
   ruta. Alla rader ritas alltid, det är bara markeringen som flyttas.
   ========================================================================== */

.fargkarta {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Reglagen. 44 px höga och minst 44 px breda: de träffas med en tumme, inte
   med en muspekare. */
.fargkarta__val {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 24px 16px;
}

.fargkarta__knapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--void);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.fargkarta__knapp[aria-pressed="true"] {
  border-color: var(--signal);
  color: var(--signal-bright);
}

.fargkarta__knapp:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.fargkarta__knapp b {
  font-weight: 500;
  color: var(--muted);
}

.fargkarta__knapp[aria-pressed="true"] b { color: var(--signal-bright); }

/* Färgprovet. Den tunna kanten behövs för svart, blå och olivgrön, som annars
   flyter ihop med bakgrunden. */
.fargkarta__prov {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  background-color: var(--prov, transparent);
  box-shadow: inset 0 0 0 1px rgba(240, 238, 248, 0.22);
}

.fargkarta__prov--tom {
  background-image: repeating-linear-gradient(135deg,
    var(--muted) 0 1px, transparent 1px 4px);
  opacity: 0.7;
}

/* Svarsraden ligger direkt under reglagen och det är den som ändras när man
   trycker. Den är medvetet kort: listan med modeller står längst ned i
   blocket, för fjorton brickor mellan reglagen och diagrammet hade skjutit
   själva svaret nedanför skärmen. */
.fargkarta__svar {
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.fargkarta__svar[hidden] { display: none; }

.fargkarta__svar strong {
  font-weight: 500;
  color: var(--ink);
}

.fargkarta__andel {
  margin-left: 9px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fargkarta__lista-bas { padding: 14px 24px 18px; border-top: 1px solid var(--line-soft); }

.fargkarta__modeller { margin: 0; }

.fargkarta__modeller[hidden] { display: none; }

.fargkarta__modell {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--ink-2);
}

.fargkarta__modell i {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  color: var(--muted);
}

.fargkarta__plot { padding: 16px 24px 20px; }

.fargkarta__rows { display: grid; gap: 1px; background: var(--line-soft); }

.fargkarta__row {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(0, 76px);
  gap: 8px 14px;
  align-items: center;
  padding: 8px 0;
  background-color: var(--void);
}

.fargkarta__namn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--ink-2);
}

.fargkarta__prov--rad { width: 15px; height: 15px; }

/* Den valda raden lyfts fram med en kant till vänster. Att dämpa de andra i
   stället hade gjort diagrammet svårläst på en skärm i solljus. */
.fargkarta__row[data-aktiv="true"] { box-shadow: inset 3px 0 0 var(--signal); }
.fargkarta__row[data-aktiv="true"] .fargkarta__namn { color: var(--ink); }
.fargkarta__row[data-aktiv="true"] .fargkarta__varde { color: var(--ink); }

.fargkarta__track {
  position: relative;
  height: 15px;
  background-color: var(--panel-2);
  border-radius: 2px;
}

.fargkarta__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--andel);
  min-width: 4px;
  background-color: var(--prov);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(8, 7, 13, 0.35);
}

.fargkarta__fill--tom {
  background-color: transparent;
  border: 1px dashed var(--muted);
  background-image: repeating-linear-gradient(135deg,
    var(--muted) 0 1px, transparent 1px 5px);
  opacity: 0.55;
}

.fargkarta__varde {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.fargkarta__varde small {
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  color: var(--muted);
}

.fargkarta__axis {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(0, 76px);
  gap: 8px 14px;
  margin-top: 10px;
}

.fargkarta__axis-track { position: relative; height: 14px; }

.fargkarta__axis-track span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
}

.fargkarta__axis-track span:first-child { transform: none; }
.fargkarta__axis-track span:last-child { transform: translateX(-100%); }

.fargkarta .chart__note { padding: 0 24px 20px; margin-top: 0; }

/* På smal skärm får stapeln en egen rad under namnet. Siffran hålls kvar i sin
   kolumn med grid-rad och grid-kolumn för hand, av samma skäl som i typer: ett
   spår som vill ha hela bredden skjuter annars fram siffran till raden under. */
@media (max-width: 560px) {
  .fargkarta__val { padding: 4px 16px 14px; gap: 6px; }
  .fargkarta__svar { padding: 12px 16px; }
  .fargkarta__andel { display: block; margin: 3px 0 0; }
  .fargkarta__plot { padding: 14px 16px 16px; }
  .fargkarta__lista-bas { padding: 12px 16px 16px; }
  .fargkarta__modell { font-size: 0.68rem; padding: 4px 8px; margin: 0 5px 5px 0; }
  .fargkarta__row,
  .fargkarta__axis { grid-template-columns: minmax(0, 1fr) 62px; }
  .fargkarta__track { grid-column: 1 / -1; grid-row: 2; }
  .fargkarta__namn { grid-column: 1; grid-row: 1; }
  .fargkarta__varde { grid-column: 2; grid-row: 1; }
  .fargkarta__axis-track { grid-column: 1 / -1; grid-row: 1; }
  .fargkarta .chart__note { padding: 0 16px 18px; }
}

/* ==========================================================================
   Bara det som ligger i bild räknas ut vid start
   ========================================================================== */
/* Diagram, verktyg, faktarutor, tabeller och källistor är 76 procent av alla
   element i brödtexten (2 870 av 3 781 över de sexton guiderna) och de ligger
   allihop en bra bit nedanför första skärmen. content-visibility: auto låter
   webbläsaren hoppa över dem helt — ingen layout, ingen målning — tills de är
   på väg in i bild. Det är samma sak som att säga att bara pagefolden behöver
   vara snabb: texten närmast rubriken ritas direkt, resten när man kommer dit.

   contain-intrinsic-size ger varje block en gissad höjd innan det har målats
   en gång, så att sidan inte byter höjd när blocken räknas ut på riktigt.
   Nyckelordet auto gör att webbläsaren sedan minns den verkliga höjden.
   Siffrorna är medianhöjder uppmätta vid 390 px bredd i webbläsaren, avrundade
   uppåt till närmaste tiotal. Ändra dem om ett block ändrar form.

   Avsiktligt bara block, inte stycken: ett stycke är 55 till 494 px högt
   beroende på hur mycket som står i det, så en gissning där hade gjort mer
   skada än nytta. Webbläsare utan stöd för content-visibility ritar som förut. */
.prose > .vaxellaget { content-visibility: auto; contain-intrinsic-size: auto 1940px; }
.prose > .kedja { content-visibility: auto; contain-intrinsic-size: auto 1560px; }
.prose > .tool { content-visibility: auto; contain-intrinsic-size: auto 1450px; }
.prose > .fartsband { content-visibility: auto; contain-intrinsic-size: auto 1350px; }
.prose > .chart { content-visibility: auto; contain-intrinsic-size: auto 1330px; }
.prose > .funnel { content-visibility: auto; contain-intrinsic-size: auto 1320px; }
.prose > .rack { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.prose > .ruler { content-visibility: auto; contain-intrinsic-size: auto 1120px; }
.prose > .energikallor { content-visibility: auto; contain-intrinsic-size: auto 1110px; }
.prose > .ytor { content-visibility: auto; contain-intrinsic-size: auto 1110px; }
.prose > .tryckkurva { content-visibility: auto; contain-intrinsic-size: auto 840px; }
.prose > .fargkarta { content-visibility: auto; contain-intrinsic-size: auto 1720px; }
.prose > .tryckstegar { content-visibility: auto; contain-intrinsic-size: auto 580px; }
.prose > .rackkurva { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.prose > .lager { content-visibility: auto; contain-intrinsic-size: auto 870px; }
.prose > .whmatris { content-visibility: auto; contain-intrinsic-size: auto 850px; }
.prose > .weigh { content-visibility: auto; contain-intrinsic-size: auto 790px; }
.prose > .callout { content-visibility: auto; contain-intrinsic-size: auto 740px; }
.prose > .table-scroll { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.prose > .limits { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.prose > .bolag { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.prose > .tool__note { content-visibility: auto; contain-intrinsic-size: auto 250px; }.prose > ul.sources { content-visibility: auto; contain-intrinsic-size: auto 2510px; }

/* ── Diagram: trehjulingar och tillgänglighet ───────────────────────── */
.trehjuling { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.trehjuling__plot { display: grid; grid-template-columns: 50px minmax(0,1fr) 50px; gap: 12px; align-items: center; padding: 26px 24px; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.trehjuling__plot > i { position: relative; display: block; height: 22px; background: var(--panel-2); background-image: linear-gradient(90deg,var(--viz-grid) 0 1px,transparent 1px); background-size: 33.333% 100%; border-radius: 2px; overflow: hidden; }
.trehjuling__plot b { position: absolute; left: var(--from); width: var(--w); height: 100%; background: var(--viz-5); }
.trehjuling__plot .trehjuling__axis:last-child { text-align: right; }
.trehjuling > .chart__note { padding: 0 24px 22px; }
@media (max-width: 560px) { .trehjuling__plot { padding: 22px 16px; } .trehjuling > .chart__note { padding-inline: 16px; } }

/* ── Diagram: familj och passagerare ────────────────────────────────── */
.familj { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.familj__plot { display: grid; gap: 10px; padding: 20px 24px 24px; }
.familj__row { display: grid; grid-template-columns: 105px minmax(0,1fr) 30px; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
.familj__row > i { display: block; height: 15px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.familj__row b { display: block; height: 100%; width: var(--w); background: var(--viz-4); }
.familj__row strong { font-weight: 400; text-align: right; }
.familj > .chart__note { padding: 0 24px 22px; }
@media (max-width: 560px) { .familj__plot { padding: 16px; } .familj__row { grid-template-columns: 94px minmax(0,1fr) 24px; gap: 8px; font-size: .7rem; } .familj > .chart__note { padding-inline: 16px; } }

/* ── Diagram: hjulstorlek, däck och slang ───────────────────────────── */
.hjulstorlek { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hjulstorlek__plot { display: grid; gap: 10px; padding: 20px 24px 24px; }
.hjulstorlek__row { display: grid; grid-template-columns: 92px minmax(0,1fr) 30px; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
.hjulstorlek__row > i { display: block; height: 15px; background: var(--panel-2); background-image: linear-gradient(90deg,var(--viz-grid) 0 1px,transparent 1px); background-size: 25% 100%; border-radius: 2px; overflow: hidden; }
.hjulstorlek__row b { display: block; height: 100%; width: var(--w); background: var(--viz-3); }
.hjulstorlek__row strong { font-weight: 400; text-align: right; }
.hjulstorlek > .chart__note { padding: 0 24px 22px; }
@media (max-width: 560px) { .hjulstorlek__plot { padding: 16px; } .hjulstorlek__row { grid-template-columns: 82px minmax(0,1fr) 24px; gap: 8px; font-size: .7rem; } .hjulstorlek > .chart__note { padding-inline: 16px; } }

/* ── Diagram: ramstorlek och insteg ─────────────────────────────────── */
.ramstorlek { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ramstorlek__plot { padding: 20px 24px 24px; }
.ramstorlek__rows { display: grid; gap: 9px; }
.ramstorlek__row { display: grid; grid-template-columns: 72px minmax(0,1fr) 28px; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
.ramstorlek__row > i { display: block; height: 15px; background: var(--panel-2); background-image: linear-gradient(90deg,var(--viz-grid) 0 1px,transparent 1px); background-size: 25% 100%; border-radius: 2px; overflow: hidden; }
.ramstorlek__row b { display: block; height: 100%; width: var(--w); background: var(--viz-2); }
.ramstorlek__row strong { font-weight: 400; text-align: right; }
.ramstorlek > .chart__note { padding: 0 24px 22px; }
@media (max-width: 560px) { .ramstorlek__plot { padding: 16px; } .ramstorlek__row { grid-template-columns: 64px minmax(0,1fr) 24px; gap: 8px; font-size: .7rem; } .ramstorlek > .chart__note { padding-inline: 16px; } }

/* ── Diagram: vikt och maxlast ───────────────────────────────────────── */
.viktlast {
  margin: 30px 0;
  max-width: 980px;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.viktlast__plot { padding: 20px 24px 22px; }
.viktlast__rows { display: grid; gap: 10px; }
.viktlast__row { display: grid; grid-template-columns: 110px minmax(0,1fr) 32px; gap: 12px; align-items: center; }
.viktlast__label, .viktlast__value, .viktlast__load { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
.viktlast__value { text-align: right; }
.viktlast__track { height: 15px; background: var(--panel-2); background-image: linear-gradient(90deg,var(--viz-grid) 0 1px,transparent 1px); background-size: 25% 100%; border-radius: 2px; overflow: hidden; }
.viktlast__fill { display: block; height: 100%; width: var(--w); background: var(--viz-1); border-radius: 2px; }
.viktlast__axis { display: flex; justify-content: space-between; margin: 12px 0 0 122px; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.viktlast__loads { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; padding: 0 24px 22px; background: var(--line-soft); }
.viktlast__loads .chart__title { grid-column: 1 / -1; padding: 18px 0 8px; }
.viktlast__load { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; padding: 13px 14px; background: var(--void); }
.viktlast__load strong { color: var(--ink); font-weight: 500; }
.viktlast__load small { grid-column: 1 / -1; color: var(--muted); font-family: var(--font-body); }
.viktlast > .chart__note { padding: 0 24px 22px; }
@media (max-width: 560px) {
  .viktlast__plot { padding: 16px; }
  .viktlast__row { grid-template-columns: 92px minmax(0,1fr) 26px; gap: 8px; }
  .viktlast__label, .viktlast__value { font-size: .68rem; }
  .viktlast__axis { margin-left: 100px; }
  .viktlast__loads { grid-template-columns: 1fr; padding-inline: 16px; }
  .viktlast__loads .chart__title { padding-top: 16px; }
  .viktlast > .chart__note { padding-inline: 16px; }
}



/* ── Diagram: var märkenas svenska bas ligger ──────────────────────── */
/* En rad per ort, från norr till söder, med en punkt på en gemensam
   nord-sydlig skala. Punkten är ortens läge i landet och inte ett mätvärde,
   så raden har ingen stapel. Positionen sätts med --p i markupen och
   diagrammet läses därför korrekt utan JavaScript. Skalan döljs på smal
   skärm, där radens egen text redan säger vad punkten betyder. */
.orter { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.orter__plot { display: grid; gap: 9px; padding: 22px 24px 24px; }
.orter__row { display: grid; grid-template-columns: minmax(0,104px) minmax(0,1fr) minmax(0,196px); gap: 12px; align-items: center; }
.orter__namn { font-family: var(--font-mono); font-size: .74rem; color: var(--ink); }
.orter__track { position: relative; height: 15px; background: var(--panel-2); background-image: linear-gradient(90deg,var(--viz-grid) 0 1px,transparent 1px); background-size: 25% 100%; border-radius: 2px; }
.orter__punkt { position: absolute; left: var(--p); top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--viz-2); box-shadow: 0 0 0 3px var(--void); }
.orter__varde { font-size: .74rem; line-height: 1.35; color: var(--ink-2); }
.orter__axis { display: grid; grid-template-columns: minmax(0,104px) minmax(0,1fr) minmax(0,196px); gap: 0 12px; margin-top: 12px; }
.orter__axis-track { position: relative; height: 14px; font-family: var(--font-mono); font-size: .6rem; color: var(--muted); }
.orter__axis-track span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.orter__axis-track span:first-child { left: 0; transform: none; }
.orter__axis-track span:last-child { right: 0; left: auto; transform: translateX(-100%); }
.orter > .chart__note { padding: 0 24px 22px; }
@media (max-width: 620px) {
  .orter__plot { padding: 16px; gap: 13px; }
  .orter__row { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .orter__axis { display: none; }
  .orter > .chart__note { padding-inline: 16px; }
}

/* ── Diagrammet över registrets ytterlägen ──────────────────────────────
   Varje rad är en uppgift och bandet går från det lägsta till det högsta
   angivna värdet, med medianen som streck. Raderna har olika enheter och
   därför olika skalor, vilket foten säger, och därför finns inget rutnät:
   ett gemensamt rutnät skulle låtsas att skalorna är jämförbara. */
.spann { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spann__plot { padding: 18px 24px 22px; }
.spann__rows { display: grid; gap: 1px; background: var(--line-soft); }
.spann__row { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) minmax(0,132px); gap: 8px 14px; align-items: center; padding: 14px 0; background: var(--void); }
.spann__namn { font-size: .84rem; line-height: 1.3; color: var(--ink); }
.spann__namn small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: var(--muted); }
.spann__track { position: relative; height: 16px; background: var(--panel-2); border-radius: 2px; }
.spann__band { position: absolute; top: 0; bottom: 0; left: var(--fran); width: var(--bredd); min-width: 4px; background: var(--viz-1); border-radius: 2px; }
.spann__median { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; margin-left: -1px; background: var(--ink); opacity: .8; }
.spann__varde { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.spann__varde small { display: block; margin-top: 3px; font-size: .64rem; color: var(--muted); }
.spann > .chart__note { padding: 0 24px 22px; }
@media (max-width: 760px) {
  .spann__row { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; }
  .spann__namn { grid-column: 1; grid-row: 1; }
  .spann__varde { grid-column: 2; grid-row: 1; }
  .spann__track { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Diagram över vad ordet dam kostar ─────────────────────────────────
   En rad per modell som säljs i två versioner, med nollan fast i mitten av
   spåret och en stapel som visar skillnaden i pris mot herrvarianten. En rad
   där priset är det samma har ingen stapel alls, och det är avsiktligt:
   frånvaron av stapel är hela skillnaden.
   Modifieraren --h ritar stapeln åt höger och --v åt vänster, så att en
   damvariant som är billigare hamnar på rätt sida om nollan. */
.skillnad { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.skillnad__plot { padding: 18px 24px 22px; }
.skillnad__rows { display: grid; gap: 1px; background: var(--line-soft); }
.skillnad__row { display: grid; grid-template-columns: minmax(0,168px) minmax(0,1fr) minmax(0,116px); gap: 8px 14px; align-items: center; padding: 14px 0; background: var(--void); }
.skillnad__namn { font-size: .84rem; line-height: 1.3; color: var(--ink); }
.skillnad__namn small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: var(--muted); }
.skillnad__track { position: relative; height: 16px; background: var(--panel-2); border-radius: 2px; }
.skillnad__noll { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: var(--line); }
.skillnad__bar { position: absolute; top: 2px; bottom: 2px; width: var(--bredd); min-width: 3px; background: var(--viz-1); border-radius: 2px; }
.skillnad__bar--h { left: 50%; }
.skillnad__bar--v { right: 50%; }
.skillnad__varde { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.skillnad__varde small { display: block; margin-top: 3px; font-size: .64rem; color: var(--muted); }
.skillnad > .chart__note { padding: 0 24px 22px; }
@media (max-width: 760px) {
  .skillnad__plot { padding: 16px; }
  .skillnad__row { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; }
  .skillnad__namn { grid-column: 1; grid-row: 1; }
  .skillnad__varde { grid-column: 2; grid-row: 1; }
  .skillnad__track { grid-column: 1 / -1; grid-row: 2; }
  .skillnad > .chart__note { padding-inline: 16px; }
}

/* ── Punktmoln över vridmoment och pris ────────────────────────────────
   En punkt per modell, med vridmomentet på den vågräta axeln och priset på
   den lodräta. Rutnätet ritas ur samma skala som punkterna, så att en linje
   och en punkt med samma värde möts exakt, och färgen följer butiken eftersom
   det är butiken och inte cykeln som avgör vilka uppgifter som publiceras.
   Axlarnas siffror står utanför ritytan: den lodräta axeln i en egen kolumn
   till vänster, den vågräta i en rad under, med samma indrag som ritytan så
   att siffran hamnar under sin egen linje. Etiketterna ligger i ritytan och
   vänds in mot mitten med --vanster och --hoger, så att de inte kan sticka
   ut utanför kanten vid smal skärm. */
.punktmoln { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.punktmoln__plot { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 0 10px; padding: 18px 24px 4px; }
.punktmoln__y { position: relative; height: 260px; }
.punktmoln__y span { position: absolute; right: 0; top: var(--y); transform: translateY(-50%); font-family: var(--font-mono); font-size: .62rem; color: var(--muted); white-space: nowrap; }
.punktmoln__yta { position: relative; height: 260px; border-left: 1px solid var(--viz-axis); border-bottom: 1px solid var(--viz-axis); }
.punktmoln__linje { position: absolute; pointer-events: none; }
.punktmoln__linje--v { left: 0; right: 0; top: var(--y); height: 1px; background: var(--viz-grid); }
.punktmoln__linje--l { top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--viz-grid); }
.punktmoln__punkt { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--muted); }
.punktmoln__punkt--b1 { background: var(--viz-1); }
.punktmoln__punkt--b2 { background: var(--viz-2); }
.punktmoln__punkt--b3 { background: var(--viz-3); }
.punktmoln__punkt--b4 { background: var(--viz-4); }
.punktmoln__punkt--b5 { background: var(--viz-5); }
.punktmoln__etikett { position: absolute; left: var(--x); top: var(--y); font-family: var(--font-mono); font-size: .64rem; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.punktmoln__etikett--vanster { transform: translate(-100%, -50%); margin-left: -11px; }
.punktmoln__etikett--hoger { transform: translateY(-50%); margin-left: 11px; }
.punktmoln__x { position: relative; height: 20px; margin: 0 24px 0 100px; }
.punktmoln__xtal { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.punktmoln__xtal--forsta { transform: none; }
.punktmoln__xtal--sista { transform: translateX(-100%); }
.punktmoln__x::after { content: "Nm"; position: absolute; right: 0; top: 0; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); transform: translateX(calc(100% + 24px)); }
.punktmoln > .chart__note { padding: 10px 24px 22px; }
@media (max-width: 760px) {
  .punktmoln__plot { grid-template-columns: 52px minmax(0,1fr); gap: 0 8px; padding: 14px 16px 4px; }
  .punktmoln__y { height: 220px; }
  .punktmoln__yta { height: 220px; }
  .punktmoln__y span { font-size: .58rem; }
  .punktmoln__etikett { font-size: .58rem; }
  .punktmoln__etikett--vanster { margin-left: -8px; }
  .punktmoln__etikett--hoger { margin-left: 8px; }
  .punktmoln__x { margin: 0 16px 0 76px; }
  .punktmoln__x::after { display: none; }
  .punktmoln > .chart__note { padding-inline: 16px; }
}

/* ── Prisspann per märke ────────────────────────────────────────────────
   En rad per märke med ett band från märkets lägsta till dess högsta pris,
   medianen som streck i bandet och butikens färg på bandet. Till skillnad
   från .spann delar alla rader en och samma skala i kronor, och därför ritas
   rutnätet inuti varje spår i stället för en gång över hela diagrammet: då
   möts en linje och en bandkant med samma värde exakt, rad för rad, utan att
   någon kolumnbredd behöver mätas upp. Skalraden överst har samma
   kolumnbredder som raderna, så siffran hamnar under sin egen linje. */
.markesband { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.markesband__plot { padding: 18px 24px 22px; }
.markesband__rader { display: grid; gap: 1px; background: var(--line-soft); }
.markesband__rad { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) minmax(0,124px); gap: 8px 14px; align-items: center; padding: 12px 0; background: var(--void); }
.markesband__rad--skala { padding: 0 0 6px; background: transparent; }
.markesband__namn { font-size: .84rem; line-height: 1.3; color: var(--ink); }
.markesband__namn small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .64rem; color: var(--muted); }
.markesband__skala { position: relative; display: block; height: 15px; }
.markesband__steg { position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: .62rem; color: var(--muted); white-space: nowrap; }
.markesband__steg:first-child { transform: none; }
.markesband__steg:last-child { transform: translateX(-100%); }
.markesband__spar { position: relative; height: 16px; background: var(--panel-2); border-radius: 2px; }
.markesband__ruta { position: absolute; top: -2px; bottom: -2px; left: var(--x); width: 1px; background: var(--viz-grid); }
.markesband__band { position: absolute; top: 2px; bottom: 2px; left: var(--fran); width: var(--bredd); min-width: 4px; background: var(--viz-1); border-radius: 2px; }
.markesband__band--b1 { background: var(--viz-1); }
.markesband__band--b2 { background: var(--viz-2); }
.markesband__band--b3 { background: var(--viz-3); }
.markesband__band--b4 { background: var(--viz-4); }
.markesband__band--b5 { background: var(--viz-5); }
.markesband__band--b6 { background: var(--muted); }
.markesband__median { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; margin-left: -1px; background: var(--ink); opacity: .8; }
.markesband__varde { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.markesband__varde small { display: block; margin-top: 3px; font-size: .64rem; color: var(--muted); }
.markesband > .chart__note { padding: 0 24px 22px; }
@media (max-width: 760px) {
  .markesband__plot { padding: 14px 16px 18px; }
  .markesband__rad { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; }
  .markesband__namn { grid-column: 1; grid-row: 1; }
  .markesband__varde { grid-column: 2; grid-row: 1; }
  .markesband__spar { grid-column: 1 / -1; grid-row: 2; }
  .markesband__rad--skala { display: none; }
  .markesband__ruta { display: none; }
  .markesband > .chart__note { padding-inline: 16px; }
}

/* ── Delbetyg för två cyklar i samma diagram ───────────────────────────
   En rad per delbetyg med två staplar, den ena cykeln i den övre banan och
   den andra i den undre. De två proven är gjorda av samma tidning på samma
   skala, så staplarna delar axel och rutnätet ritas inuti varje bana i stället
   för en gång över hela diagrammet: då möts en linje och en stapelkant på
   exakt sitt värde utan att någon kolumnbredd behöver mätas upp. Sifferkolumnen
   har samma två rader och samma mellanrum som banorna, så en siffra hamnar i
   höjd med sin egen stapel och ingen text behöver ligga inuti en stapel där den
   kan klippas vid smal skärm. */
.betyg { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.betyg__plot { padding: 18px 24px 22px; }
.betyg__rows { display: grid; gap: 1px; background: var(--line-soft); }
.betyg__rad { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 0; background: var(--void); }
.betyg__rad--skala { padding: 12px 0 4px; background: transparent; }
.betyg__namn { font-size: .84rem; line-height: 1.3; color: var(--ink); }
.betyg__skala { position: relative; display: block; height: 14px; }
.betyg__steg { position: absolute; left: var(--x); bottom: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.betyg__steg:first-child { transform: none; }
.betyg__steg--sista { transform: translateX(-100%); }
.betyg__spar { display: grid; gap: 4px; }
.betyg__falt { position: relative; height: 14px; background: var(--panel-2); border-radius: 2px; }
.betyg__ruta { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 1px; background: var(--viz-grid); }
.betyg__bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--bredd); min-width: 3px; border-radius: 2px; }
.betyg__bar--a { background: var(--viz-1); }
.betyg__bar--b { background: var(--viz-2); }
.betyg__varde { display: grid; gap: 4px; font-family: var(--font-mono); font-size: .7rem; text-align: right; white-space: nowrap; }
.betyg__tal { height: 14px; line-height: 14px; }
.betyg__tal--a { color: var(--viz-1); }
.betyg__tal--b { color: var(--viz-2); }
.betyg > .chart__note { padding: 0 24px 22px; }
@media (max-width: 760px) {
  .betyg__plot { padding: 16px; }
  .betyg__rad { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; }
  .betyg__namn { grid-column: 1; grid-row: 1; }
  .betyg__varde { grid-column: 2; grid-row: 1; }
  .betyg__spar { grid-column: 1 / -1; grid-row: 2; }
  .betyg__rad--skala { display: none; }
  .betyg__ruta { display: none; }
  .betyg > .chart__note { padding-inline: 16px; }
}

/* ── Diagram: en laddning räknad i arbetsdagar ─────────────────────────
   En rad per arbetsresa och två staplar i samma spår: den mörka är
   medianräckvidden i registret och den ljusa den kortaste räckvidd butikerna
   anger. Båda mäts i dagar mellan laddningarna, alltså räckvidden delad med
   två gånger resans längd, och därför står dagarna med en färgprick per stapel
   i stället för som ett enda tal: två tal i samma kolumn utan koppling till
   sin stapel går att läsa i fel ordning.
   Spåret är högre än en vanlig stapelrad eftersom två staplar ligger i det,
   och raden läggs om vid 760 px så att spåret får hela bredden. */
.arbetsdagar { margin: 30px 0; max-width: 980px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.arbetsdagar__plot { padding: 18px 24px 22px; }
.arbetsdagar__rows { display: grid; gap: 1px; background: var(--line-soft); }
.arbetsdagar__row { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) minmax(0,120px); gap: 8px 14px; align-items: center; padding: 14px 0; background: var(--void); }
.arbetsdagar__namn { font-size: .84rem; line-height: 1.3; color: var(--ink); }
.arbetsdagar__namn small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: var(--muted); }
.arbetsdagar__track { position: relative; height: 24px; background: var(--panel-2); border-radius: 2px; }
.arbetsdagar__bar { position: absolute; left: 0; width: var(--w); min-width: 3px; border-radius: 2px; }
.arbetsdagar__bar--median { top: 2px; height: 9px; background: var(--viz-1); }
.arbetsdagar__bar--kort { bottom: 2px; height: 9px; background: var(--viz-3); }
.arbetsdagar__varde { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); white-space: nowrap; }
.arbetsdagar__varde span { display: flex; align-items: center; gap: 6px; }
.arbetsdagar__varde span + span { margin-top: 4px; }
.arbetsdagar__varde i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.arbetsdagar__axis { display: grid; grid-template-columns: minmax(0,150px) minmax(0,1fr) minmax(0,120px); gap: 0 14px; margin-top: 12px; }
.arbetsdagar__axis-track { position: relative; height: 14px; font-family: var(--font-mono); font-size: .6rem; color: var(--muted); }
.arbetsdagar__axis-track span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.arbetsdagar__axis-track span:first-child { left: 0; transform: none; }
.arbetsdagar__axis-track span:last-child { right: 0; left: auto; transform: none; }
.arbetsdagar > .chart__note { padding: 0 24px 22px; }
@media (max-width: 760px) {
  .arbetsdagar__plot { padding: 16px; }
  .arbetsdagar__row { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: baseline; }
  .arbetsdagar__namn { grid-column: 1; grid-row: 1; }
  .arbetsdagar__varde { grid-column: 2; grid-row: 1; }
  .arbetsdagar__track { grid-column: 1 / -1; grid-row: 2; }
  .arbetsdagar__axis { display: none; }
  .arbetsdagar > .chart__note { padding-inline: 16px; }
}

/* ==========================================================================
   Verktyg: en rad per tal, med ett spår och en stapel
   Komponenten ritas av flera räknare: klipptiden för tre maskiner i guide 2
   och kabellängden i guide 3. Alla staplar i en räknare delar samma skala, så
   den längsta är 100 procent och de andra mäts mot den. Stapelns färg kommer
   från radens data-typ, och varje guide lägger till sina egna rader här under.
   ========================================================================== */
.raknerad__plot { margin: 0 0 22px; }

.raknerad__rows { display: grid; gap: 1px; background: var(--line-soft); }

.raknerad__row {
  display: grid;
  grid-template-columns: minmax(0, 165px) minmax(0, 1fr) minmax(0, 110px);
  gap: 8px 14px;
  align-items: center;
  padding: 14px 0;
  background: var(--void);
}

.raknerad__namn {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.raknerad__namn small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.raknerad__track {
  position: relative;
  display: block;
  height: 14px;
  background-color: var(--panel-2);
  background-image: linear-gradient(90deg, var(--viz-grid) 0 1px, transparent 1px);
  background-size: 25% 100%;
  border-radius: 2px;
  overflow: hidden;
}

.raknerad__bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 2px;
  transition: width 0.3s var(--ease);
}

.raknerad__row[data-typ="skjut"] .raknerad__bar { background-color: var(--viz-3); }
.raknerad__row[data-typ="ak"] .raknerad__bar { background-color: var(--viz-2); }
.raknerad__row[data-typ="robot"] .raknerad__bar { background-color: var(--viz-1); }
.raknerad__row[data-typ="slinga"] .raknerad__bar { background-color: var(--viz-2); }
.raknerad__row[data-typ="guide"] .raknerad__bar { background-color: var(--viz-1); }
.raknerad__row[data-typ="oar"] .raknerad__bar { background-color: var(--viz-3); }

.raknerad__varde {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.tool__class[data-level="robot"] { color: var(--signal-bright); }
.tool__class[data-level="kabel"] { color: var(--signal-bright); }
.tool__class[data-level="grov"] { color: var(--amber); }
.tool__class[data-level="nara"] { color: var(--amber); }

@media (max-width: 760px) {
  .raknerad__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
  }
  .raknerad__namn { grid-column: 1; grid-row: 1; }
  .raknerad__varde { grid-column: 2; grid-row: 1; text-align: right; }
  .raknerad__track { grid-column: 1 / -1; grid-row: 2; }
}