/* ==========================================================================
   Listening — provbladet för hörförståelse (Engelska 1)

   Ett provhäfte på en bänk, inte ett formulär: vit yta, en tunn linje under
   titeln, generöst radavstånd mellan frågor, inga kort-i-kort, inga skuggor,
   ingen progressbar. Färg, typsnitt och mått hämtas uteslutande ur
   design-tokens.css. Inget av Skolverkets turkosa färg, sidfot eller bilder
   används. Laddas bara av provsidorna och hubben under courses/engelska-1/
   listening/, aldrig av andra kurssidor.
   ========================================================================== */

.lt-sheet {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}

.lt-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-accent);
}

.lt-instruction {
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-3);
}

/* ---- Del (Part 1–3): text + Notes i en grid ---- */

.lt-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  column-gap: var(--space-6);
  margin-top: var(--space-10);
}

.lt-part__title {
  grid-column: 1 / -1;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.lt-part__questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.lt-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* .lt-part är en grid-rad; utan detta sträcker grid .lt-notes (och därmed
     textarean, som tidigare hade flex: 1) till radens fulla höjd, dvs. lika
     högt som Part-frågornas kolumn (uppmätt ~909 px på 1440 px bredd). */
  align-self: start;
}

.lt-notes label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.lt-notes textarea {
  min-height: 8rem;
  /* var(--color-border) höll bara ~1,2:1 mot sidbakgrunden, se tests/kontrast.test.js. */
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font: inherit;
  padding: var(--space-2);
  resize: vertical;
}

.lt-pause {
  text-align: center;
  letter-spacing: 0.5em;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  margin: var(--space-10) 0;
}

/* ---- Flervalsfråga ---- */

.lt-q {
  border: none;
  padding: 0;
  margin: 0;
}

.lt-q__legend {
  display: block;
  width: 100%;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  padding: 0;
}

.lt-q__nr {
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-1);
}

.lt-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  /* Träffyta enligt WCAG 2.2 (2.5.8): uppmätt 41,6 px utan detta. */
  min-height: 44px;
  cursor: pointer;
}

.lt-opt__letter {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  width: 1.25rem;
  flex-shrink: 0;
}

.lt-opt__text {
  flex: 1;
}

.lt-opt__input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  /* var(--color-border) mätte bara 1,2–1,5:1 mot sidbakgrunden (under WCAG
     1.4.11:s krav på 3:1 för formulärkontroller) — se
     tests/kontrast.test.js. text-secondary ger 5,9–7:1 i alla lägen. */
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  margin: 0;
  flex-shrink: 0;
  position: relative;
  background: var(--color-bg-card);
}

.lt-opt__input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.lt-opt__input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--color-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lt-opt:focus-within {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* Frysning (ärende 03): ingen av browserns egna gråtoningsregler för
   disabled formulärkontroller får sänka kontrasten under AA — border- och
   textfärgerna ovan gäller oavsett låst/olåst. */
.lt-opt__input:disabled {
  opacity: 1;
}

/* ---- Kortsvar ---- */

.lt-sa {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lt-sa__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.lt-sa__hint {
  display: block;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-1);
}

.lt-sa textarea {
  /* var(--color-border) höll bara ~1,4:1 mot sidbakgrunden, se tests/kontrast.test.js. */
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
  font: inherit;
  padding: var(--space-2);
  resize: vertical;
}

.lt-sa textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

.lt-lines {
  display: none;
}

/* ---- Rad med Back/Print ---- */

.lt-back,
.lt-print {
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
}

.lt-print {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.lt-back:hover,
.lt-print:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lt-back:focus-visible,
.lt-print:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Lås (Answer key) ---- */

.lt-unlock {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-text-secondary);
}

.lt-unlock h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.lt-unlock p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.lt-unlock label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

#lt-pwd {
  display: block;
  width: 100%;
  max-width: 20rem;
  min-height: 44px;
  /* var(--color-border) höll bara ~1,2-1,5:1 mot sidbakgrunden, se
     tests/kontrast.test.js (samma fynd som .lt-opt__input i ärende 01). */
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
  font: inherit;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

#lt-pwd:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

/* Felmeddelandet är inte bara rött: texten själv säger vad som är fel, och
   var(--color-error) i mörkt läge håller bara ~3,6:1 mot sidbakgrunden
   (under WCAG 1.4.3:s 4,5:1) — samma fälla som .voc-badge--fel i
   vocational.css. color-text är säkert i båda lägena. */
.lt-error {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3);
  min-height: calc(1em * var(--line-height-normal));
}

