/* ─────────────────────────────────────────────────────────────
   My Working Day — Engelska 1, förberedelse inför examinationen
   "Describe Your Working Day"

   Egen sida, egen fil. Ingen dra-och-släpp: bara riktiga button/select/
   label, synlig fokus, rätt/fel visas med text OCH ikon, aldrig bara färg.

   var(--color-border) mäter under 3:1 mot bakgrunden i engelska-1:s
   palett (se vault-gotcha om listening.css) — alla nya interaktiva
   kontroller här använder var(--color-text-secondary) för ramar i
   stället.
   ───────────────────────────────────────────────────────────── */

/* ---- Toolbar: programval + utskriftsknappar ---- */

.wd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-6) 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.wd-toolbar__label {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
}

.wd-program-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wd-program-btn {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-text-secondary);
  border-radius: var(--border-radius-md);
  background: var(--color-bg-card);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.wd-program-btn:hover {
  border-color: var(--color-primary);
}

.wd-program-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.wd-program-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.wd-program-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.wd-print-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

/* ---- Uppgiften: quote, checklista, matris ---- */

.wd-task-quote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-light);
  font-style: italic;
  color: var(--color-text);
}

.wd-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}

.wd-checklist li {
  margin-bottom: var(--space-2);
}

.wd-checklist label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.wd-checklist input[type="checkbox"] {
  margin-top: 0.2em;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.wd-matrix {
  margin: var(--space-6) 0;
}

.wd-matrix summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3) 0;
}

.wd-matrix summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.wd-matrix table {
  margin-top: var(--space-4);
  border-collapse: collapse;
  width: 100%;
}

.wd-matrix th,
.wd-matrix td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-3);
  text-align: left;
  font-size: var(--font-size-sm);
  vertical-align: top;
}

.wd-matrix th {
  background: var(--color-bg-alt);
}

/* ---- Ordlistan ---- */

.wd-wordlist__title {
  font-size: var(--font-size-md);
  margin: var(--space-6) 0 var(--space-2);
}

/* ---- Övningsrader (skärm) ---- */

.wd-exercise__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

.wd-instruction {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.wd-funfact {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
}

.wd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.wd-row:last-child {
  border-bottom: none;
}

.wd-row__word {
  min-width: 10rem;
  font-weight: var(--font-weight-semibold);
}

.wd-row__label {
  min-width: 12rem;
  cursor: pointer;
}

.wd-row__number {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  min-width: 1.5rem;
}

.wd-row__choices {
  display: flex;
  gap: var(--space-2);
}

.wd-choice {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}

.wd-choice--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.wd-select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
}

.wd-select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

.wd-select--small {
  width: 4.5rem;
}

.wd-feedback {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-left: auto;
}

.wd-feedback--ok {
  color: var(--color-success);
}

.wd-feedback--fail {
  color: var(--color-error);
}

