/* Arvutitrenn — kõik värvid tulevad saidi teemamuutujatest, et tume režiim
   töötaks ilma eraldi reeglistikuta. Raja oma värv käib --at-track-color
   kaudu, mille JS seab kaardile, raja päisele ja mängupinnale.

   Küljendus järgib Claude Designi kavandit "Arvutitrenn uus" variant 1b
   (Kaardipakk): rajad on pildiga kaardid, harjutused ruudustikus ja juhis on
   mänguvälja KÕRVAL kontrollnimekirjana. Tokenid, mida globaalne
   css/style.css (veel) ei defineeri, on siin — fail laetakse ainult
   arvutitrenni lehel, seega need ei leki mujale (eeskuju kaardistus/style.css). */

.section.at-section { padding: 1.25rem 1.5rem 1.5rem; }

.at-container {
    max-width: 1040px;

    /* Raadiuste hierarhia (DISAIN.md §1): väiksem element = väiksem raadius */
    --r-control: 8px;
    --r-card: 12px;
    --r-panel: 16px;
    --r-pill: 999px;

    /* Kahekihilised varjud */
    --shadow-1: 0 1px 2px rgba(17, 17, 26, .06), 0 4px 12px rgba(17, 17, 26, .08);
    --shadow-2: 0 2px 4px rgba(17, 17, 26, .08), 0 12px 24px rgba(17, 17, 26, .12);

    /* Liikumine */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* Lingivärv EI tohi olla var(--text-link): heledas teemas on see navbari
       turkiis #00d1b2, mis annab valgel taustal 1,8:1 — loetamatu. Saidil on
       sama parandus juba jaluses (css/style.css „Jaluse lingid"). */
    --at-link: #007a65;                 /* 5,3:1 valgel */

    /* Õnnestumise värv: roheline peab kandma ka VALGET linnukest, seega
       #22c55e (2,0:1 valgega) ei kõlba märgise taustaks. */
    --at-ok: #15803d;
    --at-ok-fg: #fff;
}

[data-theme="dark"] .at-container {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .30);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .40), 0 12px 24px rgba(0, 0, 0, .40);
    --at-link: var(--text-link);        /* #22d3ee, 8,8:1 tumedal */
    --at-ok: #4ade80;
    --at-ok-fg: #16162a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .at-container {
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .30);
        --shadow-2: 0 2px 4px rgba(0, 0, 0, .40), 0 12px 24px rgba(0, 0, 0, .40);
        --at-link: var(--text-link);
        --at-ok: #4ade80;
        --at-ok-fg: #16162a;
    }
}

/* Raja värv on pindadel PEHME (10–16% tint), aga glüüfina peab ta kandma ka
   kontrasti. Heledas teemas jääb paljas #f59e0b valgel 2,1:1 peale — seega
   glüüfid tumendatakse. Tumedas teemas on pind tume ja värv kõlbab paljalt. */
.at-track-art,
.at-trackhead-icon,
.at-level-art,
.at-panel-icon {
    color: color-mix(in srgb, var(--at-track-color) 78%, #000);
}
[data-theme="dark"] .at-track-art,
[data-theme="dark"] .at-trackhead-icon,
[data-theme="dark"] .at-level-art,
[data-theme="dark"] .at-panel-icon {
    color: var(--at-track-color);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .at-track-art,
    :root:not([data-theme="light"]) .at-trackhead-icon,
    :root:not([data-theme="light"]) .at-level-art,
    :root:not([data-theme="light"]) .at-panel-icon {
        color: var(--at-track-color);
    }
}

.at-head { margin-bottom: 1rem; }
.at-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
    margin-bottom: .15rem;
}
.at-sub {
    color: var(--text-secondary);
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.5;
}

/* ---------- puuteseadme teade ---------- */

/* Üks rida, mitte kast: teade on abiinfo, avalehe põhisisu on rajad. */
.at-touch-note {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .45rem .8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    border-left: 3px solid #f59e0b;
    border-radius: var(--r-control);
    background: var(--bg-secondary);
}
.at-touch-note[hidden] { display: none; }
.at-touch-note i { color: #b8770a; font-size: 1rem; }
[data-theme="dark"] .at-touch-note i { color: #f59e0b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .at-touch-note i { color: #f59e0b; }
}
.at-touch-note span { color: var(--text-secondary); font-size: .9rem; line-height: 1.4; }

/* ---------- rajad: kaardipakk ---------- */

/* Selged murdepunktid, mitte auto-fill: kuus rada on kas ÜHES reas (laiem kui
   Bulma widescreen, 1216 px) või 3+3. auto-fill andis vahepealsetel laiustel
   5+1 või 4+2 — orb kaart üksi teises reas ja avaleht kerima (1280x720: 28 px). */
.at-tracks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 1216px) {
    .at-tracks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.at-track {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: var(--r-panel);
    background: var(--bg-card);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* Hover-tõste ainult hiirega seadmel — puutel jääks olek muidu "kinni". */
@media (hover: hover) {
    .at-track:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.at-track:disabled { opacity: .55; cursor: default; }

/* Pildiriba: suur ikoon raja oma toonis. See ongi see, mille järgi laps kaardi
   ära tunneb enne, kui ta pealkirja lugeda jõuab. */
.at-track-art {
    height: 92px;
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    background: color-mix(in srgb, var(--at-track-color) 12%, var(--bg-card));
}
.at-track-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem;
}
.at-track-label {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--text-primary);
}
/* Ruudukesed: üks harjutuse kohta. Edenemisriba ütleb ainult "kui palju",
   ruudud ütlevad ka "mitu tükki kokku on" ja "kus ma pooleli jäin". */
.at-track-nodes { display: flex; flex-wrap: wrap; gap: 3px; }
.at-node {
    width: 16px; height: 16px;
    border-radius: 4px;
    display: grid; place-items: center;
    font-size: .68rem;
    box-sizing: border-box;
}
.at-node.is-done { background: var(--at-track-color); color: #fff; }
.at-node.is-cur { border: 2px solid var(--at-track-color); }
.at-node.is-later { background: var(--border-light); }
/* --text-muted on kalibreeritud LEHE tausta järgi; kaardi heledamal pinnal
   (--bg-card) jääb tumedas teemas 4,3:1 alla AA piiri. */
.at-track-count, .at-track-soon {
    font-size: .875rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Vaates on ÜKS täidetud nupp (DISAIN.md §2) — see, mille juurde laps
   tõenäoliselt edasi läheb. Kolm täidetud nuppu kõrvuti võtaksid üksteiselt
   tähelepanu ja avaleht ei ütleks enam, kust alustada. */
.at-track-cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 40px;
    margin-top: auto;
    border-radius: var(--r-control);
    font-weight: 600;
    box-sizing: border-box;
    border: 2px solid color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: color-mix(in srgb, var(--at-track-color) 60%, #000);
    background: none;
}
.at-track-cta.is-suggest {
    /* Valge tekst paljal raja värvil annab 2–3:1. Tumendatud toon hoiab
       aktsendi äratuntavana ja teksti loetavana (≥5:1 kõigil kolmel värvil). */
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff;
}
[data-theme="dark"] .at-track-cta,
:root:not([data-theme="light"]) .at-track-cta {
    border-color: color-mix(in srgb, var(--at-track-color) 80%, #fff);
    color: color-mix(in srgb, var(--at-track-color) 60%, #fff);
}
[data-theme="dark"] .at-track-cta.is-suggest,
:root:not([data-theme="light"]) .at-track-cta.is-suggest {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}

/* ---------- ühe raja harjutused ---------- */

.at-crumb { margin-bottom: .75rem; }
.at-back {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px;
    background: none; border: none; cursor: pointer;
    color: var(--at-link); font: inherit; font-weight: 600;
    padding: .35rem 0;
    align-self: flex-start;
}
.at-back:hover { text-decoration: underline; }

.at-trackhead {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.at-trackhead-icon {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card));
}
.at-trackhead-text { flex: 1 1 auto; min-width: 0; }
.at-trackhead-text .at-title { margin-bottom: .1rem; }
.at-trackhead-count {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.at-levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.at-level {
    position: relative;
    min-height: 168px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .8rem;
    padding: 1rem .7rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-1);
    cursor: pointer; font: inherit; color: inherit;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
@media (hover: hover) {
    .at-level:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.at-level-num {
    position: absolute; top: .55rem; left: .7rem;
    font-size: .875rem; font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.at-level-check {
    position: absolute; top: .5rem; right: .55rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--at-ok); color: var(--at-ok-fg);
    font-size: .8rem;
}
.at-level-pill {
    position: absolute; top: -.7rem; right: .6rem;
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    font-size: .8rem; font-weight: 700;
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff;
}
[data-theme="dark"] .at-level-pill,
:root:not([data-theme="light"]) .at-level-pill {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}
.at-mouse-mark {
    position: absolute; top: .55rem; right: .7rem;
    color: var(--text-secondary);
    font-size: .85rem;
}
.at-level-art { font-size: 2.4rem; line-height: 1; }
.at-level-label {
    font-size: 1rem; font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}
.at-level.is-done .at-level-art { opacity: .5; }
.at-level.is-done .at-level-label { color: var(--text-secondary); }
/* Soovitatud järgmine harjutus on AINUS vali element ruudustikus. */
.at-level.is-cur {
    border: 2px solid var(--at-track-color);
    padding: calc(1rem - 1px) calc(.7rem - 1px);
    box-shadow: var(--shadow-2);
}
.at-level.is-cur .at-level-art {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.9rem;
    background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card));
}
.at-level.is-cur .at-level-label { font-weight: 700; }

/* ---------- harjutuse vaade ---------- */

/* Kaks veergu: juhis vasakul, mänguväli paremal. Nupurida on paneeli ÕDE
   (mitte laps), et mobiilis saaks ta mänguvälja ALLA liikuda — nii ei jää
   "Järgmine harjutus" kitsal ekraanil juhise ja mängu vahele kinni. */
/* Vaate kõrgus on FIKSEERITUD (mitte min-height): siis ei saa ükski paneeli
   sisu — võiduteade, pikk juhis — lehte kõrgemaks venitada ega kerimisriba
   tekitada. Kui paneeli sisu ei mahu, kerib PANEEL ise, mängupind jääb paika.
   Alampiir hoiab väga madala akna puhul mängupinna kasutatavana. */
.at-play-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "panel stage"
        "foot  stage";
    gap: .85rem;
    height: calc(100vh - 11rem);
    height: calc(100svh - 11rem);
    min-height: 440px;
}
.at-panel { grid-area: panel; }
.at-stage { grid-area: stage; }
.at-panel-foot { grid-area: foot; }

.at-panel {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-panel);
    background: var(--bg-card);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-fast) var(--ease);
}
.at-panel.is-won {
    border: 2px solid var(--at-ok);
    padding: calc(1rem - 1px);
}
.at-panel-head { display: flex; align-items: center; gap: .65rem; }
.at-panel-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 1rem;
    background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card));
}
.at-panel-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.at-steps {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    padding: .2rem .65rem;
    border-radius: var(--r-pill);
    background: var(--bg-hover);
    /* --bg-hover on kaardist heledam pind; --text-secondary annab seal tumedas
       teemas 4,4:1 ehk napilt alla AA piiri. */
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600; font-size: .875rem;
}
.at-steps[hidden] { display: none; }
.at-steps-done { color: var(--text-primary); }
.at-steps-sep { opacity: .5; margin: 0 .15rem; }
.at-steps-word { margin-left: .35rem; font-weight: 400; }

