/* ==========================================================================
   Evästesuostumus — laatikko, heron portti ja evästeselosteen taulukko.
   Käyttää sivuston omia tokeneita (main.css :root) — ei omia värivakioita,
   jotta brändin muuttuessa tämä seuraa mukana.
   ========================================================================== */

/* --- Laatikko ------------------------------------------------------------ */

.am-consent{
  /* SUOSTUMUSLAATIKKO ON YLIMPANA — YKSI YLI WIDGETIN.

     Oli 9000. Kun #ayematey-widget-root sai oman kerroksen
     (main.css, z-index 2147483000 stacking context -loukun korjaamiseksi),
     koko widget nousi taman ylle: mobiilissa paneeli on lahes taysleveä ja
     laatikko on taysleveä alareunassa, eli paneeli olisi peittanyt sen.

     Suostumuspinta ei saa olla peitettavissa — se on pinta jolla kavija
     kaskee mita saa tehda, ja jos se jaa widgetin alle, valinnan tekeminen
     estyy. Siksi tama on nimenomaisesti yksi yli widgetin eika sen alla.

     HUOM: paneelin OMA z-index on 2147483000 jo ilman juuren kerrosta, eli
     se ylitti 9000:n jo ennen tata muutosta. Tama ei siis ole uusi ongelma
     vaan vanha joka tuli nakyviin — ja nyt korjattu. */
  position:fixed; z-index:2147483001; left:0; bottom:0;
  padding:clamp(12px,2.4vw,22px);
  max-width:min(430px,100vw);
}
.am-consent[hidden]{display:none}

.am-consent__card{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hair); border-radius:14px;
  padding:clamp(16px,2.4vw,20px);
  box-shadow:0 2px 4px rgba(20,48,77,.04), 0 12px 32px rgba(20,48,77,.13);
  opacity:0; transform:translateY(10px);
  transition:opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.am-consent.is-in .am-consent__card{opacity:1; transform:none}

