:root{
    color-scheme: light;   /* utan denna kan webbläsare i systemmörkt läge ändå
                               omstila sökfält/scrollbars på egen hand - se
                               HANDOVER om mörkt-läge-borttaget 2026-07-31. */
    --bg:#F4F6F8; --surface:#FFFFFF; --ink:#16232E; --muted:#5C6B78;
    --line:#E4E9EF; --line-strong:#D3DAE2;
    --accent:#0E8F7E; --accent-ink:#0A6E60; --accent-wash:#E4F2EF;
    --w-Werlabs:#3C5488; --w-Testmottagningen:#E64B35;
    --w-Vital:#8491B4; --w-Blodkollen:#DC0000; --w-Medisera:#00A087; --w-Kry:#7E6148;
    --w-Halsoprover:#4DBBD5; --w-Testum:#F39B7F; --w-SvenskProvtagning:#91D1C2; --w-Elfcare:#B09C85;
    --tab-bg:#EAEEF2; --placeholder:#9AA6B1;
    --radius:14px;
    --shadow:0 1px 2px rgba(20,35,46,.05), 0 10px 30px rgba(20,35,46,.06);
    --mono:"Inter",system-ui,sans-serif;

    /* NAV-/FOTBAND - samma fasta mörkblå som landningssidans hero/footer
       (index.html, --hero-bg), så de två sidorna läses som en smörgås:
       band/innehåll/band på båda. Egna variabler, inte kopplade till --bg/
       --accent, av samma skäl som på landningssidan. */
    --band-bg:#28425F; --band-fg:#FFFFFF; --band-muted:#C7D3D8; --band-accent:#8FE0D2;
    --band-surface:rgba(255,255,255,.07); --band-surface-strong:rgba(255,255,255,.13);
    --band-border:rgba(255,255,255,.28);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; height:100%}
  /* Sticky footer, samma mönster/bugg som landningssidan (användaren,
     2026-07-31): utan detta syns --bg under fotbandet vid utzoomning eller
     kort innehåll (t.ex. tom sökning). body blir en flex-kolumn, fotbandet
     får margin-top:auto och trycks mot skärmkanten. */
  body{
    margin:0; background:var(--bg); color:var(--ink);
    min-height:100%; display:flex; flex-direction:column;
    font-family:"Inter",system-ui,-apple-system,sans-serif;
    line-height:1.5; font-size:16px; -webkit-font-smoothing:antialiased;
    transition:background-color .25s ease, color .25s ease;
    /* Skyddsnät, INTE lösningen - grundorsaken är fixad på .wrap (se dess
       kommentar). Det här bara förhindrar att en framtida, ännu inte upptäckt
       bred flex-child gör HELA sidan dragbar i sidled i stället för att bara
       synas som en lokal overflow. */
    overflow-x:clip;
  }
  /* width:100% är INTE kosmetiskt - .wrap:s horisontella margin:auto stänger
     av flexbox-stretch (body är display:flex; flex-direction:column, se
     sticky-footer-kommentaren ovan), så utan explicit width faller .wrap
     tillbaka på fit-content och stretchar sig efter sitt bredaste barns
     max-content-bredd i stället för föräldrans bredd - i praktiken canvasens
     intrinsic width (Chart.js sätter width/height-attributen till CSS-bredd
     * devicePixelRatio för skärpa, oberoende av canvasens egen styling).
     Resultatet: body scrollar i sidled på mobil så fort ett resultat med
     diagram renderas (upptäckt 2026-08-01, se HANDOVER). */
  /* padding-bottom: utan den slutar innehållet exakt där fotbandet börjar
     (0px mellanrum, mätt) - sista raden/knappen ligger i praktiken ovanpå
     bandkanten. Samma 40px som fotbandets egen padding-bottom nedan, för
     symmetri över hela övergången. */
  .wrap{width:100%; max-width:860px; margin:0 auto; padding:0 20px 40px}
  .panel,.search input,.chip,.ctl,.tabs,.row,.rows{
    transition:background-color .25s ease, border-color .25s ease, color .25s ease}

  /* ============================================================
     TOPPBAND - sticky, samma mörkblå som landningssidans hero. Ordmärke
     (länk till "/", startsidan) + de tre sidlänkarna (se .bandtabs) +
     språkväljaren. Ersätter gamla .topbar/header .brand, som låg löst i
     innehållsytan. */
  .topband{position:sticky; top:0; z-index:10; background:var(--band-bg)}
  .topband-inner{max-width:860px; margin:0 auto; padding:0 20px;
    display:flex; align-items:center; gap:20px; min-height:52px; flex-wrap:wrap}
  .band-wordmark{font-family:"Fraunces",serif; font-weight:600; font-size:17px;
    letter-spacing:-.01em; color:var(--band-fg); text-decoration:none; flex:0 0 auto;
    padding:10px 0}
  .band-wordmark:hover{text-decoration:underline}
  .band-wordmark:focus-visible{outline:2px solid var(--band-accent); outline-offset:2px; border-radius:4px}
  /* Riktiga sidlänkar sedan treningsom-till-egna-sidor (2026-08-01) - var
     JS-drivna <button role="tab"> som växlade läge i samma dokument. Aktiv
     sida markeras nu statiskt i varje sidas egen HTML (aria-current="page"),
     inte längre av JS - se hur resp. /prisjamforelse|korg|paket//index.html
     sätter aria-current på sin egen länk. */
  .bandtabs{display:flex; gap:2px; flex:1 1 auto; flex-wrap:wrap}
  .bandtabs a{font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
    text-decoration:none; border:none; background:transparent; color:var(--band-muted); padding:9px 14px;
    border-radius:8px; margin:8px 0}
  .bandtabs a:hover{color:var(--band-fg)}
  .bandtabs a[aria-current="page"]{background:var(--band-fg); color:var(--band-bg)}
  .bandtabs a:focus-visible{outline:2px solid var(--band-accent); outline-offset:2px}
  .topband .ctl{font-family:var(--mono); font-size:12.5px; cursor:pointer; border-radius:9px;
    padding:7px 10px; flex:0 0 auto;
    background:var(--band-surface); color:var(--band-fg); border:1px solid var(--band-border)}
  .topband .ctl:hover{border-color:var(--band-fg)}
  /* Bugg (användaren): den öppna dropdown-LISTAN ärver inte bandets mörka
     bakgrund - webbläsaren ritar sin egen (ljusa) popup-yta, men option-
     texten ärvde fortfarande --band-fg (vitt) från <select> ovan = vit text
     på vit botten, osynlig utom det markerade alternativet. Sätt färgerna
     explicit på <option> så popupen alltid blir läsbar. */
  .topband .ctl option{color:var(--ink); background:var(--surface)}
  .topband .ctl:focus-visible{outline:2px solid var(--band-accent); outline-offset:2px}
  @media (max-width:560px){
    /* Ordmärke + språkväljare delar rad 1 (ctl flyttad hit med order,
       ligger kvar sist i DOM-ordningen för skärmläsare/tabbning) - lämnar
       hela rad 2 åt .bandtabs, som annars fick tre rader på smala skärmar
       (användaren, 2026-08-01). */
    .topband-inner{gap:2px 10px; min-height:0; padding-top:8px; padding-bottom:8px}
    .band-wordmark{font-size:14px; padding:4px 0; order:1}
    .topband .ctl{order:2; margin-left:auto; font-size:11px; padding:5px 8px}
    .bandtabs{order:3; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto;
      -ms-overflow-style:none; scrollbar-width:none}
    .bandtabs::-webkit-scrollbar{display:none}
    .bandtabs a{padding:6px 8px; font-size:11px; margin:2px 0; white-space:nowrap; flex:0 0 auto}
    /* Dropdown krymper, sifferfältet behöver bara rymma ett par tecken - se
       .rabatt-controls ovan för radbrytningen mellan etikett och grupp. Snålare
       gap/bredd här än på desktop så enheten (%/kr) aldrig trycks ut ur bilden. */
    .rabatt-row, .rabatt-controls{gap:6px}
    .rabatt-controls select{max-width:30vw}
    .rabatt-row input{width:48px}
  }

  /* header - bara underrubriken kvar (beskriver aktuellt läge). Ordmärket
     ("Blodprovspriser") flyttade upp i .topband, se .band-wordmark. */
  header{padding:16px 0 6px}
  .tagline{color:var(--muted); font-size:14.5px; margin:0; max-width:62ch; line-height:1.55}

  /* search hero */
  .hero{padding:26px 0 8px}
  .eyebrow{font-family:"Fraunces",serif; font-weight:500; font-style:italic;
    color:var(--accent-ink); font-size:15px; margin:0 0 10px}
  .search{position:relative}
  .search input{
    width:100%; padding:16px 18px; font-size:18px; font-family:inherit; color:var(--ink);
    background:var(--surface); border:1.5px solid var(--line-strong);
    border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .search input::placeholder{color:var(--placeholder)}
  .search input:focus{outline:none; border-color:var(--accent)}
  .rabatter{display:flex; flex-direction:column; gap:8px; margin-top:14px}
  .rabatt-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--muted)}
  .rabatt-row label{flex:0 0 auto; min-width:80px}
  /* Dropdown + sifferfält + enhet hör ihop och ska aldrig brytas isär sinsemellan
     (användaren, 2026-08-01) - .rabatt-controls är en egen flex-enhet så det bara
     är HELA gruppen som kan radbryta bort från etiketten, aldrig internt. */
  .rabatt-controls{display:flex; align-items:center; gap:8px; min-width:0}
  .rabatt-row select, .rabatt-row input{
    font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--surface);
    border:1px solid var(--line-strong); border-radius:8px; padding:6px 8px}
  .rabatt-row select{min-width:0}
  .rabatt-row input{width:64px; flex:0 0 auto}
  .rabatt-row select:focus, .rabatt-row input:focus{outline:none; border-color:var(--accent)}
  .rabatt-unit{color:var(--muted); flex:0 0 auto}
  .chips-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); margin:0}
  .chips-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
    gap:8px 16px; margin:22px 0 10px}
  /* Fällknapparna ligger i en egen, stillastående rad bredvid etiketten i
     stället för att flyta med bland markörknapparna – annars hamnar t.ex.
     "Visa färre" sist efter 144 utfällda knappar och blir svår att hitta
     tillbaka till. */
  .chips-toggles{display:flex; flex-wrap:wrap; gap:8px}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .chip{
    font-size:13.5px; font-family:inherit; color:var(--muted); cursor:pointer;
    background:var(--surface); border:1px solid var(--line); border-radius:999px;
    padding:6px 13px;
  }
  .chip:hover{border-color:var(--accent); color:var(--accent-ink)}
  .chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .chip.more{color:var(--accent-ink); border-color:var(--accent); font-weight:600}
  .chip.vald{opacity:.4; cursor:default; text-decoration:line-through}
  .chips-rare{flex:1 1 100%; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
    padding-top:14px; border-top:1px solid var(--line)}
  .chips-rare .chips-label{flex:1 1 100%; margin:0 0 2px}

  /* result */
  #result{margin:30px 0 10px; display:none}
  #result.on{display:block}
  .verdict{margin-bottom:20px}
  .testname{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(28px,6vw,40px);
    letter-spacing:-.02em; line-height:1.05; margin:0 0 12px}
  .headline{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:17px}
  .headline .who{font-weight:600}
  .headline .whos{display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap}
  .headline .lead{white-space:nowrap}
  .headline .price{font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent-ink)}
  /* Grönt sparat för just kronbeloppet (2026-07-31, användaren) - meningen
     runt om ("– du sparar X mot dyrast (Y)") är dämpad text, bara <b>
     (redan i save()-mallen, se TEXT) får den mättade accentfärgen. */
  .save{color:var(--muted); font-size:14.5px}
  .save b{color:var(--accent-ink); font-weight:600; font-variant-numeric:tabular-nums}

  /* tabs */
  .tabs{display:inline-flex; gap:2px; background:var(--tab-bg); padding:3px;
    border-radius:11px; margin:22px 0 18px}
  .tabs button{
    font-family:inherit; font-size:14px; font-weight:500; color:var(--muted);
    border:none; background:transparent; padding:8px 16px; border-radius:8px; cursor:pointer;
  }
  .tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(20,35,46,.10)}
  .tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* Ingen ram (2026-07-31, användaren): sidbakgrunden --bg är redan ett
     ljust grå (#F4F6F8, samma ton som landningssidans mittsektion) - det
     vita kortet får sin definition gratis från den skillnaden + skuggan,
     ramen bara dubblerade jobbet och gjorde knappt sin egen nytta. */
  .panel{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
  .chartbox{position:relative; height:320px}
  .note{color:var(--muted); font-size:13.5px; margin:14px 2px 0}
  /* Diskret jämförelsetal - inget pris man kan köpa, bara vad provet kostar
     för vården. Ska aldrig konkurrera visuellt med "Billigast just nu". */
  .refpris{color:var(--muted); font-size:12.5px; margin:6px 2px 0}

  /* provider list */
  .rows{margin:18px 0 0; border-top:1px solid var(--line)}
  .rowwrap{border-bottom:1px solid var(--line)}
  .rowwrap:last-child{border-bottom:none}
  .row{display:flex; align-items:center; gap:13px; padding:13px 2px 5px;
    text-decoration:none; color:inherit}
  details.rowextra{margin:0 0 10px 23px}
  /* Neutral länkfärg + understrykning i stället för grönt (2026-07-31,
     användaren) - grönt reserverat för primärknappen och "Billigast"-taggen. */
  .row:hover .rowname{color:var(--ink); text-decoration:underline}
  .row:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
  .swatch{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
  .rowname{font-weight:500; flex:1 1 auto}
  .tag{font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--accent-ink);
    background:var(--accent-wash); padding:2px 8px; border-radius:999px}
  .rowprice{font-variant-numeric:tabular-nums; font-weight:600; font-size:16.5px}
  .arrow{color:var(--line-strong); flex:0 0 auto}


  /* Lägesväxlaren (Prisjämförelse/Bygg en korg/Paketjämförelse) flyttade
     upp i .topband (id:na m-sok/m-korg/m-paket är oförändrade, se
     .bandtabs ovan) - ingen egen .modes-stil kvar här längre. */

  /* --- korg --- */
  .sugg{list-style:none; margin:8px 0 0; padding:0; background:var(--surface);
    border:1px solid var(--line); border-radius:10px; overflow:hidden;
    box-shadow:var(--shadow); max-height:260px; overflow-y:auto}
  .sugg li{padding:10px 14px; cursor:pointer; font-size:14.5px; display:flex;
    justify-content:space-between; gap:12px; align-items:center}
  .sugg li:hover, .sugg li[aria-selected="true"]{background:var(--accent-wash); color:var(--accent-ink)}
  .sugg li .n{color:var(--muted); font-size:12.5px}
  .tag-pkg{font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--muted);
    background:var(--tab-bg); padding:2px 8px; border-radius:999px; white-space:nowrap}

  .basket{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; min-height:4px}
  .pick{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
    color:var(--accent-ink); background:var(--accent-wash); border:1px solid var(--accent);
    border-radius:999px; padding:6px 8px 6px 13px}
  .pick button{border:none; background:transparent; color:inherit; cursor:pointer;
    font-size:15px; line-height:1; padding:0 4px}
  .kbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px}
  .btn{font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
    background:var(--accent); color:#fff; border:none; border-radius:10px; padding:11px 20px}
  .btn[disabled]{opacity:.45; cursor:not-allowed}
  .btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  .plan{margin-top:22px}
  .plan h2{font-family:"Fraunces",serif; font-weight:600; font-size:20px; margin:0 0 4px}
  .plan .sub{color:var(--muted); font-size:13.5px; margin:0 0 14px}
  .total{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px}
  .total .sum{font-family:"Fraunces",serif; font-weight:600; font-size:30px;
    font-variant-numeric:tabular-nums}
  .total .vs{color:var(--muted); font-size:14px}
  .total .vs b{color:var(--accent-ink); font-variant-numeric:tabular-nums}
  .altlist{margin-top:8px}
  .altrow{display:flex; gap:10px; padding:7px 2px; border-bottom:1px solid var(--line);
    align-items:center; text-decoration:none; color:inherit; font-size:13px}
  .altrow:last-child{border-bottom:none}
  .altrow .sw{width:8px; height:8px; border-radius:2px; flex:0 0 auto}
  .altrow .mid{flex:1 1 auto; min-width:0}
  .altrow .who{color:var(--muted)}
  .altrow .pr{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
  /* .altrow återanvänd som klickbar <button> för paketbläddraren (se
     visaPaketLista()) – nollställ knapp-defaults, layouten kommer från
     .altrow ovan. */
  button.altrow{width:100%; background:none; border:none; font:inherit; text-align:left; cursor:pointer}
  button.altrow:hover{background:var(--accent-wash)}
  .altrow .n{color:var(--muted); font-size:12px}
  .pr .pkg-billigare{color:var(--accent-ink); font-weight:600}
  .buyrow{border-bottom:1px solid var(--line)}
  .buyrow:last-child{border-bottom:none}
  .buy{display:flex; gap:13px; padding:14px 2px 6px;
    align-items:flex-start; text-decoration:none; color:inherit}
  .buy .mid{flex:1 1 auto; min-width:0}
  .buy .nm{font-weight:600}
  .buy .who{color:var(--muted); font-size:13px}
  /* Aktörslänk (kub + namn) – används både för ett ensamt "billigast" och
     för "Delad billigast" (se aktorLankHtml()). Ljus/mörk kontrastfärg
     (--ink) i stället för aktörens egen färg eller grå text, så namnet
     alltid syns tydligt oavsett tema. */
  .buy .aktorlink{display:inline-flex; align-items:center; gap:4px;
    font-weight:600; color:var(--ink); text-decoration:none}
  .buy .aktorlink:hover, .buy .aktorlink:focus-visible{text-decoration:underline}
  .buy .aktorlink .aktorsw{width:8px; height:8px; aspect-ratio:1; border-radius:2px; flex:0 0 auto}
  .buy .cov{font-size:13px; color:var(--muted); margin-top:4px; line-height:1.45}
  .buy .cov b{color:var(--ink); font-weight:500}
  /* Samma stil som .buy .cov, för paketets EGEN fulla markörlista i
     paketjämförelsens rubrikblock (visaPaketDetalj) – inte nästlad i .buy
     så egen selector krävs. */
  .pkg-cov{font-size:13px; color:var(--muted); margin:4px 0 14px; line-height:1.45}
  .pkg-cov b{color:var(--ink); font-weight:500}
  /* Länken till paketets egen sida i visaPaketDetalj – neutral färg +
     understrykning (2026-07-31, användaren), inte grönt (reserverat för
     primärknappen och "Billigast"-taggen) och inte standardlänkens
     skrikiga blått. */
  .pkg-link{color:var(--ink); text-decoration:underline}
  .pkg-link:hover, .pkg-link:focus-visible{text-decoration:underline}
  /* Dämpad i stället för grön (2026-07-31, användaren): kSparEn/kSparSpann
     (TEXT) skriver inte in ett eget <b> runt kronbeloppet som save() gör,
     så det finns ingen textdel att isolera grönt på utan att röra den
     skyddade besparingstexten - hela raden blir i stället neutral, det
     andra av de två alternativ användaren själv gav ("dämpad grön ELLER
     neutral text"). */
  .buy .save{font-size:13px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums}
  /* Egen "Visa N dyrare alternativ"-knapp per kategori (enskilt/paket),
     inline direkt efter respektive besparingsmening i stället för en
     gemensam knapp längre ner på raden. */
  .buy .save details{display:inline}
  .buy .save summary{display:inline; cursor:pointer; font-weight:600; list-style:none;
    margin-left:2px; color:var(--muted)}
  .buy .save summary::-webkit-details-marker{display:none}
  .buy .save summary::before{content:"▸ "; font-size:10px}
  .buy .save details[open] summary::before{content:"▾ "}
  .buy .save summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
  .buy .save .altlist{display:block; margin-top:6px; margin-bottom:4px; color:var(--muted)}
  .buy .tip{font-size:13px; color:var(--accent-ink); margin-top:6px; background:var(--accent-wash);
    border-radius:6px; padding:5px 9px; display:inline-block; line-height:1.4}
  details.extra{margin:0 0 12px 33px}
  details.extra summary{color:var(--accent-ink); font-size:12.5px; cursor:pointer; list-style:none}
  details.extra summary::-webkit-details-marker{display:none}
  details.extra summary::before{content:"▸ "; font-size:10px}
  details.extra[open] summary::before{content:"▾ "}
  details.extra summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
  .extralist{margin-top:4px; font-size:12.5px; color:var(--muted)}
  /* Paketjämförelsens köplista (komblistaHtml) – döljer HELA raduppsätt-
     ningen bakom en knapp i stället för att dumpa allt direkt under "Samma
     N markörer går att få för X kr"-meningen. Samma ▸/▾-mönster som
     details.extra, men lite tyngre text eftersom det här är sidans
     huvudsakliga "se detaljer"-handling, inte en liten inline-detalj. */
  details.komb{margin-top:14px}
  details.komb summary{color:var(--accent-ink); cursor:pointer; list-style:none;
    font-weight:600; font-size:14.5px}
  details.komb summary::-webkit-details-marker{display:none}
  details.komb summary::before{content:"▸ "; font-size:11px}
  details.komb[open] summary::before{content:"▾ "}
  details.komb summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
  details.komb .plan{margin-top:14px}
  /* Aktörsgrupperna i paketbläddraren (visaPaketLista) – hopfällda som
     standard, samma ▸/▾-mönster som details.extra men lite tyngre eftersom
     det här är toppnivå-navigering, inte en inline-detalj. */
  details.paket-grupp{margin:0 0 4px}
  details.paket-grupp summary{cursor:pointer; list-style:none; padding:10px 2px;
    font-weight:600; border-bottom:1px solid var(--line)}
  details.paket-grupp summary::-webkit-details-marker{display:none}
  details.paket-grupp summary::before{content:"▸ "; font-size:11px}
  details.paket-grupp[open] summary::before{content:"▾ "}
  details.paket-grupp summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
  details.paket-grupp summary .n{font-weight:400; color:var(--muted)}
  .buy .pr{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
  .warn{background:var(--accent-wash); border:1px solid var(--accent);
    border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:14px}

  /* Lyfter enaktörs-blocket visuellt när prisskillnaden mot "Billigast
     totalt" är liten (<150 kr, se raknaUt()) - det är precis det intervallet
     där en okänd provtagningsavgift skulle kunna vända vilket alternativ som
     faktiskt är billigast i verkligheten. */
  .plan-highlight{background:var(--accent-wash); border:1px solid var(--accent);
    border-radius:12px; padding:16px 18px 4px; margin-top:22px}
  .plan-highlight .plan{margin-top:0}

  .empty{color:var(--muted); text-align:center; padding:46px 20px; font-size:15.5px}

  /* Fotband - exakt samma mörkblå som toppbandet/landningssidan (samma
     smörgås-princip, se .topband). margin-top:auto trycker det mot
     skärmkanten på korta sidor, se sticky-footer-kommentaren vid body{}. */
  footer{background:var(--band-bg); margin-top:auto}
  footer .wrap{color:var(--band-muted); font-size:13px; line-height:1.6; padding:40px 20px}
  footer a{color:var(--band-accent)}

  @media (max-width:560px){
    .chartbox{height:270px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}