/* Sokratik — tablica: kartki A4, pismo ucznia i adnotacje korepetytora. */

/* widok tablicy rezygnuje z marginesu zeszytu — kartki mają własne marginesy */
.wrap--board { max-width: 1180px; padding: 22px 24px 120px; }
.wrap--board::before { display: none; }

/* ------------------------------------------------------------------ */
/* Pasek narzędzi                                                      */
/* ------------------------------------------------------------------ */

.board-bar {
  position: sticky; top: 60px; z-index: 30;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 14px; margin-bottom: 18px;
  background: linear-gradient(var(--paper) 72%, transparent);
}
.board-bar__title { font-size: var(--t-body); font-weight: 650; letter-spacing: -0.01em; }
.board-bar__meta { font-size: var(--t-meta); color: var(--ink-3); }
.board-bar__spacer { flex: 1; }
.board-bar button {
  border: 1px solid var(--rule-2); background: var(--white); border-radius: 2px;
  padding: 8px 14px; cursor: pointer; font-size: var(--t-meta); color: var(--ink-2);
  transition: border-color .14s, color .14s;
}
.board-bar button:hover { border-color: var(--ink); color: var(--ink); }
.board-bar button.primary {
  background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 650;
}
.board-bar button.primary:hover { background: var(--pen); border-color: var(--pen); }

.board-tools { display: inline-flex; }
.board-tools button { border-radius: 0; margin-left: -1px; }
.board-tools button:first-child { border-radius: 2px 0 0 2px; margin-left: 0; }
.board-tools button:last-child { border-radius: 0 2px 2px 0; }
.board-tools button.active {
  background: var(--pen); border-color: var(--pen); color: var(--white); font-weight: 650;
}
.board-tools button.active:hover { color: var(--white); }

.board-hint {
  font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 22px;
  padding-left: 14px; border-left: 2px solid var(--rule-2); max-width: 70ch;
}

/* ------------------------------------------------------------------ */
/* Kartka A4                                                           */
/* ------------------------------------------------------------------ */

/* Kartka ma STAŁY rozmiar A4 w pikselach (794×1123 = 210×297 mm przy 96 dpi),
   a do szerokości okna dopasowuje się skalowaniem. Dzięki temu układ treści
   jest identyczny na ekranie i na wydruku — łamanie stron się nie rozjeżdża. */
.board { --scale: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; }

.page-slot {
  width: 100%; max-width: 794px;
  height: calc(1123px * var(--scale));
  position: relative;
}

.page {
  position: absolute; top: 0; left: 0;
  width: 794px; height: 1123px;
  transform: scale(var(--scale));
  transform-origin: top left;
  background: var(--white);
  border: 1px solid var(--rule-2);
  box-shadow: 0 2px 14px rgba(28, 30, 38, .07);
  overflow: hidden;
}

.page__body {
  position: absolute; inset: 0;
  padding: 8.1%;                      /* ≈64px na 794px — margines kartki */
  overflow: hidden;
}

/* Ukryty kontener pomiarowy — stała szerokość A4, ta sama typografia. */
.page-measure {
  position: absolute; left: -10000px; top: 0;
  width: 794px; box-sizing: border-box; padding: 64px;
  visibility: hidden; pointer-events: none;
  background: var(--white);
}

/* pismo leży NAD treścią i przechwytuje wskaźnik */
.page__ink { position: absolute; inset: 0; z-index: 2; cursor: crosshair; touch-action: none; }
/* gumka — kółko jako kursor, żeby było widać zasięg */
.page__ink.tool-eraser {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>\
<circle cx='12' cy='12' r='10' fill='rgba(187,45,28,.10)' stroke='%23bb2d1c' stroke-width='1.5'/>\
</svg>") 12 12, cell;
}

