/* © 2026 Bystrohry. All rights reserved. See NOTICE.md */
/* Barevná témata: všechny barvy textu a podkladů jsou proměnné; scripts/check-contrast.mjs z nich počítá poměr kontrastu
   (normální téma >= 4,5:1, vysoký kontrast >= 7:1). Vysoký kontrast přepisuje proměnné jen v bloku html[data-contrast="high"]. */
:root {
  --bg: #ffffff; --tile: #f3f6fb; --edge: #c9d6ee; --ink: #1d2b4a; --accent: #3b5ba5; --on-accent: #ffffff;
  --secondary: #5f6f94; --on-secondary: #ffffff; --secondary-edge: #5f6f94; --hint: #55658a; --err: #b00020; --ok: #14532d;
  --folder: #e6eefb; --folder-edge: #3b5ba5; --edit-bg: #fff3d6; --edit-edge: #e0a100;
  --hide-bg: #fff7d6; --hide-ink: #4d3b00; --hide-edge: #8a6d00;
  --danger-bg: #fdecea; --danger-ink: #8a1c14; --danger-edge: #e0a09a;
  --ready-bg: #e6f4ea; --ready-ink: #14532d; --ready-edge: #1e8e3e; --rec-bg: #d93025; --on-rec: #ffffff;
  --notice-bg: #fff8e1; --notice-edge: #f0c36d; --hl: #c45500;
  --ring: 0px; --label-scale: 1;
}
/* Vysoký kontrast: bílé pozadí, černý text, silné černé obrysy (vnitřní stín, takže se nic neposune), složky žluté. Symboly zůstávají barevné. */
html[data-contrast="high"] {
  --bg: #ffffff; --tile: #ffffff; --edge: #000000; --ink: #000000; --accent: #000000; --on-accent: #ffffff;
  --secondary: #ffffff; --on-secondary: #000000; --secondary-edge: #000000; --hint: #1a1a1a; --err: #8b0000; --ok: #0b3d1e;
  --folder: #ffe14d; --folder-edge: #000000; --edit-bg: #ffe14d; --edit-edge: #000000;
  --hide-bg: #ffffff; --hide-ink: #000000; --hide-edge: #000000;
  --danger-bg: #ffffff; --danger-ink: #7a0000; --danger-edge: #000000;
  --ready-bg: #ffffff; --ready-ink: #000000; --ready-edge: #000000; --rec-bg: #000000; --on-rec: #ffffff;
  --notice-bg: #ffffff; --notice-edge: #000000; --hl: #c45500;
  --ring: 3px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, sans-serif; overscroll-behavior: none; touch-action: manipulation; }