/* Platsen reserveras även när raden är dold, så knappen inte hoppar när
   felbeskedet visas. visibility: hidden håller den utanför tillgänglighetsträdet. */
.lt-error[hidden] {
  display: block;
  visibility: hidden;
}

#lt-unlock-btn {
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  background: var(--color-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
}

#lt-unlock-btn:hover {
  background: var(--color-primary-hover);
}

#lt-unlock-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

#lt-unlock-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Bedömningsanvisning (upplåst) ---- */

.lt-key {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-text-secondary);
}

.lt-key h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.lt-key h2:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.lt-key h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: var(--space-6) 0 var(--space-3);
}

.lt-key__sub {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.lt-key__legend {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-6);
}

.lt-key__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.lt-key__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lt-key__nr {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.lt-key__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.lt-key__sa {
  font: inherit;
  white-space: pre-wrap;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-radius: var(--border-radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}

/* ---- Elevens eget kortsvar + kryssrutan för självrättning (ärende 03) ---- */

.lt-key__mysa {
  margin: 0 0 var(--space-4);
}

.lt-key__mysa-text {
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-radius: var(--border-radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  white-space: pre-wrap;
}

.lt-sa-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--color-text);
  cursor: pointer;
}

.lt-sa-point {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  margin: 0;
  flex-shrink: 0;
  position: relative;
  background: var(--color-bg-card);
}

.lt-sa-point:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.lt-sa-point:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--color-primary-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lt-sa-check:focus-within {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

/* ---- Per fråga: rätt/fel/obesvarat i ord OCH symbol (ärende 03) ----
   Symbolen är dekor (aria-hidden), ordet bär betydelsen. --color-error höll
   bara ~3,6:1 mot sidbakgrunden i mörkt läge (samma fälla som .lt-error), så
   "fel" och "inget" använder --color-text i stället — precis som för
   .lt-error räcker ordet ensamt, färgen är aldrig den enda signalen.
   --color-success håller ≥4,5:1 i båda lägena och används för "rätt". ---- */

.lt-verdict {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: var(--space-3) 0 0;
}

.lt-verdict--ratt {
  color: var(--color-success);
}

/* .lt-verdict--fel och .lt-verdict--inget sätter ingen egen färg: elementet
   bär alltid basklassen .lt-verdict också (se listening.js:s symbolOchText/
   renderMarkering), vars --color-text redan gäller. Två identiska
   deklarationer här vore dubblerad, inte överskriven, färg (granskningsfynd
   A4, ärende 03 → 04). tests/kontrast.test.js vaktar .lt-verdict, inte dessa
   två modifierare, av samma skäl. */

.lt-verdict--kortsvar {
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  font-style: italic;
}

/* ---- Resultatyta (ärende 03): ersätter låspanelen vid upplåsning ---- */

.lt-result {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-text-secondary);
}

.lt-result h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.lt-result h2:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.lt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lt-start-over {
  display: block;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
}

.lt-start-over:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lt-start-over:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Bekräftelser (ärende 03): obesvarade frågor och "Start over".
   <dialog>, aldrig webbläsarens confirm()/alert(). ---- */

.lt-confirm {
  border: none;
  border-radius: var(--border-radius-md);
  padding: var(--space-6);
  max-width: 26rem;
  width: calc(100% - var(--space-8));
  /* base.css sätter `* { margin: 0 }`, vilket släcker webbläsarens egen
     `dialog { margin: auto }` för centrering — utan denna rad hamnar
     bekräftelsen i sidans övre vänstra hörn i stället för mitten. */
  margin: auto;
  background: var(--color-bg-card);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.lt-confirm::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.lt-confirm p {
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.lt-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.lt-confirm__btn {
  font: inherit;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-sm);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
}

.lt-confirm__btn--primary {
  color: var(--color-primary-text);
  background: var(--color-primary);
  border: none;
}

.lt-confirm__btn--primary:hover {
  background: var(--color-primary-hover);
}

.lt-confirm__btn--secondary {
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-text-secondary);
}

.lt-confirm__btn--secondary:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lt-confirm__btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Smal skärm: en kolumn, Notes direkt under delens rubrik ---- */

@media (max-width: 60rem) {
  .lt-part {
    grid-template-columns: 1fr;
  }

  .lt-notes {
    order: 1;
    margin-bottom: var(--space-4);
  }

  .lt-part__questions {
    order: 2;
  }
}

/* ==========================================================================
   Listening-hubben (courses/engelska-1/listening/index.html) — ärende 04.
   Alltid öppen, ett kort per prov. <main> är sajtens vanliga
   class="course-content", .lt-hub styr bara det som ligger innanför.
   ========================================================================== */

.lt-hub__lead {
  color: var(--color-text-secondary);
  max-width: var(--content-width);
  margin: 0 0 var(--space-8);
}

.lt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.lt-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lt-card h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.lt-card p {
  color: var(--color-text-secondary);
  margin: 0;
}

.lt-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.lt-card__level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.lt-card__level:hover {
  /* base.css rad 47 sätter samma color-egenskap på alla a:hover, med högre
     specificitet än en vanlig .lt-card__level-regel utan :hover. Utan denna
     rad blir länktexten osynlig mot sin egen hover-bakgrund (Impeccable-fynd:
     1 till 1 kontrast, samma färg på text och bakgrund). */
  color: var(--color-primary-text);
  background: var(--color-primary-hover);
  text-decoration: none;
}

.lt-card__level:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Utskrift (ärende 05) — bygger vidare på css/print.css:s grundregler
   (svart på vitt, 10,5pt, @page-marginal, print.css självt rörs inte).
   Olåst: provbladet på högst två A4, knapprad/låspanel/bekräftelser dolda,
   Notes som tom marginal, kortsvar som skrivlinjer, alternativrutor tomma
   (eller ifyllda om eleven kryssat). Upplåst: samma blad med markeringar i
   ord (aldrig bara färg), bedömningsanvisningen börjar på ett eget blad.
   Måste stå FÖRE reduced-motion-blocket (sist i filen): ingen transition:/
   animation: förekommer i det här blocket.
   ========================================================================== */

@media print {

  /* ---- Skärmens verktyg och det (fortfarande låsta) facit-flödet döljs ---- */
  .site-header,
  .site-footer,
  .settings-panel,
  .lt-hint,
  .lt-back,
  .lt-print,
  .lt-unlock,
  dialog {
    display: none !important;
  }

  /* ---- Provbladet får hela sidans bredd ---- */
  .lt-sheet {
    max-width: none !important;
    padding: 0 !important;
  }

  /* ---- En utskriven A4-sida är smalare än @media (max-width: 60rem):s
     brytpunkt, så den skärmanpassade en-kolumns-layouten (Notes ovanför
     frågorna) slår annars igenom även i utskrift. Tvinga tillbaka grid:en
     med text + smal Notes-kolumn, så marginalen syns som en marginal och
     inte som ett eget stycke ovanför varje del. ---- */
  .lt-part {
    grid-template-columns: minmax(0, 1fr) 16rem !important;
  }
  .lt-notes {
    order: 0 !important;
    margin-bottom: 0 !important;
  }
  .lt-part__questions {
    order: 0 !important;
  }

  /* ---- En hel del får brytas, en enskild fråga aldrig mitt itu ---- */
  .lt-part {
    break-inside: auto;
  }
  .lt-q {
    break-inside: avoid;
  }

  /* ---- Tätare radavstånd: min-height:44px (WCAG 2.5.8:s träffyta) är ett
     skärmkrav utan mening på papper och gjorde ensamt att det olåsta
     provbladet tog 4 sidor i stället för högst 2 (uppmätt med page.pdf() i
     .scratch/listening/shots/print-pdf-05.mjs). Radavståndet krymps bara
     här, aldrig på skärmen. ---- */
  .lt-title {
    margin-bottom: var(--space-2) !important;
    padding-bottom: var(--space-1) !important;
  }
  .lt-instruction {
    margin-bottom: var(--space-2) !important;
  }
  .lt-part {
    margin-top: var(--space-4) !important;
  }
  .lt-part__title {
    margin-bottom: var(--space-2) !important;
  }
  /* Sista utväg (plan.md, "Risker"): fem frågor i en 1-kolumns lista räckte
     inte för två A4 (uppmätt 3 sidor för det olåsta bladet). Två spalter,
     samma grepp som print.css gör för .diag2__opts, halverar frågelistans
     höjd. Notes-kolumnen i .lt-part:s grid påverkas inte: spalterna ligger
     bara inuti frågekolumnen. */
  .lt-part__questions {
    display: block !important;
    column-count: 2 !important;
    column-gap: var(--space-4) !important;
  }
  .lt-q,
  .lt-sa {
    break-inside: avoid;
    margin-bottom: var(--space-2) !important;
  }
  .lt-q__legend {
    margin-bottom: var(--space-1) !important;
  }
  .lt-opt {
    min-height: auto !important;
    padding: 0 !important;
  }
  .lt-pause {
    margin: var(--space-3) 0 !important;
  }

  /* ---- Notes: en tom marginal, inte en ifylld skrivyta. Delens grid
     (text + smal Notes-kolumn) behålls så att marginalen syns som en
     marginal i stället för att hamna under frågorna. ---- */
  .lt-notes textarea {
    border: 1px solid #000 !important;
    min-height: 16mm !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* ---- Kortsvar: skrivlinjer när fältet är tomt, textarean med ram när
     eleven skrivit något. Chrome stödde :has()/:placeholder-shown i
     utskriftsläge som väntat vid testet (se rapporten i leveransen för
     eventuell avvikelse) — reservläget är att alltid visa linjerna under
     en låg textarea, ändra i så fall bara .lt-lines nedan till "display:
     block" utan :has()-villkoret. */
  .lt-sa textarea:placeholder-shown {
    display: none !important;
  }
  .lt-sa:has(textarea:placeholder-shown) .lt-lines {
    display: block !important;
  }
  .lt-lines span {
    display: block;
    height: 8mm;
    border-bottom: 1px solid #000;
  }
  .lt-sa textarea {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* ---- Alternativrutor: tomma fyrkanter, ifyllda om eleven kryssat.
     print-color-adjust håller bakgrundsfyllningen kvar hos skrivare som
     annars struntar i den, men informationen ligger ändå aldrig bara i
     färgen: en ifylld ruta har både svart bakgrund OCH en vit kryssform. ---- */
  .lt-opt__input {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 2px solid #000 !important;
    background: #fff !important;
  }
  .lt-opt__input:checked {
    background: #000 !important;
    border-color: #000 !important;
  }
  .lt-opt__input:checked::after {
    border-color: #fff !important;
  }

  /* ---- Bedömningsanvisningen börjar på ett eget blad ---- */
  .lt-key {
    break-before: page;
  }

  /* ---- Rätt/fel/obesvarat: redan ord + symbol på skärmen (renderMarkering
     i listening.js), här bara svart så det är läsbart i svartvitt ---- */
  .lt-verdict {
    color: #000 !important;
  }
}

/* ==========================================================================
   Mindre rörelse: sidan ärver övergångar från base.css (a) och
   components.css (.settings-toggle), så de stängs av här. Måste stå SIST i
   filen (granskningsfynd A1, ärende 05): en @media-regel skyddar bara
   deklarationer som redan finns högre upp i cascaden, inte sådana som
   kommer efter den.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lt-back,
  .lt-print,
  .lt-opt__input,
  .lt-card__level,
  .settings-toggle,
  .settings-option__switch,
  .settings-option__switch::after,
  .size-select__btn,
  .theme-select__btn,
  .site-footer__link {
    transition: none;
  }
}