/* Kostnadsröntgen (/kostnadsrontgen/). Bygger på site.css (tokens, header, sidfot, kort, fält).
   Här finns bara det som är verktygets eget. site.css ändras inte härifrån.
   Typskala som på resten av sajten: etikett 12 (mono), bildtext 13, liten 15, bröd 17, ingress 20;
   vikterna 400, 600 och 700 (mono 500 i etiketter och tal).
   Radlängder för löptext i em, inte ch: i Plus Jakarta Sans är 1ch (siffran 0) cirka 0,73 em, medan ett
   genomsnittligt tecken i sajtens svenska text är cirka 0,47 em. 34em ger ungefär 70 tecken per rad. */

/* Bara ljust läge: webbläsarens tvingade mörka läge (till exempel Chrome på Android) ska inte göra om
   korten, fälten och listorna till grått. Samma som meta-raden i sidan. */
:root { color-scheme: only light; }
.kr-sida .input, .kr-sida .select { color-scheme: only light; }

/* Menyn: sidans egen länk får en mörkare markering, så att den vita texten klarar 4,5:1 mot fältet. */
.kr-sida .site-nav a[aria-current="page"] { background: rgba(11,31,51,.28); }
.kr-sida .site-nav a[aria-current="page"]:hover { background: rgba(11,31,51,.36); }

/* ---------- Överdel: text till vänster, formuläret till höger ----------
   Samma spaltlinje som startsidan (.kr-hero-grid delar reglerna med .hero-grid i site.css):
   introt i kolumn 1–7, formuläret i 8–12, 6 + 6 mellan 1024 och 1279, staplat under 1024.
   Från 768 px fyller överdelen första skärmen, så att inget som syns flyttas när resultatet ritas
   (inget layoutskifte när sidan öppnas från en länk med val). Innehållet står överst, som på /boka/:
   formuläret börjar alltid 116 px (128 px under 1024) från sidans topp, och det som blir över av
   skärmhöjden hamnar under överdelen. */
.kr-hero { position: relative; padding: 104px 0 var(--stack-l); }
/* Utan resultat följer Vanliga frågor direkt: då samma luft som mellan sektionerna. Med resultat står
   sifferkortet tätt under formuläret (--stack-l). */
.kr-hero:has(+ .kr-resultat[hidden]) { padding-bottom: var(--section-y); }
@media (min-width: 640px) { .kr-hero { padding-top: 128px; } }
@media (min-width: 768px) { .kr-hero { min-height: 100vh; min-height: 100svh; display: grid; align-content: start; } }
@media (min-width: 1024px) { .kr-hero { padding-top: 116px; } }
.kr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 360px at 78% 42%, rgba(159,216,245,.13), transparent 70%);
}
.kr-intro h1 {
  margin-top: var(--stack-s); font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.035em; max-width: 13ch;
}
.kr-intro .lead { margin-top: var(--stack-m); font-size: var(--t-lead); line-height: 1.6; max-width: 26em; text-wrap: pretty; }
.kr-facts { display: grid; gap: 10px; margin-top: var(--stack-m); list-style: none; }
@media (max-width: 1023px) { .kr-facts { display: none; } }
.kr-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: var(--t-small); line-height: 1.5; font-weight: 400; color: #fff; }
.kr-facts .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--blue-300); stroke-width: 2.25; }

