/* Räknesnurra: designtokens och delade komponenter för de fem mockuperna.
   Ett tema (per förslag) skriver bara över variablerna i :root. */

:root {
  color-scheme: light dark;
  /* Yta och text */
  --yta: #fff; --yta-2: #f6f7f9; --kant: #d9dde3;
  --text: #16191d; --text-2: #5b636d; --text-3: #8a929c;
  --accent: #0b5fff; --accent-text: #fff;
  --ok: #1a7f4b; --varning: #b7791f; --fel: #c62828;

  /* Typografi */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-rubrik: var(--font);
  --font-tal: var(--font);
  --t-1: 2.5rem; --t-2: 1.5rem; --t-3: 1.125rem; --t-4: 1rem; --t-5: .875rem; --t-6: .75rem;
  --lh: 1.45;

  /* Rytm, 4 px-skala */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem;

  /* Form */
  --radie: .5rem; --radie-liten: .25rem; --radie-pill: 999px;
  --skugga: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .04);
  --fokus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* Kontroller */
  --kontroll-h: 2.75rem;   /* 44 px touchmål */
  --slider-tumme: 1.5rem;
  --slider-spar: .375rem;

  /* Brytpunkter: 640px telefon/platta, 960px platta/liggande. Används i @media, kan inte vara variabler. */
  --max-form: 36rem; --max-sida: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root { --yta: #111417; --yta-2: #191d22; --kant: #2b3138; --text: #e8ebef; --text-2: #a3abb5; --text-3: #6c757f; }
}

/* Bas */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t-4)/var(--lh) var(--font); color: var(--text); background: var(--yta); }
h1, h2, h3 { font-family: var(--font-rubrik); line-height: 1.2; margin: 0 0 var(--s-3); }
h1 { font-size: var(--t-2); } h2 { font-size: var(--t-3); } h3 { font-size: var(--t-4); }
p { margin: 0 0 var(--s-4); }
small, .dampad { color: var(--text-2); font-size: var(--t-5); }
.tal { font-family: var(--font-tal); font-variant-numeric: tabular-nums; text-align: right; }
:focus-visible { outline: none; box-shadow: var(--fokus); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.knapp { min-height: var(--kontroll-h); padding: 0 var(--s-4); border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta); }
.knapp.primar { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.knapp.liten { min-height: 2rem; padding: 0 var(--s-3); font-size: var(--t-5); }
.fotnot { color: var(--text-3); font-size: var(--t-6); }

/* Segment: radiogrupp som knapprad. Markup: fieldset.segment > legend + div > label > input[type=radio] + span */
.segment { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; }
.segment legend { font-size: var(--t-5); color: var(--text-2); margin-bottom: var(--s-2); padding: 0; }
.segment > div { display: flex; border: 1px solid var(--kant); border-radius: var(--radie); overflow: hidden; }
.segment label { flex: 1; position: relative; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment span { display: grid; place-items: center; min-height: var(--kontroll-h); padding: 0 var(--s-2); font-size: var(--t-5); border-right: 1px solid var(--kant); text-align: center; }
.segment label:last-child span { border-right: 0; }
.segment input:checked + span { background: var(--accent); color: var(--accent-text); }
.segment input:focus-visible + span { box-shadow: inset var(--fokus); }

/* Reglage: slider + talfält som styr samma värde.
   Markup: div.reglage > label[for] + input[type=range][data-for=namn] + input[type=number][name=namn][id]
   Range har inget name (annars dubbla fält vid submit); schabloner.js synkar. */
.reglage { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "etikett tal" "spar tal"; column-gap: var(--s-3); align-items: center; min-height: var(--kontroll-h); padding: var(--s-2) 0; }
.reglage .etikett { grid-area: etikett; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-5); color: var(--text-2); }
.reglage label { font-size: var(--t-5); color: var(--text-2); }
.reglage label > * { margin-left: var(--s-2); }
.reglage input[type=range] { grid-area: spar; }
.reglage input[type=number] { grid-area: tal; width: 7.5rem; min-height: var(--kontroll-h); padding: 0 var(--s-2); border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta); text-align: right; font-family: var(--font-tal); font-variant-numeric: tabular-nums; }
.reglage .enhet { color: var(--text-3); font-size: var(--t-6); }
.reglage[data-andrad] label::after, .andel[data-andrad] > span:first-child::after, .segment[data-andrad] legend::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: var(--s-2); border-radius: 50%; background: var(--accent); }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--kontroll-h); margin: 0; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: var(--slider-spar); border-radius: var(--radie-pill); background: linear-gradient(to right, var(--accent) var(--fyll, 0%), var(--kant) var(--fyll, 0%)); }
input[type=range]::-moz-range-track { height: var(--slider-spar); border-radius: var(--radie-pill); background: var(--kant); }
input[type=range]::-moz-range-progress { height: var(--slider-spar); border-radius: var(--radie-pill); background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--slider-tumme); height: var(--slider-tumme); margin-top: calc((var(--slider-spar) - var(--slider-tumme)) / 2); border-radius: 50%; background: var(--yta); border: 2px solid var(--accent); box-shadow: var(--skugga); }
input[type=range]::-moz-range-thumb { width: var(--slider-tumme); height: var(--slider-tumme); border-radius: 50%; background: var(--yta); border: 2px solid var(--accent); box-shadow: var(--skugga); }
input[type=range]:focus-visible { box-shadow: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--fokus); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: var(--fokus); }

