/* Poznámkový blok — nekonečné plátno na výpočty (scratchpad.js).
   Barvy jen přes CSS proměnné kvůli tmavému režimu.
   Pozadí (čtverečky/linky/tečky) i tahy se kreslí procedurálně v canvasu,
   proto tu už není žádná CSS mřížka. */

:root {
  --scratch-ink: #2a2a35;   /* grafit (default pero) */
  --scratch-red: #d92d20;   /* opravná červená */
  --scratch-blue: #1d6fe0;  /* modrá */
  --scratch-hl: #ffd21f;    /* zvýrazňovač (alfu řeší JS) */
  --scratch-grid: #e2ddef;  /* pozadí plátna */
}
/* Tmavý režim řídí appka atributem data-tema (lab i klasik) — NE OS preferencí:
   lab reprezentuje světlo NEPŘÍTOMNOSTÍ atributu, takže prefers-color-scheme by
   při tmavém OS udělalo skoro neviditelný inkoust na bílém plátně (audit HIGH). */
html[data-tema="tmavy"] {
  --scratch-ink: #e7e5f2; --scratch-red: #ff6b6b; --scratch-blue: #6aa8ff;
  --scratch-hl: #ffe066; --scratch-grid: #2a2540;
}

/* plovoucí tlačítko tužky */
.scratch-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 59;
  width: 56px; height: 56px;
  border-radius: 50%; border: none;
  background: var(--fialova); color: var(--on-brand,#fff);
  font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.scratch-fab:active { transform: translateY(1px); }
.scratch-fab.je-otevreno { display: none; }   /* při otevřeném bloku zavírá „Hotovo" */

/* pracovní plocha — modální, nad plovoucími ⚙️/🌙 (z-index 60): na mobilu ležely
   přes „Sbalit zadání“ a ťuk přepnul tmavý režim. Pod dialogy appky (70+). */
.scratch-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--pozadi);
}
.scratch-overlay[hidden] { display: none; }
.scratch-overlay:focus { outline: none; }

/* dvě vrstvy plátna: commit (pozadí + hotové tahy) dole, live (rozdělaný tah) nahoře */
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
}
.scratch-canvas--commit { pointer-events: none; background-color: var(--pozadi); }
.scratch-canvas--live { background: transparent; cursor: crosshair; }
.scratch-canvas--live.je-ruka { cursor: grab; }
.scratch-canvas--live.je-ruka:active { cursor: grabbing; }

/* lišta nástrojů — dole (nekoliduje s kartou zadání nahoře, palcem po ruce) */
.scratch-listva {
  position: absolute;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; gap: 6px; align-items: center;
  padding: 8px;
  border-radius: 18px;
  background: var(--pozadi);
  border: 1.5px solid var(--ram);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  width: max-content;
  max-width: calc(100vw - 12px);
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
}
/* skupiny, které se nikdy nerozdělí ani neschovají: kreslicí nástroje, Zpět/Vpřed */
.scratch-skupina { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; flex: 0 0 auto; }
/* barvy, tloušťky, pozadí, zoom, koš: řada, která se při nedostatku místa posouvá do strany */
.scratch-listva-radek {
  flex: 1 1 0; min-width: 150px;
  display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -ms-overflow-style: none;
  scroll-padding: 4px;
  padding-bottom: 2px;   /* místo pro scrollbar, ať neřeže spodek terčů */
}
.scratch-listva-radek::-webkit-scrollbar { height: 4px; }
.scratch-listva-radek::-webkit-scrollbar-thumb { background: var(--ram); border-radius: 4px; }
.scratch-listva-radek > * { flex: 0 0 auto; }
.scratch-oddel { width: 1.5px; align-self: stretch; min-height: 40px; background: var(--ram); margin: 0 2px; }

/* obecné tlačítko lišty */
.scratch-nastroj {
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--pozadi-tlumene);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.scratch-nastroj:active { transform: translateY(1px) scale(.96); }
.scratch-nastroj svg { display: block; }
.scratch-zn { font-size: 1.6rem; line-height: 1; font-weight: 800; }