.kr-form-col { min-width: 0; }
/* Land och ton två och två mellan 640 och 1023 px. I den smalare formulärspalten från 1024 px under varandra. */
.kr-form .fields-2 { gap: 20px var(--col-gap); }
@media (min-width: 1024px) { .kr-form .fields-2 { grid-template-columns: minmax(0, 1fr); } }
.kr-form .select:disabled { color: var(--ink-3); background-color: #F4F7FA; cursor: progress; }
.form-card .kr-submit { margin-top: var(--stack-m); }
/* Prisraden: vanlig text, inte mono. Platsen hålls från början så att inget hoppar. */
.kr-prisrad {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-light); min-height: calc(16px + 2 * 13px * 1.55);
  font: 400 var(--t-caption)/1.55 var(--font-sans); color: var(--ink-2); visibility: hidden;
}
.kr-prisrad.is-ready { visibility: visible; }
.kr-prisrad sub, .kr-sida .card-data .basis sub, .kr-step sub { font-size: .75em; line-height: 0; }
.kr-form .form-status { margin-top: 14px; }
/* Kvitto när ett ändrat val har räknats om på plats (resultatet står längre ner) */
.kr-form-note { margin-top: 12px; font-size: var(--t-caption); line-height: 1.5; color: var(--ink-2); }
.kr-form-note:empty { display: none; }
.kr-noscript p { font-size: var(--t-body); line-height: 1.6; }

/* ---------- Resultatet ---------- */
/* html har scroll-padding-top 96px (site.css), så resultatet landar strax under headern utan egen marginal. */
.kr-resultat { padding: 0 0 var(--section-y); }
@media (min-width: 768px) { .kr-resultat { scroll-margin-top: -20px; } }
/* Samma hårlinje före Vanliga frågor som mellan sektionerna i site.css (.section + .section::before) */
.kr-resultat:not([hidden]) + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: min(var(--container), 100% - 2 * var(--gutter)); height: 1px; background: rgba(255,255,255,.16);
}
.kr-stack { display: grid; gap: var(--stack-m); }
/* Objektspaltens bredd på sidan (6 av 12 kolumner mellan 1024 och 1279 px, 5 av 12 från 1280 px), räknad
   från containerns bredd (cqw). Panelerna nedan får sin högerspalt lika bred minus innermått och kant, så
   att den börjar på samma spaltlinje som formuläret i överdelen. */
@media (min-width: 1024px) {
  .kr-stack { container-type: inline-size; }
  .kr-stack > * { --objekt: calc((100cqw - var(--col-gap)) / 2); }
}
@media (min-width: 1280px) {
  .kr-stack > * { --objekt: calc((100cqw - 11 * var(--col-gap)) * 5 / 12 + 4 * var(--col-gap)); }
}

/* Det mörka sifferkortet */
.card-data.kr-summary { padding: var(--pad-panel); }
.kr-summary h2.label { margin: 0; }
.kr-summary .kr-subject {
  margin-top: 10px; font: 600 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.4 var(--font-sans);
  letter-spacing: -.01em; color: #fff; max-width: 64ch; text-wrap: pretty;
}
.kr-kpis { display: grid; margin-top: 20px; }
.kr-kpis > div { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); min-width: 0; }
.kr-kpis > div:last-child { padding-bottom: 0; }
@media (min-width: 720px) {
  .kr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); margin-top: 28px; }
  .kr-kpis > div { padding: 4px 24px 0; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
  .kr-kpis > div:first-child { padding-left: 0; border-left: 0; }
  /* Samma rader i alla tre spalterna: bryts ett tal på två rader står talen ändå i linje,
     och kronor per ton och raden under dem också. */
  @supports (grid-template-rows: subgrid) {
    .kr-kpis > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .kr-kpis .kr-figure { align-self: end; }
  }
}
.kr-kpis dt { font: 500 12px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.kr-kpis dd { margin: 0; }
.kr-figure {
  margin-top: 8px !important; font: 700 clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem)/1.12 var(--font-sans);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: #fff;
}
.kr-figure.is-long { font-size: clamp(1.375rem, .9rem + 1.1vw, 2.125rem); }
@media (max-width: 719px) { .kr-figure { font-size: 2.25rem; } .kr-figure.is-long { font-size: 1.75rem; } }
@media (max-width: 399px) { .kr-figure.is-long { font-size: 1.5rem; } }
@media (min-width: 720px) and (max-width: 1199px) { .kr-figure.is-long { font-size: 1.375rem; } }
.kr-figure .kr-amount { white-space: normal; } /* talen har hårda mellanslag; radbrytning bara efter "–" och "cirka" */
/* Enheten och "cirka" i halv storlek, men aldrig under 12 px */
.kr-figure .unit { font-size: max(12px, .5em); font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.78); }
.kr-figure .kr-prefix.is-text { font-size: max(12px, .5em); font-weight: 600; letter-spacing: 0; }
/* Smala spalter: "cirka" på en egen rad ovanför talet, likadant i alla tre */
@media (min-width: 720px) and (max-width: 1023px) { .kr-figure .kr-prefix.is-text { display: block; line-height: 1.3; } }
.kr-kpis .is-change .kr-figure, .kr-kpis .is-change .kr-figure .unit { color: var(--accent); }
.kr-kpis .kr-per-ton { margin-top: 6px; font: 600 var(--t-small)/1.4 var(--font-sans); font-variant-numeric: tabular-nums lining-nums; color: rgba(255,255,255,.92); }
.kr-kpis .kr-per-ton:empty { display: none; }
.kr-kpis .kr-sub { margin-top: 4px; font-size: var(--t-caption); line-height: 1.45; color: rgba(255,255,255,.80); }
.card-data > p.kr-lede { margin-top: 24px; font-size: var(--t-small); line-height: 1.6; color: rgba(255,255,255,.88); max-width: 34em; }
.kr-notes { display: grid; gap: 10px; margin-top: 16px; list-style: none; }
.kr-notes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: var(--t-small); line-height: 1.55; color: rgba(255,255,255,.84); max-width: 38em; }
.kr-notes .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--blue-300); }
/* Grunden för talen som en liten tabell, som på startsidan */
.kr-summary dl.basis dd { margin: 0; max-width: 90ch; }
@media (max-width: 559px) {
  .kr-summary dl.basis > div { display: block; }
  .kr-summary dl.basis dt { display: inline; margin-right: 8px; }
  .kr-summary dl.basis dd { display: inline; }
}