/* podświetlenie miejsca, o którym mówi korepetytor */
.page__marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mark {
  position: absolute; border-radius: 3px;
  background: rgba(187, 45, 28, .13);
  box-shadow: 0 0 0 1.5px rgba(187, 45, 28, .55);
  animation: mark-in .18s ease-out;
}
.mark--exact { background: rgba(187, 45, 28, .2); box-shadow: 0 0 0 2px var(--red); }
/* wskazówka to nie korekta — nie znaczymy jej kolorem błędu */
.mark--hint {
  background: rgba(27, 58, 143, .12);
  box-shadow: 0 0 0 1.5px rgba(27, 58, 143, .5);
}
.mark--hint.mark--exact {
  background: rgba(27, 58, 143, .18);
  box-shadow: 0 0 0 2px var(--pen);
}
@keyframes mark-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* adnotacje nad pismem */
.page__notes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }


.page__no {
  position: absolute; bottom: 2.6%; left: 0; right: 0; text-align: center;
  font-family: var(--math); font-size: var(--t-meta); color: var(--ink-3); z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Treść drukowana na kartce                                           */
/* ------------------------------------------------------------------ */

.page__body > * { max-width: 100%; }

/* Tytuł lekcji — rejestr DRUKU: szeryf, bo tak składane są prawdziwe arkusze
   CKE, i pełna czerń, bo to najmocniejszy głos na stronie. */
.sheet__head { border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 22px; }
.sheet__kicker {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .16em; color: var(--red);
  margin-bottom: 9px;
}
.sheet__head h1 {
  margin: 0 0 8px; font-family: var(--math); font-size: var(--t-title);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink);
}
.sheet__head p { margin: 0; font-size: var(--t-body); color: var(--ink-2); }

/* Marginesy pionowe trzymane krótko mimo większego stopnia pisma: nagłówek
   sekcji musi zmieścić się na jednej stronie razem z zadaniem, które
   wprowadza. Przy luźniejszym rytmie zadanie z pełnym polem do pisania
   przepychało nagłówek na poprzednią stronę i zostawiało go samego. */
.sheet__blockhead { margin: 20px 0 10px; }
.sheet__no {
  font-family: var(--math); font-size: var(--t-lead); color: var(--red); margin-right: 10px;
}
.sheet__kind {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.sheet__blockhead h2 {
  margin: 6px 0 0; font-family: var(--math); font-size: var(--t-head);
  font-weight: 700; letter-spacing: -0.014em; line-height: 1.2; color: var(--ink);
}

.sheet__intro { margin: 0 0 12px; font-size: var(--t-body); color: var(--ink-2); font-style: italic; }
.sheet__p { margin: 0 0 13px; font-size: var(--t-body); line-height: 1.72; color: var(--ink); }
/* Wyróżnienie podkreślone kolorem długopisu, nie samym pogrubieniem —
   pogrubiony tekst w akapicie ginie, podkreślenie widać z odległości. */
.sheet__p strong { font-weight: 680; box-shadow: inset 0 -0.42em 0 var(--pen-soft); }

/* Wzór to nie „tekst między dwiema kreskami", tylko wyraźna tablica.
   Etykieta wcięta w górną krawędź nazywa element bez zabierania miejsca. */
.sheet__formula {
  position: relative; font-family: var(--math); font-size: var(--t-title);
  text-align: center; color: var(--ink);
  padding: 24px 18px; margin: 20px 0;
  background: var(--white);
  border: 1px solid var(--rule-2); border-top: 3px solid var(--ink);
}
.sheet__formula::after {
  content: "wzór"; position: absolute; top: -1px; right: 14px;
  transform: translateY(-50%); background: var(--white);
  font-family: var(--font); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 8px;
}

/* ZAPAMIĘTAJ — rejestr KOREKTY. Wcześniej różniła je od innych bloków
   wyłącznie kolorowa kreska szerokości 2 px: ten sam kształt, inny kolor,
   z odległości nie do rozróżnienia. Teraz to pełny blok na tle korekty. */
.sheet__callout {
  background: var(--red-soft); border-left: 5px solid var(--red);
  padding: 16px 20px 18px; margin: 20px 0;
}
.sheet__callout-title {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.sheet__callout-title::before {
  content: "!"; display: grid; place-items: center; flex: none;
  width: 17px; height: 17px; background: var(--red); color: var(--white);
  font-family: var(--math); font-size: var(--t-meta); letter-spacing: 0;
}
.sheet__callout ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
/* Punktor musi być RYSOWANY, nie pisany. Myślnik „—” przed wzorem czytał się
   jak minus: „—9 − (−8) = 17” wyglądało na „−9 − (−8)”, a „—(−) · (−)” na
   minus przed nawiasem. Kwadrat nie jest znakiem matematycznym, więc nie ma
   z czym go pomylić — i pasuje do kratki zeszytu. */
.sheet__callout li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--math); font-size: var(--t-lead); color: var(--ink);
}
.sheet__callout li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--red); transform: translateY(-4px);
}

