/* Genererad: design/typsnitt.css + design/system.css. Skriv inte här. */
/* Typsnitt, självhysta. Genererad fil — skriv inte här.

   Hämtade från Google Fonts och sparade lokalt så att sidan inte gör något
   anrop till tredje part när den öppnas. Fraunces och Inter är båda
   SIL Open Font License 1.1.

   Regenereras med: python3 scripts/hamta_typsnitt.py
*/

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(design/typsnitt/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(design/typsnitt/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(design/typsnitt/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(design/typsnitt/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================================
   PARTITESTET.SE · RIKSDAGSVALET 2026 — DESIGNSYSTEM
   Riktning D · Blanketten. Fastställd 2026-08-09.

   Bärande idé: en valkompass är ett formulär man fyller i. Ett valt svar fylls
   därför med bläck, inte med accentfärg — det är den tydligaste markeringen som
   finns på en telefon i solljus, och det ser gjort ut snarare än klickat.

   Tre regler som inte får brytas:
     1. Partifärger används bara som markörruta och mätarfyllning. Aldrig text.
     2. Accenten har tre uppgifter: ämnesetikett, länk, faktarutans kant.
        Ett valt svar är alltid bläck. Accenten ska aldrig läsas som ett val.
     3. Ingenting svävar. Hårfina ramar, inga skuggor någonstans.

   Läses av index.html och kallor.html. Ändra här, inte i genererad HTML.
   ========================================================================== */

:root {
  /* --- ytor ------------------------------------------------------------- */
  --papper:      #F6F2EA;   /* botten */
  --kort:        #FFFDF8;   /* upphöjd yta, en nyans ljusare än pappret */
  --black:       #171310;   /* bläck: brödtext, valt svar, rubriker */
  --text-2:      #4E463B;   /* löptext i sekundär roll */
  --text-3:      #6E6357;   /* etiketter, metadata, småtext */
  --linje:       #D8CEBE;   /* avgränsande linje */
  --linje-svag:  #E0D6C4;   /* kortets kant */
  --matare:      #EBE2D3;   /* mätarens obelagda del */
  --accent:      #1C5E58;   /* djup teal — partipolitiskt obunden */
  --neutral:     #6B6257;   /* parti utan fastställd färg */

  /* --- typsnitt --------------------------------------------------------- */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- typskala --------------------------------------------------------- */
  --t-display: 2.25rem;   /* 36 — startsidans rubrik */
  --t-h1:      1.9375rem; /* 31 — resultatets rubrik */
  --t-fraga:   1.5625rem; /* 25 — påståendet */
  --t-h2:      1.25rem;   /* 20 — kortrubrik */
  --t-tal:     1.375rem;  /* 22 — matchningstalet */
  --t-brod:    0.9375rem; /* 15 */
  --t-ui:      0.90625rem;/* 14.5 — svarsrader */
  --t-liten:   0.8125rem; /* 13 */
  --t-mini:    0.6875rem; /* 11 */
  --t-etikett: 0.65625rem;/* 10.5 — versal etikett */

  /* --- mått ------------------------------------------------------------- */
  --r:      8px;    /* standardradie */
  --r-kort: 9px;
  --r-ruta: 3px;    /* kryssruta */
  --r-chip: 5px;    /* partimarkör */
  --rad:    48px;   /* minsta tryckyta */
  --matt:   34rem;  /* läsbredd */
}

/* ============================ grund ====================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--t-brod);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.pt-serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.018em; }
.pt-tal   { font-variant-numeric: tabular-nums; }
.pt-tyst  { color: var(--text-3); }

/* Fokus ska synas. Tangentbord och skärmläsare är inte ett specialfall. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================ skal ======================================= */

.pt-sida {
  max-width: var(--matt);
  margin: 0 auto;
  padding: 1.25rem 1.125rem 2.5rem;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.pt-vaxer { flex: 1; }

/* Dokumentets signatur: den svarta regeln överst. */
.pt-topp {
  border-top: 2.5px solid var(--black);
  padding: 0.5625rem 0 0.6875rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--t-etikett);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}
.pt-topp > :last-child { color: var(--text-3); font-weight: 500; }

/* Namnet till vänster i sidhuvudet, när det leder hem. Ska se ut precis som
   texten den ersätter — en understruken accentlänk i versaler hade dragit blicken
   från frågan, som är det man är där för. Att den går att trycka på visar sig i
   pekaren och i understrykningen vid hovring. */
.pt-topp__hem {
  background: none;
  border: 0;
  /* Träffytan växer med padding och tas tillbaka med lika stor negativ marginal,
     så att knappen går att träffa med en tumme utan att sidhuvudet blir högre
     eller ordet flyttar sig en enda pixel. */
  padding: 0.75rem 0.375rem;
  margin: -0.75rem -0.375rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.pt-topp__hem:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Språkreglaget. Ligger i sidhuvudet på de skärmar där man ännu inte börjat
   svara. Valt språk fylls med bläck, samma språk som ett valt svar — och av
   samma skäl: det ska synas på armlängds avstånd vilket som gäller. */
.pt-sprak {
  display: inline-flex;
  border: 1px solid var(--linje);
  border-radius: var(--r-ruta);
  overflow: hidden;
  flex: 0 0 auto;
}
.pt-sprak__val {
  min-width: 30px;
  min-height: 24px;
  padding: 0 0.375rem;
  background: var(--kort);
  border: 0;
  font-family: inherit;
  font-size: 0.59375rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
}
.pt-sprak__val + .pt-sprak__val { border-left: 1px solid var(--linje); }
.pt-sprak__val[aria-pressed="true"] { background: var(--black); color: var(--papper); }

/* På en pekskärm är 30×24 px för litet för att träffa säkert med tummen, och
   reglaget är det första en icke-svensktalande behöver hitta. Ytan växer till
   44 px höjd på beröringsenheter. Rutan ser likadan ut på skärmen — det är
   greppytan som blir större, inte typografin. */
@media (pointer: coarse) {
  .pt-sprak__val {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.625rem;
  }
}

/* Fråga som ännu inte översatts. Hellre svensk text med en tydlig markering än
   en lucka som får den engelska sidan att se fullständig ut. */
.pt-oovers {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--t-mini);
  color: var(--text-3);
  font-style: italic;
}

.pt-fot {
  border-top: 1px solid var(--linje);
  padding-top: 0.75rem;
  margin-top: 0.875rem;
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--text-3);
}
.pt-navrad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--linje);
  padding-top: 0.875rem;
  margin-top: 0.875rem;
  font-size: var(--t-liten);
}

/* ============================ typografi ================================== */

.pt-display, .pt-h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 1.5rem 0 0.75rem;
}
.pt-display { font-size: var(--t-display); }
.pt-h1      { font-size: var(--t-h1); }
.pt-lede    { font-size: var(--t-brod); line-height: 1.58; color: var(--text-2); margin: 0 0 0.75rem; }
.pt-lede--s { font-size: var(--t-liten); }