.am-consent__title{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  line-height:1.2; margin:0 0 6px;
}
.am-consent__text{
  font-size:var(--fs-sm); line-height:1.55; color:var(--text-2);
  margin:0 0 14px;
}
.am-consent__link{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.am-consent__link:hover{color:var(--coral)}

/* Painikkeet: hyväksy ja hylkää ovat SAMANKOKOISET ja samalla rivillä.
   Yhdenvertainen näkyvyys on suostumuksen pätevyyden ehto — hylkäystä ei
   piiloteta linkiksi eikä toiseen näkymään. */
.am-consent__actions{display:flex; flex-wrap:wrap; gap:8px}
.am-consent__btn{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;
  line-height:1; padding:11px 14px; border-radius:9px; cursor:pointer;
  border:1px solid transparent; transition:background .18s, border-color .18s, color .18s;
}
.am-consent__btn--accept{background:var(--coral); color:#fff}
.am-consent__btn--accept:hover{background:#d94f3e}
.am-consent__btn--reject{background:transparent; color:var(--ink); border-color:var(--hair)}
.am-consent__btn--reject:hover{border-color:var(--ink); background:rgba(20,48,77,.04)}
.am-consent__btn--save{background:var(--ink); color:var(--night-ink); flex-basis:100%}
.am-consent__btn--save:hover{background:var(--night-2)}
.am-consent__btn:focus-visible{outline:2px solid var(--coral); outline-offset:2px}

.am-consent__toggle{
  display:inline-block; margin-top:10px; padding:0; border:0; background:none;
  font-family:var(--font-body); font-size:var(--fs-xs); color:var(--muted);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.am-consent__toggle:hover{color:var(--ink)}
.am-consent__toggle:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:3px}

/* --- Asetukset (laajenee paikalleen) ------------------------------------- */

.am-consent__opts{
  margin:0 0 14px; padding-top:12px; border-top:1px solid var(--hair-soft);
  display:grid; gap:12px;
}
.am-consent__opts[hidden]{display:none}

.am-consent__opt{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.am-consent__opt.is-locked{cursor:default}
.am-consent__opt input{
  margin:2px 0 0; width:16px; height:16px; flex:none; accent-color:var(--coral); cursor:inherit;
}
.am-consent__opt-title{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-sm); font-weight:600; line-height:1.3;
}
.am-consent__opt-desc{
  display:block; margin-top:3px;
  font-size:var(--fs-xs); line-height:1.5; color:var(--muted);
}
.am-consent__always{
  font-family:var(--font-label); font-size:10px; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--hair); border-radius:999px; padding:2px 7px;
}

@media (max-width:560px){
  .am-consent{max-width:100vw; padding:10px}
  .am-consent__btn{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .am-consent__card{transition:none; opacity:1; transform:none}
}

/* --- Heron portti --------------------------------------------------------
   Oletustila on portti näkyvissä ja widget piilossa. <html>-luokka
   am-chat-active (head asettaa sen am_chat_active-muistista, consent.js
   keskustelun alkaessa) + am-widget-ready kääntävät tilan — oikea näkymä
   maalautuu ensimmäisellä framella ilman välähdystä. Chat EI ole
   suostumusasia (asiakkaan päätös 2026-09-01): lippu on toiminnallinen
   muisti keskustelun jatkumista varten. */

.hero__chat{display:none}
/* Sama flex-käyttäytyminen kuin .hero__ask:lla, jotta portti vie riviltä
   täsmälleen saman tilan kuin oikea syötekenttä. width:100% olisi väärä
   työkalu flex-kohteelle. */
.hero__chatgate{flex:1 1 auto; min-width:0; display:block}
/* VAIHTO VASTA KUN WIDGET ON RENDEROITYNYT, ei kun suostumus annettiin.
   am-widget-ready tulee consent.js:n MutationObserverista. Ilman tata portti
   katosi samalla framella kun luokka vaihtui, mutta widget oli vasta
   latautumassa verkosta — valissa nakyi tyhja laatikko. */
html.am-chat-active.am-widget-ready .hero__chat{display:block}
html.am-chat-active.am-widget-ready .hero__chatgate{display:none}
/* Selite on .hero__actionrow'n ulkopuolella, joten se ei kasvata rivin
   korkeutta.

   SE EI PIILOUDU SUOSTUMUKSEN JÄLKEEN. Tässä oli aiemmin
   `html.am-consent-assistant .hero__chatgate-note{display:none}`, jolloin
   teksti katosi juuri sillä hetkellä kun portti vaihtui widgetiksi — eli
   kävijä menetti sekä tiedon tunnisteesta että linkin evästeselosteeseen
   heti kun ne olivat ajankohtaisia. Selite on pysyvä ja samassa paikassa
   molemmissa tiloissa. Älä lisää tuota sääntöä takaisin. */

/* PORTIN ULKOASU = WIDGETIN ULKOASU.

   Portti kantaa luokat .hero__ask ja .hero__ask-send, eli se saa reunuksen,
   pyoristyksen, taustan, gapin, paddingin ja coral-varjon SUORAAN main.css:n
   .hero__ask-saannosta. Se on mitattu arvo arvolta samaksi kuin widgetin
   .am-inputrow (border 1.5px solid, radius 14px, padding 7px 7px 7px 20px,
   gap 8px, box-shadow 6px 6px 0 rgba(207,69,55,.28), lahetysnappi 52x48
   radius 10px). Arvoja ei toisteta tassa tiedostossa, jotta ne eivat voi
   ajautua erilleen jos brandia myohemmin saadetaan.

   Alla on siis VAIN se mita <button> tarvitsee paalle: selaimen omien
   nappioletusten nollaus ja kaksi eroa (kohdistin + placeholder-vari). */
.hero__chatgate-btn{
  width:100%; cursor:pointer; text-align:left;
  font-family:inherit;                 /* <button> ei peri fonttia itsestaan */
  -webkit-appearance:none; appearance:none;
}
/* Portin teksti on placeholderia, ei kirjoitettua sisaltoa — sama vari kuin
   widgetin ::placeholderilla (mitattu rgb(77,106,132) = var(--muted)).

   FONTTI ON WIDGETIN, EI SIVUSTON. Tama on ainoa kohta jossa portti poikkeaa
   sivuston typografiasta, ja se on tahallista: widget piirtaa oman
   placeholderinsa omalla pinolla, ja mitattuna se oli AINOA ero portin ja
   widgetin valilla (kaikki muu — 17px/500/normal/9px 0/vari/korkeus 38 —
   tasmasi jo). Work Sansin metriikat eroavat jarjestelmafontista, joten
   teksti muutti kokoa ja paikkaa tilavaihdossa. Pino on kopioitu widgetin
   .am-input-kentasta sellaisenaan. */
.hero__chatgate-label{
  color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:-apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
}
/* Widgetin .am-mic: 32x32 pyorea, ikoni 18px, vari var(--muted). */
.hero__chatgate-mic{
  flex:none; display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; color:var(--muted);
}
/* Widgetin lahetysnappi kayttaa nuolimerkkia 16px/1 — .hero__ask-send antaa
   mitat ja varit, tama vain merkin koon. */
.hero__chatgate-send{font-size:16px; line-height:1}
.hero__chatgate-btn:focus-visible{outline:2px solid var(--coral); outline-offset:2px}

/* KORKEUDEN LUKITUS — 3px:n nytkahdyksen poisto.
   Molemmat laskevat luonnostaan samaan: 1.5+7 + 48 + 7+1.5 = 65px. min-height
   on varmistus siita etta rivi ei kutistu jos widgetin sisalto vaihtuu
   latauksen aikana, eika se voi kasvattaa mitaan (65 on jo luonnollinen
   korkeus). Kiintea height olisi vaara: se katkaisisi widgetin kun keskustelu
   laajenee heron sisaan ja rivi saa kasvaa. */
.hero__chatgate-btn,
.hero__chat,
.hero__actionrow{min-height:65px}
/* Hienovarainen: 12px ja vaimennettu väri. Tämä on lakisääteinen selite,
   ei myyntiviesti — sen ei pidä kilpailla otsikon ja CTA:n kanssa.
   max-width mitoitettu niin että teksti mahtuu työpöydällä YHDELLE riville:
   kaksirivisenä se ylsi chartsheetin keskipystyviivan ja reittipisteen
   päälle. margin-bottom jättää selkeän välin niiden alle. */
.hero__chatgate-note{
  max-width:640px; margin:12px auto 28px; text-align:center;
  font-size:12px; line-height:1.5; color:var(--faint);
  text-wrap:balance;
}
/* Kapeilla ruuduilla rivitys on väistämätön ja täysin kunnossa — siellä
   chartsheetin apuviivat eivät ole näkyvissä samalla tavalla. */
@media (max-width:680px){
  .hero__chatgate-note{max-width:none; margin-bottom:20px}
}

/* --- Kaksirivinen vihjeteksti mobiilissa ---------------------------------

   Mobiilissa vihjeteksti ei mahdu yhdelle riville: mitattuna 430px:lla
   teksti vaatii 342px ja vapaata tilaa on 263px (390 - 20 vasen padding
   - 7 oikea - 52 nappi - 32 mikki - 2x8 gap). Se leikkautui kesken sanan.

   KAKSI ERI TOTEUTUSTA, SAMA LOPPUTULOS — pakon sanelemana:
   - Portti on oma elementtini, joten sen teksti rivittyy suoraan.
   - Widgetin kentta on <input>, ja <input>:n placeholder EI RIVITY
     millaan tempulla — se on selaimen kiintea kayttaytyminen. Siksi
     natiivi placeholder tehdaan lapinakyvaksi ja teksti piirretaan
     ::after-overlayna rivin paalle. :has(:placeholder-shown) huolehtii
     siita etta overlay katoaa heti ensimmaisesta merkista, eli se
     kayttaytyy tasmalleen kuten placeholder.

   KORKEUS EI MUUTU KUMMASSAKAAN. 2 rivia x 17px x 1.35 = 46px, ja rivin
   sisakorkeus on jo 48px (lahetysnappi). Pilleri pysyy 65px:ssa, ikonit
   pysyvat paikallaan ja aiemmin korjattu tilavaihdon nytkahdyksettomyys
   sailyy. Siksi labelin pystypadding nollataan: .hero__ask-inputin
   9px+9px olisi tyontanyt 46px:n yli 48px:n ja kasvattanut pilleria. */
@media (max-width:680px){
  /* Portti: oikeaa tekstia, rivittyy itse. */
  .hero__chatgate-label{
    white-space:normal; padding-top:0; padding-bottom:0;
    line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Widget: natiivi placeholder pois nakyvista, overlay tilalle. Ilman tata
     teksti piirtyi KAHTEEN KERTAAN: natiivi katkaistu yksirivinen versio
     overlayn paalle (todennettu kuvakaappauksella).

     !important on tassa perusteltu eika oikominen. Widget injektoi oman
     <style>-lohkonsa dokumenttiin meidan jalkeen (.hero__chat sisaan), ja
     sen saanto on .am-input::placeholder{color:#94a3b8}. Mitattuna edes
     korkeampi spesifisyys (html .hero__chat .am-input = 0,2,1 vs. 0,1,1)
     ei riittanut normaalipainolla — vain !important kaantoi arvon
     (rgba(0,0,0,0)). Kyse on kolmannen osapuolen tyylista jonka
     latausjarjestykseen ja spesifisyyteen meilla ei ole vaikutusvaltaa. */
  html .hero__chat .am-inputrow{position:relative}
  html .hero__chat .am-input::placeholder{color:transparent !important}
  html .hero__chat .am-inputrow:has(.am-input:placeholder-shown)::after{
    content:var(--am-hero-ph, '');
    position:absolute; pointer-events:none;
    /* Vasen: rivin padding-left. Oikea: padding 7 + nappi 52 + gap 8
       + mikki 32 + gap 8 = 107 — eli overlay loppuu tasan ikonien eteen. */
    left:20px; right:107px; top:50%; transform:translateY(-50%);
    font-family:-apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
    font-size:17px; font-weight:500; line-height:1.35; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
/* Sanamuodon vaihto. Kytkin on am-chat-active (kavija on ALOITTANUT
   keskustelun) — ei am-consent-decided, joka on tosi myos pelkan
   analytiikkapaatoksen jalkeen jolloin keskustelua ei valttamatta ole. */
.hero__chatgate-note--post{display:none}
html.am-chat-active .hero__chatgate-note--pre{display:none}
html.am-chat-active .hero__chatgate-note--post{display:inline}

.hero__chatgate-note a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.hero__chatgate-note a:hover{color:var(--coral)}

/* --- Kulmaportti: kelluva avausnappi ennen suostumusta -------------------

   Widgetin oma launcher ei ole olemassa ennen suostumusta (embed.js:ää ei
   ladata), joten heron ohi kelannut kävijä ei päässyt chattiin mistään.
   Tämä on sama portti kulmassa; ks. functions.php:n perustelu.

   NÄKYVYYDEN EHTO ON am-widget-ready, EI am-consent-assistant.

   MITATTU VIKA (tuotannosta, framen tarkkuudella): ehto oli
   :not(.am-consent-assistant), joka kääntyy SAMALLA framella kun kävijä
   klikkaa — mutta widget latautuu verkosta vasta sen jälkeen. Jäljitys:
     0        nappi näkyy, widget ei ole
     klikki   nappi KATOAA, widget EI OLE VIELÄ
     +300ms   ei nappia, ei widgetiä
     +1.8s    paneeli auki
   Väliin jäi ~1,8 s jossa ruudulla ei ollut mitään — ja hitaalla
   yhteydellä paljon enemmän. Kävijälle se näyttää siltä että nappi vain
   katoaa eikä tee mitään. Tämä on TÄSMÄLLEEN sama vika joka korjattiin
   heron portista am-widget-ready-luokalla; kirjoitin sen tänne uudelleen.

   Sivuvaikutus on hyvä: paluukävijällä nappi näkyy sivun latauksen ajan
   widgetin OMAN launcherin paikalla ja katoaa kun se ilmestyy — eli nurkka
   ei ole tyhjä myöskään silloin. */
.am-corner-gate{
  position:fixed; right:20px; bottom:20px;
  /* Evästelaatikko on z-index 9000 ja vasemmassa alakulmassa. Tämä jää sen
     alle tarkoituksella: jos ne joskus osuvat päällekkäin, suostumuslaatikko
     on se joka ei saa jäädä piiloon. */
  z-index:8900;
  /* 56px = widgetin oman launcherin mitta (mitattu tuotannosta), samoin
     right/bottom 20px. Vaihto ei siis siirrä nappia paikaltaan. */
  width:56px; height:56px; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  /* Vaalea pohja + navy hiusviiva: sama käsittely kuin hahmon kasvoilla
     muualla teemassa, ja kermanvärisellä sivulla se erottuu ilman että
     nurkkaan tulee tumma läiskä. */
  background:var(--paper); color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:0 6px 18px rgba(20,48,77,.22);
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--ease-out), visibility .3s,
             transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* NAYTTOEHTO ON MYONTEINEN LUOKKA, EI KAKSOISKIELTO.

   MITATTU VILKKUMINEN (FOUC): ehto oli
   :not(.am-widget-ready):not(.am-hero-visible). Kumpaakaan luokkaa ei ole
   ennen kuin site.js on ajettu, joten ehto osui HETI ensimmaisella framella
   ja nappi maalautui sivun ylaosaan — ja katosi vasta kun site.js lisasi
   am-hero-visiblen. Todennettu tuotannosta headless-renderilla: nappi nakyi
   oikeassa alakulmassa vaikka hero oli ruudussa.

   Juurisyy on se etta am-hero-visible on OLETUKSENA PAALLA (site.js lisaa
   sen ennen tarkkailijan paatosta), joten sen PUUTTUMINEN tarkoittaa kahta
   eri asiaa: "hero kelattu ohi" tai "js ei ehtinyt". Kaksoiskielto ei voi
   erottaa niita.

   am-hero-passed asetetaan VAIN tarkkailijan paatoksesta (site.js), joten
   ennen js:aa sita ei ole ja perussaannon piilotus jaa voimaan. */
html.am-hero-passed:not(.am-widget-ready) .am-corner-gate{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
}
/* PIILOTA AINA KUN WIDGET ON OLEMASSA — riippumatta luokista.

   MIKSI TÄMÄ ON YLLÄ OLEVAN LISÄKSI eikä sen sijaan. Näkyvyysehto nojaa
   am-widget-ready-luokkaan, jonka consent.js asettaa kun .am-widget
   ilmestyy INLINE-ISÄNNÄN sisään. Se on oikea signaali heron portille,
   mutta kulmanapille se on liian kapea: jos inline-isäntä on sivulla mutta
   inline-widget ei mountaudu (esim. sivukohtainen sääntö estää sen),
   luokkaa ei koskaan aseteta — ja kulmanappi jäisi näkyviin vaikka KELLUVA
   chat olisi auki. Silloin ruudussa on kaksi avausnappia päällekkäin.

   Tämä ehto ei riipu inline-mountista lainkaan: #ayematey-widget-root saa
   lapsia (<style> + .am-widget) heti kun widget latautuu, mitattuna
   tuotannosta. Widgetin olemassaolo on se asia joka tekee kulmanapista
   tarpeettoman, joten ehto on juuri se.

   Spesifisyys kantaa järjestyksen: :has() saa spesifisimmän argumenttinsa
   spesifisyyden, joten id-valitsin nostaa tämän (1,1,1):een kun näyttö on
   (0,3,1). Piilotus voittaa lähdejärjestyksestä riippumatta. */
/* ⚠️ EHTO ON RENDEROITY KAYTTOLIITTYMA, EI "JUURELLA ON LAPSIA".

   Tassa oli :has(#ayematey-widget-root > *), ja se piilotti napin LIIAN
   AIKAISIN. Mitattu DOM: embed luo juureen ENSIN <style>-lapsen ja vasta
   sitten React mounttaa kayttoliittyman. `> *` osui siihen styleen, joten
   nappi katosi jo ennen kuin paneelia oli olemassa — ja valiin jai se tyhja
   aukko jonka asiakas mittasi noin 1,5 sekunniksi.

   Mitatut lopputilat:
     paneeli auki    juuri = <style> + div.am-widget
     paneeli kiinni  juuri = <style> + div > .am-launcher
   Ehto osuu siis nyt VAIN naihin kahteen, eika <style> yksin riita.
   Lataustila (.is-loading) pitaa napin nakyvissa kehan kanssa siihen asti. */
html:has(#ayematey-widget-root .am-widget) .am-corner-gate,
html:has(#ayematey-widget-root .am-launcher) .am-corner-gate{
  opacity:0; visibility:hidden; pointer-events:none;
}

.am-corner-gate:hover{box-shadow:0 8px 22px rgba(20,48,77,.30)}
.am-corner-gate:focus-visible{outline:2px solid var(--coral); outline-offset:3px}

/* Merkki täyttää ympyrän ja ankkuroituu alareunaan, koska hahmo on rintakuva:
   keskitettynä leuka jäisi ympyrän keskelle ja pää leikkautuisi. */
.am-corner-gate__mark{
  width:100%; height:100%;
  object-fit:cover; object-position:center bottom;
  display:block; transition:opacity .2s linear;
}

/* LATAUSTILA. Klikkaus antaa palautteen HETI, koska widget tulee verkosta.
   Nappi ei vaihda muotoa: merkki himmenee ja päälle piirtyy kehä. */
.am-corner-gate__spinner{
  position:absolute; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(20,48,77,.25); border-top-color:var(--ink);
  opacity:0; transition:opacity .2s linear;
}
.am-corner-gate.is-loading{cursor:progress}
.am-corner-gate.is-loading .am-corner-gate__mark{opacity:.25}
.am-corner-gate.is-loading .am-corner-gate__spinner{
  opacity:1; animation:am-corner-spin .8s linear infinite;
}
@keyframes am-corner-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .am-corner-gate{transition:opacity .2s linear, visibility .2s; transform:none}
  /* Kehä jää paikalleen: latauksesta kerrotaan yhä, mutta ilman liikettä. */
  .am-corner-gate.is-loading .am-corner-gate__spinner{animation:none}
}

/* --- Kulmavihje kelluvan paneelin aikana ---------------------------------

   .am-inline-hint kertoo "keskustelu on auki sisällössä" ja sen ehto on
   heron inline-chatin laajentuminen (main.css). Jos kävijä avaa myös
   KELLUVAN paneelin, vihje osoittaa asiaa jota paneeli jo peittää — kaksi
   päällekkäistä pintaa samasta keskustelusta. Vihje on silloin kohinaa.

   Ehto on nimenomaan PANEELI AUKI (.am-widget juuressa) eikä "widget
   ladattu": vihjeen koko tarkoitus on näkyä silloin kun inline-chat on
   käytössä, ja se tila edellyttää että widget on ladattu. Laajempi ehto
   tappaisi vihjeen kokonaan.

   Spesifisyys (1,1,1) > main.css:n (0,4,1), joten tämä voittaa. */
html:has(#ayematey-widget-root .am-widget) .am-inline-hint{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* --- Evästeselosteen taulukko -------------------------------------------- */

.am-ctab__h{margin:32px 0 6px; font-family:var(--font-display); font-size:21px; font-weight:600}
.am-ctab__lead{margin:0 0 14px; color:var(--text-2); font-size:var(--fs-base); line-height:1.6}
.am-ctab__wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px}
.am-ctab{width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:560px}
.am-ctab th,.am-ctab td{
  text-align:left; vertical-align:top; padding:10px 12px;
  border-bottom:1px solid var(--hair-soft);
}
.am-ctab th{
  font-family:var(--font-label); font-weight:400; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  border-bottom-color:var(--hair);
}
/* Nimisarakkeelle oma leveys: ilman tätä tunnisteet katkesivat kesken sanan
   ("pll_lan guage"), koska sarake kutistui muiden alle. Kääre vierittää
   vaakasuunnassa, joten leveys ei riko kapeita ruutuja. */
.am-ctab th:first-child,.am-ctab td:first-child{min-width:172px}
.am-ctab td code{
  font-size:12.5px; background:var(--field); border-radius:4px; padding:2px 5px;
  white-space:nowrap;
}
.am-ctab__name{font-weight:600}
.am-ctab__prov{display:block; margin-top:4px; font-size:12px; color:var(--muted)}
.am-ctab__foot{margin:20px 0 0; font-size:var(--fs-sm); color:var(--text-2)}

.am-consent__reopen{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:inherit; color:var(--ink);
  text-decoration:underline; text-underline-offset:2px;
}
.am-consent__reopen:hover{color:var(--coral)}
.am-consent__reopen:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:3px}

/* Footerissa ei ole enää Evästeasetukset-nappia: peruutusreitti on
   evästeselosteen oma painike + kulmanappi. .am-consent__reopen-perustyyli
   (ylempänä) kattaa selostesivun painikkeen. */