/* ============================================================
   TERMI · v5-spårets delade tillägg (laddas efter styles.css
   på termi-v5 / scope-v5 / effekt-v5 / integritet-v5) — ärver v4:s block, plus granskningens fynd
   - Startup-footern (kolumner, slogan, legal)
   - Punkt 20: alla kort symmetriska med gradientkant i BOTTEN
   ============================================================ */

/* Alias: v4-stilarna använder --fg; grundsystemets token heter --ink (temaföljande). */
:root { --fg: var(--ink); }

/* ---------- Footer ---------- */
.footer--v4 .footer-kolumner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: 8px 26px;
}
.footer--v4 .footer-brand { display: block; }
.footer--v4 .footer-slogan {
  font-stretch: 115%;
  font-weight: 620;
  font-size: 1.05rem;
  margin: 14px 0 16px;
  color: var(--fg);
}
.footer--v4 .footer-rubrik {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}
.footer--v4 .footer-kol a,
.footer--v4 .footer-kol span {
  display: block;
  color: var(--body);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 8px;
}
.footer--v4 .footer-kol a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.footer--v4 .footer-bottenrad {
  border-top: 1px solid var(--kant, var(--line));
  padding-top: 18px;
  margin-top: 8px;
  width: 100%;
  max-width: none;
}
@media (max-width: 860px) {
  .footer--v4 .footer-kolumner { grid-template-columns: 1fr 1fr; }
  .footer--v4 .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Punkt 20: kortens gradientkant i botten, genomgående ---------- */
/* OBS: rör ALDRIG position på element som redan positioneras av styles.css
   (avläsningen är absolut i scenen — det var buggen). */
.dygn-kort::before,
.intresse-highlight::before,
.spec::before,
.avlasning::before { background: none; }
/* Kort som redan har egen positioning (absolut ::before i styles.css) får flush bottenkant … */
.dygn-kort::after,
.intresse-highlight::after,
.spec::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ramp);
}
/* … och övriga får en säker kant i flödet, utan positionsändringar. */
.avlasning::after,
.case-klimat::after,
.dygn-info-text::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--ramp);
  margin-top: 12px;
}
/* Flikpanelerna: hidden-attributet måste vinna över display:grid */
.flikpanel[hidden] { display: none !important; }

/* ---------- Integritetssidan ---------- */
.juridik { max-width: 720px; }
.juridik h2 { font-size: 1.25rem; margin: 34px 0 10px; font-stretch: 115%; }
.juridik p { line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.juridik .uppdaterad {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Nattläges-bubblan (startsidan) ---------- */
.nattbubbla {
  position: fixed;
  z-index: 60;
  width: min(300px, calc(100vw - 24px));
  background: var(--glas);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--kant, var(--line));
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: var(--skugga-lyft, var(--skugga-vila));
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  overflow: hidden;
}
.nattbubbla.syns { opacity: 1; transform: none; pointer-events: auto; }
.nattbubbla::before {
  content: "";
  position: absolute;
  top: -6px; right: 22px;
  width: 12px; height: 12px;
  background: var(--glas);
  border-left: 1px solid var(--kant, var(--line));
  border-top: 1px solid var(--kant, var(--line));
  transform: rotate(45deg);
}
.nattbubbla::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ramp);
}
.nattbubbla p { margin: 0 0 10px; font-size: .88rem; line-height: 1.55; color: var(--body); }
.nattbubbla-rad { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nattbubbla-ok {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  /* Nattknappen: bläck på ljus grund (mörk pill = "natt"), tydlig kontrast i båda teman. */
  color: var(--bg); background: var(--ink);
  border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.nattbubbla-ok::before { content: "☾"; font-size: .9rem; line-height: 1; }
.nattbubbla-ok:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.45); opacity: .92; }
.nattbubbla-ok:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.nattbubbla-stang {
  background: none; border: 0; color: var(--dim); font-size: .9rem; cursor: pointer; padding: 4px 6px;
}
.nattbubbla-stang:hover { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .nattbubbla { transition: none; } }


/* ============================================================
   v5 (granskningen 31/8) — delade tillägg
   ============================================================ */