.pt-etikett {
  font-size: var(--t-etikett);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

.pt-lank {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.pt-lank:hover { text-decoration-thickness: 2px; }

/* ============================ kort ======================================= */

.pt-kort {
  background: var(--kort);
  border: 1px solid var(--linje-svag);
  border-radius: var(--r-kort);
  padding: 0.9375rem 1rem;
  margin-bottom: 0.5625rem;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pt-kort--fylld { background: var(--black); border-color: var(--black); color: var(--papper); }
.pt-kort__k {
  font-size: var(--t-etikett);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.pt-kort--fylld .pt-kort__k { color: #B9AF9E; }
.pt-kort__t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-h2);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.25rem;
}
.pt-kort__b { font-size: var(--t-liten); line-height: 1.45; color: var(--text-2); }
.pt-kort--fylld .pt-kort__b { color: var(--linje); }

/* Den påbörjade körningen. Ligger överst bland korten och ska läsas som en
   fortsättning, inte som ett tredje test: accentkanten skiljer den från de två
   valen utan att ta deras plats i hierarkin.

   Kanten är samma grepp som .pt-fakta och .pt-ruta redan använder, och rätas
   av på vänstersidan precis som de — en rak accentlinje mot ett rundat hörn
   hade sett ut som ett påklistrat undantag i stället för samma hus. */
.pt-kort--fortsatt {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-kort) var(--r-kort) 0;
}
.pt-kort--fortsatt .pt-kort__t { color: var(--accent); }

/* ============================ framsteg =================================== */

.pt-framsteg { height: 5px; background: var(--matare); margin: 0.75rem 0 0; }
/* Skalas i stället för att ändra bredd: en breddändring tvingar fram en ny
   layoutberäkning per bildruta, en transform gör det inte. Ser identiskt ut. */
.pt-framsteg > i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

/* ============================ frågan ===================================== */

.pt-amne {
  display: inline-block;
  font-size: var(--t-etikett);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
}
.pt-fraga {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-fraga);
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin: 0.875rem 0 1.125rem;
}

/* Svarsraden. Hel rad, minst 48 px — vid 50 frågor är det skillnaden mellan
   att orka svara färdigt och att lägga ifrån sig telefonen. */
.pt-svar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--rad);
  background: var(--kort);
  border: 1.5px solid var(--linje);
  border-radius: var(--r);
  padding: 0.5rem 0.875rem;
  margin-bottom: 0.4375rem;
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 500;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.pt-svar:hover { border-color: var(--text-3); }
.pt-svar__ruta {
  width: 17px; height: 17px;
  border: 1.5px solid #C3B7A3;
  border-radius: var(--r-ruta);
  flex: 0 0 auto;
}
.pt-svar[aria-pressed="true"] {
  background: var(--black);
  border-color: var(--black);
  color: var(--papper);
  font-weight: 600;
}
.pt-svar[aria-pressed="true"] .pt-svar__ruta { background: var(--papper); border-color: var(--papper); }