/* År för år */
.panel-light.kr-years { padding: var(--pad-panel); }
.kr-years-head { max-width: var(--text); }
.kr-years-head h3 { color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.kr-years-head p { margin-top: 8px; font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); max-width: 38em; }
/* Tabellen och "Så räknas" bredvid varandra från 1280 px, med "Så räknas" i objektspalten; staplade under */
.kr-years-grid { display: grid; gap: var(--stack-m) var(--col-gap); margin-top: var(--stack-m); }
@media (min-width: 1280px) {
  .kr-years-grid { grid-template-columns: minmax(0, 1fr) calc(var(--objekt) - var(--pad-panel) - 1px); align-items: start; }
}
.kr-table-col { min-width: 0; }

.kr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.kr-table thead th {
  padding: 0 10px 10px; vertical-align: bottom; text-align: right;
  font: 500 12px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.kr-table thead th:first-child { text-align: left; padding-left: 0; }
.kr-table thead th:last-child { padding-right: 0; }
.kr-table tbody th, .kr-table tbody td { padding: 6px 10px; border-top: 1px solid var(--line-light); text-align: right; vertical-align: middle; }
.kr-table tbody th { text-align: left; padding-left: 0; font-weight: inherit; }
.kr-table tbody td:last-child { padding-right: 0; }
.kr-table tbody tr { cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.kr-table tbody tr:hover { background: rgba(29,100,154,.035); }
.kr-table tbody tr.is-selected { background: rgba(29,100,154,.07); }
.kr-table .num { display: block; font: 400 14px/1.35 var(--font-mono); color: var(--ink); }
/* Ton CO₂ i tabellen bryts aldrig inuti ("3,913–3,921" på en rad). Kostnaden får brytas efter "–",
   så att kolumnen med stapeln kan krympa i stället. */
.kr-table .kr-v-std, .kr-table .kr-v-ded, .kr-table .kr-v-pay { white-space: nowrap; }
.kr-table .num.is-text, .kr-step-head .num.is-text { font: 400 var(--t-caption)/1.35 var(--font-sans); color: var(--ink-2); }
/* Talen har hårda mellanslag, så ett spann bryts bara efter "–". */
.kr-cell-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.kr-table .kr-col-cost { width: 30%; }
.kr-table thead .kr-col-detail { max-width: 9em; }
.kr-table .kr-v-cost { font: 600 var(--t-small)/1.35 var(--font-sans); letter-spacing: -.005em; }
/* Stapeln: accentens mörka steg till beloppet (ljus yta). Vid ett spann är den mörka delen det lägsta
   beloppet och den ljusa resten upp till det högsta. Avdraget har en egen färg, stålblå. */
.kr-bar { position: relative; display: block; height: 6px; margin-top: 7px; border-radius: 999px; background: rgba(11,31,51,.08); overflow: hidden; }
.kr-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--accent-stark); }
.kr-bar.is-range > i { background: linear-gradient(90deg, var(--accent-stark) 0 var(--min, 0%), var(--accent-stark-mjuk) var(--min, 0%) 100%); }

