/* ===========================================================================
   VALVAKASKÄRMEN — Vår Framtid, Ånge kommun, 13 september 2026
   150 tums bakprojektion, 1920×1080.

   KOMPOSITIONEN ÄR LÅST TILL EN RITYTA, INTE FLYTANDE. Hela ytan är en
   1920×1080-duk som skalas med min(bredd, höjd) och centreras. En flytande
   layout hade varit rätt för en webbsida och fel här: projektorn är EN känd
   yta, satsen är mätt för den, och en oväntad proportion ska ge svarta kanter
   — aldrig en omflödad komposition som ingen sett innan den står inför publik.

   TYPOGRAFISKT GOLV 28px. Salens bakre rad läser på håll; projektet har redan
   mätdisciplinen från vägskyltarnas 1/10-test. Inget som bär betydelse sätts
   mindre. Golvet är kodat som --golv och används, inte bara dokumenterat.

   INGA TUNNA LJUSA LINJER. Projektorer klipper svärta och äter hårstreck;
   allt som ska synas är minst 2px och hellre en tonplatta än en linje.
   =========================================================================== */

@font-face {
  font-family: "Titillium Web"; font-weight: 700; font-style: normal;
  src: url("fonter/titillium-bold.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Inter"; font-weight: 400; font-style: normal;
  src: url("fonter/inter-regular.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Inter"; font-weight: 600; font-style: normal;
  src: url("fonter/inter-semibold.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Inter"; font-weight: 700; font-style: normal;
  src: url("fonter/inter-bold.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Playfair Display"; font-weight: 400; font-style: normal;
  src: url("fonter/playfair-regular.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Playfair Display"; font-weight: 400; font-style: italic;
  src: url("fonter/playfair-italic.woff2") format("woff2"); font-display: block;
}

/* font-display: block och inte swap. Ett typsnittsbyte mitt under kvällen på
   en 150-tumsduk är mer störande än en kort blockering vid start — och
   filerna ligger bredvid sidan, så blockeringen mäts i millisekunder. */

:root {

  --plommon:      #241023;
  --plommon-panel:#2E1531;
  --plommon-djup: #1A0B1A;
  --magenta:      #D22E89;
  --magenta-dov:  #8C1F5C;
  --teal:         #2C5F6E;
  --raknat:       #37A96B;  /* räknat distrikt — se kommentar vid .karta */
  --vit:          #FFFFFF;
  --dov:          rgba(255, 255, 255, 0.58);
  --dovare:       rgba(255, 255, 255, 0.30);
  --panel:        rgba(255, 255, 255, 0.055);
  --panel-kant:   rgba(255, 255, 255, 0.11);

  --golv: 1.75rem;          /* 28px — typografiskt golv, se huvudet */
  --spar: 0.16em;           /* spärrning i versal, samma som tidningen */

  --mjuk: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
  /* ⚠ INGEN NÄSTLAD calc() I EN min(). Ritytan sattes tidigare som
     `--skala: min(calc(100vw / 1920), calc(100vh / 1080))` och multiplicerades
     sedan in i font-size. Safari klarar inte den nästlingen: hela
     deklarationen blir ogiltig, rotstorleken faller tillbaka på 16 px, och den
     1920 px breda duken renderas i full storlek på en telefonskärm i stället
     för att skalas ned. Uppmätt i Chromium fungerade det — felet syntes bara
     på riktig hårdvara.

     Nu sätts rotstorleken direkt ur två rena viewport-enheter, utan calc och
     utan custom property i beräkningsvägen:
        1920 / 120 = 16  ⇒  16/1920 av bredden = 0,83333vw
        1080 / 67,5 = 16 ⇒  16/1080 av höjden  = 1,48148vh
     Duken är därmed 120 × 67,5 rem och brevlådas av sig själv i vilken
     proportion som helst. */
  font-size: min(0.83333vw, 1.48148vh);
  background: var(--plommon-djup);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--plommon-djup);
  color: var(--vit);
  font-family: "Inter", system-ui, sans-serif;
  /* Tabulära siffror överallt. En räknare vars siffror byter bredd hoppar i
     sidled vid varje uppdatering, och på 150 tum är det omöjligt att inte se. */
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  cursor: none;               /* muspekaren hör inte hemma på duken */
}

kbd {
  font-family: "Inter", monospace;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 0.3rem;
  padding: 0.1em 0.45em;
}

/* ── Den gemensamma ritytan ───────────────────────────────────────────────
   Både startvyn och duken sitter i samma låda, så de delar exakt geometri och
   startknappen hamnar där blicken redan är. */
.start, .duk {
  width: 120rem;    /* 1920 px vid full skala */
  height: 67.5rem;  /* 1080 px vid full skala */
  position: relative;
  overflow: hidden;
  /* Projektorns egen ljusfördelning: mitten ljusare än hörnen. Utan den läser
     ytan som en platt färgplatta i stället för en lysande duk — samma
     iakttagelse som bär valvaka-annonsens skärm-UI. */
  background:
    radial-gradient(ellipse 70% 80% at 50% 42%,
                    rgba(210, 46, 137, 0.17), rgba(210, 46, 137, 0) 72%),
    var(--plommon);
}
.duk[hidden] { display: none; }

/* ── Startvyn ─────────────────────────────────────────────────────────── */
.start { display: grid; place-items: center; }
.start[hidden] { display: none; }
.start-inner { text-align: center; max-width: 72rem; }

.start-rubrik {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: 7.5rem;
  line-height: 1.04;
  margin: 1.5rem 0 0;
  letter-spacing: -0.015em;
}
.start-rubrik em { font-style: italic; color: var(--magenta); }
.start-under { font-size: 2.25rem; color: var(--dov); margin: 1.25rem 0 3rem; }

.start-knapp {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: var(--spar);
  text-transform: uppercase;
  color: var(--vit);
  background: var(--magenta);
  border: none;
  border-radius: 0.5rem;
  padding: 1.4rem 4rem;
  cursor: pointer;
  transition: transform 180ms var(--mjuk), background 180ms var(--mjuk);
}
.start-knapp:hover, .start-knapp:focus-visible {
  transform: translateY(-0.15rem);
  background: #E4409B;
  outline: none;
}

.start-lista {
  list-style: none;
  padding: 0;
  margin: 3.5rem auto 0;
  max-width: 58rem;
  text-align: left;
  font-size: var(--golv);
  line-height: 1.55;
  color: var(--dov);
}
.start-lista li { margin-bottom: 0.9rem; padding-left: 1.6rem; position: relative; }
.start-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--magenta);
}
.start-lista strong { color: var(--vit); font-weight: 600; }
/* Tangent och betydelse hör ihop och får aldrig brytas isär av en radbrytning
   — "?" på en rad och "hjälp" på nästa läses som två olika saker. */
.tangent { white-space: nowrap; }

/* ── Duken: femradig stapel ───────────────────────────────────────────── */
.duk {
  display: grid;
  /* Bara mandatraden är elastisk. Alla andra rader har fast höjd, så
     kompositionen inte kan flytta sig när en copyrad blir en rad längre.
     Kartspalten spänner över rad 2 OCH 3 — den behöver höjd som en enda rad
     inte kan ge. */
  /* ⚠ minmax(0, 1fr) OCH INTE 1fr. `1fr` betyder `minmax(auto, 1fr)`, och
     auto-minimum är min-content: en enda lång rad utan brytpunkter i
     mandatspalten — ett lottbesked, en marginalrad — tvingade därmed hela
     kolumnen bredare än duken och sköt ut kompositionen 800 px i sidled.
     Felet syntes inte i tomläget, bara när texten blev lång nog. */
  grid-template-columns: minmax(0, 1fr) 45rem;
  grid-template-rows: minmax(5.5rem, auto) 1fr 4.5rem 7.25rem;
  gap: 1rem;
  padding: 2rem 3rem 1.75rem;
  min-height: 0;
}
.huvud    { grid-column: 1 / 3; grid-row: 1; }
.spalt-mandat { grid-column: 1; grid-row: 2; }
.spalt-karta  { grid-column: 2; grid-row: 2 / 4; }
.marginal { grid-column: 1; grid-row: 3; }
.riksdag  { grid-column: 1 / 3; grid-row: 4; }

/* ── Etiketter ────────────────────────────────────────────────────────── */
.kicker {
  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-size: var(--golv);
  letter-spacing: var(--spar);
  text-transform: uppercase;
  color: var(--vit);
  margin: 0;
}
.kicker-dampad { color: var(--dov); }

/* ── Huvudet ──────────────────────────────────────────────────────────── */
.huvud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  min-width: 0;
}
/* Färskhetsindikatorns text VÄXER när något är fel — det är meningen, den ska
   eskalera i tyngd. Men den fick inte lägga sig över kartspaltens rubrik, och
   detaljraden får därför högst två rader. Modulen sätter sina egna absoluta
   px-storlekar; duken körs i exakt 1920×1080 där 1rem = 16px, så de
   sammanfaller — men golvet vaktas av grind-lasbarhet.py, inte av tur. */
.farskhet .vf-farskhet__detalj {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.huvud-titel { display: flex; align-items: center; gap: 1.25rem; }
.huvud-strek {
  width: 0.5rem; height: 2.6rem; border-radius: 0.25rem;
  background: var(--magenta);
}
.huvud-titel .kicker { font-size: 2.1rem; }

.huvud-distrikt {
  display: flex; align-items: baseline; gap: 0.6rem;
  justify-self: center;
}
.tal-stor {
  font-size: 4.25rem; font-weight: 700; line-height: 1;
  transition: color 400ms var(--mjuk);
}
.tal-av { font-size: 2rem; color: var(--dov); }
.huvud-distrikt .kicker { margin-left: 0.6rem; }

/* ── Färskhetsindikatorn ──────────────────────────────────────────────────
   TRE tillstånd, aldrig två. Eskaleringen sker i TYNGD, inte i larm: det är
   fest i salen, och en röd panikbanner vore fel svar på att val.se dröjer.
   Innehållet ägs av farskhet.js; här bor bara utseendet per tillstånd. */
.farskhet {
  justify-self: end;
  /* Taket finns för att texten växer när något är fel — och det är precis då
     den inte får lägga sig över kartspaltens rubrik. */
  max-width: 44rem;
  display: flex; align-items: center; gap: 1rem;
  font-size: var(--golv);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  transition: background 600ms var(--mjuk), border-color 600ms var(--mjuk),
              color 600ms var(--mjuk);
  text-align: right;
  line-height: 1.25;
}
.farskhet[data-tillstand="farskt"]      { color: var(--dov); }
.farskhet[data-tillstand="oforandrat"]  { color: var(--vit); background: var(--panel);
                                          border-color: var(--panel-kant); }
.farskhet[data-tillstand="ingen-kontakt"] {
  color: var(--vit);
  background: rgba(210, 46, 137, 0.16);
  border-color: var(--magenta-dov);
}
/* Ju längre tystnaden varat desto tyngre läses indikatorn — men den byter
   aldrig till en larmkulör. Sätts som data-grad="1..3" av farskhet.js. */
.farskhet[data-grad="2"] { font-size: 2rem; }
.farskhet[data-grad="3"] { font-size: 2.35rem; border-color: var(--magenta); }

.puls {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--raknat); flex: none;
}
.farskhet[data-tillstand="farskt"] .puls { animation: puls 2.6s ease-in-out infinite; }
.farskhet[data-tillstand="oforandrat"] .puls { background: var(--teal); }
.farskhet[data-tillstand="ingen-kontakt"] .puls { background: var(--magenta); }
@keyframes puls {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* ── Mitten ───────────────────────────────────────────────────────────── */
.spalt {
  background: var(--panel);
  border: 2px solid var(--panel-kant);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  /* min-height: 0 på VARJE nivå i kedjan. Utan det vägrar en flexbehållare
     krympa under sitt innehålls naturliga höjd, och listan spiller ut ur
     spalten i stället för att dela på utrymmet. */
  min-height: 0;
  overflow: hidden;
}

/* ── Mandatbågen ──────────────────────────────────────────────────────── */
/* Mandatspalten: bågen i en egen nästan kvadratisk ruta, resten till höger. */
.mandatgrid {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  min-width: 0;
  gap: 1.75rem;
  flex: 1; min-height: 0;
}
.hoger { display: flex; flex-direction: column; gap: 1rem; min-height: 0; min-width: 0; }

.bage-holk {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem; min-height: 0;
}
/* Ingen absolut positionering under bågen. Ledartexten låg tidigare ovanpå
   SVG:ns nedre kant och krockade med de understa mandatplatserna. */
.bage { width: 100%; flex: none; height: auto; display: block; overflow: visible; }
.bage-fot { text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }

/* Rösträkningens tal fyller ytan under bågen. Den var tom därför att
   halvcirkeln är bredare än hög — inte därför att någon valt det. */
.rakning {
  margin: 1.75rem 0 0; padding: 1.5rem 0 0;
  border-top: 2px solid var(--panel-kant);
  display: flex; flex-direction: column; gap: 1.1rem;
  width: 100%;
}
.rakning div { display: flex; flex-direction: column; gap: 0.1rem; align-items: center; }
.rakning dt { font-size: 1.75rem; color: var(--dov); }
.rakning dd { margin: 0; font-size: 3.2rem; font-weight: 700; line-height: 1.05; }

.bage-ledare { font-size: 3rem; font-weight: 700; line-height: 1.05; }
.bage-etikett { font-size: 1.75rem; color: var(--dov); }

/* ── VF-blocket ────────────────────────────────────────────────────────── */
.vf-block {
  border-left: 0.4rem solid var(--magenta);
  padding-left: 1.25rem;
  flex: none;
}
.vf-kicker { color: var(--magenta); font-size: 1.9rem; }
.vf-tal { display: flex; align-items: baseline; gap: 1.4rem; margin-top: 0.2rem;
         flex-wrap: nowrap; white-space: nowrap; }
.vf-andel { font-size: 4.2rem; font-weight: 700; line-height: 1; color: var(--vit);
            white-space: nowrap; }
.vf-mandat-holk { display: flex; align-items: baseline; gap: 0.6rem; }
.vf-mandat { font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--magenta); }
.vf-mandat-etikett { font-size: 1.75rem; color: var(--dov); }
.vf-diff { font-size: 1.9rem; font-weight: 600; color: var(--dov);
           white-space: nowrap; margin-top: 0.15rem; }
.vf-diff[data-riktning="upp"] { color: var(--raknat); }
.vf-diff[data-riktning="ned"] { color: var(--magenta); }
/* Väntetexten är en upplysning, inte ett tal: minsta tillåtna grad, får bryta
   rad, och aldrig i en färg som kan läsas som en riktning. */
.vf-diff[data-riktning="vantar"] {
  font-size: var(--golv); font-weight: 400; white-space: normal;
  color: var(--dovare);
}

/* En mandatplats. Färgen är det enda som rör sig när ett mandat byter ägare —
   platserna ligger still. Det gör övergången exakt lika korrekt bakåt som
   framåt, vilket flygande omsorterade punkter inte hade varit. */
.plats {
  transition: fill 520ms var(--mjuk), opacity 520ms var(--mjuk);
}
.plats-ny { animation: plats-tand 900ms var(--mjuk); }
@keyframes plats-tand {
  0%   { transform: scale(0.55); }
  55%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ── Partilistan ──────────────────────────────────────────────────────── */
.partier {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
  flex: 1; min-height: 0;
}
/* Raderna DELAR på det som blir över i stället för att ha fast höjd. Sju
   partier i dag, men antalet bestäms av feeden: bara rapportpartier redovisas
   i den preliminära räkningen, och ett parti kan tillkomma. En fast radhöjd
   spiller då ut ur spalten. */
.parti {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 8.75rem 4.25rem 4.5rem;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 0;
  min-height: 2.4rem;
}
.parti-namn {
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 2rem; letter-spacing: 0.06em;
}
.parti-spar {
  display: block;
  height: 1.5rem; border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.parti-fyllnad {
  display: block;
  height: 100%; width: 0;
  border-radius: 0.25rem;
  transition: width 900ms var(--mjuk), background 400ms var(--mjuk);
}
.parti-andel { font-size: 2.1rem; font-weight: 600; text-align: right; }
.parti-mandat { font-size: 2.4rem; font-weight: 700; text-align: right; }
.parti-diff { font-size: 1.8rem; text-align: right; color: var(--dov); }
.parti-diff[data-riktning="upp"]  { color: var(--raknat); }
.parti-diff[data-riktning="ned"]  { color: var(--magenta); }

/* Vårt eget parti får en diskret markering — inte en större text, utan ett
   band. Skärmen är vår, men den ska fortfarande läsas som ett valresultat
   och inte som en affisch. */
.parti[data-vf="ja"] { position: relative; }
.parti[data-vf="ja"]::before {
  content: ""; position: absolute; left: -1.25rem; top: 0.35rem; bottom: 0.35rem;
  width: 0.35rem; border-radius: 0.2rem; background: var(--magenta);
}

/* Ett parti under spärren ritas dämpat och får ett tankstreck i stället för
   en mandatsiffra. En utskriven etikett prövades men satt 22 px — under
   läsbarhetsgolvet — och staplade sig dessutom ovanpå siffran. Dämpningen och
   tankstrecket bär samma besked utan att bryta golvet. */
.parti[data-sparr="under"] { opacity: 0.42; }

/* Ett mandat som står på exakt lika jämförelsetal avgörs av LOTT. Det ska
   synas, för skärmen får inte påstå ett ägarskap den omöjligt kan känna. */
.lott-markering {
  font-family: "Titillium Web", sans-serif; font-size: 1.5rem;
  letter-spacing: var(--spar); color: var(--magenta);
}

/* ── Kartan ───────────────────────────────────────────────────────────────
   Grönt: #37A96B. Valt mot plommonbotten och mot magentan — en gul-grön eller
   neongrön vibrerar mot #D22E89 när de ligger intill på en projektor, medan
   en mättad blågrön läses som teal och krockar med bildtextfärgen. */
.spalt-karta { min-height: 0; }

/* Kartans ruta är FAST. Kartmodulen sätter allt i viewBox-enheter, så en ruta
   som växer och krymper med innehållet skalar om hela bilden — och därmed
   texten i den. */
/* Kartans bredd är satt så att dess NATURLIGA höjd ryms i rutan. Kartmodulen
   skalar annars ned hela bilden för att få plats, och då krymper legenden
   under läsbarhetsgolvet.
   Uppmätt 2026-09-12: viewBoxen blir bredd × ceil(16 + 0,9348·bredd·0,576925).
   640 ⇒ 640×362 i en ruta på 640×352 ⇒ meet-skala 0,972, och legendens 30 px
   landar på 29,2 — över golvet 28. Höjden tas ur distriktslistan, vars rader
   är `flex: 1 1 0` med 1,9rem som golv och därför ger efter först.
   Rutan var 34×19,5rem; kartan ritades då 528×306 px. Nu 622×352, alltså
   36 % mer yta — utöver att den ritades i HALV skala före 2026-09-12. */
.karta { flex: none; width: 40rem; height: 22rem; margin: 0 auto;
         display: grid; place-items: stretch; overflow: hidden; }
.karta svg { width: 100%; height: 100%; display: block; }

/* ── Distriktslistan ──────────────────────────────────────────────────────
   Ordnad efter distriktskod och ALDRIG efter resultat: en lista som sorterar
   om sig när siffrorna ändras går inte att följa med blicken på håll, och
   salen tappar vilket distrikt den tittade på. */
.distriktlista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
  flex: 1; min-height: 0;
}
/* Stapeln ligger BAKOM raden, inte som en egen kolumn.
   Uppmätt: det längsta distriktsnamnet, Torpshammar-Naggen-Munkbysjön, behöver
   532 px vid 28 px — och raden är 672 bred. Namn, stapel och tal fick aldrig
   plats bredvid varandra, och ett avkortat distriktsnamn är informationsförlust
   på en 150-tumsduk. Bakom raden kostar stapeln ingen bredd alls. */
.distrikt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.25rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  flex: 1 1 0; min-height: 1.9rem;
  overflow: hidden;
}
.distrikt-namn {
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.distrikt-fyllnad {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(210, 46, 137, 0.32);
  border-radius: 0.3rem;
  transition: width 900ms var(--mjuk);
  z-index: 0;
}
.distrikt-namn, .distrikt-tal { position: relative; z-index: 1; }
.distrikt-tal { font-size: 1.85rem; font-weight: 700; text-align: right;
                line-height: 1.15; white-space: nowrap; }
.distrikt[data-raknat="nej"] { opacity: 0.42; }
.distrikt[data-raknat="nej"] .distrikt-tal {
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.75rem; letter-spacing: var(--spar); color: var(--dov);
}
.karta svg { width: 100%; height: 100%; display: block; }

/* ── Marginalerna ─────────────────────────────────────────────────────── */
.marginal {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--panel);
  border: 2px solid var(--panel-kant);
  border-radius: 1rem;
  padding: 0 2rem;
}
.marginal-etikett { margin-right: 0.75rem; }
.marginal-rader {
  display: flex; gap: 2rem; align-items: baseline;
  font-size: 2rem; min-width: 0; flex: 0 1 auto; overflow: hidden;
}
.marginal-rad { white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden;
                text-overflow: ellipsis; }
/* Lottbeskedet är det längsta som kan stå här och får aldrig klippas — det är
   just det besked ytan INTE kan ersätta med en siffra. Det får därför inte
   heller radbrytas: remsan är 72 px och rymmer EN rad, och en andra rad spillde
   ut ur panelen i båda ändar. Kortformen ryms; se ritaMarginal. */
.marginal-rad.lott-markering { white-space: nowrap; font-size: 2rem; }
/* Etikettens spärrning slutar tätt inpå nästa ord och de två läser ihop.
   Ett eget avstånd här, inte det gemensamma. */
.lott-etikett { color: var(--magenta); margin-right: 1.75rem; }
.marginal-rad strong { font-weight: 700; }
.marginal-rad .tal { font-weight: 700; color: var(--magenta); }

/* ── Riksdagen ────────────────────────────────────────────────────────── */
.riksdag {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0 0.5rem;
}
.riksdag-huvud { display: flex; align-items: center; gap: 1.5rem; }
.riksdag-forlopp { display: flex; align-items: center; gap: 1rem; flex: 1; }
.forlopp-spar {
  flex: 1; height: 0.75rem; border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.09); overflow: hidden;
}
.forlopp-fyllnad {
  height: 100%; width: 0; background: var(--magenta);
  border-radius: 0.4rem; transition: width 900ms var(--mjuk);
}
.riksdag-procent { font-size: var(--golv); font-weight: 600; color: var(--dov); }