/* v7 (varumärkeselement · gradientpuls): primärknappen bär rampen — kobolt →
   magenta → glöd → vitguld glider genom knappen som en värmefront vid hover.
   Ersätter v5:s bläckknapp (fynd 19). Texten är VIT (Viktors order 9/9).
   Konturknappen orörd. */
.knapp:not(.knapp--kontur) {
  color: #FFFFFF;
  background: linear-gradient(90deg, #1437C8, #B0348C, #E4572E, #FFD9A0);
  background-size: 300% 100%;
  background-position: 0% 0;
  border: 0;
  box-shadow: none;
  transition: background-position .8s ease, box-shadow .25s ease;
  text-shadow: 0 1px 2px rgba(11, 13, 16, .38);
}
.knapp:not(.knapp--kontur):hover,
.knapp:not(.knapp--kontur):focus-visible {
  background-position: 100% 0;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: reduce) {
  .knapp:not(.knapp--kontur) { transition: none; }
  .knapp:not(.knapp--kontur):hover,
  .knapp:not(.knapp--kontur):focus-visible { background-position: 0% 0; }
}
.knapp[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* Fynd 19: alla sektionsrubriker vänsterställda (undantag: Fyra lager, som är en scen);
   en kickerfärg; kickers under #team följer med. */
.sektion .kicker--varm, .sektion .kicker--kall, .intresse-highlight .kicker--varm { color: var(--glow-txt); } /* scenens kicker (solcykel-rubrik) har egen dag/natt-logik och lämnas */

/* Fynd 19: en liten pil i stället för instruktionsmeningar */
.bygg .scrolla-vink:not(.redo) { font-size: 1.1rem; letter-spacing: 0; }

/* ---------- Missionen (Vårt mission + Varför nu i EN sektion) ---------- */
.mission-kolumner { margin-top: 10px; }
.mission-kolumner .ingress { margin-bottom: 18px; }
.mission-kolumner p { max-width: 58ch; }
.mission-siffra-text { margin-top: 14px; color: var(--body); }
sup.not { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 2px; }
sup.not a { color: var(--dim); text-decoration: none; font-family: var(--font-mono); }
sup.not a:hover { color: var(--fg); }

/* ---------- Fall-banden (delas av startsidan och Effekt) ---------- */

.fall-lista { margin-top: 18px; }
.fall {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) 15rem;
  gap: clamp(1.4rem, 4vw, 3rem);
  padding-block: clamp(2.2rem, 4.5vw, 3.6rem);
  position: relative; border-top: 1px solid var(--kant, var(--line));
  transition: background .25s ease;
}
.fall::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ramp); opacity: 0; transition: opacity .25s ease;
}
.fall:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.fall:hover::before { opacity: 1; }
.fall--forsta { padding-block: clamp(2.8rem, 5.5vw, 4.4rem); }
.fall-nr {
  font-family: var(--font-mono); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 500;
  color: var(--dim); opacity: .55; line-height: 1; padding-top: .35rem;
}
.fall--forsta .fall-nr { opacity: 1; background: var(--ramp-txt, var(--ramp)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fall-eyebrow {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px;
}
.fall-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; margin: 0 0 12px; font-stretch: 115%; }
.fall-text p { margin: 0; max-width: 54ch; font-size: .98rem; line-height: 1.7; color: var(--body); }
.fall-tal { display: flex; flex-direction: column; gap: 6px; padding-top: .3rem; }
.fall-tal .tal { font-family: var(--font-disp, "Archivo"), sans-serif; font-weight: 680; font-variation-settings: "wdth" 96; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.01em; color: var(--fg); }
.fall-tal .tal-not { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1.6; max-width: 15rem; }
@media (max-width: 760px) {
  .fall { grid-template-columns: 1fr; gap: .8rem; padding-block: 2rem; }
  .fall-nr { font-size: 1.1rem; padding-top: 0; }
  .fall-tal { flex-direction: column; padding-top: .4rem; }
  .fall-tal .tal { font-size: 1.9rem; }
}


.fall-fot { margin-top: 22px; font-size: .95rem; }
.fall-fot a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Affären ---------- */
.affar-kolumner { align-items: start; }
.affar-kolumner .h-sektion { margin-bottom: 0; }
.affar-kolumner p { max-width: 58ch; }

/* ---------- Röstbandet ---------- */
.rosta-band { position: relative; }
.rosta-band .ingress { max-width: 62ch; }
.rosta-rad { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.rosta-vantar { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--dim); }
.rosta-band.har-lank .rosta-vantar { display: none; }
.rosta-del {
  margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px dashed var(--kant, var(--line)); border-radius: 10px; max-width: 720px;
}
.rosta-delrad { margin: 0; font-size: .95rem; color: var(--body); flex: 1 1 320px; }
.rosta-kopiera {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); background: none; border: 1px solid var(--kant, var(--line)); border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.rosta-kopiera:hover { border-color: var(--glow); }
.rosta-kopiera:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.footer--v4 .rosta-slot .knapp { padding: 11px 18px; font-size: .74rem; }

/* ---------- Dygnet: antaganden-raden ---------- */
.avlasning-not dd a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; font-size: .9em; }
.avlasning-not dd a:hover { color: var(--fg); }