.kr-year {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 76px; padding: 0 12px; margin-left: -12px;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink);
  font: 600 var(--t-small)/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: left;
}
.kr-year::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--line-input); background: #fff; transition: background-color var(--dur-1), border-color var(--dur-1);
}
.kr-year[aria-pressed="true"] { color: var(--blue-800); }
.kr-year[aria-pressed="true"]::before { border-color: var(--accent-stark); background: var(--accent-stark); }
.kr-year:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.kr-unit { margin-top: 12px; font-size: var(--t-caption); line-height: 1.55; color: var(--ink-2); }
.kr-bar-legend { margin-top: 12px; }

@media (max-width: 639px) {
  .kr-table .kr-col-detail, .kr-unit-detail { display: none; }
  .kr-table .kr-col-cost { width: auto; }
}
/* Mellan 640 och 1023 px är tabellen smal för fem kolumner: talen och kolumnluften krymper lite. */
@media (min-width: 640px) and (max-width: 1023px) {
  .kr-table .num { font-size: 13px; }
  .kr-table .kr-v-cost { font-size: 14px; }
  .kr-table thead th, .kr-table tbody th, .kr-table tbody td { padding-left: 8px; padding-right: 8px; }
  .kr-table thead th:first-child, .kr-table tbody th { padding-left: 0; }
  .kr-table thead th:last-child, .kr-table tbody td:last-child { padding-right: 0; }
}
/* 640–719 px: ännu lite tätare, så att tabellen ryms också vid en miljon ton (miljarder i kostnaden). */
@media (min-width: 640px) and (max-width: 719px) {
  .kr-table thead th, .kr-table tbody th, .kr-table tbody td { padding-left: 6px; padding-right: 6px; }
  .kr-table thead th:first-child, .kr-table tbody th { padding-left: 0; }
  .kr-table thead th:last-child, .kr-table tbody td:last-child { padding-right: 0; }
  .kr-year { min-width: 64px; }
}

/* Stegen för valt år */
.kr-steps {
  padding: 20px; border-radius: var(--r-lg); background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,31,51,.08); --focus: var(--blue-600);
}
@media (max-width: 399px) { .kr-steps { padding: 16px; } .kr-step { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; } }
@media (min-width: 768px) { .kr-steps { padding: var(--stack-m); } }
.kr-steps h4 { color: var(--ink); font: 600 var(--t-body)/1.35 var(--font-sans); letter-spacing: -.01em; }
.kr-step-list { margin-top: 12px; list-style: none; }
.kr-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--line-light); }
.kr-step:first-child { border-top: 0; padding-top: 4px; }
.kr-step:last-child { padding-bottom: 0; }
.kr-step-no { font: 500 12px/1.9 var(--font-mono); color: var(--blue-700); }
/* Rubriken i en egen spalt och värdet alltid högerställt på första raden, så att talen står i en
   gemensam spalt i alla fyra stegen. Under 480 px står värdet på en egen rad under rubriken, i alla fyra. */
