/* skal-lab/sida.css — sidskalets utseende (grupp "sida": index/lista/statistik/nyheter).
   Laddas EFTER lab.css. Riktning 2026-09-22 ur Maltes referenstavla (_design-rotens pintrestboard/):
   "svensk sommar i Ghibli-ton" — ljust papper, falurött som EN accent, äng/himmel/sol som bifärger,
   målat landskap i stället för topo-canvasen, mjuka papperskort i stället för glasrim. Mörkt läge = ljus sommarnatt.
   Bara transform/opacity animeras (DESIGN.md §5); tempo --lk-t / --lk-ease ur lab.css.
   Struktur: 0 palett · 1 grund · 2 header · 3 sektionsnav · 4 hero · 5 kort · 6 kontroller · 7 rader/staplar/tal
   · 8 lista · 9 statistik · 10 nyheter · 11 brev + fot · 12 in-koreografi · 13 reduce-motion. */

/* ── 0. palett: ny.css-tokens skrivs om för sidorna, plus bifärgerna --sd-* ── */
/* Apples systemtypsnitt överallt (Malte 2026-09-29: inga serifrubriker). Även på :root: ny.css --type-* löser var(--font-*) där. */
:root, body.mm-ny {
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.mm-ny {
  --s-deep: #0f1b20;
  /* läsbarhetsgolvet (2026-10-21, jämfört med statsbudget.se): sekundärtext ≥ 5,5:1 mot alla mörka ytor (kort, kort-2, dagtoppen);
     ny.css #aaa196/#9d9488/#918a7c gav 4,0–4,8. Samma varma grå, bara ljusare. fg-9 är bara dekor. */
  --fg-6: #b8afa0; --fg-7: #b1a89b; --fg-8: #aca396;
  /* typgolv: brödtext 16, hjälptext/kolumnrubriker/chips ≥ 13 (ny.css: 13/12/11,5/10,5/8,5). Bara sidorna, kartan laddar inte sida.css. */
  --type-body: 400 16px/1.5 var(--font-ui); --type-body-sm: 400 14px/1.5 var(--font-ui); --type-meta: 400 13px/1.4 var(--font-ui);
  --type-label: 500 14px/1.3 var(--font-ui); --type-chip: 500 13px/1 var(--font-ui); --type-button: 500 14px/1 var(--font-ui);
  --type-kicker: 500 13px/1 var(--font-ui); --type-kicker-sm: 500 13px/1 var(--font-ui); --kicker-tracking: .06em;
  /* staplar (1.4.11, 3:1): rampen dras mot sin egen ljusa ände i mörkt, mörka ände i ljust; nyansen kvar, längden + talet bär värdet */
  --stapel-mot: #f4e3d4; --stapel-andel: 52%;
  --sd-kort: #15252b; --sd-kort-2: #1a2d33;
  --sd-kant: inset 0 0 0 1px var(--w-12); --sd-kant-upp: inset 0 0 0 1px var(--w-15);   /* kontroller: hårlinje, ingen skugga (avkortningen 2026-10-22) */
  --sd-yta: var(--s-deep);   /* sidans bakgrund: klistriga tabellceller och glappen i diagram (stroke) målas med den */
  --sd-skugga: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .55);
  --sd-skugga-upp: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -16px rgba(0, 0, 0, .65);
  --sd-ang: #8fb86a; --sd-ang-t: rgba(143, 184, 106, .14);
  --sd-himmel: #86b4d4; --sd-himmel-t: rgba(134, 180, 212, .14);
  --sd-sol: #f0c24f; --sd-sol-t: rgba(240, 194, 79, .12);
  --sd-rod-t: rgba(229, 160, 119, .14);
  --sd-dag: #16303a; --sd-dag-2: #0f1b20; /* sidans himmelstopp */
  --sd-fot: #0a1417; --sd-fot-bak: #132a2a;
  /* landskapet (heron + platshållarna) */
  --sl-h1: #0c1d33; --sl-h2: #28476a; --sl-h3: #e9a877; --sl-sken: rgba(255, 225, 170, .22); --sl-sol: #fbeac2;
  --sl-moln: rgba(200, 214, 235, .22); --sl-fjall: #2b3f5c; --sl-as: #22394a; --sl-gran: #13262c;
  --sl-kulle: #1c3a36; --sl-kulle-h: #214238; --sl-ang: #183029; --sl-vag: #b99c77;
  --sl-vagg: #8a2f25; --sl-tak: #1c1d22; --sl-fonster: #ffd98a; --sl-trad: #173029; --sl-blom: #f3dfa6;
}
[data-theme="light"] body.mm-ny {
  --s-deep: #fcfcfd;   /* neutral, inte papper: krämtonen såg gammal ut (Malte 2026-10-03) */
  --fg-1: #1b2a24; --fg-1b: #1b2a24; --fg-1c: #1b2a24; --fg-2: #22312b; --fg-2b: #22312b; --fg-3: #2c3a34;
  --fg-4: #43504a; --fg-4b: #47544d; --fg-4c: #4a574f; --fg-5: #55625a; --fg-5b: #59655e; --fg-5c: #5c6860;
  --fg-6: #5f6862; --fg-6b: #616a63; --fg-7: #626b64; --fg-8: #626b64; --fg-9: #a2a89f;   /* fg-6–8 ≥ 4,6:1 även mot --sd-himmel-t/--sd-ang-t (WCAG 1.4.3); var 3,4–4,1. fg-9 bara dekor */
  --a-1: #7a2c20; --a-2: #8c3526; --a-2b: #8c3526; --a-2c: #963a2a; --a-3: #9c3c2c; --a-4: #a8412f; --a-5: #b84e38;
  --on-accent: #ffffff;
  --aw-10: rgba(168, 65, 47, .08); --aw-12: rgba(168, 65, 47, .1); --aw-14: rgba(168, 65, 47, .11); --aw-16: rgba(168, 65, 47, .13);
  --aw-20: rgba(168, 65, 47, .16); --aw-24: rgba(168, 65, 47, .2); --aw-42: rgba(168, 65, 47, .4);
  --w-045: rgba(27, 42, 36, .035); --w-05: rgba(27, 42, 36, .04); --w-06: rgba(27, 42, 36, .05); --w-07: rgba(27, 42, 36, .07);
  --w-08: rgba(27, 42, 36, .08); --w-10: rgba(27, 42, 36, .1); --w-12: rgba(27, 42, 36, .12); --w-14: rgba(27, 42, 36, .14); --w-15: rgba(27, 42, 36, .15);
  --sd-kort: #ffffff; --sd-kort-2: #f7f7f9;
  --sd-skugga: 0 1px 2px rgba(40, 52, 40, .06), 0 12px 30px -14px rgba(40, 52, 40, .22);
  --sd-skugga-upp: 0 2px 4px rgba(40, 52, 40, .07), 0 22px 44px -16px rgba(40, 52, 40, .3);
  --stapel-mot: #4a1e10; --stapel-andel: 48%;
  --sd-ang: #5f8c3e; --sd-ang-t: #e6efd9; --sd-ang-txt: #4a7230;   /* -txt: liten text, 4,7:1 mot --sd-ang-t */
  --sd-himmel: #3f7fa8; --sd-himmel-t: #e0edf5;
  --sd-sol: #b8860b; --sd-sol-t: #fbf0d2;
  --sd-rod-t: #f6e2dc;
  --sd-dag: var(--s-deep); --sd-dag-2: var(--s-deep);   /* ljust = vitt hela vägen (Malte 2026-10-23); himlen finns bara i djurscenen (.hd-scen) */
  --sd-fot: #24453a; --sd-fot-bak: #6f9a5a;
  --sl-h1: #7fb3da; --sl-h2: #cfe4ef; --sl-h3: #fbeed3; --sl-sken: rgba(255, 244, 205, .75); --sl-sol: #fff6d8;
  --sl-moln: rgba(255, 255, 255, .92); --sl-fjall: #9db7c9; --sl-as: #7fa58a; --sl-gran: #2f5a40;
  --sl-kulle: #8dbb5f; --sl-kulle-h: #a3c96c; --sl-ang: #6fa549; --sl-vag: #efe2c2;
  --sl-vagg: #a8412f; --sl-tak: #3a2f2c; --sl-fonster: #ffffff; --sl-trad: #4f8a3c; --sl-blom: #fff4c9;
}

/* loggans tagline är en del av logotypen (WCAG 1.4.3 undantar logotyper), typgolvet gäller inte den */
.ny-hdr__kicker { font-size: 8.5px; }

/* typgolvet för ny.css-klasser med hårdkodade 10–12,5 px (tokens ovan tar resten); bara storleken, radhöjd/vikt kvar */
:where(body.mm-ny) :is(.ny-snav__a, .ny-rad__meta, .ny-rad__meta--liten, .omr__etikett, .ny-kallkort__vad, .ny-kallkort__volym, .ny-kallor__senast,
  .ny-kom__sok, .ny-steg__nr, .ny-steg__p, .ny-orthero__kredit, .ny-bildremsa__ruta figcaption, .ny-index__varde, .ny-alder__n, .ny-alder__grupp,
  .ny-civil__andel, .ny-ort__inv, .lc__blurb, .ny-stat__stapel-varde, .ny-stat__kolumn-varde, .ny-stat__kolumn-ar, .ny-stat__topprad-varde,
  .ny-nyhet__takt, .ny-nyhet__brevform input, .nw-date, .ny-om__talp, .ny-om__kalla-vad, .ny-om__kalla .ny-chip--stum, .ny-spel__kort .ny-kort__text,
  .ny-spel__fot .ny-chip--stum) { font-size: 13px; }

/* ── 1. grund ─────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
/* sidan målas av .ny-rot; bodyns färg sträcker Safari 26 ut i statusfältet och sökrutan när scrollen står i en ände:
   = sidans översta färg (startsidan: heroens himmel, --sl-h1 under ::after:s 28 % slöja), fotens i nedre halvan (lab.js) */