.at-goal {
    padding: .6rem .75rem;
    border-radius: var(--r-card);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: .92rem;
    line-height: 1.45;
}
.at-goal:empty { display: none; }

/* Kontrollnimekiri: kõik sammud on näha, aga ainult üks on vali. Tehtud
   linnukesega ja vaikselt, praegune raamistatud kastis, tulevased
   numbriringiga. Vt app.js ctx.goalSteps. */
.at-goal.is-steps {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 0; background: none; border: none;
}
.at-goal-step {
    display: flex; align-items: center; gap: .6rem;
    padding: .3rem .1rem;
    line-height: 1.4;
}
.at-goal-mark {
    flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 700;
    box-sizing: border-box;
}
.at-goal-step.is-done { color: var(--text-secondary); font-size: .9rem; }
.at-goal-step.is-done .at-goal-mark { background: var(--at-ok); color: var(--at-ok-fg); }
.at-goal-step.is-current {
    align-items: flex-start;
    padding: .7rem .75rem;
    border-radius: var(--r-card);
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--at-track-color) 10%, var(--bg-card));
    border: 2px solid var(--at-track-color);
}
.at-goal-step.is-current .at-goal-mark {
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff;
}
[data-theme="dark"] .at-goal-step.is-current .at-goal-mark,
:root:not([data-theme="light"]) .at-goal-step.is-current .at-goal-mark {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}
.at-goal-step.is-later { color: var(--text-secondary); font-size: .9rem; }
.at-goal-step.is-later .at-goal-mark {
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
}
.at-goal-note {
    margin-top: .3rem;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.45;
}

.at-stage {
    position: relative;
    min-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-panel);
    background: var(--bg-card);
    overflow: hidden;
    /* Harjutustes lohistatakse — brauseri oma teksti- ja pildivalik segaks. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.at-stage.is-won { box-shadow: inset 0 0 0 2px var(--at-ok); }

/* Tagasiside elab juhise juures, MITTE mängupinna all. Vana kleepuv riba
   kattis kitsal ekraanil just selle välja, mida parasjagu vaja oli —
   mõõdetud 360x740: kate 100%, elementFromPoint andis .at-feedback.
   PESA hoiab kõrgust (üherealine teade ei nihuta midagi), teatekast ise on
   teksti suurune — fikseeritud kõrgusega kast oli ühe lühikese lause jaoks
   mitu korda liiga suur. */
