/* Elsvar design tokens, direction A "Bläck & Bärnsten" v4 (BRAND_BRIEF_ELSVAR.md, UX_UPPGRADERING_2026-09-07.md).
   v4 keeps the palette family and every accessibility rule from v3 and replaces the flat treatment: cards with radius and
   two shadow levels, a hero band, a 1120 px content column with prose still capped at 68ch, pill controls, and a real
   mobile menu. The site is still ink on paper and still light only. */
/* --line is the quiet separator; --line-strong is for anything a finger can hit (input, chip, tab, card border):
   WCAG 2.2 SC 1.4.11 wants 3:1 against the background. --accent is the brand amber as a surface or a large mark;
   --accent-strong is the same amber taken past 4.5:1 so white text can sit on it and it can carry meaning.
   --focus is ink, because an amber focus ring would fail 1.4.11. --band is the hero surface, checked against every
   text token in tests/test_build.py exactly like ground, paper and panel. */
:root{--ground:#F5F7F4;--paper:#FFFFFF;--panel:#EBEFEA;--band:#E6EEE6;--line:#DCE2DB;--line-2:#E9EEE8;--line-strong:#7E8A83;--ink:#0F2230;--ink2:#34454F;--ink3:#5A6A73;--dark:#14293A;--accent:#1E3FE0;--accent-strong:#1733B8;--accent-wash:#EAEFFC;--accent-ink:#0F2230;--focus:#1733B8;--warn:#8A5A00;--ok:#256A4C;--font-d:"Source Serif 4",Georgia,"Times New Roman",serif;--font-b:"Public Sans","Helvetica Neue",Arial,sans-serif}
/* One rhythm for the whole site. Radius: 12 controls, 16 rows and cards, 20 the lifted surfaces, 999 pills.
   Two shadows only: --sh-1 for anything resting on the page, --sh-2 for the two surfaces that are lifted out of it
   (the tool and the answer card). A third level would stop meaning anything. */
:root{--r-ctl:12px;--r-card:16px;--r-lift:20px;--r-pill:999px;--sh-1:0 1px 2px rgba(15,34,48,.03),0 4px 16px rgba(15,34,48,.05);--sh-2:0 2px 4px rgba(15,34,48,.04),0 18px 44px rgba(15,34,48,.10);--sh-amber:0 2px 4px rgba(15,34,48,.04),0 10px 28px rgba(30,63,224,.10);--col:1120px;--prose:68ch}
*{box-sizing:border-box;min-width:0}
/* Without this, anything the script hides with the hidden attribute stays visible as soon as a rule below gives it a display value
   (.chip is inline-flex, .row is grid, .field is a grid child). This one line is what makes hidden mean hidden. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent-strong);text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.018em;margin:0 0 .38em;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,52px);line-height:1.05;margin-top:.5em}
h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin-top:2em}
h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
strong{font-weight:700}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:8px}
.skip:focus{left:8px;z-index:30}
.wrap{max-width:var(--col);margin:0 auto;padding:0 20px 56px}
@media(min-width:900px){.wrap{padding:0 24px 64px}}

/* ---------- header and the mobile menu ---------- */
/* v10 had one nav row that scrolled sideways behind a fade. On a phone it read as a broken menu, which it effectively was:
   nothing said it could be dragged and the last items sat off the edge. Under 900 px the links now live in a panel behind a
   button; above it they are a normal row. */
header.top{background:var(--band);position:sticky;top:0;z-index:20}
header.top .in{max-width:var(--col);margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
@media(min-width:900px){header.top .in{padding:14px 24px}}
.logo{font-family:var(--font-d);font-weight:700;font-size:25px;color:var(--ink);text-decoration:none;letter-spacing:-.02em;flex:0 0 auto;display:inline-flex;align-items:center}
.logo-img{display:block;height:28px;width:auto}
.logo em{font-style:normal;color:var(--accent-strong)}
.burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-ctl);cursor:pointer;color:var(--ink);padding:0}
.burger svg{display:block}
.burger .x,.burger[aria-expanded=true] .bars{display:none}
.burger[aria-expanded=true] .x{display:block}
.burger[aria-expanded=true]{background:var(--dark);border-color:var(--dark);color:#fff}
#huvudmeny{display:flex;gap:2px;align-items:center}
#huvudmeny a{color:var(--ink2);text-decoration:none;padding:9px 12px;font-size:15px;font-weight:500;white-space:nowrap;border-radius:var(--r-pill)}
#huvudmeny a:hover{background:rgba(15,34,48,.06);color:var(--ink)}
#huvudmeny a[aria-current=page]{color:var(--ink);font-weight:700}
@media(max-width:899px){
  #huvudmeny{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px 20px;box-shadow:var(--sh-2)}
  header.top.nav-open #huvudmeny{display:flex}
  #huvudmeny a{padding:16px 0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--line-2);border-radius:0}
  #huvudmeny a:last-child{border-bottom:0}
  #huvudmeny a:hover{background:none}
}
@media(min-width:900px){.burger{display:none}}

html{scroll-padding-top:84px}
main.wrap{position:relative}
body:not([data-page=home]) header.top{border-bottom:1px solid var(--line)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink2);max-width:54ch;margin:0 0 20px}
/* A 1120 px column of 16 px text is about 135 characters a line. Only the prose that sits directly in <main> is narrowed;
   tables, the tool, the list and the grids keep the full width. */
main.wrap>p,main.wrap>ul li,main.wrap>ol li,main.wrap>dl dd,main.wrap>dl dt,.card p,.callout{max-width:var(--prose)}
.kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;margin:32px 0 0;max-width:60ch}
.kicker+.lead{margin-top:10px}
.disclosure a{white-space:nowrap}
.disclosure{display:block;background:none;border:0;padding:0;font-size:13.5px;line-height:1.5;color:var(--ink3);margin:14px 0 4px;max-width:none}