body.mm-ny { background: var(--sd-dag); }
body.mm-ny.sida-start { background: #0b1a29; }
[data-theme="light"] body.mm-ny.sida-start { background: #5e86a1; }
:root body.mm-ny.i-botten { background: var(--sd-fot); }
body.mm-ny .ny-rot { background: linear-gradient(180deg, var(--sd-dag) 0, var(--sd-dag-2) 640px) no-repeat, var(--s-deep); }
.mm-ny :is(a, button, input, select):focus-visible { outline: 2px solid var(--a-4); outline-offset: 3px; border-radius: inherit; }
.mm-ny :is(.ny-falt, .nw-search, .ny-brev__falt, .ny-nyhet__brevform, .sida-st-sok) input:focus-visible { outline: 0; } /* fältets :focus-within-ring är markeringen, annars dubbel ring (input + kort) */
.ny-panel { max-width: min(100%, 1200px); }
.ny-navhallare + .ny-panel { margin-top: clamp(72px, 8vw, 128px); }
body:not(.sida-start) .ny-panel + .ny-panel { margin-top: clamp(56px, 6vw, 88px); }   /* luft skiljer sektionerna, ingen linje (2026-10-23) */
/* luft mellan sektionsrubrik och innehåll (ny-topp har ingen egen marginal); sidornas egna regler i §16–17 finjusterar */
.ny-panel > .ny-topp + * { margin-top: clamp(18px, 2.2vw, 26px); }
@media (max-width: 767px) { .ny-rot { padding-inline: 16px; } } /* telefon: 16 px sidmarginal i stället för ny.css 8 px */
.ny-kicker--accent { color: var(--sd-ang-txt, var(--sd-ang)); }
.ny-h2--serif { font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-1); max-width: 24ch; text-wrap: balance; } /* 18ch bröt rubriker efter två ord */
.ny-h2 { text-wrap: balance; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

/* ── 2. header: flytande piller; klart över startbilden (heron / första blocket, lab.js) tills man rullat förbi den ── */
.ny-hdr {
  position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 60; max-width: 1200px;
  border: 0; border-radius: 999px; padding: 8px 10px 8px 14px;
  transition: padding var(--lk-t) var(--lk-ease), background var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease);
}
.ny-hdr[data-glas] { --glas-alfa: .5; --glas-rim: .1; }
[data-theme="light"] .ny-hdr[data-glas] { --glas-alfa: .72; }
.ny-hdr.is-fast { padding: 5px 7px 5px 11px; }
.ny-hdr__logo { transition: transform var(--lk-t) var(--lk-ease); transform-origin: left center; }
.ny-hdr.is-fast .ny-hdr__logo { transform: scale(.82); }
.ny-hdr__lockup { transition: transform var(--lk-t) var(--lk-ease); }
.ny-hdr.is-fast .ny-hdr__lockup { transform: translateX(-7px); }
/* startsidan: headern lyfts upp över heron (margin-bottom = headerns höjd + 12 px luft) och är genomskinlig där */
.sida-start .ny-hdr { margin: 0 auto -56px; top: calc(12px + env(safe-area-inset-top)); }
.ny-hdr:not(.is-fast) { background: transparent; box-shadow: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* lätt-glaset (glas.js, headern är > 20 000 px²) bär blurren i ::before och kantringen i ::after: de måste också bort, annars syns pillret */
.ny-hdr::before, .ny-hdr::after { transition: opacity var(--lk-t) var(--lk-ease); }
.ny-hdr:not(.is-fast)::before, .ny-hdr:not(.is-fast)::after { opacity: 0; }
.ny-hdr.is-fast::after { opacity: .2; }   /* kantringen dämpad: headern ska inte ha en stark kant */
.sida-start .ny-hdr:not(.is-fast) :is(.ny-hdr__namn, .ny-hdr__kicker, .ny-nav__a, .ny-ikon, .ny-sprak, .ny-hdr__meny, .ny-hdr__logo) { color: #ffffff; }
.sida-start .ny-hdr:not(.is-fast) .sida-pill { background: rgba(255, 255, 255, .18); }
/* EN glidande pill bakom navlänkarna OCH ikonknapparna (storlek + läge sätts av lab.js, mätt mot headern) */
.ny-nav { position: relative; gap: 0; }
.sida-pill {
  position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none;
  background: var(--w-08); opacity: 0;
  transition: transform 260ms var(--lk-ease), width 260ms var(--lk-ease), height 260ms var(--lk-ease), opacity var(--lk-t) var(--lk-ease);
}
.ny-hdr.is-sok .sida-pill { opacity: 0 !important; }
:root:not([data-theme="light"]) .ny-hdr.is-fast .sida-pill { background: rgba(255, 255, 255, .15); } /* --w-08 försvann mot det mörka glaset nedskrollat */
.ny-nav__a { position: relative; z-index: 1; background: transparent !important; transition: color var(--lk-t) var(--lk-ease); }
.ny-nav__a.is-aktiv { color: var(--fg-1); }
.ny-nav__a:hover { color: var(--fg-1); }
/* ikonknapparna: inga egna ringar, pillen ovan är deras hover; tryck sjunker */
.ny-hdr :is(.ny-ikon, .ny-sprak) { position: relative; z-index: 1; background: transparent; font-size: 13px; }
.ny-hdr .ny-ikon--tema { color: var(--fg-4); }
.ny-hdr .ny-ikon--tema:hover { color: var(--fg-1c); }
/* sparade: ny.css låser bakgrunden med !important, så nollningen måste slå med samma vikt */
.ny-hdr .kk2-saved-btn, .ny-hdr .kk2-saved-btn:hover, .ny-hdr .kk2-saved-btn.kk2-saved-btn--has { position: relative; z-index: 1; background: transparent !important; }
.ny-hdr .kk2-saved-btn[aria-expanded="true"] { color: var(--fg-1c) !important; }
.sida-start .ny-hdr:not(.is-fast) .kk2-saved-btn { color: #ffffff !important; }
.ny-ikon, .ny-sprak, .ny-hdr__meny, .ny-hdr .kk2-saved-btn { transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
:is(.ny-ikon, .ny-sprak, .ny-hdr__meny):active { transform: scale(.94); transition-duration: 80ms; }
.ny-ikon--tema .ny-i { transition: transform 420ms var(--lk-ease); }
.ny-ikon--tema:hover .ny-i { transform: rotate(40deg); }
/* telefon/platta: hamburgaren öppnar ett ark, raderna glider in */
@media (max-width: 1024px) {
  .ny-hdr { border-radius: 26px; flex-wrap: nowrap; } /* navet visas aldrig i headern här (arket i meny.css); ny.css:s wrap lät hamburgaren hoppa ner till rad två på 412 px innan .is-fast krympte paddingen: CLS 0,34 på textsidorna */
  .ny-nav::before { display: none; }
  .ny-nav.is-oppen { animation: sida-upp var(--lk-t) var(--lk-ease) both; }
  .ny-nav.is-oppen .ny-nav__a { animation: sida-upp 320ms var(--lk-ease) both; animation-delay: calc(var(--i, 0) * 28ms); color: var(--fg-3); }
  .ny-nav.is-oppen .ny-nav__a.is-aktiv { background: var(--aw-14) !important; color: var(--a-2b); }
  .sida-start .ny-hdr:has(.ny-nav.is-oppen) { background: var(--sd-kort); box-shadow: var(--sd-skugga-upp); }
  .sida-start .ny-hdr:has(.ny-nav.is-oppen) :is(.ny-hdr__namn, .ny-hdr__kicker, .ny-ikon, .ny-sprak, .ny-hdr__meny, .ny-hdr__logo) { color: var(--fg-1); }
}

/* ── 2b. sökrutan: fältet ligger alltid på plats bakom luppen, klippt till luppens storlek;
      .is-sok (lab.js) öppnar klippet åt vänster, så fältet vecklas ut ur knappen. Navet tonar undan. ── */
.ny-hdr__hoger { position: relative; }
.ny-hdr #site-search-btn { position: relative; z-index: 1; }
.sida-sok {
  position: absolute; top: 50%; right: var(--sok-r, 0px); z-index: 0;
  width: var(--sok-w, 360px); height: 40px; margin-top: -20px;
  padding: 0 44px 0 18px; border: 0; border-radius: 999px; outline: 0; -webkit-appearance: none; appearance: none;
  font: 400 14px/1 var(--font-ui); color: var(--fg-1);
  background: rgba(20, 17, 14, .55); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); /* samma material som sökmenyn (§2d) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(20, 30, 25, .35);
  clip-path: inset(3px 3px 3px calc(100% - 37px) round 999px);
  opacity: 0; pointer-events: none;
  transition: clip-path 460ms var(--lk-ease), opacity 200ms var(--lk-ease) 60ms, box-shadow var(--lk-t) var(--lk-ease);
}
.sida-sok::placeholder { color: var(--fg-7); opacity: 0; transform: translateX(14px); transition: opacity 260ms var(--lk-ease); }
.sida-sok::-webkit-search-cancel-button { display: none; }
[data-theme="light"] .sida-sok { background: rgba(255, 255, 255, .72); color: #0a182a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(11, 31, 58, .22), 0 6px 18px -8px rgba(20, 30, 25, .35); }
body.mm-ny .ny-hdr .sida-sok:focus-visible { outline: 0; border-radius: 999px; } /* slår ny.css [tabindex]:focus-visible + §1:s radius: inherit; fältet självt är markeringen */
.ny-hdr.is-sok .sida-sok { clip-path: inset(-14px round 999px); opacity: 1; pointer-events: auto; transition: clip-path 520ms var(--lk-ease), opacity 160ms var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease); }
.ny-hdr.is-sok .sida-sok::placeholder { opacity: 1; transition-delay: 220ms; }
.ny-hdr.is-sok #site-search-btn { background: transparent; color: var(--a-4); }
.ny-hdr .ny-nav { transition: opacity 260ms var(--lk-ease), transform 360ms var(--lk-ease); }
.ny-hdr.is-sok .ny-nav { opacity: 0; transform: translateX(-10px); pointer-events: none; }
/* över heron (genomskinlig header): mörkt glas i mörkt läge, ljust papper i ljust */
.sida-start .ny-hdr:not(.is-fast) .sida-sok { color: #ffffff; }
.sida-start .ny-hdr:not(.is-fast) .sida-sok::placeholder { color: rgba(255, 250, 240, .6); }
.sida-start .ny-hdr.is-sok:not(.is-fast) #site-search-btn { color: var(--a-4); }
[data-theme="light"] .sida-start .ny-hdr:not(.is-fast) .sida-sok { color: #0a182a; }
[data-theme="light"] .sida-start .ny-hdr:not(.is-fast) .sida-sok::placeholder { color: var(--fg-7); }
@media (max-width: 1024px) {
  .ny-hdr__brand { transition: opacity 240ms var(--lk-ease); }
  .ny-hdr.is-sok .ny-hdr__brand { opacity: 0; pointer-events: none; }
}

/* ── 2c. Sparade: undermenyn fälls ut ur knappen (.is-oppen av lab.js). Liquid Glass (data-glas="panel"):
      bor i body, fixed under headerns högerkant (top/right av lab.js), så linsen ser sidan bakom ── */
.sida-sparade {
  position: fixed; z-index: 61; width: min(290px, calc(100vw - 32px));
  padding: 6px; border-radius: 22px;
  font: 400 13px/1.3 var(--font-ui); color: var(--fg-1c);
  transform-origin: top right; transform: translateY(-6px) scale(.96); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--lk-ease), opacity 180ms var(--lk-ease), visibility 0s 260ms;
}
.sida-sparade[data-glas] { --glas-alfa: .5; --glas-rim: .5; }
[data-theme="light"] .sida-sparade[data-glas] { --glas-alfa: .72; }
.sida-sparade.is-oppen { transform: none; opacity: 1; visibility: visible; transition: transform var(--lk-t) var(--lk-ease), opacity 180ms var(--lk-ease); }
.sida-sparade__topp { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); }
.sida-sparade__antal { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--aw-14); color: var(--a-4); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sida-sparade__rad, .sida-sparade__fot { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 13px; color: inherit; text-decoration: none; transition: background var(--lk-t) var(--lk-ease); }
.sida-sparade__rad:hover, .sida-sparade__fot:hover { background: var(--w-08); }
.sida-sparade__rad .ny-i { width: 15px; height: 15px; flex: none; color: var(--a-4); }
.sida-sparade__rad b { display: block; font-weight: 500; }
.sida-sparade__rad small { display: block; font-size: 13px; color: var(--fg-4); }
.sida-sparade__fot { margin-top: 4px; border-top: 1px solid var(--w-08); border-radius: 0 0 13px 13px; color: var(--a-4); font-weight: 500; }
.sida-sparade__fot .ny-i { width: 15px; height: 15px; }
.sida-sparade.is-oppen :is(.sida-sparade__rad, .sida-sparade__fot) { animation: sida-upp 300ms var(--lk-ease) both; }
.sida-sparade.is-oppen > :nth-child(3) { animation-delay: 30ms; }
.sida-sparade.is-oppen > :nth-child(4) { animation-delay: 60ms; }
.sida-sparade.is-oppen > :nth-child(5) { animation-delay: 90ms; }
.sida-sparade.is-oppen > :nth-child(6) { animation-delay: 120ms; }
/* Utforska: samma meny, hänger under navknappen åt vänster (left av lab.js); under 1025 px bär hamburgaren navet */
.sida-utforska { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; }
.sida-utforska .ny-i { width: 13px; height: 13px; margin-block: -3px; transition: transform 260ms var(--lk-ease); }
.sida-utforska[aria-expanded="true"] { color: var(--fg-1); }
.sida-utforska[aria-expanded="true"] .ny-i { transform: rotate(180deg); }
.sida-utforska-meny { transform-origin: top left; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; max-width: calc(100vw - 24px); padding: 8px; } /* lika stor som sökmenyn (bredd av lab.js) */
.sida-utforska-meny .sida-sparade__topp { grid-column: 1 / -1; }
.sida-sparade.is-oppen > :nth-child(7) { animation-delay: 150ms; }
@media (max-width: 1024px) { .sida-utforska, .sida-utforska-meny { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sida-sparade, .sida-sparade * { transition: none !important; animation: none !important; } }

/* ── 2d. Sökmenyn: liquid glass (data-glas="panel"), ligger i body och placeras under fältet av lab.js. Chips = vad man söker i, sedan populärt/träffar ── */
.sida-sokmeny {
  position: fixed; top: 0; left: 0; z-index: 70; width: 520px; max-width: calc(100vw - 24px);
  padding: 8px; border-radius: 22px;
  font: 400 13px/1.3 var(--font-ui); color: var(--fg-1c);
  transform-origin: top center; transform: translateY(-6px) scale(.97); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--lk-ease), opacity 180ms var(--lk-ease), visibility 0s 260ms;
}
.sida-sokmeny[data-glas] { --glas-alfa: .55; --glas-rim: .5; }
[data-theme="light"] .sida-sokmeny[data-glas] { --glas-alfa: .72; }
.sida-sokmeny.is-oppen { transform: none; opacity: 1; visibility: visible; transition: transform var(--lk-t) var(--lk-ease) 80ms, opacity 200ms var(--lk-ease) 80ms; }
.sida-sokmeny__kat { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; border-bottom: 1px solid var(--w-08); }
.sida-sokmeny__chip { flex: none; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--w-06); color: var(--fg-3); font: 500 13px/1 var(--font-ui); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.sida-sokmeny__chip:hover { background: var(--w-10); color: var(--fg-1c); }
.sida-sokmeny__chip[aria-pressed="true"] { background: var(--a-4); color: var(--on-accent); }
.sida-sokmeny__lista { max-height: min(60vh, 440px); overflow-y: auto; padding-top: 4px; }
.sida-sokmeny__rubrik { padding: 10px 10px 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); }
.sida-sokmeny__rad { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 14px; color: inherit; text-decoration: none; transition: background var(--lk-t) var(--lk-ease); }
.sida-sokmeny__rad:is(:hover, :focus-visible) { background: var(--w-08); outline: 0; }
.sida-sokmeny__rad > span:nth-child(2) { flex: 1; min-width: 0; }
.sida-sokmeny__rad b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sida-sokmeny__rad small { display: block; font-size: 13px; color: var(--fg-4); }
.sida-sokmeny__rad mark { background: none; color: var(--a-4); font-weight: 600; }
.sida-sokmeny__rad > .ny-i { width: 15px; height: 15px; flex: none; color: var(--sd-ang); }
.sida-sokmeny__ikon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--w-06); color: var(--fg-3); }
.sida-sokmeny__ikon .ny-i { width: 16px; height: 16px; }
.sida-sokmeny__ikon--kommun { background: var(--sd-himmel-t); color: var(--sd-himmel); }
.sida-sokmeny__ikon--ort { background: var(--sd-rod-t); color: var(--a-4); }
.sida-sokmeny__ikon--nyhet { background: var(--sd-sol-t); color: var(--sd-sol); }
.sida-sokmeny__ikon--forening, .sida-sokmeny__ikon--event, .sida-sokmeny__ikon--lager { background: var(--sd-ang-t); color: var(--sd-ang); }
.sida-sokmeny__ikon--lan { background: var(--sd-himmel-t); color: var(--sd-himmel); }
.sida-sokmeny__ikon--omrade, .sida-sokmeny__ikon--adress { background: var(--sd-rod-t); color: var(--a-4); }
.sida-sokmeny__ikon--matt, .sida-sokmeny__ikon--dataset { background: var(--sd-sol-t); color: var(--sd-sol); }
/* "Visa alla N …" under en grupp: byter chip till gruppens kategori */
.sida-sokmeny__fler { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 54px; padding: 4px 0; border: 0; border-radius: 8px; background: none; color: var(--a-4); font: 500 13px/1.2 var(--font-ui); cursor: pointer; }
.sida-sokmeny__fler .ny-i { width: 13px; height: 13px; transition: transform var(--lk-t) var(--lk-ease); }
.sida-sokmeny__fler:is(:hover, :focus-visible) .ny-i { transform: translateX(3px); }
.sida-sokmeny__kropp { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px; transition: grid-template-columns 380ms var(--lk-ease), gap 380ms var(--lk-ease); }
.sida-sokmeny.har-q .sida-sokmeny__kropp { grid-template-columns: minmax(0, 1fr) 0px; gap: 0; }
.sida-sokmeny__veckans { display: flex; flex-direction: column; min-width: 0; overflow: hidden; margin-top: 8px; padding: 12px; border-radius: 16px; background: var(--w-06); color: inherit; text-decoration: none; transition: opacity 240ms var(--lk-ease), background var(--lk-t) var(--lk-ease); }
.sida-sokmeny__veckans:is(:hover, :focus-visible) { background: var(--w-08); outline: 0; }
.sida-sokmeny.har-q .sida-sokmeny__veckans { padding-inline: 0; opacity: 0; pointer-events: none; transition-duration: 140ms; }
.sida-sokmeny__veckans > * { white-space: nowrap; } /* texten står still medan kolumnen viker ihop */
.sida-sokmeny__vbild { display: grid; place-items: center; height: 64px; margin-bottom: 10px; border-radius: 11px; background: linear-gradient(135deg, var(--sd-himmel-t), var(--sd-ang-t)); color: var(--sd-himmel); }
.sida-sokmeny__vbild .ny-i { width: 24px; height: 24px; }
.sida-sokmeny__vkicker { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--a-4); }
.sida-sokmeny__veckans > b { margin-top: 3px; font: 600 17px/1.2 var(--font-ui); }
.sida-sokmeny__veckans > small { font-size: 13px; color: var(--fg-4); }
.sida-sokmeny__vtxt { margin-top: 8px; white-space: normal; color: var(--fg-3); }
.sida-sokmeny__vkpi { display: flex; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--fg-4); }
.sida-sokmeny__vkpi b { display: block; font: 600 13.5px/1.2 var(--font-ui); color: var(--fg-1c); font-variant-numeric: tabular-nums; }
.sida-sokmeny__vlank { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--a-4); font-weight: 500; }
.sida-sokmeny__vlank .ny-i { width: 14px; height: 14px; transition: transform var(--lk-t) var(--lk-ease); }
.sida-sokmeny__veckans:hover .sida-sokmeny__vlank .ny-i { transform: translateX(3px); }
@media (max-width: 767px) { .sida-sokmeny__kropp { grid-template-columns: minmax(0, 1fr); } .sida-sokmeny__veckans { display: none; } }
.sida-sparmeny .sida-sokmeny__lista { columns: 3; column-gap: 8px; }   /* Sparade i sökmenyns ruta: grupperna i tre spalter ⇒ ungefär sökmenyns höjd */
@media (max-width: 1024px) { .sida-sparmeny .sida-sokmeny__lista { columns: 2; } }
.sida-spargrupp { break-inside: avoid; }
@media (max-width: 767px) { .sida-sparmeny .sida-sokmeny__lista { columns: 1; } }
.sida-sparfot { display: flex; gap: 4px; margin-top: 4px; border-top: 1px solid var(--w-08); padding-top: 4px; }
.sida-sparmeny .sida-sparade__fot { flex: 1; margin: 0; border: 0; border-radius: 14px; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.sida-sparmeny button.sida-sparade__fot { justify-content: flex-end; }   /* dela-knappen i högra hörnet */
/* dela-läget: listan tonar ut, instruktioner + dela-sätt tonar in i samma ruta (båda vyerna i samma rutnätscell ⇒ menyn behåller måtten) */
.sida-sparstapel { display: grid; }
.sida-sparvy, .sida-spardela { grid-area: 1 / 1; min-width: 0; transition: opacity 220ms var(--lk-ease), transform var(--lk-t) var(--lk-ease), visibility 0s 220ms; }
.sida-spardela { opacity: 0; visibility: hidden; transform: translateY(6px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 4px 24px; align-content: start; }
.sida-sparmeny.is-dela .sida-sparvy { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.sida-sparmeny.is-dela .sida-spardela { opacity: 1; visibility: visible; transform: none; transition-delay: 120ms, 120ms, 0s; }
.sida-spardela__tillbaka { grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 4px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: var(--w-06); color: var(--fg-3); font: 500 13px/1 var(--font-ui); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.sida-spardela__tillbaka:hover { background: var(--w-10); color: var(--fg-1c); }
.sida-spardela__tillbaka .ny-i { width: 15px; height: 15px; }
.sida-spardela__hur { padding: 10px 10px 4px; }
.sida-spardela__hur h3 { margin: 0 0 10px; font: 600 17px/1.25 var(--font-ui); color: var(--fg-1c); }
.sida-spardela__hur ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--fg-2, var(--fg-1c)); line-height: 1.45; }
.sida-spardela__hur p { margin: 14px 0 0; font-size: 13px; color: var(--fg-4); }
.sida-spardela__satt { padding-top: 6px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px 8px; }
.sida-spardela__satt b { display: block; font-weight: 500; }
.sida-spardela__satt [hidden] { display: none; }   /* raden är display:flex, som annars vinner över hidden */
.sida-spardela__satt small { display: block; font-size: 13px; color: var(--fg-4); }
@media (max-width: 767px) { .sida-spardela, .sida-spardela__satt { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sida-sparvy, .sida-spardela { transition: none; transform: none !important; } }
@media (max-width: 767px) { .sida-sparfot { flex-direction: column; } .sida-sparmeny button.sida-sparade__fot { justify-content: flex-start; } }
.sida-sokmeny__tom { padding: 18px 10px; color: var(--fg-4); text-align: center; }
.sida-sokmeny.is-oppen.is-in .sida-sokmeny__rad { animation: sida-upp 300ms var(--lk-ease) both; }
.sida-sokmeny.is-oppen.is-in .sida-sokmeny__rad:nth-of-type(2) { animation-delay: 25ms; }
.sida-sokmeny.is-oppen.is-in .sida-sokmeny__rad:nth-of-type(3) { animation-delay: 50ms; }
.sida-sokmeny.is-oppen.is-in .sida-sokmeny__rad:nth-of-type(4) { animation-delay: 75ms; }
.sida-sokmeny.is-oppen.is-in .sida-sokmeny__rad:nth-of-type(n+5) { animation-delay: 100ms; }
@media (prefers-reduced-motion: reduce) { .sida-sokmeny, .sida-sokmeny * { transition: none !important; animation: none !important; } }

/* ── 3. sektionsnaven: centrerad rad (ikon + ord) som fäster under headern; ser ut som headern själv
      (samma glas, samma tonade pill som glider under valet, --x/--w av lab.js), så bytet in i headern blir sömlöst ── */
/* inte sticky: Safari 26 färgar då sökrutan i botten platt vid uppåtscroll. Raden flyttar ändå in i headern när hållaren
   når fästet (lab.js läser fästet ur scroll-margin-top), så klistret syntes aldrig. */
.ny-navhallare { scroll-margin-top: calc(86px + env(safe-area-inset-top)); z-index: 40; height: 52px; margin-top: clamp(40px, 5vw, 64px); }
.ny-snav, .ny-snav.is-fast {
  position: absolute; top: 0; left: 50%; right: auto; width: max-content; max-width: calc(100% - 24px);
  transform: translateX(-50%); padding: 5px; border: 0; border-radius: 999px;
}
.ny-snav[data-glas] { --glas-alfa: .5; --glas-rim: .5; }
[data-theme="light"] .ny-snav[data-glas] { --glas-alfa: .72; }
.ny-snav__rad { position: relative; gap: 2px; }
.ny-snav__rad::before {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: var(--w, 0px); border-radius: 999px;
  background: var(--w-08);
  transform: translateX(var(--x, 0px)); opacity: var(--o, 0);
  transition: transform 300ms var(--lk-ease), width 300ms var(--lk-ease), opacity var(--lk-t) var(--lk-ease);
}
.ny-snav__a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; font: var(--type-label); white-space: nowrap; color: var(--fg-5);
  background: transparent !important; transition: color var(--lk-t) var(--lk-ease);
}
.ny-snav__a .ny-i { width: 15px; height: 15px; flex: none; opacity: .7; transition: opacity var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.ny-snav__a:hover, .ny-snav__a.is-aktiv { color: var(--fg-1); }
.ny-snav__a.is-aktiv .ny-i { opacity: 1; }
:root:not([data-theme="light"]) .ny-snav__rad::before { background: rgba(255, 255, 255, .15); } /* samma som headerns pill i mörkt */
.ny-snav__a:active { transform: scale(.96); }
/* fäst ⇒ raden flyttas in i headern OVANPÅ sidnavet (lab.js: samma vänsterkant, .sida-snav-flyttad medan den bor där,
   .sida-snav-i-hdr när den syns). Byte = rullning: sidnavets länkar glider upp och ut i tur, sektionerna upp underifrån
   i tur; tillbaka omvänt. Pillen under tonar bort i samma stund som raden lämnar den. */
.ny-snav { transition: opacity 200ms var(--lk-ease); }
.sida-snav-sida { display: none; } /* sidans namn: bara i headern nedan */
.sida-snav-flyttad .ny-snav { opacity: 0; pointer-events: none; }
@media all { /* PC, iPad och telefon likadant; växlaren finns bara på PC (lab.js) */
  .ny-hdr .ny-nav__a {
    transition: color var(--lk-t) var(--lk-ease),
      opacity 200ms var(--lk-ease) calc(120ms + var(--i, 0) * 22ms), transform 380ms var(--lk-ease) calc(120ms + var(--i, 0) * 22ms);
  }
  .sida-snav-i-hdr .ny-hdr .ny-nav { pointer-events: none; }
  .sida-snav-i-hdr .ny-hdr .ny-nav__a {
    opacity: 0; transform: translateY(-12px);
    transition: color var(--lk-t) var(--lk-ease), opacity 180ms var(--lk-ease) calc(var(--i, 0) * 18ms), transform 320ms var(--lk-ease) calc(var(--i, 0) * 18ms);
  }
  .ny-hdr > .ny-snav__rad { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); transition: opacity 200ms var(--lk-ease); }
  /* i headern ser sektionslänkarna ut precis som sidnavets: ingen egen vit knapp, inga ikoner, headerns pill är markeringen */
  .ny-hdr > .ny-snav__rad { gap: 0; }
  .ny-hdr > .ny-snav__rad::before, .ny-hdr > .ny-snav__rad .ny-i, .ny-hdr > .ny-snav__rad i { display: none; }
  .ny-hdr > .ny-snav__rad .ny-snav__a {
    padding: 9px 12px; font: var(--type-label); white-space: nowrap; color: var(--fg-5);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: color var(--lk-t) var(--lk-ease), opacity 160ms var(--lk-ease) calc(var(--i, 0) * 18ms), transform 300ms var(--lk-ease) calc(var(--i, 0) * 18ms);
  }
  .sida-snav-i-hdr .ny-hdr > .ny-snav__rad .ny-snav__a {
    opacity: 1; transform: none; pointer-events: auto;
    transition: color var(--lk-t) var(--lk-ease), opacity 240ms var(--lk-ease) calc(90ms + var(--i, 0) * 26ms), transform 420ms var(--lk-ease) calc(90ms + var(--i, 0) * 26ms);
  }
  .ny-hdr > .ny-snav__rad .ny-snav__a:is(:hover, .is-aktiv) { color: var(--fg-1); }
  .ny-hdr.is-sok > .ny-snav__rad { opacity: 0; pointer-events: none; }
  /* sidans namn före sektionerna (lab.js): syns bara när raden står i headern, glider in först och ut sist */
  .ny-hdr > .ny-snav__rad .sida-snav-sida {
    display: flex; align-items: center; gap: 2px; padding: 9px 2px 9px 12px; font: var(--type-label); font-weight: 600; white-space: nowrap; color: var(--fg-1); text-decoration: none;
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 160ms var(--lk-ease), transform 300ms var(--lk-ease);
  }
  .ny-hdr > .ny-snav__rad .sida-snav-sida .ny-i { display: block; width: 14px; height: 14px; color: var(--fg-5); }
  .sida-snav-i-hdr .ny-hdr > .ny-snav__rad .sida-snav-sida { opacity: 1; transform: none; pointer-events: auto; transition: opacity 240ms var(--lk-ease) 40ms, transform 420ms var(--lk-ease) 40ms; }
  .sida-hdr-sidor .ny-hdr > .ny-snav__rad .sida-snav-sida { opacity: 0; transform: translateX(-28px); pointer-events: none; }
  /* växlaren (lab.js): fälls ut först i sektionsläget; i .sida-hdr-sidor sveper sektionerna ut åt vänster i tur
     och sidnavet kommer tillbaka, pilarna vänder */
  .sida-vaxla { width: 0; padding: 0; margin-right: -8px; opacity: 0; overflow: hidden; pointer-events: none; transition: width 320ms var(--lk-ease), margin 320ms var(--lk-ease), opacity 200ms var(--lk-ease), background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
  .sida-snav-i-hdr .sida-vaxla { width: 34px; margin-right: 0; opacity: 1; pointer-events: auto; }
  .sida-vaxla .ny-i { transition: transform 420ms var(--lk-ease); }
  .sida-hdr-sidor .sida-vaxla .ny-i { transform: scaleX(-1); }
  .sida-hdr-sidor .ny-hdr .ny-nav { pointer-events: auto; }
  .sida-hdr-sidor .ny-hdr > .ny-snav__rad { pointer-events: none; } /* raden ligger ovanpå sidnavet och åt annars dess hover/klick */
  .sida-hdr-sidor .ny-hdr .ny-nav__a { opacity: 1; transform: none; transition: color var(--lk-t) var(--lk-ease), opacity 240ms var(--lk-ease) calc(120ms + var(--i, 0) * 22ms), transform 420ms var(--lk-ease) calc(120ms + var(--i, 0) * 22ms); }
  .sida-hdr-sidor .ny-hdr > .ny-snav__rad .ny-snav__a { opacity: 0; transform: translateX(-28px); pointer-events: none; transition: color var(--lk-t) var(--lk-ease), opacity 180ms var(--lk-ease) calc(var(--i, 0) * 22ms), transform 320ms var(--lk-ease) calc(var(--i, 0) * 22ms); }
}
/* texten optiskt mitt i pillen: radboxen centrerar ascent/descent, inte versalerna (Segoe/SF satt ~1 px lågt).
   Trimma till versalhöjd + baslinje och lägg tillbaka det som paddning ⇒ samma pillhöjd (34 px) */
@supports (text-box: trim-both cap alphabetic) {
  .ny-hdr :is(.ny-nav, .ny-snav__rad) :is(.ny-nav__a, .ny-snav__a, .sida-snav-sida) { padding-block: calc(17.125px - .35em); }
  .ny-hdr :is(.ny-nav, .ny-snav__rad) :is(.ny-nav__a, .ny-snav__a, .sida-snav-sida), .ny-hdr :is(.ny-snav__a, .sida-snav-sida, .sida-utforska) > span { text-box: trim-both cap alphabetic; }
}
@media (prefers-reduced-motion: reduce) { .ny-hdr .ny-nav__a, .ny-hdr > .ny-snav__rad :is(.ny-snav__a, .sida-snav-sida), .sida-vaxla .ny-i { transform: none !important; transition-duration: 0s !important; } }
/* iPad/telefon: raden får inte plats bredvid hela märket ⇒ namnet tonar medan raden står i headern, länkarna tätare */
@media (max-width: 1024px) {
  .ny-hdr__namn { transition: opacity 200ms var(--lk-ease); }
  .sida-snav-i-hdr .ny-hdr__namn { opacity: 0; }
  .ny-hdr > .ny-snav__rad .ny-snav__a { padding-inline: 8px; }
}
/* hoppet till en sektion landar under header + nav, inte bakom dem */
.ny-panel[id] { scroll-margin-top: 150px; }
@media (max-width: 767px) { .ny-panel[id] { scroll-margin-top: 90px; } } /* telefon: naven bor i headern */
@media (max-width: 767px) {
  .ny-navhallare { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }
  .ny-snav__a:not(.is-aktiv):has(.ny-i, svg, i) span { display: none; } /* telefon: ikoner, bara den valda sektionen bär sitt ord; länkar utan ikon behåller ordet (annars tomma piller) */
  .ny-snav__a { padding: 10px 13px; gap: 6px; }
  /* i headern: orden som på PC. Sparade, tema och språk viker undan (sök + hamburgaren kvar) och raden
     sveps i sidled med tonade kanter; lab.js rullar den valda sektionen i bild */
  .ny-hdr > .ny-snav__rad .ny-snav__a:not(.is-aktiv) span { display: inline; }
  .ny-hdr > .ny-snav__rad > * { flex: none; }
  .ny-hdr > .ny-snav__rad { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 16px), transparent); }
  .ny-hdr > .ny-snav__rad::-webkit-scrollbar { display: none; }
  .ny-hdr__hoger :is(.ny-ikon--spara, .ny-ikon--tema, .ny-sprak) { transition: width 320ms var(--lk-ease), margin 320ms var(--lk-ease), opacity 200ms var(--lk-ease); }
  .sida-snav-i-hdr .ny-hdr__hoger :is(.ny-ikon--spara, .ny-ikon--tema, .ny-sprak) { width: 0; min-width: 0; padding: 0; margin-left: -6px; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }
}

/* ── 4a. startsidans hero: helskärmsscen (video eller målat landskap) ── */
.sida-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* kant i kant (vänster, topp, höger): ut över rotens 12/8 px luft. top, inte margin-top (headerns -56 px, se telefonregeln). */
  top: -12px; margin-inline: calc(50% - 50vw);
  height: 100svh; min-height: 560px; max-height: 1100px;
  /* hård underkant, rundade hörn (Malte 2026-10-13: inte tonad) */
  border-radius: 0 0 clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px);
  display: grid; align-items: end;
  color: #ffffff;
}
.sida-hero__scen { position: absolute; inset: 0; z-index: -2; background: var(--sl-h2); }
.sida-hero__scen > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sida-hero__video:not(:has(source)) { display: none; }
/* läsbarhet: mörkare nedtill vänster där texten står, himlen lämnas i fred */
.sida-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 18, 16, .28) 0, rgba(8, 18, 16, 0) 22%), linear-gradient(0deg, rgba(8, 18, 16, .6) 0, rgba(8, 18, 16, .18) 42%, rgba(8, 18, 16, 0) 64%);
}
.sida-hero__text { padding: clamp(28px, 5vw, 72px); padding-bottom: clamp(120px, 20vh, 240px); display: grid; gap: 18px; max-width: 900px; }
.sida-hero__text .ny-kicker { color: rgba(255, 250, 240, .86); }
.sida-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; text-shadow: 0 2px 30px rgba(8, 18, 16, .35); }
.sida-hero p { margin: 0; max-width: 46ch; font: 400 clamp(15px, 1.3vw, 18px)/1.55 var(--font-ui); color: rgba(255, 250, 240, .9); text-shadow: 0 1px 14px rgba(8, 18, 16, .4); }
.sida-hero .ny-chiprad { margin-top: 8px; gap: 10px; }
.sida-hero .ny-btn { padding: 15px 24px; font-size: 14px; background: #ffffff; color: #1b2a24; box-shadow: 0 8px 24px -8px rgba(8, 18, 16, .5); }
.sida-hero .ny-btn:hover { background: #ffffff; color: #1b2a24; }
.sida-hero .ny-btn--sek { background: rgba(255, 255, 255, .16); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sida-hero .ny-btn--sek:hover { background: rgba(255, 255, 255, .26); color: #ffffff; }
.sida-hero__text > * { animation: sida-upp 820ms var(--lk-ease) backwards; }   /* backwards, inte both: en kvarhållen slutbild låste opaciteten så att söklägets bortoning aldrig syntes */
.sida-hero__text > :nth-child(1) { animation-delay: 120ms; }
.sida-hero__text > :nth-child(2) { animation-delay: 220ms; }
.sida-hero__text > :nth-child(3) { animation-delay: 340ms; }
.sida-hero__text > :nth-child(4) { animation-delay: 460ms; }
/* paus + rulla-ned: två små glasknappar i hörnen */
.sida-hero__paus, .sida-hero__ned {
  position: absolute; bottom: 22px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #ffffff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease);
}
.sida-hero__paus { right: 22px; }
.sida-hero__ned { left: 50%; margin-left: -21px; animation: sida-gunga 2.6s ease-in-out infinite; }
:is(.sida-hero__paus, .sida-hero__ned):hover { background: rgba(255, 255, 255, .26); color: #ffffff; }
.sida-hero__paus .ny-i, .sida-hero__ned .ny-i { width: 16px; height: 16px; }
.sida-hero__paus-s { display: none; fill: currentColor; stroke: none; }
.sida-hero.is-paus .sida-hero__paus-p { display: none; }
.sida-hero.is-paus .sida-hero__paus-s { display: block; }
.sida-hero.is-paus .sida-hero__ned { animation: none; }
@keyframes sida-gunga { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 767px) {
  /* kant i kant: bilden går upp bakom statusfältet och ut till sidorna (roten har 12/8 px luft), bara botten rundad.
     top, inte margin-top: headerns -56 px slås ihop med en negativ marginal här och slukar den. */
  .sida-hero { min-height: 520px; }
  .sida-hero__ned { display: none; }
}
@media (max-width: 480px) { .sida-hero { top: -8px; } }

/* ── 4b. det målade landskapet (platshållare tills videon finns; färger i §0) ── */
.sl-h1 { stop-color: var(--sl-h1); } .sl-h2 { stop-color: var(--sl-h2); } .sl-h3 { stop-color: var(--sl-h3); }
.sl-sken1 { stop-color: var(--sl-sken); } .sl-sken2 { stop-color: var(--sl-sken); stop-opacity: 0; }
.sl-sol { fill: var(--sl-sol); }
.sl-moln { fill: var(--sl-moln); animation: sida-drift 90s linear infinite alternate; }
.sl-moln--b { animation-duration: 130s; animation-direction: alternate-reverse; }
.sl-moln--c { animation-duration: 70s; }
.sida-hero.is-paus .sl-moln { animation-play-state: paused; }
@keyframes sida-drift { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.sl-fjall { fill: var(--sl-fjall); } .sl-as { fill: var(--sl-as); } .sl-gran { fill: var(--sl-gran); }
.sl-kulle { fill: var(--sl-kulle); } .sl-kulle--h { fill: var(--sl-kulle-h); } .sl-ang { fill: var(--sl-ang); } .sl-vag { fill: var(--sl-vag); }
.sl-stuga__vagg { fill: var(--sl-vagg); } .sl-stuga__tak { fill: var(--sl-tak); } .sl-stuga__fonster, .sl-stuga__dorr { fill: var(--sl-fonster); }
.sl-stuga__dorr { opacity: .9; }
.sl-trad { fill: var(--sl-trad); } .sl-blom { fill: var(--sl-blom); }

/* ── 4c. undersidornas rubrikkort (index.html?s=…): samma landskap i miniatyr ── */
.lab-hero.lab-ph { text-align: center; text-transform: none; letter-spacing: normal; font-family: var(--font-ui); border: 0; border-radius: clamp(22px, 2.4vw, 32px); gap: 18px; min-height: min(52dvh, 460px); }
.lab-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; color: var(--fg-1); }
.lab-hero .lab-txt { color: var(--fg-4); font-size: 15px; line-height: 1.55; }
.lab-hero > * { position: relative; z-index: 1; animation: sida-upp 640ms var(--lk-ease) both; }
.lab-hero > :nth-child(1) { animation-delay: 60ms; }
.lab-hero > :nth-child(2) { animation-delay: 140ms; }
.lab-hero > :nth-child(3) { animation-delay: 240ms; }
.lab-hero > :nth-child(4) { animation-delay: 340ms; }
.ny-panel--forst > :is(.ny-kicker, h1, .ny-h2, .ny-stat__topp, .ny-stat__ingress) { animation: sida-upp 560ms var(--lk-ease) both; }
.ny-panel--forst > .ny-kicker { animation-delay: 40ms; }
.ny-panel--forst > :is(h1, .ny-h2, .ny-stat__topp) { animation-delay: 120ms; }
.ny-panel--forst > .ny-stat__ingress { animation-delay: 200ms; }
/* EN placering för brödsmulorna på alla sidor: första panelen 18px under headern (var 72px på lista/statistik/nyheter/spel) */
.ny-panel--forst { margin-top: 18px; }
.ny-panel--forst h1.ny-h2--serif { font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); max-width: 16ch; }

/* ── platshållarna: himmel + två kullar, inte streckmönster (kort, bilder, rubrikkortet) ── */
.lab-ph {
  position: relative; overflow: hidden; border: 0; color: var(--fg-7);
  background: linear-gradient(180deg, var(--sd-himmel-t) 0, var(--sd-kort-2) 78%);
}
.lab-ph::before, .lab-ph::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  -webkit-mask: url(kulle.svg) bottom / 100% 100% no-repeat; mask: url(kulle.svg) bottom / 100% 100% no-repeat;
}
.lab-ph::before { height: 46%; background: var(--sl-as); opacity: .55; transform: scaleX(-1); }
.lab-ph::after { height: 30%; background: var(--sl-kulle); opacity: .75; }
.lab-hero.lab-ph::before { height: 38%; }
.lab-hero.lab-ph::after { height: 22%; }
[data-theme="light"] .lab-ph::before { opacity: .45; }
[data-theme="light"] .lab-ph::after { opacity: .6; }

/* ── 5. kort: platta sedan 2026-10-22 (statsbudget.se): ingen yta, ingen skugga, ingen linje (2026-10-23: hårlinjerna såg ut som strunt); länken byter färg på hover.
   Kort med yta finns bara kvar där de gör något: popover, rullgardin, flytande paneler (st-pop, st-valbar, modalen, sökmenyn) ── */
.ny-kort {
  border-top: 0; background: none; color: var(--fg-4);
  box-shadow: none; border-radius: 0; padding: 20px 0;
}
a.ny-kort:hover, .ny-kort--hover:hover { background: none; transform: none; box-shadow: none; }
a.ny-kort .ny-kort__titel { transition: color var(--lk-t) var(--lk-ease); }
a.ny-kort:hover .ny-kort__titel { color: var(--a-4); }
.ny-kort__ikon { width: 46px; height: 46px; border-radius: 14px; background: var(--sd-rod-t); color: var(--a-4); transition: transform 320ms var(--lk-ease); }
.ny-kort__ikon .ny-i { width: 20px; height: 20px; }
/* ikonbrickorna roterar genom sommarens färger */
.ny-kort-grid > :nth-child(4n+2) .ny-kort__ikon { background: var(--sd-ang-t); color: var(--sd-ang); }
.ny-kort-grid > :nth-child(4n+3) .ny-kort__ikon { background: var(--sd-himmel-t); color: var(--sd-himmel); }
.ny-kort-grid > :nth-child(4n+4) .ny-kort__ikon { background: var(--sd-sol-t); color: var(--sd-sol); }
a.ny-kort:hover .ny-kort__ikon { transform: scale(1.08) rotate(-4deg); }
.ny-kort__titel { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--fg-1); }
.ny-kort__text { margin-bottom: 4px; font-size: 14px; line-height: 1.6; color: var(--fg-5); }
.ny-kort--tint { padding: 18px 20px; border-top: 0; border-radius: 16px; background: var(--sd-ang-t); box-shadow: none; }   /* svarsrutan: enda tonade ytan */
a.ny-kort--tint:hover { background: var(--sd-ang-t); }
.ny-kort--tint .ny-kort__ikon { background: var(--sd-kort); color: var(--sd-ang); }
.ny-kort-grid { gap: 18px; }
/* bildplatshållare i kort: zoomar mjukt när kortet lyfter */
.ny-kort .lab-ph--bild, .lab-lkort__bild { border-radius: 16px; transition: transform 520ms var(--lk-ease); }
a.ny-kort:hover :is(.lab-ph--bild, .lab-lkort__bild) { transform: scale(1.025); }
.ny-kort .lab-ph--bild { margin-bottom: 4px; }

/* ── 6. kontroller: knapp, chip, segment, fält ──────────────────────── */
.ny-btn { padding: 14px 22px; font-size: 13.5px; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease); }
.ny-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(40, 20, 10, .45); }
.ny-btn:active { transform: scale(.97); transition-duration: 80ms; }
.ny-btn--sek { background: var(--sd-kort); color: var(--fg-2); box-shadow: var(--sd-kant); }
.ny-btn--sek:hover { background: var(--sd-kort); color: var(--fg-1); box-shadow: var(--sd-kant-upp); }
.ny-chip { background: var(--sd-kort); box-shadow: inset 0 0 0 1px var(--w-08); color: var(--fg-4); }
.ny-chip, .lk-chip { transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
:is(.ny-chip, .lk-chip):is(button, a):hover { transform: translateY(-1px); }
:is(.ny-chip, .lk-chip):is(button, a):active { transform: scale(.95); transition-duration: 80ms; }
.ny-chip--accent, .ny-chip.is-vald, .lk-chip.on { background: var(--fg-1); color: var(--s-deep); box-shadow: none; }
.ny-chip--stum { background: transparent; box-shadow: none; }
.ny-chiprad__nollstall { transition: color var(--lk-t) var(--lk-ease); }
.ny-chiprad__nollstall:hover { color: var(--fg-3); }
/* segment + flikar: glidande pill (--x/--w av lab.js) */
.ny-seg, .nw-tabs { position: relative; background: var(--sd-kort); box-shadow: var(--sd-kant); }
:is(.ny-seg, .nw-tabs)::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 0px); border-radius: 999px;
  background: var(--fg-1);
  transform: translateX(var(--x, 0px)); opacity: var(--o, 0);
  transition: transform 280ms var(--lk-ease), width 280ms var(--lk-ease), opacity var(--lk-t) var(--lk-ease);
}
.ny-seg__a, .nw-tab { position: relative; z-index: 1; }
.ny-seg__a { transition: color var(--lk-t) var(--lk-ease); }
.ny-seg__a[aria-pressed="true"], .ny-seg__a.is-vald { background: transparent; color: var(--s-deep); }
.ny-seg__a:active { transform: scale(.96); }
.ny-falt, .nw-search { background: var(--sd-kort); border-top: 0; box-shadow: var(--sd-kant); border-radius: 999px; transition: box-shadow var(--lk-t) var(--lk-ease); }
.ny-falt:focus-within, .nw-search:focus-within { outline: 0; box-shadow: var(--sd-kant), 0 0 0 2px var(--aw-42), 0 0 0 6px var(--aw-12); }
.ny-verktyg .list-sort { border-radius: 999px; background: var(--sd-kort); box-shadow: var(--sd-kant); transition: box-shadow var(--lk-t) var(--lk-ease); }
.ny-verktyg .list-sort:hover { box-shadow: var(--sd-kant-upp); }
.ny-seg__a .ny-i { transition: transform var(--lk-t) var(--lk-ease); }
.ny-seg__a:hover .ny-i { transform: scale(1.12); }

/* ── 7. rader, staplar, tal: växer när de rullas in (.in av lab.js) ─── */
.lab-rader { margin-top: 18px; }
.ny-rad { transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); border-radius: 0; }   /* raderna står på sidan: rak hårlinje, inte kurvade ändar */
.ny-rad:hover { transform: translateX(3px); background: var(--w-05); }
.lab-stapel { height: 6px; background: var(--w-07); }
.lab-stapel > i { background: var(--sd-ang); animation: none; transform: scaleX(0); transition: transform 760ms var(--lk-ease); transition-delay: calc(var(--i, 0) * 45ms); }
.in .lab-stapel > i { transform: none; }
.ny-stat__kolumn-stapel { transform: scaleY(0); transform-origin: bottom; transition: transform 640ms var(--lk-ease); transition-delay: calc(var(--i, 0) * 55ms); }
.in .ny-stat__kolumn-stapel { transform: none; }
.ny-stat__kolumn-ar { color: var(--fg-8); }   /* ny.css ger --fg-9 = 3,5:1, för svagt för 10,5 px text */
.ny-siffra { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; font-weight: 600; color: var(--fg-1); }
.ny-siffra--accent { color: var(--a-4); }

