/* Kaardipaki tulemusevaade — jagatud slaid (valikuvurr + klassitahvli Valija).
   Vt js/kaardipakk.js. Klassid on kp-* prefiksiga, et need ei sõltuks
   kummagi rakenduse omast stiililehest. */


/* ============================================================
   Valmispaki tulemusevaade — SLAID
   Vurritatud tegevus katab ekraani ja on ehitatud esitlusslaidina, mitte
   dialoogikaardina: taust kategooria värvi tumedas variandis, juhend on lehe
   suurim element. Mõte on loetavus klassi tagumisse pinki.
   ============================================================ */

.kp-slaid {
    --kp-kat: #00d1b2;
    --kp-kat-tume: #161d2b;
    --kp-kat-hele: rgba(255, 255, 255, 0.85);
    position: fixed;
    inset: 0;
    /* Kihi määrab hostrakendus: valikuvurris piisab 60-st, klassitahvlil on
       vidinad ja tööriistaribad kõrgemal. Toastid peavad jääma peale. */
    z-index: var(--kp-slaid-z, 60);
    display: none;
    background: var(--kp-kat-tume);
    color: #fff;
}
/* Slaid katab kogu ekraani, seega hüppab ta ilma üleminekuta ette liiga järsult.
   Kaks lühikest liigutust: taust tuleb sisse ja sisu tõuseb pisut. Väljumine
   jääb hetkeliseks — "Vurrita uuesti" sulgeb ja avab kohe uuesti, sinna vahele
   animatsioon ainult venitaks. */
.kp-slaid.is-avatud {
    display: block;
    animation: kpSlaidSisse 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kp-slaid.is-avatud .kp-slaid-sisu {
    animation: kpSisuSisse 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes kpSlaidSisse {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes kpSisuSisse {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

.kp-slaid-sisu {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(16px, 3vh, 34px) clamp(18px, 4vw, 56px) clamp(30px, 5vh, 54px);
    overflow-y: auto;
}

.kp-slaid-pais {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
}
.kp-slaid-silt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kp-kat-hele);
}
.kp-slaid-silt::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--kp-kat);
}
.kp-slaid-x {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 10px 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
    .kp-slaid-x:hover { background: rgba(255, 255, 255, 0.24); }
}
.kp-slaid-x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Pealkiri ja juhend on slaidi mõte — need saavad kogu vaba ruumi ja
   seisavad päise ning jaluse vahel optiliselt keskel */