/* Andel: en slider, två etiketter. Markup: div.andel > span(b[data-andel=v]) + input[type=range][name] + span(b[data-andel=rest]) */
.andel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2); align-items: end; padding: var(--s-2) 0; }
.andel > span { font-size: var(--t-5); color: var(--text-2); }
.andel > span:last-of-type { text-align: right; }
.andel input { grid-column: 1 / -1; }
.andel b { color: var(--text); font-family: var(--font-tal); font-variant-numeric: tabular-nums; }

/* Källa: a.kalla, länk till regelns källa i Katalog. Visas bara där en URL finns; arkets status (verifierad/sekundär/antagen) är underhållets sak. */
.kalla { font-size: var(--t-6); color: var(--text-2); white-space: nowrap; text-decoration: none; border-bottom: 1px dotted var(--text-3); }
.kalla:hover, .kalla:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* Kvitto: tabell med kostnadsrader. Markup från schabloner.js kvittoHtml(). */
.kvitto { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kvitto td, .kvitto th { padding: var(--s-2) 0; border-bottom: 1px solid var(--kant); text-align: left; font-weight: normal; vertical-align: top; }
.kvitto .tal { font-family: var(--font-tal); white-space: nowrap; }
.kvitto tfoot th { border-top: 2px solid var(--text); border-bottom: 0; font-weight: 600; }
.kvitto .stapel { display: block; height: .25rem; background: var(--accent); border-radius: var(--radie-pill); margin-top: var(--s-1); width: var(--andel, 0%); }
.kvitto details { font-size: var(--t-6); color: var(--text-3); }
.kvitto summary { cursor: pointer; }

/* Total: stor siffra. Markup: div.total > b + span */
.total b { display: block; font-size: var(--t-1); font-family: var(--font-tal); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.1; }
.total span { color: var(--text-2); font-size: var(--t-5); }

/* Avancerat: hopfällt block */
details.avancerat { border-top: 1px solid var(--kant); padding: var(--s-2) 0; }
details.avancerat summary { cursor: pointer; min-height: var(--kontroll-h); display: flex; align-items: center; color: var(--text-2); font-size: var(--t-5); }

/* Dölj/visa utifrån val: ren CSS, ingen JS.
   .bara-bransle: bensin, diesel, laddhybrid. .bara-el: el, laddhybrid. .bara-hybrid: laddhybrid.
   .bara-gratis: checkbox laddning_jobb. .bara-lan / .bara-insats: schabloner.js sätter data-kontant / data-utan-insats på form. */
form:has([name=drivlina][value=el]:checked) .bara-bransle { display: none !important; }
form:not(:has([name=drivlina][value=el]:checked)):not(:has([name=drivlina][value=laddhybrid]:checked)) .bara-el { display: none !important; }
form:not(:has([name=drivlina][value=laddhybrid]:checked)) .bara-hybrid { display: none !important; }
form:not(:has([name=laddning_jobb]:checked)) .bara-gratis { display: none !important; }
form[data-kontant] .bara-lan { display: none !important; }
/* Läge (spår): .bara-forman visas för personalbil och AB, .bara-personalbil bara för personalbil */
form:has([name=lage][value=privat]:checked) .bara-forman { display: none !important; }
form:not(:has([name=lage][value=personalbil]:checked)) .bara-personalbil { display: none !important; }
form:not(:has([name=lage][value=leasing]:checked)) .bara-leasing { display: none !important; }
form:not(:has([name=lage][value=foretag]:checked)) .bara-foretag { display: none !important; }
.hero .fotnot .knapp { margin-left: var(--s-2); vertical-align: middle; }
form:has([name=lage][value=leasing]:checked) .ej-leasing { display: none !important; }
form[data-utan-insats] .bara-insats { display: none !important; }

/* Tillgänglighet */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Tema "Instrumentet" (design/forslag-2.html): mörkt som standard, ljust via data-tema ---------- */
:root {
  color-scheme: dark;
  --yta: #0e1116; --yta-2: #171b21; --kant: #2a313a;
  --text: #e6edf3; --text-2: #9aa5b1; --text-3: #8b96a2; /* text-3 ≥ 4.5:1 mot yta-2 (axe) */
  --accent: #22d3ee; --accent-text: #061217;
  --ok: #34d399; --varning: #fbbf24; --fel: #f87171;
  --font: "Inter", "Segoe UI Variable", "Helvetica Neue", Arial, system-ui, sans-serif;
  --radie: .75rem;
  --skugga: 0 1px 0 rgb(255 255 255 / .04) inset, 0 8px 24px rgb(0 0 0 / .35);
}
html[data-tema=ljus] {
  color-scheme: light;
  --yta: #f7f9fb; --yta-2: #fff; --kant: #d5dbe3;
  --text: #0f1419; --text-2: #4b5563; --text-3: #67717c;
  --accent: #0e7490; --accent-text: #fff; /* vit text ≥ 4.5:1 (axe) */
  --ok: #15803d; --varning: #a16207; --fel: #b91c1c;
  --skugga: 0 1px 2px rgb(0 0 0 / .05), 0 6px 18px rgb(0 0 0 / .06);
}
@property --fyll { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
input[type=range] { transition: --fyll .35s ease; }

html { scroll-behavior: smooth; }
body { background: var(--yta); overflow-x: hidden; }
.sida > *, form > *, .kortgrid > * { min-width: 0; max-width: 100%; }
.topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); max-width: var(--max-sida); margin: 0 auto; }
.topp h1 { font-size: var(--t-4); margin: 0; letter-spacing: 0; font-weight: 600; color: var(--text); }
.topp h1 a { color: inherit; text-decoration: none; } .topp h1 a:hover { color: var(--accent); }
.topp h1 span { color: var(--text-3); font-weight: 400; } /* adressen som logotyp: domänen tydlig, sökvägen dämpad */
.sida { max-width: var(--max-sida); margin: 0 auto; padding: 0 var(--s-4) var(--s-12); }