/* ---------- Dygnsscenen på mobil (fynd 17): scenen fyller bredden, kortare spacer ---------- */
@media (max-width: 899px) {
  .solcykel { height: 260vh; }
  .scen { height: 46%; }
  .sol-arm { bottom: 48%; }
  .dygn-steg { bottom: 50%; }
  .sc-innelabel { display: none; }
}
/* Mobilnav (fynd 12): logga + Hem/Scope/Effekt + "Rösta" — Intresse-länken bor i footern på mobil */
@media (max-width: 720px) {
  .nav-links a[href="#intresse"] { display: none; }
  .nav-cta.rosta-lank { white-space: nowrap; }
  .nav-cta.rosta-lank::after { content: "Rösta"; }
  .nav-cta.rosta-lank { font-size: 0; }
  .nav-cta.rosta-lank::after { font-size: .74rem; letter-spacing: .08em; }
}
@media (max-width: 460px) { .nav-cta.rosta-lank::after { font-size: .68rem; letter-spacing: .02em; } }
/* Mörkt läge: huset får en tunn kontur så väggarna inte flyter ihop med bakgrunden */
html:not([data-theme="ljus"]) .solcykel .sc-huskropp { stroke: #4A5566; stroke-width: 1.5; }

/* ---------- Ljust läge: hero-scenen får kontrast (fynd 21) ---------- */
:root[data-theme="ljus"] .hero-scen .hs-fasad { fill: #D9D4C9; }
:root[data-theme="ljus"] .hero-scen .hs-fonster rect { fill: #3B4A78; opacity: .85; }
:root[data-theme="ljus"] .hero-scen .hs-marklinje { stroke: #B8B2A4; }

/* ============================================================
   v5 r2 (Viktors revision 31/8, kväll)
   ============================================================ */
/* Flikarna tillbaka (v4:s stilar, nu delade) */
/* ---- v4 rev 5: fliksektionen Missionen ---- */
.flikar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.flik {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); background: none; border: 1px solid var(--kant, var(--line));
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.flik:hover { color: var(--fg); }
.flik[aria-selected="true"] { color: var(--fg); border-color: transparent; background: color-mix(in srgb, var(--fg) 6%, transparent); position: relative; }
.flikpaneler { margin-top: 26px; }
.flikpanel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  border: 1px solid var(--kant, var(--line)); border-radius: var(--radius-kort);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--skugga-vila); padding: clamp(26px, 4vw, 44px);
  position: relative; overflow: hidden;
}
.flikpanel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ramp); }
.flik-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 12px; font-stretch: 115%; }
.flik-text > p { margin: 0 0 20px; max-width: 54ch; line-height: 1.7; color: var(--body); }
.flik-siffror { display: grid; gap: 12px; margin: 0 0 22px; }
.flik-siffror > div { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; border-top: 1px solid var(--kant, var(--line)); padding-top: 10px; }
.fs-tal { font-weight: 680; font-variation-settings: "wdth" 96; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; letter-spacing: -.01em; color: var(--fg); white-space: nowrap; }
.fs-not { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); line-height: 1.6; }
.flik-knappar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.flik-lank { color: var(--fg); font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; }
.flik-bild svg { width: 100%; height: auto; display: block; }
.flik-fot { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--dim); margin: 18px 4px 0; }
.flik-fot a { color: var(--glow-txt); }
@media (max-width: 860px) {
  .flikpanel { grid-template-columns: 1fr; }
  .flik-bild { max-width: 280px; margin: 0 auto; order: -1; }
}

