/* ========================================
   TEEMA MUUTUJAD (Theme Variables)
   ======================================== */
:root {
    /* Natiivsete brauserividinate skeem. Ilma selleta renderdab brauser tumedas
       režiimis kuupäeva-/kellaikooni, number-välja nooled, select-popupi,
       kuupäevavalija paneeli ja kerimisribad heleda skeemi järgi → must ikoon
       tumedal väljal on nähtamatu. Kehtib kogu saidile korraga. */
    color-scheme: light;

    /* Hele teema (vaikimisi) */
    --bg-primary: #f4f4f4;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f5f5;
    --bg-navbar: #00d1b2;
    
    --text-primary: #363636;
    --text-secondary: #4a4a4a;
    --text-muted: #6b6b6b; /* WCAG AA: 4.85:1 taustal #f4f4f4 (endine #7a7a7a = 3.9) */
    /* #007a65 (5,3:1 valgel, 4,8:1 #f4f4f4-l). Endine #00d1b2 = navbari türkiis andis valgel
       1,95:1 — jalus, arvutitrenn, liitumisvaade ja keelevihje kandsid sama parandust
       kohalikult (audit 2026-11-01 H-3). Tume teema kirjutab üle allpool. */
    --text-link: #007a65;

    --border-color: #dbdbdb;
    --border-light: #ededed;
    
    --shadow-card: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    --accent-color: #00d1b2;
    --accent-hover: #00c4a7;
    /* Tekst/ikoon AKTSENDI TAUSTAL. Valge andis türkiisil #00d1b2 1.95:1 ja tumeda teema
       tsüaanil #22d3ee 1.8:1; #001f1a annab mõlemal ~9:1 (= Bulma is-primary tekst).
       Kehtib mõlemas teemas, seetõttu ainult siin. Digiaed kirjutab heledas üle valgeks
       (roheline aktsent, site_theme_style() config.php-s). */
    --on-accent: #001f1a;

    /* Klaviatuuri fookusrõngas (vt LIGIPÄÄSETAVUSE TURVAVÕRGUD). Aktsent #00d1b2 annab
       valgel 1.95:1 ja #f4f4f4-l 1.77:1 — WCAG 1.4.11 nõuab 3:1. #00665a: valgel 6.89,
       #f4f4f4-l 6.26, türkiisil nav'il 3.53 (nav kasutab siiski oma teksti värvi). */
    --focus-ring: #00665a;
    
    /* Kaardi overlay heleda teema jaoks */
    --card-overlay-bg: rgba(255, 255, 255, 0.98);
}

/* Tume teema - manuaalne lüliti */
[data-theme="dark"] {
    color-scheme: dark;

    /* Bulma primary värv tumedas režiimis (navy, vastab --bg-navbar #0f3460) */
    --bulma-primary-h: 213;
    --bulma-primary-s: 73%;
    --bulma-primary-l: 22%;
    --bulma-primary-invert-l: 100%;

    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #1f2940;
    --bg-hover: #2a3a5a;
    --bg-navbar: #0f3460;
    
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #9393a0; /* WCAG AA: 4.78:1 kaardil #1f2940, 5.62:1 lehel #1a1a2e, 5.24:1 #16213e (endine #8b8b96 kaardil 4.30) */
    --text-link: #22d3ee;
    
    --border-color: #3f3f46;
    --border-light: #27272a;
    
    --shadow-card: 0 0.5em 1em -0.125em rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    
    --accent-color: #22d3ee;
    --accent-hover: #06b6d4;
    --focus-ring: var(--accent-color); /* #22d3ee: kaardil 8.02, lehel 9.44, nav'il 6.92 */

    --card-overlay-bg: rgba(31, 41, 64, 0.98);

    /* Bulma tume skeem saidi paletist. Ilma selleta joonistas Bulma oma kastid,
       kaardid ja väljad oma peaaegu mustas hallis (hsl 221 14% 9%) — lehest
       TUMEDAMANA, kuigi kõrgem pind peab tumedas olema heledam (DISAIN.md).
       Bulma tuletab hover-/aktiivsed olekud -h/-s/-l osadest, seega seome need,
       mitte ainult lõppvärvi. Teksti ei seota — Bulma teksti hierarhia jääb. */
    --bulma-scheme-h: 222;
    --bulma-scheme-s: 35%;
    --bulma-scheme-main-l: 18.6%;
    --bulma-scheme-main-bis-l: 16.5%;
    --bulma-scheme-main-ter-l: 21%;
    --bulma-background-l: 23%;
    --bulma-border-weak-l: 22%;
    --bulma-border-l: 28%;
    --bulma-scheme-main: var(--bg-card);
}

/* Väli on kaardist süvistatud (tumedam), muidu sulandub see kaardiga —
   Bulma võtab välja tausta kaardi heledusest. */
[data-theme="dark"] :is(.input, .textarea, .select) {
    --bulma-input-background-l: 14%;
}
/* Navy primaarnupp (22%) sulandus navy kaardiga (kontrast 1.16) — nupul
   heledam; navbar jääb --bulma-primary-l 22% peale. */
[data-theme="dark"] .button {
    --bulma-primary-l: 30%;
}

/* Tume teema - automaatne süsteemi eelistuse järgi */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Bulma primary värv tumedas režiimis (navy, vastab --bg-navbar #0f3460) */
        --bulma-primary-h: 213;
        --bulma-primary-s: 73%;
        --bulma-primary-l: 22%;
        --bulma-primary-invert-l: 100%;

        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --bg-card: #1f2940;
        --bg-hover: #2a3a5a;
        --bg-navbar: #0f3460;
        
        --text-primary: #e4e4e7;
        --text-secondary: #a1a1aa;
        --text-muted: #9393a0; /* vt [data-theme="dark"] plokk */
        --text-link: #22d3ee;
        
        --border-color: #3f3f46;
        --border-light: #27272a;
        
        --shadow-card: 0 0.5em 1em -0.125em rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
        --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
        
        --accent-color: #22d3ee;
        --accent-hover: #06b6d4;
        --focus-ring: var(--accent-color);

        --card-overlay-bg: rgba(31, 41, 64, 0.98);

        /* Bulma tume skeem saidi paletist — vt [data-theme="dark"] plokk */
        --bulma-scheme-h: 222;
        --bulma-scheme-s: 35%;
        --bulma-scheme-main-l: 18.6%;
        --bulma-scheme-main-bis-l: 16.5%;
        --bulma-scheme-main-ter-l: 21%;
        --bulma-background-l: 23%;
        --bulma-border-weak-l: 22%;
        --bulma-border-l: 28%;
        --bulma-scheme-main: var(--bg-card);
    }
    :root:not([data-theme="light"]) :is(.input, .textarea, .select) {
        --bulma-input-background-l: 14%;
    }
    :root:not([data-theme="light"]) .button {
        --bulma-primary-l: 30%;
    }
}

/* ========================================
   PÕHISTIILID
   ======================================== */