.kr-step-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  font: 600 var(--t-small)/1.45 var(--font-sans); color: var(--ink);
}
.kr-step-head .num { text-align: right; }
@media (max-width: 479px) {
  .kr-step-head { grid-template-columns: minmax(0, 1fr); }
  .kr-step-head .num { text-align: left; }
}
.kr-step-head .num { font: 500 14px/1.45 var(--font-mono); color: var(--ink); }
.kr-step-head .num .kr-enhet { font: 400 var(--t-caption)/1.45 var(--font-sans); color: var(--ink-2); }
.kr-step-total .kr-step-head .num { font: 700 var(--t-body)/1.35 var(--font-sans); letter-spacing: -.01em; }
.kr-step-text { margin-top: 6px; font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
.kr-split { margin-top: 12px; }
.kr-split-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(11,31,51,.08); }
.kr-split-bar i { display: block; height: 100%; }
.kr-split-avdrag { width: var(--avdrag, 0%); background: rgba(29,100,154,.28); }
.kr-split-betala { flex: 1 1 auto; background: var(--accent-stark); }
.kr-split-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: var(--t-caption); line-height: 1.4; color: var(--ink-2); }
.kr-key { display: inline-flex; align-items: center; gap: 6px; }
.kr-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.kr-key-avdrag::before { background: rgba(29,100,154,.28); }
.kr-key-betala::before, .kr-key-lagst::before { background: var(--accent-stark); }
.kr-key-hogst::before { background: var(--accent-stark-mjuk); }

/* Nästa steg: en ljus panel i full bredd. Från 1024 px text till vänster och knappen och länkarna i
   objektspalten till höger. "Så räknar vi" står stängd i full bredd under. */
.kr-after { display: grid; gap: var(--stack-m); }
.form-card.kr-next { display: grid; gap: var(--stack-m) var(--col-gap); }
/* Från 1024 px slutar spalterna på samma linje: raden med Victor och länkraden står längst ner i var sin
   spalt. Minsta luften ovanför dem är densamma som förut (24 respektive 16 px). Kvittot "Länken är
   kopierad." står i panelens innermått under länkraden, så att raden med Victor inte hoppar när det visas. */