/* Faktarutan. Får visas i frågeflödet — positionskällor får det aldrig. */
.pt-fakta {
  background: var(--kort);
  border: 1px solid var(--linje-svag);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 0.8125rem 0.875rem;
  margin-top: 0.9375rem;
  font-size: var(--t-liten);
  line-height: 1.52;
  color: var(--text-2);
}
.pt-fakta > b {
  display: block;
  font-size: 0.59375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.375rem;
  font-weight: 700;
}

/* Tangentbordsmarkering. Piltangenterna flyttar den; svarsraderna visar inga
   siffror, så markeringen måste synas utan att likna ett valt svar. */
.pt-svar.pt-fokus { border-color: var(--accent); border-width: 2px; }

/* Viktnivån. Tredje läget «spelar ingen roll» ligger i navraden — det är ett
   avslut på frågan, inte en inställning. */
.pt-vikt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 40px;
  margin-top: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.25rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--t-liten);
  color: var(--text-3);
  text-align: left;
  cursor: pointer;
}
.pt-vikt__ruta {
  width: 17px; height: 17px;
  border: 1.5px solid #C3B7A3;
  border-radius: var(--r-ruta);
  flex: 0 0 auto;
  position: relative;
}
.pt-vikt[aria-pressed="true"] { color: var(--black); font-weight: 600; }
.pt-vikt[aria-pressed="true"] .pt-vikt__ruta { background: var(--black); border-color: var(--black); }
.pt-vikt[aria-pressed="true"] .pt-vikt__ruta::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--papper);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ============================ kärnfrågor ================================= */

