/* Nunito (SIL OFL 1.1), served from here so every Slovak and Czech letter with an accent has the same shape on every device */
@font-face { font-family: "Nunito"; font-weight: 500 900; font-display: swap; src: url(fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-weight: 500 900; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================ one look: colors ================================================================
   Always light (decided 2026-11-02). The cards are white, the pictograms are drawn for a white ground. Contrast modes (for people
   who see badly) come after and win. */
/* School handwriting for the letters (Playwrite CZ and SK, SIL OFL), Edit > View > Letters > Written */
@font-face { font-family: "Playwrite CZ"; font-weight: 100 400; font-display: swap; src: url(fonts/playwrite-cz.woff2) format("woff2"); }
@font-face { font-family: "Playwrite SK"; font-weight: 100 400; font-display: swap; src: url(fonts/playwrite-sk.woff2) format("woff2"); }
:root {
  --bg: #F6F5F2; --card: #FFFFFF; --raised: #ECEAE5; --stroke: rgba(0, 0, 0, .14);
  --text: #1A1A1C; --muted: #5F5E65; --faint: #9A99A0;
  --accent: #6E56CF; --on-accent: #FFFFFF; --speak: #7DB7FF; --on-speak: #000000; --shadow: rgba(0, 0, 0, .06);
  --tile-bg: #FFFFFF; --tile-text: #1A1A1C; --scale: 1; --radius: 22px;
  --font: "Nunito", system-ui, -apple-system, sans-serif;
}
/* palettes (Settings > Look): the whole app follows the palette, also the menu. A palette gives the accent, a tint of the ground and
   the four menu colors (--m1 board, --m2 edit, --m3 settings, --m4 help). Graphite is the calm neutral
   look. The contrast modes below win. */
:root { --m1: #7C5CE0; --m2: #E8A100; --m3: #2F8FE8; --m4: #2BAE6A; }
:root[data-palette="ocean"] { --pal: #4F7399; --board-color: #B08968; --m1: #7C5CE0; --m2: #E6CC70; --m3: #9DC4DE; --m4: #E58E8E; }
:root[data-palette="violet"] { --pal: #2E7F86; --board-color: #51A8AE; --m1: #7FACF9; --m2: #51A8AE; --m3: #98E9FC; --m4: #CCF4FD; }
:root[data-palette="forest"] { --pal: #3F7A5C; --board-color: #6BA383; --m1: #6BA383; --m2: #92D868; --m3: #C8EBB4; --m4: #BAA583; }
:root[data-palette="rose"] { --pal: #9E6470; --board-color: #B589A8; --m1: #EE635D; --m2: #EE7BC3; --m3: #B589A8; --m4: #F7C6C4; }
:root[data-palette="beige"] { --pal: #8A6430; --board-color: #BAA583; --m1: #AD8040; --m2: #F7D381; --m3: #BAA583; --m4: #FCEAC8; }
:root[data-palette="graphite"] { --pal: #3F4452; --board-color: #7A8396; --m1: #3F4452; --m2: #6B7280; --m3: #4B5B73; --m4: #5B6B66; }
:root[data-palette] { --accent: var(--pal); --on-accent: #FFFFFF; --bg: color-mix(in srgb, var(--pal) 6%, #F6F5F2); }
:root[data-palette="graphite"] { --bg: #F2F3F5; --raised: #E8EAEE; --stroke: rgba(30, 35, 45, .16); --text: #1F2430; --muted: #646B7A; --faint: #9AA1AF; }
/* yellow ground, black plain text, bigger */
:root[data-contrast="yellow"][data-contrast][data-contrast] {
  --bg: #FFE600; --card: #FFFFFF; --raised: #FFF7A8; --stroke: #000000; --text: #000000; --muted: #000000; --faint: #000000;
  --accent: #000000; --on-accent: #FFE600; --speak: #FFFFFF; --on-speak: #000000; --shadow: transparent;
  --tile-bg: #FFFFFF; --tile-text: #000000; --scale: 1.35;
  --font: Arial, Helvetica, "Liberation Sans", sans-serif;
}
/* black ground, white bold text, bigger */
:root[data-contrast="dark"][data-contrast][data-contrast] {
  --bg: #000000; --card: #000000; --raised: #1C1C1C; --stroke: #FFFFFF; --text: #FFFFFF; --muted: #FFFFFF; --faint: #FFFFFF;
  --accent: #FFE600; --on-accent: #000000; --speak: #FFE600; --on-speak: #000000; --shadow: transparent;
  --tile-bg: #000000; --tile-text: #FFFFFF; --scale: 1.35;
  --font: Arial, Helvetica, "Liberation Sans", sans-serif;
}
:root[data-contrast] body { font-weight: 700; }
:root[data-contrast] .tile { --bw: clamp(2.5px, calc(var(--tile-w) * .033), 5px); --fbw: clamp(4px, calc(var(--tile-w) * .06), 9px); border-color: var(--text); }
:root[data-contrast] .tile .picto { background: #FFFFFF; border-radius: 10px; }
:root[data-contrast] .strip, :root[data-contrast] .home-btn, :root[data-contrast] .bar-btn, :root[data-contrast] .key { border: 3px solid var(--text); }
:root[data-contrast] .chip { border: 3px solid var(--text); background: var(--card); }
:root[data-contrast] .speak { border: 4px solid var(--text); }
:root[data-contrast] .seg button { border: 2px solid var(--text); }

/* ================================================================ base ================================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
*, ::backdrop { touch-action: pan-x pan-y; }   /* on every element: no zoom by fingers, a zoomed page stays draggable on iPad; `manipulation` would allow the pinch */
body {
  position: fixed; inset: 0; height: auto;   /* the page itself never moves (iPad Safari drags it otherwise); only the lists inside scroll */
  background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.haptic { display: none; }   /* the iOS tick works with a label that is not drawn at all */

#app {
  height: 100dvh; max-width: 1500px; margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 16px calc(8px + env(safe-area-inset-bottom));
}
.screen { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: 0 4px 14px var(--shadow); }

/* ================================================================ the reading row ================================================================ */
.strip { display: flex; align-items: center; gap: 8px; padding: 10px; flex: none; }
.chips { flex: 1; display: flex; gap: 8px; align-items: center; min-height: 84px; overflow-x: auto; scrollbar-width: none; cursor: pointer; }
.chips::-webkit-scrollbar { display: none; }
.hint { color: var(--muted); font-weight: 600; font-size: calc(18px * var(--scale)); padding-left: 6px; white-space: nowrap; }
.chip {
  flex: none; min-width: 72px; min-height: 84px; padding: 4px 10px 6px; border-radius: 16px; background: var(--raised);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.chip .pic { font-size: 40px; line-height: 1.1; font-weight: 800; }
.chip .lbl { font-size: calc(17px * var(--scale)); font-weight: 700; white-space: nowrap; }
.chip .picto { object-fit: contain; display: block; width: calc(56px * var(--scale)); height: calc(56px * var(--scale)); border-radius: 10px; padding: 2px; background: #fff; pointer-events: none; -webkit-user-drag: none; }
.chip.text { min-width: 0; padding: 0 16px; }
.chip.text .lbl { font-size: calc(24px * var(--scale)); font-weight: 800; }
.icon-btn { flex: none; width: 68px; height: 68px; border-radius: 18px; background: var(--raised); font-size: 36px; color: var(--text); display: flex; align-items: center; justify-content: center; }
.icon-btn:disabled { opacity: .3; }
#undo { width: 104px; height: 84px; font-size: 56px; }
@media (max-width: 500px) { #undo { width: 84px; } }   /* the words of the sentence keep their room on a phone */

.speak {
  flex: none; min-height: 68px; border-radius: 20px; background: var(--speak); color: var(--on-speak); border: 2px solid rgba(0, 0, 0, .28);
  font-size: calc(22px + 4px * var(--scale)); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px;
}
.speak:active:not(:disabled) { transform: translateY(2px); }
.speak:disabled { opacity: .4; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { flex: none; display: flex; gap: 10px; }
.actions .speak { flex: 1; }

/* ================================================================ words: the core words on the left, folders and cards on the right ================================================================ */
.page { flex: 1; min-height: 0; overflow: hidden; }
.page:not([hidden]) { display: flex; gap: 12px; }
.words-rail, .words-main { min-height: 0; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.words-rail::-webkit-scrollbar, .words-main::-webkit-scrollbar { display: none; }
.words-rail { flex: none; width: calc(var(--core-cols, 1) * var(--rail-col, 92px) + 20px); padding: 6px 14px 6px 6px; border-right: 2px solid var(--faint); }
.words-main { flex: 1; min-width: 0; padding: 6px 0 6px 6px; }
.grid { display: grid; gap: 10px; margin-bottom: 0; }
.grid.core { grid-template-columns: repeat(var(--core-cols, 1), minmax(0, 1fr)); }
.grid.cards { grid-template-columns: repeat(var(--card-cols, 5), minmax(0, 1fr)); }
@media (min-width: 700px) and (orientation: landscape) { .page { --rail-col: 112px; } .grid { gap: 14px; } }

/* A card: the picture on top, the word at the bottom. The border color is the folder color. A folder is the same card
   with a thick border line. */
.tile {
  /* the border lines follow the size of the card (--tile-w, the smaller side): thin on a phone, as before on a big screen */
  --tile-w: 150px; --bw: clamp(1.5px, calc(var(--tile-w) * .02), 3px); --fbw: clamp(3px, calc(var(--tile-w) * .053), 8px);
  position: relative; container-type: inline-size; aspect-ratio: 1 / 1.12; padding: 6px 6px 5px;
  border-radius: clamp(10px, calc(var(--tile-w) * .12), 18px); background: var(--tile-bg); color: var(--tile-text);
  border: var(--bw) solid var(--c, var(--accent));
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; overflow: hidden;
}
.tile .picto, .tile .pic { order: 1; flex: 1; min-height: 0; width: 100%; }
.tile .picto { display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.tile .pic { display: flex; align-items: center; justify-content: center; font-size: 40cqi; font-weight: 800; }
.tile .lbl { order: 2; flex: none; overflow-wrap: break-word; font-weight: 800; line-height: 1.1; font-size: clamp(9px, calc(11.5cqi * var(--scale)), 34px); max-width: 100%; }
.tile .folder { display: none; }
.tile.folder-tile { border-width: var(--fbw); padding: max(0px, calc(var(--bw) + 6px - var(--fbw))) max(0px, calc(var(--bw) + 6px - var(--fbw))) max(0px, calc(var(--bw) + 5px - var(--fbw))); }   /* the thicker border takes the room of the padding, so the inside (and the letters, which follow its width) is as big as in a word card */
.tile.text-only { justify-content: center; }
.tile.text-only .lbl { font-size: clamp(14px, calc(18cqi * var(--scale)), 36px); }
.tile .picto.photo, .picto.photo { object-fit: cover; border-radius: 12px; }
.tile:active { transform: scale(.97); }

.back-row { display: flex; align-items: center; gap: 10px; }
.back { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; font-size: calc(20px * var(--scale)); font-weight: 800; text-align: left; }
.back-row .back { flex: 1; width: auto; }
.back .arrow { font-size: 22px; display: flex; }
.back .picto { display: block; width: 32px; height: 32px; border-radius: 8px; padding: 1px; background: #fff; pointer-events: none; -webkit-user-drag: none; }
.back .pic { font-size: 24px; font-weight: 400; }
.remove-folder { flex: none; padding: 8px 14px; border-radius: 12px; background: var(--raised); font-size: 14px; font-weight: 700; }

/* opening a folder: the back row slides in, the cards pop in one after the other (Settings can switch it off) */
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.8); } 60% { transform: translateY(-3px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.words-main.enter .back { animation: slide-in .26s ease-out both; }
.words-main.enter .tile { animation: card-in .42s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 38ms); }
@media (prefers-reduced-motion: reduce) { .words-main.enter .back, .words-main.enter .tile { animation: none; } }
html[data-motion="off"] .words-main.enter .back, html[data-motion="off"] .words-main.enter .tile { animation: none; }
html[data-motion="off"] .tile:active { transform: none; }

/* ================================================================ edit ================================================================ */
#edit-page .tile { touch-action: pan-y; }
.tile.off { opacity: .38; }
.tile.add { background: color-mix(in srgb, var(--text) 6%, transparent); border: 2px dashed var(--muted); align-items: center; justify-content: center; }
.tile .plus { font-size: 38px; line-height: 1; color: var(--muted); }
.tile.dragging { opacity: .3; }
.tile.drop-target { outline: 4px solid var(--accent); outline-offset: -4px; }
.drag-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; opacity: .94; transform: scale(1.06) rotate(-2deg); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

.size-tools { display: grid; gap: 8px; margin-bottom: 8px; }
.size-group { display: flex; align-items: center; gap: 6px; }
.size-group > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.size-group > div { display: flex; gap: 4px; }
.size-group button { flex: none; min-width: 38px; padding: 7px 8px; border-radius: 10px; background: var(--raised); font-size: 14px; font-weight: 800; }
.size-group button.on { background: var(--accent); color: var(--on-accent); }
.words-rail .size-group > span { display: none; }
.view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.stepper input { width: 58px; padding: 7px 4px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 17px; font-weight: 800; text-align: center; -webkit-user-select: text; user-select: text; }

/* ================================================================ menu ================================================================ */
.wordmark { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.welcome { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 0 0 2px; }
.welcome-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.welcome-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.welcome-logo { width: 64px; height: 64px; }
@media (max-height: 520px) { .welcome-logo { width: 48px; height: 48px; } }   /* a low screen needs the room for the buttons */
.menu-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.welcome-menu { display: contents; }
.lang-toggle { display: flex; gap: 6px; }
.tour-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; }
.tour-btn .ico { width: 16px; height: 16px; }
@media (max-width: 520px) { .tour-btn span { display: none; } .tour-btn { width: 38px; padding: 0; justify-content: center; } }
.lang-toggle button { min-width: 44px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--raised); font-size: 14px; font-weight: 800; }
.lang-toggle button.on { background: var(--accent); color: var(--on-accent); }
:root[data-contrast="dark"] .banner, :root[data-contrast="dark"] .voice-note { --danger: #FF6B6B; }
:root[data-contrast="dark"] .banner button, :root[data-contrast="dark"] .voice-note button { color: #000000; }
.rotate-hint { display: none; grid-row: 3; grid-column: 1; justify-self: start; align-self: center; margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (orientation: portrait) and (max-width: 700px) { .rotate-hint { display: block; } }

/* the menu: one wide card for the board, under it Edit, Settings and Help side by side. Centered, so on a big screen it does not
   stretch; each card has a soft tint and a thick line in its own color. */
.home-grid {
  grid-row: 2; justify-self: center; align-self: center; width: min(100%, 880px); height: min(100%, 640px); min-height: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 4px;
}
.home-btn.board-btn { grid-column: 1 / -1; font-size: calc(34px * var(--scale)); }
@media (orientation: landscape) { .home-btn.board-btn { font-size: calc(clamp(34px, 8vh, 52px) * var(--scale)); } .home-btn:not(.board-btn) { font-size: calc(clamp(22px, 5vh, 34px) * var(--scale)); } }
.home-btn.board-btn .ico { font-size: clamp(64px, 18vh, 110px); }
.home-btn {
  --c: var(--accent); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px;
  background: color-mix(in srgb, var(--c) 12%, var(--card)); border: 4px solid var(--c); border-radius: 28px;
  font-size: calc(22px * var(--scale)); font-weight: 800; text-align: center; color: var(--text);
}
.home-btn { container-type: inline-size; }
.home-btn > span { font-size: min(1em, 13.5cqi); }   /* a long word (Nastavenia) never runs over the edge with big letters */
.home-btn:active { transform: scale(.97); }
.home-btn .ico { font-size: clamp(34px, 9vh, 56px); stroke-width: 1.8; }
.board-btn { --c: var(--m1); } .edit-btn { --c: var(--m2); } .settings-btn2 { --c: var(--m3); } .help-btn { --c: var(--m4); }
:root[data-contrast] .home-btn { --c: var(--text); background: var(--card); }

/* ================================================================ the bottom bar and the padlock ================================================================ */
.live-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding-top: 8px; border-top: 2px solid var(--stroke); }
.live-bar .seg { flex: 1; max-width: 300px; margin: 0 auto; }
.live-bar .seg button { padding: 9px 6px; font-size: calc(15px * var(--scale)); }
.edit .live-bar { flex-wrap: wrap; }
.edit .live-bar .seg { flex: 1; max-width: 300px; margin: 0 auto; }
.bar-btn { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--stroke); border-radius: 14px; font-size: 22px; }
.bar-title { margin: 0 auto 0 4px; font-size: 20px; font-weight: 800; }
@property --lock-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lock-btn { position: relative; flex: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); border: 2px solid var(--stroke); color: var(--muted); font-size: 24px; touch-action: none; }
.lock-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; opacity: 0; background: conic-gradient(var(--accent) var(--lock-angle), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); pointer-events: none; }
.lock-btn.holding { color: var(--accent); }
.lock-btn.holding::before { opacity: 1; animation: lockring 3s linear forwards; }
@keyframes lockring { to { --lock-angle: 360deg; } }
.lock-btn[data-count]:not([data-count=""])::after { content: attr(data-count) "/5"; position: absolute; top: -8px; right: -10px; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; }
.lock-btn .lock-open { display: none; }
.lock-btn.open .lock-closed { display: none; }
.lock-btn.open .lock-open { display: inline-block; color: var(--accent); }
.lock-btn.open { border-color: var(--accent); }

/* ================================================================ controls, dialogs ================================================================ */
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 10px 6px; border-radius: 12px; background: var(--raised); font-weight: 700; text-align: center; }
.seg button.on, .seg .seg-link.on { background: var(--accent); color: var(--on-accent); }
.seg .seg-link { flex: 1; padding: 10px 6px; border-radius: 12px; background: var(--raised); font-weight: 700; text-align: center; color: inherit; text-decoration: none; }
.seg.tabs { margin-bottom: 16px; }
.seg.tabs { flex-wrap: wrap; }
.seg.tabs button { flex: 1 1 auto; padding: 9px 8px; font-size: 14px; }   /* wraps to a second row when the letters are big (contrast) */
.settings-page .seg { flex-wrap: wrap; }
.settings-page .seg button { flex: 1 1 auto; }
.settings-page .group + .group { margin-top: 20px; padding-top: 18px; border-top: 2px solid color-mix(in srgb, var(--text) 22%, transparent); }   /* a line between the settings */

/* the state of the voice: a pill that floats over the corner, so it never pushes the board or the menu around when it appears or goes */
.banner, .voice-note { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 6px 8px 6px 14px; background: var(--card); border: 2px solid var(--danger, #B3261E); border-radius: 999px; color: var(--danger, #B3261E); font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px var(--shadow, rgba(0,0,0,.12)); }
.banner button, .voice-note button { background: var(--danger, #B3261E); color: #FFFFFF; font-weight: 800; padding: 6px 14px; border-radius: 999px; }
.banner progress, .voice-note progress { width: 110px; accent-color: var(--danger, #B3261E); }
.banner, .voice-note { max-width: min(calc(100vw - 24px), 560px); }
.banner:has([data-unsaved-ok]) { border-radius: 22px; padding: 8px 8px 8px 16px; }
/* on the board the bottom bar (padlock, Words, Keyboard) sits there: the pill floats above it, not over it */
.banner { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px); }
@media (min-width: 700px) and (orientation: landscape) { .banner { bottom: max(10px, env(safe-area-inset-bottom)); } }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--raised); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }

dialog.sheet {
  width: min(92vw, 420px); max-height: 92dvh; overflow-y: auto; margin: auto; padding: 18px;
  border: 1px solid var(--stroke); border-radius: 22px; background: var(--card); color: var(--text);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .4); }
/* Settings keep one size whatever the tab: the tab row and Done stay, the page between them scrolls. */
#settings[open] { display: flex; flex-direction: column; height: min(92dvh, 760px); overflow: hidden; }
#settings-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -18px; padding: 0 18px; }
#settings > .done, #help > .done { flex: none; margin-top: 12px; }
dialog h2 { margin: 0 0 12px; font-size: 20px; }
.list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.list button { text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--raised); font-weight: 600; display: flex; justify-content: space-between; }
.list button.on { outline: 2px solid var(--accent); }
.done { width: 100%; padding: 14px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 800; }
.done.secondary { margin-top: 8px; background: var(--raised); color: var(--text); }
.group { margin-bottom: 16px; }
.group h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.group p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.switch { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.switch input { width: 22px; height: 22px; accent-color: var(--accent); }
.range { display: flex; align-items: center; gap: 10px; }
.range input { flex: 1; accent-color: var(--accent); }
.range span { min-width: 36px; text-align: right; font-weight: 700; }
.help-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.help-credits-h { margin: 18px 0 8px; font-size: 16px; }
.help-body .help-credits { font-size: 13px; color: var(--muted); }
.help-body .help-credits a { color: inherit; text-decoration: underline; }
.photo-preview { display: block; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto 12px; object-fit: cover; border-radius: 16px; }
.photo-preview[hidden] { display: none; }
.text-input { width: 100%; margin-bottom: 12px; padding: 14px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--raised); color: var(--text); font: inherit; font-size: 18px; -webkit-user-select: text; user-select: text; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: 12px; }
.emoji-grid button { aspect-ratio: 1; border-radius: 12px; background: var(--raised); font-size: 26px; }
dialog.picker { width: min(96vw, 1000px); height: 92dvh; max-height: 92dvh; padding: 14px; }
dialog.picker[open] { display: flex; flex-direction: column; }
.picker-head { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.picker-head h2 { flex: 1; margin: 0; }
.picker-body { flex: 1; min-height: 0; overflow-y: auto; }
.picker-body h3 { margin: 14px 0 8px; font-size: 15px; color: var(--muted); }
.picker-body .grid.cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-bottom: 4px; }

/* ================================================================ keyboards ================================================================ */
.keys-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-top { flex: none; display: flex; gap: 8px; align-items: stretch; }
.kb-input { flex: 1; min-width: 0; height: 64px; padding: 0 18px; border: 2px solid var(--stroke); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; font-size: calc(24px * var(--scale)); font-weight: 600; -webkit-user-select: text; user-select: text; }
.kb-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.kb-suggest { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 52px; }
.kb-suggest[hidden] { display: none; }
.suggestion { min-width: 0; min-height: 52px; padding: 0 14px; border: 2px solid var(--stroke); border-radius: 14px; background: var(--card); color: var(--text); font: inherit; font-size: calc(20px * var(--scale)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion:active { background: var(--stroke); }
.suggest-empty { grid-column: 1 / -1; }
.kb-switch { flex: none; width: 124px; }
.kb-switch button { display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 13cqi, 18px); }
/* a low window (a phone with its own keyboard open, a small browser window): the keyboard keeps a usable height and the whole screen scrolls */
@media (max-height: 640px) and (orientation: portrait) { .live { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .live > .keys-view { flex: none; min-height: 270px; } }
.kb-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }

/* The ABC keyboard has one layout in every language: main letters, then the rare and accented ones, then one bottom row.
   Upright they are stacked, turned they are side by side. */
/* the keys never shrink below --key-min: when the screen is too low the keyboard scrolls instead of the letters piling on each other */
.kb-abc { --key-min: 36px; flex: 1; min-height: 0; container-type: size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min-content, 1fr) auto; gap: 8px; overflow: hidden; }
@media (max-height: 560px) { .kb-abc { overflow-y: auto; overscroll-behavior: contain; } }
.kb-main { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(var(--key-min), 1fr); gap: 6px; }
.kb-bottom { display: flex; gap: 6px; height: clamp(48px, 11cqh, 96px); min-height: 48px; }
.kb-main .key { contain: size; }     /* the letter inside does not set the height of the row: the rows share the room exactly and only a window that is really too low scrolls */
.key { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--stroke); border-radius: 12px; background: var(--card); color: var(--text); font-size: clamp(18px, calc(min(7.5cqw, 12cqh) * var(--scale)), 52px); font-weight: 800; text-transform: uppercase; box-shadow: 0 3px 0 var(--stroke); }
.key.na { opacity: .25; box-shadow: none; }
.key.space { flex: 4 1 0; font-size: clamp(12px, 3.2cqw, 20px); letter-spacing: .08em; }
.key.punct { flex: 1 1 0; }
.key.act { flex: 2 1 0; background: var(--raised); }
.key:active:not(:disabled) { transform: translateY(2px); background: var(--raised); box-shadow: none; }
@media (orientation: landscape) {
  .kb-main { grid-template-columns: repeat(16, minmax(0, 1fr)); }
  .kb-bottom { grid-column: 1 / -1; }
  .key { font-size: clamp(18px, calc(min(4.4cqw, 11cqh) * var(--scale)), 48px); }
}
@media (orientation: landscape) and (max-height: 520px) { .kb-abc { --key-min: 28px; } .kb-suggest, .suggestion { min-height: 36px; font-size: 16px; } .kb-input { height: 44px; font-size: 20px; } .kb-hint { display: none; } .key { font-size: 17px; border-radius: 8px; } .key.space { font-size: 12px; } .kb-bottom { height: 40px; } .kb-main{ gap: 4px; } }

/* ================================================================ landscape (phones turned, tablets, computers) ================================================================ */
@media (min-width: 700px) and (orientation: landscape) {
  /* live: the reading row on top with Speak beside it, then the words or the keyboard, then the bar with the padlock */
  .live {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "strip speak" "board board" "bar bar"; gap: 10px 14px;
  }
  .live > .strip { grid-area: strip; }
  .live > .actions { grid-area: speak; }
  .live > .actions .speak { height: 100%; min-width: 200px; }
  .live > .page, .live > .keys-view { grid-area: board; }
  .live > .live-bar { grid-area: bar; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #app { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .screen { gap: 8px; }
  .live-bar { min-height: 42px; padding-top: 6px; }
  .bar-btn { width: 40px; height: 40px; }
  .lock-btn { width: 44px; height: 44px; }
  .strip { padding: 6px; }
  .chip { min-height: 60px; min-width: 56px; padding: 2px 8px 4px; }
  .chips { min-height: 60px; }
  .chip .picto { width: calc(36px * var(--scale)); height: calc(36px * var(--scale)); }
  .icon-btn { width: 52px; height: 52px; font-size: 28px; }
  #undo { width: 76px; height: 60px; font-size: 42px; }
  .banner, .voice-note { padding: 2px 6px 2px 14px; font-size: 12px; }
  .banner button, .voice-note button { padding: 3px 12px; font-size: 12px; }
  .live > .actions .speak { min-width: 170px; }
  .home-btn { gap: 6px; padding: 8px; }
  .home-btn .ico { font-size: clamp(30px, 11vh, 48px); }
}
@media (max-width: 700px) { .edit .bar-title { display: none; } }

/* ================================================================ boards, colors, the view sheet, letters ================================================================ */
.boards-rail { flex: none; width: 64px; display: flex; flex-direction: column; gap: 8px; padding: 6px 0 6px 10px; border-left: 2px solid var(--faint); overflow-y: auto; scrollbar-width: none; }
.boards-rail::-webkit-scrollbar { display: none; }
.board-tab { flex: none; min-height: 54px; padding: 4px 2px; border-radius: 12px; background: var(--raised); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11px; font-weight: 700; overflow: hidden; }
.board-tab b { font-size: 18px; }
.board-tab .board-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-tab.on { background: var(--accent); color: var(--on-accent); }
.board-tab.add { background: transparent; border: 2px dashed var(--muted); }

.view-open { flex: none; padding: 7px 14px; border-radius: 10px; background: var(--raised); font-size: 14px; font-weight: 800; }
.view-body .size-group { margin-bottom: 14px; flex-wrap: wrap; }
.view-body .size-group > span { flex: 1 0 100%; }
.view-body .size-group button { width: auto; padding: 8px 12px; }
.colors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; margin-bottom: 12px; }
.colors-grid button { aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 3px solid var(--stroke); }

html[data-strip="off"] .strip, html[data-strip="off"] .actions { display: none; }

/* letters: big print (capitals) or joined school handwriting, on the cards, in the reading row, on the keys */
:root { --font-letters: var(--font); }
html[data-letters="script"] { --font-letters: "Playwrite SK", "Nunito", cursive; }
html[data-letters="script"][data-lang="cs"] { --font-letters: "Playwrite CZ", "Nunito", cursive; }
html[data-letters="upper"] :is(.tile .lbl, .chip .lbl, .back span, .root-title, .hint) { text-transform: uppercase; letter-spacing: .02em; }
html[data-letters="script"] :is(.tile .lbl, .chip .lbl, .back, .root-title, .key, .kb-input, .hint, .board-tab .board-name) { font-family: var(--font-letters); font-weight: 400; text-transform: none; line-height: 1.45; }
html[data-letters="script"] .tile .lbl { font-size: clamp(11px, calc(13cqi * var(--scale)), 36px); line-height: 1.2; padding-bottom: .5em; overflow-wrap: normal; }   /* handwriting has small letters, so it is set bigger; room for the tails of g, y, j; no break inside a word */
html[data-letters="script"] .key { font-size: clamp(16px, calc(4.6vw * var(--scale)), 28px); }
html[data-letters="upper"] .tile .lbl { font-size: clamp(8px, calc(10.5cqi * var(--scale)), 30px); }
html[data-letters="script"] .key.space { font-size: 22px; }
/* the letters setting covers the whole app (menu, settings, edit, dialogs), not only the words */
html[data-letters="upper"] :is(body, button, select) { text-transform: uppercase; }   /* buttons do not inherit it by default */
html[data-letters="upper"] :is(input, textarea) { text-transform: none; }
html[data-letters="script"] body, html[data-letters="script"] :is(input, textarea, select) { font-family: var(--font-letters); }
html[data-letters="script"] body * { font-weight: 400 !important; }   /* Playwrite has no bold, a faked bold is hard to read */
/* each button of the letters choice shows its own style */
[data-seg="letters"] [data-value="normal"] { font-family: var(--font); text-transform: none; }
[data-seg="letters"] [data-value="script"] { font-family: var(--font-letters, "Playwrite SK"), cursive; text-transform: none; font-weight: 400 !important; }
html[data-lang="cs"]:not([data-letters="script"]) [data-seg="letters"] [data-value="script"] { font-family: "Playwrite CZ", cursive; }
html:not([data-letters="script"]) [data-seg="letters"] [data-value="script"] { font-family: "Playwrite SK", cursive; }
.view-open.on { background: var(--accent); color: var(--on-accent); }
@media (max-width: 520px) { .home-btn:not(.board-btn) { font-size: calc(17px * var(--scale)); padding: 6px; } }

.picker .seg.tabs { flex: none; margin-bottom: 10px; }
.picker .seg.tabs button { padding: 12px 8px; font-size: 16px; }
.picker-body .grid.cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.picker-body .tile.added { outline: 4px solid var(--accent); outline-offset: -4px; }

/* Edit: a small trash can on every card, so a card can be deleted at once */
.trash { position: absolute; top: 3px; right: 3px; z-index: 2; width: clamp(22px, 24cqi, 34px); height: clamp(22px, 24cqi, 34px); border-radius: 50%; background: var(--card); color: #C0392B; border: 2px solid var(--stroke); display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 13cqi, 18px); }
.trash:active { background: #C0392B; color: #fff; }
.pencil { position: absolute; top: 3px; left: 3px; z-index: 2; width: clamp(22px, 24cqi, 34px); height: clamp(22px, 24cqi, 34px); border-radius: 50%; background: var(--card); color: var(--accent); border: 2px solid var(--stroke); display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 13cqi, 18px); }
.pencil:active { background: var(--accent); color: var(--on-accent); }

/* the own tab: the card as it will look on the left, name and picture on the right, one button at the end */
.own-form { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 4px 2px 12px; }
.own-preview { position: sticky; top: 0; display: grid; gap: 10px; }
.own-preview .tile { width: 100%; }
.own-preview .lbl.ghost { color: var(--faint); }
.own-added { margin: 0; min-height: 1.3em; font-size: 14px; font-weight: 700; color: var(--accent); }
.own-fields { display: grid; gap: 16px; }
.own-row { display: grid; gap: 6px; }
.own-label { font-size: 15px; font-weight: 800; }
.own-fields .text-input { margin: 0; font-size: 20px; }
.own-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.own-pics button { padding: 12px 16px; border-radius: 12px; background: var(--raised); font-weight: 700; }
.own-pics button.on { background: var(--accent); color: var(--on-accent); }
.own-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; }
.own-icons .tile { border-width: 2px; }
.own-fields .done:disabled { opacity: .4; }
@media (max-width: 640px) { .own-form { grid-template-columns: 1fr; } .own-preview { position: static; width: 140px; justify-self: center; } }

/* Edit looks like the board: the same reading row and Speak on top (only shown, not used) */
.edit-strip, .edit-actions { pointer-events: none; opacity: .55; }
.edit-strip .chips { cursor: default; }
@media (min-width: 700px) and (orientation: landscape) {
  .edit {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px 14px;
    grid-template-areas: "strip speak" "page page" "bar bar";
  }
  .edit > .strip { grid-area: strip; }
  .edit > .actions { grid-area: speak; }
  .edit > .actions .speak { height: 100%; min-width: 200px; }
  .edit > .page { grid-area: page; }
  .edit > .live-bar { grid-area: bar; }
}
@media (orientation: landscape) and (max-height: 520px) { .edit > .actions .speak { min-width: 170px; } }

/* Edit > View: sections on the left, rows on the right (what it is, one line on what it does, the choice) */
dialog.view-dialog[open] { display: flex; flex-direction: column; }
.view-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
.view-nav { display: flex; flex-direction: column; gap: 6px; }
.view-nav button { text-align: left; padding: 12px 14px; border-radius: 12px; font-weight: 800; font-size: 16px; }
.view-nav button.on { background: var(--raised); }
.view-body { min-height: 0; overflow-y: auto; padding-right: 6px; scroll-padding-top: 4px; }
.view-section { padding-bottom: 18px; }
.view-section h3 { margin: 4px 0 6px; font-size: 20px; }
.view-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--stroke); }
.view-row.disabled { opacity: .45; }
.view-text { display: grid; gap: 2px; min-width: 0; }
.view-text b { font-size: 16px; }
.view-text span { font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.view-seg { flex: none; display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--raised); }
.view-seg button { padding: 8px 12px; border-radius: 9px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.view-seg button.on { background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); color: var(--text); }
.view-seg .sample-upper { text-transform: uppercase; }
.view-seg .sample-script { font-family: "Playwrite SK", cursive; font-weight: 400; }
html[data-lang="cs"] .view-seg .sample-script { font-family: "Playwrite CZ", cursive; }
.view-seg .sample-yellow { background: #FFE600; color: #000; }
.view-seg .sample-dark { background: #000; color: #fff; }
.view-seg .sample-yellow.on, .view-seg .sample-dark.on { outline: 3px solid var(--accent); }
.stepper { flex: none; display: flex; align-items: center; gap: 4px; }
.stepper button { width: 40px; height: 38px; border-radius: 10px; background: var(--raised); font-size: 20px; font-weight: 800; }
.stepper output { min-width: 58px; padding: 7px 4px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--card); text-align: center; font-size: 17px; font-weight: 800; }
.view-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.color-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.color-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--raised); font-weight: 700; text-align: left; }
.dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0, 0, 0, .15); }
.view-all { margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 2px dashed var(--muted); font-weight: 800; }
@media (max-width: 640px) {
  .view-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .view-nav { flex-direction: row; overflow-x: auto; }
  .view-nav button { flex: none; padding: 8px 12px; }
  .view-row { flex-direction: column; align-items: stretch; }
  .view-seg { align-self: flex-start; }
}
.tile.blank { visibility: hidden; }
.own-library { margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--stroke); }
.own-library h3 { margin: 14px 0 8px; font-size: 18px; }
.own-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: var(--raised); font-size: 17px; font-weight: 800; text-align: left; }
.own-toggle .chev { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.picker-source { flex: none; display: flex; gap: 6px; margin-bottom: 12px; }
.picker-source button { padding: 8px 18px; border-radius: 999px; border: 2px solid var(--stroke); font-weight: 800; font-size: 15px; }
.picker-source button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
@media (orientation: landscape) and (max-height: 520px) {
  .picker-head { margin-bottom: 6px; }
  .picker-head h2 { font-size: 18px; }
  .picker .seg.tabs button { padding: 7px 8px; font-size: 15px; }
  .picker-source { margin-bottom: 8px; }
  .picker-source button { padding: 5px 14px; font-size: 14px; }
  .own-toggle { padding: 8px 12px; margin-bottom: 8px; font-size: 15px; }
  .own-toggle .chev { width: 24px; height: 24px; font-size: 16px; }
  .own-form { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}

/* the add window: a card that is already on the board has an outline and a check (a number when it is there more than once) */
.picker-body .tile.picked { outline: 4px solid var(--accent); outline-offset: -4px; }
.picked-badge { position: absolute; top: 4px; right: 4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; }
.picker-body .tile.added { animation: pop .35s ease-out; }
@keyframes pop { 50% { transform: scale(1.08); } }

/* the boards on the right: wide enough to read the name */
.boards-rail { width: 130px; gap: 10px; padding-left: 12px; }
.board-tab { min-height: 72px; padding: 6px 8px; align-items: flex-start; text-align: left; border-radius: 14px; font-size: 17px; font-weight: 800; }
.board-tab b { font-size: 14px; opacity: .7; font-weight: 800; }
.board-tab .board-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
.board-tab.add { align-items: center; justify-content: center; }
.board-tab.add b { font-size: 28px; opacity: 1; }
@media (orientation: landscape) and (max-height: 520px) { .boards-rail { width: 112px; } .board-tab { min-height: 58px; font-size: 15px; } }
/* narrow screens: slim side lists, the cards need the room */
@media (max-width: 700px) {
  .boards-rail { width: 64px; padding-left: 8px; }
  .board-tab { min-height: 56px; padding: 4px; font-size: 12px; }
  .board-tab b { font-size: 13px; }
  .page { --rail-col: 70px; }
  .words-rail { padding-right: 8px; }
}
/* picked cards: a dark ring (visible on every card color) and room for it, so nothing is cut off at the edge */
.picker-body .grid.cards { padding: 8px; gap: 14px; }
.picker-body .tile.picked { outline: 5px solid var(--text); outline-offset: -5px; background: color-mix(in srgb, var(--accent) 14%, #fff); }
.picker-body .tile.picked .picked-badge { background: var(--text); color: var(--bg); }
.picker-body .tile.picked.folder-tile { background: color-mix(in srgb, var(--c) 18%, #fff); }
.board-tab { position: relative; }
.board-tab .trash { top: 4px; right: 4px; width: 28px; height: 28px; font-size: 15px; }
.board-tab:has(.trash) .board-name { padding-right: 20px; }

/* the two side lists have their own color: the core words (the color of the core words, violet at first) and the boards (teal) */
.words-rail { background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); border-right: 0; border-radius: 18px; }
.boards-rail { --board: var(--board-color, #1B9AAA); background: color-mix(in srgb, var(--board) 12%, transparent); border-left: 0; border-radius: 18px; padding: 8px; margin-left: 4px; }
.board-tab { background: color-mix(in srgb, var(--board) 22%, var(--card)); border: 2px solid color-mix(in srgb, var(--board) 45%, transparent); }
.board-tab.on { background: var(--board); border-color: var(--board); color: #fff; }
.board-tab.add { background: transparent; border: 2px dashed var(--board); color: var(--board); }
:root[data-contrast] .words-rail, :root[data-contrast] .boards-rail { background: transparent; border: 3px solid var(--text); }
:root[data-contrast] .board-tab { background: var(--card); border-color: var(--text); color: var(--text); }
:root[data-contrast] .board-tab.on { background: var(--accent); color: var(--on-accent); }

.palette-seg { flex-wrap: wrap; }
.palette-seg button { display: flex; align-items: center; gap: 8px; }
.palette-seg .dot { width: 18px; height: 18px; }
.view-row.stack { flex-direction: column; align-items: stretch; }
.view-row.stack .palette-seg { align-self: stretch; }

/* the cards of the list fill the whole room: the rows have the height the number of cards gives, the cards are stretched, nothing scrolls */
.words-main { overflow: hidden; display: flex; flex-direction: column; }
.words-main .grid.cards { flex: none; grid-auto-rows: var(--card-h, auto); padding-bottom: 12px; }
.words-main .grid.cards > .tile { aspect-ratio: auto; height: var(--card-h, auto); min-height: 0; }
.words-main .grid.cards > .tile { --tile-w: var(--card-w, 150px); }
.grid.core > .tile { --tile-w: var(--rail-col, 92px); }
.picker-body .tile, .own-icons .tile { --tile-w: 96px; }

/* the boards: a big list with big buttons and big names */
.boards-rail { width: 190px; gap: 12px; }
.board-tab { min-height: 96px; padding: 10px 12px; font-size: 21px; }
.board-tab .board-name { -webkit-line-clamp: 3; }
.board-tab.add b { font-size: 36px; }
.board-tab .trash { width: 34px; height: 34px; font-size: 18px; }
.board-tab:has(.trash) .board-name { padding-right: 28px; }
@media (orientation: landscape) and (max-height: 520px) { .boards-rail { width: 150px; } .board-tab { min-height: 76px; font-size: 18px; } }
@media (max-width: 700px) { .boards-rail { width: 96px; } .board-tab { min-height: 72px; font-size: 15px; padding: 6px; } .board-tab .trash { width: 26px; height: 26px; font-size: 14px; } }

.settings-page .palette-seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.settings-page .palette-seg button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.settings-page .palette-seg .dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0, 0, 0, .15); }
/* the Speak button follows the palette too (black text stays) */
:root[data-palette] { --speak: color-mix(in srgb, var(--pal) 42%, #fff); }

/* Ocean: dusty blue, light blue, cream and taupe (the palette picked by the owner). The doubled attribute makes these win over the general palette rules. */
:root[data-palette="ocean"][data-palette] { --bg: #F6F0E6; --raised: #EADFCF; --stroke: rgba(80, 65, 50, .16); --speak: #AACDDC; }

/* Rose: peach, salmon, dusty rose and mauve (the palette picked by the owner) */
:root[data-palette="rose"][data-palette] { --bg: #FBF1EC; --raised: #F5DDD2; --stroke: rgba(110, 60, 60, .16); --speak: #F3B5A5; }

/* Beige: four sand shades (the palette picked by the owner) */
:root[data-palette="beige"][data-palette] { --bg: #F3EEE1; --raised: #E3DBC8; --stroke: rgba(90, 80, 55, .18); --speak: #DED6C1; }

/* Forest: deep green, sage, light green and sand (the palette picked by the owner) */
:root[data-palette="forest"][data-palette] { --bg: #F2F4EC; --raised: #E3E8D3; --stroke: rgba(50, 70, 45, .16); --speak: #C8EBB4; }

/* the pager under the cards (more cards than places on the screen) */
.pager { flex: none; height: 56px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 18px; font-weight: 800; }
.pager button { width: 64px; height: 44px; border-radius: 12px; background: var(--raised); font-size: 34px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.pager button:disabled { opacity: .3; }
/* the cards stepper: no browser arrows, only minus and plus, the signs centered */
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button, .size-group .stepper button { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; font-size: 26px; font-weight: 700; }
.pager .pager-add { background: var(--accent); color: var(--on-accent); margin-right: 18px; }

/* the add window belongs to one + card: its choice has the ring; cards already on the board only have the badge */
.picker-body .tile.picked { outline: none; background: inherit; }
.picker-body .tile.picked.folder-tile { background: color-mix(in srgb, var(--c) 9%, #fff); }
.picker-body .tile.chosen { outline: 6px solid var(--text); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 16%, #fff); }

/* more cards than fit on the screen: the list scrolls down (no visible bar) */
.words-main { overflow-y: auto; display: block; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.words-main::-webkit-scrollbar { display: none; }
.bar-spacer { flex: 1; }

.cards-select { padding: 8px 12px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; font-weight: 800; }


/* the rainbow color of a category: a rainbow frame on its cards */
.tile[data-rainbow], [data-rainbow] .tile:not(.add) {
  border-color: transparent;
  background: linear-gradient(var(--tile-bg), var(--tile-bg)) padding-box, linear-gradient(135deg, #E53935, #FB8C00, #FDD835, #43A047, #1E88E5, #8E24AA) border-box;
}

/* bigger trash cans on the cards in Edit */
.trash { width: clamp(26px, 24cqi, 44px); height: clamp(26px, 24cqi, 44px); font-size: clamp(15px, 13cqi, 24px); top: 4px; right: 4px; }
.pencil { width: clamp(26px, 24cqi, 44px); height: clamp(26px, 24cqi, 44px); font-size: clamp(15px, 13cqi, 24px); top: 4px; left: 4px; }

.sheet-sep { margin: 14px 4px 2px; padding-top: 12px; border-top: 2px solid var(--stroke); font-size: 14px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* The menu of a card or a board: the card on top, one big row per action. */
#cell-preview { display: flex; justify-content: center; margin: 2px 0 16px; }
#cell-preview .tile { width: min(46vw, 170px); aspect-ratio: .82; pointer-events: none; container-type: inline-size; }
#cell-preview .trash, #cell-preview .pencil { display: none; }
.list.acts { gap: 10px; }
.list.acts button { justify-content: flex-start; align-items: center; gap: 14px; min-height: 60px; padding: 8px 16px 8px 10px; border: 2px solid var(--stroke); border-radius: 18px; background: var(--card); font-size: 18px; font-weight: 800; }
.list.acts button:active { background: var(--raised); }
.act-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--raised); color: var(--accent); font-size: 24px; }
.list.acts button.danger { margin-top: 6px; color: #C0392B; border-color: color-mix(in srgb, #C0392B 40%, var(--stroke)); }
.list.acts button.danger .act-ico { background: color-mix(in srgb, #C0392B 14%, var(--card)); color: #C0392B; }

/* The board in use: a ring around its tab, set off by a gap. */
.board-tab.on { outline: 5px solid var(--accent); outline-offset: 3px; }
.boards-rail { padding: 12px; }

/* Nothing is shown until the texts, data and fonts are ready, so everything appears at once; a board is shown once its cards are fitted. */
html:not([data-ready]) body { visibility: hidden; }
html[data-settling] :is(#page, #edit-page) { visibility: hidden; }

.chip.ghost { visibility: hidden; width: 0; min-width: 0; padding-left: 0; padding-right: 0; margin-left: -8px; overflow: hidden; pointer-events: none; }

.root-row .root-title { flex: 1; display: flex; align-items: center; min-height: 44px; font-size: calc(20px * var(--scale)); font-weight: 800; padding-left: 4px; cursor: default; }   /* the same height as the row of an opened category */

.picker-search { width: 100%; margin: 4px 0 10px; }

/* account tab (js/account.js) */
.acc-input { display: block; width: 100%; padding: 12px 14px; margin: 6px 0; border: 2px solid var(--stroke); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; }
.acc-note { padding: 8px 12px; border-radius: 10px; background: var(--raised); font-weight: 700; }
button.link { padding: 8px 0; background: none; color: var(--accent); font-weight: 700; text-decoration: underline; }
.done.danger { color: #C0392B; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 14px; border: 2px solid var(--stroke); border-radius: 18px; background: var(--card); }
.acc-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 22px; font-weight: 800; }
.acc-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.acc-who strong { font-size: 17px; overflow-wrap: anywhere; }
.acc-badge { padding: 3px 10px; border-radius: 999px; background: var(--raised); font-size: 13px; font-weight: 700; color: var(--muted); }
.acc-badge.paid { background: color-mix(in srgb, #2E9E5B 16%, var(--card)); color: #217A45; }
.acc-box { padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--raised); }
.acc-box p { margin: 0; font-size: 14px; }
.act-txt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.act-txt small { font-size: 13px; font-weight: 600; color: var(--muted); }
.list.acts button:disabled { opacity: .6; }

/* Own voice: one panel with a title and status, a 5 second bar and one fixed row of three buttons (menu of a card and add window). */
.voice-box, .own-voice { margin-top: 14px; }
.voice-panel { container-type: inline-size; display: grid; gap: 10px; padding: 14px; border: 2px solid var(--stroke); border-radius: 18px; background: var(--raised); }
.voice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.voice-title { font-size: 14px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.voice-state { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 auto; font-size: 15px; font-weight: 700; color: var(--muted); text-align: right; }
.voice-state.ok { color: var(--text); }
.voice-state.ok::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.voice-state.rec { color: #C0392B; }
.voice-state.rec::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #C0392B; animation: voice-pulse 1s ease-in-out infinite; }
@keyframes voice-pulse { 50% { opacity: .25; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .voice-state.rec::before { animation: none; } }
.voice-bar { height: 6px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.voice-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #C0392B; transition: width .2s linear; }
.voice-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.voice-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 8px; border: 2px solid var(--stroke); border-radius: 16px; background: var(--card); color: var(--text); font: inherit; font-size: 15px; font-weight: 800; line-height: 1.1; text-align: center; }
.voice-actions button .ico { width: 22px; height: 22px; flex: none; }
.voice-actions button.rec { flex-direction: row; gap: 10px; font-size: 18px; }
.voice-actions button.rec .ico { color: #C0392B; width: 26px; height: 26px; }
.voice-actions button.rec-on { background: #C0392B; border-color: #C0392B; color: #fff; }
.voice-actions button.rec-on .ico { color: #fff; }
.voice-actions button:not(:disabled):active { background: var(--raised); }
.voice-actions button.rec-on:not(:disabled):active { background: #A93226; }
.voice-actions button.del:not(:disabled):hover, .voice-actions button.del:not(:disabled):focus-visible, .voice-actions button.del:not(:disabled):active { color: #C0392B; border-color: color-mix(in srgb, #C0392B 45%, var(--stroke)); }
.voice-actions button:disabled { opacity: .45; }
.voice-actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@container (max-width: 300px) { .voice-actions { grid-template-columns: 1fr 1fr; } .voice-actions .rec { grid-column: 1 / -1; } }
.acc-delete { margin-top: 14px; }
.acc-delete summary { cursor: pointer; padding: 8px 4px; font-size: 14px; font-weight: 700; color: #C0392B; }
.acc-delete p { font-size: 13px; color: var(--muted); }

/* ================================================================ the guided tour (js/tour.js) ================================================================
   A fixed layer above everything: it blocks clicks, the ring is a box whose huge shadow dims the rest, the card sits next to it. */
.tour { position: fixed; inset: 0; z-index: 2000; }
.tour-ring { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(15, 15, 20, .62); outline: 3px solid var(--card); outline-offset: 0; pointer-events: none; }
.tour-card { position: fixed; box-sizing: border-box; padding: 16px; border-radius: var(--radius); background: var(--card); color: var(--text); border: 1px solid var(--stroke); box-shadow: 0 10px 34px rgba(0, 0, 0, .3); font-family: var(--font); }
.tour-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.tour-text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tour-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.tour-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tour-btns button { min-height: 40px; padding: 8px 14px; border-radius: 12px; background: var(--raised); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; }
.tour-btns .tour-next { background: var(--accent); color: var(--on-accent); }
.tour-btns .tour-skip { background: transparent; color: var(--muted); }
.tour-btns button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tour-btns .tour-next:focus-visible { outline-color: var(--text); }
.tour-btns button[hidden] { display: none; }
:root[data-contrast] .tour-card { border: 3px solid var(--text); }
:root[data-contrast] .tour-btns button { border: 2px solid var(--text); }
:root[data-contrast] .tour-ring { outline-width: 4px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .tour-ring, :root:not([data-motion="off"]) .tour-card { transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
}

/* ================================================================ print ================================================================
   Edit > Vytlačiť fills #print-root (printBoard in app.js); only the print media shows it, the app is hidden. A4 landscape, 6 cards in a row,
   a card is a fixed size in mm with a thin border in the color of its category. Every category starts a new page. */
#print-root { display: none; }
.view-open.print-open { display: inline-flex; align-items: center; gap: 6px; }
@page { size: A4 landscape; margin: 10mm; }
@media print {
  html, body { position: static !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root {
    display: block; --tile-bg: #fff; --tile-text: #1A1A1C; --scale: 1; color: #1A1A1C; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #print-root h1 { margin: 0 0 4mm; font-size: 8mm; line-height: 1.1; }
  #print-root h2 { margin: 0 0 3mm; font-size: 6mm; line-height: 1.1; break-after: avoid; }
  #print-root .print-sec { margin: 0 0 6mm; break-inside: avoid; }
  #print-root .print-page { break-after: auto; }
  #print-root .print-page + .print-page { break-before: page; }
  #print-root .print-grid { display: flex; flex-wrap: wrap; gap: 4mm; }
  #print-root .tile {
    --tile-w: 42mm; --bw: .5mm; --fbw: 1mm; flex: none; width: 42mm; height: 38mm; aspect-ratio: auto; padding: 1.5mm 1.5mm 1.2mm;
    border-radius: 3mm; break-inside: avoid; transform: none;
  }
  #print-root .tile[data-rainbow], #print-root [data-rainbow] .tile { border-width: 1mm; }
  #print-root .tile .lbl { font-size: 4.2mm; }
  html[data-letters="upper"] #print-root .tile .lbl { font-size: 3.6mm; }
  html[data-letters="script"] #print-root .tile .lbl { font-size: 4.2mm; }
  #print-root .tile .pic { font-size: 14mm; }
}

/* the statistics card (Edit > Štatistiky) */
.stats-dialog { width: min(640px, 100vw); }
.stats-body { padding: 8px 16px 20px; overflow: auto; max-height: calc(100dvh - 120px); }
.stats-period { margin: 0 0 12px; }
.stats-summary { margin: 0 0 8px; font-weight: 700; }
.stats-block { margin: 16px 0 0; }
.stats-block h3 { margin: 0 0 6px; font-size: 1rem; }
.stats-list { display: flex; flex-direction: column; gap: 6px; }
.stats-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.stats-pic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 26px; }
.stats-pic img { width: 100%; height: 100%; object-fit: contain; }
.stats-name { flex: 0 1 38%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--raised); overflow: hidden; }
.stats-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.stats-row b { flex: none; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.stats-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--raised); }
.stats-chip button { padding: 4px 10px; border-radius: 999px; background: var(--card); font-weight: 700; }
.stats-note { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.stats-clear { margin-top: 16px; padding: 10px 16px; border-radius: 12px; background: var(--raised); color: var(--danger, #B3261E); font-weight: 700; }

/* Volume of the own recordings (Settings > Voice) */
.own-volume { display: flex; align-items: center; gap: 14px; }
.own-volume input[type="range"] { flex: 1; min-width: 0; height: 36px; accent-color: var(--accent); }
.own-volume input[type="range"]:disabled { opacity: .45; }
.own-volume output { min-width: 4ch; text-align: right; font-weight: 800; }