/*
 * REKISTERÖINNIN TURVATARKISTUS AYE MATEYN TYYLIIN (13.10.2026).
 *
 * Käyttäjä: tumman kortin keskellä vaalea, englanninkielinen Cloudflare-
 * laatikko on ruma. Cloudflare sallii widgetille vain render-asetukset
 * (teema, kieli, koko; ks. TurnstileChallengeController), ja ne asetetaan
 * Register::challengeUrl()issa: tumma, sivun kieli, joustava. Iframen
 * SISÄLTÖ on Cloudflaren, eikä siihen kosketa. Tämä tiedosto tyylittää vain
 * kehyksen ympäristön: kääre joka näyttää lomakkeen kentältä (sama kulma,
 * reunus ja pinta kuin .fi-input-wrp:llä login-contrast.css:ssä).
 *
 * ⚠️ WIDGETTIÄ EI PIILOTETA, PEITETÄ EIKÄ LEIKATA. Kääre on kehyksen
 * ympärillä, ei päällä: ei overflow-leikkausta, ei pseudoelementtejä, ei
 * pinoamista, ei läpinäkyvyyttä (lukko: RegistrationBotProtectionTest::
 * kaare_ei_leikkaa_eika_peita_widgettia). Kehys on aina vähintään
 * Cloudflaren joustavan koon minimin levyinen (300 px) ja widgetin korkuinen
 * (65 px).
 *
 * NÄKYVYYS (päivitetty 13.10.2026, widget Invisible-tilassa): solu on
 * näkymän ulkopuolella, kunnes Cloudflare pyytää vuorovaikutusta tai
 * haaste epäonnistuu (`data-am-nakyvissa`). Kenttätyylinen kääre ja kehys
 * piirtyvät vain vuorovaikutuksessa (`data-am-haaste`, Managed-tilan
 * varalle); virheessä näkyy pelkkä oma viesti, eikä kehys vie tilaa.
 * Invisible-tilassa Cloudflare ei näytä kehyksessä mitään, joten sen
 * siirtäminen pois näkyvistä ei piilota widgettiä kävijältä.
 *
 * Oma tiedosto eikä inline-tyyli: /app:n CSP (`style-src 'self'
 * 'unsafe-inline'`) sallisi molemmat, mutta tiedosto välimuistiin ja
 * style-attribuutit pois haasteen osista.
 */

[data-am-bottisuoja] {
    container-type: inline-size;
}

.am-turvatarkistus {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.am-turvatarkistus[data-am-haaste] {
    padding: 8px;
    border: 1px solid #6b8bb0;
    border-radius: 12px;
    background: #0f2740;
}

.am-turvatarkistus-kehys {
    display: block;
    width: 100%;
    min-width: 300px;
    height: 65px;
    border: 0;
    background: transparent;
}

/* Ei vuorovaikutusta: kehys ei vie tilaa (sama sijoittelu kuin piilotetulla
   solulla ja widgetin api.ts HOSTED_FRAME_HIDDEN). Absoluuttinen lapsi ei
   osallistu flex-asetteluun, joten viestin ympärille ei jää rakoa. */
.am-turvatarkistus:not([data-am-haaste]) .am-turvatarkistus-kehys {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 300px;
}

/*
 * KAPEA LOMAKE (puhelin): kenttien leveys 375 px:n näytöllä on ~273 px, eli
 * alle Cloudflaren minimin. Reunusta ja täytettä ei silloin piirretä, ja
 * kehys keskitetään 300 px:n levyisenä kortin sisäreunuksen puolelle — muuten
 * Cloudflare leikkautuisi. 318 px = 300 + 2 × 8 px täyte + 2 × 1 px reunus.
 */
@container (max-width: 317.98px) {
    .am-turvatarkistus[data-am-haaste] {
        padding: 0;
        border: 0;
        background: transparent;
        margin-inline: calc((100% - 300px) / 2);
    }
}

/*
 * VIRHEVIESTI AYE MATEYN TYYLIIN: sama 12 px kulma kuin kentillä, korallin
 * sävyinen reunus ja pinta (CTA-väri #e85c4a), kerma teksti #f3eee2 ja
 * "Yritä uudelleen" samalla korallilla kuin kortin linkit (#f08a78,
 * login-contrast.css). Ei punaista hälytystä: kävijä ei tehnyt virhettä.
 */
.am-turvatarkistus-virhe {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(240, 138, 120, 0.55);
    border-radius: 12px;
    background: rgba(232, 92, 74, 0.12);
    color: #f3eee2;
    font-size: 14px;
    line-height: 1.5;
}

.am-turvatarkistus-virhe button {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #f08a78;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.am-turvatarkistus-virhe button:focus-visible {
    outline: 2px solid #f08a78;
    outline-offset: 2px;
    border-radius: 4px;
}