/* Partierna grupperade vänster→höger som i tidningarna: V S MP · C L KD M SD.
   Blockavdelaren är en tonplatta, inte en linje — se regeln om hårstreck. */
.riksdag-staplar {
  display: flex; align-items: flex-end; gap: 0.9rem;
  height: 5.5rem;
}
.rd-parti {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 0.4rem; height: 100%;
}
.rd-stapel {
  width: 100%; border-radius: 0.25rem 0.25rem 0 0;
  min-height: 0.4rem;
  transition: height 900ms var(--mjuk);
}
.rd-namn {
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.75rem; letter-spacing: 0.08em;
}
.rd-andel { font-size: 1.75rem; font-weight: 600; color: var(--dov); }
.rd-avdelare { width: 0.35rem; align-self: stretch; background: var(--panel-kant);
               border-radius: 0.2rem; flex: none; }

/* ── Foten ────────────────────────────────────────────────────────────── */

/* ── Överlägg ─────────────────────────────────────────────────────────── */
.overlagg {
  position: fixed; inset: 0;
  background: rgba(10, 4, 10, 0.86);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: var(--golv);
  z-index: 10;
  cursor: auto;
}
.overlagg[hidden] { display: none; }
.overlagg-hoger {
  place-items: stretch; justify-content: end;
  background: rgba(10, 4, 10, 0.55);
}