.wd-exercise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.wd-summary {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* ---- Exercise 4: "Read and answer" (läsdel) ---- */

.wd-reading-text {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

.wd-reading-text:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.wd-reading-text__title {
  font-size: var(--font-size-md);
  margin: 0 0 var(--space-2);
}

.wd-reading-text__body {
  margin: 0 0 var(--space-4);
}

.wd-reading-question {
  border: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.wd-reading-question legend {
  padding: 0;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}

.wd-reading-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wd-reading-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  cursor: pointer;
}

.wd-reading-option:hover {
  border-color: var(--color-primary);
}

.wd-reading-option:focus-within {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

.wd-reading-option input[type="radio"] {
  margin-top: 0.2em;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.wd-reading-question .wd-feedback {
  display: block;
  margin: var(--space-2) 0 0;
}

.wd-reading-privacy {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

#wd-reading-summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Skrivdelen "Write your text" är dold tills vidare (Chris beställning
   2026-09-22, ticket C — "Exercise 4, 5 och Write your text passade inte
   riktigt här"). ENDA stället som slår på den igen: ta bort eller kommentera
   bort denna regel. Döljer sektionen i alla lägen (skärm OCH utskrift), vilket
   också räcker för att göra allt innanför onåbart med tangentbord och
   frånvarande i varje utskriftsläge: en förälder med display:none visar
   aldrig sina barn, oavsett vilken display de själva har. Utkastlogiken i
   working-day.js (initWritingSection) rörs inte, den körs som förut, bara
   osynlig. ---- */
#writing-section {
  display: none !important;
}

/* ---- Write your text: layout, box, actions ---- */

.wd-writing-grid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-8);
  margin: var(--space-6) 0;
}

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

.wd-starters__part {
  font-size: var(--font-size-md);
  margin: var(--space-5) 0 var(--space-2);
}

.wd-starters__part:first-child {
  margin-top: 0;
}

.wd-starters__hint {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.wd-starters__levelup {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 var(--space-2);
}

.wd-starter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wd-starter-list li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.wd-starter-list li:last-child {
  border-bottom: none;
}

.wd-writing-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}

.wd-writing-textarea {
  width: 100%;
  min-height: 18rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.wd-writing-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wd-word-counter {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.wd-writing-live {
  min-height: 1.4em;
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-info);
}

.wd-draft-restored {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--border-radius-md);
  background: var(--color-warning-light);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.wd-save-note {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.wd-name-field {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 20rem;
}

.wd-name-field label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.wd-name-field input {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
}

.wd-name-field input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

.wd-writing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.wd-writing-actions .btn {
  min-height: 44px;
}

.wd-download-link {
  text-decoration: none;
}

.wd-download-link:hover {
  color: var(--color-primary-text);
}

.wd-download-link.wd-link--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.wd-download-reason {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  min-height: 1.4em;
}

.wd-clear-confirm {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-error);
  border-radius: var(--border-radius-md);
  background: var(--color-error-light);
}

.wd-clear-confirm p {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-medium);
}

.wd-clear-confirm .btn {
  min-height: 44px;
}

#writing-section .wd-print-buttons {
  margin-top: var(--space-6);
}

#wd-print-writingsheet {
  min-height: 44px;
}

/* ---- Print-only element: dolt på skärm som standard ---- */

.wd-print-only {
  display: none;
}

/* ---- Skrivdelens pappersartefakter: syns aldrig på skärm, bara under sin
   egen body-klass i utskrift (se @media print nedan) ---- */
.wd-writingsheet,
.wd-mytext-print {
  display: none;
}

.wd-blank-box {
  display: inline-block;
  width: 4mm;
  height: 4mm;
  border: 1px solid #000;
  margin-right: 2mm;
  vertical-align: middle;
}

.wd-blank-line {
  display: inline-block;
  width: 18mm;
  border-bottom: 1px solid #000;
  margin: 0 1.5mm;
}

.wd-print-line {
  margin: 0 0 1.5mm;
}

.wd-ex2-instruction {
  margin: 0 0 1mm;
}

.wd-print-blank {
  font-size: 0.85em;
  color: #000;
}

.wd-ex2-print__col p {
  margin: 0 0 1.5mm;
}

/* ═════════════════════════════════════════════════════════════
   Utskrift
   Print worksheet: ordlistan + övning 1–5, tomma svarsfält, högst 2 A4.
   Print example texts: Level E + Level C för valt program, högst 1 A4.
   print.css (delad, sist i <head>) sköter grundreglerna (svart på vitt,
   10,5pt, dolda knappar/header/sidebar). Den forcerar page-break-inside:
   avoid på .exercise/.info-box/li — för break inte varje övning i sin
   helhet (annars riskerar arbetsbladet bli fler än 2 sidor), höjs
   specificiteten här (body.wd-printing-worksheet .exercise) så att bara
   enskilda rader/meningar hålls ihop.
   ═════════════════════════════════════════════════════════════ */