.flik-knappar { margin-top: 4px; }

/* Missionen: 50 %-kortet */
.info-kort {
  position: relative; overflow: hidden;
  border: 1px solid var(--kant, var(--line)); border-radius: var(--radius-kort);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--skugga-vila); padding: clamp(22px, 3vw, 32px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.info-kort::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ramp); }
.info-kort-siffra { margin: 0 0 14px; }
.info-kort p { margin: 0 0 12px; max-width: none; }
.info-kort p:last-child { margin-bottom: 0; }
.info-kort-not { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; line-height: 1.6; color: var(--dim); border-top: 1px dashed var(--kant, var(--line)); padding-top: 12px; }
.mission-kolumner .ingress { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-stretch: 110%; font-weight: 560; color: var(--fg); }

/* Röstbandet: den snurrande jordgloben (canvas, ritas i app-v5.js) */
.rosta-band { overflow: hidden; }
.rosta-glob { position: absolute; inset: 0; pointer-events: none; }
.rosta-glob-canvas { position: absolute; right: clamp(-120px, -6vw, 0px); top: 50%; transform: translateY(-50%); width: min(62vw, 720px); height: min(62vw, 720px); opacity: .9; }
.rosta-band .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .rosta-glob-canvas { width: 120vw; height: 120vw; right: -50vw; top: 60%; opacity: .55; } }


/* ============================================================
   v7 · VARUMÄRKESELEMENT ur designvalvet (dashboard/data.js → varumarke[])
   ============================================================ */

/* Värmeböljelinjer — loggans vågform, tre fasförskjutna linjer i rampen. */
.vagband {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: clamp(26px, 4vw, 44px) auto;
  overflow: visible;
}
.vagband path { fill: none; stroke-width: 2; stroke-linecap: round; }
.vagband .vv1 { animation: vv 5s ease-in-out infinite alternate; }
.vagband .vv2 { animation: vv 5s ease-in-out .6s infinite alternate; }
.vagband .vv3 { animation: vv 5s ease-in-out 1.2s infinite alternate; }
@keyframes vv { from { transform: translateX(0); } to { transform: translateX(-26px); } }
@media (prefers-reduced-motion: reduce) {
  .vagband path { animation: none; }
}

/* Mono-räknare — mätvärdeskänsla i stället för påståendekänsla.
   Endast på tal som passerat claims-grinden. */
.raknare {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}


/* ============================================================
   v7 r2 (Viktors revision 9/9)
   ============================================================ */

/* R1 · Nav-CTA:n "Rösta på Termi" bär samma gradientpuls som primärknappen (vit text).
   styles.css sätter .nav-cta:hover med !important → överstyrs här med samma tyngd. */
.nav-links .nav-cta.rosta-lank {
  color: #FFFFFF !important;
  border: 0;
  background: linear-gradient(90deg, #1437C8, #B0348C, #E4572E, #FFD9A0) !important;
  background-size: 300% 100% !important;
  background-position: 0% 0 !important;
  text-shadow: 0 1px 2px rgba(11, 13, 16, .38);
  transition: background-position .8s ease, box-shadow .25s ease;
}
.nav-links .nav-cta.rosta-lank:hover,
.nav-links .nav-cta.rosta-lank:focus-visible {
  background-position: 100% 0 !important;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
}
/* R2 · Navknapparna får primärknappens radie (7 px, samma som gradientpulsen i designvalvet). */
.nav-links a { border-radius: 7px; }
@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-cta.rosta-lank { transition: none; }
  .nav-links .nav-cta.rosta-lank:hover { background-position: 0% 0 !important; }
}

/* R3 · Hero: de tre strålar som INTE landar på Termi Heat (stora huset ×2 + villans
   panelfria takhalva) — värmen läcker exakt där de träffar. Slingorna och +kW sitter
   i strålarnas ändpunkter (termi-v7.html). Läckstrålarna tecknas något tyngre. */
.hs-stralar .hs-strale--lacker { stroke-width: 2.6; }