/* Hjälprutan hade ingen panel alls: texten låg direkt på den mörkade duken,
   och <dl> ger som förval tangenten på en rad och förklaringen indragen på
   nästa — en trappa som är svår att läsa och tar dubbelt så mycket höjd.
   Två kolumner i ett rutnät sätter tangent och förklaring på samma rad. */
.hjalp-inner {
  background: var(--plommon-panel);
  border: 2px solid var(--panel-kant);
  border-radius: 1rem;
  padding: 3rem 3.5rem;
  max-width: 76rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}
.hjalp-lista {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; gap: 1rem 2rem;
  margin: 1.5rem 0 0;
}
.hjalp-lista dt { margin: 0; }
.hjalp-lista dd { margin: 0; }
.hjalp-version { margin: 2rem 0 0; color: var(--dov); }

/* Krysset. Överläggens inre får `position: relative` så att knappen hänger i
   panelen och inte i fönstret — annars låg den mitt över kartan när panelen
   satt till höger. */
.hjalp-inner, .simpanel-inner { position: relative; }
.overlagg-kryss {
  position: absolute; top: 0; right: 0;
  width: 4rem; height: 4rem; line-height: 1;
  font-family: "Inter", system-ui, sans-serif; font-size: 3rem; font-weight: 400;
  color: var(--vit);
  background: rgba(255, 255, 255, 0.09);
  border: 2px solid var(--panel-kant); border-radius: 0.5rem;
  cursor: pointer;
}
.overlagg-kryss:hover, .overlagg-kryss:focus-visible {
  background: var(--magenta); outline: none;
}

