:root {
  --exercise-font:   "PT Serif", "EB Garamond", Georgia, serif;
  --sheet-line:      var(--border);
  --sheet-muted:     var(--fg-3);
  --fill-blank-sm:   6em;
  --fill-blank-md:   11em;
  --fill-blank-lg:   22em;
  --rule-box-bg:     var(--accent-soft);
  --rule-box-border: var(--accent);
  --table-axis-bg:   var(--bg-surface);
}

.sheet-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sheet-main {
  background: var(--bg-page);
}

.exercise-sheet {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
  border: 1px solid var(--sheet-line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-family: var(--exercise-font);
}

.exercise-sheet p {
  max-width: none;
}

.sheet-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--sheet-muted);
  font-size: 0.84rem;
}

.lesson-title {
  margin: 0 0 var(--space-md);
  font-size: 2rem;
}

.sheet-section {
  margin-top: var(--space-lg);
}

.exercise-sheet .section-heading {
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--accent);
  font-size: 1.5rem;
  font-style: italic;
}

.exercise-card {
  margin: var(--space-md) 0;
}

.section-heading + .exercise-card {
  margin-top: 0;
}

.exercise-heading {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--border-strong);
  color: var(--fg-2);
  font-family: var(--exercise-font);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.exercise-heading .task-num {
  color: var(--fg-1);
  font-weight: 700;
}

.exercise-instruction {
  margin: var(--space-sm) 0;
}

.exercise-sheet .subgroup-heading {
  margin: var(--space-md) 0 var(--space-xs);
}

.exercise-sheet .subgroup-heading:first-child,
.exercise-sheet .exercise-heading + .subgroup-heading {
  margin-top: var(--space-sm);
}

.exercise-sheet .subgroup-heading + .subgroup-heading {
  margin-top: var(--space-md);
}

.exercise-sheet .reading-text {
  margin: 0 auto;
  max-width: 72ch;
  padding: 0 0.75em;
  line-height: 1.75;
}

.exercise-sheet .reading-text + .reading-text {
  margin-top: 0.7em;
}

.exercise-sheet .reading-text:first-of-type {
  margin-top: var(--space-md);
}

.exercise-sheet .reading-text:last-of-type {
  margin-bottom: var(--space-md);
}

.exercise-sheet mark {
  padding: 0 0.12em;
  border-radius: 2px;
  background: #fff3a3;
  color: inherit;
}

.rule-box {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule-box-border);
  border-radius: var(--radius-sm);
  background: var(--rule-box-bg);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.rule-box > :first-child {
  margin-top: 0;
}

.rule-box > :last-child {
  margin-bottom: 0;
}

.rule-box__examples {
  margin: 0.6em 0 0;
  padding: 0.5em 0 0;
  border-top: 1px dashed var(--rule-box-border);
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.5;
}

.rule-box__examples li {
  margin: 0.15em 0;
}