/* hlavní nástroje — velké dětské terče */
.scratch-nastroj.je-hlavni { width: 56px; height: 56px; border-radius: 14px; }

/* výrazné zvýraznění aktivního nástroje */
.scratch-nastroj.je-aktivni {
  border-color: var(--fialova);
  background: var(--fialova-svetla);
  color: var(--fialova);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fialova) 22%, transparent);
}
.scratch-nastroj.je-vyp { opacity: .38; cursor: default; }
.scratch-nastroj.je-vyp:active { transform: none; }

/* barevné terče */
.scratch-barva { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ram); }
.scratch-barva.je-grafit { background: var(--scratch-ink); }
.scratch-barva.je-cervena { background: var(--scratch-red); }
.scratch-barva.je-modra { background: var(--scratch-blue); }
.scratch-barva.je-aktivni {
  border-color: var(--pozadi);
  box-shadow: 0 0 0 3px var(--fialova), 0 0 0 5px color-mix(in srgb, var(--fialova) 28%, transparent);
}

/* tloušťky */
.scratch-sirka { width: 44px; height: 44px; }
.scratch-sirka .cara { display: block; width: 24px; border-radius: 99px; background: currentColor; }
.scratch-sirka.je-aktivni { border-color: var(--fialova); background: var(--fialova-svetla); color: var(--fialova); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fialova) 22%, transparent); }