.kp-slaid-keha {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.kp-slaid-pealkiri {
    flex: none;
    margin: 0 0 clamp(10px, 2vh, 20px);
    font-size: clamp(2rem, 5.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}
.kp-slaid-juhend {
    flex: none;
    margin: 0;
    font-size: clamp(1.2rem, 2.7vw, 2.5rem);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
}
.kp-slaid-eesmark {
    flex: none;
    margin: clamp(14px, 3vh, 30px) 0 0;
    padding-left: 14px;
    border-left: 3px solid var(--kp-kat);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

/* Jalus: loendur ja juhtnupud kõrvuti */
.kp-slaid-jalg {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: clamp(18px, 4vh, 40px);
}
.kp-slaid-kell {
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.kp-slaid.is-valmis .kp-slaid-kell { color: #7ef2ab; }

.kp-slaid-nupud { display: flex; flex-wrap: wrap; gap: 10px; }
.kp-slaid-nupp {
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    font-weight: 600;
    padding: 0.7em 1.4em;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
    .kp-slaid-nupp:hover { background: rgba(255, 255, 255, 0.16); }
}
.kp-slaid-nupp.is-esmane {
    background: #fff;
    border-color: #fff;
    color: var(--kp-kat-tume);
    min-width: 8.5em;
}
@media (hover: hover) {
    .kp-slaid-nupp.is-esmane:hover { background: rgba(255, 255, 255, 0.86); }
}
.kp-slaid-nupp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Edenemisriba on loenduri all ja jäme — seda peab nägema saali tagumisest
   reast. Ekraani alaservas peenikese joonena see ei töötanud. */
.kp-slaid-riba {
    flex: none;
    margin-top: clamp(12px, 2.4vh, 22px);
    height: clamp(20px, 2.8vh, 30px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.kp-slaid-taide {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--kp-kat);
    box-shadow: 0 0 18px var(--kp-kat-hele);
    /* Laiust juhib JS kaadri kaupa (requestAnimationFrame), mitte CSS-üleminek —
       muidu jääks riba kuvatud sekunditest ühe sekundi jagu maha */
}
.kp-slaid.is-valmis .kp-slaid-taide {
    background: #7ef2ab;
    box-shadow: 0 0 18px rgba(126, 242, 171, 0.7);
}

/* Madal ekraan (nt sülearvuti 150% skaalaga): kärbi vahed, hoia tekst suur */
@media (max-height: 620px) {
    .kp-slaid-pealkiri { margin-bottom: 8px; font-size: clamp(1.7rem, 4.2vw, 2.6rem); }
    .kp-slaid-juhend { font-size: clamp(1.05rem, 2vw, 1.5rem); }
    .kp-slaid-kell { font-size: clamp(2.4rem, 6vw, 4rem); }
    .kp-slaid-jalg { margin-top: 16px; }
    .kp-slaid-riba { height: 16px; margin-top: 10px; }
}

@media (max-width: 620px) {
    .kp-slaid-jalg { justify-content: center; text-align: center; }
    .kp-slaid-nupud { width: 100%; }
    .kp-slaid-nupp { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .kp-slaid-nupp, .kp-slaid-x { transition: none; }
    .kp-slaid.is-avatud,
    .kp-slaid.is-avatud .kp-slaid-sisu { animation: none; }
}

/* Slaidi juhtnupud (täisekraan + sulge) */
.kp-slaid-juht { display: flex; align-items: center; gap: 8px; }
.kp-slaid-fs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.kp-slaid-fs .kp-slaid-fs-tekst { line-height: 1; }
@media (max-width: 620px) {
    .kp-slaid-fs .kp-slaid-fs-tekst { display: none; }
}


/* Ekraanilugeja-tekst (slaidi olekuteade) — rakendustel on oma variandid,
   aga see fail peab olema iseseisev. */
.kp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Kaardipaki redaktor — jagatud dialoog (js/kaardipakk-redaktor.js)
   Iseseisev: ei sõltu Bulmast ega kummagi hostrakenduse stiililehest,
   sest klassitahvel ja valikuvurr on eri komponendipagasiga.
   ============================================================ */

.kp-redaktor {
    position: fixed;
    inset: 0;
    z-index: var(--kp-redaktor-z, 70);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.kp-redaktor.is-avatud { display: flex; }
.kp-redaktor-taust {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 24, 0.55);
    backdrop-filter: blur(3px);
}
.kp-redaktor-kaart {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #363636);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.kp-redaktor-pais {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light, #ededed);
}
.kp-redaktor-pealkiri { margin: 0; font-size: 1.15rem; font-weight: 700; }
.kp-redaktor-x {
    border: 0;
    background: transparent;
    color: var(--text-muted, #6b6b6b);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 8px;
    cursor: pointer;
}
@media (hover: hover) { .kp-redaktor-x:hover { background: rgba(0, 0, 0, 0.07); } }

.kp-redaktor-keha { padding: 16px 18px; overflow-y: auto; }
.kp-redaktor-jalg {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-light, #ededed);
}
.kp-redaktor-riba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.kp-vali { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.kp-vali-rida { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kp-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6b6b);
}
.kp-input {
    font: inherit;
    font-size: 0.95rem;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 9px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #363636);
}
.kp-input:focus-visible { outline: 2px solid var(--accent-color, #00d1b2); outline-offset: 1px; }
textarea.kp-input { resize: vertical; min-height: 68px; }

.kp-arv {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kp-nupp {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 15px;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 9px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #363636);
    cursor: pointer;
}
.kp-nupp.is-esmane {
    background: var(--accent-color, #00d1b2);
    border-color: transparent;
    color: #fff;
}
.kp-nupp:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .kp-nupp:hover { filter: brightness(0.96); } }
.kp-nupp:focus-visible { outline: 3px solid var(--accent-color, #00d1b2); outline-offset: 2px; }

.kp-kaardilist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}
.kp-kaardilist-tyhi {
    margin: 0;
    padding: 18px 0;
    text-align: center;
    color: var(--text-muted, #6b6b6b);
    font-size: 0.9rem;
}
.kp-kaardirida {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-light, #ededed);
    border-radius: 10px;
}
.kp-kaardirida-varv { flex: none; width: 5px; align-self: stretch; min-height: 30px; border-radius: 3px; }
.kp-kaardirida-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kp-kaardirida-nimi {
    font-weight: 600;
    font-size: 0.93rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kp-kaardirida-meta { font-size: 0.76rem; color: var(--text-muted, #6b6b6b); }
.kp-ikoonnupp {
    flex: none;
    width: 2.2em;
    height: 2.2em;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #4a4a4a);
    cursor: pointer;
}
.kp-ikoonnupp.is-ohtlik { color: #d64545; border-color: #e8a1a1; }
@media (hover: hover) { .kp-ikoonnupp:hover { filter: brightness(0.95); } }

.kp-kaardivorm {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border-color, #dbdbdb);
    border-radius: 12px;
    background: var(--bg-hover, #f7f7f9);
}
.kp-kaardivorm[hidden] { display: none !important; }
.kp-redaktor-nupud { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 620px) {
    .kp-vali-rida { grid-template-columns: 1fr; }
    .kp-kaardilist { max-height: 240px; }
}