#app { height: 100%; display: grid; grid-template-rows: auto 1fr; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 8px; position: relative; }
#sentence-bar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; min-height: 64px; }
#sentence-bar[hidden] { display: none; }
#sentence-items { display: flex; gap: 6px; overflow-x: auto; align-items: center; border: 2px solid var(--edge); border-radius: 12px; padding: 4px 8px; box-shadow: inset 0 0 0 var(--ring) var(--edge); }
#sentence-items img { height: 48px; width: 48px; flex: none; }
#sentence-bar button { min-width: 88px; font-size: 20px; border: 0; border-radius: 12px; color: var(--on-accent); background: var(--accent); }
#btn-clear { background: var(--secondary); color: var(--on-secondary); box-shadow: inset 0 0 0 var(--ring) var(--secondary-edge); }
/* Dlaždice se nikdy neposouvají ani nezvětšují gestem: bez toho Chrome/WebView po ~8 dp pohybu prstu vyšle pointercancel a zruší přidržení (Plán 4, motorika). Panely a vstupy mají dál manipulation. */
#grid .tile { touch-action: none; }
#grid { grid-row: 2; display: grid; gap: 8px; min-height: 0; }
.tile { position: relative; overflow: hidden; border: 2px solid var(--edge); box-shadow: inset 0 0 0 var(--ring) var(--edge); background: var(--tile); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; min-width: 0; min-height: 0; font-size: calc(clamp(11px, 2.2vmin, 20px) * var(--label-scale)); text-align: center; color: var(--ink); }
.tile img { flex: 1 1 0; min-height: 40px; max-width: 80%; object-fit: contain; pointer-events: none; }
.tile.folder { background: var(--folder); border-color: var(--folder-edge); box-shadow: inset 0 0 0 var(--ring) var(--folder-edge); }
.tile.empty { border-style: dashed; background: transparent; opacity: .35; }
.tile:active:not(.empty) { transform: scale(.97); }
#app { padding-bottom: calc(env(safe-area-inset-bottom) + 84px + var(--extra-pad, 0px)); }
#brand { position: absolute; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 56px; opacity: .8; pointer-events: auto; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
#gear { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 64px; height: 64px; font-size: 32px; border: 0; background: transparent; color: var(--ink); opacity: .5; }
#gear-hint { position: absolute; right: 12px; bottom: calc(12px + 64px + 8px + env(safe-area-inset-bottom)); max-width: min(280px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 16px; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; z-index: 5; }
#gear-hint[hidden] { display: none; }
#about { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
#about[hidden] { display: none; }
#about-box { margin: auto; max-width: 640px; width: 100%; text-align: center; font-size: 20px; line-height: 1.4; user-select: text; }
#about-box h1 { font-size: 28px; margin: 0 0 12px; }
#about-box p { margin: 0 0 16px; font-size: 20px; overflow-wrap: anywhere; }
#about-close { min-width: 200px; min-height: 64px; font-size: 24px; border: 0; border-radius: 14px; color: var(--on-accent); background: var(--accent); padding: 0 24px; }
#about-licenses { display: block; margin: 0 auto 12px; min-width: 200px; min-height: 56px; font-size: 20px; border: 2px solid var(--secondary-edge); border-radius: 14px; color: var(--on-secondary); background: var(--secondary); padding: 0 24px; }
#licenses { position: fixed; inset: 0; z-index: 11; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 16px; }
#licenses[hidden] { display: none; }
#licenses-box { display: flex; flex-direction: column; max-width: 640px; width: 100%; max-height: 100%; font-size: 18px; line-height: 1.4; }
#licenses-box h1 { font-size: 26px; margin: 0 0 8px; text-align: center; }
#licenses-box p { margin: 0 0 12px; text-align: center; overflow-wrap: anywhere; }
#licenses-text { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 0 12px; padding: 10px; border: 2px solid var(--edge); border-radius: 10px; font: 13px/1.4 monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; text-align: left; -webkit-overflow-scrolling: touch; }
#licenses-close { align-self: center; min-width: 200px; min-height: 64px; font-size: 24px; border: 0; border-radius: 14px; color: var(--on-accent); background: var(--accent); padding: 0 24px; }
.pbtn.holding { animation: wipe-hold 1.5s linear forwards; }
@keyframes wipe-hold { from { box-shadow: inset 0 0 0 0 var(--danger-edge); } to { box-shadow: inset 0 0 0 28px var(--danger-edge); } }
@media (prefers-reduced-motion: reduce) { .pbtn.holding { animation: none; box-shadow: inset 0 0 0 14px var(--danger-edge); } }
#about-brand { display: block; width: 240px; max-width: 70%; height: auto; margin: 20px auto 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Dlaždicový štítek se smí zalomit nebo oříznout, ale obrázek nikdy nezmizí. */
.tile span { flex: 0 0 auto; max-width: 100%; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
/* Štítek se vždy vejde celý; ui.js zmenšuje písmo (min 11px), jako poslední možnost ořízne na 3 řádky (plný text v aria-label). */
.tile span.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Profil telefon: 4×5, větší dlaždice a obrázky */
html[data-profile="phone"] #grid { gap: 6px; }
html[data-profile="phone"] .tile { padding: 3px; font-size: calc(clamp(12px, 3.6vw, 18px) * var(--label-scale)); }
html[data-profile="phone"] .tile img { min-height: 56px; max-width: 92%; }
/* Telefon na šířku: celoobrazovkový překryv, ať se nikdy nezobrazí zmáčknutá mřížka */
#rotate { position: fixed; inset: 0; z-index: 30; background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: clamp(24px, 9vmin, 48px); font-weight: 600; line-height: 1.25; }
#rotate[hidden] { display: none; }
/* Rodičovský režim: pruh Úpravy, zámek, panel, editor */
#edit-bar { position: absolute; left: 12px; right: 84px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 64px; min-width: 0; overflow: hidden; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 4px 12px; border-radius: 14px; background: var(--edit-bg); color: var(--ink); border: 2px solid var(--edit-edge); font-size: 18px; font-weight: 700; }
#edit-bar[hidden] { display: none; }
#edit-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#edit-done { flex: none; min-width: 72px; min-height: 56px; font-size: 18px; border: 0; border-radius: 12px; color: var(--on-accent); background: var(--accent); padding: 0 10px; }
/* Úpravy: tlačítko Skrýt/Zobrazit v rohu dlaždice (ve stejné buňce mřížky), skrytá položka je ztlumená */
.hide-toggle { z-index: 2; align-self: start; justify-self: end; margin: 4px; min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; border: 2px solid var(--hide-edge); border-radius: 12px; background: var(--hide-bg); color: var(--hide-ink); }
.tile.ed-hidden { opacity: .45; border-style: dashed; }
#app.editing .tile:not(.empty) { outline: 3px dashed var(--edit-edge); outline-offset: -3px; }
.ov { position: fixed; inset: 0; z-index: 20; background: var(--bg); color: var(--ink); overflow: auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); display: flex; }
.ov-box { margin: auto; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 12px; font-size: 20px; line-height: 1.35; }
.ov-box h1 { font-size: 26px; margin: 0; text-align: center; overflow-wrap: anywhere; }
.ov-box h2 { font-size: 18px; margin: 0 0 6px; color: var(--hint); }
.ov-box p { margin: 0; text-align: center; }
.ov-box p.msg { min-height: 24px; color: var(--err); font-size: 18px; font-weight: 600; }
.pbtn { min-height: 56px; min-width: 56px; font-size: 20px; border: 2px solid var(--edge); box-shadow: inset 0 0 0 var(--ring) var(--edge); border-radius: 14px; background: var(--tile); color: var(--ink); padding: 8px 16px; }
.pbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pbtn.secondary { background: var(--secondary); border-color: var(--secondary-edge); color: var(--on-secondary); }
.pbtn.danger { background: var(--danger-bg); border-color: var(--danger-edge); color: var(--danger-ink); }
.pbtn.choice.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.pbtn:disabled { opacity: .4; }
.pbtn.rec.ready { background: var(--ready-bg); border-color: var(--ready-edge); color: var(--ready-ink); font-weight: 700; box-shadow: 0 0 0 3px var(--ready-edge) inset; }
.pbtn.rec.recording { background: var(--rec-bg); border-color: var(--rec-bg); color: var(--on-rec); }
.pbtn.wide { width: 100%; }
.pgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.pgroup .pbtn { flex: 1 1 140px; }
.pactions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad .pbtn { min-height: 64px; font-size: 28px; }
.question { font-size: 40px !important; font-weight: 700; }
.answer { font-size: 36px !important; min-height: 48px; letter-spacing: 4px; border-bottom: 3px solid var(--edge); }
.hint { color: var(--hint); }
.esec { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.esec .pbtn { flex: 1 1 140px; }
.esec .msg { flex: 1 0 100%; }
.ehead { display: flex; align-items: center; gap: 14px; justify-content: center; }
.epreview { width: 96px; height: 96px; object-fit: contain; flex: none; border-radius: 12px; background: var(--tile); }
.phrase-form { display: flex; flex-direction: column; gap: 8px; }
.phrase-form label { display: flex; flex-direction: column; gap: 6px; font-size: 18px; color: var(--hint); }
.phrase-form input { font-size: 22px; min-height: 56px; border: 2px solid var(--edge); border-radius: 12px; padding: 0 12px; user-select: text; }
.big { font-size: 24px !important; }
/* Hledání: lupa ve spodním pruhu, překryv, zvýraznění dlaždice */
#search-btn { position: absolute; right: calc(12px + 64px + 4px); bottom: calc(12px + env(safe-area-inset-bottom)); width: 56px; height: 64px; border: 0; background: transparent; opacity: .6; padding: 0; display: flex; align-items: center; justify-content: center; }
#search-btn .mag { position: relative; width: 28px; height: 28px; display: block; }
#search-btn .mag::before { content: ''; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border: 3.5px solid var(--ink); border-radius: 50%; }
#search-btn .mag::after { content: ''; position: absolute; left: 17px; top: 21px; width: 12px; height: 4px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); transform-origin: 0 50%; }
#edit-bar { right: calc(12px + 64px + 4px + 56px + 6px); }
.search-box { margin: 0 auto; height: 100%; max-height: 100%; }
.search-input { font-size: 22px; min-height: 56px; border: 2px solid var(--edge); border-radius: 12px; padding: 0 12px; user-select: text; width: 100%; }
.search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.search-item { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 6px 10px; border: 2px solid var(--edge); border-radius: 14px; background: var(--tile); color: var(--ink); font: inherit; }
.search-item img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.search-txt { display: flex; flex-direction: column; min-width: 0; }
.search-txt strong { font-size: 20px; overflow-wrap: anywhere; }
.search-txt small { font-size: 15px; color: var(--hint); overflow-wrap: anywhere; }
@keyframes tile-pulse { 0%, 100% { outline-color: var(--hl); } 50% { outline-color: transparent; } }
.tile.hl { outline: 5px solid var(--hl); outline-offset: -3px; animation: tile-pulse .7s ease-in-out infinite; }
/* Vysoký kontrast: oranžový obrys (>= 3:1 vůči bílé dlaždici i černému prstenci) mezi dvěma černými pásy, takže je vidět i na černém okraji. */
html[data-contrast="high"] .tile.hl { outline-width: 6px; outline-offset: -4px; box-shadow: inset 0 0 0 14px var(--ink); }
@media (prefers-reduced-motion: reduce) { .tile.hl { animation: none; } }

/* Záloha, připomínka, návod */
.ov-box p.msg.ok { color: var(--ok); }
.pnotice { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--notice-bg); color: var(--ink); border: 2px solid var(--notice-edge); }
.pnotice.warn { background: var(--danger-bg); border-color: var(--danger-edge); }
.pnotice p { text-align: left; font-size: 18px; }
.pcard { display: flex; flex-direction: column; gap: 10px; }
.pcard p.hint { text-align: left; font-size: 18px; }
.pcheck { display: flex; align-items: center; gap: 12px; font-size: 18px; min-height: 48px; }
.pcheck input { width: 28px; height: 28px; flex: none; }
.ov-box p.guide-text { text-align: left; font-size: 22px; line-height: 1.45; }
/* Záložní obsah při selhání startu (index.html #boot) a nenápadná ikona nouzového režimu pro rodiče */
#boot { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 32px; color: var(--ink); pointer-events: none; }
#boot .bootmsg { display: none; font-size: 18px; }
#boot.fail { z-index: 50; background: var(--bg); }
#boot.fail .bootmsg { display: block; }
#storage-warn { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: 22px; opacity: .35; pointer-events: none; }
/* Velikost dlaždic (Plán 4): větší písmo a obrázky; mřížka i stránky jsou v datech (layout.js) */
html[data-size="large"] .tile { font-size: calc(clamp(14px, 3.4vmin, 28px) * var(--label-scale)); }
html[data-size="xlarge"] .tile { font-size: calc(clamp(16px, 4.6vmin, 36px) * var(--label-scale)); }
html[data-profile="phone"][data-size="large"] .tile { font-size: calc(clamp(14px, 4.8vw, 24px) * var(--label-scale)); }
html[data-profile="phone"][data-size="xlarge"] .tile { font-size: calc(clamp(16px, 6.4vw, 32px) * var(--label-scale)); }
html[data-size="large"] .tile img, html[data-size="xlarge"] .tile img { max-width: 96%; min-height: 56px; }
.tile.page { position: relative; }
.tile.page::after { content: attr(data-pg); position: absolute; top: 4px; right: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.tile.page[data-dir="prev"]::after { right: auto; left: 8px; }

/* Vysoký kontrast: ikony ve spodním pruhu jsou plně viditelné a mají černý obrys; logo bez průhlednosti */
html[data-contrast="high"] #gear, html[data-contrast="high"] #search-btn { opacity: 1; background: var(--bg); box-shadow: inset 0 0 0 3px var(--ink); border-radius: 14px; }
html[data-contrast="high"] #brand { opacity: 1; }
html[data-contrast="high"] .tile.empty { opacity: .6; border-color: var(--ink); }
html[data-contrast="high"] .search-item { border-color: var(--ink); }
/* Motorika (Plán 4): zpoždění stisku. Okraj dlaždice se plynule vyplňuje dovnitř, než se dlaždice aktivuje (délku dává --hold-ms z tap.js). */
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--accent); pointer-events: none; opacity: 0; }
.tile.holding::before { opacity: 1; animation: hold-fill var(--hold-ms, 400ms) linear forwards; }
@keyframes hold-fill { from { box-shadow: inset 0 0 0 0 var(--accent); } to { box-shadow: inset 0 0 0 12px var(--accent); } }
html[data-contrast="high"] .tile.holding::before { animation-name: hold-fill-hc; }
@keyframes hold-fill-hc { from { box-shadow: inset 0 0 0 0 #000; } to { box-shadow: inset 0 0 0 14px #000; } }
/* Omezení pohybu: výplň přidržení je statická (okraj je hned plný), zvýraznění z hledání nepulzuje. Musí být za pravidly výplně. */
@media (prefers-reduced-motion: reduce) {
  .tile.holding::before { animation: none; box-shadow: inset 0 0 0 12px var(--accent); }
  html[data-contrast="high"] .tile.holding::before { animation: none; box-shadow: inset 0 0 0 14px var(--ink); }
}

/* Přístupnost (Plán 4c): viditelný fokus pro klávesnici, Switch Access a Camera Switches. Obrys se nepočítá do rozměrů, nic se neposune.
   Dlaždice: obrys uvnitř okraje (sousední dlaždice ho nepřekryjí), dvě barvy (světlá+tmavá), aby byl vidět na každém podkladu. */
:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.tile:focus-visible { outline: 5px solid var(--accent); outline-offset: -5px; box-shadow: inset 0 0 0 var(--ring) var(--edge), inset 0 0 0 9px var(--bg); z-index: 1; }
#gear:focus-visible, #search-btn:focus-visible { opacity: 1; }
html[data-contrast="high"] :focus-visible { outline: 5px solid #000; outline-offset: 2px; }
html[data-contrast="high"] .tile:focus-visible { outline: 7px solid #000; outline-offset: -7px; box-shadow: inset 0 0 0 11px #fff; }
.ov[inert], #app[inert] { pointer-events: none; }

/* Přehled používání a cíle (Plán 4b): jen v rodičovském panelu */
.ov-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-word { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 10px; border: 2px solid var(--edge); border-radius: 14px; background: var(--tile); color: var(--ink); }
.ov-word img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ov-word-label { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.ov-word-count { flex: none; font-size: 22px; }
.ov-box p.big { font-size: 28px; font-weight: 700; }
.ov-chart { width: 100%; height: auto; max-height: 240px; }
.ov-bar { fill: var(--accent); }
.ov-bar.zero { fill: var(--edge); }
.ov-val { fill: var(--ink); font-size: 14px; font-weight: 700; }
.ov-axis { fill: var(--hint); font-size: 12px; }
.ov-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.ov-table th, .ov-table td { border-bottom: 1px solid var(--edge); padding: 6px 8px; text-align: left; font-weight: 400; }
.ov-table thead th, .ov-table tr:first-child th[scope="col"] { font-weight: 700; color: var(--hint); }
.goal .goal-now { text-align: left; font-size: 22px; }
.goal-strip { display: flex; gap: 8px; }
.goal-cell { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--edge); border-radius: 12px; font-size: 22px; font-weight: 700; color: var(--ink); background: var(--tile); }
.goal-cell.met { border-color: var(--ok); }
.goal-cell.miss { border-style: dashed; }
.goal-cell.na { opacity: .5; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pbtn.step { min-width: 72px; min-height: 64px; font-size: 32px; }
.step-val { min-width: 64px; text-align: center; font-size: 32px; font-weight: 700; }
.search-item.picked { border-color: var(--accent); }

/* Plány a deníček: tlačítka ve spodní liště vlevo od lupy (vidět jen při zapnutí v menu rodiče), karta plánu, týdenní přehled */
#bar-extras { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom) + 68px); display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 4px; }
.bar-btn { flex-direction: column; gap: 0; width: 62px; height: 68px; border: 0; background: transparent; opacity: .9; padding: 0; font-size: 30px; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.bar-btn[hidden] { display: none; }
html[data-contrast="high"] .bar-btn { opacity: 1; background: var(--bg); box-shadow: inset 0 0 0 3px var(--ink); border-radius: 14px; }
.tile.done img { opacity: .45; }
.tile.done::before { content: "✓"; position: absolute; top: 4px; left: 8px; font-size: 28px; font-weight: 700; color: var(--ok); z-index: 1; }
.done-toggle { z-index: 2; align-self: start; justify-self: end; margin: 4px; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 22px; line-height: 1; border: 2px solid var(--ready-edge); border-radius: 50%; background: var(--ready-bg); color: var(--ready-ink); }
.plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px; border: 2px solid var(--edge); border-radius: 12px; background: var(--tile); }
.plan-row img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.plan-row .plan-label { flex: 1 1 100px; min-width: 0; font-size: 20px; overflow-wrap: break-word; text-align: left; }
.plan-row .pbtn { flex: none; min-width: 48px; min-height: 48px; padding: 0 10px; }
.plan-days { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-days .pbtn { flex: 1 1 64px; min-width: 56px; padding: 0 6px; }
.week-view { position: fixed; inset: 0; z-index: 12; background: var(--bg); display: flex; flex-direction: column; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
.week-view h1 { margin: 0; font-size: 24px; text-align: center; }
.week-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.week-day { border: 2px solid var(--edge); border-radius: 14px; padding: 8px; background: var(--tile); }
.week-day.today { border-color: var(--accent); border-width: 4px; background: var(--folder); }
.week-day h2 { margin: 0 0 6px; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.week-day .today-badge { font-size: 14px; background: var(--accent); color: var(--on-accent); padding: 2px 8px; border-radius: 10px; }
.week-cards { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; }
.week-card { width: 96px; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border: 2px solid var(--edge); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.week-card img { width: 64px; height: 64px; object-fit: contain; pointer-events: none; }
.week-close { align-self: center; min-width: 200px; min-height: 56px; font-size: 22px; border: 0; border-radius: 14px; color: var(--on-accent); background: var(--accent); padding: 0 24px; }

/* Deníček */
.diary-entry { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 80px; padding: 8px; border: 2px solid var(--edge); border-radius: 14px; background: var(--tile); color: var(--ink); font: inherit; }
.diary-entry img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; background: var(--bg); }
.diary-entry-text { display: flex; flex-direction: column; min-width: 0; font-size: 18px; }
.diary-entry-text strong { font-size: 20px; }
.diary-entry-text span { overflow-wrap: anywhere; }
.diary-text { border: 2px solid var(--accent); border-radius: 14px; background: var(--folder); color: var(--ink); font-size: 22px; padding: 10px; text-align: center; min-height: 56px; }
.diary-text[hidden] { display: none; }
.diary-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--tile); border-radius: 14px; overflow: hidden; }
.diary-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.diary-note, .diary-count { margin: 0; text-align: center; }
.diary-nav { display: flex; gap: 8px; }
.diary-nav .pbtn { flex: 1 1 0; min-height: 56px; }
.trim-video { width: 100%; max-height: 40vh; background: var(--ink); border-radius: 10px; }
.trim-label { margin: 0; font-size: 18px; text-align: left; }
input[type="range"] { width: 100%; min-height: 40px; }

.intro-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; border: 4px solid var(--accent); border-radius: 18px; background: var(--folder); color: var(--ink); font: inherit; font-size: 28px; text-align: center; overflow: auto; }
.intro-card img { max-width: 80%; max-height: 45vh; object-fit: contain; border-radius: 14px; flex: none; }
.intro-card span { overflow-wrap: anywhere; }

.bar-btn .ic { font-size: 28px; line-height: 1.1; }
.bar-btn .cap { font-size: 11px; line-height: 1.1; font-weight: 700; max-width: 100%; text-align: center; overflow-wrap: anywhere; }