/* ── 8. lista ─────────────────────────────────────────────────────────── */
.lab-lgrid { gap: 18px; }
.lab-lkort { padding: 12px 12px 18px; }
.lab-lkort .ny-kort__titel { margin: 12px 4px 2px; font-size: 18px; }
.lab-lkort .lab-txt { margin: 0 4px; font: var(--type-meta); color: var(--fg-7); }
.ny-verktyg { gap: 10px; }
.list-index__grid a { display: inline-block; transition: color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.list-index__grid a:hover { color: var(--fg-1); transform: translateX(2px); }

/* ── 9. statistik ─────────────────────────────────────────────────────── */
.ny-glas, .ny-glas--skugga { backdrop-filter: none; -webkit-backdrop-filter: none; }
:is(.ny-glas, .ny-glas--skugga):not(.st-pop__ark) { padding-inline: 0; border-top: 0; border-radius: 0; background: none; box-shadow: none; }
.ny-stat__kpi-varde { display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.lab-tabell__grid tbody tr { transition: background var(--lk-t) var(--lk-ease); }
.lab-tabell__grid tbody tr:hover td { background: var(--w-045); }
.lab-tabell__grid tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.lab-tabell__grid tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.lab-tabell__grid td { border-top-color: var(--w-05); }
/* texttabell: lab.css högerställer allt utom första spalten (sifferregeln); i en tabell med bara text läses det som trasigt */
.lab-tabell--text .lab-tabell__grid td, .lab-tabell--text .lab-tabell__grid th { text-align: left; }
.ny-stat__topprad, .ny-stat__rad { transition: transform var(--lk-t) var(--lk-ease); }
.ny-stat__topprad:hover, .ny-stat__rad:hover { transform: translateX(3px); }

/* ── 10. nyheter ──────────────────────────────────────────────────────── */
.nw-item { border-radius: 22px; transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease); }
.nw-item:hover { transform: translateY(-2px); background: var(--sd-kort); box-shadow: var(--sd-skugga); }
.nw-item.is-featured { background: var(--sd-himmel-t); box-shadow: none; }
.nw-item__media { border-radius: 16px; overflow: hidden; transition: transform 520ms var(--lk-ease); }
.nw-item:hover .nw-item__media { transform: scale(1.02); }
.nw-tab { transition: color var(--lk-t) var(--lk-ease); }
body.mm-ny .nw-tabs .nw-tab.is-active { background: transparent; color: var(--s-deep); }
body.mm-ny .nw-tabs { border-radius: 999px; padding: 4px; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nw-date { white-space: nowrap; }
/* Uppdateringar | Tidigare veckobrev (nyheter.js). Arkivet tar hela bredden: lista + läsare (master-detail), telefon: läsaren ersätter listan */
.ny-nyhet__vy { display: inline-flex; margin-top: 22px; }
.ny-nyhet__layout.is-arkiv { grid-template-columns: minmax(0, 1fr); }
.ny-nyhet__layout.is-arkiv .ny-nyhet__sida { display: none; }
.ny-arkiv[hidden], .ny-arkiv__lasare[hidden], .ny-arkiv__ar[hidden], .ny-nyhet__flode[hidden] { display: none; }
.ny-arkiv__verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
body.mm-ny .ny-arkiv__sok { flex: 1 1 260px; margin: 0; }
.ny-arkiv__ar { display: flex; flex-wrap: wrap; gap: 6px; }
.ny-arkiv__sort { gap: 7px; }
.ny-arkiv__antal { margin: 14px 0 16px 4px; }
.ny-arkiv__md { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ny-arkiv__lista { display: flex; flex-direction: column; gap: 2px; }
.ny-arkiv__lista h3 { margin: 18px 0 6px 16px; font: 600 13px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-7); }
.ny-arkiv__lista h3:first-child { margin-top: 0; }
.ny-arkiv__brev { display: block; padding: 14px 16px; border-radius: 18px; color: inherit; text-decoration: none; transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.ny-arkiv__brev:hover { background: var(--w-06); transform: translateX(2px); }
.ny-arkiv__brev.is-vald { background: var(--aw-12); }
.ny-arkiv__brev time { font: var(--type-meta); color: var(--fg-7); }
.ny-arkiv__brev.is-vald time { color: var(--a-4); }
.ny-arkiv__brev strong { display: block; margin: 5px 0 4px; font: 600 15px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-arkiv__brev span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 13px/1.5 var(--font-ui); color: var(--fg-6); }
.ny-arkiv__lasare { position: sticky; top: 90px; padding: 30px clamp(20px, 4vw, 44px) 32px; border-radius: 28px; background: var(--sd-kort); box-shadow: var(--sd-skugga); }
.ny-arkiv__topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: var(--type-meta); color: var(--fg-7); }
.ny-arkiv__kvitto { margin-left: auto; color: var(--a-4); }
.ny-arkiv__ikon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--fg-5); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.ny-arkiv__ikon:hover { background: var(--w-08); }
.ny-arkiv__ikon .ny-i { width: 17px; height: 17px; }
.ny-arkiv__tillbaka { display: none; margin-left: -8px; }
.ny-arkiv__rubrik { margin: 12px 0 20px; font: 600 clamp(22px, 3vw, 28px)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-1); max-width: 26ch; }
.ny-arkiv__text, .ny-arkiv__omrtext { max-width: 64ch; font: 400 15.5px/1.7 var(--font-ui); color: var(--fg-3); overflow-wrap: anywhere; }
.ny-arkiv__text :is(h2, h3), .ny-arkiv__omrtext :is(h2, h3) { margin: 26px 0 6px; font: 600 17px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-arkiv__text a, .ny-arkiv__omrtext a { color: var(--a-4); }
.ny-arkiv__text ul, .ny-arkiv__omrtext ul { padding-left: 20px; }
.ny-arkiv__omr { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--w-08); }
.ny-arkiv__omr .omr__etikett { margin-left: 0; }
.ny-arkiv__omr .omr__tips { margin-left: 0; }
.mm-ny .omr__falt input:focus-visible { outline: 0; } /* fältet (.is-fokus) är markeringen, annars två ringar i varandra */
.ny-arkiv__omrdel:first-child > :first-child { margin-top: 18px; }
.ny-arkiv__fot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--w-08); font: var(--type-meta); color: var(--fg-7); }
.ny-arkiv__nav { display: flex; gap: 8px; }
.ny-arkiv__nav .ny-chip { gap: 6px; }
.ny-arkiv__nav .ny-chip:disabled { opacity: .4; cursor: default; }
.ny-arkiv__not { margin: 26px 0 0 4px; font: var(--type-meta); color: var(--fg-7); }
.ny-arkiv__not a { color: var(--a-4); }
@media (max-width: 900px) {
  .ny-arkiv__md { grid-template-columns: minmax(0, 1fr); }
  .ny-arkiv__lasare { position: static; padding: 24px 18px 26px; }
  .ny-arkiv.is-las :is(.ny-arkiv__verktyg, .ny-arkiv__antal, .ny-arkiv__lista) { display: none; }
  .ny-arkiv__tillbaka { display: grid; }
}