.pt-grupp {
  font-size: var(--t-etikett);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  padding-bottom: 0.3125rem;
  border-bottom: 1px solid var(--linje);
}
.pt-karn {
  display: flex;
  align-items: flex-start;
  gap: 0.6875rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5625rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--t-liten);
  line-height: 1.38;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pt-karn__ruta {
  width: 17px; height: 17px;
  border: 1.5px solid #C3B7A3;
  border-radius: var(--r-ruta);
  flex: 0 0 auto;
  margin-top: 1px;
  position: relative;
}
.pt-karn[aria-pressed="true"] { font-weight: 600; }
.pt-karn[aria-pressed="true"] .pt-karn__ruta { background: var(--black); border-color: var(--black); }
.pt-karn[aria-pressed="true"] .pt-karn__ruta::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--papper);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.pt-karn__svar { margin-left: auto; font-size: var(--t-etikett); color: #9A8F7E; flex: 0 0 auto; padding-left: 0.5rem; }

/* ============================ resultat =================================== */

.pt-parti {
  background: var(--kort);
  border: 1px solid var(--linje-svag);
  border-radius: var(--r-kort);
  padding: 0.75rem 0.8125rem;
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
}
.pt-parti--nara { border-color: var(--black); border-width: 1.5px; }
.pt-parti__rad { display: flex; align-items: center; gap: 0.625rem; }
/* Partimarkören måste rymma både «V» och «Nyans». Fast bredd spräcker den. */
.pt-chip {
  min-width: 27px;
  height: 27px;
  padding: 0 0.375rem;
  border-radius: var(--r-chip);
  display: inline-grid;
  place-items: center;
  font-size: var(--t-mini);
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pt-parti__namn { font-size: 0.875rem; font-weight: 600; flex: 1; letter-spacing: -0.005em; }
.pt-parti__tal {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-tal);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pt-matare { display: block; height: 5px; background: var(--matare); margin-top: 0.625rem; }
.pt-matare > i {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
/* Märket ligger på underraden, inte bredvid namnet — annars kläms långa
   partinamn ihop till tre rader medan en etikett tar halva bredden. */
.pt-parti__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: var(--t-mini);
  color: var(--text-3);
  margin-top: 0.5rem;
}

.pt-marke {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--linje);
  border-radius: var(--r-ruta);
  padding: 2px 6px;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================ votering =================================== */
/* Rösttabellen i partidetaljen. Ja, nej och avstår skiljs med form och ord,
   inte med färg — färgerna är upptagna av partierna. */

.pt-votering {
  display: block;
  border-top: 1px solid var(--linje);
  margin-top: 0.625rem;
  padding-top: 0.5625rem;
}
.pt-votering > b {
  display: block;
  font-size: 0.59375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 0.4375rem;
}
.pt-rostrad { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.pt-rost {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.59375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px 2px 2px;
  border: 1px solid var(--linje);
  border-radius: var(--r-ruta);
  color: var(--text-3);
}
.pt-rost > i {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 15px;
  padding: 0 3px;
  border-radius: 2px;
  color: #fff;
  font-style: normal;
  font-size: 0.5625rem;
}
.pt-rost--ja    { border-color: var(--black); color: var(--black); }
.pt-rost--nej   { border-style: dashed; }
.pt-rost--avstar { opacity: 0.6; }
.pt-votering__f {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-mini);
  line-height: 1.45;
  color: var(--text-3);
}

/* ============================ sakområden ================================= */
/* En rad per område: vem som ligger närmast just där. Medvetet tunnare än
   partiraden — det är en fördjupning av resultatet, inte resultatet självt. */

.pt-omrade {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--linje);
}
.pt-omrade__namn { flex: 1; font-size: var(--t-liten); font-weight: 500; }
.pt-omrade__tal {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ============================ knappar ==================================== */
/* Ifylld yta = handling, samma språk som ett valt svar. */

.pt-knapprad { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.pt-knapp {
  min-height: var(--rad);
  padding: 0.625rem 1.125rem;
  background: var(--black);
  color: var(--papper);
  border: 1.5px solid var(--black);
  border-radius: var(--r);
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 600;
  cursor: pointer;
}
.pt-knapp + .pt-knapp { background: var(--kort); color: var(--black); border-color: var(--linje); }
.pt-knapp:hover { border-color: var(--accent); }

/* Knappen som lämnar sidan. Ett ankare och inte en button, eftersom den
   navigerar: då fungerar mittenklick, «öppna i ny flik» och kopiera adress
   som användaren väntar sig. Pilen säger att man lämnar Partitestet, vilket
   annars är svårt att se på en knapp som ser ut som alla andra. */
a.pt-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  text-decoration: none;
}
a.pt-knapp::after {
  content: "↗";
  font-size: 0.9em;
  opacity: 0.7;
}

.pt-falt {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--papper);
  border: 1px solid var(--linje);
  border-radius: var(--r-ruta);
  font-family: inherit;
  font-size: var(--t-mini);
  color: var(--text-2);
}

/* ============================ dokumentsidor ============================== */
/* Källsidan. Samma system, längre läsning, ingen interaktion.               */

/* 52 rem gav 94 tecken per rad vid 768 px och 102 vid 1280 — långt över de
   60–75 som går att läsa utan att tappa raden. Bekvämt spann först. */
.pt-dok {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 5vw, 3rem) 6rem;
}
/* Utan egen line-height ärvde rubrikerna brödtextens 1,58, vilket gav 50 px
   radavstånd på 32 px text och ett hål mitt i varje tvåradig rubrik på mobil. */
.pt-dok h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0.5rem 0 1rem;
}
.pt-dok h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 3rem 0 0.25rem;
}
.pt-dok h2 + p { margin: 0.25rem 0 1.5rem; color: var(--text-3); }
.pt-dok h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.pt-dok a { color: var(--accent); text-underline-offset: 3px; }
.pt-dok code { font-size: 0.85em; }
/* Blocken låg tidigare kant i kant med bara en linje emellan, och femton
   partisvar i rad blev en enda grå massa. */
.pt-post { border-top: 1px solid var(--linje); padding: 1.5rem 0; }