.hjalp-not { font-size: var(--golv); color: var(--dov); max-width: 60rem; margin: 1.5rem 0 0; }

/* Anmärkningarna i klartext. Duken bär bara antalet — här står de hela, och
   det här är den enda ytan i huset där en operatörsrad får ta den plats den
   behöver utan att tränga undan valresultatet. */
.hjalp-noter {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 2px solid var(--panel-kant);
  max-width: 70rem;
}
.hjalp-noter[hidden] { display: none; }
.hjalp-noter-lista { margin: 1rem 0 0; padding-left: 2rem; }
.hjalp-noter-lista li { margin-bottom: 0.6rem; color: var(--dov); }
.hjalp-noter-lista li::marker { color: var(--magenta); }

/* Bandet högst upp: ETT besked i taget, prioriterat i app.js ritaBand().
   1,6rem låg under ytans eget golv på 28 px — remsan är dold när grinden
   mäter och slapp därför undan. Ett band som bär "de här siffrorna är inte
   skarpa" måste läsas från salens bakre rad, inte bara från datorn.

   ⚠ HÖJDEN ÄR EN BUDGET, INTE EN SMAKFRÅGA. Bandet ligger `fixed` ÖVER duken,
   och sidhuvudets färskhetsindikator börjar på 46 px. Med normal radhöjd och
   0,5rem luft blev bandet 59 px och skar av toppen på "MANUELLT INMATAT".
   Att i stället knuffa ned hela duken prövades och kostade mer än det smakade:
   +28 px överst sköt ut partilistans sista rad och distriktslistans
   uppsamlingsrad nedtill — ett spill som ingen grind ser. 1,1 i radhöjd och
   0,25rem luft ger 39 px, alltså 7 px marginal, utan att röra kompositionen. */
