/* Val 2026 — grafisk profil, dämpad blågrön: pergamentbakgrund, vita kort med tunn ram, Source Sans 3, en enda profilfärg (#33505C-området) — statusfärger bara i statusrutan, partifärger bara som markör framför partinamnet. Ljust läge (denna `:root`) är förvalt. Mörkt läge härleds ur samma två profilvariabler i stället för att byggas som ett eget färgschema: `--profil` ljusas för text/länkar mot en mörk botten, medan `--profil-morkare` hålls oförändrad och bär de fyllda ytorna (sidhuvud, sidfot, primärknapp) så att de inte lyser upp som en ny accent i mörkt läge. I ljust läge är de båda variablerna samma färg. Temat avgörs av attributet `data-tema` på -elementet. */ @font-face{font-family:"Source Sans 3";src:url("../grafisk-profil/fonts/source-sans-3-400.27ab01c4cb50.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Source Sans 3";src:url("../grafisk-profil/fonts/source-sans-3-600.9a35cba76eda.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Source Sans 3";src:url("../grafisk-profil/fonts/source-sans-3-700.9b13bd3653e3.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* IBM Plex Mono används bara i stämpelkomponenten (.stampel, .sek-nr) — inte som allmänt gränssnittstypsnitt. */ @font-face{font-family:"IBM Plex Mono";src:url("../grafisk-profil/fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} :root{ --profil:#33505C; --profil-morkare:#33505C; /* = --profil i ljust läge, se filhuvudet */ --yta:#F4F1EA; /* sidbakgrund — pergament, inte grått eller vitt */ --kort:#FFFFFF; /* kortyta: statusruta, väljare, tabell */ --linje:#D6D0C0; /* kortram och avdelare i ett — ligger under 3:1 kontrast mot ytan och är ändå rätt: gränsen mot bakgrunden bärs av kortets vita yta, ramen är dekorativ */ --text:#252625; --text-dampad:#5B6560; --status-fel:#B3261E; --status-ok:#1B7A3D; --sans:"Source Sans 3",-apple-system,"Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; /* Konturen runt en partifärgsmarkör (`.partifarg`, `.partifarg-linje`). Behövs framför allt för en ren gul partifärg: den ligger nästan utan kontrast mot både den vita kortytan och pergamentet, och en markering ingen ser ser trasig ut även om partinamnet alltid står i text bredvid. En halvgenomskinlig mörk kontur i ljust läge fungerar för VARJE partifärg, inte bara den gula, och kostar ingenting för de färger som redan syns bra — därför en generell regel här, inte en specialregel för ett enskilt parti i en mall. */ --partikontur:rgba(0,0,0,.5); /* Felkurvans andra modellkurva. Ingen ny accentfärg (se filhuvudet): det är profilfärgens egen blågröna familj, ljusad i ljust läge och mörkad i mörkt, så långt det går utan att kurvan tappar sina 3:1 mot ytan. Den behövs därför att de två modellkurvorna annars skiljs nästan bara av streckform — mot `--text-dampad` låg kontrasten mellan dem på 1,42:1 i ljust läge och 1,09:1 i mörkt, vilket räcker för kravet (formen ensam skiljer dem åt) men inte på tv-avstånd. */ --felkurva-profilton:#5E8494; } :root[data-tema="mork"]{ /* Neutral mörk botten (varm, samma ton­familj som pergamentet, inte kallt svart) + samma profilfärg ljusad för text/länkar. Inga nya accentfärger — statusfärgerna är samma två hues, bara ljusade för att nå AA mot den mörka ytan (kontrollerat mot WCAG AA). */ --profil:#8FB4C2; --profil-morkare:#26404A; --yta:#1B1B19; --kort:#242422; --linje:#3A3935; --text:#EDEAE1; --text-dampad:#A9A79C; --status-fel:#FF9B8A; --status-ok:#7FC8A9; /* Samma resonemang som i ljust läge (se filhuvudet), men ljus i stället för mörk: en gul partifärg har redan gott om kontrast mot den mörka ytan här, men en mörk partifärg (t.ex. Valdeltagandes mörkgrå) skulle annars nästan försvinna mot kortytan. */ --partikontur:rgba(255,255,255,.5); --felkurva-profilton:#4F7383; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--yta);color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.55} img{max-width:100%} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} a{color:var(--profil);text-underline-offset:2px} a:hover{text-decoration-thickness:2px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--profil);outline-offset:2px} .hoppa{position:absolute;left:-999px;top:0;background:var(--kort);color:var(--profil);padding:.75em 1.25em;z-index:100;border:2px solid var(--profil)} .hoppa:focus{left:.5em;top:.5em} /* Mjuk scroll för sidans ankarlänkar (innehållsförteckningen, "Till innehållet", "Till början av sidan") — bara för den som inte bett om minskad rörelse. Påverkar bara scrollning till ett ankare inom sidan, inte htmx-uppdateringarna (som aldrig scrollar) eller själva navigeringen till ankaret. */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* "Till början av sidan" — alltid synlig, fast placerad nederst till höger, ovanpå allt annat innehåll (inklusive nedräkningsplattan, z-index 20, se längre ned). Fylld cirkel i `--profil` med pilen i `--yta`: samma två variabler bär hela kontrasten i båda teman utan en egen mörkt-läge-regel, av samma skäl som filhuvudet beskriver för `--profil` — den är redan den av de två som ljusas i mörkt läge, medan `--yta` går från nästan vitt till nästan svart och därför alltid ger hög kontrast mot den. Uppmätt (se rapporten): minst 7,6:1 i båda lägena, långt över golven på 3:1 för knappen och 4,5:1 för pilen. Klickytan är 48×48 px på bred skärm; `:focus-visible`-regeln överst i filen (delad med alla länkar) ger fokusmarkeringen. */ .till-toppen{position:fixed;right:1.5rem;bottom:1.5rem;z-index:30;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--profil);color:var(--yta);text-decoration:none;font-size:1.3rem;line-height:1;box-shadow:0 2px 6px rgba(20,20,18,.3)} .till-toppen:hover{text-decoration:none;box-shadow:0 3px 10px rgba(20,20,18,.4)} @media (max-width:700px){ /* Mindre och närmare kanten på smal skärm — klickytan hålls ändå kvar på WCAG-golvet 44×44 px, aldrig under det. */ .till-toppen{width:44px;height:44px;right:.75rem;bottom:.75rem;font-size:1.15rem} } @media print{ .till-toppen{display:none} } .behallare{max-width:75rem;margin:0 auto;padding:0 1.25rem} /* --- Servicerad --- */ .topptjanst{background:var(--text)} .topptjanst nav ul{list-style:none;margin:0;padding:.4em 0;display:flex;gap:1.5em;font-size:.82em} .topptjanst a{color:var(--yta);text-decoration:none} .topptjanst a:hover{text-decoration:underline} .topptjanst a[aria-current="page"]{text-decoration:underline;font-weight:700} .topptjanst :focus-visible{outline-color:var(--yta)} /* --- Sidhuvud --- */ .sidhuvud{background:var(--profil-morkare)} .sidhuvud-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding:1.1em 1.25rem;flex-wrap:wrap} .ordbild{color:#FFFFFF;text-decoration:none;font-weight:700;font-size:1.7rem;letter-spacing:.01em} .ordbild-domansuffix{font-weight:400} .valdatum{color:#FFFFFF;opacity:.92;font-size:.82em;margin:.15em 0 0} .sidhuvud-topprad{display:flex;flex-direction:column} /* --- Huvudmeny (Valvindar/Räknat/Prognoser) --- */ .huvudmeny{background:var(--kort);border-bottom:1px solid var(--linje)} .huvudmeny ul{list-style:none;margin:0;padding:0;display:flex;gap:2em;flex-wrap:wrap} .huvudmeny a{display:inline-block;padding:1em 0;text-decoration:none;color:var(--text);border-bottom:3px solid transparent;font-weight:600} .huvudmeny a[aria-current="page"]{color:var(--profil);border-bottom-color:var(--profil)} .huvudmeny a:hover{border-bottom-color:var(--linje)} /* --- Brödsmula --- */ .brodsmula{padding:.9em 0;font-size:.88em;color:var(--text-dampad)} .brodsmula ol{list-style:none;margin:0;padding:0;display:flex;gap:.4em;flex-wrap:wrap} .brodsmula li:not(:last-child)::after{content:'/';margin-left:.4em;color:var(--linje)} .brodsmula a{color:var(--text-dampad);text-decoration:underline} .brodsmula li[aria-current="page"]{color:var(--text);font-weight:600} /* --- Huvudinnehåll --- */ main{padding-bottom:3rem} main h1{font-size:2.25rem;margin:.2em 0 .1em;line-height:1.15} .rubrik-flik{color:var(--text-dampad);font-weight:400} .flikval ul{list-style:none;display:flex;gap:.6em;margin:1.2em 0 0;padding:0;flex-wrap:wrap} .flikval a{display:inline-block;padding:.55em 1.1em;text-decoration:none;color:var(--text);border:1px solid var(--linje);border-radius:3px;background:var(--kort);font-weight:600} .flikval a[aria-current="page"]{background:var(--profil-morkare);color:#FFFFFF;border-color:var(--profil-morkare)} .flikval a:hover:not([aria-current="page"]){border-color:var(--profil)} .sek-nr{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;margin-right:.5em;font-size:.62em;border:1px solid var(--profil);color:var(--profil);font-weight:700;vertical-align:middle;font-family:var(--mono)} section.avsnitt{margin:2.25em 0;padding-top:1.75em;border-top:1px solid var(--linje)} section.avsnitt:first-of-type{margin-top:1.5em} section.avsnitt h2{font-size:1.3rem;margin-bottom:.8em} /* Valvindar-sidans flikval mellan "Nyckeldistrikt som rapporterat" och "Aggregerade vindar" — samma visuella språk som .flikval (Riksdag/Region/Kommun), men en egen klass eftersom det här är ett `role="tablist"` på sektionsnivå, inte flikvalet mellan valtyper. Den flik som visas har `aria-selected="true"` i stället för `aria-current="page"`, som är fel roll här. */ .sektionsflikar{display:flex;gap:.6em;margin:2.25em 0 0;padding-top:1.75em;border-top:1px solid var(--linje);flex-wrap:wrap} .sektionsflikar a{display:inline-block;padding:.55em 1.1em;text-decoration:none;color:var(--text);border:1px solid var(--linje);border-radius:3px;background:var(--kort);font-weight:600;font-variant-numeric:tabular-nums} .sektionsflikar a[aria-selected="true"]{background:var(--profil-morkare);color:#FFFFFF;border-color:var(--profil-morkare)} .sektionsflikar a:hover:not([aria-selected="true"]){border-color:var(--profil)} /* Panelen efter flikvalet ska inte få en egen övre linje och dubbel marginal ovanpå tablistens — .avsnitt:first-of-type-regeln ovan gäller bara allra första sektionen på sidan, så panelen (som kommer efter tablisten) nollställs uttryckligen. */ .sektionsflikar + section.avsnitt{margin-top:1.25em;padding-top:0;border-top:none} /* --- Områdesväljare --- */ .omradesvaljare{display:flex;align-items:end;gap:1em;flex-wrap:wrap;background:var(--kort);border:1px solid var(--linje);border-radius:4px;padding:1.25em;box-shadow:0 1px 2px rgba(20,20,18,.06);margin:1.5em 0} .omradesvaljare label{display:block;font-size:.82em;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dampad);margin-bottom:.4em} .omradesvaljare select{font:inherit;padding:.5em .6em;border:1px solid var(--linje);border-radius:3px;background:var(--kort);color:var(--text);min-width:16em} .knapp-primar{font:inherit;font-weight:700;background:var(--profil-morkare);color:#FFFFFF;border:1px solid var(--profil-morkare);border-radius:3px;padding:.6em 1.4em;cursor:pointer} .knapp-primar:hover{background:var(--profil)} .foljvaxel{margin:.6em 0 1.5em;font-size:.95rem} /* --- Statusruta --- */ .ruta{background:var(--kort);border:1px solid var(--linje);border-radius:4px;padding:1.1em 1.25em;margin:1.5em 0;box-shadow:0 1px 2px rgba(20,20,18,.06)} .statusrad{display:flex;flex-wrap:wrap;gap:1.75em;margin:0} /* "Slutligt räknat"-raden i statusrutan: samma uppställning som statusraden ovanför, med luft emellan. */ .slutligtrad{display:flex;flex-wrap:wrap;gap:1.75em;margin:.9em 0 0} /* Preliminär och slutlig räkning jämsides, i samma stil och tyngd — tidigare stod den slutliga räkningen i stor stil överst och den preliminära efteråt i `.raknatmatare`s nedtonade, mindre text, vilket läser som att den slutliga vore den intressanta trots att den är noll procent ända till valveckan. Rent källordnad grid (ingen `order`) håller uppläsningsordningen preliminär före slutlig lika med den visuella i båda lägena, och vid stapling under brytpunkten hamnar preliminär överst eftersom den står först i koden. 900px återanvänder samma brytpunkt som `.summeringsrutor` ovan hellre än att införa en ny skala. */ .raknat-jamfor{display:grid;grid-template-columns:1fr 1fr;gap:1.5em;margin:.9em 0 0} .raknat-jamfor-falt{min-width:0} .raknat-jamfor-rubrik{margin:0 0 .3em;font-size:1em;font-weight:700;color:var(--text)} /* `.raknatmatare` delas med Örebro/styre-översikten (se kommentaren längre ned), som ska ha kvar sin nedtonade, mindre stil — överstyrningen gäller därför bara den preliminära rutan här, inte klassen i sig. */ .raknat-jamfor-falt .raknatmatare{margin:0;font-size:1em;color:var(--text)} .raknat-jamfor-falt .raknatmatare strong{color:var(--text)} @media (max-width:900px){ .raknat-jamfor{grid-template-columns:1fr} } .statuspost{display:flex;flex-direction:column;gap:.2em} .status-etikett{font-size:.76em;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dampad)} .status-varde{font-weight:600} .status-varde--fel{color:var(--status-fel)} .status-varde--ok{color:var(--status-ok)} .stampel{display:inline-block;border:2px solid var(--status-fel);color:var(--status-fel);font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.78em;padding:.1em .5em;border-radius:2px;margin-right:.3em} .stampel--fel{border-color:var(--status-fel);color:var(--status-fel)} .stampel--ok{border-color:var(--status-ok);color:var(--status-ok)} .stampel--neutral{border-color:var(--text-dampad);color:var(--text-dampad)} /* En stämpel som länkar till sin förklaring på metodsidan ska fortfarande visas i sin STATUSFÄRG (röd/grön/grå bär betydelsen, WCAG 1.4.1) — utan `color:inherit` hade den vanliga länkfärgen (`--profil`) vunnit över `.stampel--fel`/`--ok`/`--neutral` och gjort alla stämplar likadana, oavsett status. */ .stampel a{color:inherit;text-decoration-thickness:1px} .ruta--fel{border-left:4px solid var(--status-fel)} .raknatmatare{margin:.9em 0 0;font-size:.92em;color:var(--text-dampad)} .raknatmatare strong{color:var(--text);font-variant-numeric:tabular-nums} .tomlage{font-size:1.15rem;color:var(--text-dampad);font-style:italic;margin:1rem 0 0} .tomlage-grund{font-size:.95rem;color:var(--text-dampad);font-style:normal;margin:.4rem 0 0} /* Informationsruta som inte är ett fel (t.ex. "bara rapportpartier redovisas", "påverkad av manuell evidens") — profilfärgen som accent i stället för statusfärgen, som är reserverad för statusrutan. */ .varning{background:var(--kort);border:1px solid var(--linje);border-left:4px solid var(--profil);border-radius:4px;padding:.9em 1.1em;margin:.9em 0 0;font-size:.95rem} /* --- Tabell --- */ .tabellyta{overflow-x:auto;border:1px solid var(--linje);border-radius:4px;background:var(--kort);box-shadow:0 1px 2px rgba(20,20,18,.06);margin:1.5em 0} table.rosttabell{border-collapse:collapse;width:100%;min-width:44em;font-size:1.02rem} table.rosttabell caption{text-align:left;padding:.9em 1em .2em;font-size:.82em;color:var(--text-dampad);caption-side:top} table.rosttabell th,table.rosttabell td{padding:.55em .9em;border-bottom:1px solid var(--linje);text-align:left} table.rosttabell thead th{text-transform:uppercase;letter-spacing:.05em;font-size:.74em;color:var(--text-dampad);border-bottom:2px solid var(--profil);font-weight:700;white-space:nowrap} table.rosttabell td{font-variant-numeric:tabular-nums} table.rosttabell tbody tr:hover{background:color-mix(in srgb,var(--profil) 6%,transparent)} table.rosttabell tr.rad--avviker{background:color-mix(in srgb,var(--status-fel) 10%,transparent)} .dis{color:var(--text-dampad);font-weight:400;font-size:.9em} .partifarg{display:inline-block;width:.75em;height:.75em;border-radius:50%;background:var(--partifarg,var(--linje));border:1px solid var(--partikontur);margin-right:.5em;vertical-align:middle} /* --- Konfidensruta (Prognoser) --- */ .konfidensrad{display:flex;flex-wrap:wrap;align-items:center;gap:.75em;margin:.5em 0 0} .konfidens{display:inline-block;padding:.25em .7em;border-radius:3px;font-weight:700;font-size:.82em;border:1px solid currentColor} .konfidens--lag{color:var(--status-fel)} .konfidens--mattlig{color:var(--profil)} .konfidens--hog{color:var(--status-ok)} /* Samma skäl som `.stampel a` ovan: länken till konfidensetikettens förklaring ska inte tvinga fram länkfärgen över statusfärgen — konfidensordet ("Låg"/"Måttlig"/"Hög") BÄR sin färg. */ .konfidens a{color:inherit} .konfidensdetaljer{color:var(--text-dampad);font-size:.92em;margin-top:.5em} .konfidensdetaljer summary{cursor:pointer;color:var(--profil)} .konfidensdetaljer ul{margin:.5em 0 0;padding-left:1.2em} .majoritetslagen h3{margin-top:0} .orebrolank{margin-top:1.5em;font-size:1.05rem} /* --- Valvindar — signalkort --- */ .signallista{list-style:none;margin:1.25em 0 0;padding:0;display:flex;flex-direction:column;gap:1em} .signalkort{background:var(--kort);border:1px solid var(--linje);border-left-width:5px;border-radius:4px;padding:1em 1.25em;box-shadow:0 1px 2px rgba(20,20,18,.06)} .signalkort--bekraftelse{border-left-color:var(--status-ok)} .signalkort--avvikelse{border-left-color:var(--profil)} .signaltyp-etikett{display:inline-block;font-weight:700;text-transform:uppercase;font-size:.8em;letter-spacing:.04em;margin-right:.5em;color:var(--text-dampad)} .signalformulering{margin:0;font-size:1.05rem;line-height:1.5} .signalmatt{margin:.4em 0 0;font-size:.85em} .underlagsdetaljer{margin-top:.6em;font-size:.9em} .underlagsdetaljer summary{cursor:pointer;color:var(--profil)} .underlagstabell{margin-top:.75em;font-size:.85em} .arkivlank{margin-top:1em} .ordningvaxel{margin-top:.75em} .allalank{margin-top:.4em} /* --- Örebro/styre-översikt: gemensamma klasser (.ruta, .rosttabell, .raknatmatare, .sek-nr) återanvänds redan ovan, ingen egen regel behövs. */ /* --- Valvindar — summeringsrutor --- Antalet rutor kommer ur valområdet — tio för riksdagsvalet, fler i en kommun eller region med egna, separat redovisade partier (en kommun med sju lokala partier ger till exempel sjutton rutor totalt). Ett fast `repeat(5,1fr)` spricker redan vid ett tiotal rutor. `auto-fill` löser det utan ett särskilt fall för "för många rutor": den lägger ut så många 190px-eller-bredare kolumner som får plats och radbryter i EGEN takt när fler rutor än så finns — vid dagens innehållsbredd (`.behallare`, 75rem) ger golvet exakt fem kolumner per rad, samma bredd raden alltid haft, bara utan ett hårt tak på hur många rader den får bli. Samma regel degraderar själv till färre kolumner på en smalare skärm (fyra vid ~900px, två–tre vid mobilbredd) utan fasta brytpunkter. Fördelningsstapeln använder bara nyanser av profilfärgen (color-mix mot kortytan), aldrig statusfärgerna — de är reserverade för statusrutan. */ .summeringsrutor{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9em;margin:1.5em 0} .summeringsruta{container-type:inline-size;display:flex;flex-direction:column;gap:.4em;background:var(--kort);border:1px solid var(--linje);border-radius:4px;padding:.9em 1em;box-shadow:0 1px 2px rgba(20,20,18,.06);text-decoration:none;color:var(--text)} .summeringsruta:hover{border-color:var(--profil)} .summeringsruta--tom{color:var(--text-dampad)} /* Partinamnet får aldrig brytas från sitt färgade streck — `white-space:nowrap` gör brytning omöjlig, och teckenstorleken krymper i stället efter rutans egen bredd (container query, `cqi` = 1 % av `.summeringsruta`s innehållsbredd). Ingen `overflow`/`text-overflow` på namnraden längre — det var `overflow:hidden` här som klippte bort färgstrecket under namnet, eftersom strecket (numera ett blockelement, se `.partifarg-linje` nedan) blir någon pixel högre än textraden. 9cqi ger cirka 16,3 px i normalläget (fem kolumner, 1 200 px bred sida) — där får det längsta namnet, "Sverigedemokraterna", omkring 0,75 em marginal på var sida innan det färgade strecket; golvet på 15 px och taket på 18 px gäller i smalare respektive bredare rutlägen (två och en kolumn). */ .summeringsruta-titel{font-weight:700;font-size:clamp(15px,9cqi,18px);white-space:nowrap} /* Blockelement (inte `inline`) så att färgstrecket faktiskt får plats under textraden i stället för att bli en bråkdels pixel för hög för sin inline-förälder och klippas bort (uppmätt orsak: 21,3 px hög linje i en 20,2 px hög rad med `overflow:hidden`). Strecket ritas som ett `::after`, inte som elementets egen `border-bottom`, så att det kan bära TVÅ färger i stället för en — det är den "tunna mörka konturen" en gul partifärg behöver för att synas mot den vita/pergament- färgade ytan (se `--partikontur` i filhuvudet). En riktig `border-bottom` kan bara ha en färg; ett eget lager ovanpå elementets bakgrund kan ha en fylld yta OCH sin egen kant. */ .partifarg-linje{display:block;position:relative;padding-bottom:.35em} .partifarg-linje::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--partifarg,var(--linje));border-bottom:1px solid var(--partikontur)} /* Siffran och beskrivningen står alltid på två rader — aldrig i en parentes på samma rad som talet. */ .summeringsruta-vind{display:flex;flex-direction:column;gap:.15em;font-variant-numeric:tabular-nums} .summeringsruta-varde{font-weight:700;white-space:nowrap} .summeringsruta-beskrivning{font-weight:400} .summeringsruta-vind--upp .summeringsruta-varde{color:var(--profil)} .summeringsruta-vind--ned .summeringsruta-varde{color:var(--profil-morkare)} .summeringsruta-vind--oforandrad .summeringsruta-varde{color:var(--text-dampad)} .summeringsruta-vind--vantar .summeringsruta-beskrivning{color:var(--text-dampad)} /* Riktningsmarkören — ▲/▼/▶ eller en ring, renderad på ett enda ställe och delad av Valvindar-sidornas egna rutor och förstasidans rad. Formen bär betydelsen (WCAG 1.4.1); ringen är nedtonad men `--text-dampad` mäter över 6:1 mot både `--kort` och mörkt lägets kortyta, gott och väl över 3:1-golvet WCAG 1.4.11 sätter för den (den är en väntande plats, inte dekoration) — kontrasten är oförändrad från en tidigare fylld cirkel, eftersom bara formen (fylld yta → ring) ändrats, inte färgen. */ .riktningsmarkor{display:inline-block;line-height:1} .riktningsmarkor--upp{color:var(--profil)} .riktningsmarkor--ned{color:var(--profil-morkare)} .riktningsmarkor--oforandrad{color:var(--text-dampad)} /* Ringen är en egen form (border-radius:50%, genomskinlig mitt), inte Unicode-tecknet "○" — ett typsnittstecken hade fått sin strecktjocklek avgjord av typsnitt och storlek, en hårfin linje vid liten textstorlek. `max(2px,.16em)` håller ringen tydligt tjockare än en hårfin linje i alla storlekar den faktiskt förekommer i — hellre tjockare än svagare. `vertical-align` centrerar ringen mot omgivande text ungefär som ett gement tecken gör. */ .riktningsmarkor--vantar{width:.62em;height:.62em;border-radius:50%;border:max(2px,.16em) solid var(--text-dampad);box-sizing:border-box;vertical-align:-.08em} .fordelningsstapel{display:flex;width:100%;height:.6em;border-radius:3px;overflow:hidden;background:var(--linje)} .fordelningsstapel-del{height:100%} .fordelningsstapel-del--over{background:color-mix(in srgb, var(--profil) 85%, var(--kort))} .fordelningsstapel-del--forvantat{background:color-mix(in srgb, var(--profil) 40%, var(--kort))} .fordelningsstapel-del--under{background:color-mix(in srgb, var(--profil) 15%, var(--kort))} .summeringsruta-fordelning{font-size:.82em} .summeringsruta-antal{font-size:.82em;white-space:nowrap} .distriktprofil{margin:.6em 0 0;font-size:.92em} .distriktprofil dt{font-weight:700;margin-top:.5em} .distriktprofil dd{margin:.1em 0 0} /* --- Evidens --- */ .evidensmeddelanden{list-style:none;margin:0;padding:0} /* --- Metodsidan --- */ /* Löptext och listor begränsas i bredd för läsbarhet (raden blir för lång mot .behallares fulla 75rem annars); tabeller och formler får vara bredare eftersom kolumnerna/uttrycken själva sätter en naturlig gräns. */ .metod-ingress{font-size:1.15rem;max-width:46rem} .metod-sida .avsnitt{scroll-margin-top:1rem} .metod-sida .avsnitt p, .metod-sida .avsnitt > ul, .metod-sida .avsnitt > ol{max-width:46rem} .metod-sida .avsnitt h3{font-size:1.05rem;margin:1.5em 0 .6em} .metod-formel{font-family:var(--mono);font-size:1.05rem;background:var(--kort);border:1px solid var(--linje);border-radius:4px;padding:.75em 1em;margin:1em 0;overflow-x:auto;max-width:46rem} .metod-sida code{font-family:var(--mono);font-size:.92em;background:var(--kort);border:1px solid var(--linje);border-radius:3px;padding:.05em .35em} .metod-innehall{background:var(--kort);border:1px solid var(--linje);border-radius:4px;padding:1.1em 1.4em;margin:1.5em 0 2em;box-shadow:0 1px 2px rgba(20,20,18,.06)} .metod-innehall-rubrik{font-size:.82em;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dampad);margin:0 0 .6em;font-weight:700} .metod-innehall ol{columns:2;column-gap:2em;margin:0;padding-left:1.3em} .metod-innehall li{break-inside:avoid;margin-bottom:.4em} .metod-innehall a{color:var(--profil)} /* Länken sist i varje avsnitt, tillbaka till innehållsförteckningen ovan — nedtonad, som `.arkivlank`, så den inte tävlar med avsnittets egen brödtext. */ .metod-till-innehall{margin-top:1.5em;font-size:.92rem} /* Felkurvan i avsnittet om osäkerhet: råräkningens fel mot modellens, som inline-SVG med förberäknade koordinater. Egna klasser i stället för prognosdiagrammets — de två diagrammen visar olika saker och ska kunna ändras var för sig. Kurvorna skiljs åt med BÅDE streckform och markörform, inte bara färg: en läsare med nedsatt färgseende ska kunna se vilken kurva som är vilken. Färgerna kommer ur temavariablerna, aldrig som fasta värden, så att diagrammet följer både ljust och mörkt läge. */ .felkurva{margin:1.5em 0;max-width:52rem} .felkurva svg{width:100%;height:auto;display:block} .felkurva figcaption{font-size:.92rem;color:var(--text-dampad);max-width:46rem;margin-top:.4em} .felkurva-rutnat{stroke:var(--linje);stroke-width:1} .felkurva-axel{stroke:var(--text-dampad);stroke-width:1.5} .felkurva-axeltext{font-size:14px;fill:var(--text-dampad);font-family:var(--sans)} .felkurva-axeltitel{font-size:14px;font-weight:700;fill:var(--text-dampad);font-family:var(--sans)} .felkurva-linje{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .felkurva-linje--rarakning{stroke:var(--text)} .felkurva-linje--blind{stroke:var(--profil);stroke-dasharray:10 6} .felkurva-linje--profil{stroke:var(--felkurva-profilton);stroke-dasharray:2 6} .felkurva-markor--rarakning{fill:var(--text)} .felkurva-markor--blind{fill:var(--profil)} .felkurva-markor--profil{fill:var(--felkurva-profilton)} /* Teckenförklaringen ligger UTANFÖR diagrammets SVG, som vanlig text med en liten egen provbild per kurva. Inne i SVG:n skalade den med figuren och blev oläslig på en telefon (se brytpunkterna nedan); som riktig text följer den i stället sidans egen teckenstorlek och är lika stor på alla skärmar. Provbilderna ärver kurvornas egna klasser, så en ändrad streckform eller ton slår igenom i både diagrammet och förklaringen utan att något behöver hållas i synk för hand. */ .felkurva-tecken{list-style:none;display:flex;flex-wrap:wrap;gap:.35em 1.75em;margin:.7em 0 0;padding:0;font-size:.95rem} .felkurva-tecken li{display:flex;align-items:center;gap:.55em} .felkurva .felkurva-tecken svg{width:34px;height:12px;flex:none} /* Texten inne i diagrammets SVG skalar med figuren: en viewBox-enhet blir figurens bredd delad med 760 renderade pixlar. Vid 375 pixlars visningsyta är figuren 335 pixlar bred, och 14 enheter renderas då 6,2 pixlar höga — läsbart på en bred skärm, inte på en telefon. Storleken sätts därför i SVG:ns egna enheter och räknas upp när figuren krymper, så att axeltexten håller minst elva renderade pixlar ända ned till 375 pixlar. Den lodräta axelrubriken viks undan i det smalaste steget: den uppräknade y-texten skulle annars skriva över den, och storheten står redan i bildtexten och i tabellen under figuren. Diagrammets SVG är `aria-hidden`, så det som döljs här har aldrig lästs upp ändå. */ @media (max-width:640px){ .felkurva-axeltext, .felkurva-axeltitel{font-size:20px} } @media (max-width:480px){ .felkurva-axeltext, .felkurva-axeltitel{font-size:27px} .felkurva-axeltitel--lodrat{display:none} } /* --- Möjliga regeringsbildningar (Prognoser/Riksdag) --- */ .regering-block{margin:.2em 0 1em;font-size:1.02rem} .regering-block-etikett{font-size:.82em;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dampad);font-weight:700;margin-right:.4em} .regering-detalj{display:block;font-size:.85em;color:var(--text-dampad)} .regering-uppdelningar{display:block;font-size:.82em;font-weight:400;color:var(--text-dampad)} .regering-forklaring{max-width:46rem;font-size:.95rem;color:var(--text-dampad)} .regering-varning{background:var(--kort);border:1px solid var(--linje);border-left:4px solid var(--profil);border-radius:4px;padding:.9em 1.1em;margin:.9em 0;font-size:.95rem} .regering-tomt{color:var(--text-dampad)} .regering-positioner{margin:1.2em 0} .regering-positioner summary{cursor:pointer;font-weight:700} .regering-tolkningar{margin:0;padding-left:1.1em;font-size:.9rem} .regering-tolkningar li{margin-bottom:.5em} .regering-etikett{display:inline-block;font-size:.75em;text-transform:uppercase;letter-spacing:.05em;font-weight:700;border:1px solid var(--linje);border-radius:3px;padding:0 .35em;margin-right:.35em;color:var(--text-dampad)} .regering-etikett-uttalande{border-color:var(--profil);color:var(--profil)} .regering-etikett-antagande{border-style:dashed} /* Samma skäl som `.stampel a`/`.konfidens a`: länken till etikettens förklaring på metodsidan ska inte tvinga fram länkfärgen. */ .regering-etikett a{color:inherit} .regering-kallor{display:block;font-size:.92em;color:var(--text-dampad);margin-top:.15em} .regering-grupp{margin:1.4em 0 0} .regering-grupp h3{font-size:1.08rem;margin:0 0 .2em} .regering-gruppforklaring{max-width:46rem;margin:0 0 .6em;font-size:.92rem;color:var(--text-dampad)} .regering-dolda{margin:.6em 0 0} .regering-dolda summary{cursor:pointer;font-size:.92rem;color:var(--text-dampad)} .regering-underrubrik{font-size:.98rem;margin:1em 0 .2em} .regering-stopp{margin:0;padding-left:1.1em;font-size:.92em} .regering-stopp li{margin-bottom:.35em} /* Partibeteckningen i "Stängda dörrar" ska ha kolumnens brödtextstorlek och fet stil, inget annat — den ska inte krympas av .regering-stopps nedtonade storlek tillsammans med skäl och källor. */ .regering-stopp li>strong{font-size:calc(1em / 0.92);font-weight:700} /* --- Förstasidan --- */ /* Tätare mellanrum ovanför vindraden, för att hålla den så nära "ovanför vikningen" som möjligt: samma `.omradesvaljare`/`.ruta`-klasser som resten av gränssnittet, bara med mindre marginal — scopat till `.forstasida-innehall` så att Räknats, Prognosers och Valvindars egna väljare/statusrutor inte påverkas. Med huvudmenyn kvar och vindrutorna i full storlek räcker den här besparingen ensam inte till att hålla vindraden ovanför vikningen vid en vanlig skärmhöjd, men marginalerna behålls ändå: de kostar inget och sparar det de kan. */ .forstasida-innehall h1{margin:.6em 0 0} .forstasida-innehall .flikval ul{margin-top:.7em} .forstasida-innehall .omradesvaljare, .forstasida-innehall .forstasida-status{margin:.75em 0;padding:.75em 1em} .forstasida-innehall .foljvaxel{margin:.4em 0} .forstasida-innehall .avsnitt:first-of-type{margin-top:.75em;padding-top:0;border-top:none} /* Nedräkningsöverlayn — en stor, centrerad och tydligt genomskinlig platta ovanpå sidans innehåll, i utrymmet under sidhuvudet och huvudmenyn. Den får gärna täcka en stor del av fönstret eftersom det inte finns någon information direkt bakom den som besökaren behöver läsa samtidigt. Den yttre ramen (`.nedrakningspanel`) spänner över hela fönstret (`inset:0`) men har `pointer-events:none` — annars skulle den osynliga ramen ligga rakt ovanpå sidhuvudet och menylänkarna och blockera klick där, trots att inget syns förrän man når `padding-top`, som lämnar exakt det utrymmet fritt. `display:flex` med `align-items` och `justify-content` centrerar den synliga plattan både vågrätt och lodrätt i resten av ytan. Själva plattan (`.nedrakningspanel-inner`) är en egen, mindre yta — ungefär två tredjedelar av fönstrets bredd och höjd på en vanlig skärm, nästan hela bredden på en telefon (se brytpunkten nedan). `pointer-events` sätts tillbaka till `auto` här; plattan har visserligen inga klickbara element, men det gör i alla fall inte texten omöjlig att markera. Genomskinligheten är sänkt jämfört med tidigare (`color-mix`, samma teknik `.fordelningsstapel-del` ovan använder): plattan blandas nu med mindre av profilfärgen, så sidan bakom syns tydligt igenom. Vit text tappar annars snabbt kontrast mot en ljus bakgrund, så varje rad får också en mörk, diffus `text-shadow` som håller kontrasten oavsett vad som råkar synas rakt bakom bokstäverna — samma princip som undertexter på video, som måste gå att läsa oavsett bildinnehåll. Uppmätt mot det sämsta tänkbara fallet, en helt vit yta rakt bakom plattan: plattans färg ensam ger omkring 3:1 mot vitt, tillräckligt för de stora, feta sifforna, medan skuggan bär den återstående kontrasten för den mindre texten i rubrik-, etikett- och vallokalsraderna. `container-type:inline-size` gör att sifferstorleken (`cqw`-enheter, med `clamp()` som golv och tak) följer plattans egen bredd i stället för fönstrets — siffrorna växer med plattan på en stor skärm och krymper med den på en liten, i stället för att vara en fast storlek. */ .nedrakningspanel{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding-top:14rem;pointer-events:none} .nedrakningspanel-inner{pointer-events:auto;container-type:inline-size;width:66%;max-width:60rem;height:66%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;text-align:center;background:color-mix(in srgb, var(--profil-morkare) 60%, transparent);color:#FFFFFF;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.5);padding:2em 2.5em;border-radius:16px;box-shadow:0 6px 24px rgba(20,20,18,.35)} /* De två textraderna ovanför/under siffrorna — samma understruket-litet- versala utseende som `.nedrakning-etikett`, så alla tre raderna hör ihop visuellt som EN panel. Storleken följer plattans bredd (`cqw`) mellan ett golv och ett tak, av samma skäl som sifforna nedan. */ .nedrakning-rubrik{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.95;font-size:clamp(.85rem,3cqw,1.35rem)} .nedrakning-vallokaler{margin:.2em 0 0;opacity:.95;font-size:clamp(.85rem,3cqw,1.35rem)} /* De fyra tickande enheterna — siffran stor, etiketten mindre under. `aria-hidden` sitter i mallen på hela `.nedrakning-enheter`: de är en ren, tickande visuell dekoration, aldrig upplästa för sig själva — en separat, osynlig textnod intill bär den riktiga textmotsvarigheten. Sifferstorleken skalar med plattans bredd av samma skäl som kommentaren ovan förklarar. */ .nedrakning-enheter{display:flex;gap:clamp(.6em,3cqw,1.6em);font-variant-numeric:tabular-nums;margin:.5em 0} .nedrakning-enhet{display:flex;flex-direction:column;align-items:center;line-height:1.15} .nedrakning-siffra{font-size:clamp(1.8rem,9cqw,4.5rem);font-weight:700} .nedrakning-etikett{font-size:clamp(.62rem,2.1cqw,.95rem);text-transform:uppercase;letter-spacing:.06em;opacity:.92} @media (max-width:700px){ /* På en smal skärm radbryts huvudmenyns länkar till två rader, så sidhuvudet och menyn tar mer plats uppifrån — `padding-top` görs därför större i stället för att räknas fram från en enda, gemensam höjd. Plattan själv sträcks ut till nästan hela bredden i stället för att hålla samma andel som på en bred skärm; sifferstorleken behöver ingen egen justering här eftersom `cqw`/`clamp()` redan följer plattans (nu smalare) bredd automatiskt. */ .nedrakningspanel{padding-top:21rem} .nedrakningspanel-inner{width:92%;max-width:none;padding:1.4em 1.5em} } /* Prognosdiagrammet och hemicykeln, sida vid sida på breda skärmar (`flex-wrap` faller till en kolumn under `prognosdiagram-rad`s egen brytpunkt, se nedan) — båda är `` med `viewBox` och skalar med sin behållares bredd, aldrig med fasta pixeltal. */ .prognosdiagram-rad{display:flex;gap:1.75em;flex-wrap:wrap;align-items:flex-start;margin:1em 0} .prognosdiagram{flex:1 1 480px;min-width:0;margin:0} .prognosdiagram svg, .hemicykel-svg{width:100%;height:auto;display:block} .prognosdiagram-rutnat{stroke:var(--linje);stroke-width:1} .prognosdiagram-axel{stroke:var(--text-dampad);stroke-width:1.5} .prognosdiagram-axeltext{font-size:13px;fill:var(--text-dampad);font-family:var(--sans)} /* Morrhåret (det lagrade 90-procentiga intervallet) ritas i stapelns egen färg vid låg kontrast mot ytan, annars i `--text` — här hålls det enkelt: samma mörka ton som axeln, som alltid syns mot både ljusa och mörka partifärger. */ .prognosdiagram-morrhar{stroke:var(--text);stroke-width:2} .prognosdiagram-partitext{font-size:15px;font-weight:700;fill:var(--text);font-family:var(--sans)} .prognosdiagram-vardetext{font-size:14px;font-weight:700;fill:var(--text);font-family:var(--sans)} .hemicykel{flex:1 1 320px;min-width:0;margin:0} .hemicykel-summa{font-weight:700;margin:.4em 0 0} /* Delad lista under BÅDA diagrammen — hemicykelns mandatlista och stapeldiagrammets andelslista är samma sorts uppställning i samma form, bara olika tal. En tabell under diagrammen läser tyngre än nödvändigt här; en lista i samma form som mandatlistan ger i stället balans i layouten mellan de två halvorna under diagrammen. */ .diagramlista{list-style:none;margin:.4em 0 0;padding:0;columns:2;column-gap:1.5em;font-size:.92rem} .diagramlista li{break-inside:avoid;margin-bottom:.25em} @media (max-width:700px){ .diagramlista{columns:1} } /* --- Sidfot --- */ .sidfot{background:var(--profil-morkare);color:#FFFFFF;margin-top:3em} .sidfot-inner{padding:2em 1.25rem;display:flex;justify-content:space-between;gap:2em;flex-wrap:wrap} .sidfot p{margin:.3em 0;opacity:.95} .sidfot a{color:#FFFFFF} @media (max-width:700px){ main h1{font-size:1.7rem} .huvudmeny ul{gap:1.1em} .sidhuvud-inner{flex-direction:column;align-items:flex-start} .omradesvaljare{flex-direction:column;align-items:stretch} .sidfot-inner{flex-direction:column} .metod-innehall ol{columns:1} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}