/* R7 · Flikarna (Tre fall + Effekts case): aktiv flik = gradientpulsen med vit text;
   inaktiva = tunn gradientkant (border-box-tricket), samma 7 px-radie som knapparna. */
.flik {
  border-radius: 7px;
  border: 1px solid transparent;
  color: var(--body);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, #1437C8, #B0348C, #E4572E, #FFD9A0) border-box;
  transition: color .2s ease, box-shadow .2s ease, background-position .8s ease;
}
.sektion--panel .flik { background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(90deg, #1437C8, #B0348C, #E4572E, #FFD9A0) border-box; }
.flik:hover { color: var(--fg); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .5); }
.flik[aria-selected="true"] {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(90deg, #1437C8, #B0348C, #E4572E, #FFD9A0);
  background-size: 300% 100%;
  background-position: 0% 0;
  text-shadow: 0 1px 2px rgba(11, 13, 16, .38);
}
.flik[aria-selected="true"]:hover { background-position: 100% 0; }
@media (prefers-reduced-motion: reduce) { .flik[aria-selected="true"]:hover { background-position: 0% 0; } }

/* R6 · Värmeböljelinjerna bor i Affärens vänsterkolumn, under rubriken — som sektionens
   bild, kant i kant med texten, i stället för ett löst band mellan sektionerna. */
.affar-vag { margin: clamp(22px, 3vw, 36px) 0 0; max-width: 520px; }
.affar-vag .vagband { margin: 0; max-width: none; width: 100%; }
.affar-vag .vagband path { stroke-width: 2.2; }
.affar-vag .vagband .vv2 { opacity: .78; }
.affar-vag .vagband .vv3 { opacity: .56; }
.affar-vag-not { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 10px 0 0; }
@media (max-width: 860px) { .affar-vag { max-width: 360px; } }

/* R4 · Dygnet: intjänat-raden (simulerad, kalkylatorns priser) */
.avlasning-rad dd.kr { color: var(--glow-txt, var(--fg)); }

/* R5 · Röstbandet med länken satt: hänvisning till bidragets namn på röstsidan */
.rosta-hint { display: none; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--dim); margin: 12px 0 0; }
.rosta-band.har-lank .rosta-hint { display: block; }
/* R6 · vågorna klipps vid kolumnens kant (paths löper -20…214 så driften aldrig lämnar hål) */
.affar-vag .vagband { overflow: hidden; }


/* ============================================================
   v7 r3 (Viktors revision 9/9, kväll)
   ============================================================ */

/* R8 · STÖRRE RADIE PÅ ALLA KNAPPAR. r2 satte 7 px, vilket var samma värde som
   knapparna redan hade (och 6→7 px på navlänkarna) — ingen synlig skillnad.
   Nu ett eget token, 12 px = designdashboardens --r-sm (kortradien i valvet),
   applicerat på varje rektangulär knapp och formulärkontroll på alla v7-sidor.
   Undantag med avsiktlig form: de tre pillerknapparna (info, nattläge, kopiera)
   och den runda temaknappen. */
:root { --radius-knapp: 12px; }
.knapp,
.knapp--kontur,
.nav-links a,
.nav-links .nav-cta,
.flik,
.bygg-knapp,
.intresse-form input,
.intresse-form select,
.intresse-form textarea,
.kalkylator-yta .tk-f select,
.kalkylator-yta .tk-f input:not([type="range"]) {
  border-radius: var(--radius-knapp) !important;
}


/* ============================================================
   v7 r4 (Viktors revision 9/9, sen kväll)
   ============================================================ */

/* R9 · MER RUNDADE KNAPPAR. 12 px (r3) → pillerform på allt som är en knapp,
   samma form som sidans befintliga pillerknappar (info, nattläge, kopiera).
   Formulärfälten kan inte vara piller (flerradig textarea) och får 14 px. */
:root { --radius-knapp: 999px; --radius-falt: 14px; }
.intresse-form input,
.intresse-form select,
.intresse-form textarea,
.kalkylator-yta .tk-f select,
.kalkylator-yta .tk-f input:not([type="range"]) {
  border-radius: var(--radius-falt) !important;
}

/* R10 · Luft mellan header-CTA:n och dag/natt-knappen (var 4 px nav-gap). */
.nav-links .tema-knapp { margin-left: 14px; }
@media (max-width: 460px) { .nav-links .tema-knapp { margin-left: 8px; } }

/* R11 · Årsblocket under avläsningskortets rader (Viktors order 9/9, fyra rader i r6):
   solel, värme, total och merförtjänsten med Termi Heat. Tabular-nums så att siffror som
   räknas upp aldrig ändrar bredd — kortet har backdrop-filter och varje layoutändring
   kostar en omritning av den suddade ytan. */
.avlasning-ar {
  border-top: 1px solid var(--kant, var(--line));
  margin-top: 14px;
  /* 16 px sidopadding = samma indrag som kortets övriga rader (styles.css: .avlasning-rad) */
  padding: 12px 16px 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.avlasning-ar-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  padding-block: 3px;
}
.avlasning-ar-rad b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.avlasning-ar-total {
  border-top: 1px solid var(--kant, var(--line));
  margin-top: 6px;
  padding-top: 8px;
  /* OBS: --fg är ett rot-alias för rotens --ink; kortet definierar om --ink lokalt (ljus text
     på mörk glasyta i BÅDA teman), så här måste --ink användas direkt. (Buggen syntes bara i
     ljust tema: totalraden blev mörk på mörkt.) */
  color: var(--ink);
}
.avlasning-ar-total b { color: var(--ink); font-size: .82rem; }
.avlasning-ar-plus {
  margin: 10px 0 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--glow-txt);
  /* v7 r7: längre lydelse ("… sparat utöver solel med Termi Heat") får radbrytas — nowrap
     sprängde kortets bredd med 2 px. Bara talet hålls ihop. */
  white-space: normal;
  line-height: 1.5;
}
.avlasning-ar-plus #avl-ar-plus { white-space: nowrap; }

