/* =========================================================================
   web.css — skärmstil för läromedlet (skandinaviskt minimalt tema)
   Nära-monokromt: vitt/benvitt papper, nästan-svart text, EN dämpad blå
   accent. Ren system-sans, generöst med luft, hårfina linjer, platt och
   skarpt. Läsvänligt för vuxna andraspråksinläsare. Ljust + mörkt läge.

   Vill du ge texten mer karaktär kan du lägga till ett webbtypsnitt
   (t.ex. "Schibsted Grotesk") i --sans nedan — system-stacken är fallback.
   ========================================================================= */

:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, sans-serif;

  /* Ljust — benvitt papper, vita ytor, nästan-svart bläck, dämpad blå */
  --bg:        #f4f4f1;   /* benvit sidbakgrund */
  --surface:   #ffffff;   /* arket / kort / ytor */
  --ink:       #15171a;   /* nästan svart */
  --ink-soft:  #5d636a;   /* dämpad text */
  --accent:    #2f57d6;   /* en återhållen blå */
  --accent-dk: #1f3ea6;
  --line:      #e6e6e2;   /* hårfin avgränsning */
  --facit-bg:  #f3f5fb;   /* facitruta — svag blå ton */
  --facit-ln:  #d8e0f3;
  --note-bg:   #f9f7f1;   /* lärarnotis — svagt varm */
  --note-ln:   #e6dfce;

  --r:    10px;           /* kort-radie */
  --r-sm: 7px;            /* mindre radie */
  --shadow-card: 0 1px 2px rgba(18,20,24,.04), 0 6px 20px rgba(18,20,24,.05);

  --maxw: 42rem;          /* läsbredd på textsidor */
  --ovw:  60rem;          /* GEMENSAM bredd på översiktssidorna (start + galleri) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0e0f11;  /* nära-svart, ej marin */
    --surface:   #16181b;
    --ink:       #e8eaed;
    --ink-soft:  #9aa1a8;
    --accent:    #7da2ff;
    --accent-dk: #acc2ff;
    --line:      #24262a;
    --facit-bg:  #14181f;
    --facit-ln:  #2a3550;
    --note-bg:   #1b1914;
    --note-ln:   #45402a;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

html { font-size: 18px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.text-package {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  background: var(--surface);
  min-height: 100vh;
  box-shadow: var(--shadow-card);
}
@media (prefers-reduced-motion: no-preference) {
  .text-package { animation: tp-fade .5s ease both; }
  @keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Sidhuvud ---- */
.tp-header { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; margin-bottom: 2.2rem; }
.tp-domain {
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.7rem; font-weight: 600; color: var(--accent);
  margin: 0 0 0.6rem;
}
.tp-title {
  font-size: 2.15rem; line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 0.7rem; color: var(--ink);
}
.tp-meta {
  font-size: 0.78rem; color: var(--ink-soft); margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.tp-meta span { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.65rem; }
.tp-level { font-weight: 600; color: var(--accent-dk); }
.tp-audience {
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent-dk); margin: 0.7rem 0 0;
}

/* Nedladdnings-/växlingslänkar på textsidan */
.tp-actions {
  font-size: 0.78rem; margin: 0.9rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
}
.tp-actions-label { color: var(--ink-soft); }
.tp-actions .tp-toggle { border-style: dashed; margin-left: 0.2rem; }

/* ---- Ljud: "Lyssna på texten" (mp3 genereras med tts.sh) ----
   Ligger direkt ovanför brödtexten (efter bilden) — hårfin ram så att
   spelaren hänger ihop med texten den läser upp. */
.tp-listen {
  font-size: 0.78rem; margin: 0 0 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.55rem 0.9rem; background: var(--bg);
}
.tp-listen-label { color: var(--ink-soft); font-weight: 600; }
.tp-listen audio { height: 2.1rem; flex: 1 1 14rem; max-width: 22rem; }

/* ---- Bild ---- */
.tp-figure { margin: 0 0 2rem; }
.tp-figure img { width: 100%; height: auto; border-radius: var(--r-sm); display: block; }
.tp-figure figcaption {
  font-size: 0.72rem; color: var(--ink-soft);
  margin-top: 0.5rem; font-style: italic;
}

/* ---- Brödtext ---- */
.tp-body { font-size: 1.02rem; }
.tp-body h2 {
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 2.6rem 0 0.7rem; color: var(--ink);
}
.tp-body h3 { font-size: 1.02rem; font-weight: 600; margin: 1.5rem 0 0.4rem; }
.tp-body p { margin: 0 0 1.05rem; }
.tp-body a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tp-body a:hover { text-decoration-color: var(--accent); }
.tp-body ol, .tp-body ul { padding-left: 1.4rem; }
.tp-body li { margin-bottom: 0.5rem; }

/* Ordlista som tabell */
.tp-body table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95rem; }
.tp-body th, .tp-body td {
  text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.tp-body th { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); border-bottom-color: var(--ink-soft); }

/* ---- Ordlista hopfälld på webben (sveps in i <details> av doc.html-
   skriptet; PDF:erna byggs utan JS och påverkas inte) ---- */
.tp-ordlista {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  margin: 2.2rem 0; background: var(--bg);
}
.tp-ordlista summary {
  cursor: pointer; padding: 0.65rem 1rem;
  color: var(--accent-dk);
}
.tp-ordlista summary:hover { color: var(--accent); }
.tp-ordlista summary h2 { display: inline; margin: 0; font-size: 1.05rem; color: inherit; }
.tp-ordlista-count { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); }
.tp-ordlista-body { padding: 0 1rem; }
.tp-ordlista-body table { margin-top: 0.25rem; }