@media print {

  .wd-screen-only {
    display: none !important;
  }

  .wd-print-only {
    display: block;
  }

  .wd-print-blank {
    display: inline;
  }

  /* ---- Verktygsraden och sidrubriken syns aldrig på papper: arbetsbladet
     ska bara vara ordlistan + övningarna, exempeltexterna bara de två
     texterna ---- */
  .wd-toolbar,
  .section-header {
    display: none !important;
  }

  /* ---- Utskriftshuvud: på arbetsbladet och skrivbladet, ersätter den
     dolda sidrubriken ovan med titel, programnamn och en namnrad. Döljs
     för exempeltexterna och "Print my text" (den senare har sitt eget
     lilla huvud med det ifyllda namnet i stället). ---- */
  body.wd-printing-worksheet .wd-print-header,
  body.wd-printing-writingsheet .wd-print-header,
  body.wd-printing-reading .wd-print-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin: 0 0 1mm;
    font-size: var(--font-size-sm);
    line-height: 1;
    font-weight: var(--font-weight-medium);
  }

  .wd-print-header__name {
    white-space: nowrap;
  }

  body.wd-printing-examples .wd-print-header,
  body.wd-printing-mytext .wd-print-header {
    display: none !important;
  }

  /* ---- Arbetsblad: bara ordlista + övningar ---- */
  body.wd-printing-worksheet #task-section,
  body.wd-printing-worksheet #examples-section {
    display: none !important;
  }

  /* ---- Exempeltexter: bara de två texterna ---- */
  body.wd-printing-examples #task-section,
  body.wd-printing-examples #wordlist-section,
  body.wd-printing-examples #exercises-section {
    display: none !important;
  }

  /* ---- Print reading: bara #wd-reading-print (de sex texterna + frågorna
     för valt program). Övning 1–3 döljs; #wd-ex4 självt hålls synligt så att
     #wd-reading-print (dess barn) syns, men header/instruktion/skärmversion/
     knappar/resultatrad/integritetsrad inom #wd-ex4 döljs var för sig. ---- */
  body.wd-printing-reading #task-section,
  body.wd-printing-reading #examples-section,
  body.wd-printing-reading #wordlist-section,
  body.wd-printing-reading #wd-ex1,
  body.wd-printing-reading #wd-ex2,
  body.wd-printing-reading #wd-ex3 {
    display: none !important;
  }
  body.wd-printing-reading #wd-ex4 > .exercise__header,
  body.wd-printing-reading #wd-ex4 .wd-exercise__title,
  body.wd-printing-reading #wd-ex4 .exercise__question,
  body.wd-printing-reading #wd-ex4 .wd-exercise-actions,
  body.wd-printing-reading #wd-reading-summary,
  body.wd-printing-reading .wd-reading-privacy {
    display: none !important;
  }

  /* ---- Skrivblad och "Print my text": inget av ovanstående, bara
     writing-sections egna pappersartefakter (se nedan) ---- */
  body.wd-printing-writingsheet #task-section,
  body.wd-printing-writingsheet #examples-section,
  body.wd-printing-writingsheet #wordlist-section,
  body.wd-printing-writingsheet #exercises-section,
  body.wd-printing-mytext #task-section,
  body.wd-printing-mytext #examples-section,
  body.wd-printing-mytext #wordlist-section,
  body.wd-printing-mytext #exercises-section {
    display: none !important;
  }

  /* ---- Tillåt att en hel övning delas mellan sidor: bara enskilda
     rader/meningar hålls ihop, annars ryms arbetsbladet inte på 2 A4 ---- */
  body.wd-printing-worksheet .exercise {
    break-inside: auto;
    page-break-inside: auto;
  }
  .wd-row,
  .wd-print-line,
  .wd-ex2-instruction {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ---- Tätare radavstånd överlag: print.css:s 1.35 är ett skärmvänligt
     mellanläge, arbetsbladet har inte utrymme för det ---- */
  body.wd-printing-worksheet {
    line-height: 1.1 !important;
  }

  /* ---- Tätare rader och mindre marginaler runt varje övning ---- */
  body.wd-printing-worksheet .exercise {
    margin: 1mm 0 !important;
  }
  body.wd-printing-worksheet .exercise__header {
    padding: 0.5mm var(--space-2) !important;
  }
  body.wd-printing-worksheet .exercise__body {
    padding: 1mm var(--space-2) !important;
  }
  body.wd-printing-worksheet .exercise__question {
    margin-bottom: var(--space-2) !important;
  }

  /* ---- Ordlistan i två spalter ---- */
  body.wd-printing-worksheet #wd-wordlist-content .vocab-list {
    column-count: 2;
    column-gap: 8mm;
    margin: 0 !important;
  }
  body.wd-printing-worksheet #wd-wordlist-content .vocab-list__item {
    break-inside: avoid;
    padding: 0.5mm 0 !important;
    grid-template-columns: 1fr 1fr;
  }
  body.wd-printing-worksheet .wd-wordlist__title {
    margin: var(--space-2) 0 var(--space-1) !important;
  }

  /* ---- Övning 1: två spalter, radform i stället för knappar ---- */
  body.wd-printing-worksheet #wd-ex1-body {
    column-count: 2;
    column-gap: 8mm;
  }
  body.wd-printing-worksheet #wd-ex1-body .wd-row {
    padding: 0.3mm 0 !important;
    border-bottom: none !important;
    display: block;
  }
  body.wd-printing-worksheet #wd-ex1-body .wd-row__word {
    min-width: 0;
    margin-right: 2mm;
  }
  body.wd-printing-worksheet .wd-print-blank {
    display: block;
  }

  /* ---- Övning 2: två spalter, engelska vänster / svenska höger ---- */
  .wd-ex2-print.wd-print-only {
    display: flex;
    gap: 12mm;
  }
  .wd-ex2-print__col {
    flex: 1;
  }

  /* ---- Arbetsbladet är nu bara övning 1–3: den nya övning 4 (läsdelen)
     har ett eget utskriftsläge, "Print reading", och ska inte följa med
     här. ---- */
  body.wd-printing-worksheet #wd-ex4 {
    display: none !important;
  }

  /* ---- Rubriker och rubrikrader tätare överlag ---- */
  body.wd-printing-worksheet .wd-exercise__title,
  body.wd-printing-examples .wd-exercise__title {
    margin-bottom: var(--space-1) !important;
  }
  body.wd-printing-worksheet h2,
  body.wd-printing-examples h2 {
    margin: 0 0 var(--space-2) !important;
  }
  body.wd-printing-worksheet hr,
  body.wd-printing-examples hr,
  body.wd-printing-reading hr,
  body.wd-printing-writingsheet hr,
  body.wd-printing-mytext hr {
    display: none !important;
  }

  /* ---- Exempeltexter: Level E och Level C bredvid varandra i stället för
     under varandra, halverar höjdbehovet. Bara den synliga
     [data-program-block] påverkas: JS sätter inline display:none på de
     tre andra, och en inline-stil vinner alltid över en icke-!important
     regel här. ---- */
  body.wd-printing-examples [data-program-block] {
    display: flex;
    gap: 6mm;
    align-items: flex-start;
  }
  body.wd-printing-examples [data-program-block] > .reading-section {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: var(--space-2) var(--space-3) !important;
  }
  body.wd-printing-examples .reading-section h3 {
    margin: 0 0 var(--space-1) !important;
    font-size: 1em !important;
  }
  body.wd-printing-examples .reading-section p {
    margin: 0 0 var(--space-1) !important;
  }
  body.wd-printing-examples #examples-section > .wd-instruction {
    display: none !important;
  }

  /* ---- Matris/checklista syns aldrig i utskrift (döljs via task-section) ---- */

  /* ---- Print reading: sex texter i två spalter. Grid (inte column-count)
     med exakt sex barn ger deterministiskt 3 rader × 2 kolumner utan att
     kolumnernas höjd balanseras mot varandra — column-count balanserar
     kolumnhöjd olika beroende på textlängd per program, vilket tidigare fick
     olika program att flippa mellan 2 och 3 sidor (se vault-gotcha). Varje
     text + dess två frågor hålls ihop (break-inside: avoid), så en text
     delas aldrig över en sidbrytning. Explicit px (inte em) i hela blocket:
     em ärver print.css:s bas och triggar Impeccables tiny-text-varning även
     på dolt innehåll (se vault-gotcha). ---- */
  body.wd-printing-reading #wd-ex4 {
    break-inside: auto;
    page-break-inside: auto;
  }
  body.wd-printing-reading {
    line-height: 1.3 !important;
  }
  .wd-reading-print {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm 8mm;
  }
  .wd-reading-print__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .wd-reading-print__title {
    margin: 0 0 0.5mm !important;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
  }
  .wd-reading-print__text {
    margin: 0 0 1mm !important;
    font-size: 16px;
  }
  .wd-reading-print__question {
    margin: 1mm 0 0.3mm !important;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
  }
  .wd-reading-print__option {
    margin: 0 0 0.3mm !important;
    font-size: 16px;
  }

  /* ---- Skrivblad ("Print writing sheet"): sida 1 planering + starter +
     stödkort + kamratens checklista, sida 2 linjerad reservsida. Bara
     synlig under wd-printing-writingsheet (se .wd-writingsheet ovan). ---- */
  body.wd-printing-writingsheet .wd-writingsheet {
    display: block;
  }

  .wd-writingsheet-page1 h3 {
    margin: var(--space-3) 0 var(--space-1) !important;
  }

  .wd-writingsheet-page1 h3:first-child {
    margin-top: 0 !important;
  }

  .wd-planning-grid {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-1) 0 var(--space-2);
  }

  .wd-planning-grid th,
  .wd-planning-grid td {
    border: 1px solid #000;
    padding: 1mm 2mm;
    text-align: left;
    font-size: 12px;
    height: 5mm;
  }

  .wd-writingsheet-starters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
    margin: var(--space-1) 0 var(--space-2);
  }

  .wd-writingsheet-starters__part {
    margin: 0 0 0.5mm !important;
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
  }

  .wd-writingsheet-starters .wd-print-line {
    font-size: 12px;
    margin: 0 0 1mm;
  }

  .wd-support-card {
    columns: 2;
    column-gap: 8mm;
    margin: var(--space-1) 0 var(--space-2);
    padding-left: 5mm;
  }

  .wd-support-card li {
    border-bottom: 1px solid #000;
    height: 5mm;
    break-inside: avoid;
    margin-bottom: 1mm;
  }

  .wd-partner-checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-1) 0;
    columns: 2;
    column-gap: 8mm;
  }

  .wd-partner-checklist li {
    break-inside: avoid;
    padding: 0.3mm 0;
    font-size: 12px;
  }

  .wd-writingsheet-page2 {
    break-before: page;
    page-break-before: always;
  }

  .wd-writingsheet-page2-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin: 0 0 4mm;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .wd-lined-page {
    height: 245mm;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 6.9mm,
      #000 6.9mm,
      #000 7.2mm
    );
  }

  /* ---- "Print my text": titel, namn, program, ordantal och texten,
     ingenting annat. Bara synlig under wd-printing-mytext. ---- */
  body.wd-printing-mytext .wd-mytext-print {
    display: block;
  }

  .wd-mytext-title {
    font-size: 1.3em;
    margin: 0 0 var(--space-3) !important;
  }

  .wd-mytext-print p {
    margin: 0 0 var(--space-2) !important;
  }

  .wd-mytext-body {
    white-space: pre-wrap;
    margin-top: var(--space-4) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mindre rörelse — måste stå sist i filen (samma regel som
   listening.css: en @media-regel skyddar bara deklarationer som
   redan finns högre upp i cascaden).
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wd-program-btn {
    transition: none;
  }
}