/* ── 11. brevet + foten ───────────────────────────────────────────────── */
.ny-brev { position: relative; z-index: 1; border-top: 0; background: var(--sd-himmel-t); border-radius: 28px; box-shadow: none; padding: clamp(30px, 4vw, 52px); }
.ny-brev__titel { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.015em; color: var(--fg-1); }
.ny-brev__falt, .ny-nyhet__brevform { background: var(--sd-kort); box-shadow: var(--sd-skugga); transition: box-shadow var(--lk-t) var(--lk-ease); border-radius: 999px; }
.ny-brev__falt:focus-within, .ny-nyhet__brevform:focus-within { box-shadow: var(--sd-skugga), 0 0 0 2px var(--aw-42), 0 0 0 6px var(--aw-12); }
.ny-glas--tint { background: var(--sd-himmel-t); box-shadow: none; }
/* foten ligger bakom två kullar (kulle.svg som mask); egna tokens så texten blir ljus i båda lägena */
.ny-fot {
  --fg-1b: #f5efe2; --fg-1c: #ffffff; --fg-5: #d5dccd; --fg-6: #c2cbbd; --fg-8: #a9b6a5; --w-07: rgba(255, 255, 255, .12); --a-4: #f0c24f;
  margin: clamp(32px, 4vw, 64px) 0 0; border-radius: 0; background: none; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-top: clamp(130px, 12vw, 180px); color: var(--fg-5);
}
.ny-fot::before, .ny-fot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.ny-fot::before {
  height: 110px; background: var(--sd-fot-bak);
  -webkit-mask: url(kulle.svg) 0 0 / 140% 100% no-repeat; mask: url(kulle.svg) 0 0 / 140% 100% no-repeat;
  transform: scaleX(-1);
}
.ny-fot::after {
  bottom: 0; top: 30px; background: var(--sd-fot);
  -webkit-mask: url(kulle.svg) 0 0 / 100% 110px no-repeat, linear-gradient(#000, #000) 0 109px / 100% 100% no-repeat;
  mask: url(kulle.svg) 0 0 / 100% 110px no-repeat, linear-gradient(#000, #000) 0 109px / 100% 100% no-repeat;
}
.ny-fot__inre { max-width: 1200px; }
/* Djurscenen (motiv.js fot()): hela bredden visar 390 enheter av scenen, smala fönster beskär sidorna. Kullarna får sidfotens färger. */
.ny-fot.har-scen { --fot-scen: max(200px, 24.4vw); overflow: visible; padding-top: var(--fot-scen); margin-inline: calc(50% - 50vw); } /* kant till kant: .ny-rots sidmarginal gav himlen och marken synliga kanter */
.ny-fot.har-scen::before { content: none; }
.ny-fot.har-scen::after { top: calc(var(--fot-scen) - 2px); -webkit-mask: none; mask: none; background: linear-gradient(var(--tid-ton, transparent), var(--tid-ton, transparent)), var(--sd-fot); } /* --tid-ton: samma tid-på-dygnet-ton som scenens .ft-tton (motiv.css) */
.ny-fot__scen { position: absolute; left: 0; right: 0; top: 0; height: var(--fot-scen); pointer-events: none; --ft-bak: var(--sd-fot-bak); --ft-fram: var(--sd-fot); }
/* Årstidens id (motiv.css #m-footern-*) byter kullarnas färg; här hålls de sidfotens, annars syns en skarv mot texten under. */
footer.ny-fot :is(#m-footern-var, #m-footern-sommar, #m-footern-host, #m-footern-vinter) { --ft-bak: var(--sd-fot-bak); --ft-fram: var(--sd-fot); }
/* Vinterläget: när vinterscenen står i foten blir hela sidfoten snö (motiv.css #m-footern-vinters kullfärger). Mörkt = snö i månsken, ljust = vit snö med mörk text. */
body.mm-ny:has(#m-footern-vinter) { --sd-fot: #24303f; --sd-fot-bak: #3a4a60; }
[data-theme="light"] body.mm-ny:has(#m-footern-vinter) { --sd-fot: #cdd8e6; --sd-fot-bak: #e8eef6; }
[data-theme="light"] .ny-fot:has(#m-footern-vinter) { --fg-1b: #1c2a3a; --fg-1c: #0e1824; --fg-5: #2e3e52; --fg-6: #3a4a5e; --fg-8: #4a5870; --w-07: rgba(28, 42, 58, .14); --a-4: #a8412f; }
[data-theme="light"] .ny-fot:has(#m-footern-vinter) .ny-fot__lage { background: rgba(28, 42, 58, .07); }
[data-theme="light"] .ny-fot:has(#m-footern-vinter) .ny-fot__lage:hover { background: rgba(28, 42, 58, .12); }
.ny-fot__scen > svg { display: block; width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
.ny-fot.har-scen .ny-fot__inre { position: relative; z-index: 1; }
/* Himlen: scenens egen rektangel får en kant där sidan slutar; i stället en CSS-tonin som börjar helt genomskinlig. */
.ny-fot__scen [fill^="url(#ft-himmel"] { display: none; } /* även årstidernas ft-himmel-var/-sommar/-host/-vinter */
/* Tonin i årstidens himmelsfärger (motiv.css #m-footern-*: --ft-h1/--ft-h2 mörkt, --ft-lh1/--ft-lh2 ljust); utan dem skymning resp. gyllene eftermiddag. Tiden på dygnet (motiv.css --tid-*) går före. */
/* Himlen börjar --fot-upp ovanför foten (mitt i brevkortet); kortet lyfts över den. */
.ny-fot__scen { --fot-upp: 210px; isolation: isolate; } /* egen stackningskontext: ::before (z -1) hamnar bakom svg:n, annars dimma över scenen */
.ny-fot__scen::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--fot-upp)); z-index: -1; pointer-events: none; }
.ny-fot__scen::before { background: linear-gradient(transparent, color-mix(in oklab, var(--tid-h1, var(--ft-h1, #2c2f6a)) 32%, transparent) 45%, color-mix(in oklab, var(--tid-h2, var(--ft-h2, #5b3f78)) 38%, transparent) 75%, color-mix(in oklab, var(--tid-h2, var(--ft-h2, #9a5a6a)) 40%, transparent)); }
[data-theme="light"] .ny-fot__scen::before { background: linear-gradient(transparent, color-mix(in oklab, var(--tid-lh1, var(--ft-lh1, #a8d8f5)) 40%, transparent) 40%, color-mix(in oklab, var(--tid-lh2, var(--ft-lh2, #ffe4b0)) 55%, transparent) 75%, color-mix(in oklab, var(--tid-lh2, var(--ft-lh2, #ffc890)) 60%, transparent)); }
.ny-fot__kol a { display: inline-block; transition: color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.ny-fot__kol a:hover { transform: translateX(2px); }
.ny-fot__lage { color: var(--fg-5); background: rgba(255, 255, 255, .08); transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.ny-fot__lage:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); }
.ny-fot__juridik a, .ny-fot__copy { color: var(--fg-6); }

/* ── 12. in-koreografi: EN gång när ett block rullas in, kort i tur ──── */
.sida-in { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--lk-ease), transform 620ms var(--lk-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.sida-in.in, .in > .sida-in { opacity: 1; transform: none; }
@keyframes sida-upp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── 13. reduce-motion: mikro kvar (kortare, utan flytt), koreografi av ─ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mm-ny * { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-delay: 0ms !important; }
  .sl-moln, .sida-hero__ned { animation: none !important; }
  .mm-ny :is(a, button, .ny-kort, .nw-item, .ny-rad, .ny-stat__kpi, .ny-stat__topprad, .ny-stat__rad):hover { transform: none; }
  .sida-in, .lab-stapel > i, .ny-stat__kolumn-stapel { opacity: 1; transform: none; transition: none; }
}

/* ── 14. sektionskartan (lab.js): korta streck i högerkanten, ett per sektion. Subtil tills man pekar. ── */
.sida-karta { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; }
.sida-karta__a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } /* 24 px hög = WCAG 2.5.8; strecket är bara ::after */
.sida-karta__a::after { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--fg-6); opacity: .45; transition: width var(--lk-t) var(--lk-ease), opacity var(--lk-t) var(--lk-ease), background-color var(--lk-t) var(--lk-ease); }
.sida-karta:hover .sida-karta__a::after { opacity: .7; }
.sida-karta__a:hover::after, .sida-karta__a[aria-current]::after { width: 20px; opacity: 1; }
.sida-karta__a[aria-current]::after { background: var(--a-4); }
.sida-karta__namn { position: absolute; right: 32px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--sd-kort); box-shadow: var(--sd-skugga); color: var(--fg-2); font: var(--type-label); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.sida-karta__a:is(:hover, :focus-visible) .sida-karta__namn { opacity: 1; transform: none; }
@media (max-width: 767px) { .sida-karta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sida-karta, .sida-karta * { transition: none !important; } }

/* ── 15. telefon: foten kant i kant (efter §11, som sätter marginalen) ── */
@media (max-width: 767px) { .ny-fot { margin-inline: calc(50% - 50vw); } }

/* ── 16. platsmallen (plats.html ?niva=): brödsmulor, kort svar, fakta-dl, tvåspalt, figurer, detaljer ── */
.sida-nivaer { justify-content: center; margin: clamp(88px, 10vw, 120px) auto 0; }
.sida-smulor { display: contents; list-style: none; margin: 0; padding: 0; }
.sida-smulor li + li::before { content: "›"; margin-right: 8px; color: var(--fg-8); }
/* första steget = hus-ikon, inte ordet "Start" (krockade med menypunkten Start i Utforska) */
.sida-smulor__hem { display: block; }
.sida-smulor li:first-child a { display: inline-flex; align-items: center; min-height: 24px; }
.sida-platshero { margin: 14px 0 0; position: relative; }
/* heron centrerar blocken: texten centreras med, annars hamnar tvåradiga rubriker och svaret vänsterställda i en centrerad låda */
:is(.sida-plats, .sida-rapport) .lab-hero :is(h1, .sida-svar) { text-align: center; }
/* luft mellan sektionsrubriken och innehållet (ny-topp har ingen egen marginal) */
.sida-plats .ny-panel > .ny-topp + * { margin-top: clamp(16px, 2.2vw, 26px); }
/* sex siffror = två rader om tre (auto-fit gav fem plus en ensam) */
.sida-plats #fakta .ny-kort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* kapitelkorten (8) = två rader om fyra */
.sida-plats #kapitel .ny-kort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .sida-plats :is(#fakta, #kapitel) .ny-kort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sida-foto { justify-self: end; font: var(--type-meta); color: var(--fg-7); }
.sida-svar { max-width: 68ch; margin: 0 0 22px; font: 400 17px/1.55 var(--font-ui); color: var(--fg-3); text-wrap: pretty; }
.sida-svar strong { color: var(--fg-1); font-weight: 600; }
.lab-hero .sida-svar { margin: 0; font-size: 16px; color: var(--fg-4); }
.sida-dl, .sida-dl dd { margin: 0; }
.sida-dl .sida-kalla { margin-top: 8px; font: var(--type-meta); color: var(--fg-8); }
.sida-dl--rader dt { flex: 1; color: var(--fg-4); }
.sida-dl--rader dd { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.sida-prosa { margin-top: clamp(28px, 3vw, 44px); max-width: 72ch; }
.sida-tva { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 767px) { .sida-tva { grid-template-columns: 1fr; } }
.sida-ol { list-style: none; margin: 0; padding: 0; }
/* .sida-ol ovan nollade .lab-raders kortpadding, och .ny-rad har -8px sidomarginal: siffror och värden låg i kortets kant */
.lab-rader.sida-ol { padding: 8px; }
.lab-rader.sida-ol .ny-rad, .sida-plats .lab-rader > .ny-rad { margin-inline: 0; padding-inline: 14px; }
.sida-plats .lab-rader > .ny-rad:first-child { border-top: 0; }
/* nyhetsraderna: datumet i en fast kolumn så att rubrikerna linjerar */
.sida-plats #nyheter .lab-rad__n { flex: none; width: 4.2em; }
.lab-rader.sida-ol > :first-child, .lab-rader.sida-ol > :first-child > .ny-rad { border-top: 0; }
.sida-radnamn { flex: 1; display: grid; gap: 6px; min-width: 0; }
.sida-minikarta { aspect-ratio: 4 / 3; }
.sida-figur { margin: 22px 0 0; }
.sida-figur .ny-fotnot { margin-top: 10px; }
.sida-bred { aspect-ratio: 21 / 9; }
.sida-radar { max-width: 320px; justify-self: center; width: 100%; }
.sida-faq { display: grid; gap: 10px; max-width: 78ch; }
.sida-metod { margin-top: 18px; padding: 12px 0; }
.sida-faq .sida-metod { margin: 0; }
.sida-metod summary { cursor: pointer; font: 500 15px/1.4 var(--font-ui); color: var(--fg-2); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sida-metod summary::-webkit-details-marker { display: none; }
.sida-metod summary::after { content: "+"; color: var(--fg-7); transition: transform var(--lk-t) var(--lk-ease); }
.sida-metod[open] summary::after { transform: rotate(45deg); }
.sida-metod p { margin: 10px 0 0; }
address.lab-txt { font-style: normal; }
.lab-tabell__grid tbody th { padding: 9px 10px; border-bottom: 0; border-top: 1px solid var(--w-05); font: 500 var(--type-label); font-family: var(--font-ui); text-transform: none; letter-spacing: normal; color: var(--fg-2); }
.sida-svar:first-of-type { margin-top: 4px; }
/* genererade platssidor (skal-lab/platssidor/<niva>/<id>.html, scripts/build_skal_platser.py): fotohero, kapitelns stora tal, staplar */
.sida-platshero--foto { isolation: isolate; overflow: hidden; place-items: center; text-align: center; gap: 18px; border-radius: clamp(22px, 2.4vw, 32px); min-height: min(52dvh, 460px); }
.sida-platsbild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sida-platshero--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 14 20 / .88), rgb(8 14 20 / .6) 55%, rgb(8 14 20 / .25)); }
/* Fotot är mörkt under scrimmet i båda teman: texten är alltid ljus. */
.sida-platshero--foto :is(h1, p, strong, .ny-kicker, .sida-platsmeta) { color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.sida-platsmeta { margin: 0; text-align: center; font: var(--type-meta); color: var(--fg-5); }
.sida-tal { display: grid; gap: 4px; margin: 0 0 14px; }
.sida-tal__v { font: 600 clamp(30px, 4vw, 44px)/1.05 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sida-tal__k { font: var(--type-meta); color: var(--fg-6); }
.sida-enhet { font: var(--type-meta); color: var(--fg-6); }
/* värderat: blå/orange (Okabe-Ito, NYTT_KARTLAGER §0.5), aldrig röd/grön; ordet bär betydelsen, färgen förstärker */
.sida-ton { margin-top: 6px; font: 500 var(--type-meta); font-family: var(--font-ui); }
.sida-ton::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.sida-kapitel .sida-tva { margin-top: 18px; }
.sida-kapitel .sida-dl { margin-top: 22px; }
.sida-stapel { margin: 0; }
.sida-stapel svg { display: block; width: 100%; height: auto; overflow: visible; }
.sida-stapel rect { fill: var(--a-4); }
/* SVG:en skalar (viewBox): 12 enheter = 13,4 px på 390 px-telefon, 20 px på desktop */
.sida-stapel text { font: 500 12px var(--font-ui); fill: var(--fg-7); text-anchor: middle; }
.sida-stapel .sida-stapel__v { fill: var(--fg-3); }
/* plats-diagram.js sätter .sida-anim på diagram utanför vyn och .is-in när de scrollas in; utan JS står staplarna kvar */
.sida-anim rect { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform calc(var(--lk-t) * 3) var(--lk-ease) calc(var(--i) * 60ms); }
.sida-anim .sida-stapel__v { opacity: 0; transition: opacity var(--lk-t) var(--lk-ease) calc(var(--i) * 60ms + var(--lk-t) * 2); }
.sida-anim.is-in rect { transform: none; }
.sida-anim.is-in .sida-stapel__v { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sida-anim rect, .sida-anim .sida-stapel__v { transition: none; } }
/* Kommunens #tid och #pendling (build_skal_platser.tid_och_pendling): ett kort per serie, förbakad linje.
   Andra serien är Okabe-Ito-orange (NYTT_KARTLAGER §0.5), framskrivningen samma accent men streckad. */
.sida-serier { margin-top: 22px; }
.sida-serie { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sida-serie p { margin: 0; }
.sida-serie__v { font: 600 clamp(24px, 3vw, 30px)/1.1 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sida-serie__d { font: 500 var(--type-meta); font-family: var(--font-ui); color: #56b4e9; }
.sida-serie__d.is-neg { color: #e69f00; }
[data-theme="light"] .sida-serie__d { color: #0072b2; }   /* samma nyanser mörkare: 2,3 → 5:1 mot vitt */
[data-theme="light"] .sida-serie__d.is-neg { color: #a85a00; }
.sida-linje { margin: 10px 0 4px; }
.sida-linje svg { display: block; width: 100%; height: auto; overflow: visible; }
.sida-linje__l { fill: none; stroke: var(--a-4); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sida-linje__l--b { stroke: #e69f00; }
.sida-linje__l--fc { stroke-dasharray: 4 4; opacity: .8; }
.sida-linje__p { fill: var(--a-4); }
.sida-linje__p.sida-linje__l--b { fill: #e69f00; }
.sida-linje__g, .sida-linje__nu { stroke: var(--w-06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sida-linje__nu { stroke-dasharray: 2 3; }
/* skala ~0,95 på telefon: 14 enheter = 13,3 px */
.sida-linje text { font: 500 14px var(--font-ui); fill: var(--fg-7); font-variant-numeric: tabular-nums; }
.sida-serie__leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font: var(--type-meta); color: var(--fg-6); }
.sida-leg { display: inline-flex; align-items: center; gap: 6px; }
.sida-leg--kalla { margin-left: auto; color: var(--fg-8); }
.sida-leg__sw { width: 14px; height: 0; border-top: 2.5px solid var(--a-4); border-radius: 2px; }
.sida-leg__sw--b { border-top-color: #e69f00; }
.sida-leg__sw--fc { border-top-style: dashed; }
.sida-serie__hint { margin-top: 8px !important; font: var(--type-meta); color: var(--fg-6); }
.sida-serie__lank { margin-top: 10px; font: 500 var(--type-meta); font-family: var(--font-ui); color: var(--a-4); align-self: flex-start; }
/* milstolpar och styrets perioder: år till vänster, text till höger */
.sida-milst { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.sida-milst li { display: grid; grid-template-columns: 7.2em 1fr; gap: 12px; font: var(--type-meta); font-family: var(--font-ui); color: var(--fg-4); }
.sida-milst__ar { color: var(--fg-7); font-variant-numeric: tabular-nums; }
/* kommunvalet: neutrala staplar, partiernas egna färger finns inte i paletten */
.sida-parti { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 7px; }
.sida-parti li { display: grid; grid-template-columns: 3.4em 1fr 4.4em; align-items: center; gap: 10px; font: var(--type-meta); font-family: var(--font-ui); color: var(--fg-4); }
.sida-parti__s { height: 8px; border-radius: 4px; background: var(--w-06); overflow: hidden; }
.sida-parti__s i { display: block; height: 100%; border-radius: 4px; background: var(--a-4); }
.sida-parti__v { text-align: right; font-variant-numeric: tabular-nums; }
.sida-nyck { margin: 12px 0 0; display: grid; gap: 6px; }
.sida-nyck div { display: flex; justify-content: space-between; gap: 12px; font: var(--type-meta); font-family: var(--font-ui); color: var(--fg-4); }
.sida-nyck dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sida-nyck dd span { display: block; color: var(--fg-7); }
.sida-tankom { margin-top: 12px; display: grid; gap: 4px; }
.sida-tankom__l { display: grid; gap: 8px; font: var(--type-meta); font-family: var(--font-ui); color: var(--fg-4); }
.sida-tankom input { width: 100%; accent-color: var(--a-4); }

/* nyhetsraderna länkar till artikeln (text.html?s=artikel): hela raden är klickyta */
.nw-item { position: relative; }
.nw-item__lank { color: inherit; text-decoration: none; }
.nw-item__lank::after { content: ""; position: absolute; inset: 0; }
.nw-item__lank:focus-visible { outline: none; }
.nw-item:has(.nw-item__lank:focus-visible) { outline: 2px solid var(--a-1); outline-offset: 2px; }

/* ── 17a. Start (index.html): sökrad i heron, källkarusell, lagersiffra, glasdemo över videon, veckans kommun, kom igång ── */
/* sökraden i heron: glaspiller (data-glas="bar") med ljus text, sist i herotexten */
.sida-hero__text > :nth-child(5) { animation-delay: 580ms; }
.sida-st-sok { display: flex; align-items: center; gap: 10px; width: min(100%, 520px); padding: 6px 6px 6px 18px; border-radius: 999px; color: #ffffff; }
.sida-st-sok .ny-i, .sida-st-sok [data-lucide] { flex: none; width: 17px; height: 17px; }
.sida-st-sok input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: 400 15px/1.2 var(--font-ui); }
.sida-st-sok input::placeholder { color: rgba(255, 250, 240, .82); }
.sida-st-sok:focus-within { box-shadow: 0 0 0 2px rgba(255, 250, 240, .6); }
.sida-hero .sida-st-sok .ny-btn { padding: 10px 20px; }
/* utökat sökläge: fokus i fältet ⇒ pillret växer till ett glaskort, resten av herotexten tonar undan, scope-chips + förslag vecklas ut */
/* row-gap 0: den hopfällda raden får inte lägga 10 px under pillret (fältet hamnade ovanför mitten). Egen mörk ton i båda temana: ljusa temats vita glas gjorde den vita texten oläslig */
.sida-hero .sida-st-sok[data-glas] { background: rgba(14, 24, 20, .62); color: #ffffff; }
/* .sida-st-plats håller pillrets plats i heron; kortet ligger absolut ovanpå och växer UPPÅT till en fast höjd (--sts-h, lab.js mäter
   luften under headern vid fokus). Inget annat i heron flyttar sig, och bytet Prova ⇄ träffar ändrar aldrig kortets storlek */
.sida-st-plats { position: relative; z-index: 2; width: min(100%, 520px); height: 46px; }
.sida-st-plats > .sida-st-sok { position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 100%; height: 46px; }
.sida-st-sok { --sts-ease: cubic-bezier(.32, .72, 0, 1); flex-wrap: wrap; align-content: flex-start; row-gap: 0; overflow: hidden;
  transition: width 640ms var(--sts-ease), height 640ms var(--sts-ease), border-radius 640ms var(--sts-ease), padding 640ms var(--sts-ease), box-shadow 400ms ease; }
.sida-st-sok__mer { flex: 1 0 100%; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 640ms var(--sts-ease), opacity 360ms ease; }
.sida-st-sok__mer > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sida-st-plats > .sida-st-sok:focus-within { width: min(680px, calc(100vw - 2 * clamp(28px, 5vw, 72px))); height: var(--sts-h, 440px); border-radius: 28px; padding: 12px 12px 12px 22px; box-shadow: 0 0 0 1px rgba(255, 250, 240, .45), 0 30px 60px -20px rgba(8, 18, 16, .55); }
.sida-st-sok:focus-within input { font-size: 17px; }
.sida-st-sok:focus-within .sida-st-sok__mer { grid-template-rows: 1fr; height: calc(100% - 36px); opacity: 1; transition-delay: 0ms, 120ms; }
/* resten av herotexten tonar bort under kortet (rör sig inte) */
.sida-hero__text > :not(.sida-st-plats) { transition: opacity 480ms ease, filter 480ms ease; }
.sida-hero__text:has(.sida-st-sok:focus-within) > :not(.sida-st-plats) { opacity: 0; filter: blur(6px); pointer-events: none; }
.sida-st-sok__typer { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 4px; }
.sida-st-sok__typer button { padding: 7px 14px; border: 0; border-radius: 999px; font: 500 13px/1 var(--font-ui); color: #ffffff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.sida-st-sok__typer button:hover { background: rgba(255, 255, 255, .22); }
.sida-st-sok__typer [aria-checked="true"] { background: #ffffff; color: #1b2a24; }
.sida-st-sok__rubrik { margin: 12px 0 6px !important; font: 600 13px/1 var(--font-ui) !important; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 250, 240, .66) !important; text-shadow: none !important; }
/* kroppen: listan (tomt fält ⇒ "Populärt" för valt chip, annars sajtsökets träffar; samma rader som headerns sökmeny) + Veckans kommun
   till höger. Veckans viker ihop när man skriver eller väljer ett chip; allt sker inne i kortets fasta höjd, listan rullar själv */
.sida-st-sok__kropp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; margin-top: 8px; transition: grid-template-columns 420ms var(--sts-ease), gap 420ms var(--sts-ease); }
.sida-st-sok:is(.har-q, :not(.is-allt)) .sida-st-sok__kropp { grid-template-columns: minmax(0, 1fr) 0px; gap: 0; }
.sida-st-sok .sida-sokmeny__veckans { margin: 0 0 4px; overflow-y: auto; background: rgba(255, 255, 255, .08); }
.sida-st-sok .sida-sokmeny__veckans:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .14); }
.sida-st-sok:is(.har-q, :not(.is-allt)) .sida-sokmeny__veckans { padding-inline: 0; opacity: 0; pointer-events: none; transition-duration: 140ms; }
.sida-st-sok .sida-sokmeny__vkpi b { color: inherit; }
.sida-st-sok__traff { min-height: 0; max-height: none; padding-bottom: 4px; overflow-y: auto; animation: sida-tona 280ms ease both; }
@media (max-width: 767px) { .sida-st-sok__kropp { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@keyframes sida-tona { from { opacity: 0; } }
.sida-st-sok :is(.sida-sokmeny__rubrik, .sida-sokmeny__rad small, .sida-sokmeny__tom) { color: rgba(255, 250, 240, .66); }
.sida-st-sok .sida-sokmeny__rad { color: #ffffff; }
.sida-st-sok .sida-sokmeny__rad:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .14); }
.sida-st-sok .sida-sokmeny__rad mark { color: inherit; text-decoration: underline 2px; text-underline-offset: 3px; }
.sida-st-sok .sida-sokmeny__ikon { background: rgba(255, 255, 255, .12); color: #ffffff; }
.sida-st-sok .sida-sokmeny__fler { color: rgba(255, 250, 240, .9); }
/* ljust tema: ljust glas med mörk text, som headerns sökfält (förut mörkt i båda temana) */
[data-theme="light"] .sida-hero .sida-st-sok[data-glas] { --glas-alfa: .72; background: rgba(255, 255, 255, .8); color: #0a182a; }
[data-theme="light"] .sida-st-sok input::placeholder { color: var(--fg-7); }
[data-theme="light"] .sida-st-sok:focus-within { box-shadow: 0 0 0 1px rgba(10, 24, 42, .14), 0 30px 60px -20px rgba(8, 18, 16, .45); }
[data-theme="light"] .sida-hero .sida-st-sok .ny-btn { background: #0a182a; color: #ffffff; }
[data-theme="light"] .sida-st-sok__typer button { color: #0a182a; background: rgba(10, 24, 42, .05); box-shadow: inset 0 0 0 1px rgba(10, 24, 42, .14); }
[data-theme="light"] .sida-st-sok__typer button:hover { background: rgba(10, 24, 42, .1); }
[data-theme="light"] .sida-st-sok__typer [aria-checked="true"] { background: #0a182a; color: #ffffff; }
[data-theme="light"] .sida-st-sok :is(.sida-st-sok__rubrik, .sida-sokmeny__rubrik, .sida-sokmeny__rad small, .sida-sokmeny__tom, .sida-sokmeny__fler) { color: rgba(10, 24, 42, .6) !important; }
[data-theme="light"] .sida-st-sok .sida-sokmeny__rad { color: #0a182a; }
[data-theme="light"] .sida-st-sok :is(.sida-sokmeny__rad, .sida-sokmeny__veckans):is(:hover, :focus-visible) { background: rgba(10, 24, 42, .07); }
[data-theme="light"] .sida-st-sok .sida-sokmeny__veckans { background: rgba(10, 24, 42, .04); }
[data-theme="light"] .sida-st-sok .sida-sokmeny__ikon { background: rgba(10, 24, 42, .07); color: #0a182a; }
/* rensa-krysset i sökfälten: webbläsarens blå knapp ersatt av ett tunt kryss i textens färg, ritat med två gradienter (ingen bild-URL, CSP) */
.mm-ny input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0 2px 0 6px; border-radius: 50%; cursor: pointer; opacity: .55; transition: opacity 160ms ease;
  background: linear-gradient(45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)) center / 10px 10px no-repeat,
              linear-gradient(-45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)) center / 10px 10px no-repeat; }
.mm-ny input[type="search"]::-webkit-search-cancel-button:hover { opacity: .9; }
/* chips och förslag glider in i tur och ordning */
.sida-st-sok:focus-within :is(.sida-st-sok__typer button, .sida-st-sok__kropp) { animation: sida-upp 460ms var(--lk-ease) both; }
.sida-st-sok:focus-within .sida-st-sok__kropp { animation-delay: 380ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(1) { animation-delay: 135ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(2) { animation-delay: 170ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(3) { animation-delay: 205ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(4) { animation-delay: 240ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(5) { animation-delay: 275ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(6) { animation-delay: 310ms; }
.sida-st-sok:focus-within .sida-st-sok__typer button:nth-child(7) { animation-delay: 345ms; }
@media (prefers-reduced-motion: reduce) { .sida-st-sok, .sida-st-sok__mer, .sida-st-sok :is(button, a) { transition-duration: .01ms !important; animation: none !important; } }
/* källmolnet (logo cloud): alla tolv källor syns på en gång och radbryts, sex i bredd på pc, två på telefon. Sidledsscrollen togs bort 2026-10-12: dold rad = dold info */
.sida-st-karusell { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sida-st-logg { display: grid; place-items: center; height: 64px; padding: 0 16px; border-radius: 16px; box-shadow: var(--sd-kant); font: 500 14px/1.2 var(--font-ui); color: var(--fg-4); text-align: center; }
@media (max-width: 1100px) { .sida-st-karusell { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sida-st-karusell { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sida-st-logg { height: 52px; } }
/* lagersiffran: stor ny-siffra, bandet av chips under */
.sida-st-stor { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 6px 0 10px; }
.sida-st-lagerkort .lab-txt { max-width: 56ch; }
.sida-st-band { margin-top: 16px; }
/* veckans kommun: text och nyckeltal i två spalter, en spalt på telefon (fotoplatshållaren borttagen 2026-10-12) */
.sida-st-vecka { margin-top: clamp(28px, 3vw, 44px); }
.sida-st-veckatext { display: grid; gap: 10px; align-content: start; min-width: 0; }
.sida-st-veckatext .ny-prosa__h, .sida-st-veckatext .lab-txt { margin: 0; }
/* luft mellan sektionsrubriken och innehållet under (ny.css ger ingen: rubrik och kort nuddade varandra) */
.sida-start .ny-topp + * { margin-top: clamp(20px, 2.4vw, 28px); }
/* sexkortsrutnäten (uppdrag, intent): max tre spalter så att sex kort går jämnt upp, aldrig 4 + 2 */
.sida-st-sex { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* kom igång: stegen som lista utan punkter */
.sida-st-steg { list-style: none; margin: 18px 0 0; padding: 0; max-width: 72ch; }
@media (max-width: 767px) { .sida-st-sok { width: 100%; } }

/* ── 17b. Katalog (katalog.html ?s=foreningar|event): glasfilterkort, kommungrupper, taggar, eventkort med datumbricka ── */
/* heron: gridden centrerar blocken, texten ska följa med (annars vänsterställd rubrik i en centrerad låda) */
.sida-katalog .lab-hero.lab-ph { text-align: center; }
.sida-katalog .lab-hero .ny-chiprad { justify-content: center; }
/* filterkortet: rundat glaskort med luft, tätt ihop med träffarna under */
.sida-kat-filter { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 40px); padding: clamp(16px, 2.2vw, 24px); border-radius: 28px; }
.sida-kat-filter .ny-verktyg { align-items: center; margin: 0; }
.sida-kat-filter + .sida-kat { margin-top: clamp(24px, 3vw, 40px); }
.sida-kat-filter .list-search { flex: 1 1 260px; }
.sida-kat-antal { margin: 0; font: var(--type-label); color: var(--fg-4); font-variant-numeric: tabular-nums; }
.sida-kat-antal b { color: var(--fg-1); font-weight: 600; }
/* datumfält och val: samma pill som listans sorteringsval */
.sida-kat-in { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--sd-kort); box-shadow: var(--sd-kant); font: var(--type-label); color: var(--fg-4); }
.sida-kat-in input, .sida-kat-in select { height: 100%; min-width: 0; border: 0; background: transparent; color: var(--fg-2); font: inherit; color-scheme: light dark; }
.sida-kat-filter .sida-kat-in .list-sort { padding: 0; background: transparent; box-shadow: none; }
/* träffar */
.sida-kat-grupp + .sida-kat-grupp { margin-top: clamp(24px, 3vw, 40px); }
.sida-kat-kommun { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 28px); }
.sida-kat-n { font: var(--type-meta); color: var(--fg-7); }
.sida-kat-kort { display: grid; gap: 10px; align-content: start; }
.sida-kat-kort .ny-kort__titel { margin: 0; }
.sida-kat-taggar { display: flex; flex-wrap: wrap; gap: 6px; }
.sida-kat-tagg, .sida-kat-badge { padding: 3px 10px; border-radius: 999px; background: var(--w-06); font: var(--type-meta); color: var(--fg-4); }
.sida-kat-badge { background: var(--aw-10); color: var(--a-2b); }
.sida-kat-plats { display: flex; align-items: center; gap: 6px; margin: 0; }
.sida-kat-plats i { width: 15px; height: 15px; flex: none; }
/* eventkort: datumbricka, innehåll, knappar. Standardvy = lista */
.sida-kat-evl { display: grid; gap: 12px; }
.sida-kat-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; }
.sida-kat-ev__v { display: grid; gap: 6px; min-width: 0; }
.sida-kat-ev__v .ny-kort__titel { margin: 0; }
.sida-kat-ev__v a { color: inherit; text-decoration: none; }
.sida-kat-ev__akt { display: flex; gap: 8px; }
.sida-kat-dat { display: grid; place-items: center; align-content: center; width: 58px; height: 62px; border-radius: 14px; background: var(--w-06); text-align: center; }
.sida-kat-dat b { font: 600 22px/1 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sida-kat-dat span { margin-top: 2px; font: var(--type-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-6); }
/* vyval utan JS: pressed-knappen i filterkortet styr listan */
body:has([data-vy="kort"][aria-pressed="true"]) .sida-kat-evl { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
body:has([data-vy="kort"][aria-pressed="true"]) .sida-kat-ev { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
body:has([data-vy="kort"][aria-pressed="true"]) .sida-kat-ev__akt { grid-column: 1 / -1; }
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-evl { gap: 4px; }
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-ev { padding: 8px 14px; gap: 12px; }
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-dat { width: 44px; height: 44px; border-radius: 10px; }
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-dat b { font-size: 16px; }
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-ev .sida-kat-taggar,
body:has([data-vy="kompakt"][aria-pressed="true"]) .sida-kat-ev__akt span { display: none; }
/* tomt läge och Visa fler */
.sida-kat-tomt { display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 5vw, 56px) 16px; text-align: center; }
.sida-kat-tomt[hidden] { display: none; }
.sida-kat-tomt .ny-kort__titel, .sida-kat-tomt .lab-txt { margin: 0; }
.sida-kat-mer { display: flex; justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
.sida-kat-mer[hidden] { display: none; }
/* Skelettet: mallens exempelrader står kvar som tomma kort och andas tills katalog.js har datat */
.sida-kat--laddar :is(.sida-kat-ev, .sida-kat-kort, .ny-rad) > * { opacity: 0; }
.sida-kat--laddar :is(.sida-kat-ev, .sida-kat-kort, .ny-rad) { animation: sida-andas 1.4s var(--lk-ease) infinite alternate; }
.sida-kat--laddar ~ .sida-kat-mer, .sida-kat--laddar .sida-kat-mer { visibility: hidden; }
@keyframes sida-andas { to { opacity: .55; } }
.sida-kat-ev { content-visibility: auto; contain-intrinsic-size: auto 92px; }
.sida-kat-kort { content-visibility: auto; contain-intrinsic-size: auto 120px; }
@media (prefers-reduced-motion: reduce) { .sida-kat--laddar :is(.sida-kat-ev, .sida-kat-kort, .ny-rad) { animation: none; } }
/* kartan och kalendern: luft under rubriken, kalenderkortet får tillbaka sin inre marginal (.sida-ol nollar §7:s padding) */
.sida-katalog #karta .sida-minikarta { margin-top: 18px; border-radius: 24px; }
.sida-katalog #kalender .lab-rader { padding: 10px; margin-top: 18px; }
.sida-katalog #kalender li:first-child .ny-rad { border-top: 0; }
@media (max-width: 767px) {
  .sida-kat-ev { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .sida-kat-ev__akt { grid-column: 1 / -1; }
  .sida-kat-in { flex: 1 1 140px; }
}

/* ── 17c. Tabell (tabell.html ?s=jamfor|levnadskostnader|kommun-stats): jämförelsekolumner, BEST-märke, frågerad, kalkyl ── */
/* jämförelsetabellen: egen papperslåda så att den klistriga första kolumnen får samma bakgrund som ytan */
.sida-tab-grupper { display: grid; gap: clamp(20px, 3vw, 34px); margin-top: 18px; }
/* min-width:0: annars växer grid-cellen till tabellens bredd och kortet klipps av sidan i stället för att scrolla själv */
.sida-tab-sek { min-width: 0; }
.sida-tab-sek .ny-prosa__h { margin: 0 0 4px; }
/* skuggan i högerkanten = "mer åt höger"; täcks av den lokala bakgrunden när man scrollat till slutet */
.sida-tab-wrap { margin-top: 8px;
  background: linear-gradient(to left, var(--sd-yta) 40%, transparent) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) right / 12px 100% no-repeat scroll;
  overscroll-behavior-x: contain; scrollbar-width: none; }
.sida-tab-wrap::-webkit-scrollbar { display: none; }
.sida-tab-grid { min-width: 560px; }
.sida-tab-grid thead th, .sida-tab-grid td { white-space: nowrap; }
.sida-tab-svep { display: none; align-items: center; gap: 6px; margin: 10px 0 0; }
.sida-tab-svep .ny-i, .sida-tab-svep svg { width: 14px; height: 14px; }
/* rubrik, verktyg och segment ska aldrig klistra mot kortet under */
.sida-tabell .ny-topp + :is(.sida-faq, .sida-tva, .lab-rader, .ny-seg, .ny-kort-grid) { margin-top: 18px; }
.sida-tabell :is(.ny-verktyg, .ny-seg) + :is(.sida-dl, .ny-kort-grid) { margin-top: 18px; }
.sida-tabell .ny-panel > .ny-seg { display: inline-flex; }
/* .sida-ol (§16) nollar .lab-raders padding och marginal, och .ny-rad har -8px sidomarginal: raderna gick ut i kortets kant */
.sida-tabell .lab-rader.sida-ol { padding: 10px; }
.sida-tabell .ny-kicker + .lab-rader { margin-top: 10px; }
.sida-tabell .lab-rader .ny-rad { margin: 0; padding-inline: 12px; }
.sida-tabell .lab-rader > :first-child, .sida-tabell .lab-rader > li:first-child > .ny-rad { border-top: 0; }
/* textsegment i verktygsraden: ny.css gör .ny-verktyg .ny-seg__a till 38 px ikonknappar med egen orange fyllning */
.sida-tabell .ny-verktyg .ny-seg__a { width: auto; padding: 0 14px; }
.sida-tabell .ny-verktyg .ny-seg__a[aria-pressed="true"] { background: transparent; color: var(--s-deep); }
.sida-tab-grid tbody th, .sida-tab-grid thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sd-yta); text-align: left; }
/* en remsa till vänster täcker lådans padding, där det som scrollar förbi annars syns bredvid den klistriga kolumnen (box-shadow ritas inte på celler med border-collapse) */
.sida-tab-grid tbody th::before, .sida-tab-grid thead th:first-child::before { content: ""; position: absolute; top: -1px; bottom: -1px; right: 100%; width: 10px; background: var(--sd-yta); }
.sida-tab-ref { color: var(--fg-7); }
.sida-tab-grid :is(td, th).sida-tab-ref { border-left: 1px solid var(--w-07); }
.sida-tab-bast { color: var(--fg-1); font-weight: 600; }
/* BEST: liten pill, accentfärg från befintlig token */
.sida-tab-best { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--sd-ang-t); color: var(--sd-ang-txt, var(--sd-ang)); font: 600 13px/1.4 var(--font-ui); letter-spacing: .06em; vertical-align: middle; }
/* kommunval och fråga */
.sida-tab-valda { margin-top: 14px; }
.sida-tab-valda .ny-chip .ny-i, .sida-tab-valda .ny-chip svg { width: 14px; height: 14px; margin-left: 4px; }
.sida-tab-fraga { display: flex; gap: 10px; align-items: center; margin-top: 18px; max-width: 78ch; }
.sida-tab-fraga .ny-falt { flex: 1; min-width: 0; }
.sida-tab-fraga input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg-2); font: inherit; }
.sida-tab-svar { margin-top: 18px; max-width: 78ch; }
.sida-tab-svar .lab-txt { margin: 8px 0 0; }
/* levnadskostnader: stor siffra, kostnadsposter, kalkyl */
.sida-tab-stor { font-size: clamp(28px, 3.4vw, 40px); }
.sida-tab-kost { max-width: none; }
.sida-tab-kost .lab-tabell { margin-top: 12px; }
.sida-tab-kalkyl { display: grid; gap: 2px; margin-top: 0; }
.sida-tab-in input { width: 92px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--w-05); color: var(--fg-1); font: inherit; text-align: right; font-variant-numeric: tabular-nums; }
/* inte .lab-rad__v: lab.js räknar upp talen där och skriver över textContent, vilket åt upp fälten (NaNkr) */
.sida-tab-v { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-7); font: var(--type-meta); }
.sida-tab-in input:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--aw-42); }
/* telefon: frågeraden radbryts, tabellen scrollar i sidled i sin behållare (.lab-tabell har overflow:auto) */
@media (max-width: 767px) {
  .sida-tab-fraga { flex-direction: column; align-items: stretch; }
  .sida-tab-fraga .ny-falt { flex: none; } /* flex: 1 i kolumnriktning klämde fältet till 0 px höjd */
  .sida-tab-wrap { padding: 6px; border-radius: 20px; }
  .sida-tab-grid { min-width: 520px; }
  .sida-tab-grid tbody th, .sida-tab-grid thead th:first-child { border-right: 1px solid var(--w-07); }
  .sida-tab-svep { display: flex; }
}
/* /kommun-stats (kommunstats.js): kodfältet, diagrammet med pekar-tips, laddläget */
.sida-ks-form { display: flex; align-items: center; gap: 8px; max-width: 560px; margin-top: 18px; padding: 6px 6px 6px 20px; }
.sida-ks-form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg-1); font: 500 15px/1.4 var(--font-ui); }
.sida-ks-fel { margin-top: 14px; color: var(--a-4); }
.sida-ks-kpi { margin-top: 18px; transition: opacity var(--lk-t) var(--lk-ease); }
.sida-ks-laddar :is(.sida-ks-kpi, .sida-ks-graf, #listor .ny-kort-grid) { opacity: .45; }
.sida-ks-graf { margin: 18px 0 0; transition: opacity var(--lk-t) var(--lk-ease); }
.sida-ks-yta { position: relative; height: 220px; padding-top: 22px; touch-action: pan-y; cursor: crosshair; }
.sida-ks-yta svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sida-ks-linje { fill: none; stroke: var(--a-4); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sida-ks-area { fill: var(--a-4); fill-opacity: .12; }
.sida-ks-max { position: absolute; top: 0; left: 0; color: var(--fg-3); font: 500 13px/1 var(--font-ui); }
.sida-ks-mark { position: absolute; top: 22px; bottom: 0; left: 0; width: 1px; background: var(--fg-3); pointer-events: none; }
.sida-ks-tips { position: absolute; top: -8px; padding: 8px 12px; border-radius: 12px; background: var(--sd-kort); box-shadow: var(--sd-skugga); color: var(--fg-3); font: 500 13px/1.35 var(--font-ui); white-space: nowrap; pointer-events: none; }
.sida-ks-tips b { display: block; color: var(--fg-1); font-weight: 600; }
.sida-ks-x { display: flex; justify-content: space-between; margin: 8px 0 6px; color: var(--fg-3); font: 500 13px/1 var(--font-ui); }
#listor .sida-radnamn a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
#listor .sida-radnamn a:hover { text-decoration: underline; }

/* ── 17d. Flöde (flode.html ?s=quiz|taggar|fordjupning|spel): frågekort, valkort, taggchips, resultatkort, reglage, spelkort ── */
.sida-flo-fraga { display: grid; gap: clamp(18px, 2.4vw, 28px); padding: clamp(18px, 3vw, 32px); }
.sida-flo-fs, .sida-flo-grupp { border: 0; margin: 0; padding: 0; min-width: 0; }
.sida-flo-fs legend { display: grid; gap: 8px; padding: 0; margin-bottom: 18px; }
.sida-flo-q { margin: 0; }
/* framsteg: tunn stapel med accentfärgen, text bredvid */
.sida-flo-prog { display: flex; align-items: center; gap: 14px; }
.sida-flo-prog progress { flex: 1; height: 6px; appearance: none; border: 0; border-radius: 99px; background: var(--w-08); overflow: hidden; }
.sida-flo-prog progress::-webkit-progress-bar { background: var(--w-08); }
.sida-flo-prog progress::-webkit-progress-value { background: var(--fg-1); border-radius: 99px; }
.sida-flo-prog progress::-moz-progress-bar { background: var(--fg-1); border-radius: 99px; }
.sida-flo-prog .lab-txt { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* svarsalternativ: stora valkort, radion syns som markerat kort */
.sida-flo-vallista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .sida-flo-vallista { grid-template-columns: 1fr; } }
.sida-flo-val { position: relative; display: block; cursor: pointer; }
.sida-flo-val input, .sida-flo-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sida-flo-val__t { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px; border-radius: 18px; background: var(--sd-kort); box-shadow: inset 0 0 0 1px var(--w-08); font: 500 16px/1.35 var(--font-ui); color: var(--fg-3); transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.sida-flo-val:hover .sida-flo-val__t { background: var(--w-08); }
.sida-flo-val:active .sida-flo-val__t { transform: scale(.985); }
.sida-flo-val__b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--w-12); font: 600 13px/1 var(--font-ui); color: var(--fg-5); }
.sida-flo-val input:checked + .sida-flo-val__t { background: var(--fg-1); color: var(--s-deep); box-shadow: none; }
.sida-flo-val input:checked + .sida-flo-val__t .sida-flo-val__b { box-shadow: inset 0 0 0 1px currentColor; color: inherit; }
.sida-flo-val input:focus-visible + .sida-flo-val__t, .sida-flo-chip input:focus-visible + span { outline: 2px solid var(--fg-3); outline-offset: 3px; }
.sida-flo-steg { justify-content: space-between; }
.sida-flo-val__b .ny-i { width: 15px; height: 15px; }
.sida-flo-val__t small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; opacity: .75; }
.sida-flo-val__n { margin-left: auto; white-space: nowrap; font-size: 13px; opacity: .75; font-variant-numeric: tabular-nums; }
.sida-flo-vallista--niva { grid-template-columns: 1fr; }
.sida-flo-chip span .ny-i { width: 14px; height: 14px; margin-right: 7px; }
.sida-flo-steg .ny-btn:disabled { opacity: .4; pointer-events: none; }
.sida-flo-fs.is-byt { animation: sida-flo-in 360ms var(--lk-ease); }   /* ny fråga glider in (lab.js) */
@keyframes sida-flo-in { from { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .sida-flo-fs.is-byt { animation: none; } }
/* taggrupper: legend som kicker, chips som label med dold checkbox */
.sida-flo-grupp legend { padding: 0; margin-bottom: 10px; }
.sida-flo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sida-flo-chip { position: relative; display: inline-flex; }
.sida-flo-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 99px; background: var(--sd-kort); box-shadow: inset 0 0 0 1px var(--w-08); font: 500 14px/1.2 var(--font-ui); color: var(--fg-4); transition: background var(--lk-t) var(--lk-ease), color var(--lk-t) var(--lk-ease); }
.sida-flo-chip:hover span { background: var(--w-12); color: var(--fg-5); }
.sida-flo-chip input:checked + span { background: var(--fg-1); color: var(--s-deep); box-shadow: none; }
.sida-flo-atgard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 6px; }
.sida-flo-rakna { margin: 0; font: 400 15px/1.4 var(--font-ui); color: var(--fg-4); }
.sida-flo-rakna strong { color: var(--fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }
/* kommunval */
.sida-flo-falt { display: grid; gap: 8px; max-width: 420px; }
.sida-flo-select { min-height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--sd-kort); box-shadow: inset 0 0 0 1px var(--w-12); font: 500 16px/1 var(--font-ui); color: var(--fg-2); }
/* resultatkort: plats, namn, stor siffra, skäl */
.sida-flo-plats, .sida-flo-omr { display: grid; align-content: start; gap: 8px; }
.sida-flo-plats .ny-btn { justify-self: start; margin-top: 8px; }
.sida-flo-plats .ny-kort__titel, .sida-flo-omr .ny-kort__titel { margin-top: 4px; }
.sida-flo-skal { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font: 400 14px/1.45 var(--font-ui); color: var(--fg-4); }
.sida-flo-lank { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 14px/1 var(--font-ui); color: var(--fg-2); }
/* reglage: label ovanför, range och output på en rad */
.sida-flo-reglagen { display: grid; gap: 18px; }
.sida-flo-reglage { display: grid; gap: 8px; font: 500 15px/1.4 var(--font-ui); color: var(--fg-2); }
.sida-flo-reglage__rad { display: flex; align-items: center; gap: 14px; }
.sida-flo-reglage input[type="range"] { flex: 1; min-width: 0; accent-color: var(--fg-1); }
.sida-flo-reglage output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-1); font-weight: 600; }
.sida-flo-atgarder { margin-top: 22px; }
/* spel: statusbadge, kommande spel dämpat, spelyta med Starta i mitten, steglista */
.sida-flo-badge { justify-self: start; align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: 99px; font: 600 13px/1.4 var(--font-ui); }
.sida-flo-badge--ny { background: var(--fg-1); color: var(--s-deep); }
.sida-flo-badge--pop { background: var(--aw-18); color: var(--a-2b); }
.sida-flo-badge--snart { background: var(--w-08); color: var(--fg-6); }
.sida-flo-snart { opacity: .6; }
.sida-flo-yta { display: grid; place-items: center; align-content: center; gap: 16px; }
.sida-flo-steglista { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font: 400 15px/1.5 var(--font-ui); color: var(--fg-3); }
.sida-flo-yta .ny-btn { text-transform: none; letter-spacing: normal; }
/* spelkorten: luft mellan ikon, kicker, titel och badge (ny-kort--kolumn saknar gap) */
.sida-flode .ny-kort--kolumn { gap: 6px; }
.sida-flode .ny-kort--kolumn .ny-kort__ikon { margin-bottom: 10px; }
.sida-flode .ny-kort--kolumn .ny-kort__titel { margin-top: 2px; }
@media (max-width: 767px) { .sida-flode #spel .ny-kort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sida-flode #spel .ny-kort { padding: 18px; } } /* telefon: 15 kort i en spalt blev 3000 px */
/* rubrikblocket får luft mot kortet under, annars ligger descenders på kortkanten */
.sida-flode .ny-topp + * { margin-top: clamp(22px, 2.6vw, 34px); }
.sida-flode .sida-tva > .sida-figur { margin-top: 0; }
/* taggrupperna i två spalter på bred skärm i stället för en lång vänsterspalt */
.sida-flo-fraga:has(> .sida-flo-grupp) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); column-gap: 40px; }
.sida-flo-fraga > .sida-flo-atgard { grid-column: 1 / -1; }
/* ranglistor: siffran inte mot kortkanten, namnen i linje även för 10 */
.sida-flode .lab-rader.sida-ol { padding: 8px 16px; }
.sida-flode .sida-ol .lab-rad__n { min-width: 2ch; }
.sida-flode .ny-kort .lab-rader { margin-top: 8px; padding: 0; background: none; box-shadow: none; }

/* ── 17f. Rapport (rapport.html ?s=rapport|etablering|tack): åtgärdsrad, dokumentyta, betalvägg med blur, köpmodal, dom-pill, statuskort ── */

/* åtgärdsraden: kompakt glaspiller som bara är så brett som knapparna, i linje med dokumentets högerkant */
.sida-rap-atg { flex-wrap: nowrap; gap: 6px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: clamp(88px, 10vw, 120px) max(0px, calc((100% - 920px) / 2)) 14px auto; padding: 6px; border-radius: 999px; }

/* dokumentytan: ett papper med luft, smalare än sidan så att det läses som en rapport */
.sida-rap-dok { max-width: 920px; margin: 0 auto; padding: clamp(22px, 4vw, 56px); border-radius: 24px; background: var(--sd-kort); box-shadow: var(--sd-skugga); }
.sida-rap-huvud__rad { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 14px; }
.sida-rap-huvud__karta { aspect-ratio: 4 / 3; }
/* rubriken är dokumentets titel: större än sektionsrubrikerna (ny-h2 ~33 px), samma display-snitt som mallarnas hero */
.sida-rap-huvud h1, .sida-rap-status h1 { margin: 6px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; color: var(--fg-1); }
.sida-rap-status h1 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); }
.sida-rap-meta { display: grid; gap: 8px; margin: 18px 0 0; }
.sida-rap-meta div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--w-05); }
.sida-rap-meta dt { color: var(--fg-6); font: var(--type-meta); }
.sida-rap-meta dd { margin: 0; color: var(--fg-2); font-variant-numeric: tabular-nums; text-align: right; }
.sida-rap-dok .ny-navhallare { margin-top: clamp(28px, 4vw, 44px); }

/* sektioner i dokumentet: luft mellan, ingen linje, ingen egen panel */
.sida-rap-sek { padding-top: clamp(28px, 4vw, 48px); margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 140px; }
.sida-rapport .ny-topp + * { margin-top: clamp(16px, 2.2vw, 26px); }
/* etablering: heron börjar under headern som rapportens åtgärdsrad (ingen nivåväljare ovanför som på platsmallen) */
.sida-rapport #topp-etablering { margin-top: clamp(88px, 10vw, 120px); }
.sida-rap-pris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.sida-rap-spark { margin: 0; color: var(--a-4); }
.sida-rap-spark svg { display: block; width: 100%; height: 88px; }
.sida-rap-spark .ny-fotnot { color: var(--fg-7); margin-top: 8px; }

/* riskkort: rubrik och nivå-badge på samma rad */
.sida-rap-risk { display: grid; gap: 10px; }
.sida-rap-risk__topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* betalväggen: innehållet blurras, köpruta ligger i samma rutnätscell och fäster medan man rullar */
.sida-betalvagg { display: grid; }
.sida-betalvagg > * { grid-area: 1 / 1; min-width: 0; }
.sida-betalvagg__innehall { filter: blur(7px); user-select: none; pointer-events: none; opacity: .85; }
.sida-betalvagg__ruta { position: sticky; top: 140px; align-self: start; justify-self: center; z-index: 2; width: min(100%, 420px); margin-top: clamp(40px, 8vw, 96px); display: grid; gap: 12px; text-align: center; justify-items: center; }
.sida-betalvagg__ruta .ny-h2 { margin: 0; }
.sida-rap-ingar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--fg-4); font: 400 14px/1.45 var(--font-ui); }

/* köpmodalen: popover i mitten, ::backdrop dämpar och suddar sidan */
.sida-rap-modal { margin: auto; width: min(92vw, 440px); padding: clamp(20px, 4vw, 32px); border: 0; border-radius: 24px; background: var(--sd-kort); color: var(--fg-2); box-shadow: var(--sd-skugga), 0 24px 64px var(--w-15); }
.sida-rap-modal:popover-open { display: grid; gap: 12px; }
.sida-rap-modal::backdrop { background: color-mix(in srgb, var(--fg-1) 32%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sida-rap-modal .ny-h2 { margin: 0; }
.sida-rap-modal__form { display: grid; gap: 10px; }
.sida-rap-modal__form input { width: 100%; box-sizing: border-box; }
@starting-style { .sida-rap-modal:popover-open { opacity: 0; transform: translateY(10px); } }
.sida-rap-modal { transition: opacity var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease), display var(--lk-t) allow-discrete, overlay var(--lk-t) allow-discrete; }

/* checklistan: rund ruta med bock, en rad per punkt */
.sida-rap-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sida-rap-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--fg-3); font: 400 15px/1.5 var(--font-ui); }
.sida-rap-check__ruta { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--aw-18); color: var(--a-4); }
.sida-rap-check__ruta i { width: 14px; height: 14px; }

/* etablering: dom-pillen under svaret */
.sida-rap-dom { display: flex; align-items: center; gap: 12px; margin: 18px 0; }

/* tack: statuskortet, centrerat */
.sida-rap-status { max-width: 560px; margin: clamp(88px, 12vw, 140px) auto 0; display: grid; gap: 14px; justify-items: center; text-align: center; }
.sida-rap-status__ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--aw-18); color: var(--a-4); }
.sida-rap-status__ikon i { width: 26px; height: 26px; }
.sida-rap-status .sida-svar { margin: 0; }
.sida-rap-status__steg { display: grid; gap: 8px; justify-items: center; }
.sida-rap-steg { margin: 0; padding-left: 20px; text-align: left; display: grid; gap: 6px; color: var(--fg-4); font: 400 15px/1.5 var(--font-ui); }

@media (max-width: 767px) {
  .sida-rap-atg { margin-inline: auto; }
  .sida-rap-atg .ny-btn { padding: 10px 14px; }
  .sida-rap-huvud__rad, .sida-rap-pris { grid-template-columns: 1fr; }
  .sida-betalvagg__ruta { top: 100px; }
}
@media (prefers-reduced-motion: reduce) { .sida-rap-modal { transition: none; } }
@media print { .sida-rap-atg, .sida-betalvagg__ruta { display: none; } }

/* ── 17e. Text (text.html ?s=…): numrerade prosasektioner, glaskort, formulär, artikel med läsprogress ── */
/* prosa: läsbredd ~68ch, samma markup i alla varianter */
.sida-txt-prosa { max-width: 68ch; }
.sida-txt-svar { margin-bottom: 0; }
.sida-txt-datum { margin: 0; color: var(--fg-7); }
/* juridik (bygg_text.py): prods text ordagrant. Ingen ingress per avsnitt, punktlistor i prosans ton, länkar i accent */
.sida-txt-jur .ny-prosa__p:first-child { font-size: 15.5px; line-height: 1.72; color: var(--fg-4); }
.sida-txt-lista { margin: 0 0 16px; padding-left: 1.2em; font: 400 15.5px/1.72 var(--font-ui); color: var(--fg-4); }
.sida-txt-lista li { margin-bottom: 6px; padding-left: 4px; }
.sida-txt-lista li::marker { color: var(--a-4); }
.sida-txt-jur strong { font-weight: 600; color: var(--fg-2b); }
.sida-txt-jur a { color: var(--a-4); text-underline-offset: 3px; }
.sida-txt-jur .lab-tabell { margin: 4px 0 16px; }
/* lagerkatalogen (bygg_text.py ur data/lager_katalog.json + /datakallor#lager): varje grupp ett kort i ett murverk
   (spalter, inga radhål under korta grupper), rader med hårlinje, POI-namn i spalter (namnet ÄR beskrivningen) */
.sida-lagerkat { columns: 3 340px; column-gap: 18px; margin-top: 22px; }
.sida-lagergrupp { break-inside: avoid; margin: 0 0 18px; padding: 18px 0 8px; border-top: 1px solid var(--w-10); }
.sida-lagergrupp h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 600 13px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.sida-lagergrupp h3 small { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--sd-ang-t); color: var(--sd-ang); font: 600 13px/1.4 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sida-lagergrupp .ny-fotnot { margin: 0 0 6px; }
.sida-lagergrupp ul { margin: 0; padding: 0; list-style: none; }
.sida-lagergrupp li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--fg-4) 16%, transparent); }
.sida-lagergrupp li:first-child { border-top: 0; }
.sida-lagergrupp a { font: 500 15px/1.4 var(--font-ui); color: var(--fg-2b); text-decoration: none; transition: color var(--lk-t) var(--lk-ease); }
.sida-lagergrupp b { font: 500 15px/1.4 var(--font-ui); color: var(--fg-2b); }
.sida-lagergrupp a:hover, .sida-lagergrupp a:focus-visible { color: var(--a-4); }
@media (prefers-reduced-motion: reduce) { .sida-lagergrupp a { transition: none; } }
.sida-lagergrupp span { font: 400 13.5px/1.5 var(--font-ui); color: var(--fg-4); }
.sida-lagergrupp--poi ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 12px; }
.sida-lagergrupp--poi li { padding: 0; border: 0; }
.sida-lagergrupp--poi a { display: block; padding: 4px 11px; border-radius: 99px; background: var(--sd-kort-2); font-size: 13.5px; }
@media (max-width: 767px) { .sida-lagergrupp { padding: 16px 16px 6px; border-radius: 18px; } }
/* sektionsnummer i h2: liten accentsiffra före rubriken */
.sida-txt-nr { display: inline-block; min-width: 1.6em; margin-right: 6px; font-family: var(--font-ui); font-size: .62em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--a-4); vertical-align: .18em; }
/* om-projektet: uppdraget i ett glaskort */
.sida-txt-glas { padding: clamp(20px, 3vw, 36px); border-radius: 22px; }
/* kontakt: formuläret, två spalter på bred skärm, en på telefon */
.sida-txt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; max-width: 760px; }
.sida-txt-falt { display: grid; gap: 8px; min-width: 0; }
.sida-txt-falt--bred { grid-column: 1 / -1; }
.sida-txt-in { width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px 14px; border: 0; border-top: 1px solid var(--edge-hi); border-radius: var(--r-ctl); background: var(--w-06); color: var(--fg-2); font: 400 14px/1.4 var(--font-ui); }
.sida-txt-in:focus-visible { outline: 2px solid var(--a-4); outline-offset: 3px; }
textarea.sida-txt-in { resize: vertical; min-height: 140px; }
.sida-txt-form .ny-btn { margin-bottom: 10px; }
@media (max-width: 767px) { .sida-txt-form { grid-template-columns: 1fr; } }
/* datakällor: sökfält + licenschips ovanför tabellen */
.sida-txt-verktyg { display: grid; gap: 4px; margin-bottom: 18px; max-width: 760px; }
/* 404: stor sökruta */
.sida-txt-stor { width: min(100%, 560px); max-width: 560px; height: 56px; margin: 6px 0 0; }
.sida-txt-tillbaka { margin-top: 22px; }
/* artikel: läsprogress överst, bara där webbläsaren kan skrolldriva animationer */
.sida-txt-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .sida-txt-progress { display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90; background: var(--a-4); transform: scaleX(0); transform-origin: 0 50%; animation: sida-txt-lasa linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes sida-txt-lasa { to { transform: scaleX(1); } }
}
.sida-txt-byline { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: var(--type-meta); color: var(--fg-6); }
.sida-txt-byline strong { color: var(--fg-2); font-weight: 600; }
.sida-txt-bild { margin-top: 0; }
.sida-txt-del { margin-top: clamp(22px, 3vw, 36px); }
.sida-txt-del > .ny-h2 { margin: 0 0 12px; }
.sida-txt-citat { max-width: 60ch; margin: 22px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--a-4); }
.sida-txt-citat p { margin: 0; font: 500 clamp(18px, 2.4vw, 22px)/1.45 var(--font-display); color: var(--fg-1); text-wrap: balance; }
.sida-txt-citat footer { margin-top: 8px; font: var(--type-meta); color: var(--fg-7); }
.sida-txt-dela { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--w-05); }
.sida-txt-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sida-txt-pn a { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--w-10); color: var(--fg-2); text-decoration: none; }
.sida-txt-pn a[rel="next"] { text-align: right; }
.sida-txt-pn__t { font: 500 15px/1.4 var(--font-ui); }
@media (max-width: 767px) { .sida-txt-pn { grid-template-columns: 1fr; } .sida-txt-pn a[rel="next"] { text-align: left; } }
/* bakade artiklar (bygg_nyheter.py): markdownens rena element får prosans typografi; bilder har fast ruta så inget hoppar */
.sida-txt-prosa > :is(p, ul, ol) { margin: 0 0 16px; font: 400 15.5px/1.72 var(--font-ui); color: var(--fg-4); text-wrap: pretty; }
.sida-txt-prosa > p:first-child { font-size: 17.5px; line-height: 1.6; color: var(--fg-2b); }
.sida-txt-prosa > h2 { margin: clamp(26px, 3.4vw, 40px) 0 12px; font: 500 clamp(22px, 2.6vw, 28px)/1.25 var(--font-display); color: var(--fg-1); scroll-margin-top: 120px; }
.sida-txt-prosa > h3 { margin: 22px 0 8px; font: 600 16px/1.4 var(--font-ui); color: var(--fg-2); }
.sida-txt-prosa a { color: var(--a-4); }
.sida-txt-prosa figure { margin: 22px 0; }
.sida-txt-prosa figure img, .sida-txt-prosa > p img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sida-txt-prosa figcaption { margin-top: 8px; font: var(--type-meta); color: var(--fg-7); }
.sida-txt-bild img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-panel, 22px); background: var(--w-05); }
.sida-txt-kortbild { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--w-05); }
.sida-txt-kortbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* luft mellan sektionsrubriken och innehållet (samma mönster som startsidan) */
.sida-text .ny-topp + * { margin-top: clamp(18px, 2.2vw, 26px); }
/* heron: rubrik och kort svar centrerade även när de bryts */
.sida-text .lab-hero h1, .sida-text .lab-hero .sida-txt-svar { text-align: center; }
/* stor siffra/ord i kort utan räkneanimation (lab.js tal tappar mellanslag och ger NaN på ord) */
.sida-txt-siffra { font: 600 30px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); }
.sida-txt-siffra--accent { color: var(--a-4); }
/* ensamt nyckeltalskort: inte hela bredden */
.sida-text .ny-kort-grid:has(> .ny-kort:only-child) { grid-template-columns: minmax(0, 340px); }
/* guide: skärmbilderna i läsbredd, inte 1200 px höga platshållare */
.sida-text section.ny-panel > .sida-figur .sida-bred { max-width: 880px; }
@media (max-width: 767px) { .sida-text .sida-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* §17g statistik: arbetsbänken (utforska). Hierarki: rubrik + läge (huvudval) → EN verktygsrad (vy · sök · filter · kolumner · ⋯)
   → hopfälld jämför → vyn. Allt sekundärt bor i menyer; markeringslisten syns först när något är markerat.
   Kommunfärger Okabe-Ito (NYTT_KARTLAGER §0.5), prickarnas färgskala viridis, värmen = accentens styrka (magnitud utan värdering). */
.st-bank { --st-k1: #e69f00; --st-k2: #56b4e9; --st-k3: #009e73; --st-k4: #f0e442; --st-k5: #0072b2; --st-k6: #d55e00; }
.st-bank__ingress { margin: 8px 0 0; max-width: 60ch; color: var(--fg-5); }
.st-niva { display: inline-flex; flex: none; width: fit-content; }   /* nivån: kompakt segment i rubrikraden, inte en egen rad */
:is(.st-lage, .st-niva) .ny-seg__a { display: inline-flex; align-items: center; justify-content: center; width: auto; gap: 6px; padding: 0 14px; min-height: 34px; font-size: 13.5px; }
.st-lage .ny-seg__a svg { width: 15px; height: 15px; }
.st-verktyg { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.st-sok { flex: 1 1 240px; }
.st-urval summary .ny-meta { margin-right: 2px; }
.st-urval summary svg:last-child { width: 14px; height: 14px; opacity: .6; }
.st-mer { padding-inline: 12px; }
.st-mer svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .st-lage { width: 100%; } .st-lage .ny-seg__a { flex: 1; }
  /* rad 1: sök + ⋯, rad 2: vy · filter · kolumner i lika delar */
  .st-sok { order: -2; flex: 1 1 calc(100% - 60px); }
  .st-verktyg > .st-pop { flex: 1 1 28%; } .st-verktyg > .st-pop:has(.st-mer) { order: -1; flex: none; }
  .st-verktyg summary > .ny-meta { display: none; }
  .st-verktyg > .st-pop { min-width: 0; }
  .st-verktyg > .st-pop > summary { width: 100%; justify-content: center; padding-inline: 6px; gap: 5px; font-size: 14px; overflow: hidden; }
}
.st-kbd, .st-bank kbd { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--w-12); font: 500 13px/1.2 var(--font-ui); color: var(--fg-6); background: var(--w-045); }
/* popovers: native details, arket hänger under knappen */
.st-pop { position: relative; }
.st-pop > summary { list-style: none; cursor: pointer; }
.st-pop > summary::-webkit-details-marker { display: none; }
.st-pop[open] > summary { background: var(--aw-24); color: var(--a-4); }
.st-pop__ark { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(380px, calc(100vw - 32px)); display: grid; gap: 10px; background: var(--sd-kort); box-shadow: var(--sd-skugga); border-radius: 18px; animation: sida-upp 220ms var(--lk-ease) both; }
.st-pop__ark--bred { width: min(560px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; }
.st-pop--hoger .st-pop__ark { left: auto; right: 0; width: 260px; }
@media (max-width: 767px) { .st-pop__ark, .st-pop--hoger .st-pop__ark { position: fixed; inset: auto 16px 16px; width: auto; max-height: 70vh; overflow: auto; } }
.st-pop__knappar { display: flex; gap: 6px; }
.st-filtrad { display: grid; grid-template-columns: 1fr 76px auto 76px; align-items: center; gap: 8px; }
.st-filtrad input { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--w-12); background: var(--w-045); color: var(--fg-2); font: 400 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.st-filtrad input:focus-visible { outline: 2px solid var(--a-4); outline-offset: 1px; }
.st-filtnamn { font: 500 13px/1.3 var(--font-ui); color: var(--fg-3); }
.st-kolgrp { display: grid; gap: 6px; }
.st-meny { padding: 6px; gap: 2px; }
.st-meny button { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 12px; text-align: left; font: 500 13.5px/1.3 var(--font-ui); color: var(--fg-2); }
.st-meny button:hover { background: var(--w-06); }
.st-meny button > span { display: grid; }
.st-meny svg { width: 16px; height: 16px; margin-top: 1px; }
.st-meny [aria-checked="false"] > svg { visibility: hidden; }
.st-meny [aria-checked="true"] > svg { color: var(--a-4); }
.st-meny hr { margin: 4px 8px; border: 0; border-top: 1px solid var(--w-07); }
.st-meny .st-tips { padding: 10px; }
.st-brytare--rad { padding: 2px 0 6px; }
.st-brytare { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--font-ui); color: var(--fg-3); cursor: pointer; }
.st-brytare input { appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--w-12); position: relative; cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.st-brytare input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--lk-t) var(--lk-ease); }
.st-brytare input:checked { background: var(--a-4); }
.st-brytare input:checked::after { transform: translateX(14px); }
.st-brytare input:focus-visible { outline: 2px solid var(--a-4); outline-offset: 2px; }
.st-bank .list-active-filters .ny-chip svg { width: 12px; height: 12px; margin-left: 2px; }
.st-not { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1.4 var(--font-ui); color: var(--fg-6); }
.st-not svg { width: 13px; height: 13px; }
.st-lank { color: var(--a-4); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* jämför */
.st-jamfor { margin-top: 14px; padding: 0; }
.st-jamfor > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; list-style: none; cursor: pointer; font: 400 13.5px/1.3 var(--font-ui); color: var(--fg-2); }
.st-jamfor > summary::-webkit-details-marker { display: none; }
.st-jamfor > summary > svg { width: 16px; height: 16px; color: var(--a-4); }
.st-jamfor > summary b { font-weight: 600; }
.st-jamfor__namn { color: var(--fg-5); }
.st-jamfor__namn .st-prick { margin-left: 6px; margin-right: 5px; }
.st-jamfor__oppna { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--a-4); font-weight: 500; }
.st-jamfor__oppna svg { width: 14px; height: 14px; transition: transform var(--lk-t) var(--lk-ease); }
.st-jamfor[open] .st-jamfor__oppna svg { transform: rotate(180deg); }
.st-jamfor__oppna::before { content: 'Visa'; }
.st-jamfor[open] .st-jamfor__oppna::before { content: 'Dölj'; }
.st-jamfor__kropp { padding: 0 16px 14px; animation: sida-upp 220ms var(--lk-ease) both; }
.st-jamfor__rull { overflow-x: auto; margin-top: 10px; }
.st-jamfor__grid { width: 100%; border-collapse: collapse; font: 400 13.5px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.st-jamfor__grid th, .st-jamfor__grid td { padding: 9px 10px; border-top: 1px solid var(--w-05); text-align: right; white-space: nowrap; color: var(--fg-3); }
.st-jamfor__grid thead th { border-top: 0; font-weight: 600; color: var(--fg-2); }
.st-jamfor__grid tbody th { text-align: left; font-weight: 500; }
.st-jamfor__grid tbody th .ny-meta { display: block; }
.st-jamfor__grid td.is-bast { color: var(--fg-1); font-weight: 600; }
.st-jamfor__grid td.is-bast svg { width: 13px; height: 13px; color: var(--fg-1); vertical-align: -1px; }
.st-x { margin-left: 4px; padding: 3px; border-radius: 50%; color: var(--fg-7); vertical-align: middle; }
.st-x:hover { background: var(--w-06); color: var(--fg-2); }
.st-x svg { width: 12px; height: 12px; }
.st-prick { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
.st-prick--1 { background: var(--st-k1); } .st-prick--2 { background: var(--st-k2); } .st-prick--3 { background: var(--st-k3); }
.st-prick--4 { background: var(--st-k4); } .st-prick--5 { background: var(--st-k5); } .st-prick--6 { background: var(--st-k6); }
.st-prick--sv { width: 12px; height: 0; border-radius: 0; border-top: 2px dashed var(--fg-6); }
/* vyerna */
.st-vy { margin-top: 22px; }
.st-vy[hidden] { display: none; }
.st-vy:not([hidden]) { animation: sida-upp 320ms var(--lk-ease) both; }
/* tabellen: stjärna + kommun frysta, rubrik = knapp med enhet, sorteringsordning 1/2, dragkant */
.st-tabell { margin-top: 0; padding: 8px; }
.st-tabell .lab-tabell__grid th, .st-tabell .lab-tabell__grid td { white-space: nowrap; }
.st-tabell thead th { position: relative; vertical-align: bottom; }
.st-sortk { display: inline-grid; justify-items: end; gap: 2px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.st-enhet { font: 400 13px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--fg-7); }
.st-tabell th[aria-sort] { color: var(--fg-1); }
.st-tabell th[aria-sort] .st-sortk::after { font: 600 13px/1 var(--font-ui); }
.st-tabell th[aria-sort="descending"] .st-sortk::after { content: '↓'; }
.st-tabell th[aria-sort="ascending"] .st-sortk::after { content: '↑'; }
.st-tabell th[data-ordn="2"][aria-sort="ascending"] .st-sortk::after { content: '↑ 2'; }
.st-tabell th[data-ordn="2"][aria-sort="descending"] .st-sortk::after { content: '↓ 2'; }
.st-tabell th[data-ordn="2"] { color: var(--fg-3); }
.st-drag { position: absolute; top: 6px; bottom: 6px; right: 0; width: 6px; cursor: col-resize; border-right: 1px solid transparent; }
.st-tabell thead th:hover .st-drag { border-right-color: var(--w-12); }
.st-tabell .st-stj { width: 30px; padding-inline: 4px; }
.st-tabell .st-lasth, .st-tabell tbody th, .st-tabell .st-stj { position: sticky; background: var(--sd-yta); z-index: 1; }
.st-tabell .st-stj { left: 0; }
.st-tabell .lab-tabell__grid .st-lasth, .st-tabell .lab-tabell__grid tbody th { left: 30px; text-align: left; }
.st-lasth span::after { content: ' · låst'; text-transform: none; letter-spacing: 0; font: 400 13px/1 var(--font-ui); color: var(--fg-7); }
.st-tabell tbody th a { color: var(--fg-1); font-weight: 600; text-decoration: none; }
.st-tabell tbody th a:hover { text-decoration: underline; text-underline-offset: 2px; }
.st-tabell tbody th .ny-meta { margin-left: 8px; }
.st-stjarna { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--fg-7); }
.st-stjarna svg { width: 15px; height: 15px; }
.st-stjarna:hover { color: var(--fg-3); background: var(--w-06); }
.st-stjarna[aria-pressed="true"] { color: var(--st-k1); }
.st-stjarna[aria-pressed="true"] svg { fill: currentColor; }
.st-tabell tbody tr[aria-selected="true"] > * { background: color-mix(in srgb, #0072b2 14%, var(--sd-yta)); }
.st-tabell .st-median > * { font-style: italic; color: var(--fg-5); border-bottom: 1px solid var(--w-12); }
.st-tabell .st-skilje td { padding: 0; border-top: 2px solid var(--w-12); }
.st-tabell .st-sakn { color: var(--fg-7); }
.st-rang { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--w-08); color: var(--fg-2); font: 600 13px/1 var(--font-ui); vertical-align: 1px; }
.st-tabell td { position: relative; }
.st-cstapel { position: absolute; right: 10px; bottom: 3px; height: 3px; max-width: calc(100% - 20px); border-radius: 2px; background: var(--g, var(--fg-6)); }
.st-tabell .sb-bricka { margin-left: 8px; padding: 1px 7px; vertical-align: 1px; }
.st-tabell--farg .st-h1 { background: color-mix(in srgb, #0072b2 4%, transparent); }
.st-tabell--farg .st-h2 { background: color-mix(in srgb, #0072b2 10%, transparent); }
.st-tabell--farg .st-h3 { background: color-mix(in srgb, #0072b2 17%, transparent); }
.st-tabell--farg .st-h4 { background: color-mix(in srgb, #0072b2 25%, transparent); }
.st-tabell--farg .st-h5 { background: color-mix(in srgb, #0072b2 34%, transparent); color: var(--fg-1); }
.st-fot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.st-tips { font: 400 13px/1.5 var(--font-ui); color: var(--fg-5); }
.st-tips > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.st-tips > summary::-webkit-details-marker { display: none; }
.st-tips svg { width: 15px; height: 15px; }
.st-tips ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (hover: none) { .st-tips { display: none; } }
/* trend */
.st-trendval, .st-axlar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.st-trendval > .st-pop, .st-axlar > .st-pop { margin-left: auto; }
.st-brytrad { width: 280px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.st-legend__a { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--w-045); font: 500 13px/1 var(--font-ui); color: var(--fg-3); }
.st-legend__a[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.st-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }   /* auto-fit: få diagram sträcks över hela bredden */
.st-mini { margin: 0; display: grid; gap: 10px; }
.st-mini__verktyg { display: flex; gap: 2px; }
.st-mini__verktyg .ny-ikon { width: 30px; height: 30px; }
.st-mini__verktyg svg { width: 14px; height: 14px; }
.st-graf { width: 100%; height: 120px; overflow: visible; }
.st-graf path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-graf .st-graf__rutn { stroke: var(--w-07); stroke-width: 1; }
.st-graf__sverige { stroke: var(--fg-6); stroke-dasharray: 4 4; }
.st-graf__k1 { stroke: var(--st-k1); } .st-graf__k2 { stroke: var(--st-k2); } .st-graf__k3 { stroke: var(--st-k3); }
.st-graf__k4 { stroke: var(--st-k4); } .st-graf__k5 { stroke: var(--st-k5); } .st-graf__k6 { stroke: var(--st-k6); }
.st-graf__prognos { stroke: var(--st-k1); stroke-dasharray: 1 5; }
.st-mini__tal { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 13px/1.3 var(--font-ui); color: var(--fg-5); font-variant-numeric: tabular-nums; }
.st-mini__tal b { color: var(--fg-1); font-weight: 600; }
.st-topp2 { margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.st-topprad { width: 100%; font: inherit; color: inherit; text-align: left; border-radius: 8px; }
.st-topprad[aria-pressed="true"] { color: var(--fg-1); font-weight: 600; }
/* punkter */
.st-axlar { align-items: flex-end; margin-bottom: 14px; }
/* sambandet/förklaringen i en rad direkt ovanför diagrammet (figcaption först, skalan till höger), diagrammet under över hela bredden */
.st-punkt { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; }
.st-punkt > svg { grid-column: 1 / -1; grid-row: 2; }
.st-punkt > .st-skala { grid-row: 1; grid-column: 2; }
.st-graf--punkt { height: auto; aspect-ratio: 5 / 3; max-height: 420px; }
.st-graf .st-graf__axel { stroke: var(--w-12); stroke-width: 1; }
.st-graf .st-graf__tal { font-weight: 400; fill: var(--fg-6); }
.st-graf--punkt text { font: 600 13px var(--font-ui); fill: var(--fg-7); }
.st-graf .st-graf__reg { stroke: var(--fg-5); stroke-dasharray: 6 4; }
.st-pkt { fill-opacity: .85; stroke: var(--sd-yta); stroke-width: 1; }
.st-pkt--1 { fill: #440154; background: #440154; } .st-pkt--2 { fill: #3b528b; background: #3b528b; } .st-pkt--3 { fill: #21918c; background: #21918c; }
.st-pkt--4 { fill: #5ec962; background: #5ec962; } .st-pkt--5 { fill: #fde725; background: #fde725; }
.st-skala { display: flex; align-items: center; gap: 4px; }
.st-skala i { width: 18px; height: 8px; border-radius: 2px; }
.st-skala .ny-meta { margin-inline: 4px; }
/* markeringslisten: piller nertill, bara när något är markerat */
.st-valbar { position: fixed; z-index: 30; left: 50%; bottom: 20px; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--sd-kort); box-shadow: var(--sd-skugga), 0 0 0 1px var(--w-07); transform: translate(-50%, 0); transition: transform 320ms var(--lk-ease), opacity 320ms var(--lk-ease); max-width: calc(100vw - 32px); overflow-x: auto; }
.st-valbar[data-antal="0"] { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.st-valbar__n { margin-right: 6px; white-space: nowrap; font: 500 13px/1 var(--font-ui); color: var(--fg-3); }
.st-valbar__a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; white-space: nowrap; font: 500 13px/1 var(--font-ui); color: var(--fg-2); text-decoration: none; }
.st-valbar__a[hidden] { display: none; }
.st-valbar__a:hover { background: var(--w-06); }
.st-valbar__a svg { width: 15px; height: 15px; }
@media (max-width: 767px) { .st-valbar { bottom: 12px; } .st-valbar__a span { display: none; } .st-valbar__a { padding: 10px; } }

/* Uppdateringar: filtrerade inlägg (nyheter.js sätter hidden, nw-item har egen display).
   content-visibility: rader under vecket målas först när de närmar sig; bilden har fast ruta (inget hopp när den laddar). */
body.mm-ny .nw-item { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.nw-item__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.mm-ny .nw-item.is-featured .nw-item__media img { aspect-ratio: 21 / 9; }
body.mm-ny .nw-item[hidden] { display: none; }

/* Samarbetspartners: logotyp-platshållare i partnerkorten */
.sida-partner-logo { display: grid; place-items: center; height: 72px; margin-bottom: 12px; border-radius: 14px; font-size: 13px; }

/* Datakällor: kryssa i källor att ladda ner (lab.js fyller listan ur data/kallor.json, sök + chips filtrerar) */
.sida-kallval__verktyg { display: grid; gap: 12px; margin-top: 14px; }
.sida-kallval__rad { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.sida-kallval__rad .ny-fotnot { margin: 0; }
.sida-kallval__knappar { display: flex; gap: 16px; }
.sida-kallval__lank { padding: 0; border: 0; background: none; font: 500 13.5px/1.4 var(--font-ui); color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sida-kallval__lank:disabled { color: var(--fg-7); text-decoration: none; cursor: default; }
.sida-kallval__lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.sida-kallval__lista li[hidden] { display: none; }
.sida-kallval__lista li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 6px 0; content-visibility: auto; contain-intrinsic-size: auto 56px; } /* 1 049 rader i en 420 px-ruta: bara de synliga läggs ut (270 ms layout på telefon annars) */
.sida-kallval__lista label { display: contents; font: 14px/1.35 var(--font-ui); color: var(--fg-2); cursor: pointer; }
.sida-kallval__lista input { grid-row: span 3; margin-top: 3px; }
.sida-kallval__lista .ny-fotnot { grid-column: 2; margin: 0; }
.sida-kallval__kalla { color: var(--fg-7); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sida-kallval__tomt { margin: 12px 0 0; }
.sida-kallval__ner { position: sticky; bottom: 16px; z-index: 2; margin-top: 16px; }
.sida-kallval__n { margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums; }

/* §kvitto: PDF-underlaget. Syns bara i utskrift; body.sida-skriver-kvitto döljer allt annat (lab.js bygger #kvitto) */
.sida-kvitto { display: none; }
@media print {
  body.sida-skriver-kvitto > :not(#kvitto) { display: none !important; }
  body.sida-skriver-kvitto { background: #fff !important; }
  .sida-kvitto { display: block; color: #111; font: 10.5pt/1.45 var(--font-ui), system-ui, sans-serif; }
  .sida-kvitto__topp { display: flex; justify-content: space-between; padding-bottom: 8pt; border-bottom: 1.5pt solid #111; font-size: 9pt; letter-spacing: .04em; text-transform: uppercase; }
  .sida-kvitto__topp { align-items: center; }
  .sida-kvitto__marke { display: grid; grid-template-columns: auto auto; column-gap: 7pt; align-items: center; text-transform: none; letter-spacing: normal; }
  .sida-kvitto__marke svg { grid-row: span 2; width: 30pt; height: 25pt; color: #1b2a24; }
  .sida-kvitto__marke strong { font-size: 13pt; line-height: 1.1; }
  .sida-kvitto__marke small { font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: #555; }
  .sida-kvitto h1 { margin: 16pt 0 8pt; font-size: 20pt; }
  .sida-kvitto h2 { margin: 18pt 0 6pt; font-size: 12pt; break-after: avoid; }
  .sida-kvitto__meta { display: grid; grid-template-columns: max-content 1fr; gap: 2pt 14pt; margin: 0; }
  .sida-kvitto__meta dt { color: #555; }
  .sida-kvitto__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
  .sida-kvitto__tab { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .sida-kvitto__tab th { text-align: left; padding: 4pt 6pt 4pt 0; border-bottom: 1pt solid #111; }
  .sida-kvitto__tab td { vertical-align: top; padding: 5pt 6pt 5pt 0; border-bottom: .5pt solid #ccc; overflow-wrap: anywhere; }
  .sida-kvitto__tab tr { break-inside: avoid; }
  .sida-kvitto__tab small { display: block; color: #555; }
  .sida-kvitto__steg { margin: 0; padding-left: 16pt; }
  .sida-kvitto__steg li { margin-bottom: 3pt; }
  .sida-kvitto__fot { margin-top: 18pt; padding-top: 6pt; border-top: .5pt solid #ccc; color: #555; font-size: 8.5pt; }
}

/* Datakällor: bearbetningsstegen, beskrivningen under rubriken i stället för till höger */
.sida-steg .ny-rad { flex-wrap: wrap; }
.sida-steg .lab-rad__v { flex-basis: 100%; padding-left: 2.6em; text-align: left; }
#bearbetning .sida-faq { margin-top: 18px; }

/* Datakällor: våra egna analyser, lager och prognoser */
#egna .ny-kort { display: grid; gap: 8px; align-content: start; }
#egna .sida-txt-siffra { font-size: 19px; line-height: 1.3; }
#egna .ny-fotnot { margin: 4px 0 0; }
#egna .sida-faq { margin-top: 18px; }

/* Heron: Sverigeresan (motiv.js) i stället för det stilla landskapet. motiv.css är byggd för en egen sida:
   ingen scroll-snap här, och pausknappen (lab.js .is-paus) stoppar resan som motivsidans .paus gör. */
html:has(.sida-hero__resa) { scroll-snap-type: none; }
.sida-hero__resa > .motiv { height: 100%; min-height: 0; }
/* Intoning: motiv.js sätter .klar när figurerna och de närmaste bitarnas bilder är klara, så bygget syns aldrig. */
.sida-hero__resa > .motiv { opacity: 0; transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1); }
.sida-hero__resa.klar > .motiv { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sida-hero__resa > .motiv { transition-duration: .2s; } }
.sida-hero.is-paus .motiv * { animation-play-state: paused !important; }
.sida-hero.is-paus .motiv { --spel: paused; }

/* riktig data (sida-statistik.js): kontrollerna inerta tills modulen tagit över, dimning medan en kolumnfil hämtas, kurvor och prickar ritas in */
.st-verktyg:not(.st-redo) > * { pointer-events: none; }
.st-tabell tbody, .st-punkt > svg, .st-mini-grid { transition: opacity var(--lk-t) var(--lk-ease); }
.st-laddar tbody, .st-laddar.st-punkt > svg, .st-laddar .st-mini-grid, .st-mini-grid.st-laddar { opacity: .35; }
.st-rit { transform-box: fill-box; transform-origin: bottom; animation: st-rit 720ms var(--lk-ease) both; }
@keyframes st-rit { from { opacity: 0; transform: scaleY(.6); } }
.st-pkt { transform-box: fill-box; transform-origin: center; animation: st-pkt 480ms var(--lk-ease) both; animation-delay: calc(var(--i, 0) * 8ms); }
@keyframes st-pkt { from { opacity: 0; transform: scale(.3); } }
.st-pkt.is-fast { stroke: var(--fg-1); stroke-width: 3; fill-opacity: 1; }
.st-pkt { cursor: pointer; }
.st-mini { transition: transform var(--lk-t) var(--lk-ease); }
.st-mini--stor { grid-column: 1 / -1; }
.st-mini--stor .st-graf { height: 240px; }
.st-legend__tips { align-self: center; margin-left: 4px; }
.ny-stat__kolumn-stapel.is-neg { opacity: .45; }
a.ny-stat__topprad, a.ny-stat__stapel-namn { color: inherit; text-decoration: none; }
a.ny-stat__stapel-namn { color: var(--fg-6); }
a.ny-stat__stapel-namn:hover, a.ny-stat__topprad:hover > span:first-child { color: var(--fg-1); }
:is(#st-chips, .st-jamfor, .st-skala)[hidden] { display: none; }
/* staplar: rang · namn · stapel · värde i ett subgrid så kolumnerna linjerar; medianen är ett streck genom alla rader (--m) */
.st-stapl { padding: 18px 20px; }
.st-stapl__lista { display: grid; grid-template-columns: auto minmax(0, max-content) minmax(80px, 1fr) auto; column-gap: 14px; margin-top: 10px; }
.st-stapl__rad { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 6px 8px; border: 0; border-radius: 9px; background: none; font: 500 13.5px/1.25 var(--font-ui); color: var(--fg-3); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--lk-t) var(--lk-ease); }
.st-stapl__rad:hover { background: var(--w-05); }
.st-stapl__rad[aria-pressed="true"] { color: var(--fg-1); font-weight: 600; }
.st-stapl__r { min-width: 2ch; text-align: right; font-size: 13px; color: var(--fg-7); }
.st-stapl__n { max-width: 24ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-stapl__s { position: relative; height: 6px; border-radius: 3px; background: var(--w-06); }
.st-stapl__s i { position: absolute; inset-block: 0; left: var(--a); width: max(var(--w), 2px); border-radius: 3px; background: color-mix(in srgb, var(--g) 60%, transparent); transform-origin: left; animation: st-vax 620ms var(--lk-ease) both; animation-delay: calc(var(--i, 0) * 12ms); }
.st-stapl__rad:hover .st-stapl__s i { background: var(--g); }
.st-stapl__s::after { content: ''; position: absolute; left: var(--m); inset-block: -7px; border-left: 1px dashed var(--fg-6); }
.st-stapl__v { text-align: right; font-weight: 600; color: var(--fg-1); }
.st-stapl--1 .st-stapl__s i { background: var(--st-k1); } .st-stapl--2 .st-stapl__s i { background: var(--st-k2); } .st-stapl--3 .st-stapl__s i { background: var(--st-k3); }
.st-stapl--4 .st-stapl__s i { background: var(--st-k4); } .st-stapl--5 .st-stapl__s i { background: var(--st-k5); } .st-stapl--6 .st-stapl__s i { background: var(--st-k6); }
.st-stapl__glapp { grid-column: 1 / -1; margin: 6px 0; padding: 8px; border-block: 1px dashed var(--w-07); text-align: center; font: 400 13px var(--font-ui); color: var(--fg-6); }
@keyframes st-vax { from { transform: scaleX(0); } }
@media (max-width: 767px) { .st-stapl { padding: 12px 10px; } .st-stapl__lista { column-gap: 8px; } .st-stapl__n { max-width: 13ch; } .st-stapl__rad { font-size: 13px; padding-inline: 4px; } }
/* fördelning */
.st-graf--hist { height: auto; aspect-ratio: 60 / 26; max-height: 460px; }
.st-graf--hist text { font: 600 13px var(--font-ui); fill: var(--fg-6); }
.st-hist__b { fill: color-mix(in srgb, var(--g) 70%, transparent); transform-box: fill-box; transform-origin: bottom; animation: st-hoj 560ms var(--lk-ease) both; animation-delay: calc(var(--i, 0) * 14ms); transition: fill var(--lk-t) var(--lk-ease); }
.st-hist__b:hover { fill: var(--g); }
.st-hist__p { stroke: var(--sd-yta); stroke-width: 2; }
.st-graf--hist path[class^="st-graf__k"] { stroke-width: 2.5; }
@keyframes st-hoj { from { transform: scaleY(0); } }

/* verktyget: in-sidan en stilla förhandsvisning (inget att råka scrolla i), öppet hela fönstret som kartan.
   html:has() låser sidan bakom; view transition (st-bank) morfar kortet till helskärm. */
.st-bank { view-transition-name: st-bank; }
.st-oppna { display: inline-flex; align-items: center; gap: 8px; }
.st-oppna svg { width: 16px; height: 16px; }
.st-stang { display: none; }
.st-bank:not(.is-oppen) .st-yta { position: relative; max-height: 560px; overflow: hidden; cursor: pointer; -webkit-mask-image: linear-gradient(#000 50%, transparent 96%); mask-image: linear-gradient(#000 50%, transparent 96%); }
.st-bank:not(.is-oppen) .st-yta > * { pointer-events: none; }
.st-oppna--stor { position: relative; z-index: 2; display: flex; margin: -88px auto 0; padding: 14px 24px; border-radius: 999px; font-size: 15px; box-shadow: var(--sd-skugga), 0 0 0 1px var(--w-07); transition: transform var(--lk-t) var(--lk-ease); }
.st-oppna--stor:hover { transform: translateY(-2px) scale(1.02); }
.st-bank:not(.is-oppen) .st-valbar { display: none; }
html:has(.st-bank.is-oppen) { overflow: hidden; }
/* öppet verktyg = egen yta: sajtens meny, sektionskartan och sidfoten bort (visibility tar dem även ur tabbordning och skärmläsare) */
html:has(.st-bank.is-oppen) :is(.ny-hdr, .sida-karta, .ny-fot) { visibility: hidden; }
/* "body …" slår den platta layoutens .ny-panel + .ny-panel (marginal, padding, kantlinje), annars börjar verktyget 56 px ner */
.ny-main:has(.st-bank.is-oppen) { z-index: 1000; }   /* main (z 1) är stapelkontexten, annars ligger huvud och fot över */
body .ny-panel.st-bank.is-oppen { position: fixed; inset: 0; z-index: 1000; max-width: none; margin: 0; border-top: 0; display: flex; flex-direction: column; background: var(--sd-dag);
  padding: max(14px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.st-bank.is-oppen :is(.st-oppna, .ny-kicker, .st-bank__ingress) { display: none; }
.st-bank.is-oppen .ny-stat__topp { align-items: center; gap: 12px 18px; }
.st-bank.is-oppen #utforska-h { margin: 0; font-size: clamp(18px, 1.6vw, 22px); }
.st-bank.is-oppen .st-stang { display: inline-flex; order: 9; }
.st-bank.is-oppen .st-verktyg { margin-top: 12px; }
.st-bank.is-oppen .st-yta { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-bank.is-oppen .st-vy:not([hidden]) { flex: 1; min-height: 0; margin-top: 14px; padding: 2px 2px 84px; overflow: auto; overscroll-behavior: contain; }
.st-bank.is-oppen .st-vy[data-vy="tabell"]:not([hidden]) { display: flex; flex-direction: column; padding-bottom: 2px; overflow: hidden; }
.st-bank.is-oppen .st-tabell { flex: 1; min-height: 0; overscroll-behavior: contain; }
/* punkter och fördelning fyller hela ytan mellan kontrollraden och källraden; JS ritar i svg:ns mått */
.st-bank.is-oppen .st-vy:is([data-vy="punkter"], [data-vy="fordelning"]):not([hidden]) { display: flex; flex-direction: column; padding-bottom: 2px; }
.st-bank.is-oppen .st-vy .st-punkt { flex: 1 1 0; min-height: 320px; grid-template-rows: auto minmax(0, 1fr); }
.st-bank.is-oppen :is(.st-graf--punkt, .st-graf--hist) { height: 100%; min-height: 0; aspect-ratio: auto; max-height: none; }
.st-bank.is-oppen .st-mini:not(.st-mini--stor) .st-graf { height: clamp(120px, 24vh, 240px); }   /* trendens småbilder växer med fönsterhöjden */
.st-tyst :is(.st-pkt, .st-hist__b, .st-rit) { animation: none; } .st-tyst .st-punkt > svg { transition: none; }
.st-bank.is-oppen { --sd-yta: var(--sd-dag); }
.st-bank.is-oppen .st-tabell thead th { position: sticky; top: -8px; z-index: 2; background: var(--sd-yta); }
.st-bank.is-oppen .st-tabell thead :is(.st-lasth, .st-stj) { z-index: 3; }
.st-bank.is-oppen .ny-stat__kallor { margin-top: 6px; font-size: 13px; }
::view-transition-group(st-bank) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.22, .8, .28, 1); }
::view-transition-old(st-bank), ::view-transition-new(st-bank) { height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 767px) {
  body .ny-panel.st-bank.is-oppen { padding-inline: max(12px, env(safe-area-inset-left)); }
  /* telefon: r/R² och skalan på var sin rad, diagrammet minst 60 % av skärmhöjden */
  .st-punkt { grid-template-columns: minmax(0, 1fr); }
  .st-punkt > .st-skala { grid-row: 2; grid-column: 1; } .st-punkt > svg { grid-row: 3; }
  .st-bank.is-oppen .st-vy .st-punkt { min-height: 60vh; grid-template-rows: auto auto minmax(0, 1fr); }
  .st-bank.is-oppen .ny-stat__topp > div:first-child { flex: 1; }
  .st-bank.is-oppen .st-stang { order: 1; } .st-bank.is-oppen .st-lage { order: 2; } .st-bank .st-niva { order: 3; margin-right: auto; }
  /* fem lägen får inte plats: bara det valda bär text, resten ikon (namnet finns kvar för skärmläsare) */
  .st-lage .ny-seg__a:not([aria-pressed="true"]) { flex: 0 0 44px; padding-inline: 0; }
  .st-lage .ny-seg__a:not([aria-pressed="true"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* jämför två: namn · A · spår · B i ett subgrid; spåret = andel områden under värdet, medianen mitt i */
.st-direkt { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; }
.st-direkt svg { width: 16px; height: 16px; }
.st-ab__val .sida-kat-in { flex: 1 1 220px; max-width: 340px; }
.st-ab__val input { flex: 1; font-weight: 600; color: var(--fg-1); }
.st-ab { display: grid; gap: 12px; }
.st-ab__topp { flex-wrap: wrap; justify-content: flex-start; gap: 6px 12px; align-items: baseline; }
.st-ab__namn { font: 600 clamp(17px, 1.6vw, 21px)/1.2 var(--font-ui); color: var(--fg-1); }
.st-ab__namn a { color: inherit; text-decoration: none; } .st-ab__namn a:hover { text-decoration: underline; }
.st-ab__poang { margin-left: auto; }
.st-ab__lista { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(90px, 2fr) auto; column-gap: 16px; }
.st-ab__lista .st-ab__skala { padding: 10px 0 4px; border: 0; font-size: 13px; }
.st-ab__skala > span:nth-child(3) { display: flex; justify-content: space-between; }
.st-ab__rad { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 9px 0; border-top: 1px solid var(--w-05); font: 500 13.5px/1.25 var(--font-ui); font-variant-numeric: tabular-nums; }
.st-ab__n { color: var(--fg-3); min-width: 0; }
.st-ab__v { text-align: right; color: var(--fg-5); min-width: 6ch; }
.st-ab__v--2 { text-align: left; }
.st-ab__v.is-bast { color: var(--fg-1); font-weight: 700; }
.st-ab__s { position: relative; height: 18px; }
.st-ab__s::before { content: ''; position: absolute; inset: 8px 0; border-radius: 2px; background: var(--w-07); }
.st-ab__s::after { content: ''; position: absolute; left: 50%; inset-block: 3px; border-left: 1px dashed var(--fg-6); }
.st-ab__p { position: absolute; z-index: 1; top: 50%; left: var(--x); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sd-yta); transition: left 420ms var(--lk-ease); }
.st-ab__p--1 { background: var(--st-k1); } .st-ab__p--2 { background: var(--st-k2); }
.st-ab__grupp { padding: 0 20px; }
.st-ab__grupp > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; }
.st-ab__grupp > summary::-webkit-details-marker { display: none; }
.st-ab__grupp > summary .ny-meta { margin-left: auto; }
.st-ab__grupp > summary svg { width: 16px; height: 16px; transition: transform var(--lk-t) var(--lk-ease); }
.st-ab__grupp[open] > summary svg { transform: rotate(180deg); }
.st-ab__grupp .st-ab__lista { padding-bottom: 12px; }
@media (max-width: 767px) {
  .st-direkt { align-self: auto; }
  .st-ab__lista { grid-template-columns: auto minmax(60px, 1fr) auto; column-gap: 10px; }
  .st-ab__n { grid-column: 1 / -1; margin-bottom: 4px; }
  .st-ab__skala > span:nth-child(-n+2) { display: none; } .st-ab__skala > span:nth-child(3) { grid-column: 2; }
  .st-ab__grupp { padding: 0 14px; }
  .st-ab__val { flex-wrap: nowrap; align-items: center; gap: 6px; } .st-ab__val .sida-kat-in { flex: 1 1 0; min-width: 0; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .st-rit, .st-pkt, .st-stapl__s i, .st-hist__b, .st-ab__p { animation: none; } .st-tabell tbody, .st-punkt > svg, .st-mini-grid { transition: none; } }
/* §17h lista: alla 290 kommuner rangordnade (sida-lista.js, förrenderad av bygg_sidor.mjs). Raderna ligger utanför layouten tills de
   närmar sig (content-visibility), staplarna bär husrampen (--f, samma som labbkartan). Tre vyer: rader · rutnät (kort + sparklinje) · kompakt. */
.sl-verktyg:not(.sl-redo) > * { pointer-events: none; }
.sl-niva { display: inline-flex; margin: 14px 0 2px; }   /* vad listan listar: län, kommuner, RegSO, DeSO (sida-lista.js) */
/* Egen viktning i Listan: reglage per sak, byggs av sida-lista.js */
/* Snabbvalen satt klistrade mot verktygsraden (0 px): samma luft som list-active-filters. Ikon-chipet lika högt som de andra. */
.sl-snabbval { margin-top: 14px; }
.sl-snabbval .ny-chip { height: 28px; padding: 0 13px; }
.sl-snabbval .ny-chip svg { width: 13px; height: 13px; }
.sl-vikt { margin: 14px 0 0; padding: 18px 22px 20px; }
.sl-vikt[hidden] { display: none; } /* .ny-kort sätter display: den dolda viktpanelen syntes 97 px tills lab.js fyllde och dolde den (CLS 0,08 på /lista) */
.sl-vikt > .ny-meta { margin: 0 0 12px; }
.sl-vikt__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 24px; }
.sl-vikt__rad { display: grid; gap: 4px; font: var(--type-meta); color: var(--fg-2); }
.sl-vikt__rad input { width: 100%; accent-color: var(--accent); }
.sl-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 4px; font: var(--type-meta); color: var(--fg-6); }
.sl-status b { color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sl-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.sl-rad { content-visibility: auto; contain-intrinsic-size: auto 54px; }
.sl-lista:not(.sl-igang) .sl-rad { animation: sida-upp 620ms var(--lk-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sl-lista { transition: opacity 180ms var(--lk-ease); }
.sl-lista.sl-laddar { opacity: .4; pointer-events: none; }   /* nivåbytet hämtar nästa nivå (sida-lista.js) */
.sl-rad > a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(70px, 30%) 8.5em; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color var(--lk-t) var(--lk-ease), box-shadow var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.sl-rad > a:hover { background: var(--w-05); }
.sl-rad__n { font-variant-numeric: tabular-nums; color: var(--fg-7); text-align: right; font-size: 13px; }
.sl-rad__namn { min-width: 0; font-weight: 600; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-rad__namn small { display: block; font: var(--type-meta); font-weight: 400; color: var(--fg-7); overflow: hidden; text-overflow: ellipsis; }
.sl-stapel { height: 6px; border-radius: 6px; background: color-mix(in oklab, var(--fg-9) 22%, transparent); overflow: hidden; }
.sl-stapel > i { display: block; height: 100%; border-radius: inherit; background: color-mix(in oklab, var(--f) var(--stapel-andel), var(--stapel-mot)); transform-origin: left; transition: transform 620ms var(--lk-ease), background-color 620ms var(--lk-ease); }
.sl-rad__v { font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-2); white-space: nowrap; transition: opacity var(--lk-t) var(--lk-ease); }
/* nytt nyckeltal på väg: värden och staplar dimmas (skelettläget), korsfadar tillbaka när kolumnfilen kommit */
.sl-laddar :is(.sl-rad__v, .sl-stapel, .sl-rad__n) { opacity: .3; }
.sl-stapel, .sl-rad__n { transition: opacity var(--lk-t) var(--lk-ease); }
.sl-inget { display: none; margin: 28px 0; color: var(--fg-6); text-align: center; }
.sl-tom + .sl-inget { display: block; animation: sida-upp 420ms var(--lk-ease) both; }
.sl-fler-rad { margin: 18px 0 0; text-align: center; }
.sl-fler-rad:has(> [hidden]) { display: none; }
.sl-namnlista .sl-stapel { display: none; }   /* föreningar: inget värde att stapla, kategorin tar stapelns plats */
.sl-namnlista:not([data-vy="rutnat"]) .sl-rad__v { grid-column: 3 / -1; }
.sl-kalla { margin-top: 26px; }
.sl-spark { display: block; width: 100%; height: 34px; overflow: visible; animation: sida-upp 520ms var(--lk-ease) both; }
.sl-spark polyline { fill: none; stroke: var(--fg-6); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* rutnät: kort med rang, namn, värde, stapel och sparklinje */
.sl-lista[data-vy="rutnat"] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sl-lista[data-vy="rutnat"] .sl-rad { contain-intrinsic-size: auto 170px; }
.sl-lista[data-vy="rutnat"] .sl-rad > a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "namn n" "v v" "stapel stapel" "spark spark"; gap: 8px; padding: 16px 16px 14px; background: var(--sd-kort); box-shadow: var(--sd-skugga); border-radius: 18px; }
.sl-lista[data-vy="rutnat"] .sl-rad > a:hover { transform: translateY(-3px); box-shadow: var(--sd-skugga-upp); }
.sl-lista[data-vy="rutnat"] .sl-rad__n { grid-area: n; align-self: start; }
.sl-lista[data-vy="rutnat"] .sl-rad__namn { grid-area: namn; }
.sl-lista[data-vy="rutnat"] .sl-rad__v { grid-area: v; text-align: left; font-size: 22px; font-weight: 600; color: var(--fg-1); }
.sl-lista[data-vy="rutnat"] .sl-stapel { grid-area: stapel; }
.sl-lista[data-vy="rutnat"] .sl-spark { grid-area: spark; }
/* kompakt: namn och värde i spalter, som ett register */
.sl-lista[data-vy="kompakt"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 22px; gap: 0 22px; }
.sl-lista[data-vy="kompakt"] .sl-rad { contain-intrinsic-size: auto 32px; }
.sl-lista[data-vy="kompakt"] .sl-rad > a { grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 10px; padding: 5px 8px; border-radius: 10px; }
.sl-lista[data-vy="kompakt"] :is(.sl-stapel, .sl-rad__namn small) { display: none; }
.sl-lista[data-vy="kompakt"] .sl-rad__namn { font-weight: 500; }
@media (max-width: 767px) {
  .sl-rad > a { grid-template-columns: 2.2em minmax(0, 1fr) auto; grid-template-areas: "n namn v" ". stapel stapel"; row-gap: 6px; padding: 10px 8px; }
  .sl-rad__n { grid-area: n; } .sl-rad__namn { grid-area: namn; } .sl-rad__v { grid-area: v; } .sl-stapel { grid-area: stapel; }
  .sl-rad { contain-intrinsic-size: auto 70px; }
  .sl-lista[data-vy="rutnat"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sl-lista[data-vy="rutnat"] .sl-rad__v { font-size: 18px; }
  .sl-lista[data-vy="kompakt"] .sl-rad > a { grid-template-areas: none; }
  .sl-lista[data-vy="kompakt"] :is(.sl-rad__n, .sl-rad__namn, .sl-rad__v) { grid-area: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-rad, .sl-spark, .sl-tom + .sl-inget { animation: none !important; }
  .sl-stapel > i { transition: none; }
}

/* ── Platshållarna (bild, diagram, minikarta) syns aldrig på sajten: en grå ruta med "minikarta: …" i prod
   ser trasig ut. Figuren med sin bildtext går också; den riktiga grafiken ersätter platshållaren i mallen. (2026-10-12) ── */
.lab-ph--bild, .lab-ph--rund, .sida-figur:has(> .lab-ph--bild) { display: none !important; }

/* sidnav med många flikar (juridik, kommunsidor): raden scrollar redan i sidled men utan ledtråd; tonade kanter visar att det finns mer */
.ny-snav > .ny-snav__rad:has(> :nth-child(9)) { mask-image: linear-gradient(90deg, #000, #000 calc(100% - 32px), transparent); }
@media (min-width: 768px) { .ny-snav > .ny-snav__rad:has(> :nth-child(9)) .ny-snav__a .ny-i { display: none; } } /* ord räcker när flikarna är många, ger plats åt fler */
/* sex kort i auto-fit blev 4 + 2 på PC; tre kolumner ger två jämna rader */
@media (min-width: 900px) { .ny-kort-grid.sida-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* §17i /api (text.html?s=api): planerna och exempelanropen */
.sida-api-lista { margin: 12px 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--fg-3); font-size: 14px; }
.sida-api-lista li { padding-left: 18px; position: relative; }
.sida-api-lista li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--a-4); }
.sida-kod { margin: 14px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--w-06); overflow-x: auto; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg-2); }

/* §17j /statsbudget (tabell.html?s=statsbudget, statsbudget.js): områdeslistan som <details>, stapel = andel av största raden */
/* /statsbudget: kort rubrikrad, tät tabell (en rad ≈ 40 px) + ringen per grupp bredvid (ovanför på telefon och iPad).
   Gruppfärgerna = Okabe-Ito ur docs/NYTT_KARTLAGER.md §0.5 (gult byts mot grått: syns inte på ljust papper),
   samma [data-g] i tabellen, ringen och tidsdiagrammet. Brickorna: PuOr (färgblindsäkert) + tecken + pil. */
[data-g="valfard"] { --g: #56b4e9; } [data-g="kommun"] { --g: #e69f00; } [data-g="forsvar"] { --g: #d55e00; }
[data-g="utb"] { --g: #009e73; } [data-g="infra"] { --g: #0072b2; } [data-g="eu"] { --g: #cc79a7; } [data-g="ovr"] { --g: var(--fg-8); }
.sb-topp { display: grid; gap: 6px; }
.sb-h1 { margin: 0; font: 600 clamp(26px, 2.8vw, 34px)/1.15 var(--font-display); color: var(--fg-1); }
.sb-ingress.sida-svar { margin: 0; max-width: 90ch; font-size: 15px; color: var(--fg-4); }
.ny-panel.sb-panel { margin-top: 16px; }
.sb-panel > .sb-verktyg { margin-top: 0; }
.sb-verktyg { flex-wrap: wrap; align-items: center; }
.sb-verktyg + .sb-graf { margin-top: 18px; }
/* Egen chevron: den inbyggda sitter mot kanten. Ritad med currentColor, följer temat. */
.sb-verktyg select.list-sort, .sv-jmf select.list-sort { flex: 0 1 auto; width: auto; field-sizing: content; max-width: 100%; -webkit-appearance: none; appearance: none; padding: 0 36px 0 14px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 19px center, right 14px center; background-size: 5px 5px; background-repeat: no-repeat; }
.sb-val { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.35 var(--font-ui); color: var(--fg-5); }
.sb-tilltid { margin-left: auto; font: 500 14px/1.35 var(--font-ui); color: var(--fg-3); }
.sb-yta { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 1000px) {
  .sb-yta { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .sb-oversikt { grid-column: 2; grid-row: 1; position: sticky; top: 80px; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--w-10); }
}
.sb-oversikt { padding: 20px 0 0; display: grid; gap: 14px; }
.sb-ov-h { margin: 0; font: 600 14px/1.3 var(--font-ui); color: var(--fg-2); }
.sb-ring { position: relative; width: min(100%, 220px); justify-self: center; }
.sb-ring svg { display: block; width: 100%; height: auto; }
.sb-bit { fill: none; stroke: var(--g); stroke-width: 30; }
.sb-ring__mitt { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; font: 400 13px/1.3 var(--font-ui); color: var(--fg-5); }
.sb-ring__mitt b { font: 600 28px/1.1 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sb-grupper, .sb-leg { list-style: none; margin: 0; padding: 0; }
.sb-grupper { display: grid; gap: 6px; }
.sb-grupper li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; column-gap: 8px; align-items: center; font: 400 13px/1.35 var(--font-ui); color: var(--fg-3); }
.sb-g-v, .sb-g-a { text-align: right; font-variant-numeric: tabular-nums; }
.sb-g-v { color: var(--fg-1); font-weight: 600; }
.sb-g-a { color: var(--fg-5); }
.sb-prick { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.sb-ov-fot { margin: 0; font: 400 13px/1.5 var(--font-ui); color: var(--fg-5); }
.sb-rubrik, .sb-sum { display: grid; grid-template-columns: 22px 10px minmax(0, 1fr) 96px 60px 52px 84px 12px; column-gap: 10px; align-items: center; }
.sb-rubrik { padding: 0 12px 8px; border-bottom: 1px solid var(--w-08); font: 500 13px/1.3 var(--font-ui); color: var(--fg-5); }
.sb-rubrik > span:nth-child(2), .sb-rubrik > span:nth-child(3) { grid-column: 2 / 4; grid-row: 1; }
.sb-rubrik > span:nth-child(n+5), .sb-v, .sb-andel { text-align: right; font-variant-numeric: tabular-nums; }
.sb-rubrik > span:last-child { grid-column: 7 / 9; }
.sb-lista { display: grid; }
.sb-rad { border-bottom: 1px solid var(--w-08); }
.sb-sum { min-height: 40px; padding: 4px 12px; font: 400 14px/1.3 var(--font-ui); list-style: none; }
summary.sb-sum { cursor: pointer; border-radius: 8px; }
summary.sb-sum::-webkit-details-marker { display: none; }
summary.sb-sum::after { content: "+"; grid-column: 8; color: var(--fg-6); text-align: center; transition: transform var(--lk-t) var(--lk-ease); }
.sb-rad[open] summary.sb-sum::after { transform: rotate(45deg); }
summary.sb-sum:hover { background: var(--w-06); }
.sb-nr { color: var(--fg-5); font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-namn { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-v { color: var(--fg-1); font-weight: 600; }
.sb-andel { color: var(--fg-4); }
.sb-stapel { height: 6px; border-radius: 3px; background: var(--w-06); overflow: hidden; }
.sb-stapel i { display: block; height: 100%; background: var(--g); transform-origin: left; transform: scaleX(var(--b, 0)); transition: transform 220ms var(--lk-ease); }
.sb-bricka { justify-self: end; display: inline-flex; gap: 3px; padding: 2px 8px; border-radius: 999px; font: 500 13px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-1); }
.sb-bricka--upp { background: color-mix(in oklab, #e66101 28%, transparent); }
.sb-bricka--ned { background: color-mix(in oklab, #8073ac 38%, transparent); }
.sb-bricka--noll { background: var(--w-06); }
.sb-ov-fot .sb-bricka { display: inline-flex; vertical-align: baseline; }
.sb-inne { padding: 4px 12px 14px; }
.sb-fotnot.ny-fotnot { margin-top: 14px; font: 400 13px/1.5 var(--font-ui); color: var(--fg-5); }
.sb-anslag th:not(:first-child), .sb-anslag td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-tid { margin-top: 12px; }
.sb-graf { margin: 0; padding: 24px 0 0; }
.sb-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.sb-graf-txt { margin-top: 10px; font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sb-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.sb-leg li { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1.35 var(--font-ui); color: var(--fg-3); }
.sb-grid { stroke: var(--w-08); stroke-width: 1; }
.sb-ax { fill: var(--fg-5); font: 13px var(--font-ui); font-variant-numeric: tabular-nums; }
.sb-yt { fill: var(--g); fill-opacity: .85; stroke: var(--sd-yta); stroke-width: .75; }
.sb-yt--en { fill-opacity: .22; stroke: none; }
.sb-linje { fill: none; stroke: var(--g, var(--fg-3)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sb-brott { stroke: var(--fg-5); stroke-width: 1; stroke-dasharray: 4 4; }
.sb-linje--prog { stroke-dasharray: 5 4; }
.sb-prog { font-style: italic; }
.sb-linje[data-streck] { stroke: var(--fg-5); stroke-width: 1.5; stroke-dasharray: 6 5; }
.sb-pk { fill: var(--fg-1); stroke: var(--sd-yta); stroke-width: 2; }
.sb-pk--b { fill: var(--sd-yta); stroke: var(--fg-4); stroke-width: 2; }
.sb-kallor { display: grid; gap: 8px; padding-left: 18px; }
@media (max-width: 767px) {
  /* Fyra mått får inte plats på 375 px: segmentet scrollar i sidled i stället för att klippas. */
  .sb-verktyg .ny-seg { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .sb-rubrik, .sb-sum { grid-template-columns: 10px minmax(0, 1fr) 52px 82px 12px; column-gap: 8px; padding-inline: 4px; }
  .sb-nr, .sb-stapel, .sb-andel, .sb-rubrik > span:is(:nth-child(1), :nth-child(4), :nth-child(6)) { display: none; }
  .sb-rubrik > span:nth-child(2), .sb-rubrik > span:nth-child(3) { grid-column: 1 / 3; }
  .sb-rubrik > span:last-child { grid-column: 4 / 6; }
  summary.sb-sum::after { grid-column: 5; }
  .sb-sum { font-size: 14px; }
  .sb-tilltid { margin-left: 0; }
  .sb-graf { padding: 16px 0 0; }
}
/* /statsbudget i fem kapitel (2026-10-25): kapitelrubrik + ingress, fördjupningar fällda (details.sb-djup), väljarna = combobox (sb-val.js) */
.sb-kap { margin-top: clamp(48px, 6vw, 72px); }
.sb-kap[id] { scroll-margin-top: 120px; }
.sb-kap__topp { display: grid; gap: 8px; padding-bottom: 8px; }
.sb-kap__h { margin: 0; font: 600 clamp(28px, 3.4vw, 42px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; }
.sb-kap__in { margin: 0; max-width: 65ch; font: 400 16px/1.5 var(--font-ui); color: var(--fg-5); }
.sb-djup { margin-top: 28px; border-radius: 14px; box-shadow: var(--sd-kant); }
.sb-djup__s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 48px 16px 24px; position: relative; cursor: pointer; list-style: none; border-radius: 14px; }
.sb-djup__s::-webkit-details-marker { display: none; }
.sb-djup__s::after { content: ""; position: absolute; right: 24px; top: 22px; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); color: var(--fg-5); transition: transform var(--lk-t) var(--lk-ease); }
.sb-djup[open] > .sb-djup__s::after { transform: translateY(3px) rotate(-135deg); }
.sb-djup__s:hover { background: var(--sd-kort); }
.sb-djup__s:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--aw-42); }
.sb-djup__t { font: 600 15px/1.3 var(--font-ui); color: var(--fg-2); }
.sb-djup__vad { font: 400 13px/1.4 var(--font-ui); color: var(--fg-6); }
.sb-djup[open] { padding: 0 24px 24px; }
.sb-djup[open] > .sb-djup__s { margin: 0 -24px; }
.sb-kombo { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.sb-kombo__falt { position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: var(--sd-kort); box-shadow: var(--sd-kant); transition: box-shadow var(--lk-t) var(--lk-ease); }
.sb-kombo__falt:hover { box-shadow: var(--sd-kant-upp); }
.sb-kombo__falt:focus-within { box-shadow: var(--sd-kant), 0 0 0 2px var(--aw-42), 0 0 0 6px var(--aw-12); }
.sb-kombo__in { min-width: 6ch; max-width: 100%; height: 100%; padding: 0 34px 0 14px; border: 0; background: none; color: var(--fg-2); font: 500 14px/1 var(--font-ui); outline: 0; text-overflow: ellipsis; }
.sb-kombo__pil { position: absolute; right: 12px; display: flex; color: var(--fg-5); pointer-events: none; }
.sb-kombo__steg { display: none; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fg-4); cursor: pointer; }
.sb-kombo--ar .sb-kombo__steg { display: grid; }
.sb-kombo__steg:hover:not(:disabled) { background: var(--sd-kort); color: var(--fg-1); }
.sb-kombo__steg:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--aw-42); }
.sb-kombo__steg:disabled { opacity: .35; cursor: default; }
.sb-kombo__lb { position: absolute; z-index: 25; top: calc(100% + 6px); left: 0; min-width: max(100%, 220px); max-width: min(360px, calc(100vw - 32px)); max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--sd-kort); box-shadow: var(--sd-skugga), 0 0 0 1px var(--w-07); overscroll-behavior: contain; }
.sb-kombo__lb li { padding: 8px 12px; border-radius: 9px; font: 400 14px/1.3 var(--font-ui); color: var(--fg-3); cursor: pointer; }
.sb-kombo__lb li.is-akt { background: var(--aw-12); color: var(--fg-1); }
.sb-kombo__lb li[aria-selected="true"] { color: var(--sd-ang-txt, var(--sd-ang)); font-weight: 600; }
.sb-kombo__lb mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sb-kombo__lb .sb-kombo__tom { color: var(--fg-6); cursor: default; }
@media (max-width: 767px) {
  .sb-djup__s { padding: 14px 40px 14px 16px; }
  .sb-djup__s::after { right: 16px; }
  .sb-djup[open] { padding: 0 16px 16px; }
  .sb-djup[open] > .sb-djup__s { margin: 0 -16px; }
  .sb-kombo__falt { height: 44px; }
  .sb-kombo__in { font-size: 16px; }   /* iOS zoomar in fält under 16 px */
}

/* §17j2 /statsbudget djupdykningen (statsbudget-mer.js): överblick, myndigheter, inkomster, lönen, simulatorn, skuld, EU, bistånd, kommuner, Europa, lek.
   Enkla listor = namn | stapel | värde; färger ur samma [data-g] (Okabe-Ito), lönens delar i [data-d]. */
.sb-lista--enkel { --g: #0072b2; }
.sb-lista--enkel .sb-sum { grid-template-columns: minmax(0, 1fr) minmax(60px, 34%) 84px 12px; min-height: 34px; }
.sb-lista--enkel .sb-rad:not(details) .sb-sum { grid-template-columns: minmax(0, 1fr) minmax(60px, 34%) 84px; }
.sb-lista--enkel summary.sb-sum::after { grid-column: 4; }
.sb-lista--enkel .sb-rad[data-mark] { --g: #e69f00; }
.sb-lista--enkel .sb-rad[data-mark] .sb-namn { font-weight: 600; }
.sb-ktab { margin-top: 12px; }
.sb-ktab tr[data-mark] > * { color: var(--fg-1); font-weight: 600; background: var(--w-045); }
.sb-lista--enkel .sb-rad[data-snitt] { --g: var(--fg-6); }
.sb-lista--enkel .sb-rad[data-tecken="neg"] { --g: #cc79a7; }
.sb-inne__h { margin: 0 0 4px; font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sb-h3 { margin: 28px 0 10px; font: 600 15px/1.3 var(--font-ui); color: var(--fg-2); }
.sb-tva { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 900px) { .sb-tva { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.sb-tva .sb-h3 { margin-top: 0; }
.sb-sa { margin-top: 14px; font: 400 13px/1.55 var(--font-ui); color: var(--fg-5); }
.sb-sa summary { cursor: pointer; width: fit-content; font-weight: 500; color: var(--fg-3); }
.sb-sa p { max-width: 90ch; margin: 8px 0 0; }
.sb-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 0; }
.sb-kpi__k { margin: 0; padding: 16px; display: grid; gap: 4px; align-content: start; }
.sb-kpi__k > * { margin: 0; }
.sb-kpi__v { font: 600 28px/1.1 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sb-kpi__u { font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sb-per { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 12px; margin-top: 14px; }
.sb-per p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sb-per p > span:first-child { flex-basis: 100%; }
.sb-per b, .sb-sim b, .sb-lek b, .sb-lon b, .sb-fsim b, .sb-kort b { color: var(--fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-per b { font-size: 18px; }
.sb-sok { height: 36px; min-width: 200px; padding: 0 12px; border: 1px solid var(--w-10); border-radius: 999px; background: var(--w-045); font: 400 14px var(--font-ui); color: var(--fg-1); }
.sb-st { fill: var(--g, var(--fg-6)); fill-opacity: .55; }
.sb-st--mark { fill-opacity: 1; }
.sb-lon { margin-top: 16px; padding: 18px; display: grid; gap: 12px; }
.sb-lon__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 400 14px/1.4 var(--font-ui); color: var(--fg-4); }
.sb-lon__val output { font: 600 28px/1.1 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sb-lon input[type="range"], .sb-reg input[type="range"] { width: 100%; accent-color: #0072b2; }
.sb-delstapel { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--w-06); }
.sb-delstapel i { flex: 0 1 0; min-width: 0; background: var(--d); transition: flex-grow 220ms var(--lk-ease); }
[data-d="netto"] { --d: #009e73; } [data-d="kommunal"] { --d: #e69f00; } [data-d="statlig"] { --d: #0072b2; } [data-d="agavg"] { --d: #56b4e9; } [data-d="moms"] { --d: #cc79a7; }
.sb-leg--lon li .sb-prick { background: var(--d); }
.sb-lon__sum { margin: 0; font: 400 14px/1.5 var(--font-ui); color: var(--fg-4); }
.sb-kort3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sb-kort { margin: 0; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.sb-kort > p { margin: 0; }
.sb-kort__v { font: 400 13px/1.3 var(--font-ui); color: var(--fg-5); }
.sb-kort__v b { font-size: 24px; }
.sb-kort__t, .sb-kort__pe { font: 400 13px/1.45 var(--font-ui); color: var(--fg-4); }
.sb-egen { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--w-06); font: 500 12px/1.6 var(--font-ui); color: var(--fg-4); }
.sb-sim { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .sb-sim { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .sb-sim__ut { position: sticky; top: 80px; } }
.sb-sim__reglage { display: grid; gap: 14px; }
.sb-reg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; row-gap: 4px; font: 400 14px/1.35 var(--font-ui); color: var(--fg-3); }
.sb-reg input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
.sb-reg output { font: 600 15px var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sb-reg small { font-size: 13px; color: var(--fg-5); }
.sb-reg--knapp { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.sb-reg--knapp input { width: 20px; height: 20px; accent-color: #0072b2; }
.sb-sim__reglage > .ny-btn { justify-self: start; }
.sb-utg { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--w-08); }
.sb-utg .sb-verktyg { margin: 0; }
.sb-atg { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--w-08); display: grid; gap: 12px; min-width: 0; }
.sb-atg legend { padding: 0; margin: 0; }
.sb-atg__txt { margin: 0; font: 400 13px/1.5 var(--font-ui); color: var(--fg-5); }
.sb-atg .sb-reg--knapp { grid-template-columns: minmax(0, 1fr) auto auto; }
.sb-atg .sb-reg--knapp small { grid-column: 1 / -1; }
.sb-sim__ut { margin: 0; padding: 16px; display: grid; gap: 8px; }
.sb-sim__ut .sb-bricka { justify-self: start; }
.sb-sim__rad { margin: 0; display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.4 var(--font-ui); color: var(--fg-4); }
.sb-sim__rad--stor { padding: 8px 0; border-block: 1px solid var(--w-08); }
.sb-sim__rad--stor b { font-size: 24px; }
.sb-sim__poster { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sb-sim__poster li { display: flex; justify-content: space-between; gap: 12px; }
.sb-sim__poster b { color: var(--fg-3); }
.sb-sim__fullt { font-style: italic; }
.sb-sim__lank { margin: 0; font: 400 12px/1.4 var(--font-ui); color: var(--fg-6); }
.sb-fsim { margin-top: 16px; padding: 16px; display: grid; gap: 12px; }
.sb-fsim .sb-h3 { margin: 0; }
.sb-fsim .sb-reg { min-width: 220px; }
.sb-fsim__ut { margin: 0; font: 400 15px/1.4 var(--font-ui); color: var(--fg-4); }
.sb-fsim__ut b { font-size: 22px; }
.sb-intervall { position: relative; height: 10px; border-radius: 5px; background: var(--w-06); }
.sb-intervall i { position: absolute; inset-block: 0; left: calc(var(--a, 0) * 100%); width: calc((var(--b, 0) - var(--a, 0)) * 100%); min-width: 6px; border-radius: 5px; background: #cc79a7; transition: left 220ms var(--lk-ease), width 220ms var(--lk-ease); }
.sb-cap { caption-side: top; text-align: left; padding: 0 0 8px; font: 600 14px/1.3 var(--font-ui); color: var(--fg-2); }
.sb-lankrad { margin: 12px 0 0; font: 500 14px var(--font-ui); }
.sb-lek { margin: 16px 0 0; padding: 16px; display: grid; gap: 8px; align-content: start; }
.sb-lek .sb-h3, .sb-lek .lab-txt { margin: 0; }
.sb-lek__rad { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 400 14px/1.4 var(--font-ui); color: var(--fg-4); }
.sb-lek__rad > span:first-child { flex: 1 1 200px; }
.sb-lek__rad b { font-size: 18px; }
.sb-tva > .sb-lek { margin-top: 0; }
@media (max-width: 767px) {
  .sb-lista--enkel .sb-sum { grid-template-columns: minmax(0, 1fr) 72px 12px; padding-inline: 4px; }
  .sb-lista--enkel .sb-rad:not(details) .sb-sum { grid-template-columns: minmax(0, 1fr) 72px; }
  .sb-lista--enkel summary.sb-sum::after { grid-column: 3; }
  .sb-kpi__v { font-size: 22px; }
  .sb-sok { min-width: 0; width: 100%; }
  .sb-kort3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sb-delstapel i, .sb-intervall i { transition: none; } }

/* ── 17k. /statistik i /statsbudgets språk: kort rubrikrad, 40 px-rader med tunn stapel, förändringsbrickor (.sb-bricka), samma kort ── */
.st-bank { --st-k4: #cc79a7; }
/* måttets grupp (grp() i sida-statistik.js): tabellens stapel, Staplar och Fördelning bär gruppens färg, som /statsbudget */
.st-g0 { --g: #0072b2; } .st-g1 { --g: #e69f00; } .st-g2 { --g: #009e73; } .st-g3 { --g: #cc79a7; } .st-g4 { --g: #56b4e9; } .st-g5 { --g: #d55e00; }
.st-mini__tal .sb-bricka { padding-block: 0; }
/* ljust: punkterna får en mörk kant så viridis gula ände syns mot vitt */
[data-theme="light"] .st-pkt:not(.is-fast) { stroke: rgba(27, 42, 36, .35); }   /* gult (#f0e442) försvann mot ljust tema; rosa är kvar i Okabe-Ito, NYTT_KARTLAGER §0.5 */
.ny-stat.ny-panel--forst > .ny-stat__topp { justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.ny-stat.ny-panel--forst > .ny-stat__topp > div:first-child { flex: 1 1 420px; }
.ny-stat.ny-panel--forst > .ny-stat__topp .ny-kicker { display: none; }   /* sökvägen ovanför säger redan "Statistik" */
.ny-stat.ny-panel--forst h1.ny-h2--serif { margin: 4px 0 0; max-width: none; font: 600 clamp(26px, 2.8vw, 34px)/1.15 var(--font-display); letter-spacing: 0; color: var(--fg-1); }
.ny-stat.ny-panel--forst > .ny-stat__ingress { margin-top: 6px; max-width: 90ch; font-size: 15px; color: var(--fg-4); }
.st-bank:not(.is-oppen) > .ny-stat__topp > div:first-child { flex: 1 1 0; min-width: 10em; }
.st-bank .st-bank__ingress { max-width: 90ch; }
.st-bank:not(.is-oppen) #utforska-h { max-width: none; font: 600 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: 0; }
.ny-stat .ny-stat__kpier { margin-top: 20px; }
.ny-stat .ny-stat__kpi { padding-block: 14px; gap: 6px; }
.ny-stat .ny-stat__kpi-varde { margin-top: 2px; font-size: 26px; line-height: 1.1; }
.ny-stat .ny-stat__kpi-delta.sb-bricka { align-self: flex-start; margin: 0; font-size: 13px; color: var(--fg-1); }
.ny-stat .ny-stat__kpi .ny-meta { margin: 0; }
.ny-stat :is(.ny-stat__mitt, .ny-stat__topplistor) > .ny-glas { padding-block: 18px 0; }
/* Växer snabbast: namn | stapel | värde på en rad */
.ny-stat .ny-stat__staplar { gap: 0; margin-top: 8px; }
.ny-stat .ny-stat__stapel { flex-direction: row; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--w-08); }
.ny-stat .ny-stat__stapel-rad { display: contents; }
.ny-stat .ny-stat__stapel-namn { order: 1; font: 400 14px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-stat .ny-stat__stapel .lab-stapel { order: 2; flex: 0 0 38%; height: 6px; border-radius: 3px; background: var(--w-06); }
.ny-stat .ny-stat__stapel-varde { order: 3; flex: 0 0 3.5em; text-align: right; font: 600 14px/1.3 var(--font-ui); color: var(--fg-1); }
/* Riket i korthet + topplistor: 40 px-rader, värde och enhet på samma rad, neutrala siffror */
.ny-stat .ny-stat__rad, .ny-stat .ny-stat__topprad { align-items: center; min-height: 40px; padding: 4px 0; border-top: 0; border-bottom: 1px solid var(--w-08); font: 400 14px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-stat .ny-stat__rad-namn { font: inherit; color: var(--fg-1); }
.ny-stat .ny-stat__rad-h { flex-direction: row; align-items: baseline; gap: 6px; }
.ny-stat .ny-stat__rad-varde, .ny-stat .ny-stat__topprad-varde { font: 600 14px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-stat .ny-stat__rad:last-child, .ny-stat .ny-stat__topprad:last-child, .ny-stat .ny-stat__stapel:last-child { border-bottom: 0; }
.ny-stat .ny-stat__topprader { margin-top: 8px; }
.ny-stat .ny-stat__not { margin-top: 12px; padding-top: 12px; }
/* arbetsbänkens tabell: 40 px-rader, tunn stapel i raden */
.st-tabell .lab-tabell__grid td, .st-tabell .lab-tabell__grid tbody th { height: 40px; padding-block: 4px; font-size: 14px; border-top: 0; border-bottom: 1px solid var(--w-08); }
.st-tabell .lab-tabell__grid td { color: var(--fg-1); }
.st-cstapel { bottom: 4px; height: 3px; opacity: .6; }
@media (max-width: 767px) {
  .ny-stat .ny-stat__stapel .lab-stapel { flex-basis: 28%; }
  .ny-stat .ny-stat__kpi-varde { font-size: 22px; }
}

/* ── 17l. platssidorna i /statsbudgets och /statistiks språk (body.sida-plats, build_skal_platser.py): kort rubrikrad,
   KPI-kort som .ny-stat__kpi, 40 px-rader med tunn stapel i gruppfärgen, .sb-bricka på talförändringar.
   Gruppfärg per ämne (Okabe-Ito, NYTT_KARTLAGER §0.5), samma ämne = samma färg på alla platstyper; övrigt = accenten. */
.sida-plats { --g: var(--a-4); }
.sida-plats #skola { --g: #009e73; }
.sida-plats #vard { --g: #56b4e9; }
.sida-plats :is(#narhet, #pendling, #resor, #sjoar, #platser) { --g: #0072b2; }
.sida-plats :is(#styre, #val) { --g: #e69f00; }
.sida-plats #bostad { --g: #cc79a7; }
.sida-plats #jobb { --g: #d55e00; }
.sida-plats #pengar { --g: #009e73; }
/* rubrikraden: fotot blir en låg banderoll, texten vänsterställd som .sb-h1 */
.sida-plats .sida-platshero--foto { min-height: min(34dvh, 300px); place-items: end start; place-content: end start; text-align: left; gap: 10px; padding: clamp(20px, 3vw, 32px); }
.sida-plats .lab-hero :is(h1, .sida-svar), .sida-plats .sida-platsmeta { text-align: left; }
.sida-plats .sida-platshero--foto::after { background: linear-gradient(to right, rgb(8 14 20 / .9), rgb(8 14 20 / .6) 60%, rgb(8 14 20 / .25)); }
.sida-plats .lab-hero h1 { font: 600 clamp(26px, 2.8vw, 34px)/1.15 var(--font-display); letter-spacing: 0; }
.sida-plats .lab-hero .sida-svar { max-width: 80ch; font-size: 15px; }
/* sektionsrubriker: samma storlek som "Alla 290 kommuner" på /statistik */
.sida-plats .ny-panel:not(.ny-panel--forst) { margin-top: clamp(36px, 4vw, 56px); }
.sida-plats .ny-panel :is(.ny-h2, .ny-h2--serif) { margin: 6px 0 0; max-width: none; font: 600 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: 0; color: var(--fg-1); }
.sida-plats .ny-panel > .ny-topp + *, .sida-plats .ny-panel > .ny-h2 + * { margin-top: 16px; }
.sida-plats :not(.lab-hero) > .sida-svar { margin-bottom: 16px; font-size: 15px; color: var(--fg-4); }
/* KPI-kort: som .ny-stat__kpi */
.sida-plats .ny-fakta { padding-block: 14px; display: flex; flex-direction: column; gap: 6px; }
.sida-plats .ny-fakta__varde { margin-top: 2px; font: 600 26px/1.1 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-plats .sida-ton, .sida-plats .sida-dl .sida-kalla { margin-top: 0; }
.sida-plats .sida-tal__v { font-size: clamp(26px, 2.6vw, 32px); }
.sida-plats .sida-kapitel .sida-tva { margin-top: 12px; }
.sida-plats .sida-kapitel .sida-dl, .sida-plats .sida-serier { margin-top: 16px; }
.sida-plats .sida-serie { padding-block: 18px; gap: 6px; }
.sida-plats .sida-serie__v { font-size: 26px; }
.sida-plats .sida-serie__d--bricka { display: flex; align-items: center; gap: 8px; color: var(--fg-5); }
.sida-plats .sida-serie__d--bricka .sb-bricka { justify-self: auto; }
/* diagrammen i gruppfärgen; jämförelsen (median, utpendling) neutral grå i stället för orange */
.sida-plats .sida-stapel rect, .sida-plats .sida-linje__p { fill: var(--g); }
.sida-plats .sida-linje__l { stroke: var(--g); }
.sida-plats .sida-linje__l--b { stroke: var(--fg-6); }
.sida-plats .sida-linje__p.sida-linje__l--b { fill: var(--fg-6); }
.sida-plats .sida-leg__sw { border-top-color: var(--g); }
.sida-plats .sida-leg__sw--b { border-top-color: var(--fg-6); }
/* raderna: 40 px, namn 14 px, värde 600, tunn linje under */
.sida-plats :is(.ny-rad, .ny-civil) { min-height: 40px; margin: 0; padding: 4px 0; align-items: center; border-top: 0; border-bottom: 1px solid var(--w-08); border-radius: 0; }
.sida-plats .ny-rad:hover { background: none; }
.sida-plats a.ny-rad:hover .ny-rad__namn { color: var(--a-4); }
.sida-plats .ny-rad__namn, .sida-plats .ny-rad__namn--sans, .sida-plats :is(.ny-index__namn, .ny-civil__namn) { font: 400 14px/1.3 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-plats :is(.ny-rad__varde, .ny-rad__varde--accent, .ny-index__varde) { font: 600 14px/1.3 var(--font-ui); color: var(--fg-1); }
.sida-plats .ny-rad__meta { font-size: 13px; color: var(--fg-5); }
.sida-plats .lab-rader.sida-ol { padding: 0; }
.sida-plats .lab-rader.sida-ol .ny-rad, .sida-plats .lab-rader > .ny-rad { padding-inline: 0; }
/* indexraderna: namn | stapel | värde på en rad, som "Växer snabbast" */
.sida-plats .ny-index-grid { gap: 0 32px; }
.sida-plats .ny-index { display: grid; grid-template-columns: minmax(0, 1fr) 38% 4.2em; align-items: center; column-gap: 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--w-08); }
.sida-plats .ny-index__rad { display: contents; }
.sida-plats .ny-index__varde { grid-column: 3; text-align: right; }
.sida-plats .ny-index .ny-stapel { grid-column: 2; grid-row: 1; margin: 0; }
.sida-plats .ny-civil__stapel { margin-top: 6px; }
.sida-plats :is(.ny-stapel, .sida-parti__s) { height: 6px; border-radius: 3px; background: var(--w-06); }
.sida-plats :is(.ny-stapel__fyll, .sida-parti__s i) { border-radius: 3px; background: var(--g); }
/* raderna står direkt på sidan (avkortningen 2026-10-22) */
.sida-plats :is(.ny-index-grid, .ny-under, .ny-omgivning > div, .ny-kolumner > div, .ny-befolkning__pyramid, .ny-befolkning__civil, .lab-rader) { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.sida-plats :is(.ny-tvaspalt, .ny-omgivning, .ny-kolumner) { gap: 16px; }
.sida-plats .ny-kolumner { margin-top: 16px; }
.sida-plats .ny-under .ny-h2--under { margin-top: 4px; font: 600 15px/1.3 var(--font-ui); color: var(--fg-2); }
.sida-plats .ny-under__rader { margin-top: 8px; }
.sida-plats :is(.ny-index-grid, .ny-omgivning, .ny-befolkning) { margin-top: 16px; }
.sida-plats .ny-kolumn__kicker { padding-bottom: 4px; }
.sida-plats :is(.ny-under__rader, .ny-omgivning > div, .ny-kolumner > div, .lab-rader) > :last-child { border-bottom: 0; }
.sida-plats .ny-profil__siffra { font: 600 26px/1.1 var(--font-ui); color: var(--fg-1); }
.sida-plats .ny-alder__bar { height: 8px; }
/* styrets listor: 40 px-rader */
.sida-plats :is(.sida-parti, .sida-milst, .sida-nyck) { gap: 0; }
.sida-plats :is(.sida-parti li, .sida-milst li, .sida-nyck div) { min-height: 40px; padding: 4px 0; align-items: center; border-bottom: 1px solid var(--w-08); font: 400 14px/1.3 var(--font-ui); color: var(--fg-1); }
.sida-plats :is(.sida-parti__v, .sida-nyck dd) { font-weight: 600; color: var(--fg-1); }
/* #pengar: ringen "av 100 kr" (en <circle> per skiva, länk till raden, :target markerar), raderna med långa namn */
.sida-ring { position: relative; width: min(100%, 200px); margin: 8px auto 4px; }
.sida-ring svg { display: block; width: 100%; height: auto; }
.sida-ring__bit { fill: none; stroke: var(--g); stroke-width: 7; transition: stroke-width .2s; }
.sida-ring a:is(:hover, :focus-visible) .sida-ring__bit { stroke-width: 9; }
.sida-ring__mitt { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; font: 400 12px/1.3 var(--font-ui); color: var(--fg-5); pointer-events: none; }
.sida-ring__mitt b { font: 600 18px/1.2 var(--font-ui); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sida-plats .sida-parti--namn li { grid-template-columns: minmax(0, 1fr) 28% 3.6em; scroll-margin-top: 30vh; }
.sida-plats .sida-parti li:target { background: var(--w-06); box-shadow: -8px 0 0 var(--w-06), 8px 0 0 var(--w-06); }
.sida-plats .sida-parti--proj li { grid-template-columns: minmax(0, 1fr) 22% 6.5em; }
.sida-plats .sida-parti--proj a { color: inherit; text-decoration: none; min-width: 0; }
.sida-plats .sida-parti--proj a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sida-plats .sida-parti--proj a:is(:hover, :focus-visible) span { text-decoration: underline; }
/* satsningarna ur årsredovisningen: egna ord, länk till sidan */
.sida-satsn { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font: var(--type-meta); }
.sida-satsn li { padding-left: 14px; position: relative; }
.sida-satsn li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.sida-satsn a { color: var(--fg-3); text-decoration: none; }
.sida-satsn a:is(:hover, :focus-visible) { text-decoration: underline; }
.sida-plats #pengar .sida-nyck dd .sb-bricka { display: inline-flex; margin-left: 6px; font-size: 12px; }
/* ortkorten: lägre, värdet som rad */
.sida-plats .ny-kort-grid:has(> .ny-ort) { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.sida-plats .ny-ort { padding: 12px 0; }
.sida-plats .ny-ort__namn { font: 600 15px/1.25 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-plats .ny-ort__inv { margin-top: 4px; font-size: 13px; color: var(--fg-5); }
.sida-plats .ny-ort__avstand { margin-top: 8px; font: 600 14px/1 var(--font-ui); color: var(--fg-1); }
@media (max-width: 767px) {
  .sida-plats .sida-platshero--foto { min-height: 0; padding: 20px; }
  .sida-plats :is(.ny-fakta__varde, .sida-serie__v) { font-size: 22px; }
  .sida-plats .ny-index { grid-template-columns: minmax(0, 1fr) 28% 4.2em; }
}
/* kapitlets årsdiagram: direkt på sidan bredvid texten; 440 px bredd håller 12 enheter ≥ 13 px */
.sida-plats .sida-figur.sida-stapel { justify-self: end; width: 100%; max-width: 440px; margin: 0; padding: 0; }
.sida-plats .sida-stapel .ny-fotnot { margin-top: 8px; color: var(--fg-5); }

/* ── 17m. datadelarna i /statistiks språk: /nyheter (bricka, takt-stapel), /quiz + /fordjupning (topplista med tunn stapel),
   /foreningar (kompakta kommunrader, kategoriprick i /kartas legendfärger, vy lista/kort), /om-projektet (KPI-kort som .ny-stat__kpi) ── */
/* nyheter: 40 px-rader; rörelsen som .sb-bricka, hämttakten som tunn stapel (log-skala: dagligen full, årsvis en stump) */
.ny-nyhet__sida .ny-stat__rad { align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; border-top: 0; border-bottom: 1px solid var(--w-08); font: 400 14px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-nyhet__sida .ny-nyhet__kallor > :last-child { border-bottom: 0; }
.ny-nyhet__sida .ny-stat__rad-namn { font: inherit; color: var(--fg-1); }
.ny-nyhet__sida .ny-nyhet__takt { font: 600 14px/1.3 var(--font-ui); color: var(--fg-1); }
.ny-nyhet__sida .ny-nyhet__takt.sb-bricka { font: 500 13px/1.4 var(--font-ui); }
.ny-nyhet__sida a.ny-stat__rad { text-decoration: none; }
.ny-nyhet__sida a.ny-stat__rad:hover .ny-stat__rad-namn { color: var(--a-4); }
.ny-nyhet__takter .lab-stapel { flex: 0 0 28%; height: 6px; border-radius: 3px; background: var(--w-06); }
.ny-nyhet__takter .ny-nyhet__takt { flex: 0 0 5.6em; }
/* quiz/fördjupning: topp 3 resp. 8 områden som rader i ett kort: plats | namn + skäl | stapel | % | länk */
.sida-flo-rader { display: grid; grid-template-columns: auto minmax(0, 1fr) 30% 4.6em auto; column-gap: 14px; row-gap: 0; }
.sida-flo-rader > .ny-kort { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "r t s v l" "r k k m l"; align-items: center; row-gap: 2px;
  padding: 10px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--w-08); transform: none; }
.sida-flo-rader > .ny-kort:last-child { border-bottom: 0; }
.sida-flo-rader > a.ny-kort:hover { background: none; box-shadow: none; transform: none; }
.sida-flo-rader > a.ny-kort:hover .ny-kort__titel { color: var(--a-4); }
.sida-flo-rader :is(.ny-kicker, .lab-rad__n) { grid-area: r; margin: 0; font: 500 13px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--fg-5); }
.sida-flo-rader .ny-kort__titel { grid-area: t; margin: 0; font: 600 15px/1.3 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-flo-rader .lab-stapel { grid-area: s; height: 6px; border-radius: 3px; background: var(--w-06); }
.sida-flo-rader .ny-siffra { grid-area: v; text-align: right; font: 600 14px/1.3 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-flo-rader .lab-txt { grid-area: m; margin: 0; text-align: right; font: 400 12px/1.3 var(--font-ui); color: var(--fg-5); }
.sida-flo-rader .sida-flo-skal { grid-area: k; display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--font-ui); color: var(--fg-5); }
.sida-flo-rader :is(.ny-btn, .sida-flo-lank) { grid-area: l; justify-self: end; margin: 0; }
.sida-flo-rader .ny-btn { padding: 8px 14px; }
@media (max-width: 767px) {
  .sida-flo-rader { grid-template-columns: auto minmax(0, 1fr) 28% 4.2em; column-gap: 12px; }
  .sida-flo-rader > .ny-kort { grid-template-areas: "r t t v" "r s s m" "r k k k" "r l l l"; row-gap: 6px; }
  .sida-flo-rader :is(.ny-btn, .sida-flo-lank) { justify-self: start; }
}
/* föreningar: en markup, vyn lista (standard) = 40 px-rader i ett kort, vyn kort = gamla korten. Prick per kategori:
   samma färg som /kartas föreningslegend (karta.js), övriga ur Okabe-Ito (NYTT_KARTLAGER §0.5); texten bär alltid kategorin (9 st > 8) */
.sida-kat-tagg[data-k] { display: inline-flex; align-items: center; gap: 6px; }
.sida-kat-tagg[data-k]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, #b0b4ba); }
[data-k="idrott"] { --k: #0072b2; } [data-k="kultur"] { --k: #cc79a7; } [data-k="religion"] { --k: #e69f00; } [data-k="hembygd"] { --k: #009e73; }
[data-k="friluft"] { --k: #56b4e9; } [data-k="social"] { --k: #d55e00; }
.sida-kat-fl .lab-stapel { height: 6px; border-radius: 3px; background: var(--w-06); }
.sida-kat-fl .lab-stapel > i { transform: none; transition: none; }   /* raderna ritas efter reveal-observern */
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .ny-kort-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 18% auto; column-gap: 16px; row-gap: 0; }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "n t s v"; align-items: center;
  min-height: 40px; padding: 4px 0; border-radius: 0; background: none; box-shadow: none; transform: none; border-bottom: 1px solid var(--w-08); content-visibility: visible; }   /* containment stänger av subgrid; listan är högst 40 rader per sida */
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .ny-kort-grid:not(:has(.lab-stapel)) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort:not(:has(.lab-stapel)) { grid-template-areas: "n t v"; }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort:last-child { border-bottom: 0; }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort:hover .ny-kort__titel { color: var(--a-4); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .ny-kort__titel { grid-area: n; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1.3 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-taggar { grid-area: t; gap: 2px 14px; }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-tagg { padding: 0; background: none; font: 400 13px/1.3 var(--font-ui); color: var(--fg-4); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .lab-stapel { grid-area: s; }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-plats { grid-area: v; justify-content: flex-end; font: 600 14px/1.3 var(--font-ui); color: var(--fg-1); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort:not(:has(.lab-stapel)) .sida-kat-plats { justify-content: flex-start; font-weight: 400; color: var(--fg-4); }
body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-plats :is(i, svg) { display: none; }
@media (max-width: 767px) {
  body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .ny-kort-grid { grid-template-columns: minmax(0, 1fr) 28% auto; column-gap: 12px; }
  body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort { grid-template-areas: "n s v" "t t t"; row-gap: 4px; padding: 8px 0; }
  body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .ny-kort-grid:not(:has(.lab-stapel)) { grid-template-columns: minmax(0, 1fr) auto; }
  body:not(:has([data-vy="kort"][aria-pressed="true"])) .sida-kat-fl .sida-kat-kort:not(:has(.lab-stapel)) { grid-template-areas: "n n" "t v"; }
}
/* om-projektet: "i fem siffror" som KPI-korten på /statistik */
.sida-text #siffror .ny-fakta { display: flex; flex-direction: column; gap: 6px; }
.sida-text #siffror .ny-fakta__varde { margin-top: 2px; font: 600 26px/1.1 var(--font-ui); letter-spacing: 0; color: var(--fg-1); }
.sida-text #siffror .sida-kalla { margin-top: 0; }
@media (max-width: 767px) {
  .sida-text #siffror .ny-fakta__varde { font-size: 22px; }
}
/* ── 17m. Datasidorna i /statsbudgets språk (§17j): /lista, /levnadskostnader, /compare, /kommun-stats.
   Färger ur NYTT_KARTLAGER §0.5 (Okabe-Ito). Tio kostnadsposter > åtta ⇒ de tre minsta delar grått och bärs av etiketten. ── */
#kostnader [data-g="boende"] { --g: #0072b2; } #kostnader [data-g="mat"] { --g: #e69f00; } #kostnader [data-g="transport"] { --g: #56b4e9; }
#kostnader [data-g="el"] { --g: #f0e442; } #kostnader [data-g="forsakring"] { --g: #009e73; } #kostnader [data-g="barn"] { --g: #d55e00; }
#kostnader [data-g="fritid"] { --g: #cc79a7; } #kostnader :is([data-g="halsa"], [data-g="komm"], [data-g="ovrigt"]) { --g: var(--fg-8); }
.lev-yta .sb-oversikt { align-self: start; }
.lev-yta .sb-lista { margin: 0; }
.lev-yta .sb-sum { grid-template-columns: 10px minmax(0, 1fr) 96px auto 44px 12px; }
.lev-yta summary.sb-sum::after { grid-column: 6; }
.lev-yta .sb-inne .lab-tabell { margin-top: 0; }
/* nyckeltalskorten som /statistiks (ny-stat__kpi): luft 18, värdet 26 px, brickan under */
#estimat .ny-fakta, .sida-ks-kpi > .ny-kort { padding-block: 14px; display: grid; gap: 6px; align-content: start; }
#estimat .ny-fakta__varde, .sida-ks-kpi .ny-siffra { margin: 2px 0 0; font: 600 26px/1.1 var(--font-ui); letter-spacing: 0; color: var(--fg-1); font-variant-numeric: tabular-nums; }
#estimat .sb-bricka, .sida-ks-kpi .sb-bricka { justify-self: start; margin: 0; }
#estimat dd.sb-bricka:empty { display: none; }
.sb-bricka--k { background: var(--w-06); }
/* topplistorna: 40 px-rader, tunn stapel i sin färg (billigast grön, dyrast orange, besöken blå) */
:is(#billigast, #listor) .ny-rad { min-height: 40px; padding-block: 6px; }
:is(#billigast, #listor) .lab-stapel { height: 4px; margin-top: 4px; border-radius: 2px; }
:is(#billigast, #listor) .lab-stapel > i { border-radius: inherit; background: var(--g, #0072b2); }
#billigast .lab-rader:first-of-type { --g: #009e73; } #billigast .lab-rader:last-of-type { --g: #d55e00; }
.sida-ks-linje { stroke: #0072b2; } .sida-ks-area { fill: #0072b2; }
/* /compare: en färg per vald kommun, samma i chippet, kolumnhuvudet och cellens stapel (kolumn 2–5; riket = .sida-tab-ref saknar färg) */
.sida-tab-valda .ny-chip:nth-child(4n+1), #jamforelse :is(th, td):nth-child(4n+2):not(.sida-tab-ref) { --g: #0072b2; }
.sida-tab-valda .ny-chip:nth-child(4n+2), #jamforelse :is(th, td):nth-child(4n+3):not(.sida-tab-ref) { --g: #e69f00; }
.sida-tab-valda .ny-chip:nth-child(4n+3), #jamforelse :is(th, td):nth-child(4n+4):not(.sida-tab-ref) { --g: #009e73; }
.sida-tab-valda .ny-chip:nth-child(4n+4), #jamforelse :is(th, td):nth-child(4n+5):not(.sida-tab-ref) { --g: #cc79a7; }
.sida-tab-valda .ny-chip::before { content: ""; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--g); flex: none; }
#jamforelse thead th:not(:first-child):not(.sida-tab-ref) { box-shadow: inset 0 -3px 0 var(--g); }
#jamforelse .sida-tab-grid :is(th, td) { height: 40px; padding-block: 6px; }
#jamforelse td .sb-stapel { display: block; height: 4px; width: 100%; min-width: 60px; margin-top: 4px; }
/* /lista: 40 px-rader, länet som diskret suffix på samma rad, förändringsbrickan mot förra året sist */
.sl-rad { contain-intrinsic-size: auto 40px; }
.sl-rad > a { grid-template-columns: 2.6em minmax(0, 1fr) minmax(70px, 26%) 7.5em 6.5em; min-height: 40px; padding: 4px 14px; gap: 12px; }
.sl-rad__namn small { display: inline; margin-left: 6px; }
.sl-stapel { height: 4px; }
.sl-rad__d { justify-self: end; font-size: 12px; padding: 1px 7px; }
.sl-rad__d:empty { visibility: hidden; }
.sl-lista[data-vy="kompakt"] .sl-rad__d, .sl-lista[data-vy="rutnat"] .sl-rad__d { display: none; }
.sl-namnlista .sl-rad__d { display: none; }
@media (max-width: 767px) {
  .lev-yta .sb-sum { grid-template-columns: 10px minmax(0, 1fr) auto 40px 12px; }
  .lev-yta summary.sb-sum::after { grid-column: 5; }
  .lev-yta .sb-andel { display: block; }
  .sl-rad > a { grid-template-columns: 2.2em minmax(0, 1fr) auto auto; grid-template-areas: "n namn v d" ". stapel stapel stapel"; padding: 8px; row-gap: 5px; }
  .sl-rad__d { grid-area: d; }
  .sl-rad { contain-intrinsic-size: auto 56px; }
}

/* ── 17n. Datasidorna, djup + luft: diagramdelarna är knappar (aria-pressed) som filtrerar eller markerar, och samma skala som /statsbudget
   (kort 18 px, fotnot 14 px över, tabellceller 8 × 12, mellanrubrik 10 px under). Fokus = resten dämpas till .35, valt behåller full färg. */
:is(#estimat, #kostnader, #kalkyl, #billigast, #kommuner, #fraga, #jamforelse, #besok, #diagram, #listor, #sa-raknas) :is(.ny-kort, .ny-fakta) { padding-block: 18px; }
:is(#estimat, #kostnader, #kalkyl, #billigast, #fraga, #jamforelse, #besok, #diagram, #listor, #sa-raknas) .ny-fotnot { margin-top: 14px; }
:is(#kostnader, #jamforelse) .lab-tabell :is(th, td) { padding: 8px 12px; }
#jamforelse .ny-prosa__h { margin: 0 0 10px; }
#jamforelse .sida-tab-sek + .sida-tab-sek { margin-top: 26px; }
.sb-g, .jf-fokus, .sida-ks-val, .sl-andr__b { cursor: pointer; transition: opacity var(--lk-t) var(--lk-ease), background-color var(--lk-t) var(--lk-ease); }
:is(.sb-g, .jf-fokus, .sida-ks-val, .sl-andr__b, .sida-ks-yta):focus-visible { outline: 2px solid var(--accent, #0072b2); outline-offset: 2px; }
/* /levnadskostnader: legendraderna + ringbitarna */
#lev-grupper li { display: block; }
.sb-g { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; column-gap: 8px; align-items: center; width: calc(100% + 12px); margin: 0 -6px; padding: 5px 6px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; }
.sb-g:hover, .sb-g[aria-pressed="true"] { background: color-mix(in srgb, currentColor 8%, transparent); }
.sb-g[aria-pressed="true"] .sb-g-namn { font-weight: 600; color: var(--fg-1); }
#lev-ring .sb-bit { cursor: pointer; transition: opacity var(--lk-t) var(--lk-ease), stroke-width var(--lk-t) var(--lk-ease); }
#lev-ring .sb-bit:hover, #lev-ring .sb-bit.is-vald { stroke-width: 36; }
.lev-fokus :is(.sb-bit, .sb-g, .sb-rad):not(.is-vald) { opacity: .35; }
.lev-rensa { justify-self: start; }
/* /compare: kommunrubriken markerar kolumnen i alla tabeller */
.jf-fokus { all: unset; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; font-weight: 600; }
.jf-fokus:hover, .jf-fokus[aria-pressed="true"] { background: color-mix(in srgb, var(--g, currentColor) 16%, transparent); }
#jamforelse .is-dim { opacity: .35; transition: opacity var(--lk-t) var(--lk-ease); }
/* /lista: ↑ ökade / ↓ minskade som filter */
.sl-andr { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline: 8px; vertical-align: middle; }
.sl-andr:empty { display: none; }
.sl-andr__b { border: 1px solid transparent; font: inherit; }
.sl-andr__b[aria-pressed="true"] { border-color: currentColor; font-weight: 600; }
/* /kommun-stats: Besökare/Sidvisningar byter mått i diagrammet, ytan går med piltangenterna */
.sida-ks-val { font: inherit; color: inherit; text-align: left; width: 100%; }
.sida-ks-val .ny-siffra { display: block; }
.sida-ks-val:hover { background: color-mix(in srgb, currentColor 5%, var(--bg-kort, transparent)); }
.sida-ks-val[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #0072b2; }
.sida-ks-yta:focus-visible { border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .sb-g, .jf-fokus, .sida-ks-val, .sl-andr__b, #lev-ring .sb-bit, #jamforelse .is-dim { transition: none; } }

/* ── 17o. Nyckeltalsraden som EN remsa (statsbudget.se): hårlinje över och under, tunna skiljelinjer mellan talen.
   Linjerna är skuggor ut i 1 px-glappet; remsans overflow klipper dem i vänsterkanten och överst, så det funkar vid varje radbrytning. ── */
:is(.ny-stat__kpier, .sida-ks-kpi, .ny-kort-grid:has(> .ny-fakta, > div > .ny-fakta)) { gap: 1px; overflow: hidden; }
:is(.ny-stat__kpier, .sida-ks-kpi, .ny-kort-grid:has(> .ny-fakta, > div > .ny-fakta)) > * { padding-inline: 20px; border: 0; border-radius: 0; background: none; box-shadow: -1px 0 0 var(--w-10), 0 -1px 0 var(--w-10); }
:is(.ny-stat__kpier, .sida-ks-kpi, .ny-kort-grid:has(> .ny-fakta, > div > .ny-fakta)) > * > .ny-fakta { padding-inline: 0; border: 0; background: none; box-shadow: none; }
.sida-ks-kpi > .sida-ks-val:focus-visible { outline-offset: -3px; }   /* remsan klipper allt utanför */
@media (max-width: 767px) { :is(.ny-stat__kpier, .sida-ks-kpi, .ny-kort-grid:has(> .ny-fakta, > div > .ny-fakta)) > * { padding-inline: 14px; } }
.sida-ks-kpi > .sida-ks-val[aria-pressed="true"] { box-shadow: -1px 0 0 var(--w-10), 0 -1px 0 var(--w-10), inset 0 0 0 2px #0072b2; }   /* remsans linjer får inte äta valmarkeringen */
/* ── 17p. Ingen halvtom sida (Malte 2026-10-22): kalkylens rader i spalter över hela bredden med summan under, billigast och dyrast sida vid sida ── */
#kalkyl .sida-tva { grid-template-columns: 1fr; gap: 8px; }
#kalkyl .sida-tab-kalkyl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: clamp(24px, 3vw, 44px); }
@media (min-width: 900px) {
  #billigast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); align-items: start; }
  #billigast > :is(.ny-topp, .ny-fotnot) { grid-column: 1 / -1; }
  #billigast > .ny-prosa__h { grid-column: 2; grid-row: 2; margin-top: 0; }
  #billigast > ol:first-of-type { grid-column: 1; grid-row: 2 / 4; align-self: end; }
  #billigast > ol:last-of-type { grid-column: 2; grid-row: 3; }
}

/* ── 17q. Sektionsraden på sidan = innehållsförteckning, inte en kontroll (Malte 2026-10-22): platt textrad i innehållets
   vänsterkant, hårlinje under, accentstreck under avsnittet man står i (pillen ::before från glid() blir strecket).
   Inget glas, inga ikoner. I headern (lab.js flyttar .ny-snav__rad dit) ser den ut som förut. */
.ny-navhallare { max-width: min(100%, 1200px); height: 46px; }
.ny-navhallare + .ny-panel { margin-top: clamp(40px, 5vw, 64px); }
.ny-snav, .ny-snav.is-fast {
  left: 0; right: 0; width: auto; max-width: none; transform: none; padding: 0; border-radius: 0;
  border-bottom: 1px solid var(--w-10); backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(:root, [data-theme]) .ny-snav[data-glas] { background: none; box-shadow: none; } /* slår lab.css [data-theme="light"] [data-glas] */
.ny-snav[data-glas-latt]::before, .ny-snav[data-glas-latt]::after { display: none; }
.ny-snav > .ny-snav__rad { gap: clamp(20px, 2.4vw, 32px); height: 46px; align-items: stretch; }
.ny-snav > .ny-snav__rad::before {
  top: auto; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--a-4) !important;
}
.ny-snav .ny-snav__a { flex: none; padding: 0; border-radius: 0; color: var(--fg-5); }
.ny-snav > .ny-snav__rad > .ny-snav__a span { display: inline; } /* telefon: alla ord syns, raden sveps i sidled */
.ny-snav .ny-snav__a:is(:hover, .is-aktiv) { color: var(--fg-1); }
.ny-snav .ny-snav__a :is(.ny-i, i, svg) { display: none; }
.ny-snav .ny-snav__a:focus-visible { outline-offset: -2px; }
/* raden som inte ryms tonar ut i högerkanten (säger "svep"); på en kort rad är kanten tom, så tonen syns inte */
.ny-snav > .ny-snav__rad { mask-image: linear-gradient(90deg, #000, #000 calc(100% - 32px), transparent); }

/* ── 17r. Rubrikrutans text i himlen, inte på marken (Malte 2026-10-23, /foreningar: "för tomt i himlen och den skymmer
   marken"). lab.css .lab-hero ställer blocket mot botten (align-content: end) ⇒ knapparna hamnade på kullarna och
   djuren. Toppankrat, mindre luft ovanför; scenen och rutans höjd orörda, så marken med djuren syns fri nedanför.
   Startsidans .sida-hero är en annan komposition och rörs inte. Mindre luft mellan rutan och innehållet under. */
.lab-hero.lab-ph { align-content: start; padding-top: clamp(18px, 2.6vw, 36px); }
.ny-navhallare { margin-top: clamp(20px, 2.6vw, 36px); }
.ny-navhallare + .ny-panel { margin-top: clamp(28px, 3.4vw, 44px); }

/* POI-sidan (poi.html, /plats): minikartan runt punkten */
.sida-poi__bas { height: clamp(220px, 34vw, 360px); border-radius: 18px; overflow: hidden; }
.sida-poi__svar { display: grid; gap: 8px; }

/* ── 17s. /sverige-i-varlden (tabell.html?s=sverige-i-varlden, sverige-i-varlden.js): små diagram per mått i rutnät,
   klick = full bredd. Sverige = Okabe-Ito blått, jämförelserna sv-c0..4 (orange, grönt, rosa, rött, grått), regeringarna
   = två neutrala gråtoner som växlar: aldrig partifärger. Färgerna ur NYTT_KARTLAGER §0.5. ── */
#varlden { --sv: #0072b2; }
:root:not([data-theme="light"]) #varlden { --sv: #56b4e9; }
.sv-c0 { --c: #e69f00; } .sv-c1 { --c: #009e73; } .sv-c2 { --c: #cc79a7; } .sv-c3 { --c: #d55e00; } .sv-c4 { --c: var(--fg-6); }
.sv-jmf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.sv-jmf__sv { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: 600 13px/1.3 var(--font-ui); color: var(--fg-2); }
.sv-jmf .ny-chip { gap: 6px; }
.sv-jmf .ny-chip[aria-pressed="true"] { background: var(--w-12); color: var(--fg-2); }
.sv-jmf select.list-sort { min-height: 36px; border: 0; border-radius: 999px; background-color: var(--sd-kort); box-shadow: var(--sd-kant); color: var(--fg-2); font: 500 14px/1 var(--font-ui); }
.sv-prick { width: 10px; height: 10px; border-radius: 50%; background: var(--c, transparent); box-shadow: inset 0 0 0 1.5px var(--c, var(--fg-7)); flex: none; }
.sv-prick--sv { --c: var(--sv); }
.sv-grupp { margin: 26px 0 10px; font: 600 15px/1.3 var(--font-ui); color: var(--fg-2); }
.sv-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 22px; }
.sv-sm { margin: 0; min-width: 0; cursor: pointer; }
.sv-sm.is-stor { grid-column: 1 / -1; cursor: zoom-out; }
.sv-sm figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 400 12px/1.35 var(--font-ui); color: var(--fg-6); }
.sv-sm__namn { all: unset; cursor: pointer; font: 600 14px/1.3 var(--font-ui); color: var(--fg-2); }
.sv-sm__namn:focus-visible { outline: 2px solid var(--sv); outline-offset: 2px; border-radius: 4px; }
.sv-sm svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.sv-kalla { color: var(--fg-5); text-decoration: underline; }
.sv-band--0 { fill: var(--w-05); } .sv-band--1 { fill: var(--w-12); }
.sv-band__namn { fill: var(--fg-6); font: 11px var(--font-ui); }
.sv-hand-l { stroke: var(--fg-7); stroke-width: 1; stroke-dasharray: 2 3; }
.sv-ax { font-size: 10px; }
.sv-sm.is-stor .sv-ax { font-size: 12px; }
.sv-l { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-l--sv { --c: var(--sv); stroke-width: 2.5; }
.sv-pk { fill: var(--c); }
.sv-mark { stroke: var(--fg-4); stroke-width: 1; }
.sv-avl { margin: 4px 0 0; min-height: 1.4em; font: 400 12px/1.4 var(--font-ui); color: var(--fg-4); font-variant-numeric: tabular-nums; }
.sv-avl__j { margin-left: 6px; white-space: nowrap; }
.sv-avl__j::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--c); }
.sv-orsak { margin-top: 28px; padding: 18px 20px; }
.sv-orsak .sv-grupp { margin-top: 0; }
.sv-orsak p { margin: 0; max-width: 80ch; font: 400 14px/1.55 var(--font-ui); color: var(--fg-4); }
.sv-tabell td, .sv-tabell th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-ar { color: var(--fg-6); font-size: .85em; }
.sv-hand { display: grid; gap: 6px; padding-left: 0; list-style: none; }
.sv-hand b { display: inline-block; min-width: 92px; color: var(--fg-2); }
.sv-fodd-in { width: 7ch; padding: 0 12px; }
.sv-fodd { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.sv-fodd li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--w-08); font: 400 14px/1.35 var(--font-ui); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.sv-fodd__namn { color: var(--fg-2); }
.sv-likast { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 28px; }
.sv-likast ol { margin: 0; padding-left: 20px; font: 400 15px/1.7 var(--font-ui); color: var(--fg-3); }
@media (max-width: 767px) {
  .sv-rutnat { grid-template-columns: minmax(0, 1fr); }
  .sv-fodd li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .sv-fodd li > :nth-child(3), .sv-fodd li > :nth-child(2) { display: none; }
  .sv-tabell { overflow-x: auto; }
}

/* ── 17t. /brott (tabell.html?s=brott, brott.js): linjediagram med avläsningsrad och staplar. Färger ur NYTT_KARTLAGER
   §0.5 (Okabe-Ito): huvudserien blått, män orange, kvinnor grönt, platser vermiljon streckat. Aldrig rött mot grönt. ── */
[data-s="brott"], [data-s="vard"] { --br0: #0072b2; }
:root:not([data-theme="light"]) [data-s="brott"], :root:not([data-theme="light"]) [data-s="vard"] { --br0: #56b4e9; }
.br-c0 { --c: var(--br0); } .br-c1 { --c: #e69f00; } .br-c2 { --c: #009e73; } .br-c3 { --c: #d55e00; }
.br-fig { margin: 14px 0 0; min-width: 0; }
.br-fig figcaption { font: 600 14px/1.35 var(--font-ui); color: var(--fg-2); }
.br-fig svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; touch-action: pan-y; }
.br-ax { font-size: 11px; }
circle.br-l { fill: var(--c); }   /* /vard: ett ensamt år ritas som en prick */
.vd-ov { --c: var(--fg-6); }   /* /vard: övriga regioner och länder dämpade, vald i orange, riket i blått */
.br-l { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.br-l--str { stroke-width: 1.5; stroke-dasharray: 5 4; }
.br-bryt { stroke: var(--fg-6); stroke-width: 1; stroke-dasharray: 2 3; }
.br-mark { stroke: var(--fg-4); stroke-width: 1; }
.br-avl { margin: 4px 0 0; min-height: 1.4em; font: 400 13px/1.4 var(--font-ui); color: var(--fg-4); font-variant-numeric: tabular-nums; }
.br-avl__s { margin-left: 10px; white-space: nowrap; }
.br-avl__s::before, .br-prick { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--c); }
.br-forkl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--fg-4); }
.br-lin { display: inline-block; width: 18px; margin-left: 8px; border-top: 2.5px solid var(--c); }
.br-lin--str { border-top: 1.5px dashed var(--c); }
.br-lin--bryt { border-top: 1px dashed var(--fg-6); }
.br-forkl .br-prick { margin-left: 8px; }
.br-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; }
.br-txt { max-width: 80ch; }
.br-txt ul { padding-left: 20px; }
.br-txt li { margin: 6px 0; }
.br-h3 { margin: 28px 0 10px; font: 600 15px/1.3 var(--font-ui); color: var(--fg-2); }
.br-tabell td, .br-tabell th { font-variant-numeric: tabular-nums; }
.br-tabell td { text-align: right; }
.br-kom-ut, .br-kalk-ut { max-width: 70ch; margin: 14px 0 0; font: 500 17px/1.5 var(--font-ui); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.br-tal { width: 7ch; padding: 0 12px; }
.br-kryss { display: inline-flex; align-items: center; gap: 8px; }
.br-staplar { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.br-staplar li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); align-items: center; gap: 12px; font: 400 14px/1.35 var(--font-ui); color: var(--fg-3); }
.br-st__b { display: grid; gap: 3px; }
.br-st__r { display: flex; align-items: center; gap: 8px; }
.br-st__s { display: block; width: var(--w, 0); max-width: calc(100% - 5em); height: 10px; border-radius: 5px; background: var(--c); }
.br-st__v { font-variant-numeric: tabular-nums; color: var(--fg-2); white-space: nowrap; }
@media (max-width: 767px) {
  .br-staplar li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .br-par { grid-template-columns: minmax(0, 1fr); }
}