/* Påståendet på en partisida. Bar samma vikt som partirubriken bredvid, och
   då gick det inte att se var en ny fråga började. Serifen och den grövre
   linjen ovanför säger att här börjar något nytt. */
.pt-fraga {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}

/* Partiet under påståendet. En nivå ned, alltså mindre — inte större. */
.pt-dok h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

/* «hämtad 2026-08-08» bröts mitt itu på mobil, åttiosex gånger per sida. */
.pt-datum { white-space: nowrap; }

/* Länkraderna med · som skiljetecken. Bryts en etikett mitt itu blir
   «MoD – / Mänskliga rättigheter och Demokrati» två poster för ögat. */
.pt-innehall a { white-space: nowrap; }

/* Enbokstavslänkar i partiraderna var 9×17 px. WCAG 2.5.8 kräver 24×24, och
   en tumme kräver mer. Ytan växer utan att raden flyttar sig. */
.pt-dok p > a { display: inline-block; padding: 0.35rem 0.25rem; margin: -0.35rem -0.25rem; }
.pt-m { color: var(--text-3); font-size: 0.875rem; margin: 0.2rem 0; }
.pt-anv { font-size: 0.875rem; margin: 0.5rem 0 0; }

/* Citatet ur källan, och partiets ståndpunkt i klartext under varje post på
   källsidan. Sätts i serifen eftersom det är någon annans ord och inte
   registrets — samma skillnad som mellan brödtext och blockcitat i en bok. */
.pt-citat {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
  padding: 0;
  color: var(--black);
}

.pt-standpunkt { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.pt-standpunkt strong { display: block; font-weight: 600; }
.pt-standpunkt span { display: block; color: var(--text-2); }

/* Raden som säger vilka partier som står var, före citaten. Ska gå att läsa
   som ett svar i sig — det är den enda rad ett sökresultat hinner visa. */
.pt-sammanfattning {
  /* Färgen måste stå här. `.pt-dok h2 + p` gör allt som följer direkt på en
     rubrik grått, och på ämnessidorna gjorde den regeln sidans enda svar till
     dess ljusaste text — medan samma klass efter en h3 blev nästan svart.
     Samma komponent såg olika ut beroende på vad som råkade stå ovanför. */
  color: var(--black);
  margin: 0.75rem 0 1rem;
  padding: 0.6875rem 0.875rem;
  background: var(--kort);
  border: 1px solid var(--linje-svag);
  border-radius: var(--r-ruta);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Innehållsförteckningen överst på långa sidor. */
.pt-innehall {
  margin: 0.75rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--text-2);
}

.pt-uppmaning { margin: 1.5rem 0; font-size: 0.9375rem; }
.pt-uppmaning a { font-weight: 600; }
.pt-ruta {
  background: var(--kort);
  border: 1px solid var(--linje-svag);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1rem 1.25rem;
}

/* Styckets egen marginal lades till rutans padding och gav 32 px uppe och nere
   mot 23 px i sidled. Rutan såg topptung och halvtom ut. */
.pt-ruta > :first-child { margin-top: 0; }
.pt-ruta > :last-child { margin-bottom: 0; }
.pt-dok table { border-collapse: collapse; font-size: 0.8rem; margin: 0.6rem 0; }
.pt-dok td, .pt-dok th { border: 1px solid var(--linje); padding: 0.15rem 0.5rem; text-align: center; }

/* ============================ rörelse ==================================== */

.pt-in { animation: pt-in 0.3s ease both; }
@keyframes pt-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Större skärm: pappret får en tydlig kant, inte utsmyckning. */
@media (min-width: 40rem) {
  :root { --t-display: 2.75rem; --t-fraga: 1.75rem; }
  .pt-sida { padding: 2rem 2rem 3rem; }
}

/* Nedräkningen på startsidan.
   Ingen ram, ingen ruta, ingen ikon. En linje över och typografi under, i
   samma register som resten av riktning D. Talet bär tyngden själv och
   behöver ingen behållare för att synas. */
.pt-nedrakning {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  /* Luft under, annars läses den lilla raden som en rubrik till ingressen
     som följer direkt efter. */
  margin: 1.125rem 0 1.375rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--linje);
}
.pt-nedrakning__stor {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
}
.pt-nedrakning__liten {
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
/* Efter valdagen är sidan ett arkiv och nedräkningen ska inte ta plats. */
.pt-nedrakning--efter {
  margin: 1.125rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--linje);
  font-size: var(--t-liten);
  color: var(--text-3);
}