/* Karta wzorów — wklejka w zeszycie: podwójna ramka, jak kartka przypięta
   do strony. Musi być czytelna także na wydruku, bo uczeń bierze ją na naukę. */
.wzory {
  margin: 16px 0 18px;
  border: 1px solid var(--ink-3); border-left: 3px solid var(--ink);
  padding: 12px 16px 10px; background: var(--white);
}
.wzory__head { margin-bottom: 12px; }
.wzory__title {
  display: block; font-size: var(--t-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.wzory__sub {
  display: block; font-size: var(--t-meta); color: var(--ink-2); font-style: italic;
  margin-top: 4px;
}
.wzory__list { margin: 0; padding: 0; list-style: none; }
/* Karta wzorów bywa długa (lekcje z maturalnych tablic mają ich kilkanaście),
   a jest JEDNYM niepodzielnym elementem — paginacja nie ma jak jej złamać.
   Dlatego pozycje są tu zwarte: przy luźniejszym rytmie karta przerastała
   wysokość kartki i wylewała się poza stronę. */
.wzory__item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule);
}
.wzory__name {
  grid-column: 1; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.35;
}
.wzory__f {
  grid-column: 1; font-family: var(--math); font-size: var(--t-body);
  line-height: 1.35; color: var(--ink);
}
.wzory__where {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; color: var(--pen);
  border: 1px solid var(--pen); border-radius: 2px; padding: 3px 8px;
}
/* „na pamięć" to ostrzeżenie, nie informacja — stąd kolor korekty */
.wzory__where--memo { color: var(--red); border-color: var(--red); }
.wzory__note {
  grid-column: 1 / -1; font-size: var(--t-meta); color: var(--ink-3);
  font-style: italic; margin-top: 3px;
}

/* Karta wzorców egzaminacyjnych. Odróżnia się od karty wzorów czerwoną
   listwą — czerwień w tym projekcie znaczy „to pochodzi z egzaminu”, tak jak
   w marginesie i w ramkach ZAPAMIĘTAJ. Numeracja, bo to katalog do przejrzenia. */
.arche {
  margin: 18px 0 20px;
  border: 1px solid var(--rule-2); border-top: 3px solid var(--red);
  background: var(--white);
}
.arche__head { padding: 16px 20px 14px; border-bottom: 1px solid var(--rule); }
.arche__title {
  display: block; font-size: var(--t-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red);
}
.arche__sub {
  display: block; font-size: var(--t-meta); color: var(--ink-2);
  margin-top: 5px; max-width: 52ch;
}
.arche__list { margin: 0; padding: 0; list-style: none; }
/* Numer w szeryfie i w stopniu --t-head: katalog ma się czytać jak spis,
   a nie jak akapit z odnośnikami. Numer jest jawnym elementem, nie licznikiem
   CSS — w siatce dwukolumnowej pseudoelement zająłby komórkę treści. */