/* Facitruta (syns bara i lärarversion) */
.facit {
  background: var(--facit-bg); border: 1px solid var(--facit-ln);
  border-left: 3px solid var(--accent); border-radius: var(--r-sm);
  padding: 0.9rem 1.2rem; margin: 1.5rem 0;
}
.facit > :first-child { margin-top: 0; }
.facit h3 { color: var(--accent-dk); }

/* Lärarnotis */
.larare-only {
  background: var(--note-bg); border: 1px dashed var(--note-ln);
  border-radius: var(--r-sm); padding: 0.9rem 1.2rem; margin: 1.5rem 0;
  font-size: 0.95rem;
}
.larare-only::before {
  content: "För läraren"; display: block;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 0.45rem;
}

/* ---- Sidfot ---- */
.tp-footer { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.tp-sources { font-size: 0.8rem; color: var(--ink-soft); }
.tp-sources summary { cursor: pointer; font-weight: 600; color: var(--accent-dk); }
.tp-sources ul { margin: 0.6rem 0; }
.tp-factcheck { font-style: italic; }
.tp-foot-note { font-size: 0.72rem; color: var(--ink-soft); margin-top: 1.2rem; }

/* ---- Gemensam knapp-/pill-stil — hårfin, monokrom tills man rör vid den ---- */
.tp-actions a, .level-links a, .site-nav a, .level-switch a, .category-switch a {
  text-decoration: none; color: var(--accent-dk);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.8rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tp-actions a:hover, .level-links a:hover, .site-nav a:hover, .level-switch a:hover, .category-switch a:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ---- Startsida / index ---- */
body.page-index .text-package { max-width: var(--ovw); }
body.page-index .tp-body > p { max-width: 44rem; } /* håll inledningstexten läsbar */
.index-grid {
  display: grid; gap: 0.8rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.person-card {
  position: relative;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.person-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow-card); }
/* Täckande länk: gör hela kortet klickbart till huvudtexten utan att kapsla
   in nivålänkarna (som lyfts ovanför med z-index och förblir klickbara). */
.person-card .pc-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.person-card .pc-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.person-card .pc-thumb {
  /* Kvadratisk i stället för fast låg höjd: de flesta bilder är stående
     porträtt (upp till ~1:1.7) och en låg landskapsruta kapade ansiktena.
     object-position nära toppen eftersom ansiktet sitter i bildens övre del. */
  width: 100%; aspect-ratio: 1 / 1; height: auto; display: block;
  object-fit: cover; object-position: center 12%;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.person-card .pc-body { min-width: 0; padding: 1.1rem 1.3rem 1.25rem; }
.person-card h2 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; border: none; padding: 0; }
.person-card .pc-domain { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 0.5rem; }
.person-card .pc-intro { font-size: 0.95rem; margin: 0 0 0.9rem; color: var(--ink-soft); }
.level-links { position: relative; z-index: 2; font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Diskreta chips för extra texttyper (utöver porträttet) — medvetet nedtonade
   så att korten inte blir plottriga; accentfärg först vid hover/fokus. */
.pc-types { position: relative; z-index: 2; margin-top: 0.55rem; font-size: 0.72rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pc-types a {
  text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.1rem 0.6rem;
  transition: color .15s ease, border-color .15s ease;
}
.pc-types a:hover, .pc-types a:focus-visible { color: var(--accent-dk); border-color: var(--accent); }

/* ---- Sökruta på startsidan ---- */
.search-bar { margin: 1.75rem 0 0.25rem; }
.search-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: 0.7rem 0.95rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.search-input::placeholder { color: var(--ink-soft); }
.search-count { font-size: 0.85rem; color: var(--ink-soft); margin: 0.5rem 0 0; min-height: 1.1em; }

/* ---- Ordbank (samlad ordlista per nivå) ---- */
.ob-export {
  font-size: 0.9rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.75rem 1rem; margin: 1.5rem 0;
}
.ob-table td:first-child { font-weight: 600; }
.ob-table .ob-src { font-size: 0.85rem; }
.ob-table .ob-src a { color: var(--ink-soft); }

/* ---- Rapportera faktafel ---- */
.tp-report { margin: 0.85rem 0 0; font-size: 0.9rem; }
.tp-report a { color: var(--accent); text-decoration: none; }
.tp-report a:hover { text-decoration: underline; }
.report-cta { margin: 1.5rem 0; }
.report-btn {
  display: inline-block; font: inherit; font-size: 1rem; font-weight: 600;
  padding: 0.7rem 1.2rem; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; text-decoration: none; border: 1px solid var(--accent);
}
.report-btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.report-btn:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }

/* ---- Global meny — topplist som följer sidbakgrundens bredd ----
   Ligger som första elementet i .text-package och fyller kortets topp
   genom att negera dess sid- (1.5rem) och toppadding (3rem). */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  margin: -3rem -1.5rem 2.4rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.85rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
.site-nav a[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Tillbaka-länk högst upp på textsidan → tillbaka till alla berättelser */
.tp-back { font-size: 0.8rem; margin: 0 0 0.8rem; }
.tp-back a { text-decoration: none; color: var(--ink-soft); }
.tp-back a:hover { color: var(--accent); text-decoration: underline; }

/* ---- Texttyp-väljare (Porträtt / En dag i livet) — primär växel ---- */
.category-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0.9rem 0 0; font-size: 0.82rem; font-weight: 600;
}
.category-switch .cs-label { color: var(--ink-soft); }
.category-switch a.cs-current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Nivåväljare på textsidan ---- */
.level-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0.8rem 0 0; font-size: 0.8rem;
}
.level-switch .ls-label { color: var(--ink-soft); font-weight: 600; }
.level-switch a.ls-current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Helbredds-sektioner (bryter ut ur textspalten) ---- */
.full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; }

/* =========================================================================
   Porträttvägg — tät "vägg-i-vägg". Namnen ligger på en mörk toning OVANPÅ
   fotot, så de är läsbara mot vilket foto som helst. Följer ljust/mörkt läge.
   ========================================================================= */
.collage-grid {
  margin-top: 1.5rem; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 4px;
}
.collage-cell { min-width: 0; }
.collage-item {
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  text-decoration: none; background: var(--surface); aspect-ratio: 3 / 4;
}
.collage-item p, .tl-p p { margin: 0; } /* säkerhet om pandoc skulle slå in i <p> */
.collage-item img, .collage-noimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.collage-noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800;
  color: var(--accent); background: var(--bg);
}
.collage-item::after { /* mörk toning nedtill så namnet alltid syns (ligger på fotot) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12,18,22,0.85) 0%, rgba(12,18,22,0.30) 36%, rgba(12,18,22,0) 64%);
  transition: background 0.35s ease;
}
.collage-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0.7rem 0.7rem 0.6rem; display: flex; flex-direction: column; gap: 0.12rem;
}
.collage-name {
  color: #fff; font-weight: 700; font-size: 0.92rem; line-height: 1.12;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65);
}
.collage-dom {
  color: rgba(255,255,255,0.82); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease;
}
.collage-item:hover img, .collage-item:focus-visible img { transform: scale(1.06); }
.collage-item:hover::after, .collage-item:focus-visible::after {
  background: linear-gradient(to top, rgba(12,18,22,0.9) 0%, rgba(12,18,22,0.2) 50%, rgba(12,18,22,0) 80%);
}
.collage-item:hover .collage-dom, .collage-item:focus-visible .collage-dom { opacity: 1; transform: none; }
.collage-item:hover, .collage-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 2; }

/* =========================================================================
   Tidslinje — LODRÄT, integrerad i sidspalten (bryter inte ut). Personer i
   födelseårsordning, sicksack kring en mittlinje. Det lodräta avståndet
   (margin-top, satt inline av build.sh) speglar tiden mellan posterna.
   Historiska nedslag ligger centrerade på linjen. Skrollas nedåt.
   ========================================================================= */
.timeline-v { position: relative; max-width: 44rem; margin: 1.75rem auto 0.5rem; padding: 0.5rem 0 1.5rem; }
.timeline-v::before { /* mittlinjen */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; transform: translateX(-50%); background: var(--line);
}

/* Person — halv bredd, sicksackar vänster/höger kring linjen */
.tv-item { position: relative; width: 50%; box-sizing: border-box; }
.tv-left  { padding-right: 2.4rem; text-align: right; }  /* kortet hänger vid linjen, symmetriskt med högersidan */
.tv-right { margin-left: 50%; padding-left: 2.4rem; }

/* hårfin förbindelse från kortet in till linjen (centrerad på porträttet) */
.tv-item::after { content: ""; position: absolute; top: 1.85rem; width: 2.4rem; height: 1px; background: var(--line); }
.tv-left::after  { right: 0; }
.tv-right::after { left: 0; }

/* årsbricka som sitter mitt på linjen */
.tv-year {
  position: absolute; top: 1.85rem; z-index: 3;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.08rem 0.5rem; white-space: nowrap;
}
.tv-left  .tv-year { right: 0; transform: translate(50%, -50%); }
.tv-right .tv-year { left: 0;  transform: translate(-50%, -50%); }

/* kortet: porträtt närmast linjen + namn/område */
.tv-card { display: inline-flex; align-items: center; gap: 0.9rem; max-width: 100%; text-decoration: none; color: var(--ink); }
.tv-left  .tv-card { flex-direction: row-reverse; text-align: right; }
.tv-right .tv-card { flex-direction: row; text-align: left; }
.tv-card img, .tv-noimg {
  width: 3.7rem; height: 3.7rem; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  border: 1px solid var(--line); background: var(--bg);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tv-noimg { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; color: var(--accent); }
.tv-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tv-name { font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.tv-d { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.tv-card:hover img, .tv-card:focus-visible img { transform: scale(1.06); border-color: var(--accent); box-shadow: 0 4px 14px rgba(18,20,24,0.18); }
.tv-card:hover .tv-name { color: var(--accent-dk); text-decoration: underline; }

/* Historiska nedslag — centrerad streckad bricka på linjen */
.tv-event { position: relative; text-align: center; padding: 0.2rem 0; }
.tv-event .tv-ey {
  display: inline-block; position: relative; z-index: 3;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-soft);
  background: var(--bg); border: 1px dashed var(--line); border-radius: 999px; padding: 0.12rem 0.7rem;
}
.tv-event .tv-etext { display: block; font-style: italic; font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); margin-top: 0.3rem; }

/* Smala skärmar: en sida, linjen till vänster */
@media (max-width: 46rem) {
  .timeline-v::before { left: 0.7rem; transform: none; }
  .tv-item { width: 100%; margin-left: 0; padding-left: 2.8rem; padding-right: 0; }
  .tv-left .tv-card, .tv-right .tv-card { flex-direction: row; text-align: left; }
  .tv-item::after { left: 0.7rem; right: auto; width: 2.1rem; }
  .tv-year { left: 0.7rem; right: auto; transform: translate(-50%, -50%); }
  .tv-event { text-align: left; padding-left: 2.8rem; }
}

/* =========================================================================
   Galleri — delad sida: tidslinje överst, porträttvägg under
   ========================================================================= */
body.page-galleri .text-package { max-width: var(--ovw); }
.gal-section { margin: 0 0 3.5rem; scroll-margin-top: 4.5rem; }
.gal-section--flush { margin-bottom: 0; }
.gal-section .gal-h {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 0.35rem; padding: 0; border: none; color: var(--ink);
}
.gal-section .gal-lead { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 1.25rem; max-width: 44rem; }

/* =========================================================================
   Utskrift från webbläsaren (Ctrl+P). Speglar print.css för PDF:erna:
   rensa bort navigering och småtext, lägg text på sida 1 och frågor på nästa,
   och spara papper. (PDF-nedladdningarna använder print.css separat.)
   ========================================================================= */
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #111; --ink-soft: #333; }
  body { background: #fff; }
  .site-nav, .category-switch, .level-switch,
  .tp-actions, .tp-back, .tp-meta, .tp-audience, .tp-figure,
  .tp-listen, .search-bar, .tp-report { display: none !important; }
  .text-package { max-width: 100%; box-shadow: none; border: none; margin: 0; padding: 0; }
  a { color: #111; text-decoration: none; }
  /* Ordlistan utfälld i utskrift (JS:et i doc.html öppnar den vid
     beforeprint) — här tas bara webbens ram/bakgrund bort */
  .tp-ordlista { border: none; background: none; margin: 0; }
  .tp-ordlista summary { padding: 0; color: #111; }
  .tp-ordlista summary h2 { display: block; font-size: 1.2rem; margin: 2.6rem 0 0.7rem; }
  .tp-ordlista-count { display: none; }
  .tp-ordlista-body { padding: 0; }
  /* Rubrik + berättelse (+ ordlista) på första sidan; frågor/diskussion på nästa */
  #läsförståelsefrågor { break-before: page; page-break-before: always; }
  /* Källor hör till lärarversionen — bort i elevutskrift */
  body.audience-elev .tp-footer { display: none !important; }
}

/* =========================================================================
   Självrättande frågor (quiz) — bara webbens elevversion (quiz.js).
   Temats stil: blå accent för fokus (globala :focus-visible), dämpat
   grönt/rött med god kontrast — och alltid ✓/✗ som symbol, så att färgen
   aldrig är den enda bäraren av rätt/fel.
   ========================================================================= */
:root {
  --quiz-ratt:    #176633;   /* rätt — dämpad grön */
  --quiz-ratt-bg: #ecf6ef;
  --quiz-ratt-ln: #bedfca;
  --quiz-fel:     #b3261e;   /* fel — dämpad röd */
  --quiz-fel-bg:  #fbeeed;
  --quiz-fel-ln:  #efc7c4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --quiz-ratt:    #85d99e;
    --quiz-ratt-bg: #15241b;
    --quiz-ratt-ln: #2c4a36;
    --quiz-fel:     #ff9d94;
    --quiz-fel-bg:  #2b1715;
    --quiz-fel-ln:  #553029;
  }
}

/* Instruktionsrad under rubriken (injiceras av quiz.js) */
.quiz-hint { font-size: 0.85rem; color: var(--ink-soft); margin: -0.2rem 0 1rem; }

/* Flervalsalternativ blir klickbara — hårfin ram redan FÖRE hover, så att
   de ser klickbara ut precis som sidans övriga interaktiva element */
.quiz-option {
  cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.18rem 0.6rem;
  margin-left: -0.6rem;
  transition: background-color .12s ease, border-color .12s ease;
}
.quiz-option:hover { background: var(--bg); border-color: var(--accent); }
.quiz-klar .quiz-option { cursor: default; }
.quiz-klar .quiz-option:hover { background: transparent; border-color: var(--line); }
.quiz-option.quiz-ratt, .quiz-klar .quiz-option.quiz-ratt:hover {
  background: var(--quiz-ratt-bg);
  border-color: var(--quiz-ratt-ln);
  color: var(--quiz-ratt); font-weight: 600;
}
.quiz-option.quiz-fel {
  background: var(--quiz-fel-bg);
  border-color: var(--quiz-fel-ln);
  color: var(--quiz-fel);
}

/* Ja/nej-knappar under varje delpåstående */
.quiz-jn { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.55rem; }
.quiz-jn-btn {
  font: inherit; font-size: 0.78rem; line-height: 1.3;
  padding: 0.22rem 0.75rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
}
.quiz-jn-btn:hover { border-color: var(--accent); color: var(--accent-dk); }
.quiz-jn-btn:disabled { cursor: default; opacity: 0.55; }
.quiz-jn-btn.quiz-ratt {
  background: var(--quiz-ratt-bg); border-color: var(--quiz-ratt-ln);
  color: var(--quiz-ratt); font-weight: 600; opacity: 1;
}
.quiz-jn-btn.quiz-fel {
  background: var(--quiz-fel-bg); border-color: var(--quiz-fel-ln);
  color: var(--quiz-fel);
}

/* Symbol (✓/✗) + dold text för skärmläsare */
.quiz-mark { font-weight: 700; }
.quiz-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Diskret räknare längst ner i frågesektionen */
.quiz-status {
  font-size: 0.8rem; color: var(--ink-soft);
  border-top: 1px solid var(--line);
  margin-top: 1.4rem; padding-top: 0.7rem;
}

/* Vid utskrift av webbsidan: göm quizets knappar, instruktion och räknare,
   och låt alternativen se ut som vanlig listtext */
@media print {
  .quiz-jn, .quiz-status, .quiz-mark, .quiz-hint { display: none !important; }
  .quiz-option {
    border: none !important; background: none !important;
    padding: 0 !important; margin-left: 0 !important;
    color: #111 !important; font-weight: 400 !important;
  }
}