.letter-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule-box-border);
  border-radius: var(--radius-sm);
  background: var(--rule-box-bg);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.letter-box__glyph {
  flex: 0 0 auto;
  min-width: 3.5em;
  padding: 0.2em 0.4em;
  border-right: 1px solid var(--rule-box-border);
  color: var(--fg-1);
  font-family: var(--exercise-font);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.letter-box__description {
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.55;
}

.example-box {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.55;
}

.example-box .label {
  display: inline-block;
  margin-bottom: 0.3rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vocab-list {
  margin: var(--space-sm) 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

.vocab-list ul {
  columns: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: var(--space-md);
}

.vocab-list--2 ul {
  columns: 2;
}

.vocab-list--3 ul {
  columns: 3;
}

.vocab-list li {
  break-inside: avoid;
  padding: 0.1rem 0;
}

.vocab-list .ru {
  color: var(--fg-1);
  font-weight: 600;
}

.vocab-list .sep,
.vocab-list .ipa {
  color: var(--sheet-muted);
}

.vocab-list .ipa {
  font-size: 0.9em;
  font-style: italic;
}

.vocab-examples {
  list-style: none;
  margin: 0.15rem 0 0.25rem 1.25rem;
  padding: 0;
  font-size: 0.92em;
}

.vocab-list .vocab-examples li {
  padding: 0;
}

.vocab-list .vocab-examples .ru {
  font-weight: 400;
}

.fill-blank {
  display: inline-block;
  width: var(--fill-blank-sm);
  min-width: var(--fill-blank-sm);
  padding: 0 0.25rem 0.1rem;
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  background: transparent;
  color: var(--fg-1);
  font: inherit;
  font-size: 0.95em;
  outline: none;
  vertical-align: baseline;
}

.fill-blank:focus,
.letter-blank:focus {
  border-bottom-color: var(--fg-1);
}

.fill-blank--md {
  width: var(--fill-blank-md);
}

.fill-blank--lg {
  width: var(--fill-blank-lg);
}

.fill-list > li.line-response {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.fill-list > li.line-response .fill-blank {
  flex: 1;
  width: auto;
  min-width: 4em;
}

.letter-blank {
  display: inline-block;
  width: 1.4em;
  padding: 0 0.1em 0.05em;
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  background: transparent;
  font: inherit;
  text-align: center;
  outline: none;
}

.fill-list,
.dialog-list,
.discussion-list {
  list-style: none;
  margin: var(--space-sm) 0;
  padding: 0;
}

.fill-list,
.discussion-list {
  counter-reset: numbered-list;
}

.fill-list > li,
.discussion-list > li {
  position: relative;
  counter-increment: numbered-list;
  padding: 0.2rem 0 0.2rem 2.2rem;
  line-height: 1.7;
}

.fill-list > li::before,
.discussion-list > li::before {
  content: counter(numbered-list) ".";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 1.8rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.hint {
  color: var(--sheet-muted);
  font-size: 0.92em;
}

.fill-list > li.has-hint-image {
  padding-right: 96px;
  min-height: 60px;
}

.fill-list > li > .part-row {
  display: block;
}

.fill-list > li > .part-row-cont {
  padding-left: 1.5em;
}

.fill-list > li > .fill-line-flex {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  width: 100%;
}

.fill-line-flex > .part-text {
  flex: 0 0 auto;
  white-space: nowrap;
}

.fill-blank--flex {
  flex: 1 1 4em;
  width: auto;
  min-width: 4em;
}

.fill-list-hint-image {
  position: absolute;
  top: 0.2rem;
  right: 0.5rem;
  max-width: 80px;
  max-height: 60px;
  object-fit: contain;
}

.fill-table {
  width: 100%;
  margin: var(--space-sm) 0;
  border-collapse: collapse;
}

.fill-table td {
  padding: 0.3rem 0.35rem;
  border: 0;
  vertical-align: baseline;
}

.fill-table td:nth-child(odd) {
  width: 1%;
  color: var(--fg-1);
  white-space: nowrap;
}

.fill-table .fill-blank {
  width: 8em;
  min-width: 8em;
}

.conj-table {
  margin: var(--space-sm) 0;
  border-collapse: collapse;
}

.conj-table .fill-blank {
  width: 7em;
  min-width: 7em;
}

/* Fyll-läge: tydligt rutnät — cellgränser hjälper när det finns input-fält. */
.conj-table--fill {
  width: 100%;
}

.conj-table--fill th,
.conj-table--fill td {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  text-align: left;
}

.conj-table--fill thead th,
.conj-table--fill tbody td:first-child {
  color: var(--fg-1);
  font-weight: 700;
}

.conj-table--fill td {
  white-space: nowrap;
}

/* Läs-läge: ren typografi — header-rule + bottom-rule, ingen grid, ingen zebra. */
.conj-table--read {
  width: auto;
  margin: var(--space-sm) auto;
  border-bottom: 1px solid var(--border-strong);
}

.conj-table--read th,
.conj-table--read td {
  padding: 0 1.1rem;
  border: 0;
  text-align: left;
  white-space: nowrap;
  line-height: 1.45;
}

.conj-table--read thead th {
  padding-bottom: 0.2rem;
  border-bottom: 1.5px solid var(--accent);
  color: var(--fg-1);
  font-weight: 700;
}

.conj-table--read tbody tr:first-child td {
  padding-top: 0.18rem;
}

.conj-table--read tbody tr:last-child td {
  padding-bottom: 0.18rem;
}

.conj-table--read tbody td:first-child {
  color: var(--fg-1);
  font-weight: 700;
}

/* Paradigm-läge: matrisparadigm (rad- och kolumn-etiketter), tonad header-rad
   och första kolumn för visuellt anker. Stödjer två-radig header. */
.conj-table--paradigm {
  width: auto;
  margin: var(--space-sm) auto;
  border-bottom: 1px solid var(--border-strong);
}

.conj-table--paradigm th,
.conj-table--paradigm td {
  padding: 0.4rem 1rem;
  border: 0;
  text-align: left;
  vertical-align: middle;
  line-height: 1.4;
}

.conj-table--paradigm thead th {
  background: var(--table-axis-bg);
  border-bottom: 1.5px solid var(--accent);
  font-weight: 700;
  vertical-align: top;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.conj-table--paradigm tbody td:first-child {
  background: var(--table-axis-bg);
  color: var(--fg-1);
  font-weight: 700;
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.conj-table--paradigm .th-primary {
  display: block;
  color: var(--fg-1);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.conj-table--paradigm .th-secondary {
  display: block;
  margin-top: 0.1rem;
  color: var(--fg-2);
  font-size: 0.86em;
  font-weight: 400;
}

.dialog-list {
  counter-reset: dialog-list;
}

.dialog-list > li {
  position: relative;
  counter-increment: dialog-list;
  padding: 0.4rem 0 0.4rem 2rem;
  line-height: 1.85;
}

.dialog-list > li::before {
  content: counter(dialog-list) ".";
  position: absolute;
  top: 0.4rem;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.dialog-list .turn {
  display: block;
}

.dialog-list .turn::before {
  content: "— ";
  color: var(--sheet-muted);
}

.writing-area {
  display: block;
  width: 100%;
  min-height: 6.4rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(
      transparent 0,
      transparent calc(1.6rem - 1px),
      var(--border-strong) calc(1.6rem - 1px),
      var(--border-strong) 1.6rem
    );
  background-position: 0 0.5rem;
  font: inherit;
  line-height: 1.6rem;
  outline: none;
  resize: vertical;
}

.writing-area:focus {
  border-color: var(--accent);
}

.audio-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-sm) 0;
}

.audio-row::before {
  content: "Ljud";
  color: var(--sheet-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audio-row audio {
  height: 26px;
  max-width: 220px;
}

.image-block {
  margin: var(--space-md) 0;
  text-align: center;
}

.image-block img {
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.image-block--large img {
  max-height: none;
}

.image-block figcaption {
  margin-top: 0.5rem;
  color: var(--sheet-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.video-block {
  margin: var(--space-md) 0;
}

.video-block iframe,
.video-block video,
.video-block .video-thumb {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.video-block .video-thumb {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: #000;
}

.video-block .video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-block .video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  pointer-events: none;
  transition: background 0.15s;
}

.video-block .video-thumb-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}

.video-block .video-thumb:hover .video-thumb-play,
.video-block .video-thumb:focus-visible .video-thumb-play {
  background: rgba(220, 30, 30, 0.95);
}

.video-block .video-label {
  margin-top: 0.5rem;
  max-width: 640px;
  color: var(--sheet-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.choice-question {
  margin: var(--space-sm) 0;
  line-height: 1.7;
}

.choice-question .stem {
  font-weight: 600;
}

.choice-question .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.choice-question label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.quiz-list {
  margin: var(--space-sm) 0;
  padding-left: 1.6em;
  list-style: none;
  counter-reset: quiz-num;
  line-height: 1.6;
}

.quiz-list > li {
  position: relative;
  margin: 0.6em 0;
  counter-increment: quiz-num;
}

.quiz-list > li::before {
  content: counter(quiz-num) ".";
  position: absolute;
  left: -1.6em;
  width: 1.4em;
  text-align: right;
  font-weight: 700;
  color: var(--fg-1);
}

.quiz-list > li.quiz-item--choice .quiz-stem {
  font-weight: 600;
}

.quiz-list > li.quiz-item--choice .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.quiz-list > li.quiz-item--choice .choices label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.quiz-list > li.quiz-item--open {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}

/* Lång fråga på smal skärm: frågan bryts och svarslinjen hamnar på egen rad i stället för utanför vyn. */
.quiz-list > li.quiz-item--open .question-prompt {
  flex: 0 1 auto;
  min-width: 0;
}

.quiz-list > li.quiz-item--open .fill-blank {
  flex: 1 1 8em;
  width: auto;
  min-width: 6em;
}

.answer-key {
  margin: var(--space-md) 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}

.answer-key summary {
  padding: 0.6rem var(--space-sm);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.answer-key-body {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-strong);
}

.answer-key-body .answer-line {
  margin: 0.15rem 0;
  line-height: 1.55;
}

.no-input-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0;
  padding: 0.25rem 0.7rem;
  border: 1px dashed var(--sheet-muted);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--sheet-muted);
  font-size: 0.82rem;
  font-style: italic;
}

.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--sheet-line);
  color: var(--sheet-muted);
  font-size: 0.78rem;
}

.sheet-footer img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.45;
}

.sheet-error {
  padding: var(--space-md);
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: var(--radius-md);
  background: rgba(185, 28, 28, 0.04);
  color: #b91c1c;
}

@media (max-width: 760px) {
  .exercise-sheet {
    padding: 1.2rem;
  }

  .vocab-list--2 ul,
  .vocab-list--3 ul {
    columns: 1;
  }
}

@media print {
  .sheet-topbar,
  site-footer {
    display: none;
  }

  body,
  .sheet-main {
    background: #fff;
  }

  .section {
    padding: 0;
  }

  .container-narrow {
    max-width: none;
    padding: 0;
  }

  .exercise-sheet {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .exercise-card,
  .rule-box,
  .example-box,
  .answer-key,
  .image-block {
    break-inside: avoid;
  }

  .audio-row audio {
    display: none;
  }

  .audio-row::after {
    content: "(ljudfil)";
    color: var(--sheet-muted);
    font-size: 0.85em;
  }

  .fill-blank,
  .letter-blank {
    border-bottom-color: #000;
  }

  .writing-area {
    border-color: #999;
    background:
      repeating-linear-gradient(
        transparent 0,
        transparent calc(1.6rem - 1px),
        #999 calc(1.6rem - 1px),
        #999 1.6rem
      );
  }
}
/* Pupil marking shares the normal reading typography and keeps words intact. */
.text-marking { margin-block: 1.25rem; }
.text-marking-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: .5rem; }
.text-marking-task { display: grid; gap: .3rem; max-width: 100%; font: 600 .9rem/1.4 sans-serif; }
.text-marking-task select { max-width: 100%; padding: .55rem; font: inherit; background: white; color: #163d3a; border: 1px solid #769e98; border-radius: .25rem; }
.text-marking-clear { min-height: 44px; padding: .5rem .8rem; border: 1px solid #769e98; border-radius: .25rem; background: white; color: #163d3a; cursor: pointer; font: inherit; }
.text-marking-help, .text-marking-status { font: .85rem/1.5 sans-serif; color: #425d59; }
.text-marking .reading-text { padding-inline: 0; line-height: 2.5; }
.text-marking-word { display: inline-block; white-space: nowrap; }
.text-marking-token { appearance: none; display: inline; font: inherit; line-height: inherit; color: inherit; background: transparent; padding: 0 .05em; margin: 0; border: 0; border-radius: .15em; cursor: pointer; text-decoration: inherit; }
.text-marking-token:hover { background: #e0efeb; }
.text-marking-token.is-marked { background: #ffe390; box-shadow: inset 0 -2px #755600; }
.text-marking-token:focus-visible, .text-marking-clear:focus-visible, .text-marking-task select:focus-visible { outline: 2px solid #006b60; outline-offset: 2px; }
.inline-hint-image { display: inline-block; width: 1.6em; height: 1.6em; object-fit: contain; vertical-align: middle; margin-inline: .25em; }
.fill-list .fill-blank { max-width: 100%; box-sizing: border-box; }
.sheet-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 1rem; }
.sheet-table-scroll:focus-visible { outline: 2px solid #006b60; outline-offset: 2px; }
.sheet-table-scroll .conj-table { margin-block: 0; }
@media print {
  .sheet-table-scroll { overflow: visible; }
  .text-marking-controls, .text-marking-help, .text-marking-status { display: none; }
  .text-marking-token { color: #000; }
  .text-marking-token.is-marked { background: #eee; text-decoration: underline; box-shadow: none; }
}