.arche__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 0 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
}
.arche__item:last-child { border-bottom: none; }
.arche__no {
  font-family: var(--math); font-size: var(--t-head); line-height: 1;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.arche__name { font-size: var(--t-body); font-weight: 680; color: var(--ink); line-height: 1.3; }
.arche__how { font-size: var(--t-meta); line-height: 1.62; color: var(--ink-2); margin-top: 4px; }
/* Numery arkuszy jako plakietki — dowód, że wzorzec jest realny, a nie
   naszą teorią. Muszą być rozpoznawalne jako etykiety, nie jako tekst. */
.arche__refs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.arche__refs span {
  font-size: var(--t-label); font-weight: 650; letter-spacing: .03em;
  color: var(--red); background: var(--red-soft);
  border: 1px solid #edc9c3; padding: 2px 7px; white-space: nowrap;
}

.sheet__example {
  font-family: var(--math); font-size: var(--t-lead); color: var(--ink);
  padding: 14px 0; margin-bottom: 6px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.sheet__step {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.sheet__step-no { font-family: var(--math); font-size: var(--t-lead); color: var(--red); }
.sheet__step-expr {
  font-family: var(--math); font-size: var(--t-lead); color: var(--ink); margin-bottom: 5px;
}
.sheet__step-why { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.62; }
.sheet__step-hl {
  margin-top: 7px; padding-left: 12px; border-left: 2px solid var(--red);
  font-size: var(--t-meta); color: var(--ink-2);
}

/* Zadanie — rejestr DŁUGOPISU: wszystko, co należy do ucznia. Stąd granatowa
   listwa, ta sama, którą pisze na kanwie. */
.sheet__task { margin: 16px 0; border: 1px solid var(--rule-2); border-left: 4px solid var(--pen); }
.sheet__task-head {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule); background: var(--white);
}
.sheet__task-no {
  font-size: var(--t-label); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pen);
}
.sheet__task-pts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Kropki zamiast kwadratów i o 2 px większe — stan punktów ma być czytelny
   z odległości, bo to jedyna informacja zwrotna widoczna bez czytania. */
.sheet__pt {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--rule-2); background: var(--white);
  transition: background .3s, border-color .3s;
}
.sheet__pt.on { background: var(--green); border-color: var(--green); }
.sheet__task-pts em {
  font-style: normal; font-size: var(--t-meta); font-weight: 700;
  color: var(--ink-2); margin-left: 4px;
}
.sheet__task-statement {
  padding: 12px 16px 10px; font-size: var(--t-body); line-height: 1.6; color: var(--ink);
}

/* Po lewej piszesz, po prawej widzisz swój zapis przepisany matematycznie. */
.sheet__task-work {
  display: grid; grid-template-columns: 1fr 214px; gap: 12px;
  padding: 0 14px 14px;
}
/* Wysokość liczona w linijkach kratki, nie w pikselach — pole zawsze kończy
   się NA linii siatki. Liczbę wierszy podaje serwer (Task.work_rows), bo
   zależy od liczby punktowanych etapów. 13 wierszy = dawne 330 px. */
/* Górne ograniczenie pola nie jest kosmetyką, tylko warunkiem układu:
   na kartce A4 zostaje 993 px treści, z czego nagłówek sekcji z podtytułem
   zabiera ~140 px, a rama zadania (numer, punkty, polecenie) ~220 px.
   Pole wyższe niż 572 px sprawia, że zadanie przestaje mieścić się razem
   z nagłówkiem, który je wprowadza — i nagłówek zostaje sam na poprzedniej
   stronie. 22 wiersze kratki to i tak o dwie trzecie więcej miejsca niż
   dawne stałe 330 px. */
.sheet__task-slot {
  position: relative;
  min-height: min(calc(var(--wiersze, 13) * 26px), 560px);
  border: 1px dashed var(--rule-2);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 26px 26px;
}
.sheet__task-hint {
  position: absolute; left: 10px; top: 8px;
  font-size: var(--t-label); color: var(--ink-3); letter-spacing: .02em;
}

/* Panel musi być NAD kanwą — inaczej kanwa przechwytuje kliknięcia
   przycisków, a uczeń może po nim pisać. */
