:root {
  --bg: #f3efe6;
  --panel: #fffdf8;
  --ink: #1d2a44;
  --muted: #6f7686;
  --line: #ded7c8;
  --accent: #2f6fde;
  --accent-ink: #fff;
  --good: #15803d;
  --warn: #b45309;
  --bad: #be123c;
  --font: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Przeglądarka nigdy nie powiększa całej strony (paski mają zostać na miejscu);
   powiększanie samego arkusza obsługuje ink.js. */
html, body { touch-action: pan-x pan-y; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: none; }
h1, h2 { line-height: 1.2; text-wrap: balance; }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 1.4em; margin: 0; }
.spacer { flex: 1; }

/* ---------- przyciski i pola ---------- */

.btn, .tool {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 15px; }
.btn.danger { color: var(--bad); }
.tool { padding: 6px 12px; font-size: 15px; }
/* przycisk z drobnym podpisem pod napisem */
.btn.two-line { flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; line-height: 1.15; }
.btn.two-line small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.btn.two-line.checked small { color: var(--good); }
.btn.two-line { position: relative; overflow: hidden; }
.btn.two-line.running small { color: var(--accent); }
/* pasek postępu sprawdzania: tor na całą szerokość i wypełnienie rosnące od lewej */
.btn.two-line.running::before, .btn.two-line.running::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; }
.btn.two-line.running::before { width: 100%; background: rgba(47, 111, 222, 0.16); }
.btn.two-line.running::after { width: var(--progress, 4%); background: var(--accent); border-radius: 0 2px 2px 0; transition: width 0.6s ease; }
.btn.two-line.running small::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
.btn:disabled { cursor: default; }
.spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* przycisk z potwierdzeniem: oba napisy w jednym miejscu, żeby szerokość się nie zmieniała */
.confirm { display: inline-grid; justify-items: center; }
.confirm > span { grid-area: 1 / 1; }
.confirm .armed-label, .confirm.armed .idle-label { visibility: hidden; }
.confirm.armed .armed-label { visibility: visible; }
.btn.confirm.armed { background: var(--bad); border-color: var(--bad); color: #fff; }

.update-pill {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 72px);
  transform: translateX(-50%);
  z-index: 25;
  padding: 8px 18px;
  border: 0;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font: 600 15px var(--font);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  white-space: nowrap;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(90vw, 520px);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.tool.icon { width: 44px; padding: 0; }
.tool svg { display: block; }
.tool.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; }

input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ---------- logowanie ---------- */