.manuell-markor {
  position: fixed; top: 0; left: 0; right: 0;
  text-align: center;
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: var(--golv); line-height: 1.1;
  letter-spacing: var(--spar); text-transform: uppercase;
  background: var(--magenta); color: var(--vit);
  padding: 0.25rem; z-index: 20;
}
.manuell-markor[hidden] { display: none; }
/* Övningsdata är det enda beskedet som får skrika. Att visa en testfil som
   valresultat är det värsta fel skärmen kan göra, så bandet pulserar tills
   någon gör något åt det — de andra två lägena står stilla. */
.manuell-markor[data-slag="test"] { animation: larmpuls 1.6s ease-in-out infinite; }
@keyframes larmpuls {
  0%, 100% { background: var(--magenta); }
  50%      { background: var(--magenta-dov); }
}

/* ── Anmärkningar på datan ────────────────────────────────────────────────
   Sitter i marginalfältets högerkant. Storleken är ytans golv, inte mindre:
   en upplysning som inte går att läsa är ingen upplysning. Bredden är
   begränsad så att marginalraderna — kvällens dramaturgi — behåller sin plats
   och inte trängs undan av en anmärkning. */
/* ⚠ ANMÄRKNINGEN VIKER FÖRST, ALDRIG MARGINALRADERNA. Båda bor i samma
   72 px-remsa, och de naturliga bredderna (455 + 363 px uppmätt) lämnar bara
   drygt 160 px över. Ett högt shrink-tal gör att det är den här noten som
   klipps när det blir trångt — marginalerna är kvällens dramaturgi och "NÄSTA
   MANDAT KD +…" utan sitt tal är en rad som inte längre säger något.
   Tangenten viker aldrig: den är hela vägen till texten. */