.sheet__task-panel {
  position: relative; z-index: 6;
  border: 1px solid var(--rule-2); background: #fcfbf8;
  display: flex; flex-direction: column; min-height: 330px;
}
.panel__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--rule);
}
.panel__title {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.panel__status {
  margin-left: auto; font-size: var(--t-label); color: var(--pen); font-style: italic;
}

/* Wyraźny sygnał, że coś się dzieje — uczeń wie, że jego zapis poszedł dalej. */
.panel__phase {
  display: flex; align-items: center; gap: 9px;
  margin: 10px; padding: 11px 12px;
  background: #eef3fb; border: 1px solid rgba(27, 58, 143, .22);
  font-size: var(--t-meta); font-weight: 650; color: var(--pen);
}
.panel__spinner {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(27, 58, 143, .25); border-top-color: var(--pen);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .panel__spinner { animation-duration: 2.4s; } }

/* Jedna wypowiedź korepetytora do całego rozwiązania. */
.panel__hint {
  margin: 4px 10px 8px; padding: 9px 11px;
  background: #f2f5fb; border-left: 2px solid var(--pen);
  font-size: var(--t-meta); line-height: 1.55; color: var(--ink-2);
}
.panel__hint--ok { background: var(--green-soft); border-left-color: var(--green); }

/* Przycisk „Pokaż gdzie” — podświetla miejsce w piśmie ucznia. */
/* „Pokaż gdzie” — kolor niesie sens: niebieski kieruje wzrok (wskazówka),
   czerwony ostrzega (błąd). Ten sam gest, inna waga. */
.mark-btn {
  --mark-c: var(--pen);
  float: right; margin: 0 0 4px 8px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--mark-c); background: var(--white); color: var(--mark-c);
  border-radius: 2px; padding: 3px 8px; cursor: pointer;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .02em;
  transition: background .14s, color .14s;
}
.mark-btn--err { --mark-c: var(--red); }
.mark-btn:hover, .mark-btn:focus-visible { background: var(--mark-c); color: var(--white); }
.mark-btn__icon {
  width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mark-c); color: var(--white); font-size: var(--t-label); line-height: 1;
}
.mark-btn:hover .mark-btn__icon, .mark-btn:focus-visible .mark-btn__icon {
  background: var(--white); color: var(--mark-c);
}

.panel__actions {
  margin-top: auto; padding: 10px; display: grid; gap: 6px;
  border-top: 1px solid var(--rule);
}
.panel__actions button {
  border-radius: 2px; padding: 8px 10px; cursor: pointer;
  font-size: var(--t-meta); font-weight: 600; line-height: 1.25;
  transition: background .14s, border-color .14s, color .14s;
}
.btn-check { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.btn-check:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
.btn-help { border: 1px solid var(--rule-2); background: var(--white); color: var(--ink-2); }
.btn-help:hover:not(:disabled) { border-color: var(--pen); color: var(--pen); }
.panel__actions button:disabled { opacity: .45; cursor: default; }
.panel__lines { padding: 6px 0; overflow-y: auto; flex: 1; }
.panel__empty {
  padding: 12px 10px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3);
}

.line {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 10px;
}
.line__no {
  font-size: var(--t-label); color: var(--ink-3); min-width: 11px; font-variant-numeric: tabular-nums;
}
.line__math {
  flex: 1; min-width: 0; font-family: var(--math); font-size: var(--t-lead);
  color: var(--pen); cursor: text; word-break: break-all;
}
.line__math em { font-family: var(--font); font-size: var(--t-label); color: var(--ink-3); }
.line__icon { font-size: var(--t-meta); font-weight: 700; }
.line--ok .line__icon, .line--solved .line__icon { color: var(--green); }
.line--bad .line__icon { color: var(--red); }
.line--error-read .line__icon { color: var(--amber); }
.line--draft .line__icon, .line--checking .line__icon { color: var(--rule-2); }
.line--bad .line__math { color: var(--ink-2); }

.line__msg {
  padding: 0 10px 8px 28px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--rule); margin: 0 10px 6px 18px;
}
.line__input {
  flex: 1; min-width: 0; font-family: var(--math); font-size: var(--t-body); color: var(--pen);
  border: none; border-bottom: 1px solid var(--pen); background: none; padding: 0 2px;
}
.line__input:focus { outline: none; }

/* ------------------------------------------------------------------ */
/* Adnotacje korepetytora                                              */
/* ------------------------------------------------------------------ */

.note {
  position: absolute; width: 36%; pointer-events: auto;
  background: var(--white); border: 1px solid var(--rule-2);
  border-left-width: 3px; padding: 9px 11px 10px;
  box-shadow: 0 2px 10px rgba(28, 30, 38, .09);
  font-size: var(--t-meta); line-height: 1.5;
}
.note--right { right: 2.4%; }
.note--left { left: 2.4%; }