/* R12 · Röstbandet: samma avstånd knapp → text som sidans övriga gränssnitt
   (26 px, samma rytm som knapp → delningsrutan). */
.rosta-hint { margin-top: 26px; }
/* R13 (v7 r6, jankfix) · lägre blurradie på kortet (10 → 6 px): scenen bakom rör sig varje
   bildruta, så backdrop-filtret räknas om hela tiden och kostnaden växer med kortets yta.
   Kortet blev högre av årsblocket. Sex pixlar ser likadant ut och halverar arbetet.
   Årsblocket får dessutom eget containment · årsblocket får eget containment så dess uppräkning inte
   invaliderar hela det backdrop-filtrerade kortets layout/målning. */
.avlasning-ar { contain: layout style; }
.avlasning { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }

/* ============================================================
   v7 r7 (Viktors order 9/9) — scrollmjukhet utan design­ändring
   ============================================================ */
/* R14 · Animationer utanför vy pausas (klassen sätts av app-v7.js). Pixelidentiskt när
   elementet syns; sparar stilräkning och målning medan man scrollar någon annanstans. */
.anim-pausad,
.anim-pausad * { animation-play-state: paused !important; }

/* R15 · Dygnsscenen: egen målningsyta så scenens animationer inte invaliderar sidan runt
   omkring, och kortet promotas till eget lager så dess backdrop-filter inte målas om i onödan. */
.solcykel .scen { contain: paint; }
.avlasning { will-change: transform; }

/* R16 (v7 r8) · Filter + animation på samma element tvingar om­rastrering av oskärpan varje
   bildruta — det var det som hackade i hero- och missionsscenerna. Pulsen flyttas till en
   wrapper-grupp; den filtrerade ringen ligger still och kan cachas. Identiskt resultat. */
.vf-atmo-ring { opacity: 1; }
.vf-atmo-lager { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .vf-atmo-lager { animation: kf-vf-atmo 8s ease-in-out infinite alternate; }
}
/* Hero: samma sak för värmeslingorna — pathen (med oskärpan) ligger still och animationen
   flyttas till en wrapper-grupp, så den blurrade rastreringen kan återanvändas mellan bildrutor.
   Keyframesen är styles.css:s egna (kf-slinga); bara vem som bär dem ändras. */
.hs-varme .varmeslinga { animation: none !important; opacity: inherit; }
.varmeslinga-lager { opacity: 0; will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  .varmeslinga-lager {
    animation: kf-slinga var(--sl-d, 6.5s) ease-in-out infinite;
    animation-delay: var(--sl-delay, 0s);
  }
}
@media (prefers-reduced-motion: reduce) { .varmeslinga-lager { opacity: .45; } }