.adlabel{font-size:.85rem;color:var(--ink2);background:var(--accent-wash);padding:.6rem .9rem;margin:14px 0 0;border-radius:var(--r-ctl)}
.coverage,.note,.stamp{font-size:13.5px;color:var(--ink3)}
.note,.stamp,.coverage{max-width:68ch}
.map-note{margin-left:auto;margin-right:auto}
.stamp{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line-2)}
.note.block{display:block;margin-top:8px}
.note.tips{margin:10px 0 0}
.note.tips a{color:var(--ink2)}
.sub{display:block;font-size:13px;color:var(--ink3);font-weight:400}
.sub.inline{display:inline}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-strong);color:#fff;border:0;padding:13px 22px;font:700 15px var(--font-b);cursor:pointer;text-decoration:none;border-radius:var(--r-pill);min-height:48px}
.btn:hover{background:#1229A0}
.btn.small{padding:10px 16px;font-size:14px;min-height:44px}
.btn.secondary{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.btn.secondary:hover{background:var(--panel)}
.btn[disabled]{opacity:.6;cursor:default}
.link{background:none;border:0;padding:4px 0;margin:-4px 0;min-height:24px;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link:hover{color:var(--accent-strong)}
.link.small{font-size:14px}
.link.tiny{font-size:12.5px;font-weight:400}
.btn:focus-visible,.tab:focus-visible,.link:focus-visible,.expand:focus-visible,.chip:focus-visible,nav a:focus-visible,.share:focus-visible,.card:focus-visible,footer a:focus-visible,a:focus-visible,summary:focus-visible,.burger:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px var(--accent-wash)}
/* the ring follows the element's own shape; only text links and summaries, which have none, get soft corners */
a:not(.btn):not(.guide):not(.card):not(.tile):focus-visible,.link:focus-visible,summary:focus-visible{border-radius:6px}
/* Fingers, not pointers: WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px, and 44 is what a thumb actually wants. Only on touch, so mouse
   users do not get a page full of padding. */
@media(pointer:coarse){
  .chip,.tab,.btn,#huvudmeny a,.feedback .chip,summary,.check,label.check{min-height:46px}
  .chip,.tab,.btn,#huvudmeny a,.check,label.check{display:inline-flex;align-items:center}
  .expand,.link,.link.small,.link.tiny{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
  /* the footer link row reads as a list of destinations, not as prose, so the inline exception in SC 2.5.8 does not cover it */
  footer .footlinks a{display:inline-block;padding:6px 0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---------- the tool ---------- */
/* The form is the lifted surface, not the whole tool: the answer card and the list are their own cards on the ground.
   A single white slab from the postcode field to the footer made every row inside it edgeless. */
.tool{background:none;padding:0;margin:0 0 28px}
.inputs{display:grid;gap:18px;grid-template-columns:1fr;background:var(--paper);padding:24px;border-radius:var(--r-lift);box-shadow:var(--sh-2)}
@media(min-width:640px){.inputs{padding:32px}}
@media(min-width:640px){.inputs{grid-template-columns:1fr 1fr;align-items:start}.inputs .field.wide{grid-column:1/-1}.inputs .field[hidden]{display:none}}
.field label,.field legend{display:block;font-weight:700;font-size:15px;margin-bottom:7px}
.field input:not([type=radio]):not([type=checkbox]):not([type=range]),.field select{width:100%;padding:13px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-ctl);font:inherit;font-size:17px;font-weight:600;background:var(--paper);color:var(--ink);min-height:56px}
.field input:not([type=radio]):not([type=checkbox]):not([type=range]):focus,.field select:focus{border-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible,.toolbar input:focus-visible{outline:3px solid var(--focus);outline-offset:1px;box-shadow:0 0 0 5px var(--accent-wash)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.field-pnr{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"map lab" "map inp" "map area" "hint hint";column-gap:14px;align-items:start}
.field-pnr>label{grid-area:lab}
.field-pnr>#pnr{grid-area:inp}
.field-pnr>.area{grid-area:area}
.field-pnr>.hint{grid-area:hint}
/* the stamp-size map anchors the postcode field: four bands of real geometry, the visitor's filled in. A button, because it opens
   the same select as "byt elområde". */
.field-pnr>.semini{grid-area:map;align-self:center;display:block;width:44px;height:96px;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:6px}
.field .semini svg{display:block;width:100%;height:100%;overflow:visible}
.field .semini path{fill:#C9D3CD;stroke:var(--paper);stroke-width:.7;stroke-linejoin:round;transition:fill .25s}
.field .semini path.on{fill:var(--accent)}
.field .semini:hover path:not(.on){fill:var(--line-strong)}
.field .semini:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.field .area{display:block;font-size:13.5px;color:var(--ink);margin-top:8px;font-weight:700}
.field .area .link{color:var(--ink2);font-weight:400}
.field .area-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.field .area-cities{font-size:12.5px;font-weight:400;color:var(--ink3);line-height:1.35}
.field .hint{display:block;font-size:12.5px;color:var(--ink3);margin-top:6px}
.field .hint.warn{color:var(--warn);font-weight:700}
fieldset.field{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 12px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:11px 18px;font:600 14.5px var(--font-b);cursor:pointer;background:var(--paper);color:var(--ink);min-height:46px}
.chip:hover{border-color:var(--ink)}
.chip .sub{display:inline;font-size:13px;font-weight:400;color:var(--ink3)}
.chip.active{border-color:var(--dark);background:var(--dark);color:#fff;font-weight:700}
.chip.active .sub{color:rgba(255,255,255,.72)}
@media(max-width:639px){
  .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .chip{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:12px 14px;text-align:left}
  .chip .sub{display:block}
}
.inputs .field .kwh-val input.kwh{width:7ch;display:inline-block;padding:8px 10px;min-height:44px;text-align:right;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
/* Pill tabs. The underline tab needed a hairline rule under a scroller to read as a tab strip at all; a pill carries its own edge. */
.tabs{display:flex;gap:8px;margin:24px 0 12px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.tabs::-webkit-scrollbar{display:none}
.tab{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:10px 18px;font:600 14.5px var(--font-b);color:var(--ink2);cursor:pointer;white-space:nowrap;flex:0 0 auto;min-height:44px}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab .sub{display:inline;font-weight:400;font-size:12.5px;color:var(--ink3)}
.tab.active{color:#fff;background:var(--dark);border-color:var(--dark);font-weight:700}
.tab.active .sub{color:rgba(255,255,255,.7)}
.toolbar-wrap{margin:4px 0 0}
.toolbar-wrap>summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink2);padding:6px 0}
.toolbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:10px 0 8px}
.toolbar input[type=search]{flex:1 1 240px;padding:11px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-ctl);font:inherit;font-size:16px;background:var(--paper);color:var(--ink);min-height:48px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2);min-height:32px}
.listmeta{font-size:13.5px;color:var(--ink3);margin:10px 0 14px;max-width:72ch}

/* ---------- tables ---------- */
/* The scroller keeps a visible edge and a hint, because an invisible one reads as a broken page on a phone. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-1);margin:14px 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.prefixes td.pfx{white-space:normal;font-variant-numeric:tabular-nums;line-height:1.6}
.tablewrap th{min-width:6.5em}
th{font-weight:700;background:var(--panel);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
tbody tr:last-child td{border-bottom:0}
@media(max-width:639px){.tablewrap::after{content:"Dra i sidled för att se hela tabellen";display:block;padding:8px 16px;font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line-2);position:sticky;left:0}}

/* ---------- content ---------- */
.steps{padding-left:22px}
.steps li{margin:10px 0}
.facts{padding-left:20px}
.facts li{margin:10px 0}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:8px 24px 12px;margin:32px 0 0}
.faq>h2{margin-top:20px}
.faq details{border-bottom:1px solid var(--line-2);padding:14px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:700;font-size:16px}
.three,.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:32px 0}
.card{border:1px solid var(--line);background:var(--paper);padding:24px;text-decoration:none;color:var(--ink);border-radius:var(--r-lift);box-shadow:var(--sh-1)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55}
.callout{display:block;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--warn);padding:18px 20px;margin:32px 0;border-radius:var(--r-card);box-shadow:var(--sh-1);font-size:15px;color:var(--ink2)}
.callout strong{display:block;margin-bottom:6px;color:var(--ink)}
dl.ordlista dt{font-weight:700;margin-top:18px}
dl.ordlista dd{margin:2px 0 0;color:var(--ink2)}

/* ---------- alert form ---------- */
.bevaka{background:var(--accent-wash);color:var(--ink);padding:32px 28px;margin:40px 0;border-radius:var(--r-lift);border:1px solid #D3DED6}
@media(min-width:900px){.bevaka{padding:44px 48px}}
.bevaka h2{margin-top:0;color:var(--ink)}
.bevaka p{color:var(--ink2)}
.bevaka .note,.bevaka .hint{color:var(--ink3)}
.bevaka a{color:var(--ink2)}
.bevaka-form{display:grid;gap:14px;grid-template-columns:1fr;margin-top:20px}
@media(min-width:640px){.bevaka-form{grid-template-columns:1fr 1fr}.bevaka-form .consent,.bevaka-form button,.bevaka-form .note{grid-column:1/-1}.bevaka-form button{justify-self:start;min-width:280px}}
.bevaka-form .field label,.bevaka-form .field legend{color:var(--ink)}
.bevaka-form .field input{background:var(--paper);border-color:var(--line-strong)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink2)}
.bevaka .consent{color:var(--ink2)}
/* flex-shrink:0 and an explicit size: the global *{min-width:0} let this collapse to a 4 px sliver at every viewport width, on the one
   control that has to be ticked before anyone can sign up. */
.consent input{flex:0 0 auto;width:24px;height:24px;margin:0;accent-color:var(--accent-strong)}
.check input{flex:0 0 auto;width:24px;height:24px;accent-color:var(--accent-strong)}
.result-msg{background:var(--accent-wash);color:var(--ink);padding:14px 16px;margin:14px 0;border-radius:var(--r-ctl)}

/* ---------- consent banner (own, no third-party script) ---------- */
.consent-banner{position:fixed;right:16px;bottom:16px;left:16px;max-width:460px;margin-left:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lift);padding:22px;box-shadow:0 12px 40px rgba(15,34,48,.20);z-index:25;font-size:14px;color:var(--ink2)}
.consent-banner h2{font-size:19px;margin:0 0 8px}
.consent-banner p{margin:0 0 12px}
.consent-settings{display:grid;gap:8px;margin:0 0 14px;padding:14px;background:var(--ground);border-radius:var(--r-ctl)}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.consent-actions .btn{padding:11px 18px;font-size:14px}
@media(max-width:639px){.consent-banner{left:8px;right:8px;bottom:8px;max-width:none}.consent-actions .btn{flex:1 1 45%}}
@media print{.consent-banner{display:none}}

/* ---------- charts ---------- */
.charts{margin:16px 0 4px;display:grid;gap:16px;grid-template-columns:1fr}
.charts .legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13.5px;color:var(--ink2);margin:0 0 6px}
.charts .key{display:inline-block;width:18px;height:3px;background:var(--c);border-radius:2px;margin-right:7px;vertical-align:middle}
@media(min-width:640px){.charts{grid-template-columns:1fr 1fr}.charts .legend,.charts .note{grid-column:1/-1}}
.chart{margin:0;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:16px 16px 8px}
.chart figcaption{font-weight:700;font-size:15px;margin:0 0 6px}
.chart svg{width:100%;height:auto;display:block;font-family:var(--font-b)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:0;padding:44px 0 40px;font-size:13.5px;color:var(--ink3);background:var(--paper)}
.foot-top{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
@media(min-width:820px){.foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px}}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px}
@media(min-width:820px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-cols .foot-h{font-family:var(--font-b);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.foot-cols a,.foot-cols button.link{display:inline-block;min-height:24px;padding:1px 0}
.foot-cols button.link{color:var(--ink2);font-size:14.5px;text-decoration:none;margin:0;line-height:inherit}
.foot-cols button.link:hover{text-decoration:underline;text-underline-offset:3px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-cols a{color:var(--ink2);font-size:14.5px;text-decoration:none}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-legal{border-top:1px solid var(--line-2);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.foot-legal p{margin:0;max-width:96ch}
footer a{color:var(--ink2)}
footer .promise{font-family:var(--font-d);font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px;max-width:22ch}
footer .footlinks{color:var(--ink2)}
footer .footlinks a{color:var(--ink2)}
@media print{header.top,footer,.bevaka,.howto,.savings,.three,.callout,.toolbar,.tabs,.chips,.note.tips{display:none!important}body{background:#fff}main.wrap::before{display:none}.tool{border:0;padding:0;box-shadow:none}.row{break-inside:avoid;box-shadow:none}}

/* ---------- the answer card: the one place amber is a surface ---------- */
.answer{margin:40px 0 4px;background:var(--paper);border-radius:var(--r-lift);box-shadow:var(--sh-2);overflow:hidden}
.answer-kicker{margin:0;background:var(--band);color:var(--ink);padding:16px 22px;border-bottom:1px solid #D3DED6;font-family:var(--font-b);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.answer-kicker::before{content:"";width:26px;height:4px;border-radius:var(--r-pill);background:var(--accent);flex:0 0 auto}
.answer-kicker span{text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink)}
.answer-grid{display:grid;gap:0;grid-template-columns:1fr 1fr}
@media(min-width:900px){.answer-grid{grid-template-columns:repeat(4,1fr)}}
.answer-item{padding:20px 22px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.answer-item:nth-child(2n){border-right:0}
@media(min-width:900px){.answer-item{border-bottom:0}.answer-item:nth-child(2n){border-right:1px solid var(--line-2)}.answer-item:last-child{border-right:0}}
.answer-item .lbl{display:block;font-size:13px;font-weight:600;color:var(--ink3)}
.answer-item strong{display:block;font-family:var(--font-d);font-size:clamp(30px,3vw,40px);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin:10px 0 8px;font-variant-numeric:tabular-nums;text-wrap:balance}
.answer-item strong .unit{font-family:var(--font-b);font-size:16px;font-weight:600;color:var(--ink2)}
.answer-item .sub{font-size:13.5px;color:var(--ink2);line-height:1.45}
.answer-incl{margin:0;padding:16px 22px;background:var(--ground);font-size:14.5px;color:var(--ink2);border-top:1px solid var(--line-2)}
.answer-incl{max-width:none}
.answer-incl>span{display:block;max-width:72ch}
.helper{margin:0;border-top:1px solid var(--line-2);padding:16px 22px;font-size:14.5px}
.helper summary{cursor:pointer;font-weight:700;color:var(--ink);padding:6px 0;min-height:32px}
.helper-q{margin:14px 0 4px}
.helper-q .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.helper-out{margin:10px 0 4px;color:var(--ink)}
.helper-out .sub{margin-top:4px}
.answer-method{margin:0;padding:14px 22px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink3)}
.bevaka-form>p,.bevaka-form>h2,.bevaka>p,.bevaka-text>p{max-width:var(--prose)}
.answer-method a{color:var(--ink3)}
.tab.rec::after{content:"Enligt dina svar";display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:2px 7px;border-radius:5px;vertical-align:middle;font-weight:700}
.share{margin-left:auto;font-size:14px}
.feedback{font-size:14px;color:var(--ink2);margin:20px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feedback .chip{padding:6px 14px;font-size:13.5px;min-height:40px}
/* Bottom, not top: at the top it covered row 1 of the list, which is the row it repeats. The wrap already ends in 80 px of padding, so
   nothing is hidden behind it at the end of the page. */
.sticky-answer{position:fixed;left:0;right:0;bottom:0;z-index:18;background:var(--dark);color:#fff;font-size:14.5px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 -4px 20px rgba(15,34,48,.25);padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.sticky-answer strong{color:#A9C4FF;font-weight:700}
.sticky-answer .link{color:#fff}
.sticky-answer[hidden]{display:none}
@media(min-width:760px){.sticky-answer{display:none!important}}
.areatool{max-width:560px}
.answer-big{font-family:var(--font-d);font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.02em;margin:18px 0 10px}
.answer-big .sub{font-family:var(--font-b);font-size:14px;font-weight:400}
.sub.warn{color:var(--warn)}
/* The only movement on the site: the rows settle when the numbers change. prefers-reduced-motion removes it above. */
@keyframes rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.list .row{animation:rise .18s ease-out both}
/* Dark mode removed 3 Sep 2026 on the founder's instruction after seeing it ("skippa detta svarta mörka temat"). The production
   site is light only: direction A is ink on paper, and a system setting that repaints the paper black is a different brand.
   If it comes back it needs its own contrast pass and its own decision; tests/test_build.py fails on a dark palette. */

/* ---------- cross-links between the elområde x boende pages ---------- */
.arealinks{margin:40px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:8px 24px 20px}
.arealinks h2{font-size:20px;margin-top:20px}
.linkgrid{list-style:none;padding:0;margin:10px 0 6px;display:grid;gap:8px 18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.linkgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.linkgrid li{font-size:14.5px}
.linkgrid strong{color:var(--ink3);font-weight:700}
table .sub{display:block;font-size:12.5px;color:var(--ink3)}
.stamp.warn-stale{color:var(--warn);border-top-color:var(--warn);font-weight:600}
.stamp.warn-stale a{color:var(--warn)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================================================================
   v12 (7 Sep 2026): the graphic layer. Sections are full-bleed inside the 1120 px column (negative margins), each with a
   head (kicker, h2, one lead line) and a body that differs: map, heat map, chart card, bars, guides. Every figure is
   built from Ei's file at build time; the motion is CSS on a class the browser adds when the element scrolls into view.
   ===================================================================================================================== */
.ic{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.tnum{font-variant-numeric:tabular-nums}
.sec{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:56px 0}
@media(min-width:900px){.sec{padding:80px 0}}
.sec-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-band{background:var(--band)}
.wrap-in{max-width:var(--col);margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap-in{padding:0 24px}}
.sec-head{max-width:64ch;margin:0 0 32px}
.sec-head h2{margin:8px 0 12px}
.sec-head .kicker{margin:0}
.sec-lead{font-size:17px;line-height:1.6;color:var(--ink2);margin:0}
.sec .btn{margin-top:8px}

/* ---------- hero ---------- */
.tool.has-hero{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.tool.has-hero .tool-body{max-width:var(--col);margin:0 auto;padding:0 20px}
@media(min-width:900px){.tool.has-hero .tool-body{padding:0 24px}}
.tool:not(.has-hero) .wrap-in{max-width:none;padding:0}
.hero{position:relative;background:var(--band);overflow:hidden}
.hero-in{position:relative;max-width:var(--col);margin:0 auto;padding:44px 20px 40px;display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:64px;align-items:center;padding:72px 24px 64px}}
.hero-text h1{margin:0 0 16px}
.hero-text .lead{margin:0 0 22px}
.proof{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.proof li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink);max-width:46ch}
.proof .ic{color:var(--accent-strong);margin-top:.2em;stroke-width:2.4}
.hero-card .inputs{margin:0}
/* photo mode: the image sits under a scrim and the text turns white; the card stays white. Switches on when assets-src/hero.jpg exists. */
.hero-photo .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,34,48,.72) 0%,rgba(15,34,48,.5) 50%,rgba(15,34,48,.28) 100%)}
/* stacking: ::before is the first child and the img the second, so without z-index the photo painted OVER the scrim (seen live 8 Sep 2026,
   white headline on a sunlit facade). The scrim sits above the photo and the text and card above both. */
.hero-photo .hero-in{position:relative;z-index:2}
.hero-photo .hero-text,.hero-photo .hero-text h1,.hero-photo .lead,.hero-photo .proof li{color:#fff}
.hero-photo .lead{color:rgba(255,255,255,.86)}
.hero-photo .proof .ic{color:#A9C4FF}
@media(max-width:999px){.hero-photo::before{background:linear-gradient(180deg,rgba(15,34,48,.72),rgba(15,34,48,.55))}}
/* the photo drifts a little slower than the page (a scroll-driven animation: no JavaScript, no scroll listener, nothing on the main
   thread), slightly enlarged so its edges never show. Browsers without animation-timeline, and reduced motion, get the still image. */
@supports(animation-timeline:scroll()){
  .hero-photo .hero-img{animation:hero-par linear both;animation-timeline:scroll(root);animation-range:0 700px;will-change:transform}
  @keyframes hero-par{from{transform:translateY(0) scale(1.06)}to{transform:translateY(110px) scale(1.06)}}
}
@media(prefers-reduced-motion:reduce){.hero-photo .hero-img{animation:none!important}}
/* stats strip under the hero */
.stats{max-width:var(--col);margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transform:translateY(-1px)}
@media(min-width:900px){.stats{padding:0 24px;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic n" "ic l";column-gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--sh-1);margin-top:24px}
.stat-ic{grid-area:ic;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--band);color:var(--accent-strong)}
.stat-n{grid-area:n;font-family:var(--font-d);font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat-l{grid-area:l;font-size:12.5px;color:var(--ink3);line-height:1.3}

/* ---------- the input card: presets as a grid of icon chips ---------- */
.field label .ic,.field legend .ic{color:var(--accent-strong);margin-right:4px}
.chips.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 14px}
@media(min-width:640px){.chips.presets{grid-template-columns:repeat(4,minmax(0,1fr))}}
.chips.presets .chip{flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:14px;text-align:left;min-height:82px;justify-content:flex-start}
.chips.presets .chip .ic{color:var(--accent-strong);margin-bottom:2px}
.chips.presets .chip.active .ic{color:#A9C4FF}
.chips.presets .chip .chip-t{font-weight:700;font-size:14.5px;line-height:1.2}
.chips.presets .chip .sub{display:block;font-size:12.5px}

/* ---------- answer card additions ---------- */
.answer-item.primary{background:var(--ground)}
.answer-item.primary strong{font-size:clamp(34px,3.4vw,44px)}
.tile-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 0;min-height:32px;font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;transition:color .15s ease}
.tile-link:hover{color:var(--accent-strong)}
.mini-bars{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.mb{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3)}
.mb-t{height:8px;background:var(--panel);border-radius:999px;overflow:hidden}
.mb-f{display:block;height:100%;border-radius:999px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.mb-f.a{background:#1E3FE0}.mb-f.b{background:#3E8E5E}
.mb-v{font-weight:700;color:var(--ink)}
.spark-wrap{display:block;margin-top:10px}
.spark{display:block;width:100%;height:40px}
.spark-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink3);margin-top:4px}
.spark-key>span{white-space:nowrap}
.spark-key i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.spark-key i.a{background:#1E3FE0}.spark-key i.b{background:#3E8E5E}
.spreadwrap{padding:18px 22px 6px;border-top:1px solid var(--line-2)}
.spread-labels{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink3);margin-bottom:2px}
.spread-labels b{color:var(--ink);font-size:15px}
.spread-labels .sp-med{text-align:center}.spread-labels .sp-max{text-align:right}
.spread{display:block;width:100%;height:30px}
.spread-cap{margin:2px 0 8px;font-size:13.5px;color:var(--ink2)}
.helper summary .ic{color:var(--accent-strong);margin-right:6px}

/* ---------- list ---------- */
.list-head{margin:28px 0 6px}
.tabs{margin:0 0 6px}
.tab .ic{margin-right:6px;color:var(--ink3)}
.tab.active .ic{color:#A9C4FF}
.tabs-note{margin:0;font-size:13px;color:var(--ink3)}
.toolbar-wrap>summary .ic{margin-right:6px;color:var(--ink3)}
.check .ic{color:#256A4C;margin-right:2px}
.list{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lift);box-shadow:var(--sh-1);overflow:hidden}
.list>.note{padding:18px 22px;margin:0}
.row{border-top:1px solid var(--line-2);position:relative}
.row:first-child{border-top:0}
.rowbtn{display:grid;grid-template-columns:28px 44px minmax(0,1fr) auto 24px;grid-template-areas:"rank mono who price open";align-items:center;gap:12px;width:100%;padding:16px 18px;background:none;border:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
@media(min-width:760px){.rowbtn{grid-template-columns:32px 44px minmax(0,1fr) auto 28px;gap:16px;padding:18px 24px}}
.rowbtn:hover{background:var(--ground)}
.row.first{background:var(--accent-wash)}
.row.first .rowbtn:hover{background:#E3E9FA}
.row.first::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-strong)}
.row .rank{grid-area:rank;font-size:13.5px;font-weight:700;color:var(--ink3);text-align:center;font-variant-numeric:tabular-nums}
.row.first .rank{color:var(--accent-strong)}
.mono{grid-area:mono;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink);border:1px solid rgba(15,34,48,.06)}
.mono.has-logo{background:var(--paper);padding:5px;border-color:var(--line)}
.mono.has-logo img{width:100%;height:100%;object-fit:contain;display:block}
.logos{padding:6px 0 26px}
.logos .lbl{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.logo-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:center}
.logo-row li{display:flex;align-items:center}
.logo-row img{height:28px;width:auto;max-width:120px;object-fit:contain}
.logos .note{text-align:center;margin:14px auto 0;max-width:62ch}
.mono.m0{background:#E6EEE6}.mono.m1{background:#E9EEF3}.mono.m2{background:#EAF1E8}.mono.m3{background:#F1EEE3}.mono.m4{background:#E7EBF8}.mono.m5{background:#EBEFEA}
.row .who{grid-area:who;min-width:0}
.row .who strong{display:block;font-size:16px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:760px){.row .who strong{font-size:17px}}
.row .who .sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.row .price{grid-area:price;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .price strong{font-size:19px;font-weight:800;letter-spacing:-.01em}
@media(min-width:760px){.row .price strong{font-size:22px}}
.row .price .unit{font-size:13px;font-weight:600;color:var(--ink2)}
.row .price .sub{display:block}
@media(max-width:759px){.row .price .sep,.row .price .ore{display:none}}
@media(max-width:899px){.tabs{flex-wrap:wrap;overflow:visible}}
.row .open{grid-area:open;color:var(--ink3);display:inline-flex;justify-content:flex-end;transition:transform .2s}
.row.open .open{transform:rotate(180deg)}
.row .cta{padding:0 18px 14px 84px}
@media(min-width:760px){.row .cta{position:absolute;right:64px;top:50%;transform:translateY(-50%);padding:0}.row.open .cta{position:static;transform:none;padding:0 24px 12px 108px}}
.row .cta .btn{background:var(--dark);min-height:40px;padding:8px 14px;font-size:13.5px}
.row .cta .btn:hover{background:#1D3447}
@media(min-width:760px){.row.partner .rowbtn{padding-right:220px}.row.partner.open .rowbtn{padding-right:24px}}
.panel{background:var(--ground);border-top:1px solid var(--line-2)}
.p-in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px}
@media(min-width:760px){.p-in{padding:22px 24px 24px 108px}}
.p-head .lbl{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.p-head .sub{display:block;font-size:14px;color:var(--ink2)}
.p-build{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.p-build .lbl{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.p-build b{color:var(--ink)}
.p-others .lbl{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.p-others .other{border-top:1px solid var(--line-2);padding:9px 0}
.p-others .other:first-of-type{border-top:0}
.p-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.p-actions .btn{min-height:46px}
.p-actions .btn.partner{background:var(--dark)}
.p-note{margin:0}
.sub.low{color:var(--warn)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent-wash);color:var(--accent-strong);padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}

/* ---------- the four areas ---------- */
.area-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media(min-width:900px){.area-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px;align-items:center}}
.area-map{max-width:380px;margin:0 auto}
.semap{width:100%;height:auto;display:block}
.zone{cursor:pointer;outline:none}
.zone .zone-fill{fill:var(--panel);transition:fill .25s}
.zone[data-zone=SE1] .zone-fill{fill:#E4ECE5}.zone[data-zone=SE2] .zone-fill{fill:#D5E3D8}.zone[data-zone=SE3] .zone-fill{fill:#C5D8CA}.zone[data-zone=SE4] .zone-fill{fill:#B3CDB9}
.zone:hover .zone-fill,.zone:focus-visible .zone-fill{fill:#CFE0D3}
.zone.active .zone-fill{fill:var(--accent-strong)}
.zone-border{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.zone-t{font:700 11.5px var(--font-b);fill:var(--ink3);pointer-events:none}
.zone-v{font:800 17px var(--font-b);fill:var(--ink);pointer-events:none;font-variant-numeric:tabular-nums}
.zone-u{font:500 10px var(--font-b);fill:var(--ink3);pointer-events:none}
.zone-lead{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 3}
.zone-dot{fill:var(--ink3);stroke:var(--paper);stroke-width:1.5}
.zone.active .zone-t,.zone.active .zone-v{fill:var(--accent-strong)}
.zone.active .zone-dot{fill:var(--paper);stroke:var(--accent-strong)}
.zone.active .zone-lead{stroke:var(--accent-strong);stroke-dasharray:none}
.map-note{margin:10px 0 0;text-align:center}
/* the map draws itself on reveal: zones fade in north to south, then the borders are drawn as lines */
[data-draw] .zone{transition:opacity .5s ease}
[data-draw]:not(.in) .zone{opacity:0}
[data-draw] .zone[data-zone=SE2]{transition-delay:.12s}[data-draw] .zone[data-zone=SE3]{transition-delay:.24s}[data-draw] .zone[data-zone=SE4]{transition-delay:.36s}
[data-draw] .zone-border{stroke-dasharray:320;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1) .4s}
[data-draw]:not(.in) .zone-border{stroke-dashoffset:320}
.area-heat h3{margin:0 0 12px;font-size:17px}
.heatwrap{overflow-x:auto}
.heat{border-collapse:separate;border-spacing:3px;width:100%;min-width:520px;font-size:12.5px;font-variant-numeric:tabular-nums}
.heat th{font-weight:700;color:var(--ink3);text-align:center;padding:2px 0;background:none;border:0;text-transform:none;letter-spacing:0;font-size:12px}
.heat th[scope=row]{text-align:left;padding-right:6px;color:var(--ink)}
.heat td{text-align:center;padding:0;border:0;border-radius:6px;height:38px;font-weight:700;transition:transform .35s,opacity .5s}
[data-reveal]:not(.in) .heat td{opacity:0;transform:scale(.7)}
.heat td:nth-child(2){transition-delay:.05s}.heat td:nth-child(3){transition-delay:.1s}.heat td:nth-child(4){transition-delay:.15s}.heat td:nth-child(5){transition-delay:.2s}.heat td:nth-child(6){transition-delay:.25s}.heat td:nth-child(7){transition-delay:.3s}.heat td:nth-child(8){transition-delay:.35s}.heat td:nth-child(9){transition-delay:.4s}.heat td:nth-child(10){transition-delay:.45s}.heat td:nth-child(11){transition-delay:.5s}.heat td:nth-child(12){transition-delay:.55s}.heat td:nth-child(13){transition-delay:.6s}
.heatwrap .note{margin-top:10px}

/* ---------- chart card (market, facit) ---------- */
.chart-card{padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r-lift);box-shadow:var(--sh-1);background:var(--paper)}
@media(min-width:900px){.chart-card{padding:26px 28px 20px}}
.chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.chart-now{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chart-now>div{flex:1 1 180px;min-width:0;max-width:max-content}
.chart-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--band);color:var(--accent-strong)}
.chart-now .lbl{display:block;font-size:13px;color:var(--ink3)}
.big{display:block;font-family:var(--font-d);font-size:30px;font-weight:700;line-height:1.05;letter-spacing:-.015em}
.big small{font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--ink2)}
.pill{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--panel);color:var(--ink2)}
.pill.down{background:#E6F2EC;color:#256A4C}.pill.up{background:#FBEBD9;color:#8A5A00}
.seg{display:inline-flex;background:var(--panel);border-radius:999px;padding:3px}
.seg-b{border:0;background:none;padding:7px 14px;border-radius:999px;font:700 13px var(--font-b);color:var(--ink2);cursor:pointer;min-height:36px}
.seg-b:hover{color:var(--ink);background:rgba(15,34,48,.06)}
.spot-card.dark .seg-b:hover{color:#fff;background:rgba(255,255,255,.1)}
.seg-b.active{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
.chart-body svg.market{width:100%;height:auto;display:block;font-family:var(--font-b)}
/* charts come in two boxes, 720 units for desktop and 360 for phones, so axis text keeps a readable size; one is shown at a time */
@media(max-width:639px){.fig-wide{display:none!important}}
@media(min-width:640px){.fig-narrow{display:none!important}}
.chart-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.chart-foot .lbl{display:block;font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.chart-foot .tnum{display:block;font-size:17px;font-weight:800;margin:2px 0;white-space:nowrap}
@media(max-width:479px){.chart-foot .tnum{font-size:15px}.chart-foot{gap:8px}}
.chart-foot .sub{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the spot card: today's day-ahead price, quarter by quarter (app.js fills it from /api/spot; hidden until it has data) */
.spot-card{margin-bottom:22px}
.chart-body svg.spot{width:100%;height:auto;display:block;font-family:var(--font-b)}
.spot-grid{stroke:var(--line-2)}
.spot-ax{font-size:11px;fill:var(--ink3)}
.spot-fill{fill:var(--accent-wash)}
.spot-line{stroke:var(--ink);stroke-width:1.75;stroke-linejoin:round;stroke-dasharray:3000}
[data-draw]:not(.in) .spot-line{stroke-dashoffset:3000}
.spot-bar{fill:var(--accent-strong);opacity:.9}
.spot-now{fill:var(--accent-strong);stroke:var(--paper);stroke-width:2}
.spot-pulse circle{fill:var(--accent-strong);opacity:.45;transform-box:fill-box;transform-origin:center;animation:spot-pulse 2.2s ease-out infinite}
@keyframes spot-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.2);opacity:0}}
.spot-nowlbl{font-size:11px;font-weight:800;fill:var(--accent-strong);letter-spacing:.04em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){[data-draw]:not(.in) .spot-line{stroke-dashoffset:0}.spot-pulse circle{animation:none;opacity:0}}
.chart-note{margin:12px 0 0}
/* draw-in: lines and bars animate the first time the card scrolls into view */
[data-draw] .mk-line,[data-draw] .market path[stroke-dasharray]{stroke-dasharray:2000;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1)}
[data-draw]:not(.in) .mk-line{stroke-dashoffset:2000}
[data-draw] .facitsvg rect{transform-origin:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
[data-draw]:not(.in) .facitsvg rect{transform:scaleY(0)}
[data-draw] .hbar-f{transition:width 1s cubic-bezier(.2,.7,.2,1)}
[data-draw]:not(.in) .hbar-f{width:0!important}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}[data-draw]:not(.in) .zone{opacity:1}[data-draw]:not(.in) .zone-border{stroke-dashoffset:0}[data-draw]:not(.in) .mk-line{stroke-dashoffset:0}[data-draw]:not(.in) .facitsvg rect{transform:none}[data-draw]:not(.in) .hbar-f{width:auto}[data-reveal]:not(.in) .heat td{opacity:1;transform:none}}

/* facit */
.facit-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
@media(min-width:1000px){.facit-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px}}
.facit-text h2{margin:8px 0 12px}
.facit-stats{display:flex;flex-direction:column;gap:14px;margin:22px 0 26px}
.facit-stats>div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.facit-stats .big{font-size:28px;white-space:nowrap}
.facit-stats .sub{font-size:14px;color:var(--ink2)}
.facitsvg{width:100%;height:auto;display:block;font-family:var(--font-b)}
.facit-card .chart-head .lbl{font-size:13px;color:var(--ink3)}

/* anvisat bars */
.anv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media(min-width:1000px){.anv-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px}.anv-grid>div:first-child{order:2}}
.hbars{padding:24px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);border-radius:var(--r-lift);box-shadow:var(--sh-1);background:var(--paper)}
.hbar{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;font-size:14px}
@media(min-width:640px){.hbar{grid-template-columns:200px 1fr 92px;align-items:center;gap:14px}}
.hbar-l{color:var(--ink2)}
.hbar-t{display:block;height:14px;background:var(--panel);border-radius:999px;overflow:hidden}
.hbar-f{display:block;height:100%;border-radius:999px}
.hbar-v{font-weight:800;text-align:right}
.hbars .note{margin:4px 0 0}

/* guides */
.guides{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:640px){.guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.guides{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the same card on a plain page (the hub, Aktuellt): paper on the ground, a little air above and below, two columns when there are two */
.guides-hub{margin:20px 0 40px}
.guides-hub .guide{background:var(--paper);box-shadow:var(--sh-1)}
@media(min-width:640px){.guides.guides-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.guides-hub .guide p{max-width:44ch}
/* on a phone eight stacked cards would be a long page: the icon moves to the left and the card keeps to four lines */
@media(max-width:639px){.guides-hub .guide{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;padding:18px 20px}.guides-hub .guide .guide-ic{grid-row:1/4}.guides-hub .guide .guide-n{margin-top:0;font-size:18px}}
.guide{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--ground);border:1px solid var(--line);border-radius:var(--r-lift);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.guide:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.guide-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--band);color:var(--accent-strong)}
.guide-n{font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:6px}
.guide h3{margin:0;font-size:17px}
.guide p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}

/* faq, numbered, no frame */
.sec .faq{background:none;border:0;box-shadow:none;padding:0;margin:0;max-width:820px}
.sec .faq details{border-top:1px solid var(--line);padding:0}
.sec .faq details:last-child{border-bottom:1px solid var(--line)}
.sec .faq summary{display:grid;grid-template-columns:36px 1fr 24px;align-items:center;gap:12px;padding:18px 0;font-size:16px;list-style:none;cursor:pointer}
.sec .faq summary::-webkit-details-marker{display:none}
.faq-n{font-size:13px;font-weight:700;color:var(--accent-strong)}
.faq-ch{color:var(--ink3);transition:transform .2s}
.sec .faq details[open] .faq-ch{transform:rotate(180deg)}
.sec .faq details p{margin:0 0 18px 48px;max-width:68ch;color:var(--ink2)}

/* bevaka as a band */
.sec-band .bevaka{margin:0;background:none;border:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
@media(min-width:900px){.sec-band .bevaka{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px}}
.sec-band .bevaka h2{margin:0 0 12px}
.sec-band .bevaka-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lift);padding:22px;box-shadow:var(--sh-2);margin:0}
@media(min-width:640px){.sec-band .bevaka-form{padding:26px}}

.sec .callout{margin:28px 0 0;position:relative;padding:20px 22px 20px 78px}
.sec .callout::before{content:"";position:absolute;left:22px;top:20px;width:40px;height:40px;border-radius:12px;background:var(--band);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6412' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 0 1 2-2h2.5l1.5 4-2 1.5a12 12 0 0 0 6 6L14.5 13l4 1.5V17a2 2 0 0 1-2 2A13.5 13.5 0 0 1 3 5Z'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px}

@media(max-width:639px){.sec .callout{padding:66px 18px 18px 18px}.sec .callout::before{left:18px;top:18px}}

/* ---------- the story page (/sa-fungerar-elpriset/): a figure that stays put, steps that scroll past it and set its state ---------- */
.story-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent-strong);transform-origin:left;transform:scaleX(0);z-index:60;pointer-events:none}
@supports(animation-timeline:scroll()){.story-progress{animation:story-prog linear both;animation-timeline:scroll(root)}@keyframes story-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
.story-hero{max-width:66ch;padding:40px 0 12px}
@media(min-width:900px){.story-hero{padding:64px 0 24px}}
.story-hero h1{font-size:clamp(36px,6.4vw,64px);line-height:1.02;margin:10px 0 20px;letter-spacing:-.01em}
.story-hero .lead{color:var(--ink2);max-width:60ch}
.story-meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:13.5px;color:var(--ink3);margin:18px 0 0}
.story-meta span{display:inline-flex;align-items:center;gap:6px}
.story-sources{max-width:70ch;margin:28px 0 0}
.story-meta .ic{vertical-align:-3px;margin-right:4px;color:var(--accent-strong)}
.story-ch{position:relative;margin:8px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.story-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}}
.story-fig{position:sticky;top:58px;z-index:2;background:var(--ground);padding:8px 0 8px}
@media(min-width:900px){.story-fig{top:clamp(92px,calc(50vh - 290px),200px);order:2;padding:12px 0 0;background:none}}
.story-fig .kicker{margin:0 0 8px}
.fig-card{padding:16px 16px 12px}
@media(min-width:900px){.fig-card{padding:22px 22px 16px}}
.fig-card svg{width:100%;height:auto;display:block;font-family:var(--font-b)}
.fig-card .semap{max-width:360px;margin:0 auto}
.fig-card .note{margin:10px 0 0}
.fig-card .hbars{border:0;box-shadow:none;padding:0}
.story-steps{position:relative;z-index:1}
.step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:18px 0;transition:opacity .45s ease}
@media(min-width:900px){.step{min-height:68vh;padding:40px 0}}
.story-js .step:not(.is-active){opacity:.32}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--accent-wash);color:var(--accent-strong);font:800 13px var(--font-b);margin-bottom:14px}
.step h2{font-size:clamp(24px,3.2vw,34px);line-height:1.15;margin:0 0 12px;letter-spacing:-.005em}
.step p{font-size:17px;line-height:1.65;color:var(--ink2);max-width:46ch;margin:0}
/* markers: each figure carries every state, the chapter's data-state picks one */
.st{opacity:0;transition:opacity .4s ease}
[data-state="b"] .st-b,[data-state="c"] .st-c,[data-state="d"] .st-d{opacity:1}
.spot-avg{stroke:var(--accent-strong);stroke-width:1.75;stroke-dasharray:6 5}
.bill{opacity:0;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transform:translateY(8px)}
.bill-1,[data-state="b"] .bill-2,[data-state="c"] .bill-2,[data-state="d"] .bill-2,[data-state="c"] .bill-3,[data-state="d"] .bill-3{opacity:1;transform:none}
[data-state="d"] .bill-2,[data-state="d"] .bill-3{opacity:.35}
.bill-v{font:800 17px var(--font-b);fill:var(--ink);font-variant-numeric:tabular-nums}
.bill-l{font:500 12.5px var(--font-b);fill:var(--ink3)}
.bill-brace{font:800 11px var(--font-b);fill:var(--accent-strong);letter-spacing:.06em;text-transform:uppercase}
.story-ch .mk-fixed{transition:opacity .4s ease}
.story-ch .mk-line:not(.on),.story-ch .mk-lbl:not(.on){display:none}
[data-state="a"] .mk-fixed{opacity:0}
.facit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.facit-row .lbl{display:block;font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.facit-row .tnum{display:block;font-size:17px;font-weight:800;margin:2px 0}
[data-state="d"] .facit-row{opacity:1}
.story-close{margin-top:24px}
.story-close-in{max-width:66ch}
.story-close h2{font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin:8px 0 14px}
.story-form{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 10px}
.story-form input{flex:1 1 200px;min-width:0;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:12px;font:600 17px var(--font-b);background:var(--paper);color:var(--ink)}
.story-form input:focus{outline:2px solid var(--accent-strong);outline-offset:2px}
.story-form .btn{flex:0 0 auto}
/* on a phone the figure keeps to the top ~45 % of the screen so the step text always has room under it; the notes move to the sources line */
@media(max-width:899px){.fig-card{padding:12px 12px 8px}.fig-card .semap{max-width:220px}.fig-card .note{display:none}.fig-card .hbars .note{display:none}.step{justify-content:flex-end;min-height:62vh;padding:0 0 36px}}
@media(prefers-reduced-motion:reduce){.st,.bill,.step,.story-ch .mk-fixed{transition:none}.story-progress{animation:none}}

/* ---------- v16: the page is light in every mode. "only light" keeps form controls, scrollbars and Chrome's auto-dark from
   inverting the palette on phones set to dark mode; selection, tap highlight and native controls take the accent. ---------- */
:root{color-scheme:only light}
html{-webkit-tap-highlight-color:rgba(30,63,224,.14)}
::selection{background:#D9E2FA;color:var(--ink)}
input,select,textarea,progress{accent-color:var(--accent-strong)}
/* ---------- v15: balance. One dark surface for today, split sections that alternate sides, tiles instead of number paragraphs,
   compact tables that fit a phone, two columns for the glossary, letters in the directory, the explainer's figure changing side. ---------- */
.kicker+h2{margin-top:6px}
/* the spot card is the one dark surface on the start page: today, above the paper card with two years of history */
.spot-card.dark{background:var(--dark);border-color:var(--dark);color:#EEF3F8;box-shadow:var(--sh-2)}
.spot-card.dark .chart-ic{background:rgba(255,255,255,.1);color:#A9C4FF}
.spot-card.dark .chart-now .lbl,.spot-card.dark .chart-foot .lbl,.spot-card.dark .chart-foot .sub,.spot-card.dark .note{color:rgba(238,243,248,.74)}
.spot-card.dark .big,.spot-card.dark .chart-foot .tnum{color:#fff}
.spot-card.dark .big small{color:rgba(238,243,248,.74)}
.spot-card.dark .pill{background:rgba(255,255,255,.12);color:#EEF3F8}
.spot-card.dark .seg{background:rgba(255,255,255,.12)}
.spot-card.dark .seg-b{color:rgba(238,243,248,.82)}
.spot-card.dark .seg-b.active{background:#EEF3F8;color:var(--ink)}
.spot-card.dark .chart-foot{border-top-color:rgba(255,255,255,.14)}
.spot-card.dark .note a{color:#A9C4FF}
.spot-card.dark .spot-grid{stroke:rgba(255,255,255,.12)}
.spot-card.dark .spot-ax{fill:rgba(238,243,248,.7)}
.spot-card.dark .spot-fill{fill:rgba(143,184,255,.18)}
.spot-card.dark .spot-line{stroke:#A9C4FF}
.spot-card.dark .spot-bar{fill:#F2CC5A}
.spot-card.dark .spot-now{fill:#F2CC5A;stroke:var(--dark)}
.spot-card.dark .spot-pulse circle{fill:#F2CC5A}
.spot-card.dark .spot-nowlbl{fill:#A9C4FF}
.spot-card.dark .ctip{background:#fff;color:var(--ink)}
.spot-card.dark .ctip b{color:var(--accent-strong)}
.spot-card.dark .ctip .k{background:var(--accent-strong)}
.spot-card.dark .ctip-x{stroke:#EEF3F8}
.spot-card.dark .ctip-dot{fill:#F2CC5A;stroke:var(--dark)}
/* stat tiles in the flow of a text page (the three cheapest on an area page, the numbers on /om/) */
.stats.in-page{padding:0;transform:none;margin:24px 0 8px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.stats.in-page{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media(min-width:900px){.stats.in-page{padding:0}}
.stats.in-page .stat{margin-top:0;align-items:start}
.stats.in-page .stat-l{font-size:13px;line-height:1.4}
.stats.in-page .stat-n .unit{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink3);margin-left:2px}
/* two compact tables side by side; the four columns fit a phone, so no scroll hint */
.tables-2{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin:8px 0 12px}
@media(min-width:900px){.tables-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.tables-2 h3{margin:0 0 2px;font-size:18px}
.tables-2 .tablewrap{margin-top:8px}
table.compact{min-width:0;font-size:14px}
table.compact th,table.compact td{padding:10px 12px}
.tablewrap table.compact th{min-width:0}
.tablewrap.fits::after{display:none}
/* the glossary uses the width it has */
@media(min-width:900px){main.wrap>dl.ordlista{columns:2;column-gap:56px}main.wrap>dl.ordlista dt{break-after:avoid;break-inside:avoid}main.wrap>dl.ordlista dt:first-child{margin-top:0}main.wrap>dl.ordlista dd{break-inside:avoid}}
/* a checklist card inside a guide: the things to have at hand, one line each */
.checklist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lift);box-shadow:var(--sh-1);padding:22px 24px;margin:16px 0 8px;max-width:var(--prose)}
.checklist .proof li{max-width:none;font-size:15px}
.checklist .note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2)}
/* an optional picture at the top of a guide card (assets-src/img/guide-<slug>.jpg): full bleed, 3:2, the icon sits below it */
.guide.has-img{padding-top:0}
.guide .slot-img{display:block;width:calc(100% + 48px);height:auto;margin:0 -24px 10px;aspect-ratio:3/2;object-fit:cover;border-radius:18px 18px 0 0}
/* the three promises on /om/: tiles that state something, not links */
.promises{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin:20px 0 8px}
@media(min-width:800px){.promises{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promise{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lift);box-shadow:var(--sh-1)}
.promise h3{margin:6px 0 0;font-size:17px}
.promise p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}
/* the supplier directory: a jump strip and a row per initial */
.letters{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 4px}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;font-weight:700;font-size:13px;color:var(--ink2)}
.letters a:hover{border-color:var(--line-strong);color:var(--ink)}
table.directory tr.letter{scroll-margin-top:80px}
table.directory tr.letter th{background:var(--band);color:var(--accent-strong);font-family:var(--font-d);font-size:16px;text-transform:none;letter-spacing:0;padding:8px 16px}
/* the explainer: the figure changes side every chapter on a wide screen */
@media(min-width:900px){.story-ch:nth-of-type(even) .story-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.story-ch:nth-of-type(even) .story-fig{order:0}}
/* ---------- the interaction layer (v14): what the pointer, the finger and the scroll get back. Fine pointers only where it says so; every
   effect is transform, translate, scale or opacity; prefers-reduced-motion switches all of it off further down. ---------- */
:root{interpolate-size:allow-keywords}
/* pressing feels like pressing */
.btn,.chip,.tab,.seg-b,.rowbtn,.preset{transition:translate .35s cubic-bezier(.2,.8,.2,1.35),scale .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn:active,.chip:active,.seg-b:active{scale:.97}
.rowbtn:active{background:var(--panel)}
.btn:not(.secondary):not(.partner){box-shadow:0 1px 0 rgba(15,34,48,.08),0 6px 16px -8px rgba(23,51,184,.55)}
.btn:not(.secondary):not(.partner):hover{box-shadow:0 1px 0 rgba(15,34,48,.08),0 10px 22px -8px rgba(23,51,184,.6)}
/* the spotlight: a soft amber light under the pointer on the cards it can act on (JS sets --mx/--my and .lit) */
@media(hover:hover) and (pointer:fine){
  .guide,.answer-item,.chips.presets .chip,.stat,.rowbtn{position:relative;isolation:isolate}
  .guide::after,.answer-item::after,.chips.presets .chip::after,.stat::after,.rowbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:-1;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(30,63,224,.16),rgba(30,63,224,0) 62%)}
  .chips.presets .chip.active::after{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),rgba(255,255,255,0) 62%)}
  .guide.lit::after,.answer-item.lit::after,.chips.presets .chip.lit::after,.stat.lit::after,.rowbtn.lit::after{opacity:1}
  .stat{transition:transform .25s ease,box-shadow .25s ease}
  .stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
  .answer-item{transition:background .3s ease}
}
/* the sky leans with the mouse (JS sets --px/--py on .hero; translate composes with the running transform animations) */
.sun{translate:calc(var(--px,0)*10px) calc(var(--py,0)*6px);transition:translate .8s cubic-bezier(.2,.7,.2,1)}
.clouds{translate:calc(var(--px,0)*-16px) calc(var(--py,0)*-6px);transition:translate 1s cubic-bezier(.2,.7,.2,1)}
.waves{translate:calc(var(--px,0)*8px) 0;transition:translate 1s cubic-bezier(.2,.7,.2,1)}
.hero-photo .hero-img{translate:calc(var(--px,0)*-8px) calc(var(--py,0)*-5px);transition:translate 1s cubic-bezier(.2,.7,.2,1)}
/* the crosshair and its label on the curves */
.chart-body,.fig-card{position:relative}
svg.market,svg.spot{touch-action:pan-y;cursor:crosshair}
.ctip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:#fff;border-radius:10px;padding:8px 11px;font:500 12.5px/1.35 var(--font-b);box-shadow:var(--sh-2);white-space:nowrap;transition:left .08s linear,top .08s linear}
.ctip[hidden]{display:none}
.ctip b{display:block;font-weight:800;font-size:12px;letter-spacing:.02em;margin-bottom:3px;color:#A9C4FF}
.ctip span{display:block;font-variant-numeric:tabular-nums}
.ctip .k{display:inline-block;width:8px;height:8px;border-radius:2px;background:#fff;margin-right:6px;vertical-align:-1px}
.ctip .f{color:#A8D5BF}.ctip .f .k{background:#6FBF95}
.ctip-x{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s}
.ctip-dot{fill:var(--accent-strong);stroke:#fff;stroke-width:2;opacity:0;transition:opacity .15s}
svg.has-tip .ctip-x,svg.has-tip .ctip-dot{opacity:1}
/* loading an elområde: a moving light along the top of the list, the old rows dimmed until the new ones land */
[data-list].is-loading{position:relative}
[data-list].is-loading::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);background-size:45% 100%;background-repeat:no-repeat;animation:load-sweep 1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes load-sweep{from{background-position:-45% 0}to{background-position:145% 0}}
[data-list].is-loading .row{opacity:.5;transition:opacity .2s ease}
/* the answer that changed says so for a moment */
.answer-item strong{border-radius:6px;padding:0 4px;margin:0 -4px;transition:background .3s ease}
.answer-item strong.flash{animation:tile-flash 1.1s ease-out}
@keyframes tile-flash{0%{background:#D9E2FA}100%{background:transparent}}
/* a row's panel and the FAQ answers open with height, not with a jump */
.panel{transition:opacity .3s ease,translate .3s cubic-bezier(.2,.7,.2,1)}
@starting-style{.panel{opacity:0;translate:0 -6px}}
.faq details::details-content{height:0;overflow:clip;transition:height .3s cubic-bezier(.2,.7,.2,1),content-visibility .3s allow-discrete}
.faq details[open]::details-content{height:auto}
/* the heat map hints that it scrolls, only while it does */
.heatwrap.can-scroll{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.heatwrap.can-scroll.at-end{mask-image:none;-webkit-mask-image:none}
/* between pages: the header stays, the page crossfades and settles (cross-document view transitions where supported) */
@view-transition{navigation:auto}
header.top{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .14s ease-in both}
::view-transition-new(root){animation:vt-in .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
/* on a phone the hero text dissolves as the page moves on (scroll-driven, no script); the card and the stats follow the page as usual */
@supports(animation-timeline:scroll()){
  @media(max-width:899px){.hero-text{animation:hero-fade linear both;animation-timeline:scroll(root);animation-range:0 60vh}}
  @keyframes hero-fade{to{opacity:0;transform:translateY(-14px)}}
}
@media(prefers-reduced-motion:reduce){
  .sun,.clouds,.waves,.hero-photo .hero-img{translate:none!important}
  .btn{translate:none!important}
  .lit::after{opacity:0!important}
  .panel,.faq details::details-content{transition:none!important}
  .answer-item strong.flash{animation:none!important}
  .hero-text{animation:none!important;opacity:1;transform:none}
  @view-transition{navigation:none}
}

/* ---------- the sky: the one decorative layer on the site. Sun, a few soft clouds and two slow waves, all in the hero's own tint family,
   moving slowly enough to read as weather, not as an effect. It sits under the text and the card, costs only transform and opacity,
   and stops entirely under prefers-reduced-motion. A photo in assets-src/hero.jpg replaces it. ---------- */
.hero-sky{background:linear-gradient(180deg,#F5F7F4 0%,#EAF1F5 55%,#E6EEE6 100%)}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sun{position:absolute;right:12%;top:9%;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(242,204,90,.55) 0%,rgba(242,204,90,.18) 45%,rgba(242,204,90,0) 70%);animation:sun 14s ease-in-out infinite alternate}
@media(min-width:1000px){.sun{right:44%;top:6%;width:220px;height:220px}}
@keyframes sun{from{transform:translateY(0) scale(1)}to{transform:translateY(-8px) scale(1.04)}}
.clouds{position:absolute;inset:-10% 0 auto 0;width:100%;height:70%}
.cl{fill:#FFFFFF;fill-opacity:.6}
.cl1{animation:drift1 90s linear infinite}.cl2{animation:drift2 120s linear infinite}.cl3{animation:drift3 100s linear infinite;fill-opacity:.45}
@keyframes drift1{from{transform:translateX(-12%)}to{transform:translateX(14%)}}
@keyframes drift2{from{transform:translateX(10%)}to{transform:translateX(-12%)}}
@keyframes drift3{from{transform:translateX(-6%)}to{transform:translateX(9%)}}
.waves{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:90px}
.waves path{fill:#D8E6DA}
.waves .w2{fill:#E3EDE5;animation:wave 18s ease-in-out infinite alternate}
.waves .w1{animation:wave 24s ease-in-out infinite alternate-reverse}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@supports(animation-timeline:scroll()){
  .sky{animation:sky-scroll linear both;animation-timeline:scroll(root);animation-range:0 600px}
  @keyframes sky-scroll{from{transform:translateY(0)}to{transform:translateY(120px)}}
}
@media(prefers-reduced-motion:reduce){.sun,.cl,.waves path,.sky{animation:none!important}}
.hero-sky .hero-in{position:relative;z-index:1}
/* text heads in the answer card ("Ungefär lika") are words, not figures: two sizes down so they hold one line */
.answer-item strong.txt{font-size:clamp(24px,2.2vw,30px);line-height:1.1}

/* mobile hero: headline, one short lead, then the card. The three claims are hidden here because the stats strip right under the card says
   the same thing, and the input field must be on the first screen. */
@media(max-width:999px){.hero .proof{display:none}.hero-in{padding:28px 20px 32px;gap:20px}.hero-text .lead{font-size:16px;margin-bottom:0}.hero-text h1{margin-bottom:12px}}
@media(max-width:999px){.sun{right:-14%;top:-2%;width:190px;height:190px}}
@media(min-width:1000px){.sun{right:38%;top:2%}}
.p-others .other{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:var(--ink2)}
.p-others .other>span:first-child{min-width:0}
.p-others .other .sub{display:block}
.p-others .other .num{flex-shrink:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.p-others .other .num .sub{font-weight:400}

/* phone: the row drops the rank column and lets the name take two lines; the stats strip becomes four compact tiles */
@media(max-width:639px){
  .rowbtn{grid-template-columns:44px minmax(0,1fr) auto 20px;grid-template-areas:"mono who price open";gap:10px;padding:14px 14px 14px 16px}
  .row .rank{display:none}
  .row .who strong{white-space:normal;font-size:15.5px}
  .row .cta{padding:0 14px 12px 70px}
  .stats{gap:8px}
  .stat{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "l";padding:12px 12px;margin-top:16px}
  .stat-ic{display:none}
  .stat-n{font-size:20px}
  .stat-l{font-size:12.5px}
  .answer-kicker{flex-wrap:wrap;font-size:12px}
  .answer-kicker span{flex-basis:100%;margin-left:38px;font-size:13.5px}
  .answer-item{padding:16px 16px}
  .answer-item .lbl{font-size:12.5px}
  .answer-item strong{font-size:clamp(24px,7.6vw,28px)}
  .answer-item.primary strong{font-size:clamp(26px,8.2vw,30px)}
  .answer-item strong.txt{font-size:clamp(19px,6.4vw,24px)}
}
/* narrow phones (320 to 479): the unit goes under the number instead of overflowing the two-up tile */
@media(max-width:479px){.answer-item strong .unit{display:block;font-size:14px;margin-top:2px}
  .mb{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l l" "t v";gap:4px 8px}.mb-l{grid-area:l}.mb-v{grid-area:v}.mb-t{grid-area:t}}
@media(max-width:389px){.spread-labels{gap:8px;font-size:12px}.spread-labels b{font-size:13.5px}}
@media(max-width:359px){.spread-labels{flex-direction:column;gap:2px}.spread-labels .sp-med,.spread-labels .sp-max{text-align:left}.facit-row{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-foot{gap:6px}.chart-foot .tnum{font-size:14px;white-space:normal}.chart-foot .lbl,.facit-row .lbl{letter-spacing:.02em}.answer-item strong.txt{font-size:clamp(18px,6.2vw,24px)}}

[data-list-more]{margin:18px 0 6px}
[data-list-more] .btn{margin-right:8px}
[data-list-more] .note.block{margin-top:14px}
.zone-hit{fill:transparent}
.zone:hover .zone-hit,.zone:focus-visible .zone-hit{fill:rgba(23,51,184,.08)}

/* /elomrade/: the map beside the four descriptions */
.area-figure{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin:16px 0 8px}
@media(min-width:900px){.area-figure{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:40px}}
.area-figure .fig-card{padding:24px 24px 18px}
.area-figure .semap{max-width:360px;margin:0 auto}
.area-figure dl{margin:0}

/* ---- v17: the personal layer. The consumption slider, the household estimator inside the tool, the visitor's own supplier in the answer card ---- */
input[type=range].slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:0;background:transparent;cursor:pointer;font-size:16px;--p:30%}
input[type=range].slider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 var(--p),var(--line) var(--p) 100%)}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent-strong);border:3px solid #fff;box-shadow:0 1px 4px rgba(15,34,48,.28);margin-top:-10px;transition:transform .15s ease}
input[type=range].slider::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
input[type=range].slider::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
input[type=range].slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent-strong);border:3px solid #fff;box-shadow:0 1px 4px rgba(15,34,48,.28)}
input[type=range].slider:hover::-webkit-slider-thumb,input[type=range].slider:active::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range].slider:focus-visible{outline:none}
input[type=range].slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-wash),0 1px 4px rgba(15,34,48,.28)}
input[type=range].slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px var(--accent-wash),0 1px 4px rgba(15,34,48,.28)}
.ticks{position:relative;height:16px;margin:0 0 2px;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
.estimator{margin:12px 0 0;border-top:1px solid var(--line-2);padding-top:8px}
.estimator>summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;transition:color .15s ease}
.estimator>summary .ic{color:var(--accent-strong)}
.estimator>summary{list-style:none}.estimator>summary::-webkit-details-marker{display:none}
.est-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 28px;margin:8px 0 4px}
@media(min-width:640px){.est-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.est-q.est-wide{grid-column:1/-1}}
.est-q .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.est-q output{font-weight:700;color:var(--ink)}
.est-q .chips{margin:0;gap:7px}
.est-q .chips .chip{flex:1 1 auto;justify-content:center}
@media(max-width:639px){.est-q .chips{display:flex;flex-wrap:wrap;gap:7px}.est-q .chips .chip{flex-direction:row;align-items:center;justify-content:center;padding:8px 14px;text-align:center;min-width:0}}
@media(max-width:479px){.ticks .tick-end{display:none}}
.chip.small{padding:8px 14px;min-height:40px;font-size:14px;font-weight:600}
.est-out{margin:10px 0 2px;font-size:15px;color:var(--ink);min-height:1em}
.est-out strong{font-family:var(--font-d);font-size:24px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.est-out .sub{display:block;margin-top:2px;font-size:13px;color:var(--ink3)}
.est-note{margin:8px 0 0}
.check.remember{display:flex;margin-top:8px;font-size:14px;font-weight:400;color:var(--ink)}
.mine-band{border-top:1px solid var(--line-2);padding:4px 22px 6px;background:var(--ground)}
.mine-band>summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);padding:10px 0;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none;transition:color .15s ease}
.mine-band>summary::-webkit-details-marker{display:none}
.mine-band>summary .ic{color:var(--accent-strong)}
.mine-band[open]{padding-bottom:16px}
.mine-band[open]>summary{margin-bottom:8px}
.more{margin:12px 0 0;border-top:1px solid var(--line-2);padding-top:4px}
.more>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink2);padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none;transition:color .15s ease}
.more>summary::-webkit-details-marker{display:none}
.more>summary .ic{color:var(--accent-strong);flex:0 0 auto}
.more>summary:hover{color:var(--ink)}
.more[open]>summary{color:var(--ink)}
.mine-form .lbl{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.mine-form .lbl .ic{color:var(--accent-strong)}
.mine-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:640px){.mine-row{grid-template-columns:minmax(0,3fr) minmax(0,2fr);max-width:640px}}
.mine-row select{width:100%;padding:11px 40px 11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-ctl);font:inherit;font-size:16px;font-weight:600;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F2230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--ink);min-height:50px;-webkit-appearance:none;appearance:none}
.mine-row select:focus-visible{outline:3px solid var(--focus);outline-offset:1px;box-shadow:0 0 0 5px var(--accent-wash)}
.mine-out{margin-top:14px;max-width:72ch}
.mine-big{margin:0;font-family:var(--font-d);font-size:clamp(28px,3.2vw,38px);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mine-big .unit{font-family:var(--font-b);font-size:16px;font-weight:600;color:var(--ink2);letter-spacing:0}
.mine-text{margin:6px 0 4px;font-size:15px;color:var(--ink);line-height:1.5}
.mine-out .sub{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
.row.mine{background:var(--band)}
.row.mine .rowbtn:hover{background:#DCE6DE}
.row.mine::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ok)}
.row.mine .rank{color:var(--ok)}
.row.first.mine::before{background:var(--accent-strong)}
.tag.mine-tag{background:#E6F2EC;color:var(--ok)}
.row.pinned{border-top:1px dashed var(--line-strong);margin-top:8px}
.row.pinned .rowbtn{padding-top:30px}
.row.pinned::after{content:"Din elhandlare, längre ner i samma lista";position:absolute;left:18px;top:8px;font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.02em}
@media(max-width:639px){.row.pinned::after{left:16px}.row .who strong .tag{display:none}.row.mine .who .sub::before{content:"Din elhandlare · ";color:var(--ok);font-weight:700}}

/* ---- v17 typography and rhythm: no single-word last lines in running text, one card padding per family ---- */
p,li,dd,figcaption,.sub,.note,.lead,.lbl,.stat-l,.guide p,.promise p,.mine-text,.est-out,.spread-cap,.helper-out,.tabs-note,.listmeta{text-wrap:pretty}
h1,h2,h3,.guide h3,.promise h3,.answer-kicker{text-wrap:balance}
.card,.chart-card,.checklist,.sec-band .bevaka-form{padding:24px}
.chart-card{padding:24px 24px 20px}
@media(min-width:900px){.chart-card{padding:24px 24px 20px}.fig-card{padding:24px 24px 18px}}
@media(max-width:639px){.guide,.promise,.checklist{padding:18px 20px}.guide .slot-img{width:calc(100% + 40px);margin:0 -20px 10px}.chart-card{padding:20px 20px 16px}.sec-band .bevaka-form{padding:20px}}
@media(max-width:899px){.card.fig-card{padding:12px 12px 8px}}

/* ---- v17.1 launch polish: the consumption control is one component (label, value, track, ticks, hint); phone targets; menu motion; fallback metrics ---- */
.kwh-ctl{margin-top:6px}
.kwh-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:4px}
.kwh-head label{flex:1 1 120px}
.kwh-val{flex:0 0 auto}
.field .kwh-head label{margin:0;font-weight:700;font-size:15px}
.kwh-val{display:inline-flex;align-items:center;gap:7px}
.kwh-unit{font-size:14px;font-weight:600;color:var(--ink2)}
.kwh-help{margin:6px 0 0;font-size:12.5px;color:var(--ink3)}
.field .kwh-ctl .hint{margin-top:6px}
@media(pointer:coarse){
  .tile-link{min-height:44px;padding:8px 0}
  .seg-b{min-height:40px}
  input[type=range].slider{height:40px}
  input[type=range].slider::-webkit-slider-thumb{margin-top:-10px}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .estimator>summary{min-height:46px}
}
@media(max-width:899px){
  #huvudmeny{opacity:0;translate:0 -8px;transition:opacity .18s ease,translate .18s ease,display .18s allow-discrete}
  header.top.nav-open #huvudmeny{opacity:1;translate:0 0}
  @starting-style{header.top.nav-open #huvudmeny{opacity:0;translate:0 -8px}}
}
@media(prefers-reduced-motion:reduce){#huvudmeny{transition:none}}
main a:not(.btn):not(.guide):not(.tile-link):not(.card):not(.chip){transition:color .15s ease,text-decoration-color .15s ease}
main p a:hover,main li a:hover,main .note a:hover,table a:hover,.foot-cols a:hover{color:var(--accent-strong)}

/* hover and focus on the controls whose own colour rules outrank the generic ones */
details>summary:hover{color:var(--accent-strong)}
.field .area .link:hover,.link.tiny:hover,.link.small:hover{color:var(--accent-strong)}
.field input[type=month]:focus{outline:3px solid var(--focus);outline-offset:1px;box-shadow:0 0 0 5px var(--accent-wash)}
@media(pointer:coarse){.foot-cols ul{gap:0}.foot-cols a,.foot-cols button.link{display:inline-flex;align-items:center;padding:4px 0;min-height:44px}}
/* one motion language for the small controls: 150 ms colour and border transitions, nothing moves */
.field input,.field select,.toolbar input,.mine-row select,.story-form input{transition:border-color .15s ease,box-shadow .15s ease}
.link,details>summary,.foot-cols a,#huvudmeny a{transition:color .15s ease,background-color .15s ease}
@media(prefers-reduced-motion:reduce){.field input,.field select,.toolbar input,.mine-row select,.story-form input,.link,details>summary,.foot-cols a,#huvudmeny a{transition:none}}

/* ---- v18: twelve months from the grid bill ---- */
.months{margin:10px 0 0;border-top:1px solid var(--line-2);padding-top:8px}
.months>summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none;transition:color .15s ease}
.months>summary::-webkit-details-marker{display:none}
.months>summary .ic{color:var(--accent-strong)}
.months-lead{margin:2px 0 10px;font-size:13.5px;color:var(--ink2);max-width:60ch}
.months-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media(max-width:639px){.months-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:359px){.months-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mon{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--ink3);text-transform:capitalize}
.inputs .field .months-grid .mon input{width:100%;min-height:44px;padding:6px 8px;font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;border:1.5px solid var(--line-strong);border-radius:10px}
.months-out{margin:10px 0 0;font-size:14.5px;color:var(--ink)}
.months-out:empty{display:none}
.months .note{margin:6px 0 0;font-size:12.5px}
@media(pointer:coarse){.months>summary{min-height:46px}}

/* ---- v18: the invoice reader ---- */
.invoice{margin:10px 0 0;border-top:1px solid var(--line-2);padding-top:8px}
.invoice>summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none;transition:color .15s ease}
.invoice>summary::-webkit-details-marker{display:none}
.invoice>summary .ic{color:var(--accent-strong)}
.drop{display:block;margin:6px 0 0;padding:22px 20px;border:2px dashed var(--line-strong);border-radius:16px;background:var(--ground);cursor:pointer;text-align:center;transition:border-color .15s ease,background .15s ease}
.drop:hover,.drop.over{border-color:var(--accent-strong);background:var(--accent-wash)}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.drop-in{display:flex;flex-direction:column;align-items:center;gap:4px}
.drop-in .ic{color:var(--accent-strong);margin-bottom:2px}
.drop-in strong{font-size:15px}
.drop-in .sub{display:block;font-size:13px;color:var(--ink3);max-width:36ch}
.invoice .note{margin:8px 0 0;font-size:12.5px}
.invoice-out{margin-top:10px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.invoice-text{margin:0;font-size:15px;color:var(--ink);line-height:1.5}
.invoice-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px}
.invoice-out .sub{display:block;margin-top:8px;font-size:12.5px;color:var(--ink3)}
.invoice-kind{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:var(--ink2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tag.kind-tag{margin-left:0;background:var(--panel);color:var(--ink2)}
.invoice-links{display:inline-flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.bill-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 8px}
@media(max-width:639px){.bill-figs{grid-template-columns:1fr}}
.bill-fig{width:100%;height:auto;display:block}
.bill-fig .card{fill:var(--paper);stroke:var(--line)}
.bill-fig .rule{stroke:var(--line-2)}
.bill-fig text{font:500 12.5px var(--font-b);fill:var(--ink)}
.bill-fig .bill-t{font:700 15px var(--font-d);fill:var(--ink)}
.bill-fig .mut{fill:var(--ink3)}
.bill-fig .hl{fill:var(--ink);font-weight:700}
.bill-fig .num{font-variant-numeric:tabular-nums}
.bill-fig .lab{font:500 11px var(--font-b);fill:var(--ink3)}
.bill-fig .mark{fill:var(--accent)}
.bill-fig .bar{fill:var(--accent)}
.bill-fig .foot{font:700 12.5px var(--font-b);fill:var(--accent-strong)}
.bill-figs figcaption{grid-column:1/-1;margin:0}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--line-strong)}}
@media(pointer:coarse){.invoice>summary{min-height:46px}}