.datanoter {
  display: flex; align-items: baseline; gap: 0.7rem;
  flex: 0 100000 auto; min-width: 0; white-space: nowrap;
  font-size: var(--golv);
  color: var(--dov);
}
.datanoter[hidden] { display: none; }
.datanoter-markor { color: var(--magenta); font-weight: 700; flex: none; }
.datanoter-text { min-width: 0; overflow: hidden; }
.datanoter-tangent { font-size: var(--golv); flex: none; }

/* ── Versionsnotisen ──────────────────────────────────────────────────────
   Lugn, inte larmande: en ny version är goda nyheter, inte ett fel. Samma
   plats som lägesbeskeden, men magenta så den läses som "något händer nu". */
.versionsnotis {
  position: fixed; left: 50%; bottom: 2.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem;
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.9rem; letter-spacing: var(--spar); text-transform: uppercase;
  color: var(--vit);
  background: var(--magenta);
  padding: 0.9rem 2rem; border-radius: 0.5rem;
  z-index: 30;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
}
.versionsnotis[hidden] { display: none; }

/* Tangentkvittensen. Egen plats, nere till vänster — versionsnotisen står i
   mitten och helskärmshinten till höger, och tre saker i samma hörn läser som
   ett fel. Dämpad, inte magenta: en kvittens är ett livstecken, inte en
   nyhet. */