/* R17 (v7 r9) · TILLFÄLLIG mejlfallback för intresseanmälan (tas bort med KV-bindingen).
   Samma form som tack-rutan, men neutral ton — vi lovar inget som inte hänt. */
.form-mejl {
  border: 1px solid var(--kant, var(--line));
  border-radius: var(--radius-kort);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--skugga-vila);
  padding: clamp(22px, 3vw, 30px);
  position: relative;
  overflow: hidden;
}
.form-mejl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ramp); }
.form-mejl h3 { margin: 0 0 10px; }
.form-mejl p { margin: 0 0 14px; color: var(--body); line-height: 1.6; max-width: 52ch; }
.form-mejl p:last-child { margin-bottom: 0; }

/* ============================================================
   v7 r11 (2026-09-11) — nattflödena i eget lager
   ============================================================ */
/* R18 · .scen-floden ligger exakt ovanpå grund-svg:n (samma viewBox, samma preserveAspectRatio,
   samma box) men i eget kompositorlager. Grund-svg:n med oskärporna målas då inte om av
   flödespulsernas bildrutor. Pekare går igenom (inget i lagret är klickbart). */
.scen { position: absolute; }
/* Alla lager ovanpå grund-svg:n: exakt samma box, inga pekare, eget kompositorlager. */
.scen .scen-floden,
.scen .scen-lager,
.scen .glod-lager {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.scen .scen-floden, .scen .scen-lager { will-change: transform; }
/* Glödlagren: klassen (husglod/tak-band/lager-glod/borr-varm) på WRAPPERN ger styles.css:s
   scrollanimation av opacity på ett HTML-element → kompositerad, ingen omrastrering av oskärpan. */
.scen .glod-lager { will-change: opacity; }
.scen .glod-lager svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ============================================================
   v7 r12 (2026-09-11) — avslöjningsanimationerna vilar utanför vy (app-v7.js)
   ============================================================ */
/* R19 · Utanför vyn (±60 % viewport) stängs view()-animationen av och tillståndet pinnas exakt på
   keyframesens start (nedanför) eller slut (ovanför) — samma värden som kf-rvl/kf-kant-vax i
   styles.css. Inuti vyn körs animationen precis som förut. */
html.har-stl .rvl.rvl-vila { animation: none !important; }
html.har-stl .rvl.rvl-vila.rvl-efter { opacity: 1; transform: none; }
html.har-stl .rvl.rvl-vila.rvl-fore  { opacity: 0; transform: translateY(26px); }
html.har-stl .spec.rvl.rvl-vila::before,
html.har-stl .kort.rvl.rvl-vila::after,
html.har-stl .intresse-highlight.rvl.rvl-vila::before { animation: none !important; }
html.har-stl .spec.rvl.rvl-vila.rvl-efter::before,
html.har-stl .kort.rvl.rvl-vila.rvl-efter::after,
html.har-stl .intresse-highlight.rvl.rvl-vila.rvl-efter::before { transform: scaleX(1); }
html.har-stl .spec.rvl.rvl-vila.rvl-fore::before,
html.har-stl .kort.rvl.rvl-vila.rvl-fore::after,
html.har-stl .intresse-highlight.rvl.rvl-vila.rvl-fore::before { transform: scaleX(0); }

/* R20 (v7 r12) · Missionens fyra solstrålar: styles.css animerar stroke-opacity (kan inte
   kompositeras → varje bildruta målas ~870×680 px om, ×4, kontinuerligt så länge sektionen är
   nära vyn — alltså precis när dygnsscenens natt scrollas förbi). Samma bild med opacity i stället:
   en linje utan fyllning ser identisk ut med opacity .08→.3 som med stroke-opacity .08→.3, men
   opacity kompositeras. Bara i rörelseläget — vid reduced-motion gäller styles.css orörd. */
@media (prefers-reduced-motion: no-preference) {
  .vf-stralar line { stroke-opacity: 1; animation-name: kf-vf-strale-op; will-change: opacity; }
}
@keyframes kf-vf-strale-op { from { opacity: .08; } to { opacity: .3; } }