/**
 * Vahvistusdialogi (AlertDialog) — ilme v2
 * ========================================
 * Sovelluksen ainoa vahvistus- ja ilmoitusikkuna: `alert()`, `confirm()` ja
 * `prompt()` on kielletty (CLAUDE.md), joten tämä pinta näkyy joka osiossa.
 * Siksi se on myös se komponentti jonka vanha asu näkyi kaikkialla: lasireunat,
 * kulta- ja siniaksentit, neljä päällekkäistä varjoa ja 13 erillistä
 * teemakohtaista sääntöä.
 *
 * Nyt: paperia sivun päällä (STYLEGUIDE §11.12). Peite on `--scrim` ilman
 * blurria, paneeli `--paper` + 1 px `--line` + `--page-shadow`.
 *
 * Kaksi asiaa jotka on helppo tehdä väärin tässä komponentissa:
 *
 * 1. **Tuhoava toiminto ei saa punaista painiketta.** Ensisijainen painike on
 *    aina `--ink` (§11 taulukko, esto 1). Huomion kantaa sana ("Poista") ja
 *    tyyppimerkki, ei nappi. Punainen nappi tekisi väristä toiminnon
 *    korostuksen, ja silloin ruoste ei enää tarkoita huomiota.
 * 2. **Tyyppi ei ole väripallo.** Vanha versio piirsi ikonin värillisen
 *    ympyrän sisään — se on pilleri (esto 3). Ikoni on nyt pelkkä merkki joka
 *    perii semanttisen värin: ruoste = huomio, vihreä = vahvistus, muu muste.
 *
 * Teemakohtaisia sääntöjä ei ole yhtään: jos komponentti tarvitsee niitä,
 * se käyttää väriä väärin (esto 7).
 *
 * Järjestys: 1 layout · 2 typografia · 3 väri · 4 tilat · 5 hover ja fokus
 * 6 media · 7 prefers-reduced-motion (§16.2)
 */

/* ==========================================
   PEITE
   ========================================== */
.alert-dialog-overlay{
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast);
}
.alert-dialog-overlay.open{
    opacity: 1;
    visibility: visible;
}

/* ==========================================
   PAPERI
   ========================================== */
.alert-dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: calc(var(--z-modal) + 1);
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: calc(100vw - var(--space-8));
    max-height: calc(100dvh - var(--space-12));
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    box-shadow: var(--page-shadow);
    opacity: 0;
    visibility: hidden;
    /* Keskitys on `transform`, sisääntulo `translate` — kaksi eri
       ominaisuutta, jotta 3 px:n nousu ei kumoa keskitystä. */
    transform: translate(-50%, -50%);
    translate: 0 -3px;
    transition: opacity var(--t-fast) var(--ease),
                translate var(--t-fast) var(--ease),
                visibility var(--t-fast);
}
.alert-dialog.open{
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

/* ==========================================
   OTSIKKO
   ========================================== */
.alert-dialog-header{
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
}
.alert-dialog-icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 22px;
    font-size: 14px;
    /* Oletus on hiljainen: tyypin kertoo otsikko, väri vain silloin kun
       tyypillä on semantiikka (huomio tai vahvistus). */
    color: var(--ink-3);
}
.alert-dialog-title{
    flex: 1;
    min-width: 0;
    margin: 0;
    font: 500 15px/1.45 var(--sans);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
}

/* ==========================================
   VIESTI
   ========================================== */
.alert-dialog-body{
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.alert-dialog-message{
    margin: 0;
    font: 400 13.5px/1.6 var(--sans);
    color: var(--ink-2);
}
.alert-dialog-message strong,
.alert-dialog-message b{
    font-weight: 500;
    color: var(--ink);
}

/* ==========================================
   SYÖTE (prompt-variantti)
   ========================================== */
.alert-dialog-input{
    width: 100%;
    min-height: 36px;
    margin-top: var(--space-3);
    padding: 8px var(--space-3);
    background: var(--wash);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-field);
    font: 400 14px var(--sans);
    color: var(--ink);
    outline: none;
    transition: border-color var(--t-fast) var(--ease);
}
.alert-dialog-input::placeholder{
    color: var(--ink-3);
}

/* ==========================================
   JALKARIVI
   ========================================== */
.alert-dialog-footer{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--line);
}
.alert-dialog-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-field);
    font: 500 13px var(--sans);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.alert-dialog-btn:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}

/* Ensisijainen on muste — myös silloin kun toiminto on tuhoava. */
.alert-dialog-btn--primary{
    background: var(--ink);
    border: 0;
    color: var(--paper);
}

/* Toissijainen on `.btn.sec`n kaava: valkoinen pinta, hiusviivareuna. */
.alert-dialog-btn--secondary{
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

/* ==========================================
   TYYPIT · väri vain silloin kun se tarkoittaa jotain
   ========================================== */
.alert-dialog--warning .alert-dialog-icon,
.alert-dialog--danger .alert-dialog-icon,
.alert-dialog--error .alert-dialog-icon{
    color: var(--rust-deep);
}
.alert-dialog--success .alert-dialog-icon{
    color: var(--green-deep);
}
.alert-dialog--info .alert-dialog-icon,
.alert-dialog--lock .alert-dialog-icon{
    color: var(--ink-3);
}

/* ==========================================
   HOVER JA FOKUS
   ========================================== */
.alert-dialog-btn--primary:hover:not(:disabled){
    background: var(--btn-hover);
}
.alert-dialog-btn--secondary:hover:not(:disabled){
    background: var(--wash);
    border-color: var(--ink-3);
    color: var(--ink);
}
.alert-dialog-input:hover{
    border-color: var(--ink-3);
}
.alert-dialog-input:focus{
    border-color: var(--ink-3);
}
.alert-dialog-btn:focus-visible,
.alert-dialog-input:focus-visible{
    outline: 2px solid var(--green);
    outline-offset: 3px;
}
.alert-dialog-input:focus-visible{
    outline-offset: 1px;
}

/* ==========================================
   VIRHEHUOMIO
   ==========================================
   Tyhjä pakollinen kenttä: dialogi nykäisee kerran. Liike on pieni ja
   vaakasuuntainen — se ei nosta eikä skaalaa, ja se sammuu kokonaan
   `prefers-reduced-motion`illa. */
@keyframes alert-dialog-nyt{
    0%, 100% { transform: translate(-50%, -50%); }
    25%      { transform: translate(calc(-50% - 4px), -50%); }
    75%      { transform: translate(calc(-50% + 4px), -50%); }
}
.alert-dialog.shake{
    animation: alert-dialog-nyt 220ms var(--ease);
}

/* ==========================================
   MEDIA
   ========================================== */
@media (max-width: 480px){
    .alert-dialog{
        width: calc(100vw - var(--space-4));
        max-width: none;
    }
}

/* ==========================================
   PREFERS-REDUCED-MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce){
    .alert-dialog-overlay,
    .alert-dialog,
    .alert-dialog-btn,
    .alert-dialog-input{
        transition: none;
    }
    .alert-dialog{
        translate: none;
    }
    .alert-dialog.shake{
        animation: none;
    }
}