.kvittens {
  position: fixed; left: 2rem; bottom: 2rem;
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: var(--golv); letter-spacing: var(--spar); text-transform: uppercase;
  color: var(--vit);
  background: var(--plommon-djup); border: 2px solid var(--panel-kant);
  padding: 0.7rem 1.4rem; border-radius: 0.5rem;
  z-index: 25;
}
.kvittens[hidden] { display: none; }

.helskarmshint {
  position: fixed; right: 2rem; bottom: 2rem;
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.75rem; letter-spacing: var(--spar); text-transform: uppercase;
  color: var(--dov);
  background: var(--panel); border: 2px solid var(--panel-kant);
  padding: 0.7rem 1.4rem; border-radius: 0.5rem;
  z-index: 25;
}
.helskarmshint[hidden] { display: none; }
.helskarmshint kbd { font-size: 1.75rem; }

/* ── Rörelse ──────────────────────────────────────────────────────────────
   Hela ytan lever på animation. Den som vill lugna duken ska kunna det utan
   att tappa information — inget bärs av rörelse ensam. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}



/* ── Simulatorpanelen ─────────────────────────────────────────────────────
   Simulatorn är ett leverabel och inte ett testverktyg: Valmyndighetens egen
   generalrepetition stängde 2 september, så det här är enda sättet att se ytan
   köra ett helt förlopp — och enda sättet för kvällens värd att öva. */
.simpanel-inner {
  width: 96rem; max-height: 62rem; overflow: auto;
  background: var(--plommon-panel);
  border: 2px solid var(--panel-kant);
  border-radius: 1rem;
  padding: 2.5rem 3rem;
}
.simpanel-inner .kicker { font-size: 2.4rem; margin-bottom: 1rem; }
.simpanel-not { font-size: 1.75rem; color: var(--dov); margin: 0 0 2rem; line-height: 1.5; }
.simlista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.simlage {
  display: grid; grid-template-columns: 3.5rem 17.5rem minmax(0, 1fr);
  align-items: baseline; gap: 1.5rem;
  padding: 0.6rem 1rem; border-radius: 0.5rem;
  /* Raderna går att klicka på. Duken kör med `cursor: none`, så utan en
     synlig pekare här ser listan ut som ren text — och en meny man kan läsa
     men inte peka på är ingen meny. */
  cursor: pointer;
}
.simlage:hover { background: rgba(255, 255, 255, 0.07); }
.simlage[data-aktivt="ja"] { background: rgba(210, 46, 137, 0.22); }
.simlage kbd { font-size: 1.75rem; }
.simlage-titel {
  font-family: "Titillium Web", sans-serif; font-weight: 700;
  font-size: 1.9rem; letter-spacing: var(--spar); text-transform: uppercase;
}
.simlage-not { font-size: 1.75rem; color: var(--dov); line-height: 1.4; }

/* ═══ MOBILVY ════════════════════════════════════════════════════════════════
   Duken är en 1920×1080-komposition mätt för en 150-tumsprojektor. Skalad ned
   till en telefonskärm blir läsbarhetsgolvet 28 px till sex — den går att se
   men inte att läsa. Under 1000 px bredd byter ytan därför till en EGEN
   komposition med bara det man faktiskt vill veta när man går runt i salen:
   vårt eget utfall, hur långt räkningen kommit, och om siffrorna är färska.

   Kartan, mandatbågen och riksdagsremsan göms. Inte för att de är oviktiga,
   utan för att de kräver yta för att betyda något — en karta på 430 px säger
   mindre än ingen karta alls, och en halvcirkel med 35 punkter blir grus. */