.at-feedback-slot { min-height: 2.9rem; }
.at-feedback {
    padding: .5rem .75rem;
    border-radius: var(--r-card);
    font-size: .9rem;
    line-height: 1.45;
    border: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.at-feedback:empty { display: none; }
.at-feedback.is-ok  { background: color-mix(in srgb, #22c55e 14%, var(--bg-card)); border-color: var(--at-ok); color: var(--text-primary); }
.at-feedback.is-tip { background: color-mix(in srgb, #f59e0b 16%, var(--bg-card)); border-color: #b8770a; color: var(--text-primary); }
.at-feedback.is-bad { background: color-mix(in srgb, #ef4444 14%, var(--bg-card)); border-color: #ef4444; color: var(--text-primary); }
.at-feedback.is-win { background: color-mix(in srgb, #22c55e 14%, var(--bg-card)); border-color: var(--at-ok); }
/* `at-victory-*`, mitte `at-win-*`: viimane on „Aknad" harjutuse aken. */
.at-victory-head {
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .15rem;
}
.at-victory-body { color: var(--text-secondary); font-size: .88rem; line-height: 1.45; }

/* Nupud ühel real. „Järgmine" ilmub KÕRVALE — alla ilmudes kasvaks vaade võidu
   hetkel ja tekiks kerimisriba. Võidu järel jääb „Alusta uuesti" ikooniks. */
.at-panel-foot { display: flex; gap: .5rem; }
.at-panel-foot .button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 0;
}
.at-play-grid.is-won .at-restart { flex: 0 0 44px; padding-left: 0; padding-right: 0; }
.at-play-grid.is-won .at-restart-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Bulma `is-light` on valgel kaardil peaaegu nähtamatu — nupp peab paistma
   nupuna ka siis, kui ta on teisejärguline. */
.at-panel-foot .at-restart {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
/* Bulma annab .button-ile display:inline-flex, mis lööb üle brauseri
   `[hidden] { display: none }` reegli — ilma selleta paistab "Järgmine
   harjutus" ka läbimata harjutuses. */
.at-panel-foot .button[hidden] { display: none; }
/* Järgmise harjutuse nupp kannab raja värvi, mitte saidi turkiisi — vaates
   on ÜKS aktsent (DISAIN.md §2). */
.at-play .at-next {
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    border-color: transparent;
    color: #fff;
}
[data-theme="dark"] .at-play .at-next,
:root:not([data-theme="light"]) .at-play .at-next {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}

/* ---------- värav (vajab hiirt) ---------- */

.at-gate {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .75rem; padding: 2rem 1.25rem; text-align: center;
}
.at-gate i { font-size: 2.4rem; color: #f59e0b; }
.at-gate-title { font-weight: 700; font-size: 1.15rem; color: var(--text-primary); }
.at-gate-text { color: var(--text-secondary); max-width: 46ch; line-height: 1.5; }

/* ================= HIIRERADA ================= */

.at-field { position: absolute; inset: 0; }

.at-bubble {
    position: absolute;
    width: var(--at-size, 56px); height: var(--at-size, 56px);
    margin: calc(var(--at-size, 56px) / -2) 0 0 calc(var(--at-size, 56px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
        color-mix(in srgb, var(--at-track-color) 55%, #fff) 0%,
        var(--at-track-color) 70%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--at-track-color) 35%, transparent);
    transition: transform .22s ease, opacity .22s ease;
}
.at-bubble.is-pop { transform: scale(1.6); opacity: 0; }

.at-target {
    position: absolute;
    width: var(--at-size, 64px); height: var(--at-size, 64px);
    margin: calc(var(--at-size, 64px) / -2) 0 0 calc(var(--at-size, 64px) / -2);
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--at-track-color) 18%, var(--bg-card));
    border: 2px solid var(--at-track-color);
    color: var(--at-track-color);
    font-size: calc(var(--at-size, 64px) * .45);
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}
.at-target.is-hit { transform: scale(.4); opacity: 0; }

/* ikoonide ruudustik (topeltklõps, paremklõps) */
.at-icongrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}
.at-icon {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: .9rem .5rem;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.at-icon:hover { background: var(--bg-hover); }
.at-icon.is-selected { background: color-mix(in srgb, var(--at-track-color) 16%, transparent); }
.at-icon.is-wanted { border-color: var(--at-track-color); border-style: dashed; }
.at-icon.is-open .at-icon-art, .at-icon.is-done .at-icon-art { color: #22c55e; }
.at-icon.is-done { opacity: .6; }
.at-icon-art { font-size: 2.4rem; color: var(--at-track-color); }
.at-icon-name { font-size: .88rem; color: var(--text-primary); text-align: center; word-break: keep-all; }

/* kontekstimenüü */
.at-ctxmenu {
    position: absolute;
    z-index: 30;
    min-width: 180px;
    padding: .3rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-hover);
}
.at-ctxrow {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .5rem .65rem;
    border: none; border-radius: 7px;
    background: none; cursor: pointer;
    font: inherit; color: var(--text-primary);
    text-align: left;
}
.at-ctxrow:hover { background: var(--bg-hover); }
.at-ctxrow i { width: 1.1rem; color: var(--text-secondary); }

/* lohistamine */
.at-dragwrap {
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.25rem; height: 100%;
}
.at-pool, .at-slots {
    display: flex; flex-wrap: wrap; gap: .85rem;
    justify-content: center;
}
.at-slots { margin-top: auto; }
.at-shape {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--at-track-color) 18%, var(--bg-card));
    border: 2px solid var(--at-track-color);
    color: var(--at-track-color);
    font-size: 1.6rem;
    cursor: grab;
    touch-action: none;
}
.at-shape.at-rot i { transform: rotate(-90deg); }
.at-shape.is-dragging { opacity: .3; }
.at-shape.is-placed { cursor: default; border-style: solid; }
.at-ghost {
    position: fixed; z-index: 60;
    pointer-events: none;
    opacity: .9;
    box-shadow: var(--shadow-hover);
}
.at-slot {
    min-width: 96px; min-height: 92px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
}
.at-slot.is-over { border-color: var(--at-track-color); background: var(--bg-hover); }
.at-slot.is-filled { border-style: solid; border-color: #22c55e; }
.at-slot-label { font-size: .85rem; }

/* kerimine */
.at-scrolllist {
    position: absolute; inset: 1rem;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.at-scrollrow {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .65rem .9rem;
    border: none; border-bottom: 1px solid var(--border-light);
    background: none; cursor: pointer;
    font: inherit; color: var(--text-primary); text-align: left;
}
.at-scrollrow:hover { background: var(--bg-hover); }
.at-scrollrow-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-color); flex: 0 0 auto;
}
.at-scrollrow.is-found { color: #22c55e; font-weight: 600; }
.at-scrollrow.is-found .at-scrollrow-dot { background: #22c55e; }

/* valikuraam */
.at-selboard {
    position: absolute; inset: 0;
    padding: clamp(.5rem, 2vh, 1.5rem);
    display: grid; place-items: center;
}
/* Kitsas ja keskel: mõlemale poole peab jääma tühja ala, kust valikuraami
   alustada. Veergude arv on FIKSEERITUD 3 — JS paigutab sihtvärvi 2x2 ploki
   selle sama arvu järgi ja meediapäringuga veerge muutes laguneks plokk. */
/* Veergude arv on FIKSEERITUD 4 — JS paigutab sihtvärvi 2x2 ploki selle sama
   arvu järgi ja meediapäringuga veerge muutes laguneks plokk laiali. Lahtrid
   on kindla laiusega, vahe tuleb gap'ist: see ongi see tühi ala, kust
   valikuraami alustatakse. */
/* Mõõt arvestab nii laiust kui KÕRGUST: kolm rida peab mahtuma ka madalale
   sülearvutiekraanile, kus laius üksi lubaks palju suuremad lahtrid. */
.at-selgrid {
    display: grid;
    grid-template-columns: repeat(4, clamp(52px, min(9vw, 7.2vh), 104px));
    gap: clamp(.45rem, min(2.4vw, 1.6vh), 2rem) clamp(.9rem, 3vw, 3rem);
    justify-items: center;
    align-items: center;
}
/* Aktiivala on ikooni ümber, MITTE üle kogu grid-lahtri. Venitatud lahter
   sõi failide vahelt tühja ala ära ja valikuraami sai alustada ainult
   mängulaua servast — raam on aga mõeldud algama failide vahelt. */
.at-tile {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    width: 100%;
    padding: .5rem .25rem;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
}
/* Ikooni rea kõrgus on ~1,5x fondist — see, mitte veeru laius, määrab rea
   kõrguse, seega peab ka SEE olema ekraanikõrgusega seotud. */
.at-tile-art { font-size: clamp(1.2rem, min(3.2vw, 3vh), 2.7rem); }
.at-tile[data-color="punane"] .at-tile-art { color: #ef4444; }
.at-tile[data-color="sinine"] .at-tile-art { color: #3b82f6; }
.at-tile[data-color="roheline"] .at-tile-art { color: #22c55e; }
.at-tile-name { font-size: .78rem; color: var(--text-secondary); }
.at-tile.is-sel { background: color-mix(in srgb, var(--at-track-color) 22%, transparent); border-color: var(--at-track-color); }
.at-selgrid.is-phase2 .at-tile.is-wanted::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--at-track-color);
}
.at-band {
    position: absolute;
    border: 1px solid var(--at-track-color);
    background: color-mix(in srgb, var(--at-track-color) 18%, transparent);
    pointer-events: none;
}

/* ================= FAILIRADA ================= */

.at-fm { position: absolute; inset: 0; display: flex; flex-direction: column; }

.at-fm-crumb {
    display: flex; align-items: center; gap: .3rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.at-fm-crumb-btn {
    background: none; border: none; cursor: pointer;
    padding: .2rem .45rem; border-radius: 6px;
    font: inherit; color: var(--at-link);
}
.at-fm-crumb-btn:hover { background: var(--bg-hover); }
.at-fm-crumb-btn.is-current { color: var(--text-primary); font-weight: 600; cursor: default; }
.at-fm-sep { color: var(--text-muted); }

.at-fm-bar {
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--border-light);
}
.at-fm-bar .buttons { margin-bottom: 0; }
.at-fm-bar .buttons .button { margin-bottom: 0; }

.at-fm-pane {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    grid-auto-rows: min-content;
    gap: .6rem;
    align-content: start;
}
.at-fm-empty {
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.at-fm-item {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .7rem .35rem;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    touch-action: none;
}
/* Hõljumine peab jääma valikust selgelt nõrgemaks — muidu näeb laps
   hiire all olevat faili valituna ja "vali fail" samm tundub tehtud. */
.at-fm-item:hover { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
.at-fm-item.is-sel {
    background: color-mix(in srgb, var(--at-track-color) 20%, transparent);
    border-color: var(--at-track-color);
}
.at-fm-item.is-cut { opacity: .45; }
.at-fm-item.is-drop { border-color: var(--at-track-color); border-style: dashed; background: var(--bg-hover); }
.at-fm-item.is-dragging { opacity: .35; }
.at-fm-art { font-size: 2.1rem; color: var(--at-track-color); }
.at-fm-item[data-type="file"] .at-fm-art { color: var(--text-secondary); }
.at-fm-name {
    font-size: .8rem; color: var(--text-primary);
    text-align: center; line-height: 1.3;
    word-break: break-word;
    width: 100%;
}
.at-fm-rename {
    width: 100%;
    font: inherit; font-size: .8rem;
    text-align: center;
    padding: .15rem .25rem;
    border: 1px solid var(--at-track-color);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ================= KLAHVIJUHEND ================= */

.at-keys { flex: 0 0 auto; }
.at-keys[hidden] { display: none; }

/* Kompaktne rida: klahvipildid + nupp, mis avab skeemi SUURELT modalis. */
.at-keyguide {
    display: flex; align-items: center; gap: .4rem .5rem;
    flex-wrap: wrap;
    padding: .45rem .65rem;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .85rem;
}
.at-cap-strip { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.at-keyguide-more {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 32px;
    margin-left: auto;
    padding: .2rem .1rem;
    border: none; background: none;
    color: var(--at-link);
    font: inherit; font-size: .84rem; font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.at-keyguide-more:hover { text-decoration: underline; }

/* --- klaviatuuri modal --- */
html.at-kbmodal-open { overflow: hidden; }
.at-kbmodal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(10, 10, 20, .6);
}
.at-kbmodal-box {
    width: 100%;
    max-width: 980px;
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: var(--r-panel, 16px);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 16px 40px rgba(0, 0, 0, .35);
}
.at-kbmodal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: .75rem;
}
.at-kbmodal-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
.at-kbmodal-close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--r-control, 8px);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
}
/* Paigutuse valik: segmenteeritud nupurida, valitu täidetud raja toonis. */
.at-kbmodal-layouts {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    margin-bottom: .9rem;
}
.at-kbmodal-picklabel { font-size: .88rem; color: var(--text-secondary); margin-right: .2rem; }
.at-kbmodal-layout {
    min-height: 36px;
    padding: .3rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill, 999px);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
}
.at-kbmodal-layout:hover { border-color: var(--at-track-color, var(--border-color)); }
.at-kbmodal-layout[aria-pressed="true"] {
    background: color-mix(in srgb, var(--at-track-color, #3298dc) 60%, #000);
    border-color: transparent;
    color: #fff;
}
[data-theme="dark"] .at-kbmodal-layout[aria-pressed="true"],
:root:not([data-theme="light"]) .at-kbmodal-layout[aria-pressed="true"] {
    background: color-mix(in srgb, var(--at-track-color, #3298dc) 70%, #fff);
    color: #16162a;
}
.at-kbmodal-hints {
    list-style: none;
    margin: .9rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .4rem;
}
.at-kbmodal-hints[hidden] { display: none; }
.at-kbmodal-hints li {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .55rem .75rem;
    border-left: 3px solid var(--at-track-color, #3298dc);
    border-radius: 0 var(--r-control, 8px) var(--r-control, 8px) 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: .95rem; line-height: 1.5;
}
.at-kbmodal-hints li i { margin-top: .25rem; color: var(--text-secondary); }
.at-cap-strip.is-large { gap: .45rem; margin-bottom: 1rem; }
.at-cap-strip.is-large .at-cap { font-size: 1rem; padding: .25rem .65rem; }
.at-kbmodal-board .at-kb { width: 100%; min-width: 0; }
/* Telefonis kahandaks täislaiusesse surutud skeem sildid ~5 px peale —
   seal kerib skeem ise külgsuunas ja sildid jäävad loetavaks. */
@media (max-width: 640px) {
    .at-kbmodal { padding: .5rem; }
    .at-kbmodal-box { padding: 1rem; }
    .at-kbmodal-board { overflow-x: auto; }
    .at-kbmodal-board .at-kb { min-width: 560px; }
}
.at-kbmodal-note {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.55;
    max-width: 70ch;
}

/* Klahvikujutis teksti sees — kolmemõõtmeline nupp, mis on äratuntav ka siis,
   kui laps ei oska silti lugeda. */
.at-cap {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .45rem;
    min-width: 1.7rem;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-bottom-width: 3px;
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.at-cap-sub {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: .92em;
}

/* Klaviatuuri skeem */
.at-kb { width: 100%; height: auto; display: block; }
.at-kb-key rect {
    fill: var(--bg-card);
    stroke: var(--border-color);
    stroke-width: 1;
}
.at-kb-key text {
    fill: var(--text-muted);
    font-size: 9px;
    font-family: inherit;
    text-anchor: middle;
}
.at-kb-key.is-hl rect {
    fill: color-mix(in srgb, var(--at-track-color) 28%, var(--bg-card));
    stroke: var(--at-track-color);
    stroke-width: 2;
}
.at-kb-key.is-hl text { fill: var(--text-primary); font-weight: 700; }
.at-kb-key.is-small text { font-size: 7.5px; }

/* ================= TEKSTIRADA ================= */

.at-sheet {
    position: absolute; inset: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex; flex-direction: column; gap: 1rem;
}

/* VOOREŽIIM (tekstirada): mängupind kasvab sisu järgi ja kerib LEHEGA.
   Kerimiskast kerimiskastis peidab ära, kui palju ülesandeid veel on, ja
   sunnib lapse kahte kerimisriba eristama. */
/* Voorežiimis ei ole vaate kõrgus enam ekraani, vaid sisu oma. Juhisepaneel
   jääb KLEEPUMA, nii et kontrollnimekiri ja tagasiside on näha ka siis, kui
   laps on kerinud üheksanda ülesande juurde. Varem kleepus tagasiside ise
   akna alaserva ja kattis kitsal ekraanil täpselt selle välja, mida
   parasjagu vaja oli (mõõdetud 360x740: kate 100%). */
/* NB: `is-flow` paneb tekst.js `sheet()` mängupinnale JA selle VANEMALE,
   milleks on .at-play-grid (mitte #at-view-play) — selektor peab seda
   järgima, muidu jääb vaade ekraanikõrguseks ja paneel ei kleepu. */
.at-play-grid.is-flow {
    height: auto;
    min-height: 0;
    align-items: start;
}
.at-play-grid.is-flow .at-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
}
.at-stage.is-flow {
    height: auto;
    min-height: 0;
    overflow: visible;
}
.at-stage.is-flow .at-sheet {
    position: static;
    overflow: visible;
    height: auto;
}

.at-row { display: flex; flex-direction: column; gap: .45rem; }
/* display:flex lööks [hidden]-i üle — sama lõks, mis Bulma nupul. Ilma selleta
   paistaksid „ükshaaval" ilmuvad väljad kõik korraga. */
.at-row[hidden] { display: none; }
.at-row.is-pair {
    flex-direction: row;
    gap: .75rem;
    align-items: stretch;
}
.at-row.is-pair > * { flex: 1 1 0; min-width: 0; }

.at-row-label {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.45;
}

.at-note {
    padding: .5rem .75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: .88rem;
}

/* Päris redaktor ja ainult loetav lähtetekst näevad ühtemoodi välja, et
   kopeerimisülesandes oleks "kust" ja "kuhu" visuaalselt võrdväärsed. */
.at-ed, .at-ro {
    padding: .6rem .75rem;
    min-height: 2.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    /* Harjutuse tekst PEAB olema valitav — mujal rakenduses on valik maas. */
    user-select: text;
    -webkit-user-select: text;
    word-break: break-word;
}
.at-ed { background: var(--bg-card); cursor: text; }
.at-ed:focus {
    outline: none;
    border-color: var(--at-track-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-track-color) 22%, transparent);
}
.at-ed.is-mono, .at-ro.is-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92rem;
}
.at-ed-line { min-height: 2.4rem; }
.at-ro { color: var(--text-secondary); }
.at-ro.is-selectable { cursor: text; }

.at-ed.is-done, .at-ro.is-done {
    border-color: #22c55e;
    background: color-mix(in srgb, #22c55e 10%, var(--bg-card));
}

/* Vormindamise tööriistariba.
   Sticky ankurdub PADDING-boxi ülaserva, seega `top: 0` jätaks konteineri
   polstri jagu sisu ribast kõrgemale nähtavale — tekst kerib riba kohalt
   läbi. Seepärast venitatakse riba negatiivsete veeristega üle polstri ja
   `top` on 0 akna suhtes (voorežiimis on kerija leht, mitte kast). */
.at-toolbar {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin: -1rem -1rem 0;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky; top: 0; z-index: 5;
}
/* Läbipaistmatu taust on siin NÕUE, mitte kaunistus: riba alt kerib sisu. */
.at-stage.is-flow .at-toolbar { box-shadow: 0 2px 8px rgb(0 0 0 / .14); }
.at-tool {
    width: 36px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}
.at-tool:hover { border-color: var(--at-track-color); background: var(--bg-hover); }

/* ================= LÄHTESTAMINE JA RAJA LÄBIMINE ================= */

.at-reset-row {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-top: 1.5rem;
}
/* display:flex lööks [hidden]-i üle — ilma selle reata paistab „Alusta
   puhtalt lehelt" ka siis, kui midagi tehtud pole. */
.at-reset-row[hidden] { display: none; }
.at-reset-hint { color: var(--text-secondary); font-size: .84rem; }
.at-track.is-complete .at-track-count { color: var(--text-primary); font-weight: 600; }

/* ================= HIIR: KINDEL KÄSI ================= */

.at-road {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}
.at-road-glow { fill: none; stroke: var(--border-color); stroke-linecap: round; stroke-linejoin: round; }
.at-road-way {
    fill: none; stroke: var(--bg-hover);
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .2s ease;
}
.at-road.is-live .at-road-way { stroke: color-mix(in srgb, var(--at-track-color) 30%, var(--bg-secondary)); }
.at-road-start { fill: #22c55e; }
.at-road-end { fill: #ef4444; }

/* ================= HIIR: AKNAD ================= */

.at-win-target {
    position: absolute;
    border: 2px dashed var(--at-track-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--at-track-color) 6%, transparent);
    pointer-events: none;
}
.at-win {
    position: absolute;
    display: flex; flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    touch-action: none;
}
.at-win.is-active { box-shadow: var(--shadow-hover); }
.at-win.is-placed { border-color: #22c55e; }
.at-win-title {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .7rem;
    /* Paljas raja värv annaks valge tekstiga 3,1:1 — tiitliriba tekst on
       väike ja peab olema loetav, seega tumedam toon samast värvist. */
    background: color-mix(in srgb, var(--at-track-color) 70%, #000);
    color: #fff;
    font-size: .88rem; font-weight: 600;
    cursor: move;
    user-select: none;
}
.at-win-body {
    flex: 1 1 auto;
    padding: .7rem;
    color: var(--text-secondary);
    font-size: .85rem;
    cursor: default;
}
.at-win-grip {
    position: absolute; right: 0; bottom: 0;
    width: 22px; height: 22px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 50%, var(--border-color) 50% 58%, transparent 58% 70%,
                        var(--border-color) 70% 78%, transparent 78%);
}
.at-win-grip.is-hint {
    background-color: color-mix(in srgb, var(--at-track-color) 30%, transparent);
    border-radius: 6px 0 0 0;
}

/* ================= TEKST: SALVESTAMINE ================= */

.at-doc {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.at-doc-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .45rem .8rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    font-size: .88rem;
}
.at-doc-name { font-weight: 600; color: var(--text-primary); }
.at-doc-state { color: var(--text-muted); }
.at-doc-bar.is-dirty .at-doc-state { color: #f59e0b; font-weight: 600; }
.at-doc-bar.is-dirty .at-doc-state::before { content: '● '; }
.at-doc .at-ed { border: none; border-radius: 0; min-height: 5rem; }

.at-dialog {
    padding: 1rem;
    border: 1px solid var(--at-track-color);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: var(--shadow-hover);
    display: flex; flex-direction: column; gap: .5rem;
    max-width: 460px;
}
.at-dialog-title { font-weight: 700; color: var(--text-primary); }
.at-dialog-label { font-size: .85rem; color: var(--text-secondary); margin-top: .25rem; }
.at-dialog-row { display: flex; align-items: center; gap: .4rem; }
.at-dialog-input {
    flex: 1 1 auto; min-width: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
}
.at-dialog-input:focus { outline: none; border-color: var(--at-track-color); }
.at-dialog-ext { color: var(--text-muted); font-family: ui-monospace, Consolas, monospace; }
.at-dialog-folders { display: flex; flex-wrap: wrap; gap: .4rem; }
.at-dialog-folder {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer; font: inherit; font-size: .88rem;
}
.at-dialog-folder i { color: #f59e0b; }
.at-dialog-folder.is-sel { border-color: var(--at-track-color); background: color-mix(in srgb, var(--at-track-color) 16%, transparent); }
.at-dialog .buttons { margin-top: .4rem; margin-bottom: 0; }
.at-dialog .buttons .button { margin-bottom: 0; }

/* ================= BRAUSERIRADA ================= */

.at-br {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
}

/* --- vahekaardiriba --- */
.at-br-tabs {
    display: flex; align-items: stretch; gap: 2px;
    padding: .35rem .5rem 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
}
.at-br-tab {
    display: flex; align-items: center; gap: .4rem;
    min-width: 0; max-width: 190px;
    padding: .45rem .5rem .45rem .75rem;
    border-radius: 10px 10px 0 0;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: .85rem;
    cursor: pointer;
}
.at-br-tab.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 -1px 0 var(--at-track-color) inset;
}
.at-br-tab-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* WCAG 2.2 miinimum on 24x24 — ristike on niigi väikseim asi selles vaates,
   seega mõõt on 28 px, et lapse sõrm ei tabaks kõrvalolevat vahekaarti. */
.at-br-tab-x {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: none; color: inherit;
    cursor: pointer; font-size: .75rem;
}
.at-br-tab-x:hover { background: var(--border-light); }
.at-br-tab-add {
    flex: 0 0 auto;
    width: 32px;
    border: none; background: none;
    color: var(--text-secondary);
    cursor: pointer;
}

/* --- tööriistariba --- */
.at-br-bar {
    display: flex; align-items: center; gap: .35rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.at-br-nav {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: none; color: var(--text-primary);
    cursor: pointer; font-size: .9rem;
}
.at-br-nav:hover:not(:disabled) { background: var(--bg-hover); }
.at-br-nav:disabled { color: var(--text-muted); opacity: .45; cursor: default; }
.at-br-addr {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: .45rem;
    padding: .25rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-pill);
    background: var(--bg-card);
}
.at-br-lock { color: #15803d; font-size: .8rem; }
[data-theme="dark"] .at-br-lock,
:root:not([data-theme="light"]) .at-br-lock { color: #4ade80; }
.at-br-unlock { color: #b91c1c; font-size: .8rem; }
[data-theme="dark"] .at-br-unlock,
:root:not([data-theme="light"]) .at-br-unlock { color: #fca5a5; }
.at-br-input {
    flex: 1 1 auto; min-width: 0;
    border: none; background: none;
    font: inherit; font-size: .92rem;
    color: var(--text-primary);
    padding: .35rem 0;
}

/* --- sisuala --- */
.at-br-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    user-select: text;
    -webkit-user-select: text;
}
.at-br-h {
    font-size: 1.35rem; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .6rem;
}
.at-br-p {
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: .6rem;
    max-width: 60ch;
}
.at-br-links { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .5rem; }
.at-br-link {
    display: inline-block;
    background: none; border: none; padding: .3rem 0;
    font: inherit; font-size: 1rem;
    color: var(--at-link);
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}
.at-br-link:hover { color: var(--text-primary); }
.at-br-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; padding: 2.5rem 1rem;
    color: var(--text-secondary); text-align: center;
}
.at-br-empty i { font-size: 2.2rem; color: var(--text-muted); }

/* --- otsingutulemused --- */
.at-br-searchhead {
    display: flex; align-items: baseline; gap: .6rem;
    padding-bottom: .6rem; margin-bottom: .75rem;
    border-bottom: 1px solid var(--border-light);
}
.at-br-searchq { font-weight: 700; color: var(--text-primary); }
.at-br-searchn { font-size: .85rem; color: var(--text-secondary); }
.at-br-result {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .6rem .7rem;
    margin-bottom: .5rem;
    border-radius: var(--r-card);
    border: 1px solid transparent;
}
/* Reklaam on VISUAALSELT eristatud, nagu päris otsingumootoris — mõte on
   selles, et laps õpiks seda vahet ise märkama. */
.at-br-result.is-ad {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}
.at-br-adtag {
    align-self: flex-start;
    padding: .1rem .5rem;
    border-radius: 4px;
    background: var(--text-secondary); color: var(--bg-card);
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
}
.at-br-url { font-size: .82rem; color: #15803d; }
[data-theme="dark"] .at-br-url,
:root:not([data-theme="light"]) .at-br-url { color: #4ade80; }
.at-br-desc { font-size: .88rem; color: var(--text-secondary); line-height: 1.45; }

/* --- aadressi lugemise valikud --- */
.at-br-quiz {
    position: absolute; inset: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .6rem;
}
.at-br-urlopt {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-secondary);
    cursor: pointer; font: inherit;
    text-align: left;
}
.at-br-urlopt:hover { border-color: var(--at-track-color); }
.at-br-urltext {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    color: var(--text-primary);
    word-break: break-all;
}
.at-br-urlopt.is-right { border-color: var(--at-ok); background: color-mix(in srgb, #22c55e 12%, var(--bg-card)); }
.at-br-urlopt.is-wrong { border-color: #ef4444; }

/* --- allalaadimine --- */
.at-br-dl {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .5rem;
    padding: .6rem 1.1rem;
    border: none; border-radius: var(--r-control);
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff; font: inherit; font-weight: 600;
    cursor: pointer;
}
[data-theme="dark"] .at-br-dl,
:root:not([data-theme="light"]) .at-br-dl {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}
.at-br-tray {
    position: absolute; left: 0; right: 0; bottom: 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.at-br-traybtn {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .6rem .9rem;
    border: none; background: none;
    font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.at-br-traybody { padding: 0 .9rem .75rem; }
.at-br-trayfile { font-weight: 600; color: var(--text-primary); }
.at-br-traypath { font-size: .85rem; color: var(--text-secondary); }

@media (max-width: 640px) {
    .at-br-pane { padding: .85rem; }
    .at-br-bar { padding: .4rem .45rem; gap: .2rem; }
    .at-br-nav { width: 30px; height: 30px; }
    .at-br-quiz { padding: .85rem; }
    .at-br-urltext { font-size: .85rem; }
}

/* ================= E-POSTI RADA ================= */

.at-mail {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
}

.at-mail-bar {
    display: flex; align-items: center; gap: .3rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    flex-wrap: wrap;
}
.at-mail-tab {
    padding: .4rem .8rem;
    border: none; border-radius: var(--r-pill);
    background: none; color: var(--text-secondary);
    font: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer;
    min-height: 34px;
}
.at-mail-tab.is-active { background: var(--bg-card); color: var(--text-primary); }
.at-mail-new {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem; min-height: 34px;
    border: none; border-radius: var(--r-control);
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff; font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer;
}
[data-theme="dark"] .at-mail-new,
:root:not([data-theme="light"]) .at-mail-new {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}

.at-mail-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
    user-select: text;
    -webkit-user-select: text;
}
.at-mail-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; padding: 2.5rem 1rem;
    color: var(--text-secondary); text-align: center;
}
.at-mail-empty i { font-size: 2.2rem; color: var(--text-muted); }

/* --- kirjade nimekiri --- */
.at-mail-row {
    display: block; width: 100%; text-align: left;
    padding: .7rem .8rem;
    margin-bottom: .4rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    background: var(--bg-secondary);
    cursor: pointer; font: inherit;
}
.at-mail-row:hover { border-color: var(--at-track-color); }
.at-mail-rowtop { display: flex; align-items: center; gap: .5rem; }
.at-mail-from { font-size: .85rem; color: var(--text-secondary); }
.at-mail-row.is-unread .at-mail-from { color: var(--text-primary); font-weight: 700; }
.at-mail-clip { color: var(--text-secondary); font-size: .8rem; }
.at-mail-subj { font-weight: 600; color: var(--text-primary); margin-top: .1rem; }
.at-mail-prev {
    font-size: .85rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- kirja lugemine --- */
.at-mail-readhead { margin-bottom: .5rem; }
.at-mail-back {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 36px;
    border: none; background: none;
    color: var(--at-link); font: inherit; font-weight: 600;
    cursor: pointer; padding: 0;
}
.at-mail-readsubj { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; }
.at-mail-meta { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.at-mail-metaname { font-weight: 600; color: var(--text-primary); }
/* Aadress on alati nähtav ja ühtlase laiusega kirjas — just siin paistab
   võltsaadress välja. */
.at-mail-metaaddr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem; color: var(--text-secondary);
    word-break: break-all;
}
.at-mail-to { font-size: .82rem; color: var(--text-secondary); margin: .25rem 0 .75rem; }
.at-mail-body { color: var(--text-primary); line-height: 1.55; }
.at-mail-body p { margin-bottom: .45rem; }
.at-mail-link {
    display: inline-block; margin-top: .5rem;
    background: none; border: none; padding: .3rem 0;
    font: inherit; color: var(--at-link);
    text-decoration: underline; cursor: pointer;
}
.at-mail-attach {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: .85rem; padding: .6rem .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-secondary);
}
.at-mail-attachname { font-weight: 600; color: var(--text-primary); }
.at-mail-attachsave {
    margin-left: auto;
    padding: .3rem .8rem; min-height: 32px;
    border: 1px solid var(--border-color); border-radius: var(--r-control);
    background: var(--bg-card); color: var(--text-primary);
    font: inherit; font-size: .85rem; cursor: pointer;
}
.at-mail-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.at-mail-act {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; min-height: 40px;
    border: 1px solid var(--border-color); border-radius: var(--r-control);
    background: var(--bg-card); color: var(--text-primary);
    font: inherit; font-size: .88rem; cursor: pointer;
}
.at-mail-act:hover { border-color: var(--at-track-color); }

/* --- kirjutamine --- */
.at-mail-form { display: flex; flex-direction: column; gap: .5rem; }
.at-mail-field { display: flex; flex-direction: column; gap: .2rem; }
.at-mail-flabel { font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.at-mail-input {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-control);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; font-size: .92rem;
}
.at-mail-input.is-area { resize: vertical; min-height: 6rem; line-height: 1.5; }
.at-mail-attrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; position: relative; }
.at-mail-attbtn, .at-mail-send {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; min-height: 40px;
    border: 1px solid var(--border-color); border-radius: var(--r-control);
    background: var(--bg-card); color: var(--text-primary);
    font: inherit; font-size: .9rem; cursor: pointer;
}
.at-mail-send {
    margin-top: .75rem;
    border-color: transparent;
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff; font-weight: 600;
}
[data-theme="dark"] .at-mail-send,
:root:not([data-theme="light"]) .at-mail-send {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}
.at-mail-attached {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: .85rem;
}
.at-mail-picker {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 5;
    min-width: 220px;
    padding: .5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-2);
}
.at-mail-pickerhead { font-size: .8rem; color: var(--text-secondary); padding: .2rem .4rem .45rem; }
.at-mail-pickfile {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; min-height: 38px;
    padding: .4rem .5rem;
    border: none; border-radius: var(--r-control);
    background: none; color: var(--text-primary);
    font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.at-mail-pickfile:hover { background: var(--bg-hover); }

/* --- teemavaliku ja õngitsuse lisad --- */
.at-mail-quiz {
    position: absolute; inset: 0;
    overflow-y: auto; padding: 1rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.at-mail-preview {
    padding: .75rem .85rem;
    border-left: 3px solid var(--at-track-color);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    background: var(--bg-secondary);
    margin-bottom: .5rem;
}
.at-mail-previewlabel { font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .2rem; }
.at-mail-previewbody { color: var(--text-primary); line-height: 1.5; }
.at-mail-opt {
    padding: .8rem 1rem; min-height: 44px;
    border: 2px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; text-align: left; cursor: pointer;
}
.at-mail-opt:hover { border-color: var(--at-track-color); }
.at-mail-opt.is-right { border-color: var(--at-ok); background: color-mix(in srgb, #22c55e 12%, var(--bg-card)); }
.at-mail-opt.is-wrong { border-color: #ef4444; }
.at-mail-report {
    position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px;
    border: none; border-radius: var(--r-control);
    background: #b91c1c; color: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow-2);
}
[data-theme="dark"] .at-mail-report,
:root:not([data-theme="light"]) .at-mail-report { background: #fca5a5; color: #16162a; }
.at-mail-report[hidden] { display: none; }

@media (max-width: 640px) {
    .at-mail-pane { padding: .6rem; }
    .at-mail-bar { padding: .4rem .45rem; }
    .at-mail-new span { display: none; }
    .at-mail-new { padding: .4rem .7rem; }
}

/* ================= TURVALISUSE RADA ================= */

.at-sec {
    position: absolute; inset: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
}

/* --- otsustuskaart --- */
.at-sec-card {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem;
    border-radius: var(--r-panel);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}
.at-sec-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
    background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card));
    color: color-mix(in srgb, var(--at-track-color) 78%, #000);
}
[data-theme="dark"] .at-sec-icon,
:root:not([data-theme="light"]) .at-sec-icon { color: var(--at-track-color); }
.at-sec-text { color: var(--text-primary); line-height: 1.55; font-size: 1rem; }
.at-sec-opts { display: flex; flex-direction: column; gap: .5rem; }
.at-sec-opt {
    padding: .85rem 1rem; min-height: 44px;
    border: 2px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; text-align: left; cursor: pointer;
}
.at-sec-opt:hover { border-color: var(--at-track-color); }
.at-sec-opt.is-right { border-color: var(--at-ok); background: color-mix(in srgb, #22c55e 12%, var(--bg-card)); }
.at-sec-opt.is-wrong { border-color: #ef4444; }

/* --- paroolivälja harjutus --- */
.at-sec-pwwrap { display: flex; }
.at-sec-pw {
    width: 100%;
    padding: .7rem .9rem;
    border: 2px solid var(--border-color);
    border-radius: var(--r-control);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; font-size: 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.at-sec-pw.is-small { flex: 1 1 auto; min-width: 0; font-size: .95rem; padding: .45rem .65rem; }
.at-sec-rules { display: flex; flex-direction: column; gap: .35rem; }
.at-sec-rule {
    display: flex; align-items: center; gap: .6rem;
    color: var(--text-secondary);
    font-size: .95rem;
}
.at-sec-rulemark {
    flex: 0 0 auto;
    width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: .75rem;
}
.at-sec-rule.is-ok { color: var(--text-primary); }
.at-sec-rule.is-ok .at-sec-rulemark { background: var(--at-ok); color: var(--at-ok-fg); }

/* --- kolme konto harjutus --- */
.at-sec-site {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    background: var(--bg-secondary);
}
.at-sec-site .at-sec-icon { width: 36px; height: 36px; font-size: .95rem; }
.at-sec-sitename { flex: 0 0 auto; width: 7.5rem; font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.at-sec-go {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; margin-top: .25rem;
    border: none; border-radius: var(--r-control);
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
[data-theme="dark"] .at-sec-go,
:root:not([data-theme="light"]) .at-sec-go {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}
.at-sec-result {
    padding: .85rem 1rem;
    border-radius: var(--r-card);
    border: 2px solid transparent;
}
.at-sec-result.is-good { border-color: var(--at-ok); background: color-mix(in srgb, #22c55e 12%, var(--bg-card)); }
.at-sec-result.is-bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--bg-card)); }
.at-sec-resulthead { font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; }
.at-sec-result p { color: var(--text-secondary); line-height: 1.5; }

/* --- avaliku profiili harjutus --- */
.at-sec-field {
    display: flex; align-items: center; gap: .7rem;
    width: 100%; min-height: 48px;
    padding: .6rem .85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    background: var(--bg-card);
    font: inherit; text-align: left; cursor: pointer;
    color: var(--text-primary);
}
.at-sec-field:hover { border-color: var(--at-track-color); }
.at-sec-eye { flex: 0 0 auto; width: 1.4rem; color: var(--text-secondary); }
.at-sec-fieldname { flex: 1 1 auto; min-width: 0; }
.at-sec-tag {
    flex: 0 0 auto;
    padding: .15rem .6rem;
    border-radius: var(--r-pill);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: .78rem; font-weight: 600;
}
.at-sec-field.is-hidden { background: var(--bg-secondary); color: var(--text-secondary); }
.at-sec-field.is-hidden .at-sec-fieldname { text-decoration: line-through; }
.at-sec-field.is-hidden .at-sec-tag { background: var(--at-ok); color: var(--at-ok-fg); }

@media (max-width: 640px) {
    .at-sec { padding: .85rem; }
    .at-sec-card { padding: .8rem; gap: .65rem; }
    .at-sec-sitename { width: 5.5rem; font-size: .82rem; }
    .at-sec-site { gap: .5rem; padding: .5rem .55rem; }
}

/* ================= HIIR: MENÜÜD ================= */

.at-menubar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: stretch;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.at-menu-top {
    position: relative;
    padding: .7rem 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: default;
}
.at-menu-top:hover { background: var(--bg-hover); }
.at-menu-drop, .at-menu-sub {
    position: absolute;
    min-width: 190px;
    padding: .3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-2);
    z-index: 5;
}
.at-menu-drop { top: 100%; left: 0; }
.at-menu-sub { top: -.3rem; left: 100%; }
.at-menu-item {
    display: flex; align-items: center; gap: .5rem;
    position: relative;
    padding: .5rem .7rem;
    border-radius: var(--r-control-sm, 6px);
    color: var(--text-primary);
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}
.at-menu-item:hover { background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card)); }
.at-menu-arrow { margin-left: auto; color: var(--text-secondary); font-size: .7rem; }

/* ================= HIIR: LIUGURID ================= */

.at-sliders {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 1.75rem;
    padding: 1.5rem;
}
.at-slider-row {
    padding: 1rem 1.15rem;
    border: 2px solid var(--border-light);
    border-radius: var(--r-panel);
    background: var(--bg-secondary);
}
.at-slider-row.is-ok { border-color: var(--at-ok); }
.at-slider-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.at-slider-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--at-track-color) 14%, var(--bg-card));
    color: color-mix(in srgb, var(--at-track-color) 78%, #000);
    font-size: .85rem;
}
[data-theme="dark"] .at-slider-icon,
:root:not([data-theme="light"]) .at-slider-icon { color: var(--at-track-color); }
.at-slider-label { font-weight: 600; color: var(--text-primary); }
.at-slider-want { margin-left: auto; font-size: .85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.at-slider { width: 100%; accent-color: var(--at-track-color); height: 28px; }
.at-slider-val {
    margin-top: .35rem;
    font-size: 1.35rem; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ================= FAILID: OTSINGUKAST ================= */

.at-fm-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
}
.at-fm-searchicon { color: var(--text-secondary); font-size: .85rem; }
.at-fm-searchinput {
    flex: 1 1 auto; min-width: 0;
    border: none; background: none;
    font: inherit; font-size: .92rem;
    color: var(--text-primary);
    padding: .3rem 0;
}

/* ================= TEKST: OTSI JA ASENDA ================= */

.at-fr-bar {
    display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
    padding: .75rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--bg-secondary);
}
.at-fr-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 8rem; min-width: 0; }
.at-fr-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.at-fr-input {
    width: 100%;
    padding: .45rem .65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-control);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit; font-size: .92rem;
}
.at-fr-go {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .45rem 1rem;
    border: none; border-radius: var(--r-control);
    background: color-mix(in srgb, var(--at-track-color) 60%, #000);
    color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
[data-theme="dark"] .at-fr-go,
:root:not([data-theme="light"]) .at-fr-go {
    background: color-mix(in srgb, var(--at-track-color) 70%, #fff);
    color: #16162a;
}

@media (max-width: 640px) {
    .at-menu-top { padding: .6rem .75rem; font-size: .92rem; }
    .at-menu-drop, .at-menu-sub { min-width: 150px; }
    /* Alammenüü ei mahu telefonis kõrvale — avaneb alla, nagu mobiilimenüüd. */
    .at-menu-sub { position: static; box-shadow: none; border: none; padding: .2rem 0 .2rem .8rem; min-width: 0; }
    .at-sliders { padding: 1rem; gap: 1.25rem; }
    .at-fr-field { flex: 1 1 100%; }
    .at-fr-go { width: 100%; }
}

/* ---------- kitsas aken: üks veerg ---------- */

/* Kaks veergu vajavad 320 px juhise + vähemalt ~420 px mängupinna jaoks.
   Allpool seda lähevad nad üksteise alla ja nupurida liigub mängupinna ALLA
   (grid-template-areas, vt .at-play-grid) — muidu jääks "Järgmine harjutus"
   juhise ja mängu vahele, kus laps seda ei otsi. */
@media (max-width: 860px) {
    .at-play-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "panel"
            "stage"
            "foot";
        height: auto;
        min-height: 0;
    }
    .at-panel { overflow: visible; }
    .at-play-grid.is-flow .at-panel {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .at-stage { min-height: 340px; }

    /* Ühes veerus on paneel mängupinna KOHAL — pesa peab hoidma ka mitmerealise
       teate ruumi, muidu nihkuks mänguväli täpselt siis, kui laps lohistab või
       sihib (mõõdetud: ilma reservita kukkusid 360 px juures läbi „Kindel käsi",
       „Aknad" ja „Teksti valimine"). */
    .at-feedback-slot { min-height: 4.9rem; }

    /* Ühes veerus on juhis mängupinna KOHAL, mitte kõrval. Täispikk
       kontrollnimekiri lükkab mänguvälja siis ekraanilt välja — mõõdetud
       390x664: „Kopeeri ja kleebi" paneel 601 px, mängupinda näha 0%.
       Telefonis on korraga näha ainult käimasolev samm; „mitu on tehtud"
       ütleb loendur paneeli ülaosas. */
    .at-goal.is-steps .at-goal-step.is-done,
    .at-goal.is-steps .at-goal-step.is-later { display: none; }

    /* Tagasi-link ja loendur ühele reale — kaks eraldi rida maksavad
       telefoniekraanil ~36 px, mis tuleb otse mängupinna arvelt. */
    .at-panel {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: .75rem;
    }
    .at-back { grid-column: 1; grid-row: 1; min-height: 36px; }
    .at-steps { grid-column: 2; grid-row: 1; justify-self: end; }
    .at-panel-head,
    .at-goal,
    .at-feedback-slot,
    .at-keys { grid-column: 1 / -1; }
}

/* ---------- mobiil ---------- */

@media (max-width: 640px) {
    .section.at-section { padding: .85rem 1rem 1rem; }
    .at-tracks { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    /* Kaardipakk läheb telefonis KÕRVUTI paigutusse: pildiriba vasakule
       ribana, sisu paremale. Püsti kaardid teeksid avalehest kolm ekraanitäit. */
    .at-track { flex-direction: row; align-items: stretch; }
    .at-track-art { height: auto; width: 80px; flex: 0 0 auto; font-size: 2rem; }
    .at-track-body { flex: 1 1 auto; min-width: 0; padding: .8rem .9rem; gap: .45rem; }
    .at-track-label { font-size: 1.1rem; }
    .at-levels { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .7rem; }
    .at-level { min-height: 140px; gap: .6rem; }
    .at-level-art { font-size: 2rem; }
    .at-level-label { font-size: .92rem; }
    .at-level.is-cur .at-level-art { width: 52px; height: 52px; font-size: 1.5rem; }
    .at-trackhead-icon { width: 46px; height: 46px; font-size: 1.2rem; }
    .at-panel { padding: .9rem; gap: .6rem; }
    .at-icongrid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .75rem; gap: .5rem; }
    .at-icon-art { font-size: 2rem; }
    /* Veergude arvu EI muudeta (vt .at-selgrid kommentaari) — clamp'i alampiir
       4 x 64 px + vahed mahub 360 px ekraanile. */
    .at-selboard { padding: .6rem; }
    /* Kõrvuti paar ei mahu 360 px peale — lähtetekst ja sihtväli üksteise alla. */
    .at-row.is-pair { flex-direction: column; }
    .at-sheet { padding: .7rem; gap: .8rem; }
    .at-dragwrap { padding: .85rem; gap: .85rem; }
    .at-shape { width: 52px; height: 52px; font-size: 1.3rem; }
    .at-slot { min-width: 78px; min-height: 80px; }
    .at-fm-pane { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); padding: .7rem; }
    .at-fm-art { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .at-track, .at-level, .at-bubble, .at-target { transition: none; }
}