.note--ok      { border-left-color: var(--green); }
.note--err     { border-left-color: var(--red); }
.note--info    { border-left-color: var(--amber); }
.note--pending { border-left-color: var(--rule-2); opacity: .8; }
/* Zapowiedź pytania — lżejsza od notatki, żeby nie zasłaniała pisania */
.note--soon {
  border-left-color: var(--pen); opacity: .85; pointer-events: none;
  padding-bottom: 9px;
}
.note--soon .note__title { color: var(--pen); }

/* Pasek odliczający. Wypełnia się przez ASK_MS, więc uczeń widzi, ile zostało. */
.soon__bar {
  margin-top: 7px; height: 2px; background: var(--rule);
  overflow: hidden; border-radius: 1px;
}
/* Start od widocznego kawałka, nie od zera: gdy przeglądarka zdławi animacje
   (karta w tle, oszczędzanie energii), pusty pasek wyglądałby na zepsuty. */
.soon__bar i { display: block; height: 100%; width: 8%; background: var(--pen); }
@keyframes soon-fill { from { width: 8%; } to { width: 100%; } }

/* Czekanie na model — czasu nie znamy, więc pasek krąży zamiast się wypełniać */
.soon__bar--wait i {
  width: 34%;
  animation: soon-wander 1.1s ease-in-out infinite;
}
@keyframes soon-wander {
  0%   { margin-left: 0; }
  50%  { margin-left: 66%; }
  100% { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .soon__bar i { animation: none !important; width: 100%; opacity: .45; }
}
.note--ask     { border-left-color: var(--pen); width: 42%; }
.note--answer  { border-left-color: var(--pen); }

.note__title {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 5px; padding-right: 14px;
}
.note--ok .note__title { color: var(--green); }
.note--err .note__title { color: var(--red); }
.note--info .note__title { color: var(--amber); }
.note--ask .note__title, .note--answer .note__title { color: var(--pen); }
.note--pending .note__title { color: var(--ink-3); }

.note__body { color: var(--ink-2); }
.note__reading {
  font-family: var(--math); font-size: var(--t-lead); color: var(--ink);
  padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--rule);
}
.note__quote {
  margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--rule);
  font-size: var(--t-meta); color: var(--ink-3); font-style: italic;
}
.note__close {
  position: absolute; top: 4px; right: 5px; border: none; background: none;
  cursor: pointer; font-size: var(--t-body); line-height: 1; color: var(--ink-3); padding: 2px 4px;
}
.note__close:hover { color: var(--red); }

.note__ask { display: flex; gap: 6px; }
.note__input {
  flex: 1; min-width: 0; border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 6px 8px; font-family: inherit; font-size: var(--t-meta); color: var(--ink);
}
.note__input:focus { outline: none; border-color: var(--pen); }
.note__send {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 2px; padding: 6px 11px; cursor: pointer; font-size: var(--t-meta); font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Wydruk / eksport PDF                                                */
/* ------------------------------------------------------------------ */

@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body {
    background: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body { background-image: none !important; }

  .topbar, .board-bar, .board-hint, .note__close, .sheet__task-hint,
  .panel__actions, .panel__status, .panel__phase, .mark-btn,
  .page__marks { display: none !important; }

  .wrap--board { max-width: none; padding: 0; margin: 0; }
  .board { display: block; gap: 0; }

  /* wydruk: bez skalowania — 210×297 mm to dokładnie ten sam układ co 794×1123 px */
  .page-slot { width: auto; max-width: none; height: auto; }
  .page {
    position: relative; transform: none;
    width: 210mm; height: 297mm;
    margin: 0; border: none; box-shadow: none;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .page-slot:last-child .page { break-after: auto; page-break-after: auto; }

  /* pismo i adnotacje muszą znaleźć się na wydruku */
  .page__ink, .page__notes, .note { display: block !important; }
  .note { box-shadow: none; }
}

@media (max-width: 840px) {
  .board-wrap { padding: 0 12px 80px; }
  .note { width: 46%; font-size: var(--t-meta); }
}