.login {
  max-width: 340px;
  margin: calc(12vh + env(safe-area-inset-top)) auto 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login h1 { margin: 0; font-size: 44px; letter-spacing: -0.02em; }
.login p { margin: 0 0 8px; }

/* ---------- paski ---------- */

/* Zainstalowana aplikacja na iPadzie: system rozmywa górę ekranu, jeśli nie znajdzie tam
   nieruchomego elementu z jednolitym tłem. Ten pasek pod systemowym paskiem stanu to wyłącza. */
.statusbar-fill {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: max(env(safe-area-inset-top), 6px);
  z-index: 20;
  background: var(--bg);
  pointer-events: none;
}

/* Paski są przypięte na stałe (fixed), a nie „przyklejane” — #app dostaje odstęp o ich wysokości (app.js). */
.topbar, .toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  /* górny odstęp: w trybie PWA pasek nie może wchodzić pod systemowy pasek stanu */
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.toolbar { flex-wrap: wrap; gap: 6px; }
.toolbar .btn.ghost { padding-left: 8px; padding-right: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
.brand img { border-radius: 7px; }
.who { color: var(--muted); }
.toolbar-title {
  flex: 1 1 0; /* tytuł kurczy się pierwszy, żeby pasek nie łamał się na dwa wiersze */
  min-width: 60px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clock { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.9em; text-align: right; }
/* stała szerokość: zmiana napisu nie przesuwa narzędzi */
.save-status { flex: none; width: 100px; font-size: 14px; text-align: right; white-space: nowrap; overflow: hidden; }

/* Znaczek synchronizacji: pigułka o wysokości wiersza sąsiedniego tekstu (ok. 26 px), z mniejszym napisem.
   Stoi zaraz za elastycznym elementem paska, więc zmiana jej szerokości nie przesuwa przycisków. */
.sync-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 99px;
  background: #e9e5dc;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #565c6b;
  white-space: nowrap;
  overflow: hidden;
}
.sync-badge i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  transition: background-color 0.35s ease;
}
.sync-label { display: inline-block; }
.topbar .sync-badge { margin-right: 8px; }
.sync-badge[data-state="syncing"] i { background: var(--accent); animation: sync-pulse 1.1s ease-in-out infinite; }
.sync-badge[data-state="offline"] i { background: #9aa0ad; }
@keyframes sync-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .sync-badge[data-state="syncing"] i { animation: none; } }
@media (max-width: 640px) { .sync-label { display: none; } .sync-badge { padding: 0 9px; } }

/* Komputer z myszką: przyciski paska nie muszą mieć rozmiaru pod palec, a znaczek synchronizacji
   dostaje tę samą wysokość co one — cały pasek ma jedną linię wysokości. */
@media (pointer: fine) {
  .toolbar .btn, .toolbar .tool { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .toolbar .tool.icon { width: 36px; }
  .toolbar .tool svg { width: 20px; height: 20px; }
  .toolbar .tool .dot { width: 16px; height: 16px; }
  .toolbar .sync-badge { height: 34px; border-radius: 10px; }
}

/* ---------- strona główna ---------- */

.home { max-width: 1280px; margin: 0 auto; padding: 8px 16px 60px; }
.home section { margin-top: 28px; }
.home h2 { font-size: 20px; margin: 0 0 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 16px 16px;
  min-width: 0;
  min-height: 132px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* prosty pasek w kolorze przedmiotu, przycięty do zaokrąglenia kafla */
  background-image: linear-gradient(var(--subject, var(--muted)) 0 6px, transparent 6px);
  background-origin: border-box;
}
.card-subject { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.card-name { font-weight: 700; font-size: 19px; line-height: 1.25; flex: 1; }
.card-error { font-size: 13px; color: var(--bad); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.card-foot .muted { margin-left: auto; white-space: nowrap; }
.pill { padding: 2px 10px; border-radius: 99px; background: #ebe8e1; color: #565c6b; font-size: 13px; font-weight: 600; white-space: nowrap; }
.score { font-weight: 800; }

/* Status = kolor etykiety. Pełny niebieski: „teraz Twój ruch”; pomarańczowy: do poprawy;
   zielony: gotowe; szary: czeka na kogoś innego. */
.pill.status-assigned { background: var(--accent); color: #fff; }
.pill.status-in_progress { background: #dfe9fc; color: #1d4fb8; }
.pill.status-returned { background: #fde9d2; color: #a84b06; }
.pill.status-graded { background: #dff3e6; color: #15803d; }
.pill.pending { background: transparent; border: 1px dashed #9aa0ad; }
/* u rodzica „teraz Twój ruch” to arkusz oddany; nowy i w trakcie tylko czekają na ucznia */
.role-parent .pill.status-submitted { background: var(--accent); color: #fff; }
.role-parent .pill.status-assigned { background: #ebe8e1; color: #565c6b; }
.role-parent .pill.status-in_progress { background: #ebe8e1; color: #565c6b; }
.pill.auto { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; background: #e7f6ec; color: var(--good); }

.home table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.home th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; }
.home th, .home td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.home tr:last-child td { border-bottom: 0; }
/* opis arkusza: zawsze jedna linia (pełna treść w podpowiedzi), żeby wiersze miały równą wysokość */
.row-note { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; word-break: break-all; }
.home td.title-cell { width: 100%; }
.home td.opt, .home th.opt { white-space: nowrap; }
.home td.actions { text-align: right; white-space: nowrap; }
.home td.actions .btn { margin-left: 6px; }

.subject-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-transform: capitalize;
}
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-count { margin-left: 8px; padding: 0 8px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 13px; }

/* Nagłówek grupy (przedmiot): ciemniejszy od tła strony, żeby nie wyglądał jak przerwa w tabeli;
   drobny tekst wersalikami odróżnia go od wierszy z arkuszami. */
.home tr.group-row td {
  background: #e6e1d6;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 0;
}
.home tr.group-row .muted { color: #6b6558; letter-spacing: 0; }

.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.asset { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.asset-desc { width: 100%; padding: 6px 8px; font-size: 14px; resize: vertical; }
.asset img { width: 100%; height: 80px; object-fit: contain; }
code { font: 14px ui-monospace, Menlo, monospace; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; user-select: all; -webkit-user-select: all; }
.mcp-url { display: block; padding: 10px 12px; overflow-wrap: anywhere; }

/* ---------- arkusz ---------- */

/* Informacja o stanie arkusza: pasek na całą szerokość kartki, doczepiony do jej górnej krawędzi
   (szerokość kartki podaje ink.js; ujemny margines znosi odstęp między elementami listy stron). */
.banner {
  flex: none;
  width: var(--page-w, 100%);
  margin: 0 auto -18px;
  padding: 6px 16px;
  background: #e7f6ec;
  color: var(--good);
  font-size: 14px;
  display: flex;
  gap: 4px 10px;
  flex-wrap: wrap;
}
/* wszystko dobrze: pełny zielony pas z gwiazdką zamiast bladej informacji */
.banner.perfect { align-items: center; padding: 12px 18px; background: #16a34a; color: #fff; font-size: 17px; }
.banner-star { font-size: 24px; line-height: 1; color: #fde047; animation: star-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes star-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.pill.status-graded.perfect { background: #16a34a; color: #fff; }
.confetti { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: confetti-fall linear both; }
@keyframes confetti-fall {
  to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .banner-star { animation: none; } }
.banner.status-returned { background: #fdf0d9; color: var(--warn); }
.banner.status-submitted { background: #e9e6df; color: var(--muted); }

.pages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0 40px;
  overflow-x: auto;   /* po powiększeniu arkusz przewija się w bok */
  overflow-y: hidden;
}
/* margines auto wyśrodkowuje kartkę, a gdy jest szersza od ekranu — zaczyna ją od lewej krawędzi */
.page-wrap { flex: none; margin: 0 auto; }
.page-wrap[hidden] { display: none; }

.page-nav {
  position: fixed;
  top: 50%;
  z-index: 9;
  width: 48px;
  height: 120px;
  margin-top: -60px;
  border: 0;
  border-radius: 14px;
  background: rgba(29, 42, 68, 0.16);
  color: rgba(29, 42, 68, 0.7);
  font: 700 38px/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
}
.page-nav:active { background: rgba(29, 42, 68, 0.32); }
.page-nav.prev { left: max(4px, env(safe-area-inset-left)); }
.page-nav.next { right: max(4px, env(safe-area-inset-right)); background: rgba(47, 111, 222, 0.28); color: rgba(20, 60, 150, 0.85); }
.page-nav.next:active { background: rgba(47, 111, 222, 0.5); }
.page-nav[hidden] { display: none; }
@media (max-width: 699px) {
  .page-nav { width: 38px; height: 88px; margin-top: -44px; font-size: 30px; }
}

/* notatnik: przycisk pod strzałką następnej strony i kartka w kratkę wysuwana z prawej */
.notes-tab {
  position: fixed; right: max(4px, env(safe-area-inset-right)); top: calc(50% + 72px); z-index: 21;
  width: 48px; height: 60px; padding: 0; border: 0; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  background: #6b7280; color: #fff; box-shadow: 0 2px 8px rgba(40, 45, 60, 0.25);
  transition: right 0.22s ease;
}
.notes-tab[hidden] { display: none; }
.notes-tab.on { background: #1d2a44; }
.notes-open .notes-tab { right: calc(min(560px, 92vw) + 6px); }
.notes-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(560px, 92vw);
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(40, 45, 60, 0.18);
  transform: translateX(105%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.notes-panel.open { transform: none; visibility: visible; transition: transform 0.22s ease, width 0.22s ease; }
.notes-panel.wide { width: 100vw; border-left: 0; }
.notes-open.notes-wide .notes-tab { display: none; } /* na całej szerokości notatnik chowa się strzałką w nagłówku */
.notes-widen { flex: none; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.notes-widen .shrink, .notes-panel.wide .notes-widen .grow { display: none; }
.notes-panel.wide .notes-widen .shrink { display: inline; }
.notes-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; background: #f3f1ec; border-bottom: 1px solid var(--line); font-size: 14px; }
.notes-head span { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 700 28px/1 var(--font); cursor: pointer; }
.notes-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.notes-wrap { overflow: hidden; }
.notes-paper {
  position: relative; width: 794px; transform-origin: 0 0; background-color: #fff;
  background-image: linear-gradient(#dfe7f3 1px, transparent 1px), linear-gradient(90deg, #dfe7f3 1px, transparent 1px);
  background-size: 30px 30px;
}
@media (max-width: 699px) { .notes-tab { top: calc(50% + 54px); width: 38px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .notes-panel, .notes-tab { transition: none; } }

.page {
  position: relative;
  width: 794px;
  min-height: 1000px;
  padding: 44px 52px 56px;
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 1px 3px rgba(60, 50, 30, 0.18), 0 8px 24px rgba(60, 50, 30, 0.08);
  transform-origin: 0 0;
  font: 21px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.ink-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ink-layer.active { pointer-events: auto; cursor: crosshair; }

.page-head { border-bottom: 3px solid #1c1c1e; padding-bottom: 10px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 30px; }
.page-meta { color: #6b6b70; font-size: 17px; }
.page-foot { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 14px; color: #9a9aa0; }

.block { margin-bottom: 18px; }
.page h2 { font-size: 24px; margin: 6px 0 0; }
.page .text { margin: 0; }
.page img { display: block; max-width: 100%; object-fit: contain; -webkit-user-drag: none; }

.instruction { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; margin-top: 10px; }
.badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  font-size: 17px;
  display: grid;
  place-items: center;
}
.translation { font-weight: 400; font-size: 16px; color: #6b6b70; }

figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
figcaption { font-size: 16px; color: #6b6b70; }

.bank { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px; border: 2px dashed #b9b9bf; border-radius: 12px; }

.items { display: grid; column-gap: 34px; }
.item { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 6px 0; min-width: 0; }
.letter { flex: none; width: 26px; color: #8a8a90; font-size: 18px; }
.item-body { flex: 1; min-width: 0; }
.gaps .item-body { display: flex; align-items: flex-end; gap: 14px; }
.gap-text { line-height: 2.5; }
.item:has(img), .item:has(img) .item-body { align-items: center; }

.gap { display: inline-block; min-width: 150px; height: 1.5em; margin: 0 6px; border-bottom: 2px solid #4a4a50; vertical-align: baseline; }
.gap.fill { flex: 1; min-width: 60px; }
/* luki w zdaniach rozciągają się na wolne miejsce w wierszu — pismo odręczne jest szersze niż druk */
.gap-text.grow { display: flex; flex-wrap: wrap; align-items: baseline; flex: 1; min-width: 0; column-gap: 0.28em; }
.gap-text.grow .gap { flex: 1 1 150px; max-width: 250px; margin: 0 2px; }
.gap-text.grow .tight { margin-left: -0.28em; } /* kropka tuż za luką, bez odstępu jak między wyrazami */
.gap-text.grow .brk { flex-basis: 100%; height: 0; }

.rule { height: 50px; border-bottom: 2px solid #4a4a50; }

.options { display: flex; flex-wrap: wrap; gap: 6px 44px; padding: 4px 0 10px; }
.options > span { padding: 6px 4px; }

/* choice inline: zdanie po lewej, pola do zaznaczenia po prawej w tym samym wierszu */
.choice-inline .item { align-items: center; }
.choice-inline .item-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.choice-inline .gap-text { line-height: 1.5; }
.choice-inline .options { flex: none; gap: 8px; padding: 8px 0; }
/* Opcja to napis z kropkowaną linią pod spodem: uczeń podkreśla, a napis zostaje czytelny
   (zamalowane kółko zasłaniało literę). Wymiary pola są takie same jak wcześniej. */
.choice-inline .options > span {
  min-width: 42px;
  padding: 7px 9px;
  border: 2px solid transparent;
  border-bottom: 2px dotted #b4b4bb;
  text-align: center;
  line-height: 1.2;
}

/* mark: duży odstęp między wierszami na podkreślenia i zakreślenia */
.mark-text { line-height: 2.5; word-spacing: 0.2em; }

/* wskazówka pod wierszem, żeby nie zasłaniała pól opcji */
.choice-inline .item, .mark .item { padding-bottom: 14px; }
.choice-inline .item > .verdict-note, .mark .item > .verdict-note,
.choice-inline .item > .note-input, .mark .item > .note-input { top: auto; bottom: -4px; }

/* klucz w zadaniach zamkniętych: zielone wyróżnienie poprawnej opcji / wyrazu zamiast etykiety z boku */
.show-answers .choice-inline .answer, .show-answers .mark .answer { display: none; }
.show-answers .choice-inline .options > span.correct { border-bottom: 2px solid #16a34a; background: rgba(22, 163, 74, 0.14); border-radius: 6px 6px 0 0; }
.show-answers .word.correct { background: rgba(22, 163, 74, 0.16); border-radius: 5px; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }

.match { position: relative; }
.match-row { display: flex; justify-content: space-between; height: 58px; align-items: center; }
.match-left, .match-right { display: flex; align-items: center; gap: 14px; width: 36%; }
.match-left { justify-content: flex-end; text-align: right; }
.match i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1c1c1e; }

.problem { display: flex; align-items: baseline; gap: 4px; line-height: 2.5; }

/* wzory (KaTeX): rozmiar jak tekst obok, bez łamania w środku wzoru */
.math { white-space: nowrap; }
.math .katex { font-size: 1.08em; }
.gap-text.grow .math { align-self: center; }
/* wiersz z ułamkiem jest wyższy: odręczny ułamek potrzebuje miejsca nad i pod kreską */
.item:has(.mfrac) .problem, .item:has(.mfrac) .gap-text { line-height: 3.3; }

/* działanie pisemne: słupek z kratkami jak w zeszycie */
.written .item { align-items: flex-start; padding: 8px 0 14px; }
.written .letter { padding-top: 34px; }
.calc { display: inline-flex; flex-direction: column; }
.calc-row { display: flex; }
.calc .cell {
  flex: none; width: 38px; height: 44px; margin: 0 -1px -1px 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #c9d6ea; font-size: 26px; font-variant-numeric: tabular-nums;
}
.calc-row.carry .cell { height: 26px; border-style: dashed; border-bottom-style: solid; }
.calc-row.line .cell { border-top: 3px solid #1c1c1e; }
.calc.division .quotient .cell.over { border-bottom: 3px solid #1c1c1e; }
.show-answers .written .item > .answer { top: 6px; transform: none; }

.card-block { border: 3px solid #1c1c1e; border-radius: 16px; overflow: hidden; }
.card-title { background: #1c1c1e; color: #fff; font-weight: 700; padding: 8px 18px; }
.card-body { display: flex; gap: 22px; align-items: center; padding: 8px 18px 20px; }
.card-fields { flex: 1; }
.field { position: relative; display: flex; align-items: baseline; gap: 6px; line-height: 2.7; }
.field-label { font-weight: 600; }

.dialogue .speaker { flex: none; min-width: 74px; line-height: 2.5; }

.space.bordered { border: 2px solid #b9b9bf; border-radius: 12px; }

/* klucz odpowiedzi: pozycjonowany absolutnie, żeby nie zmieniać układu strony */
.answer { display: none; }
.show-answers .answer {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 70%;
  padding: 0 6px;
  font: 600 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #15803d;
  background: rgba(236, 253, 243, 0.92);
  border-radius: 6px;
  pointer-events: none;
}

/* Klucz stoi na wysokości wiersza, wskazówka tuż pod nim — razem, z dala od sąsiednich wierszy.
   Pod liniami do pisania i przy dopasowaniu oba zostają w dolnym rogu. */
.show-answers .item:has(.rule) > .answer { top: auto; bottom: 22px; transform: none; }
/* dopasowanie: klucz w jednej linii nad pierwszym wierszem (tam jest wolne miejsce), bez zasłaniania par */
.show-answers .match > .answer { top: -8px; transform: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* znaczki oceny przy zadaniach: dobrze / do poprawy */
.ink-layer { z-index: 1; }
.verdict {
  display: none;
  position: absolute;
  left: -27px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  font: 700 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #fff;
  z-index: 2;
  pointer-events: none;
}
.lines-block { position: relative; }
.item:has(.rule) > .verdict, .lines-block > .verdict { top: 22px; }
.verdict[data-state="ok"] { display: block; background: #16a34a; }
.verdict[data-state="ok"]::before { content: "✓"; }
.verdict[data-state="fix"] { display: block; background: #ea580c; }
.verdict[data-state="fix"]::before { content: "✗"; }
/* rodzic może stuknąć znaczek, żeby zmienić ocenę; puste miejsce to przerywane kółko */
.can-mark .verdict { display: block; pointer-events: auto; cursor: pointer; }
.can-mark .verdict:not([data-state]), .can-mark .verdict[data-state=""] { border: 2px dashed #c4c4ca; }
.can-mark .verdict::after { content: ""; position: absolute; inset: -9px; }

.verdict-note {
  display: none;
  position: absolute;
  right: 0;
  bottom: -9px; /* pod zadaniem, w odstępie między wierszami — także gdy zadanie zajmuje dwie linie */
  max-width: 75%;
  padding: 0 6px;
  font: 600 12px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #c2410c;
  background: rgba(255, 247, 237, 0.92);
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.verdict-note:not(:empty) { display: block; }
/* miejsce błędu wskazane przy sprawdzaniu: podświetlone słowo z falistą kreską pod spodem */
.spot {
  position: absolute;
  pointer-events: none;
  background: rgba(234, 88, 12, 0.13);
  border-radius: 7px;
  border-bottom: 3px dotted #ea580c;
}
.spot-tip {
  position: absolute; top: -11px; right: -11px; z-index: 3;
  width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: #ea580c; color: #fff; font: 700 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
}
.spot-tip::after { content: ""; position: absolute; inset: -10px; }
.spot-hint {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 6;
  width: max-content; max-width: 260px; padding: 6px 10px;
  font: 600 14px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #c2410c;
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; box-shadow: 0 6px 20px rgba(60, 50, 30, 0.22);
}
.spot.to-left .spot-hint { left: auto; right: 0; }
.spot.open { z-index: 6; }
.spot.open .spot-hint { display: block; }
.match > .verdict-note, .match > .note-input { top: auto; bottom: 0; }
/* linie do pisania: wskazówka pod ostatnią linią (w odstępie pod zadaniem), nie na piśmie ucznia */
.item:has(.rule) > .verdict-note, .lines-block > .verdict-note,
.item:has(.rule) > .note-input, .lines-block > .note-input { bottom: auto; top: calc(100% + 3px); }
/* uczeń stuka wskazówkę albo znaczek ✗, żeby rozwinąć pełną treść */
.can-read .verdict-note, .can-read .verdict[data-state="fix"] { pointer-events: auto; cursor: pointer; z-index: 2; }
.can-read .verdict[data-state="fix"]::after { content: ""; position: absolute; inset: -9px; }
.verdict-note { max-width: 100%; }
.verdict-note.open {
  bottom: auto !important;
  top: calc(100% - 9px) !important; /* dymek rozwija się w dół, nie na zadanie */
  white-space: normal;
  overflow: visible;
  z-index: 6;
  min-width: min(260px, 100%);
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.35;
  background: #fff7ed;
  border: 1px solid #fdba74;
  box-shadow: 0 6px 20px rgba(60, 50, 30, 0.22);
}
/* rodzic może stuknąć wskazówkę, żeby ją wpisać lub zmienić */
.can-mark .verdict-note { pointer-events: auto; cursor: text; z-index: 2; }
.verdict-note.placeholder { color: #9a9aa0; background: rgba(255, 255, 255, 0.9); border: 1px dashed #c4c4ca; font-weight: 400; }
.note-input {
  position: absolute;
  right: 0;
  bottom: -12px;
  width: 62%;
  z-index: 3;
  padding: 3px 8px;
  border: 1px solid #ea580c;
  border-radius: 6px;
  font: 600 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #c2410c;
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- panel oceny ---------- */

.grade-panel {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.grade-panel label { font-weight: 600; white-space: nowrap; }
.grade-panel input { width: 70px; }
.grade-panel input.comment { flex: 1; width: auto; min-width: 200px; }

@media (max-width: 640px) {
  .who { display: none; }
  .home .opt { display: none; }
}

/* ---------- dokumentacja: formy zadań (/formy.html) ---------- */

.docs-body { overflow-x: hidden; }

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.docs-topbar-title { color: var(--muted); font-weight: 600; }

.docs-main { max-width: 1240px; margin: 0 auto; padding: 8px 16px 80px; }
.docs-main h1 { font-size: 34px; letter-spacing: -0.02em; margin: 20px 0 10px; }
.docs-main h2 { font-size: 22px; margin: 0; }
.docs-main h3 { font-size: 17px; margin: 18px 0 6px; }
.docs-intro p { max-width: 78ch; margin: 0 0 10px; }

.docs-panel, .docs-form {
  margin-top: 20px;
  padding: 18px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  scroll-margin-top: 72px;
}
.docs-panel > h2 { margin-bottom: 10px; }
.docs-panel > p { margin: 0 0 10px; max-width: 78ch; }

.docs-rules { margin: 0; padding-left: 22px; max-width: 92ch; }
.docs-rules li { margin: 5px 0; }
.docs-table-wrap + .docs-rules { margin-top: 14px; }

.docs-table-wrap { overflow-x: auto; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.docs-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); }
.docs-table th, .docs-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table td:nth-child(2) { min-width: 230px; line-height: 1.7; }
.docs-table td:last-child { padding-right: 0; white-space: nowrap; }

/* etykieta sposobu sprawdzania */
.docs-check {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.docs-check-auto { background: #dff3e6; color: #15803d; }
.docs-check-ai { background: #dfe9fc; color: #1d4fb8; }
.docs-check-none { background: #ebe8e1; color: #565c6b; }

.docs-legend { list-style: none; margin: 0 0 10px; padding: 0; max-width: 92ch; }
.docs-legend li { margin: 8px 0; }
.docs-legend .docs-check { margin-right: 8px; }

.docs-toc-group { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; }
.docs-toc-label { flex: none; width: 70px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.docs-toc ul { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.docs-toc li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.docs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.docs-dot.docs-check-auto { background: #16a34a; }
.docs-dot.docs-check-ai { background: var(--accent); }
.docs-dot.docs-check-none { background: #b4b4bb; }

.docs-form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.docs-form-head .docs-check { margin-left: auto; }
.docs-variant { font-size: 14px; color: var(--muted); }
.docs-desc { margin: 10px 0 0; max-width: 92ch; }
.docs-note { margin: 8px 0 0; max-width: 92ch; font-size: 15px; color: var(--warn); }
.docs-how { margin: 16px 0 0; max-width: 100ch; font-size: 16px; }

.docs-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: start; }
@media (min-width: 1100px) {
  .docs-demo { grid-template-columns: minmax(0, 637px) minmax(0, 1fr); gap: 20px; }
}
.docs-stage { min-width: 0; }
/* ramka podglądu: rozmiar (po pomniejszeniu) ustawia formy.js */
.docs-preview { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* sama treść bloków: bez nagłówka strony, stopki i wysokości kartki */
.docs-preview .page { min-height: 0; padding: 20px 44px 4px; box-shadow: none; }
.docs-preview .page-head, .docs-preview .page-foot { display: none; }

.docs-code { min-width: 0; }
.docs-code-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.docs-json {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

@media (max-width: 640px) {
  .docs-topbar-title { display: none; }
  .docs-panel, .docs-form { padding: 14px 14px 16px; }
  .docs-form-head .docs-check { margin-left: 0; }
}

/* ---------- druk / PDF ----------
   Arkusz ma szerokość kartki A4 (794 px przy 96 dpi). W trybie druku ink.js pokazuje wszystkie strony
   i pomniejsza zbyt wysokie, a te reguły zostawiają na papierze samą kartkę. */
/* Margines kartki musi być zerowy: w niezerowym przeglądarka drukuje własny nagłówek i stopkę
   (data, tytuł, adres strony). Odstęp od krawędzi dają reguły poniżej. */
@page { size: A4 portrait; margin: 0; }

.print-margin { display: none; }
/* Arkusz bez pisma drukuje się „ciągiem”: naturalna wielkość, pełna szerokość kartki, wspólny lewy margines,
   a podział na kartki nie rozcina zadań ani nie oddziela polecenia od zadań. */
.print-flow .page-wrap { margin: 0 auto; }
.print-flow .page { min-height: 0; padding-top: 0; padding-bottom: 0; box-shadow: none; }
.print-flow .page-wrap + .page-wrap .page { padding-top: 18px; }
.print-flow .page-foot, .print-flow .ink-layer { display: none; }
.print-flow .item, .print-flow .match, .print-flow .card-block, .print-flow .instruction,
.print-flow .bank, .print-flow figure, .print-flow .rule, .print-flow .page-head { break-inside: avoid; }
.print-flow .block-instruction, .print-flow .block-heading, .print-flow .block-word_bank,
.print-flow .block-text, .print-flow .page-head { break-after: avoid; }
@media print {
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app { padding-top: 0 !important; }
  .toolbar, .topbar, .grade-panel, .page-nav, .toast, .update-pill, .statusbar-fill, .banner, .spot-tip, .spot-hint, .notes-tab, .notes-panel { display: none !important; }
  .pages { display: block; padding: 0; overflow: visible; }
  .page-wrap { margin: 0 auto; break-after: page; break-inside: avoid; }
  .page-wrap:last-of-type { break-after: auto; }
  .print-flow .page-wrap { break-after: auto; break-inside: auto; }
  /* górny i dolny odstęp na KAŻDEJ kartce: puste wiersze nagłówka i stopki tabeli powtarzają się przy podziale */
  .pages.print-flow { display: table; width: 100%; }
  .print-margin { display: block; height: 11mm; }
  .print-margin.top { display: table-header-group; break-inside: avoid; }
  .print-margin.bottom { display: table-footer-group; break-inside: avoid; }
  .print-margin::before { content: ""; display: block; height: 11mm; }
  .page { box-shadow: none; }
  /* puste miejsca na ocenę i wskazówkę to elementy interfejsu, nie treść */
  .can-mark .verdict:not([data-state]), .can-mark .verdict[data-state=""], .verdict-note.placeholder { display: none !important; }
}

/* ---------- powiadomienia: pasek na liście ucznia ---------- */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 18px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 15px;
}
.notice .btn:first-of-type { margin-left: auto; }
.notice.quiet { background: transparent; border-color: transparent; padding: 0; color: var(--muted); font-size: 14px; }
@media print { .notice { display: none !important; } }