/* Hero */
.hero { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--yta) 88%, transparent); backdrop-filter: blur(12px); padding: var(--s-4) 0; border-bottom: 1px solid var(--kant); }
.hero .total b { font-size: clamp(2.5rem, 9vw, 4.5rem); font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.hero .total b::after { content: " kr"; font-size: .4em; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.hero .sekundar { display: flex; gap: var(--s-4); color: var(--text-2); font-size: var(--t-5); margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.fordelning { display: flex; height: .5rem; border-radius: var(--radie-pill); overflow: hidden; margin-top: var(--s-4); background: var(--kant); }
.fordelning span { background: color-mix(in srgb, var(--accent) calc(100% - var(--k) * 11%), var(--yta)); transition: flex .3s; }
.legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-4); font-size: var(--t-6); color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.legend li span { width: .6rem; height: .6rem; border-radius: 2px; background: color-mix(in srgb, var(--accent) calc(100% - var(--k) * 11%), var(--yta)); flex: none; }
.legend li b { margin-left: auto; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.hero .fotnot { margin: var(--s-3) 0 0; }
.hero .skillnad.plus { color: var(--ok); } .hero .skillnad.minus { color: var(--varning); }
/* Jämförelse: samma bil med de andra drivlinorna, kr/mån och skillnad mot den valda */
.jamfor { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--kant); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.jamfor li { display: grid; gap: 2px; min-width: 0; font-size: var(--t-6); color: var(--text-2); }
.jamfor b { font-size: var(--t-3); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.jamfor small { font-size: var(--t-6); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Fordonsskatt räknas från CO2 (R12): fältet är reservvärde och dämpas */
.fran-co2[data-beraknas] input { border-style: dashed; color: var(--text-2); }
.fran-co2[data-beraknas] label::before { content: "räknas från utsläppet · "; color: var(--text-3); font-size: var(--t-6); }
.segment.lage { margin-bottom: var(--s-4); }

/* Info: litet "i" i varje korts övre högra hörn (absolut, ovanför talfältet), öppnar en popover (native, ingen JS). */
.kort, .segment { position: relative; }
.info { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 1rem; height: 1rem; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--kant); background: var(--yta); color: var(--text-3); font: italic 700 .6rem Georgia, "Times New Roman", serif; line-height: 1; cursor: pointer; }
.info::after { content: ""; position: absolute; inset: -.85rem; } /* 44 px träffyta */
.info:hover, .info:focus-visible, .info:has(+ :popover-open) { border-color: var(--accent); color: var(--accent); }
.segment > .info, .segment legend .info { top: 0; right: 0; }
.kort.kryss label, .andel > span:first-child { padding-right: 1.5rem; } /* texten går inte in under i:et */
.hjalp[popover] { position: fixed; inset: auto; left: 50%; bottom: max(var(--s-4), env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: var(--s-4) var(--s-6); border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta-2); color: var(--text); box-shadow: var(--skugga); font-size: var(--t-5); line-height: 1.5; }
.hjalp h3 { margin: 0 0 var(--s-2); font-size: var(--t-4); }
.hjalp p { margin: 0; color: var(--text-2); }
.hjalp .kalla { display: inline-block; margin-top: var(--s-3); }
.hjalp::backdrop { background: rgb(0 0 0 / .15); }
@media (min-width: 960px) { .hjalp[popover] { bottom: auto; top: 50%; transform: translate(-50%, -50%); } }
@supports not selector(:popover-open) { .info, .hjalp { display: none; } }
.segment input:disabled + span { color: var(--text-3); cursor: default; }
/* Krympt resultatrad: sticky under 960 px, fastnar när heron scrollat bort */
.mini { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-4); width: 100%; padding: var(--s-2) 0; margin: 0; border: 0; border-bottom: 1px solid var(--kant); border-radius: 0; background: color-mix(in srgb, var(--yta) 88%, transparent); backdrop-filter: blur(12px); color: inherit; font: inherit; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.mini:hover span, .mini:focus-visible span { color: var(--accent); }
.mini b { font-size: var(--t-2); font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.mini b::after { content: " kr/mån"; font-size: var(--t-5); font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.mini span { color: var(--text-2); font-size: var(--t-5); }

/* Schabloner: horisontellt scrollbar kortrad med länkar (serverrenderat förval) */
.schabloner { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s-4) 0 var(--s-2); scrollbar-width: thin; }
.schablon { flex: 0 0 11rem; scroll-snap-align: start; text-align: left; padding: var(--s-3); border: 1px solid var(--kant); border-radius: var(--radie); background: var(--yta-2); min-height: var(--kontroll-h); display: grid; gap: var(--s-1); color: inherit; text-decoration: none; }
.schablon b { font-weight: 600; }
.schablon small { color: var(--text-2); }
.schablon[aria-current=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.status { display: flex; align-items: center; gap: var(--s-3); min-height: var(--kontroll-h); font-size: var(--t-5); color: var(--text-2); }
.status .knapp { margin-left: auto; display: inline-flex; align-items: center; text-decoration: none; }

/* Reglagekort */
.grupp { margin-top: var(--s-6); }
.grupp h2 { font-size: var(--t-6); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.kortgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--s-3); }
.kort { width: 100%; min-width: 0; background: var(--yta-2); border: 1px solid var(--kant); border-radius: var(--radie); padding: var(--s-3) var(--s-4); box-shadow: var(--skugga); }
.kort.reglage { min-height: 6.5rem; grid-template-columns: minmax(0, 1fr) auto; }
.kort.reglage label { display: block; line-height: 1.3; overflow-wrap: anywhere; }
.kort.reglage input[type=number] { background: var(--yta); width: 6.5rem; }
.kort.andel { grid-column: 1 / -1; min-height: 6.5rem; align-content: end; }
.kort.kryss { display: flex; align-items: center; gap: var(--s-3); min-height: var(--kontroll-h); font-size: var(--t-5); color: var(--text-2); }
.kort.kryss label { display: flex; align-items: center; gap: var(--s-3); flex: 1; cursor: pointer; }
.kort.kryss input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.segment { grid-column: 1 / -1; }
.segment > div { background: var(--yta-2); }
.snabbval { display: flex; gap: var(--s-2); grid-column: 1 / -1; }
.snabbval .knapp { flex: 1; background: var(--yta-2); }
details.avancerat { margin-top: var(--s-6); border: 1px solid var(--kant); border-radius: var(--radie); padding: 0 var(--s-4); background: var(--yta-2); }
details.avancerat .kortgrid { padding-bottom: var(--s-4); }
details.avancerat .kort { background: var(--yta); }

/* Telefon och stående platta: heron i flödet, bara .mini är sticky */
@media (max-width: 959px) {
  .hero { position: static; background: transparent; backdrop-filter: none; }
}
/* Liggande/dator: hero vänster sticky, kort höger */
@media (min-width: 960px) {
  .sida { display: grid; grid-template-columns: 22rem 1fr; gap: var(--s-8); align-items: start; }
  .hero { top: var(--s-4); background: var(--yta-2); border: 1px solid var(--kant); border-radius: var(--radie); padding: var(--s-6); box-shadow: var(--skugga); }
  .hero .sekundar { flex-direction: column; gap: var(--s-1); }
  .legend { grid-template-columns: 1fr; }
  .mini { display: none; }
  form { min-width: 0; }
}