@media (max-width: 1000px) {
  html { font-size: clamp(11px, 3.6vw, 17px); }

  body {
    display: block;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    cursor: auto;                     /* på en telefon finns ingen pekare att dölja */
    -webkit-text-size-adjust: 100%;   /* Safari förstorar annars text på egen hand */
  }

  .start, .duk {
    width: 100%;
    height: auto;
    min-height: 100vh;
  }

  /* Startvyn: knappen ska nås utan att scrolla. */
  .start { display: grid; place-items: center; padding: 2rem 1.5rem; }
  .start-rubrik { font-size: 4.4rem; }
  .start-under { font-size: 1.6rem; margin-bottom: 2rem; }
  .start-knapp { font-size: 1.8rem; padding: 1.1rem 2.5rem; }
  .start-lista { font-size: 1.3rem; margin-top: 2rem; }

  .duk {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1rem 2rem;
  }

  /* Huvudet staplas: titel, räknat-tal, färskhet. */
  .huvud { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .huvud-titel .kicker { font-size: 1.4rem; }
  .huvud-distrikt { justify-self: stretch; justify-content: flex-start; flex-wrap: wrap; }
  .tal-stor { font-size: 3rem; }
  .huvud-distrikt .kicker { font-size: 1.2rem; margin-left: 0.4rem; }
  /* Färskhetsindikatorn eskalerar i storlek på duken — på en telefon skulle
     samma eskalering äta halva skärmen. Här bär den sitt besked i en rad. */
  .farskhet { justify-self: stretch; max-width: none; text-align: left; padding: 0.6rem 0.9rem; }
  .farskhet[data-grad="2"], .farskhet[data-grad="3"] { font-size: 1.35rem; }
  .farskhet .vf-farskhet__etikett { font-size: 1.35rem; }
  .farskhet .vf-farskhet__detalj { font-size: 1.25rem; -webkit-line-clamp: 3; }

  /* Det som kräver yta för att betyda något göms hellre än krymps. */
  /* ⚠ Göm BÅGEN, inte bågens behållare. Rösträkningens tal bor i samma
     behållare, och att gömma .bage-holk tog bort dem också — det mest
     konkreta måttet på hur långt kvällen gått försvann från telefonen. */
  .spalt-karta,
  .riksdag,
  .bage,
  .bage-fot { display: none; }
  .bage-holk { display: block; }
  .rakning { border-top: none; padding-top: 0; margin-top: 0; }

  .spalt { padding: 1.25rem; }
  .spalt-mandat .kicker { font-size: 1.4rem; }
  /* Ordningen kastas om: på duken står bågen till vänster om partilistan, men
     i en enspaltig vy hamnar den — och rösträkningens tal — FÖRE vårt eget
     utfall. Det är fel sak överst på den yta man tittar på i mobilen. */
  .mandatgrid { display: flex; flex-direction: column; gap: 1.1rem; }
  .hoger { gap: 1.1rem; order: 1; }
  .bage-holk { order: 2; }

  /* Vårt eget utfall är hela poängen med att titta i mobilen. */
  /* Talen får brytas till två rader hellre än att klippas — "6 MA" är värre
     än "6 mandat" på egen rad. */
  .vf-tal { flex-wrap: wrap; white-space: normal; gap: 0.5rem 1.1rem; }
  .vf-andel { font-size: 4rem; }
  .vf-mandat { font-size: 3rem; }
  .vf-mandat-etikett { font-size: 1.3rem; }
  .vf-kicker { font-size: 1.5rem; }
  .vf-diff { font-size: 1.5rem; }

  .partier { gap: 0.5rem; }
  .parti {
    grid-template-columns: 3.2rem minmax(0, 1fr) 6.2rem 2.8rem 3rem;
    gap: 0.5rem;
    min-height: 2.6rem;
  }
  .parti-andel, .parti-mandat, .parti-diff { white-space: nowrap; }
  .parti-namn { font-size: 1.5rem; }
  .parti-andel { font-size: 1.5rem; }
  .parti-mandat { font-size: 1.8rem; }
  .parti-diff { font-size: 1.3rem; }
  .parti-spar { height: 1.1rem; }

  .rakning { flex-direction: row; justify-content: space-around; margin-top: 1.25rem; }
  .rakning dt { font-size: 1.2rem; }
  .rakning dd { font-size: 2.2rem; }

  .marginal { flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 1rem 1.25rem; }
  .marginal-rader { flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 1.4rem; }
  .marginal-etikett { font-size: 1.2rem; }

  /* Överläggen är byggda för tangentbord och hör inte hemma på en telefon. */
  .overlagg { font-size: 1.4rem; }
  .simpanel-inner { width: 100%; max-height: none; padding: 1.5rem; }
  .simlage { grid-template-columns: 2.5rem 1fr; }
  .simlage-not { grid-column: 1 / 3; }
}

/* Telefonen i liggande läge är för låg för den staplade vyn — då ryms bara
   det allra viktigaste. */
@media (max-width: 1000px) and (max-height: 500px) {
  .rakning, .marginal { display: none; }
}