@media (min-width: 1024px) {
  .form-card.kr-next { grid-template-columns: minmax(0, 1fr) calc(var(--objekt) - var(--pad-panel) - 1px); align-items: stretch; }
  .kr-next-text, .kr-next-actions { display: flex; flex-direction: column; }
  .kr-next-text > .kr-person { margin-top: auto; padding-top: var(--stack-m); }
  .kr-next-actions { position: relative; }
  .kr-next-actions > .kr-lead { margin-bottom: var(--stack-s); }
  .kr-next-actions > .kr-actions { margin-top: auto; }
  .kr-next-actions > .kr-copy-status { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; }
  /* Syns rutan med länken ("Kopiera länken i rutan nedan.") står kvittot i flödet, ovanför rutan */
  .kr-next-actions:has(> .kr-copy-fallback:not([hidden])) > .kr-copy-status { position: static; margin-top: 8px; }
}
.kr-next h3 { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.kr-next h3 + p { margin-top: var(--stack-xs); font-size: var(--t-small); line-height: 1.6; max-width: 34em; }
.kr-next .kr-book { color: #fff; text-decoration: none; }
.kr-next .kr-book:hover { color: #fff; }
/* Porträttet: samma storlek och ring som på startsidan och /boka/ */
.kr-person { display: flex; align-items: center; gap: 14px; margin-top: var(--stack-m); }
.kr-person img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; background: var(--steel-700); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.kr-person p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* "Hellre mejl?" under knappen */
.form-card .kr-lead { margin-top: var(--stack-s); font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
.kr-lead a { font-weight: 600; }

.kr-actions { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: var(--stack-s); padding-top: 12px; border-top: 1px solid var(--line-light); }
.kr-action {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  font: 600 var(--t-small)/1.3 var(--font-sans); color: var(--blue-700); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(23,84,127,.4); text-underline-offset: .25em;
}
.kr-action:hover { color: var(--navy-950); text-decoration-color: currentColor; }
.kr-action .ico { width: 18px; height: 18px; stroke-width: 1.75; }
.kr-copy-status { font-size: var(--t-caption); line-height: 1.5; color: var(--ink-2); }
.kr-copy-status:empty { display: none; }
.kr-copy-fallback { margin-top: 12px; }

/* Samma innerkant som panelerna ovanför. Skriptet öppnar rutan från 1024 px; texten hålls i läsbar radlängd. */
.faq.kr-method { max-width: none; margin: 0; border-radius: var(--r-xl); } /* samma hörn som panelerna ovanför */
.faq.kr-method summary { padding-inline: var(--pad-panel); }
.kr-method .answer { max-width: calc(52em + 2 * var(--pad-panel)); padding-inline: var(--pad-panel); font-size: var(--t-small); }
.kr-method-list { padding-left: 20px; }
.kr-method-list li + li { margin-top: 8px; }
.kr-method .answer > p { margin-top: 12px; }
.kr-method .kr-sources-head { margin-top: 20px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.kr-sources { margin-top: 8px; list-style: none; }
.kr-sources li + li { margin-top: 6px; }
.kr-sources .ico { display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; }

.kr-print-foot { display: none; }

/* Vanliga frågor längst ner: samma uppställning som på startsidan (rubrikblock, två paneler sida vid sida
   från 1024 px). Luften är sektionernas (--section-y). Under 1024 px blir de fyra frågorna en panel. */
@media (max-width: 1023px) {
  .kr-sida #vanliga-fragor .faq-list {
    gap: 0; overflow: hidden; background: var(--grad-paper); border: 1px solid rgba(255,255,255,.7);
    border-radius: var(--r-xl); box-shadow: var(--sh-card); --focus: var(--blue-600);
  }
  .kr-sida #vanliga-fragor .faq-list > .faq { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .kr-sida #vanliga-fragor .faq-list > .faq + .faq { border-top: 1px solid var(--line-light); }
}

/* Sidfoten: samma regel som site.css ska ha för alla sidor. Står den i site.css
   gör raderna här ingenting extra och kan tas bort. Mittpunkten står före varje del utom den första och
   följer med delen vid radbrott. Före mejladressen står den utanför länkens understrykning.
   (Mottots meningar hålls ihop av .sent i site.css.) */
.kr-sida .footer-company > * + *::before { content: "· "; }
.kr-sida .footer-company > a::before { content: "·\00a0"; display: inline-block; text-decoration: none; color: rgba(255,255,255,.74); }

/* ---------- Tvingade färger (Windows högkontrast) ---------- */
@media (forced-colors: active) {
  .kr-bar, .kr-split-bar, .kr-key::before { forced-color-adjust: none; border: 1px solid CanvasText; }
  .kr-bar > i, .kr-split-betala { background: CanvasText; }
  .kr-bar.is-range > i { background: linear-gradient(90deg, CanvasText 0 var(--min, 0%), GrayText var(--min, 0%) 100%); }
  .kr-split-avdrag, .kr-key-avdrag::before, .kr-key-hogst::before { background: GrayText; }
  .kr-key-betala::before, .kr-key-lagst::before { background: CanvasText; }
  .kr-year[aria-pressed="true"]::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .kr-table tbody tr.is-selected .kr-year { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---------- Utskrift: en ljus sida med resultatet ---------- */
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  html, body { background: #fff !important; }
  body { font-size: 10pt; }
  .skip-link, .site-header, .mobile-menu, .site-footer, .kr-form-col, .kr-facts, #vanliga-fragor,
  .kr-next, .kr-steps, .kr-hero::before, .kr-intro .lead, .kr-intro .eyebrow, .kr-bar-legend { display: none !important; }
  .container { width: 100%; }
  .kr-hero { padding: 0 0 8px; min-height: 0; display: block; }
  .kr-intro { padding: 0; }
  .kr-intro::before { content: "Bordic · Kostnadsröntgen"; display: block; font: 600 10pt/1.4 var(--font-sans); color: #333; }
  .kr-intro h1 { margin-top: 2px; color: #000; font-size: 20pt; max-width: none; }
  .kr-resultat { padding: 0; }
  .kr-stack { gap: 10px; }
  .card-data.kr-summary, .panel-light.kr-years, .faq.kr-method {
    background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #bbb; border-radius: 10px;
  }
  .card-data.kr-summary { padding: 12px 16px; break-inside: avoid; }
  .panel-light.kr-years { padding: 12px 16px; }
  .kr-summary h2.label, .kr-kpis dt, .kr-kpis .kr-sub, .kr-kpis .kr-per-ton, .kr-figure .unit, .card-data .basis, .card-data .basis dt, .card-data > p.kr-lede, .kr-notes li { color: #333 !important; }
  .kr-summary .kr-subject { margin-top: 4px; font-size: 12pt; color: #000 !important; }
  .kr-figure, .kr-kpis .is-change .kr-figure, .kr-kpis .is-change .kr-figure .unit { color: #000 !important; }
  .kr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
  .kr-kpis > div { padding: 0 10px; border-top: 0; border-left: 1px solid #ccc; }
  .kr-kpis > div:first-child { padding-left: 0; border-left: 0; }
  .kr-figure, .kr-figure.is-long { font-size: 17pt; }
  .kr-figure .kr-prefix.is-text { display: inline; }
  .kr-kpis .kr-per-ton { font-size: 9pt; }
  .kr-kpis .kr-sub { font-size: 8.5pt; }
  .card-data > p.kr-lede { margin-top: 10px; font-size: 9.5pt; }
  .kr-notes { margin-top: 6px; gap: 4px; }
  .kr-notes li { font-size: 9pt; }
  .kr-notes .ico { color: #333; }
  .card-data dl.basis { margin-top: 10px; padding-top: 8px; border-top-color: #ccc; font-size: 8pt; gap: 2px; }
  .card-data dl.basis dt { font-size: 8pt; }
  .card-data dl.basis > div { grid-template-columns: 90px minmax(0, 1fr); }
  .kr-years-head h3 { font-size: 13pt; }
  .kr-years-head p { margin-top: 2px; font-size: 9pt; color: #333; }
  .kr-years-grid { display: block; margin-top: 8px; }
  .kr-table .kr-col-detail { display: table-cell !important; }
  .kr-table thead th { font-size: 7.5pt; color: #333; padding-bottom: 4px; }
  .kr-table tbody th, .kr-table tbody td { padding: 3px 8px; }
  .kr-table .num { font-size: 9pt; }
  .kr-table .kr-v-cost { font-size: 9.5pt; }
  .kr-cell-sub { font-size: 7.5pt; color: #444; }
  .kr-table tbody tr { break-inside: avoid; }
  .kr-table tbody tr.is-selected { background: none; }
  .kr-year::before { display: none; }
  .kr-year { min-height: 0; min-width: 0; padding: 2px 0; margin: 0; font-size: 9.5pt; color: #000 !important; }
  .kr-bar { height: 4px; margin-top: 3px; }
  .kr-bar, .kr-bar > i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kr-unit { margin-top: 6px; font-size: 8pt; color: #444; }
  .kr-unit-hint { display: none; }
  .kr-after { display: block; }
  .faq.kr-method { break-inside: avoid; }
  .kr-method summary { padding: 10px 16px; font-size: 11pt; }
  .kr-method summary::after { display: none; }
  .kr-method .answer { padding: 0 16px 12px; font-size: 9pt; }
  .kr-method .answer > p { margin-top: 6px; }
  .kr-method-list li + li { margin-top: 3px; }
  .kr-sources .ico { display: none; }
  .kr-sources a { color: #000; text-decoration: none; }
  .kr-sources a::after { content: " " attr(href); font-size: 7.5pt; color: #555; word-break: break-all; }
  .kr-print-foot { display: block; margin-top: 4px; font-size: 8pt; color: #333; }
  #kr-print-link { word-break: break-all; }
}