html {
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   KOHANDATUD KOMPONENTIDE TUMEDA TEEMA STIILID
   (Bulma 1.0.4 haldab oma komponentide dark mode'i automaatselt)
   ======================================== */

/* Tumedad ikoonid heledaks tumedas režiimis */
[data-theme="dark"] .is-dark-icon {
    color: #e4e4e7 !important;
}

/* Bulma `.notification.is-light` on AINUS notification-variant, mis tumedas režiimis
   katki: Bulma jätab tausta heledaks, aga tekst pärib tumeda teema heleda värvi →
   hele tekstil helel taustal (kontrast 1.00, nähtamatu). Ülejäänud variandid
   (tava, is-success/warning/danger/info/primary) on korras.
   Turvavõrk: sunni teemapõhine tume pind + hele tekst. Katab kõik `is-light`
   kasutused korraga (14+ faili). Vt DISAIN.md — väldi Bulma värvimodifikaatoreid
   teemapõhistes vaadetes. */
[data-theme="dark"] .notification.is-light {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .notification.is-light {
        background-color: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* Sama veaklass NUPUL: `.button.is-white` on kõva valge taust + must tekst,
   mille Bulma jätab ka tumedas režiimis muutmata → valge plokk tumedal pinnal.
   Heledas režiimis on nende nuppude MÕTE olla nähtamatu — nad istuvad valgel
   kaardil või `.box`-il ja loevad sisuliselt raamita ikooninuppudena (seiklusraja
   kaardi „⋮", punktitabeli tööriistariba, lumememme heli/täisekraan). Tumedas
   režiimis peab kehtima sama suhe, seega taastame läbipaistvuse, mitte ei leiuta
   uut kroomi. Mõõdetud tumedas režiimis: kõik 8 kasutust istuvad tumedal pinnal
   (`.card`/`.box` rgb(20,22,26), body rgb(26,26,46)) — ühtegi tahtlikku valget
   pinda nende all EI OLE.
   `is-outlined` on VÄLJA jäetud: see variant (sõnarägastiku „Alusta uuesti")
   on läbipaistev + valge tekst/ääris VÄRVILISEL ülekattel, kus valge on tahtlik. */
[data-theme="dark"] .button.is-white:not(.is-outlined) {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-primary);
}
[data-theme="dark"] .button.is-white:not(.is-outlined):hover,
[data-theme="dark"] .button.is-white:not(.is-outlined):focus {
    background-color: var(--bg-hover);
    border-color: transparent;
    color: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .button.is-white:not(.is-outlined) {
        background-color: transparent;
        border-color: transparent;
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) .button.is-white:not(.is-outlined):hover,
    :root:not([data-theme="light"]) .button.is-white:not(.is-outlined):focus {
        background-color: var(--bg-hover);
        border-color: transparent;
        color: var(--text-primary);
    }
}

/* Peidetud rakenduste sektsioon */
[data-theme="dark"] .hidden-apps-section {
    border-color: var(--border-color);
}

[data-theme="dark"] .hidden-apps-header {
    background: var(--bg-card);
}

[data-theme="dark"] .hidden-apps-header:hover {
    background: var(--bg-hover);
}

/* Grupid rakenduse stiilid */
[data-theme="dark"] .group-box,
[data-theme="dark"] .group-box.box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .names-list {
    color: var(--text-primary);
}

[data-theme="dark"] .extra-info {
    color: var(--text-muted);
}

[data-theme="dark"] #namesCount {
    color: var(--text-muted) !important;
}

[data-theme="dark"] #nameSettingsList .title {
    color: var(--text-primary);
}

[data-theme="dark"] .switch-label {
    color: var(--text-primary);
}

/* Tööjaamad */
[data-theme="dark"] .station-box,
[data-theme="dark"] .station-box.box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .station-box.is-active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
}
[data-theme="dark"] .station-box.drag-over {
    background-color: var(--bg-hover);
    border-color: var(--accent-color);
}
[data-theme="dark"] .station-title {
    color: var(--text-primary);
}
[data-theme="dark"] .station-members .names-list {
    color: var(--text-primary);
}
[data-theme="dark"] .timer-box.box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .timer-box .time-display {
    color: var(--text-primary);
}

/* Admin paneel - kasutajate tabel */
[data-theme="dark"] .admin-user-link {
    color: var(--text-primary);
}
[data-theme="dark"] .admin-user-link:hover {
    color: var(--accent-color);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--text-primary);
}
[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: var(--bg-hover);
}
[data-theme="dark"] .tag.is-light {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
[data-theme="dark"] .tag.is-success.is-light {
    background-color: rgba(72, 199, 116, 0.15);
    color: #48c774;
}
[data-theme="dark"] .tag.is-info.is-light {
    background-color: rgba(50, 152, 220, 0.15);
    color: #5fb8f0;
}
[data-theme="dark"] .tag.is-danger.is-light {
    background-color: rgba(241, 70, 104, 0.15);
    color: #f77c96;
}
/* is-warning oli ainsana katmata → langes halli .tag.is-light reegli alla ja
   kaotas hoiatuse tähenduse (nt "Kohad täis", "ootejärjekorras"). */
[data-theme="dark"] .tag.is-warning.is-light {
    background-color: rgba(255, 221, 87, 0.15);
    color: #ffd970;
}
/* Bulma `.button.is-light` kodeerib HELEDA tausta kõvasti. Tumedas režiimis on
   tulemus valge plaat kaardi kõige heledama elemendina — kiirviktoriini ja
   kuldvillaku raamatukogus olid "Vaata", meeldimine ja raporteerimine heledamad
   kui kaart ise, esitluse prügikast kahvaturoosa. `.notification.is-light` ja
   `.tag.is-light` on ammu lapitud; nupud olid ainsa suure grupina katmata
   (413 kasutuskohta). Sama loogika mis siltidel: aktsendi läbipaistev taust +
   sama tooni hele tekst. Kõik paarid mõõdetud ≥4.94 kontrastiga (WCAG AA). */
[data-theme="dark"] .button.is-light {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    color: var(--text-primary);
}
[data-theme="dark"] .button.is-light:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}
[data-theme="dark"] .button.is-primary.is-light {
    background-color: rgba(34, 211, 238, 0.15);
    border-color: transparent;
    color: #67e8f9;
}
[data-theme="dark"] .button.is-primary.is-light:hover { background-color: rgba(34, 211, 238, 0.26); color: #67e8f9; }
[data-theme="dark"] .button.is-link.is-light {
    background-color: rgba(72, 95, 199, 0.20);
    border-color: transparent;
    color: #8ea2f0;
}
[data-theme="dark"] .button.is-link.is-light:hover { background-color: rgba(72, 95, 199, 0.32); color: #8ea2f0; }
[data-theme="dark"] .button.is-info.is-light {
    background-color: rgba(50, 152, 220, 0.15);
    border-color: transparent;
    color: #5fb8f0;
}
[data-theme="dark"] .button.is-info.is-light:hover { background-color: rgba(50, 152, 220, 0.26); color: #5fb8f0; }
[data-theme="dark"] .button.is-success.is-light {
    background-color: rgba(72, 199, 116, 0.15);
    border-color: transparent;
    color: #48c774;
}
[data-theme="dark"] .button.is-success.is-light:hover { background-color: rgba(72, 199, 116, 0.26); color: #48c774; }
[data-theme="dark"] .button.is-warning.is-light {
    background-color: rgba(255, 221, 87, 0.15);
    border-color: transparent;
    color: #ffd970;
}
[data-theme="dark"] .button.is-warning.is-light:hover { background-color: rgba(255, 221, 87, 0.26); color: #ffd970; }
[data-theme="dark"] .button.is-danger.is-light {
    background-color: rgba(241, 70, 104, 0.15);
    border-color: transparent;
    color: #f77c96;
}
[data-theme="dark"] .button.is-danger.is-light:hover { background-color: rgba(241, 70, 104, 0.26); color: #f77c96; }
/* ERAND: toast on ISE hele pind (`.toast.is-warning` = #ffdd57) ja jääb heledaks
   ka tumedas režiimis. Ülalolev lapp eeldab, et nupp istub teemapinnal — toastis
   annaks see hele-helel ja kinnitusdialoogi "Ei" nupp kadus ära. Siin peab
   `is-light` säilitama Bulma heleda ilme. Sama kehtib iga muu püsivalt heleda
   pinna kohta: lapp on teemapõhine, mitte pinnapõhine. */
[data-theme="dark"] .toast .button.is-light {
    background-color: #f5f5f5;
    border-color: transparent;
    color: #363636;
}
[data-theme="dark"] .toast .button.is-light:hover {
    background-color: #eeeeee;
    color: #363636;
}

[data-theme="dark"] .button.is-primary.is-outlined {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
[data-theme="dark"] .button.is-primary.is-outlined:hover {
    background-color: var(--accent-color);
    color: var(--on-accent, #001f1a);
}
[data-theme="dark"] .button.is-danger.is-outlined {
    border-color: #f14668;
    color: #f77c96;
}
[data-theme="dark"] .button.is-danger.is-outlined:hover {
    background-color: #f14668;
    color: #fff;
}
/* Heleda teema paar: Bulma 1.0 pastelltoonid on kontuurnupu tekstina valgel alla AA
   (primary 1,95, info 1,73, success 2,1, warning 1,8, danger 2,8). Kontuurnupu tekst ja
   ääris tulevad --bulma-button-l-st, seega piisab heledusest — toon jääb samaks ja
   hover/fookus töötavad Bulma enda reeglitega. Kõik ≥ 5:1 valgel (audit 2026-11-01 H-3).
   NB: `:not([data-theme="dark"])`, MITTE `[data-theme="light"]` — head.php seab atribuudi
   ainult salvestatud valiku või süsteemi tumeda eelistuse korral; uuel heledal külastajal
   atribuuti pole. */
:root:not([data-theme="dark"]) .button.is-primary.is-outlined { --bulma-button-l: 24%; }
:root:not([data-theme="dark"]) .button.is-info.is-outlined    { --bulma-button-l: 33%; }
:root:not([data-theme="dark"]) .button.is-success.is-outlined { --bulma-button-l: 30%; }
:root:not([data-theme="dark"]) .button.is-warning.is-outlined { --bulma-button-l: 27%; }
:root:not([data-theme="dark"]) .button.is-danger.is-outlined  { --bulma-button-l: 42%; }
[data-theme="dark"] .select select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
/* Bulma 1.0 eemaldas modaali jaluse nuppude vahel automaatse margini — taasta vahe,
   et "Loo"/"Tühista" tüüpi nupud ei kleepuks kokku (mõjub kõigis rakendustes) */
.modal-card-foot {
    gap: .75rem;
}
/* Bulma 1.0 annab modaali pealkirjale flex-shrink: 0 — pikk pealkiri ei tõmbu kokku,
   lükkab päise ekraanist laiemaks ja .modal-card'i overflow: hidden lõikab lõpu ära
   (mõõdetud: 372 px pealkiri 360 px kaardis). Murdumine on parem kui äralõikamine,
   min-width: 0 lubab flex-elemendil min-content'ist kitsamaks minna. */
.modal-card-title {
    flex-shrink: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Bulma 1.0 turvavõrk: nupugruppidel vahe + murdumine (väldib mobiilis kokkukleepumist
   ja üle ääre jooksmist). .has-addons jääb teadlikult ühenduvaks (gap: 0). */
.buttons {
    gap: .5rem;
}
.buttons.has-addons {
    gap: 0;
}
/* <details> turvavõrk: Chrome renderdab <details> sisu (ka <summary>) varjupuu
   pesadesse, mida Bulma `*, ::before, ::after { box-sizing: inherit }` ei taba.
   Pesa jääb content-box'iks ja kõik lapsed pärivad selle — `.column.is-6-mobile`
   (50 % + polster) ei mahtunud kõrvuti, ürituse sätete väljad voolasid mobiilis
   üle ja taustavalija oli kokkuklapituna teist mõõtu kui lahtiselt.
   Otsene laps saab border-box'i uuesti, lapselapsed pärivad selle tavapäraselt.
   Mõõdetud 2026-09-12 (25 lehte): muutusid ainult <details> sees olevad plokid. */
details > * {
    box-sizing: border-box;
}

/* ========================================
   LEHE TASANDI TEGEVUSRÜHM (.dk-page-actions)
   ========================================
   Nupurühm lehe päises või tööriistaribal: "Loo uus mäng · Loo AI abil ·
   Raamatukogu", "Loo AI abil · Impordi · Uus seiklusrada".

   ERINEVUS `.dk-actions`-ist on tahtlik. Kaardireal on silt kaardi pealkirjaga
   üleliigne, seega tõmbame teisejärgulised ikoonideks. SIIN on nupp lehe peamine
   CTA ja silt ON tähendus — "Loo uus mäng" muutuks paljaks "+"-iks ja see oleks
   halvem kui praegune vaevus. Seetõttu sildid JÄÄVAD ja lahendame ainult
   murdumise: kitsal ekraanil kahekaupa ruudustik ning üksik viimane nupp venib
   üle mõlema veeru, nii et orb nuppu ei teki definitsiooni järgi. */
.dk-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.dk-page-actions.is-centered {
    justify-content: center;
}
.dk-page-actions > .button {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    /* Klass kahekordselt (0-2-0) TAHTLIKULT: rakenduse oma laadileht laetakse
       globaalse JÄREL ja `display: flex` samal elemendil (nt sonapilv
       `.sp-choice`) võidaks võrdse kaalu juures ruudustiku vaikselt ära —
       muster jääks poolikult tööle ja seda oleks väga raske märgata. */
    /* `flex-basis`: kui rühm on FLEX-konteineri laps (lehe päis: pealkiri
       vasakul, nupud kõrval — nt seiklusrada, kussar), ei venita flex teda
       vaikimisi: rühma laius jääb sisu laiuseks ja `1fr 1fr` veerud mõõdetakse
       laiema nupu teksti järgi. Mõõdetud 360 px juures: rühm 286 px, saadaval
       336 px — nupurida lõppes ~50 px enne serva ja nägi välja nagu viga.
       Plokk-kontekstis (enamik kasutuskohti) on rühm niikuinii täislaiune,
       seega flex-lapse jaoks on see lihtsalt sama käitumise taastamine.
       `.ks-toolbar-actions` tegi sedasama lokaalselt juba ≤600 px juures. */
    .dk-page-actions.dk-page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-basis: 100%;
    }
    .dk-page-actions > * {
        width: 100%;
    }
    /* Puuteala 44 px. Selektorid peavad olema spetsiifilisemad kui paljas
       `.button` — allpool on `@media (pointer: coarse)` plokk, mis seab
       `.button { min-height: 24px }`. Võrdse kaalu juures võidaks hilisem
       reegel, seega element+klass (0-1-1) või kaks klassi (0-2-0). */
    .dk-page-actions > button,
    .dk-page-actions > a,
    .dk-page-actions > .button,
    .dk-page-actions > .control > .button {
        min-height: 44px;
    }
    /* `.control` mähis (Bulma `field is-grouped`) — nupp peab mähise täitma */
    .dk-page-actions > .control > .button {
        width: 100%;
    }
    /* Paaritu arv nuppe: viimane venib üle mõlema veeru → orb rida kaob */
    .dk-page-actions > :nth-child(odd):last-child {
        grid-column: 1 / -1;
    }
    /* Pikk silt murdub nupu SEES. Bulma `.button` on `white-space: nowrap`,
       seega ruudustiku 1fr veerus jooksis tekst nupult välja — mõõdetud
       „Loo tehisintellekti abil" 390 px juures +8 px (kuldvillak) ja +4 px
       (seiklusrada, 2 lehel), 360 px juures +16 ja +12 px. Ruudustikus on
       KÕRGUS vaba ressurss ja laius mitte, seega murdumine on õige vahetus;
       `min-height: 44px` jääb kehtima, nupp lihtsalt kasvab vajadusel.
       Sama selektorikuju nagu ülal (0-1-1 / 0-2-0), et `@media (pointer:
       coarse)` plokk seda võrdse kaalu juures üle ei kirjutaks. */
    .dk-page-actions > button,
    .dk-page-actions > a,
    .dk-page-actions > .button,
    .dk-page-actions > .control > .button {
        /* Külgpolster 1em → 0.5em. Ruudustikus on nupp niikuinii veeru laiune,
           seega lai polster ei tee midagi peale sildi ruumi äravõtmise — 16 px
           vabaks tähendab, et „Loo tehisintellekti abil" mahub ühele reale ja
           murdumist päriselt vaja ei lähe. Muudan MUUTUJAT, mitte `padding`-ut:
           samast muutujast tuleb ka ikooni marginaal ja ikooni-teksti vahe,
           nii jääb nupp seesmiselt proportsionaalseks. */
        --bulma-button-padding-horizontal: 0.5em;
        white-space: normal;
        line-height: 1.25;
    }
}

/* Bulma `.icon-text` on `inline-flex; flex-wrap: wrap`. Kui pikk pealkiri ikooni
   kõrvale ei mahu, hüppab KOGU tekstiplokk järgmisele reale ja ikoon jääb üksi
   ülemisele reale rippuma — kuldvillaku raamatukogu pealkiri nägi 360 px juures
   välja, nagu oleks ikoon meelega pealkirja kohal (mõõdetud: ikoon 12,116; tekst
   12,148). Sama veaklass mis orb nupp tegevusreas: flex-rida murdub vales kohas.
   Õige käitumine: ikoon jääb esimese rea kõrvale, TEKST murdub oma ploki sees. */
.icon-text {
    flex-wrap: nowrap;
}
.icon-text > .icon {
    flex: none;
}
.icon-text > :not(.icon) {
    min-width: 0;
}

/* Bulma `.icon` karp on FIKSEERITUD ruut (`--bulma-icon-dimensions`, vaikimisi
   1.5rem), aga selle sees olev Font Awesome glüüf pärib vanema fondisuuruse.
   Pealkirjas (`.title` = 2rem) on glüüf seega karbist laiem — nt
   `fa-map-location-dot` 36 px 24 px karbis — ja ulatub karbist mõlemale poole
   välja. Vasakjoondatud pealkirjal tähendab see, et ikoon lippab üle konteineri
   serva: seiklusraja avavaates algas ikoon 360 px juures x=6, kuigi `.section`
   polster on 12 px, ja mobiilis nägi see välja nagu ekraaniserva vastu kleepuv
   ikoon. Mõõdetud ka: lumememm/sõnakaardid +8 px, tiimipanus +13 px.

   Laseme karbil glüüfi järgi venida, aga MITTE Bulma ruudust kitsamaks jääda.
   Suurusmodifikaatorid kasutavad igaüks OMA muutujat (`-small`/`-medium`/
   `-large`), seega peab ka `min-width` neid kordama — muidu kaotaks
   `.icon.is-medium` oma laiema karbi (mõõdetud punktitabelis −5 px, sest glüüf
   on 2rem karbist kitsam). Kõrgus on puutumata: glüüf ei ulata üles-alla
   välja, sest rea kõrgus tuleb fondist. */
.title .icon,
.subtitle .icon {
    width: auto;
    min-width: var(--bulma-icon-dimensions);
}
.title .icon.is-small,
.subtitle .icon.is-small {
    min-width: var(--bulma-icon-dimensions-small);
}
.title .icon.is-medium,
.subtitle .icon.is-medium {
    min-width: var(--bulma-icon-dimensions-medium);
}
.title .icon.is-large,
.subtitle .icon.is-large {
    min-width: var(--bulma-icon-dimensions-large);
}

/* ========================================
   KAARDI TEGEVUSRIDA (.dk-actions)
   ========================================
   Ühtne muster nimekirjakaartide nupuridadele. Probleem, mida see lahendab:
   töölauale ehitatud rida ("Muuda | Kopeeri link | Kustuta") murdub kitsal
   ekraanil nii, et viimane nupp jääb orvuna omaette reale, ja siltidega nupud
   venivad mitmerealiseks (etteutlus: "Ava kuulaja vaade" oli 360 px juures
   88 px kõrge, kõrval 44 px "Halda").

   Kasutus:
     <div class="dk-actions">
       <a class="button is-primary dk-act-grow">...</a>   <- sildiga, täidab vaba ruumi
       <button class="button dk-act-icon"><span class="icon">..</span><span>Silt</span></button>
     </div>
   Mobiilis (≤480 px) kaotavad `.dk-act-icon` nupud nähtava sildi ja jäävad 44×44
   ikooninuppudeks; silt jääb ekraanilugejale alles (visually-hidden, MITTE
   display:none — muidu kaob ligipääsetav nimi). `.dk-act-grow` venib üle vaba ruumi,
   nii et rida näeb välja tahtlik, mitte poolik.

   Nupp, mille ikoon on mitmetähenduslik, jäta sildiga (ära pane `.dk-act-icon`).
   Töötab nii Bulma `.button`-i kui rakenduse oma nupuklassidega. */
.dk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.dk-actions > .button {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    /* Puuteala ≥44 px ka siis, kui rakendus kasutab `is-small` nuppe */
    .dk-actions > .button,
    .dk-actions > .dk-act-icon,
    .dk-actions > .dk-act-grow {
        min-height: 44px;
    }
    /* Silt ei murdu KUNAGI nupu sees — kitsaks jäädes murdub pigem rida */
    .dk-actions > * {
        white-space: nowrap;
    }
    .dk-actions > .dk-act-grow {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    .dk-actions > .dk-act-icon {
        position: relative; /* ankur peidetud sildile (absolute) */
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }
    .dk-actions > .dk-act-icon > .icon:first-child:not(:only-child) {
        margin-left: 0;
        margin-right: 0;
    }
    /* Silt peidus silmale, alles ekraanilugejale. `i` ja `svg` jäävad välja —
       osa rakendusi paneb Font Awesome ikooni otse `<i>`-na, ilma Bulma
       `.icon` mähiseta (nt lunktekst `.lt-link-btn`), ja see peab jääma näha. */
    .dk-actions > .dk-act-icon > :not(.icon):not(svg):not(i) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* ========================================
   ⓘ-SELGITUS (.dk-info-btn + .dk-info-text)
   ========================================
   Lisateave i-ikooni taga, avaneb samas kohas. Märgend: dk_info_btn() /
   dk_info_text() (includes/info_tip.php), käitumine js/dk_info.js.

   .dk-info-row = silt + nupp kõrvuti. Nupp EI tohi olla <label>-i sees (läheks
   seotud välja ligipääsetavasse nimesse) ja ilma reata kukkus ta kitsal ekraanil
   murdunud märkeruudu sildi alla omaette reale. */
.dk-info-row {
    display: flex;
    align-items: baseline;
}
.dk-info-row > .label {
    margin-bottom: 0;
}
.dk-info-row:has(> .label):not(:last-child) {
    margin-bottom: .5em;
}
/* Märkeruudu pikk silt murdub: reavoos jääb nupp viimase sõna järele,
   flex-reas jääks ta esimese rea paremasse serva sildist lahku */
.dk-info-row:has(> .checkbox) {
    display: block;
}
.dk-info-row > .checkbox {
    display: inline;
}
.dk-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: .2rem;
    margin: -.2rem 0 -.2rem .2rem;
    font-size: .9em;
    line-height: 1;
    vertical-align: middle;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color .15s ease;
}
.dk-info-btn:hover,
.dk-info-btn.is-active {
    color: var(--text-link);
}
/* Bulma .help { display:block } kaalub brauseri [hidden]-reegli üle */
.dk-info-text[hidden] {
    display: none;
}
.dk-info-text:not([hidden]) {
    animation: dkInfoIn .15s ease;
}
@keyframes dkInfoIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
}
/* Sõrmega ~36 px tabamisala, paigutust muutmata: suurem padding, negatiivne
   margin tasandab. (Absoluutne ::after laiendus teeks nupule scrollWidth-ülevoolu.) */
@media (pointer: coarse) {
    .dk-info-btn {
        padding: 10px;
        margin: -10px -10px -10px calc(.2rem - 10px);
    }
}

[data-theme="dark"] .modal-card-head,
[data-theme="dark"] .modal-card-foot {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-card-body {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
[data-theme="dark"] .modal-card-title {
    color: var(--text-primary);
}
[data-theme="dark"] .modal-card-body .label {
    color: var(--text-primary);
}
[data-theme="dark"] .modal-card-body .input {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-card-body .input::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .modal-card-body .help {
    color: var(--text-muted);
}

/* Automaatne dark mode kohandatud komponentidele */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .hidden-apps-section {
        border-color: var(--border-color);
    }

    html:not([data-theme="light"]) .hidden-apps-header {
        background: var(--bg-card);
    }

    html:not([data-theme="light"]) .hidden-apps-header:hover {
        background: var(--bg-hover);
    }

    html:not([data-theme="light"]) .group-box,
    html:not([data-theme="light"]) .group-box.box {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }

    html:not([data-theme="light"]) .names-list {
        color: var(--text-primary);
    }

    html:not([data-theme="light"]) .extra-info {
        color: var(--text-muted);
    }

    html:not([data-theme="light"]) #namesCount {
        color: var(--text-muted) !important;
    }

    html:not([data-theme="light"]) #nameSettingsList .title {
        color: var(--text-primary);
    }

    html:not([data-theme="light"]) .switch-label {
        color: var(--text-primary);
    }

    html:not([data-theme="light"]) .station-box,
    html:not([data-theme="light"]) .station-box.box {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }
    html:not([data-theme="light"]) .station-box.is-active {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
    }
    html:not([data-theme="light"]) .station-box.drag-over {
        background-color: var(--bg-hover);
        border-color: var(--accent-color);
    }
    html:not([data-theme="light"]) .station-title,
    html:not([data-theme="light"]) .station-members .names-list {
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .timer-box.box {
        background-color: var(--bg-card);
        border-color: var(--border-color);
    }
    html:not([data-theme="light"]) .timer-box .time-display {
        color: var(--text-primary);
    }

    html:not([data-theme="light"]) .toast {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    /* Admin paneel */
    html:not([data-theme="light"]) .admin-user-link {
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .admin-user-link:hover {
        color: var(--accent-color);
    }
    html:not([data-theme="light"]) .table td,
    html:not([data-theme="light"]) .table th {
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
        background-color: rgba(255, 255, 255, 0.03);
    }
    html:not([data-theme="light"]) .table.is-hoverable tbody tr:not(.is-selected):hover {
        background-color: var(--bg-hover);
    }
    html:not([data-theme="light"]) .tag.is-light {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--text-secondary);
    }
    html:not([data-theme="light"]) .tag.is-success.is-light {
        background-color: rgba(72, 199, 116, 0.15);
        color: #48c774;
    }
    html:not([data-theme="light"]) .tag.is-info.is-light {
        background-color: rgba(50, 152, 220, 0.15);
        color: #5fb8f0;
    }
    html:not([data-theme="light"]) .tag.is-warning.is-light {
        background-color: rgba(255, 221, 87, 0.15);
        color: #ffd970;
    }
    html:not([data-theme="light"]) .tag.is-danger.is-light {
        background-color: rgba(241, 70, 104, 0.15);
        color: #f77c96;
    }
    /* vt selgitust `[data-theme="dark"] .button.is-light` juures */
    html:not([data-theme="light"]) .button.is-light {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: transparent;
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .button.is-light:hover {
        background-color: rgba(255, 255, 255, 0.14);
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .button.is-primary.is-light {
        background-color: rgba(34, 211, 238, 0.15);
        border-color: transparent;
        color: #67e8f9;
    }
    html:not([data-theme="light"]) .button.is-primary.is-light:hover { background-color: rgba(34, 211, 238, 0.26); color: #67e8f9; }
    html:not([data-theme="light"]) .button.is-link.is-light {
        background-color: rgba(72, 95, 199, 0.20);
        border-color: transparent;
        color: #8ea2f0;
    }
    html:not([data-theme="light"]) .button.is-link.is-light:hover { background-color: rgba(72, 95, 199, 0.32); color: #8ea2f0; }
    html:not([data-theme="light"]) .button.is-info.is-light {
        background-color: rgba(50, 152, 220, 0.15);
        border-color: transparent;
        color: #5fb8f0;
    }
    html:not([data-theme="light"]) .button.is-info.is-light:hover { background-color: rgba(50, 152, 220, 0.26); color: #5fb8f0; }
    html:not([data-theme="light"]) .button.is-success.is-light {
        background-color: rgba(72, 199, 116, 0.15);
        border-color: transparent;
        color: #48c774;
    }
    html:not([data-theme="light"]) .button.is-success.is-light:hover { background-color: rgba(72, 199, 116, 0.26); color: #48c774; }
    html:not([data-theme="light"]) .button.is-warning.is-light {
        background-color: rgba(255, 221, 87, 0.15);
        border-color: transparent;
        color: #ffd970;
    }
    html:not([data-theme="light"]) .button.is-warning.is-light:hover { background-color: rgba(255, 221, 87, 0.26); color: #ffd970; }
    html:not([data-theme="light"]) .button.is-danger.is-light {
        background-color: rgba(241, 70, 104, 0.15);
        border-color: transparent;
        color: #f77c96;
    }
    html:not([data-theme="light"]) .button.is-danger.is-light:hover { background-color: rgba(241, 70, 104, 0.26); color: #f77c96; }
    /* vt ERAND-selgitust `[data-theme="dark"] .toast .button.is-light` juures */
    html:not([data-theme="light"]) .toast .button.is-light {
        background-color: #f5f5f5;
        border-color: transparent;
        color: #363636;
    }
    html:not([data-theme="light"]) .toast .button.is-light:hover {
        background-color: #eeeeee;
        color: #363636;
    }

    html:not([data-theme="light"]) .button.is-primary.is-outlined {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }
    html:not([data-theme="light"]) .button.is-primary.is-outlined:hover {
        background-color: var(--accent-color);
        color: var(--on-accent, #001f1a);
    }
    html:not([data-theme="light"]) .button.is-danger.is-outlined {
        border-color: #f14668;
        color: #f77c96;
    }
    html:not([data-theme="light"]) .button.is-danger.is-outlined:hover {
        background-color: #f14668;
        color: #fff;
    }
    html:not([data-theme="light"]) .select select {
        background-color: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    html:not([data-theme="light"]) .modal-card-head,
    html:not([data-theme="light"]) .modal-card-foot {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
    }
    html:not([data-theme="light"]) .modal-card-body {
        background-color: var(--bg-card);
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .modal-card-title {
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .modal-card-body .label {
        color: var(--text-primary);
    }
    html:not([data-theme="light"]) .modal-card-body .input {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    html:not([data-theme="light"]) .modal-card-body .input::placeholder {
        color: var(--text-muted);
    }
    html:not([data-theme="light"]) .modal-card-body .help {
        color: var(--text-muted);
    }
}

/* ========================================
   LAYOUT
   ======================================== */
@media screen and (min-width: 1024px) {
    .section {
        padding: 2rem 3rem !important;
    }
}
@media screen and (max-width: 768px) {
    .section {
        padding: 1rem 0.75rem !important;
    }
}

/* ========================================
   SWITCH STYLES
   ======================================== */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .2s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #00d1b2;
}

input:checked + .slider:before {
    transform: translateX(24px); /* 52 - 22 - 6 = 24 */
}

.switch-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* ============================================
   GLOBAALNE TEEK (LIBRARY) — kõikidele rakendustele ühine kaardi-välimus.
   Kasutavad: kiirviktoriin, kuldvillak, klassitahvel raamatukogud.
   Tume režiim on hardcoded väärtustega, et tagada toimivus ka siis, kui
   Bulma .box klassi värvid pole tumeda režiimi jaoks õigesti seatud.
   ============================================ */
.library-grid {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.library-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .library-grid {
        flex-direction: column;
    }
}

.library-card {
    background: var(--bg-card, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    color: #1a1a2e;
    height: 100%;
}
.library-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .library-card {
    background: #2a2a3e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
}
[data-theme="dark"] .library-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.library-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #1a1a2e;
}
[data-theme="dark"] .library-card-title {
    color: #fff;
}

.library-card-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
}
[data-theme="dark"] .library-card-meta {
    color: #aaa;
}
.library-card-meta .meta-sep {
    color: #ccc;
}
[data-theme="dark"] .library-card-meta .meta-sep {
    color: #555;
}

.library-card-description {
    font-size: 0.9rem;
    color: #555;
    flex: 1;
    margin-bottom: 0.75rem;
    line-height: 1.45;
}
[data-theme="dark"] .library-card-description {
    color: #bbb;
}

.library-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Raamatukogu filtrikast mobiilis kokkuvolditav. Neli virnastatud filtrit tegid
   kastist 368 px kõrguse ploki ja esimene sisukaart algas alles y=605 px juures —
   telefonis keriti enne ühegi mängu nägemist läbi terve filtririba. Otsinguväli
   jääb alati nähtavale (kõige kasutatavam), kolm valikut lähevad nupu taha. */
@media (max-width: 768px) {
    .library-filters .lib-filter-extra {
        display: none;
    }
    .library-filters.is-filters-open .lib-filter-extra {
        display: block;
    }
}

.library-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================
   GLOBAALNE TOAST SÜSTEEM
   ============================================ */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Kinnitusdialoogi ajal (js/dk_modal.js dkConfirm) kõige peale: täisekraanirakendused
   (klassitahvel) hoiavad oma kihte z-index 100000+ ja kinnitus jäi nende alla. */
.toast-container.has-confirm {
    z-index: 2147483000;
}

.toast {
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    background: #363636;
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    animation: toastIn 0.3s ease-out;
    /* Konteiner on ankurdatud `right: 20px`, seega 350 px toast ulatus 360 px
       ekraanil üle serva (E2E püüdis 16 px ülevoolu). Piirame vaateava järgi. */
    max-width: min(350px, calc(100vw - 40px));
}
.toast > span:first-child {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.toast.is-warning .button {
    flex-shrink: 0;
}
/* Kinnitusdialoog (js/dk_modal.js dkConfirm): tekst omaette real, Jah/Ei selle all
   paremas servas. Ilma selleta sõltus murre teate pikkusest ja „Ei" kukkus
   vahepealse pikkusega teate korral üksi järgmisele reale. */
.toast.is-confirm {
    justify-content: flex-end;
}
.toast.is-confirm > span:first-child {
    flex: 1 1 100%;
}

/* Sulgemisnupp + klikk-sulgemine */
.toast.is-dismissible {
    cursor: pointer;
    padding-right: 2.25rem;
    position: relative;
}
.toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.toast-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.12);
}
.toast.is-warning .toast-close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.toast.is-success {
    background: #20734a;
}

/* Toastivärvid tumendatud AA-nõudeni: valge tekst Bulma vaikevärvidel andis
   kontrasti 2.17 (roheline), 3.15 (sinine) ja 3.61 (punane) — AA nõuab 4.5.
   Kehtis MÕLEMAS režiimis, sest toasti värvid ei sõltu teemast. Mõõdetud
   uued väärtused: 5.88 / 6.02 / 5.81. Valvab cron/e2e_test.js probeToastContrast(). */
.toast.is-info {
    background: #27699a;
}

.toast.is-warning {
    background: #ffdd57;
    color: #363636;
}

.toast.is-danger {
    background: #c2183c;
}

.toast.fade-out {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Toast ikoonid */
.toast .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dark mode toast */
[data-theme="dark"] .toast {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Mobiilil tabelid keritavad (kui pole table-container wrapperit) */
.table {
    display: table;
}
@media screen and (max-width: 768px) {
    .section .table:not(.table-container .table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobiilil toast üles ja laiem */
@media screen and (max-width: 768px) {
    .toast-container {
        left: 20px;
        right: 20px;
        bottom: auto;
        top: 10px;
    }

    .toast {
        max-width: 100%;
    }

    /* Jah/Ei kinnitustoastid mobiilis allaserva (pöidla lähedale, tegevusnuppude juurde) */
    .toast.is-confirm {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
        top: auto;
        margin: 0;
    }
}

/* ========================================
   SELECT DROPDOWN — keela transition'id
   ========================================
   Bulma seab .input/.select select-le transition'id border-color, box-shadow ja
   color jaoks (~86ms). Kui kasutaja klõpsab <select>-ile, käivituvad need fookuse
   muutmisega ning blokeerivad native OS dropdown popupi renderdamist 200-500ms.
   Performance trace näitab `border-*-color` ja `box-shadow` animatsioone Animations
   lõigul iga dropdown'i avamisel.
*/
.input,
.textarea,
.select select {
    transition: none !important;
}


/* ========================================
   LIGIPÄÄSETAVUS — KONTRAST (WCAG AA 4.5:1)
   Lighthouse-audit 2026-07: Bulma .has-text-grey (#69748c) ja hele turkiis
   (#00d1b2) ei täida heledal taustal 4.5:1 nõuet. Tumedas teemas kehtivad
   heledamad toonid (kontrast tumedal taustal on niigi piisav).
   ======================================== */
.has-text-grey {
    color: #5d6880 !important; /* 5.08:1 taustal #f4f4f4 */
}
[data-theme="dark"] .has-text-grey {
    color: #a1a1aa !important;
}
/* Bulma .has-text-grey-light (#abb1bf) andis heledal 1,95–2,15:1 — „(valikuline)" siltides
   55 failis (audit 2026-11-01 H-3 jääk, kasutaja otsus 2026-11-05). Natuke heledam kui
   .has-text-grey, aga AA: 4,9:1 #f4f4f4-l. Dekoratiivne ikoon (tühja oleku suur ikoon) jääb
   kahvatuks. Tume teema muutmata: `:not([data-theme="dark"])` = ka atribuudita hele külastaja. */
:root:not([data-theme="dark"]) .has-text-grey-light:not(.icon):not(i) {
    color: #626a7b !important;
}

/* Bulma `has-text-*-dark` on värvi TUME toon — mõeldud heledale taustale.
   Tumedas režiimis jääb see taustaga peaaegu kokku: `has-text-warning-dark`
   (#946c00) annab kaardil kontrastiks 2.38–3.04 (AA nõuab 4.5) → protsendid
   kaovad silmist (nt admin kohort-retentioni 20–39% vahemik). Turvavõrk:
   tumedas teemas heledam toon, mis on mõõdetult AA (6.99–8.93).
   Vt DISAIN.md — väldi Bulma heleda-tausta värvimodifikaatoreid. */
[data-theme="dark"] .has-text-warning-dark { color: #f5c542 !important; }
[data-theme="dark"] .has-text-danger-dark  { color: #ff8a8a !important; }
[data-theme="dark"] .has-text-success-dark { color: #6fd7a6 !important; }
[data-theme="dark"] .has-text-info-dark    { color: #7cc7f5 !important; }
[data-theme="dark"] .has-text-link-dark    { color: #8fb5ff !important; }
[data-theme="dark"] .has-text-primary-dark { color: #5fd9c4 !important; }

/* Jaluse lingid — inline var(--text-link) turkiis on valgel liiga hele */
.footer a {
    color: #007a65 !important; /* 4.81:1 taustal #f4f4f4, 5.29:1 valgel */
}
[data-theme="dark"] .footer a {
    color: var(--text-link) !important; /* #22d3ee, 8.8:1 tumedal */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .has-text-grey {
        color: #a1a1aa !important;
    }
    :root:not([data-theme="light"]) .has-text-warning-dark { color: #f5c542 !important; }
    :root:not([data-theme="light"]) .has-text-danger-dark  { color: #ff8a8a !important; }
    :root:not([data-theme="light"]) .has-text-success-dark { color: #6fd7a6 !important; }
    :root:not([data-theme="light"]) .has-text-info-dark    { color: #7cc7f5 !important; }
    :root:not([data-theme="light"]) .has-text-link-dark    { color: #8fb5ff !important; }
    :root:not([data-theme="light"]) .has-text-primary-dark { color: #5fd9c4 !important; }
    :root:not([data-theme="light"]) .footer a {
        color: var(--text-link) !important;
    }
}

/* ========================================
   RAKENDUSE SISUTEKST (app_seo_content.php)
   Lehe lõppu lisatav proosa: mida tööriist teeb, kuidas kasutada, KKK.
   Sisulõigud on tavaline nähtav tekst (just neid tsiteerivad otsimootorid ja
   keelemudelid); KKK on akordionis — <details> sisu on HTML-is olemas ja
   dubleeritud JSON-LD FAQPage plokis, seega tsiteeritavus ei kannata.
   ======================================== */
.app-seo {
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    margin-top: 3rem;
}
/* Lugemisrida piiratakse SISUPLOKIL, mitte .container'il: Bulma laia ekraani
   reegel .container:not(.is-max-desktop):not(.is-max-widescreen) on kolme
   klassiga ja võidaks iga mõistliku .container-selektori (vt .guide__body). */
.app-seo__body {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    /* Mõne rakenduse oma CSS tsentreerib teksti (nt foor) — pikk proosa peab
       jääma vasakule joondatuks, muidu on see loetamatu. */
    text-align: left;
}
.app-seo__body h1,
.app-seo__body h2,
.app-seo__body h3,
.app-seo__body h4 {
    color: var(--text-primary);
    line-height: 1.3;
}
.app-seo__title {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
}
.app-seo__body h2:not(.app-seo__title),
.app-seo__body h3:not(.app-seo__title) {
    font-size: 1.05rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
}
.app-seo__lead {
    font-size: 1rem;
    color: var(--text-primary);
}
.app-seo__body p {
    margin-bottom: 0.9rem;
}
.app-seo__body em {
    color: var(--text-primary);
}

@media screen and (max-width: 768px) {
    .app-seo {
        margin-top: 2rem;
    }
    .app-seo__title {
        font-size: 1.2rem !important;
    }
}

/* Printimisel (töölehed: sõnarägastik, ristsõna, istumisplaan) jäetakse välja */
@media print {
    .app-seo {
        display: none !important;
    }
}

/* ========================================
   JUHENDILEHED (/juhendid/ — includes/guides.php)
   Küsimusepõhised sisulehed. Sama tokenipõhine loogika mis .app-seo,
   aga need on iseseisvad lehed, mitte rakenduse alaosa.
   ======================================== */
/* Lugemisrida piiratakse SISUPLOKKIDEL, mitte .container'il: Bulma laia ekraani
   reegel on kujul .container:not(.is-max-desktop):not(.is-max-widescreen) ja
   võidaks kaaluga iga mõistliku .container-selektori. Sisuplokkidel konkurenti
   pole, seega ei ole !important vaja. */
.guide__crumbs {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
}
.guide__body {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: left;
}
.guide__body h1,
.guide__body h2,
.guide__body h3 {
    color: var(--text-primary);
    line-height: 1.3;
}
.guide__title {
    font-size: 1.7rem !important;
    margin-bottom: 0.75rem !important;
}
.guide__lead {
    font-size: 1.05rem;
    color: var(--text-primary);
}
.guide__body h2 {
    font-size: 1.15rem !important;
    margin-top: 2.25rem !important;
    margin-bottom: 0.6rem !important;
}
.guide__body ul {
    margin-top: 0.5rem;
}
.guide__body li {
    margin-bottom: 0.5rem;
}
.guide__more {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Seotud rakenduste nupurida */
.guide__apps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}
.guide__app {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary) !important;
    text-decoration: none;
    font-size: 0.92rem;
}
.guide__app:hover {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

/* Koondlehe kaardid */
.guide__list {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.guide__card {
    display: block;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-secondary) !important;
    text-decoration: none;
}
.guide__card:hover {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}
.guide__card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}
.guide__card-text {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* Siselink rakenduse sisutekstist juhendisse */
.app-seo__guide {
    margin-top: 2rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
}

@media screen and (max-width: 768px) {
    .guide__title { font-size: 1.5rem !important; }
    .guide__lead { font-size: 1rem; }
    .guide__body h2 { font-size: 1.15rem !important; }
}

/* ========================================
   KKK AKORDION — ühine .app-seo ja .guide plokkidele
   <details>/<summary> on natiivselt klaviatuuriga kasutatav ja selle sisu on
   HTML-is olemas ka suletuna (otsimootorid ja keelemudelid loevad selle välja;
   vastused on lisaks JSON-LD FAQPage plokis). Nooleikoon on joonistatud
   CSS-iga, et see töötaks ühtmoodi kõigis brauserites.
   ======================================== */
.seo-faq {
    border-bottom: 1px solid var(--border-light);
}
.seo-faq:first-of-type {
    border-top: 1px solid var(--border-light);
}
.seo-faq > summary {
    position: relative;
    cursor: pointer;
    padding: 0.7rem 2rem 0.7rem 0;
    list-style: none;
}
.seo-faq > summary::-webkit-details-marker {
    display: none;
}
.seo-faq > summary::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 1.05rem;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}
.seo-faq[open] > summary::after {
    transform: rotate(-135deg);
    top: 1.2rem;
}
/* Pealkiri jääb pealkirjaks (dokumendi struktuur ja struktuurandmed), aga
   käitub summary sees reasisese elemendina */
.seo-faq > summary h2,
.seo-faq > summary h3,
.seo-faq > summary h4 {
    display: inline;
    font-size: 0.95rem !important;
    font-weight: 600;
    margin: 0 !important;
    color: var(--text-primary);
}
.seo-faq > summary:hover h2,
.seo-faq > summary:hover h3,
.seo-faq > summary:hover h4 {
    color: var(--accent-color);
}
.seo-faq > summary:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 4px;
}
.seo-faq__a {
    margin: 0 0 1rem !important;
    padding-right: 2rem;
}

/* Printimisel avatakse kõik vastused (töölehe juurde kuuluv info ei tohi kaduda) */
@media print {
    .seo-faq > summary::after {
        display: none;
    }
    .seo-faq__a {
        display: block !important;
    }
}

/* ==========================================================================
   LIGIPÄÄSETAVUSE TURVAVÕRGUD (globaalsed, DISAIN.md §6)

   Need kaks plokki kehtivad KOGU saidil, sh rakendustes, mille oma CSS neid
   ei arvesta. Rakenduse stiilifail laetakse globaalsest hiljem (head.php:
   /css/style.css real ~102, $additionalStyles real ~245), seega turvavõrk
   vajab !important — muidu kaotaks ta spetsiifsusevõitluse.
   ========================================================================== */

/* 1) Vähendatud liikumise eelistus.
   Kasutaja on OS-i tasemel öelnud, et animatsioonid tekitavad ebamugavust
   (vestibulaarhäired, migreen, keskendumisraskused). Liikumine kaob, aga
   tagasiside jääb — element muutub kohe lõppolekusse.

   Kestus on 0.01ms, MITTE 0s: nii käivituvad `animationend` ja
   `transitionend` sündmused endiselt. Paljud rakendused ootavad neid
   (nt kaardi keeramine, vurri tulemus) ja 0s jätaks nad rippuma. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 2) Klaviatuurifookus on ALATI nähtav.
   Koodibaasis on ~54 kohta `outline: none`, tihti ilma selge asenduseta.
   Nuppudel ja linkidel aktiveerub `:focus-visible` ainult klaviatuuriga
   liikudes, seega hiirekasutaja vaade neil EI muutu. Tekstiväljad on
   erand — vt 2a.

   Kui mõni rakendus vajab teistsugust fookusmärki, muuda seda siin
   keskselt — ÄRA lisa uude koodi `outline: none` ilma asenduseta. */
:focus-visible {
    outline: 3px solid var(--focus-ring, var(--accent-color, #00d1b2)) !important;
    outline-offset: 2px !important;
}
/* Digiaia heleda teema aktsent #19804b on valgel juba 5.0:1 — rõngas jääb brändi värvi.
   Tumedas teemas kehtib ülal --focus-ring: var(--accent-color) (digiaias #16a34a). */
html[data-site="digiaed"]:not([data-theme="dark"]) { --focus-ring: var(--accent-color); }
/* Modaali konteiner saab fookuse ainult siis, kui seal pole ühtki välja (js/dk_modal.js
   lisab tabindex="-1") — ekraanilugeja loeb dialoogi ette, rõngast kogu kaardi ümber
   pole vaja. Sama kaaluga kui ülal, muidu võidaks :focus-visible !important. */
.modal > .modal-card[tabindex="-1"]:focus,
.modal > .modal-card[tabindex="-1"]:focus-visible,
.modal > .modal-content[tabindex="-1"]:focus,
.modal > .modal-content[tabindex="-1"]:focus-visible,
.modal[tabindex="-1"]:focus,
.modal[tabindex="-1"]:focus-visible {
    outline: none !important;
}

/* 2a) Tekstiväljal on fookusmärk ÜKS joon.
   Tekstiväljal, textarea'l, selectil ja contenteditable'il on `:focus-visible`
   tõene ka HIIREKLÕPSUGA (mõõdetud Chrome'is 2026-09-16, ka selectil). Bulma
   fookusstiil (aktsentääris + 3 px vari) ja rakenduste oma `:focus { border-color;
   box-shadow }` jäid siis 2 px tühimikuga rõnga kõrvale ja lugesid kahe eraldi
   joonena — päris klõpsuga 125 välja 127-st. Sama viga parandati 2026-09-06
   avalehe otsingukastis ainult kohapeal.
   - Bulma väljad: oma fookusmärk välja. Muutujate kaudu, mitte border-color'iga —
     nii jääb puutumata tumeda teema ja värvimodifikaatorite (.is-danger jne) ääris.
   - Kõik tekstiväljad: rõngas KATAB 1 px äärise (offset -1px). Rakenduse oma
     aktsentääris jääb rõnga alla ja kuni 2 px vari selle sisse — offset 0 juures
     paistis teist värvi ääris (esitluse indigo türkiisi rõnga sees) veel õhukese
     teise joonena. Nii ei pea ~30 rakenduse CSS-i ükshaaval lappima.
   UUDE KOODI tekstiväljale oma `:focus` ääris-/varjustiili EI lisata. */
.input:focus-visible,
.textarea:focus-visible,
.select select:focus-visible {
    --bulma-input-focus-h: var(--bulma-input-h);
    --bulma-input-focus-s: var(--bulma-input-s);
    --bulma-input-focus-l: calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta));
    box-shadow: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:not([contenteditable="false"]):focus-visible {
    outline-offset: -1px !important;
}
/* 2b) Hiire/puutega fookustatud select rõngast ei näita. Erinevalt tekstiväljast pole
   select'il pärast valikut kursorit, mis fookust näitaks — rõngas jäi lihtsalt paksu
   joonena alles. Märgise paneb ja võtab includes/head.php (klahvivajutus toob rõnga
   tagasi). Erand peab olema !important, muidu võidaks ülal olev :focus-visible. */
select[data-dk-pointer-focus]:focus-visible {
    outline: none !important;
}

/* 3) Puutealade miinimum (WCAG 2.2 §2.5.8, DISAIN.md §6).
   Skann 390 px laiuses leidis 66 juhtelementi alla 24×24 px — enamasti jäi
   kõrgusest 1–4 px puudu (20–23 px), aga leidus ka 14×14 px ikooninuppe,
   mida on sõrmega raske tabada. Mobiilist tuleb ~32% liiklusest.

   Kehtib AINULT puutega seadmes (pointer: coarse) — hiirega töölaual jääb
   tihe paigutus muutumatuks. min-* ei muuda elemente, mis on juba piisavad;
   inline-lingid teksti sees on WCAG erand ja jäävad puutumata. */
@media (pointer: coarse) {
    button,
    .button,
    [role="button"],
    /* `<summary>` on `<details>`-i klikitav päis, aga jäi algsest loendist
       välja: mõõdetud 21–23 px neljas rakenduses (aikord „Millel dokument
       põhineb", kaardistus „Lisasätted", lingid „Mis on lühilink?",
       õpidiagnostika „Millel see test põhineb?"). Kõigil jäi 1–3 px puudu.
       Ta on `display: list-item`, seega `min-height` mõjub tavapäraselt. */
    summary {
        min-height: 24px;
        min-width: 24px;
    }
    /* Bulma `.delete` (ümmargune X) on 20 px ja `.is-small` variandis 16 px —
       sõrmega raskesti tabatav. Muudan MUUTUJAT, mitte üksikuid omadusi:
       Bulma seab sellest korraga `width`, `height`, `min-*` JA `max-*`, seega
       ainult `min-height` ei mõjuks (`max-height` jääks 16 px peale) ja
       `button { min-height: 24px }` (0-0-1) kaotab `.delete`-le (0-1-0) niikuinii.
       `.is-small` on eraldi loetletud, sest tema (0-2-0) võidaks üksikut
       `.delete`-i. Muster on jagatud: 12 kasutust 6 rakenduses. */
    .delete,
    .delete.is-small {
        --bulma-delete-dimensions: 1.5rem;
    }
    /* Bulma `.breadcrumb` link on ainult horisontaalse polstriga, seega tema
       kõrgus = reakõrgus: `is-small` variandis 18 px. Breadcrumb on
       navigatsiooni juhtelement, mitte lause sees olev link, seega WCAG
       inline-erand siia ei laiene. Vertikaalne polster annab 24+ px.
       Muster on jagatud — `class="breadcrumb"` esineb 20 failis. */
    .breadcrumb a {
        padding-block: 4px;
    }
    /* Sildita kontroll (tabelilahtris, tööriistaribal, või kõrval seisva
       `<label for>`-iga): sihtmärgiks on kontroll ise, seega tema peab 24 px
       peale venima. Sildi SEES olev kontroll on eraldi juhtum — vt allpool. */
    input[type="checkbox"]:not(label *),
    input[type="radio"]:not(label *) {
        min-height: 24px;
        min-width: 24px;
    }
    /* Checkbox/raadio silt on tegelik klikiala — tõsta seegi 24 px peale.

       `display: inline-flex` on siin KOHUSTUSLIK (`min-height` ei mõju inline-
       elemendile), aga sellel on lõks: flex-konteineris kaob anonüümse
       tekstielemendi ALGUSTÜHIK. Rakendused kirjutavad standardse Bulma mustri
       `<label class="checkbox"><input type="checkbox"> Tekst</label>`, kus
       eraldajaks ongi ainult see tühik — nii kleepus mobiilis tekst ruudu külge
       43 kohas 12 rakenduses (mõõdetud vahe 0,0 px; töölaual `inline-block`
       ja tühik oli alles). `gap` annab vahe tagasi flex-konteineri moodi. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 24px;
        min-width: 24px;
        display: inline-flex;
        align-items: center;
        gap: 0.45em;
    }
    /* Sildi sees EI pea kontroll ise 24 px peale venima: WCAG 2.5.8 mõõdab
       sihtmärki, ja sihtmärk on silt (klõps sildil lülitab välja) — sildi
       `min-height`/`min-width: 24px` katab nõude. `min-width` on siin vajalik
       just sildita checkboxi pärast (nt ristsona sõnakontrolli tabelilahter,
       kus silt on täpselt ruudu laiune) — ilma selleta jääks ala 18 px.
       Venitatud 24 px natiivne ruut nägi välja nagu klots; 18 px on loomulikum
       ja ikka suurem kui natiivne 13 px.
       `flex: none` hoiab ruudu kokku surumast, kui silditekst on pikk.

       Spetsiifilisus on `:where()`-iga NULL. See on siin turvareegel, mitte
       stiilieelistus: kümmekond rakendust peidab oma checkboxi/raadio ise ja
       annab talle mõõdud (`.gr-seg-item input`, `.et-switch input`,
       `.jr-switch input`, `.ajj-switch input`, `.lt-switch input`,
       `.kog-choice input`, `.kv-option-correct input`, `.aj-opt-radio input`).
       Enamik neist on ÜHE klassiga (0-1-1); varasem `label > input[type=...]`
       (0-1-2) võitis nad kõik ära ja kahandas grupid'i segmentvaliku peidetud
       klikipinna 147×32 → 18×18 px. Null-spetsiifilisus tähendab, et rakenduse
       reegel võidab ALATI — ka see, mida veel kirjutatud ei ole.

       Miks siin ei ole `min-*` nullimist: sildi sees olev kontroll ei saa
       enam 24 px miinimumi (vt `:not(label *)` ülalpool), seega pole midagi
       tühistada. WCAG 2.5.8 on kaetud sildi enda `min-height`/`min-width`-iga
       — klõps sildil lülitab välja. `flex: none` hoiab ruudu kokku surumast,
       kui silditekst on pikk. */
    :where(label) :where(input[type="checkbox"], input[type="radio"]) {
        width: 18px;
        height: 18px;
        flex: none;
    }
}

/* 4) Ikoon jääb nupu keskele ka siis, kui tekstisilt on peidetud.
   Bulma annab ikoonile asümmeetrilise marginaali (`-0.5em` vasakule sissepoole,
   `+0.25em` paremale vaheks), sest `.icon:first-child:not(:last-child)` tähendab
   „ikoon, mille kõrval on tekst". `:last-child` on aga STRUKTUURNE — peidetud
   silt loeb endiselt õde-vennaks. Nii jäi mobiilis ikoon 4,5–6 px nupu keskmest
   vasakule (mõõdetud 90 nupul: uhisaeg 72, haaletoo 8, kiirviktoriin 4,
   kuldvillak 2, punktitabel 2, istumiskohad 2).

   Peitmisviise on mitu — `is-hidden-mobile` (uhisaeg, punktitabel, haaletoo) ja
   rakenduse oma CSS `span:not(.icon) { display: none }` (kuldvillak,
   istumiskohad, kiirviktoriini vahelehed) — seega ei kõlba `:has()`-reegel, mis
   peaks peitmisviise ükshaaval loetlema. Selle asemel: ikoon saab SÜMMEETRILISE
   marginaali (nagu Bulma ikoonita-nupu reeglis) ja vahe teksti ette tuleb
   `gap`-ist. Geomeetria jääb identne — −0,5em + 0,75em = sama 0,25em vahe —
   aga `gap` tekib AINULT kahe päriselt renderduva flex-elemendi vahele:
   `display: none` silt ei ole element ja `position: absolute` silt (nt
   `.dk-act-icon` ekraanilugeja-silt) ei ole flex-element, seega peidetud sildi
   korral vahet ei teki ja ikoon on täpselt keskel — sõltumata sellest, KUIDAS
   ta peideti. Marginaal teksti küljes oleks absoluutset silti asjatult nihutanud.

   A/B-mõõdetud (390 px, 70 lehte, muutmata puu vs see): nähtava tekstiga
   nuppude laius, ikooni ja teksti asukoht muutumatud 0,0 px täpsusega. */
.button:has(> .icon:first-child) {
    /* 0.75, mitte 0.25: ikooni parem marginaal muutus +0.25em → −0.5em, seega
       vahe peab katma mõlemad (−0.5 + 0.75 = +0.25em ehk täpselt Bulma vahe). */
    gap: calc(var(--bulma-button-padding-horizontal, 1em) * 0.75);
}
.button > .icon:first-child:not(:last-child) {
    margin-inline: calc(var(--bulma-button-padding-horizontal, 1em) * -0.5);
}

/* 5) Kitsal ekraanil peidetud nupusilt jääb ekraanilugejale alles.
   `display: none` (ka Bulma `is-hidden-mobile`) eemaldab sildi ligipääsupuust —
   ≤768 px oli nupp siis nimetu ikoon ja VoiceOver luges „nupp" (audit X2-03,
   istumiskohtade „Ava uues aknas"/„Prindi"). Sama võte mis `.dk-act-icon`-il:
   silt peidus SILMALE, nimi alles.
     .dk-sr-mobile  — ≤768 px (Bulma „mobile", sama piir mis is-hidden-mobile)
     .dk-sr-narrow  — ≤480 px (sama piir mis .dk-actions/.dk-act-icon)
   Nupusildile ÄRA kasuta `display: none`-i ega `span:not(.icon) { display: none }`
   reeglit — valvab cron/e2e_test.js probeAccessibleNames (FAIL).
   Bulma `is-hidden-mobile` nupu OTSESE lapsena saab sama käitumise automaatselt
   (uhisaeg, punktitabel, sein, mottevoog, kiirviktoriini redaktor, …).
   Geomeetria ei muutu: absoluutne silt ei ole flex-element, seega reegel 4
   (`gap`) jätab ikooni täpselt keskele nagu display:none puhul. */
@media screen and (max-width: 768px) {
    .dk-sr-mobile,
    .button > .is-hidden-mobile,
    button > .is-hidden-mobile {
        display: block !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}
@media screen and (max-width: 480px) {
    .dk-sr-narrow {
        display: block !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ========================================
   SKIP-LINK ("Hüppa sisu juurde")
   ========================================
   Klaviatuurikasutaja esimene Tab peab andma võimaluse navist mööda hüpata.
   Element on nav.php KÕIGE alguses, seega esimene fokuseeritav asi lehel.
   Sihtmärk #sisu on <main> maamärk (includes/config.php süstib selle).
   Ekraanilt väljas kuni fookuseni — ei tohi kasutada display:none ega
   visibility:hidden, sest need eemaldaksid ta ka tabijärjekorrast. */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    color: var(--text-link);
    border: 2px solid currentColor;
    border-radius: 0 0 6px 0;
    font-weight: 600;
    text-decoration: underline;
}

.skip-link:focus {
    left: 0;
}

/* Maamärk saab tabindex="-1", et fookus sinna päriselt liiguks (muidu nihkub
   ainult kerimiskoht). Fookusraami me ei kuva — kasutaja näeb hüpet niigi.
   tabindex="-1" tähendab ka, et klõps mis tahes tühjale alale viib fookuse
   main-ile, ja järgmine klahvivajutus (nt tühik sõnakaartides) teeb sellest
   :focus-visible'i — üleval olev `:focus-visible … !important` joonistaks siis
   kogu lehe ümber raami, millest paistab välja ainult alumine joon. Seepärast
   peab erand olema sama kaaluga (!important) ja katma ka :focus-visible'i. */
main#sisu:focus,
main#sisu:focus-visible {
    outline: none !important;
}

/* ---------------------------------------------------------------------------
   Rea-toonid tumedas režiimis (has-background-*-light)

   Bulma `has-background-danger-light` jt annavad HELE tausta. Tumedas teemas
   joonistab leht sellele heleda teksti (--text-primary) ja rida muutub
   loetamatuks — kõige valusamalt admin-tabelites, kus terve rida on toonitud
   (admin/join_security.php, admin/login_security.php, admin/anomalies.php,
   admin/otsingud.php, admin/tabs/pusle.php, admin/tabs/lingi.php,
   TI/stsenaariumid/admin.php).

   Lahendus: tumedas režiimis asendame heleda tooni TUMEDA tooniga, mitte ei
   sunni teksti tumedaks. Nii jääb pind ülejäänud lehega ühte tooni (heledad
   saared tumedal lehel loeksid vea, mitte rõhutusena) ja päritud hele tekst
   töötab edasi. Toonid on tuletatud navy-paletist (--bg-card #1f2940).

   Väärtused on teadlikult DUBLEERITUD kahes plokis — sama muster mis failis
   juba on teemamuutujate juures: `[data-theme]` katab käsitsi valitud teema,
   meediapäring süsteemieelistuse siis, kui kasutaja pole valikut teinud.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .has-background-danger-light  { background-color: #3f1d27 !important; }
[data-theme="dark"] .has-background-warning-light { background-color: #3d3320 !important; }
[data-theme="dark"] .has-background-info-light    { background-color: #1c3547 !important; }
[data-theme="dark"] .has-background-success-light { background-color: #1d3a2a !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .has-background-danger-light  { background-color: #3f1d27 !important; }
    :root:not([data-theme="light"]) .has-background-warning-light { background-color: #3d3320 !important; }
    :root:not([data-theme="light"]) .has-background-info-light    { background-color: #1c3547 !important; }
    :root:not([data-theme="light"]) .has-background-success-light { background-color: #1d3a2a !important; }
}

/* ---------------------------------------------------------------------------
   LEAFLET — tumeda režiimi korrektuur (JAGATUD)

   Leaflet joonistab juhtnupud, atributsiooni ja popup'id oma heleda paletiga,
   mis tumedal lehel loeb valge laiguna. Reeglid elasid varem seiklusrada/style.css-s;
   nüüd kasutab Leafletit ka üritus (ürituse täpne asukoht), seega on nad siin —
   teine koopia oleks tähendanud, et kaardi tume režiim triivib rakenduste vahel.

   Plaadid ise jäävad heledaks: OSM ei paku tumedat kihti ilma eraldi
   plaaditeenuseta ja CSS-filtriga "tumedaks" pööratud kaardil muutuvad sildid
   loetamatuks. Korrigeerime ainult Leafleti enda liidesekihi.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .leaflet-control-attribution { background: rgba(0,0,0,.6) !important; color: #ccc !important; }
/* Leafleti oma lingivärv (#0078A8) jääb tumedal atributsiooniribal loetamatuks —
   ainus koht, kus kontrast tumedas režiimis päriselt alla kukkus. */
[data-theme="dark"] .leaflet-control-attribution a { color: var(--text-link, #6ab0ff) !important; }
[data-theme="dark"] .leaflet-bar a { background: #2b2b2b; color: #eee; border-color: #444; }
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip { background: var(--bg-card, #2b2b2b); color: var(--text-primary, #eee); }
[data-theme="dark"] .leaflet-popup-content a { color: var(--text-link, #6ab0ff); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(0,0,0,.6) !important; color: #ccc !important; }
    :root:not([data-theme="light"]) .leaflet-control-attribution a { color: var(--text-link, #6ab0ff) !important; }
    :root:not([data-theme="light"]) .leaflet-bar a { background: #2b2b2b; color: #eee; border-color: #444; }
    :root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
    :root:not([data-theme="light"]) .leaflet-popup-tip { background: var(--bg-card, #2b2b2b); color: var(--text-primary, #eee); }
    :root:not([data-theme="light"]) .leaflet-popup-content a { color: var(--text-link, #6ab0ff); }
}

/* ==========================================================================
   Jagatud taustavaliku paneel (.dk-bgp)
   Renderdab dk_bg_render_picker() (includes/backgrounds.php), käitumine on
   js/taustavalik.js. Kasutajad: klassitahvel, sein, esitlus, viktoriin.
   Paneelil EI OLE oma keriala — kerib see, mis teda ümbritseb (modaal,
   külgpaan). Sisemine max-height lõikaks rühma poole pealt katki ja
   pesastatud keriala on pöidlaga praktiliselt tabamatu.
   ========================================================================== */
.dk-bgp { padding: 2px; }
.dk-bgp-label {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* --text-secondary, mitte --text-muted: 11 px poolpaks tekst on WCAG mõttes
       tavatekst (4.5:1) ja muted jäi modaalitaustal alla (mõõdetud 4.30:1). */
    color: var(--text-secondary, #4a4a4a);
}
.dk-bgp > .dk-bgp-label:first-child { margin-top: 0; }
.dk-bgp-help {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #4a4a4a);
}
.dk-bgp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
}
.dk-bgp-slot { position: relative; display: block; }
.dk-bgp-item,
.dk-bgp-add {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid var(--border-color, #dbdbdb);
    border-radius: 8px;
    background-color: var(--bg-secondary, #f5f5f7);
    background-size: cover;
    background-position: center;
    color: var(--text-secondary, #4a4a4a);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.dk-bgp-item:hover,
.dk-bgp-add:hover:not(:disabled) { transform: scale(1.06); }
.dk-bgp-item.is-active {
    border-color: var(--accent-color, #00d1b2);
    box-shadow: 0 0 0 2px var(--accent-color, #00d1b2);
}
.dk-bgp-item:focus-visible,
.dk-bgp-add:focus-visible,
.dk-bgp-del:focus-visible {
    outline: 2px solid var(--accent-color, #00d1b2);
    outline-offset: 2px;
}
/* Tausta eemaldamine on TEGEVUS, seega nupp, mitte ruudustiku lahter. Nähtav
   ainult siis, kui midagi on eemaldada (JS lülitab `hidden`-i). */
.dk-bgp-clear-row { margin: 0 0 0.5rem; }
/* Bulma reset annab mõnele elemendile display'i, mis võidaks [hidden] atribuudi
   — ütleme selle siin eksplitsiitselt välja (vt sama lõks <section hidden> juures). */
.dk-bgp-clear-row[hidden] { display: none; }
.dk-bgp-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #4a4a4a);
    cursor: pointer;
}
.dk-bgp-clear::before {
    content: '\00D7';            /* × — tegevuse märk, ilma ikoonifondita */
    font-size: 1rem;
    line-height: 1;
}
.dk-bgp-clear:hover { border-color: #f14668; color: #f14668; }
.dk-bgp-clear:focus-visible {
    outline: 2px solid var(--accent-color, #00d1b2);
    outline-offset: 2px;
}

/* Üleslaadimise lahter: sama ruut mis pildid, katkendjoonega eristatud */
.dk-bgp-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-style: dashed;
}
.dk-bgp-add:disabled { opacity: 0.45; cursor: not-allowed; }
.dk-bgp-add-plus { font-size: 1.1rem; line-height: 1; }
.dk-bgp-add-text { font-size: 0.625rem; line-height: 1.1; text-align: center; }
.dk-bgp-add.is-loading { opacity: 0.6; pointer-events: none; }

/* Kustutamisnupp pildi nurgas. Puutesihtmärk on 24 px — väiksem ei ole
   telefonis tabatav, suurem kataks pildi ära. */
.dk-bgp-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 50%;
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #4a4a4a);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.dk-bgp-slot:hover .dk-bgp-del,
.dk-bgp-del:focus-visible { opacity: 1; }
.dk-bgp-del:hover { color: #f14668; border-color: #f14668; }
/* Puuteseadmes ei ole hover'it — seal on nupp alati näha, muidu on pilt
   kustutamatu (sama lõks mis pointer:coarse sildireeglis). */
@media (hover: none) {
    .dk-bgp-del { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dk-bgp-item, .dk-bgp-add, .dk-bgp-del { transition: none; }
    .dk-bgp-item:hover, .dk-bgp-add:hover:not(:disabled) { transform: none; }
}

/* Kokkuklapitav taustavalik (.dk-bgp-fold) — külgpaanis ja sätete modaalis, kus
   taust on ÜKS väli paljudest. <details>, mitte oma JS: klaviatuur, ekraanilugeja
   ja lehesisene otsing töötavad ilma meie abita. */
.dk-bgp-fold {
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 10px;
    background: var(--bg-card, #fff);
}
.dk-bgp-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 10px;
}
/* Vaikimisi kolmnurk on brauseriti eri kohas ja eri suuruses — asendame oma
   märgiga (::after allpool), et rida oleks igal pool ühesugune. */
.dk-bgp-summary::-webkit-details-marker { display: none; }
.dk-bgp-summary::marker { content: ''; }
.dk-bgp-summary:hover { background: var(--bg-hover, #f5f5f7); }
.dk-bgp-summary:focus-visible {
    outline: 2px solid var(--accent-color, #00d1b2);
    outline-offset: 2px;
}
.dk-bgp-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--border-color, #dbdbdb);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-secondary, #f5f5f7);
}
/* Ilma taustata: diagonaaltriip ütleb „tühi", mitte „pilt ei laadinud" */
.dk-bgp-thumb[data-empty] {
    background-image: linear-gradient(135deg,
        transparent 45%, var(--border-color, #dbdbdb) 45%,
        var(--border-color, #dbdbdb) 55%, transparent 55%);
}
.dk-bgp-summary-text {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #363636);
}
.dk-bgp-summary-hint {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-secondary, #4a4a4a);
}
.dk-bgp-summary-hint::after {
    content: ' \25BE';
    display: inline-block;
    transition: transform 0.15s ease;
}
.dk-bgp-fold[open] .dk-bgp-summary-hint::after { transform: rotate(180deg); }
.dk-bgp-fold[open] .dk-bgp-summary {
    border-bottom: 1px solid var(--border-light, #ededed);
    border-radius: 10px 10px 0 0;
}
/* Lahtise paneeli sisu kerib ISE — muidu lükkaks 36 lahtrit külgpaani sisu
   ekraanilt välja, mis oligi kokkuklappimise põhjus. */
.dk-bgp-fold[open] > .dk-bgp {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 10px 10px;
}
@media (prefers-reduced-motion: reduce) {
    .dk-bgp-summary-hint::after { transition: none; }
}

/* Safe Exam Browser (includes/seb.php): nav ja lahkumislingid peidetud — SEB-i filter
   keelaks need niikuinii ja nähtav, aga avanematu menüü ajab osaleja segadusse */
html[data-seb] .navbar, html[data-seb] .dk-lang-hint, html[data-seb] [data-seb-hide] { display: none !important; }
.dk-seb-enter { max-width: 420px; margin: 6vh auto 0; padding: 24px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
.dk-seb-enter-icon { font-size: 40px; color: var(--accent-color); margin-bottom: 8px; }
.dk-seb-code { font-size: 1.6rem; letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.dk-seb-box { margin-top: 28px; border-top: 1px solid var(--border-light); padding-top: 10px; }
.dk-seb-box > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dk-seb-box > summary i { color: var(--accent-color); }
.dk-seb-body { padding-top: 12px; }
.dk-seb-steps { margin: 10px 0 16px 1.4em; color: var(--text-secondary); }
.dk-seb-steps li { margin-bottom: 4px; }
.dk-seb-form { max-width: 420px; }
.dk-seb-warn { color: var(--text-secondary); }
.dk-seb-warn i { color: #e5a00d; }