.scratch-hotovo {
  height: 46px; padding: 0 18px;
  border-radius: 12px; border: none;
  background: var(--fialova); color: var(--on-brand,#fff);
  font-weight: 800; font-family: var(--font); font-size: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scratch-hotovo:active { transform: translateY(1px); }

/* popovery nad lištou (pozadí, potvrzení mazání) */
.scratch-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--pozadi);
  border: 1.5px solid var(--ram);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  padding: 10px;
  z-index: 6;
}
.scratch-popover[hidden] { display: none; }
.scratch-popover--pozadi { display: flex; gap: 8px; }
.scratch-pozvol {
  width: 72px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid transparent; border-radius: 12px;
  background: var(--pozadi-tlumene); color: var(--text);
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scratch-pozvol svg { display: block; }
.scratch-pozvol.je-aktivni {
  border-color: var(--fialova);
  background: var(--fialova-svetla);
  color: var(--fialova);
}

.scratch-popover--smaz { width: min(260px, 80vw); text-align: center; }
.scratch-popover-text { font-weight: 800; font-size: 1rem; color: var(--text); margin: 4px 4px 12px; }
.scratch-popover-akce { display: flex; gap: 8px; }
.scratch-pop-btn {
  flex: 1; height: 46px;
  border-radius: 12px; border: 1.5px solid var(--ram);
  background: var(--pozadi-tlumene); color: var(--text);
  font-weight: 800; font-family: var(--font); font-size: .95rem;
  cursor: pointer;
}
.scratch-pop-btn.je-nebezpecne {
  border-color: transparent;
  background: var(--scratch-red, #d92d20); color: #fff;
}
.scratch-pop-btn:active { transform: translateY(1px); }

/* plovoucí kartička se zadáním */
.scratch-zadani {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(92%, 520px);
  background: var(--pozadi);
  border: 1.5px solid var(--ram);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.scratch-zadani-hlava {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 6px 8px 12px;
  cursor: move;
  touch-action: none;
  border-bottom: 1px solid var(--ram);
  background: var(--pozadi-tlumene);
}
.scratch-zadani.je-sbaleno .scratch-zadani-hlava { border-bottom: none; }
.scratch-zadani-stitek { font-weight: 800; font-size: .9rem; color: var(--fialova); }
.scratch-zadani-sbal {
  border: none; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 1rem; color: var(--text-tlumeny);
}
.scratch-zadani-telo {
  padding: 10px 14px;
  font-size: 1rem; line-height: 1.45; color: var(--text);
  max-height: 38vh; overflow: auto;
}
.scratch-zadani.je-sbaleno .scratch-zadani-telo { display: none; }
/* řádky zadání jako v úloze: podotázky a), b)… i nabídka A)–F) pod sebou */
.scratch-zadani-text { white-space: pre-line; }
.scratch-zadani-pokyn { margin-top: 6px; color: var(--text-tlumeny); font-weight: 700; font-size: .92rem; }
.scratch-zadani-obrazek { margin-top: 8px; color: var(--text); }
.scratch-zadani-obrazek[hidden] { display: none; }
.scratch-zadani-obrazek svg,
.scratch-zadani-obrazek img { display: block; width: 100%; height: auto; max-height: 30vh; }
.scratch-zadani-casti { margin: 8px 0 0; padding-left: 1.4em; }
.scratch-zadani-casti li { margin: 3px 0; }
/* odpočet zkoušky v hlavičce karty */
.scratch-cas {
  margin-left: auto;
  font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--pozadi); border: 1.5px solid var(--ram); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap;
}
.scratch-cas[hidden] { display: none; }
.scratch-cas.scratch-cas--dochazi { color: var(--cervena); border-color: var(--cervena); }
.scratch-cas.scratch-cas--volne {   /* bez karty zadání plave vlevo nahoře */
  position: absolute; z-index: 4;
  top: calc(10px + env(safe-area-inset-top)); left: 12px;
  font-size: 1rem; padding: 6px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

/* pole na odpověď přímo v okně */
.scratch-odpoved {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ram);
}
.scratch-zadani.je-sbaleno .scratch-odpoved { display: none; }
.scratch-odpoved-stitek { font-weight: 800; font-size: .9rem; color: var(--fialova); white-space: nowrap; }
.scratch-odpoved-vstup {
  flex: 1; min-width: 0;
  font-size: 1.05rem; font-family: var(--font);
  padding: 8px 10px;
  border: 1.5px solid var(--ram-tmavy); border-radius: 10px;
  background: var(--pozadi); color: var(--text);
  text-align: center;
}
.scratch-odpoved-vstup:focus { outline: none; border-color: var(--fialova); box-shadow: 0 0 0 3px var(--fialova-svetla); }
.scratch-odpoved-jed { color: var(--text-tlumeny); font-weight: 700; }

/* ikona poznámkového bloku v hlavičce testové úlohy */
.test-scratch-ikona {
  flex: 0 0 auto;
  align-self: center;
  height: 34px; padding: 0 12px;
  border: 1.5px solid var(--fialova); border-radius: 999px;
  background: var(--fialova-svetla); color: var(--fialova);
  font-size: .85rem; font-weight: 800; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.test-scratch-ikona:active { transform: translateY(1px); }

body.scratch-otevren { overflow: hidden; }

/* Tablet: celá lišta se na jeden řádek nevejde → nástroje, Zpět/Vpřed a Hotovo
   nahoře, barvy/tloušťky/pozadí/zoom/koš celé pod nimi (nic se neschová). */
@media (min-width: 601px) and (max-width: 1180px) {
  .scratch-listva-radek { order: 3; flex-basis: 100%; justify-content: center; }
}

/* Telefon: lišta se zalomí do dvou řad — nahoře nástroje + Zpět/Vpřed, dole
   posuvná řada (barvy, tloušťky, pozadí, zoom, koš) a Hotovo. Terče ≥ 44 px. */
@media (max-width: 600px) {
  .scratch-listva { gap: 5px; padding: 6px; border-radius: 16px; bottom: calc(6px + env(safe-area-inset-bottom)); }
  .scratch-skupina, .scratch-listva-radek { gap: 5px; }
  .scratch-nastroj.je-hlavni { width: 46px; height: 46px; border-radius: 12px; }
  .scratch-nastroj { width: 44px; height: 44px; }
  .scratch-barva, .scratch-sirka { width: 42px; height: 42px; }
  .scratch-oddel { min-height: 34px; }
  .scratch-hotovo { height: 44px; padding: 0 14px; }
}
@media (max-width: 380px) {
  .scratch-listva { gap: 4px; padding: 5px; }
  .scratch-skupina, .scratch-listva-radek { gap: 4px; }
  .scratch-nastroj.je-hlavni { width: 44px; height: 44px; }
  .scratch-hotovo { padding: 0 12px; }
}