/* AI Garage service channel — prototype component styles.
   Self-contained: every rule is prefixed .agc-, except one scoped nav grid
   override. Uses design tokens from colors_and_type.css only. */

/* Isantanavin saanto, kirjoitettu aicenter.fi:n navia varten 11.9.2026.
   Meidan .in on tyopoydalla auto 1fr auto auto (tunnus, linkit, kieli,
   ITEE); avaaja tulee kielivalitsimen ja ITEE:n valiin viidenneksi.
   Alle 760 px navi on kaksirivinen (81 px) ja avaaja saa oman kolmannen
   rivin koko leveydelta, jottei se torma kielivalitsimeen. */
nav.agc-host [data-agc-trigger]{display:flex;align-items:center;justify-self:end}
/* Tyhja isanta pois ruudukosta, kun komponentti ei ole paalla (tuotanto,
   ?agc=0): sijoittamaton tyhja div sai puhelimella oman rivin ja
   rivivalin (81 -> 89 px) ja tyopoydalla oman sarakkeen ja 24 px:n
   valin. Loytyi 11.9.2026 navin tiivistyksen mittauksessa. */
nav [data-agc-trigger]:empty{display:none}
@media(min-width:760px){
  nav.agc-host .in{grid-template-columns:auto 1fr auto auto auto}
}
/* Kapealla naytolla navin sarakkeisiin ei kosketa: etusivun styles.css
   kayttaa kolmea ja alasivujen subpage.css neljaa saraketta, ja pakotettu
   kolmikko jatti alasivuilla ITEE-merkin implisiittiseen sarakkeeseen,
   jolloin 1/-1 ei ulottunut sen yli ja kentta oli eri levyinen kuin
   etusivulla. Kentta venytetaan kunkin sivun oman ruudukon yli. */
@media(max-width:759.98px){
  /* Linkkirivi: nelja linkkia mahtuu 12 pikselissa (aiemmin 10 kuudelle
     ankkurille mitoitettuna), ja 8 px pehmuste negatiivisella
     marginaalilla kasvattaa osuma-alueen noin 30 px:iin muuttamatta rivin
     korkeutta. Vain kun komponentti on paalla. */
  nav.agc-host .navlinks a{font-size:12px;letter-spacing:.1em;padding:8px 0;margin:-8px 0}
  nav.agc-host .agc-t .agc-full{display:inline}
  nav.agc-host .agc-t .agc-short{display:none}
  nav.agc-host .agc-t{font-size:13px;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}
}
/* Alle 600 px avaaja saa oman kolmannen rivin koko leveydelta, jottei se
   torma kielivalitsimeen. Navi kasvaa 81 -> 142 px; hero seuraa mitattua
   --nav-h-arvoa (nav-height.js). Rivivali 9 px ei riita, kun linkkien alla
   on viela kentta: 14 px, kentan ylle yhteensa 18 px. */
@media(max-width:599.98px){
  nav.agc-host .in{row-gap:14px}
  nav.agc-host [data-agc-trigger]{grid-row:3;grid-column:1/-1;justify-self:stretch;margin-top:4px}
  nav.agc-host .agc-t{width:100%;height:36px;justify-content:flex-start}
}
/* 600-759 px (puhelin vaakatasossa, kapea tabletti): ylarivilla on tilaa
   tunnuksen ja kielivalitsimen valissa, ja rivi on jo 36 px korkea (ITEE-
   merkki), joten avaaja mahtuu sinne navia kasvattamatta. Navi pysyy 81
   pikselissa. Mitattu 10.9.2026: omalla rivilla navi vei vaakatasossa 142
   px 375:sta ja verbirivi jai taitteen alle. Etusivun ruudukko on
   1fr auto auto, alasivujen 1fr auto auto auto (sarake 2 tyhja); molemmissa
   avaaja saa sarakkeen 2 ja kielivalitsin ja ITEE siirtyvat 3:een ja 4:aan. */
@media(min-width:600px) and (max-width:759.98px){
  nav.agc-host .in{grid-template-columns:1fr auto auto auto}
  /* Jarjestys 14.9.2026 illalla (kayttajan paatos): sama kuin tyopoydalla,
     EN/FI, avaaja, ITEE. Aiemmin avaaja oli sarakkeessa 2 kielivalitsimen
     vasemmalla puolella, jolloin sama nappi vaihtoi paikkaa nakymasta
     toiseen ja osui keskelle rivia. Valit: kielivalitsin-avaaja 24 px
     (gap 9 + 15) kuten tyopoydan ruudukossa, avaaja-ITEE 21 px (gap 9 +
     12). Kielivalitsimen oma 12 px:n oikea marginaali (styles.css ja
     subpage.css, ITEE-valia varten) nollataan, koska ITEE ei ole enaa
     sen vieressa. Tiiviissa tilassa .lang on piilossa. */
  nav.agc-host .lang{grid-column:2;justify-self:end;margin-right:0}
  nav.agc-host [data-agc-trigger]{grid-row:1;grid-column:3;justify-self:end;margin:0 12px 0 15px}
  nav.agc-host .itee{grid-column:4}
  nav.agc-host .navlinks{grid-column:1/-1}
  nav.agc-host .agc-t{width:auto;height:32px}
}
/* 760-960 px: alasivujen ruudukon gap on 12 px ja etusivun 24 px, joten
   kielivalitsin ja avaaja lukivat lahekkain vain alasivuilla (kayttajan
   havainto 14.9.2026 noin 770 px:n alasivulla). Korjaus on subpage.css:n
   760-960 px:n lohkossa, ei tassa: etusivun FI-rivi on 760 px:ssa jo
   taynna (selite, nelja linkkia, kielivalitsin, avaaja, ITEE), ja 12 px
   lisaa olisi tyontanyt selitteen VISIO-linkin paalle. */
/* Inline-tyylit siirretty luokiksi, jotta sivuston CSP (style-src 'self')
   pysyy ennallaan. */
.agc-mt16{margin-top:16px}
.agc-consent{margin:0 0 16px}
/* Tietosuojaselosteen linkki (21.9.2026): ohjeen perassa ja ruudun alla,
   ruudun tekstin sisennykseen tasattuna. */
.agc-plink{color:var(--aic-blue-900);text-decoration:underline;text-underline-offset:2px}
.agc-plink:hover{color:var(--aic-orange-900)}
.agc-plink-row{margin:0 0 0 30px;font-size:13px;line-height:1.5}
.agc-mt14{margin-top:14px}
.agc-eyb.agc-next{color:var(--aic-orange-900);margin-top:20px}
.agc-help.agc-tight{margin:-6px 0 10px}
.agc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.agc-inline .agc-car{background:var(--aic-orange-600);width:1px;height:19px;flex:none}
.agc-inline .agc-sl{margin-left:auto}

/* ── trigger, nav variant ─────────────────────────────────────────── */
.agc-t{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.44);border-radius:var(--radius-md);color:#fff;font-family:var(--font-body);font-size:14px;line-height:1;cursor:pointer;white-space:nowrap;transition:background 180ms ease,border-color 180ms ease}
.agc-t:hover{background:rgba(255,255,255,.14);border-color:var(--aic-orange-600)}
.agc-t:active{background:rgba(255,255,255,.2)}
.agc-t:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950)}
.agc-t .agc-car{width:1px;height:17px;background:var(--aic-orange-600);flex:none}
.agc-t .agc-lbl{white-space:nowrap}
.agc-t .agc-sl{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--aic-orange-600);margin-left:2px}
.agc-t .agc-short{display:none}

/* ── trigger, in-page variant (Contact section, blue ground) ──────── */
.agc-inline{display:block;width:100%;max-width:420px;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-md);padding:16px 18px;color:#fff;font-family:var(--font-body);cursor:pointer;transition:background 180ms ease,border-color 180ms ease}
.agc-inline:hover{background:rgba(255,255,255,.12);border-color:var(--aic-orange-600)}
.agc-inline:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950)}
.agc-inline .agc-il{display:flex;align-items:center;gap:10px;font-size:16px}
.agc-inline .agc-ip{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.66);text-wrap:pretty}
.agc-noscript{display:block;margin-top:16px;font-size:14px;color:rgba(255,255,255,.8);max-width:44ch}

/* ── panel ────────────────────────────────────────────────────────── */
.agc-panel{position:fixed;top:88px;right:24px;left:auto;bottom:auto;width:432px;max-width:calc(100vw - 32px);max-height:calc(100vh - 112px);margin:0;padding:0;border:1px solid var(--aic-neutral-300);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);background:#fff;color:var(--aic-neutral-900);font-family:var(--font-body);overflow:hidden;flex-direction:column}
.agc-panel[open]{display:flex}
.agc-panel::backdrop{background:rgba(23,7,169,.14)}
@media (prefers-reduced-motion:no-preference){.agc-panel[open]{animation:agc-in 180ms ease}}
@keyframes agc-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Sulkupainike on paneelin oikeassa ylakulmassa, ei otsikon vieressa:
   sijainti ei riipu otsikon pituudesta. Otsikkolohkolle oikea pehmuste,
   jottei pitka otsikko mene painikkeen alle. Muutettu 11.9.2026. */
.agc-hd{position:relative;display:flex;align-items:flex-start;gap:16px;padding:20px 64px 16px 20px;border-bottom:1px solid var(--aic-neutral-200);background:var(--aic-blue-900);color:#fff}
.agc-eyb{display:flex;align-items:center;gap:10px;font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-900);margin:0 0 8px}
.agc-eyb:before{content:"";width:16px;height:2px;background:var(--aic-orange-600)}
/* Ylätunniste on sinisellä: orange-900 antaisi 2,7:1, orange-600 6,2:1
   (saavutettavuustesti havainto 1, 1.10.2026; sama sääntö kuin .contact .eyb). */
.agc-hd .agc-eyb{color:var(--aic-orange-600)}
.agc-hd h2{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em;margin:0;color:#fff}
.agc-x{position:absolute;top:12px;right:12px;width:44px;height:44px;margin:0;display:grid;place-items:center;background:none;border:1px solid rgba(255,255,255,.32);border-radius:var(--radius-md);color:#fff;font-size:18px;line-height:1;cursor:pointer;transition:background 150ms ease,border-color 150ms ease}
.agc-x:hover{background:rgba(255,255,255,.14);border-color:var(--aic-orange-600)}
.agc-x:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950)}

/* flex:1 1 auto, ei flex:1 (18.9.2026): flex-basis 0 % + auto-korkuinen
   sarakeflex-kontti → WebKit laskee kontin luontaiseen korkeuteen rungon
   osuudeksi nollan, ja iPadilla (ja Safarissa) paneeli avautui ilman
   runkoa (body 40/576 px). Basis auto laskee sisällön mukaan; max-height
   rajaa ja runko vierii kuten ennen. */
.agc-body{padding:20px;overflow-y:auto;flex:1 1 auto;min-height:0}
.agc-step{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.agc-step .agc-bars{display:flex;gap:4px}
.agc-step i{width:16px;height:3px;background:var(--aic-neutral-200);display:block}
.agc-step i.on{background:var(--aic-orange-600)}

/* conversational blocks */
.agc-say{background:var(--aic-neutral-50);border:1px solid var(--aic-neutral-200);border-radius:var(--radius-md);padding:14px 16px;font-size:15px;line-height:1.55;color:var(--aic-neutral-800);margin:0 0 12px;text-wrap:pretty}
.agc-say p{margin:0 0 8px}
.agc-say p:last-child{margin:0}
.agc-say strong{color:var(--aic-blue-900)}
.agc-echo{margin:0 0 12px 44px;background:var(--aic-blue-900);color:#fff;border-radius:var(--radius-md);padding:12px 14px;font-size:14px;line-height:1.5}
.agc-echo .agc-ek{display:block;font-family:var(--font-display-narrow);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-orange-600);margin-bottom:4px}

/* Vaiheen 4 otsikko: sama ulkoasu kuin aiempi <strong>, nyt otsikko,
   johon kohdistus siirtyy (havainto 6, 1.10.2026). */
.agc-say .agc-sth{font:inherit;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--aic-blue-900);margin:0 0 8px}

/* fields */
.agc-f{border:0;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
fieldset.agc-f{display:block}
fieldset.agc-f>*+*{margin-top:6px}
.agc-f legend{padding:0}
.agc-f label,.agc-lg{font-size:14px;font-weight:600;color:var(--aic-neutral-900);display:block}
.agc-f .agc-opt{font-weight:400;color:var(--aic-neutral-600)}
.agc-help{font-size:13px;color:var(--aic-neutral-600);margin:0}
.agc-f textarea,.agc-f input[type=text],.agc-f input[type=email]{font-family:var(--font-body);font-size:15px;color:var(--aic-neutral-900);background:#fff;border:1px solid var(--aic-neutral-400);border-radius:var(--radius-md);padding:11px 12px;width:100%;transition:border-color 150ms ease}
.agc-f textarea{min-height:112px;resize:vertical;line-height:1.5}
.agc-f textarea:hover,.agc-f input:hover{border-color:var(--aic-neutral-600)}
.agc-f textarea:focus-visible,.agc-f input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950);border-color:var(--aic-blue-900)}
/* Virhe- ja varoitusvarit tokeneista 14.9.2026 (CD): paketin omat
   #b0210e/#8c1a0b -> --color-error (#c0392b, 5,4:1 valkoisella) ja
   #fff8ee -> 8 % oranssia valkoisessa (color-mix, varana laskettu hex). */
.agc-f [aria-invalid=true]{border-color:var(--color-error);border-width:2px}
.agc-f.agc-invalid .agc-choices{border-color:var(--color-error);border-width:2px}
.agc-f textarea.agc-ta-s{min-height:80px}
.agc-err{display:flex;gap:8px;font-size:14px;line-height:1.45;color:var(--color-error);margin:0;text-wrap:pretty}
.agc-err:before{content:"!";font-family:var(--font-display-narrow);font-weight:600;flex:none;width:18px;height:18px;border:1px solid var(--color-error);border-radius:var(--radius-full);display:grid;place-items:center;font-size:12px;margin-top:1px}
.agc-warn{border:1px solid var(--aic-orange-700);background:#fff7ec;background:color-mix(in srgb,var(--aic-orange-600) 8%,var(--aic-white));border-radius:var(--radius-md);padding:11px 13px;font-size:14px;line-height:1.45;color:var(--aic-neutral-800);margin:0;text-wrap:pretty}
/* Merkkilaskuri tekstikenttien alla (kaytossa 16.9.2026 alkaen); punainen rajan yli. */
.agc-count{font-size:12px;font-family:var(--font-mono);color:var(--aic-neutral-600);margin:4px 0 0;text-align:right}
.agc-count--over{color:var(--color-error);font-weight:600}

.agc-choices{display:flex;flex-direction:column;gap:0;border:1px solid var(--aic-neutral-200);border-radius:var(--radius-md);overflow:hidden}
.agc-choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;min-height:44px;cursor:pointer;border-bottom:1px solid var(--aic-neutral-200);transition:background 150ms ease}
.agc-choice:last-child{border-bottom:0}
.agc-choice:hover{background:var(--color-hover-overlay)}
.agc-choice input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--aic-blue-900);flex:none}
.agc-choice input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950)}
.agc-choice .agc-cn{font-size:15px;font-weight:500;color:var(--aic-neutral-900);display:block}
.agc-choice .agc-cd{font-size:13px;color:var(--aic-neutral-600);display:block;margin-top:2px;text-wrap:pretty}
/* Suostumusruutu on .agc-f-lohkon sisalla, joten valitsin on .agc-f label -saantoa tarkempi (block ja lihavointi kumoutuvat). 16.9.2026. */
.agc-check,.agc-f label.agc-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.5;color:var(--aic-neutral-800);cursor:pointer;padding:4px 0;min-height:44px}
.agc-check input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--aic-blue-900);flex:none}

.agc-sum{border:1px solid var(--aic-neutral-200);border-radius:var(--radius-md);margin:0 0 16px}
.agc-sum div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 14px;border-bottom:1px solid var(--aic-neutral-200);font-size:14px;line-height:1.5}
.agc-sum div:last-child{border-bottom:0}
.agc-sum dt{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-neutral-600);margin:3px 0 0;overflow-wrap:anywhere}
.agc-sum dd{margin:0;color:var(--aic-neutral-900);text-wrap:pretty;overflow-wrap:anywhere}

.agc-ft{display:flex;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid var(--aic-neutral-200);background:var(--aic-neutral-50)}
.agc-btn{font-family:var(--font-display-narrow);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:0 20px;height:44px;border-radius:var(--radius-md);border:1px solid var(--aic-blue-900);background:var(--aic-blue-900);color:#fff;cursor:pointer;transition:opacity 150ms ease}
.agc-btn:hover{opacity:.85}
.agc-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--aic-blue-950)}
.agc-btn--ghost{background:none;color:var(--aic-blue-900);border-color:var(--aic-neutral-300)}
.agc-btn--ghost:hover{background:var(--color-hover-overlay);opacity:1}
.agc-btn[disabled]{opacity:.45;cursor:not-allowed}
.agc-sp{flex:1}
.agc-link{font-size:14px;background:none;border:0;padding:0;color:var(--aic-blue-900);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:var(--font-body);text-align:left}
.agc-link:hover{color:var(--aic-orange-900)}

/* open decisions, marked in the UI on purpose */
.agc-open{background:none;color:inherit;border-bottom:1px dashed var(--aic-orange-700);padding-bottom:1px}
.agc-open:after{content:attr(data-tag);font-family:var(--font-display-narrow);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aic-orange-900);vertical-align:super;margin-left:3px}

/* prototype dry-run receipt */
.agc-demo{border:1px solid var(--aic-orange-700);border-radius:var(--radius-md);padding:14px 16px;margin:0 0 16px}
.agc-demo h3{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-orange-900);margin:0 0 8px}
.agc-demo p{font-size:14px;line-height:1.5;color:var(--aic-neutral-700);margin:0 0 10px;text-wrap:pretty}
.agc-demo pre{font-family:var(--font-mono);font-size:12px;line-height:1.6;background:var(--aic-neutral-50);border:1px solid var(--aic-neutral-200);border-radius:var(--radius-sm);padding:12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--aic-neutral-800)}
.agc-done h2{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2;color:var(--aic-blue-900);margin:0 0 10px}
/* Lopputilan kappaleet erilleen toisistaan ja viestilaatikosta (T2-havainto 16.9.2026). */
.agc-done .agc-help{margin:0 0 8px}
.agc-done .agc-sum{margin-top:16px}
/* Kohdistus siirretaan otsikkoon (focusFirst); ilman omaa saantoa selain piirsi mustan oletusrenkaan. Havaittu 11.9.2026. */
/* Otsikot, joihin kohdistus siirretään ohjelmallisesti (tabindex="-1":
   paneelin otsikko kosketuslaitteella, vaiheen 4 otsikko, lopputilan otsikko),
   eivät saa rengasta: ne eivät ole Tab-järjestyksessä, ja kosketusnäytöllä
   rengas piirtyi otsikon ympärille (käyttäjän puhelintesti 1.10.2026).
   Kohdistus ja ruudunlukijan ilmoitus ennallaan. */
.agc-panel [tabindex="-1"]:focus,.agc-panel [tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
.agc-ol{margin:0;padding:0;list-style:none;counter-reset:agc}
.agc-ol li{counter-increment:agc;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:14px;line-height:1.5;color:var(--aic-neutral-700);padding:10px 0;border-top:1px solid var(--aic-neutral-200)}
.agc-ol li:before{content:"0" counter(agc);font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--aic-orange-900)}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1080px){.agc-t .agc-full{display:none}.agc-t .agc-short{display:inline}}
/* Leveä mutta matala näkymä (18.9.2026): iPadilla vaakatasossa
   näyttönäppäimistö pienentää asettelunäkymän noin 480 px:iin, jolloin
   työpöytäpaneelin max-height (100vh - 112px) jäi noin 370 px:iin ja
   näkyviin jäi vain tekstikentän alin rivi. Skriptin visualViewport-
   sovitus koskee vain alle 960 px:n leveyttä eikä tunnista tätä, koska
   iPadOS kutistaa myös innerHeightin. Ratkaisu on CSS:ssä ilman
   tunnistusta: kun näkymä on alle 640 px korkea, paneeli nousee 16 px:n
   päähän yläreunasta ja otsake, alapalkki ja tekstikenttä tiivistyvät
   samoin kuin puhelimen .agc-kb-tilassa. Koskee myös matalaa
   työpöytäikkunaa. */
/* Nappaimistotila (luokka .agc-kb, skripti asettaa kun nakyva nakyma on
   selvasti ikkunaa matalampi): otsake yhdelle riville ilman eyebrow-tekstia,
   alapalkki matalammaksi, tekstikentta lyhyemmaksi. Vapauttaa noin 70 px.
   18.9.2026 alkaen kaikissa leveyksissa (iPad vaakatasossa), ei vain alle
   960 px. */
.agc-panel.agc-kb .agc-hd{padding:10px 64px 10px 20px}
.agc-panel.agc-kb .agc-hd .agc-eyb{display:none}
.agc-panel.agc-kb .agc-hd h2{font-size:16px;line-height:1.25}
.agc-panel.agc-kb .agc-x{top:6px;right:8px;width:36px;height:36px}
.agc-panel.agc-kb .agc-body{padding:12px 20px}
.agc-panel.agc-kb .agc-ft{padding:8px 20px}
.agc-panel.agc-kb textarea{min-height:72px}
/* Puhelin vaakatasossa (18.9.2026): sama tiivistys aina, ei vain
   nappaimiston kanssa. Nakymaa on noin 393 px, josta selain vie noin 110
   ja paneelin otsake ja alapalkki noin 180. Sama ehto kuin heron ja navin
   vaakatiivistyksella (styles.css, nav-views.css). */
@media (max-width:960px) and (max-height:460px) and (orientation:landscape){
  .agc-panel .agc-hd{padding:10px 64px 10px 20px}
  .agc-panel .agc-hd .agc-eyb{display:none}
  .agc-panel .agc-hd h2{font-size:16px;line-height:1.25}
  .agc-panel .agc-x{top:6px;right:8px;width:36px;height:36px}
  .agc-panel .agc-body{padding:12px 20px}
  .agc-panel .agc-ft{padding:8px 20px}
  .agc-panel textarea{min-height:72px}
}
@media (min-width:960.02px) and (max-height:640px){
  .agc-panel{top:16px;max-height:calc(100vh - 32px)}
  .agc-panel .agc-hd{padding:10px 64px 10px 20px}
  .agc-panel .agc-hd .agc-eyb{display:none}
  .agc-panel .agc-hd h2{font-size:16px;line-height:1.25}
  .agc-panel .agc-x{top:6px;right:8px;width:36px;height:36px}
  .agc-panel .agc-body{padding:12px 20px}
  .agc-panel .agc-ft{padding:8px 20px}
  .agc-panel .agc-f textarea{min-height:72px}
}
@media (max-width:960px){
  .agc-panel{top:0;right:0;left:0;bottom:0;width:100%;max-width:none;max-height:none;border:0;border-radius:0}
  .agc-panel::backdrop{background:rgba(23,7,169,.55)}
  /* Vaihe 1 pystypuhelimella: johdanto, huomautus ja kentta mahtuvat
     nakymaan ilman vieritysta (mitattu 393x660: kentan alareuna noin
     490 px, alapalkki alkaa 575). Huomautuksen otsikko pois kapealla,
     laatikoiden pehmusteet ja valit tiukemmat. 10.9.2026. */
  .agc-body{padding:16px 20px}
  .agc-say{padding:12px 14px;margin-bottom:10px;font-size:14.5px}
  .agc-echo{margin-left:24px}
  .agc-inline{max-width:none}
}
@media (max-width:420px){.agc-ft{flex-wrap:wrap}.agc-btn{flex:1;padding:0 12px}.agc-sum div{grid-template-columns:1fr;gap:2px}}

/* ── review-only controls, not part of the design ─────────────────── */
.agc-rev{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;background:var(--aic-neutral-950);color:#fff;font-family:var(--font-mono);font-size:11px}
.agc-rev b{font-family:var(--font-display-narrow);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aic-orange-600)}
.agc-rev button{font-family:var(--font-mono);font-size:11px;background:none;border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-sm);color:#fff;padding:5px 9px;cursor:pointer}
.agc-rev button:hover{border-color:var(--aic-orange-600)}
.agc-rev button[aria-pressed=true]{background:var(--aic-orange-600);border-color:var(--aic-orange-600);color:#1a1a28}
.agc-rev .agc-sp2{flex:1}

/* ── Lopputila mailto-tilassa: vastaanottaja, aihe, viesti, kopiointi ── */
.agc-mail dd pre.agc-pre{font-family:var(--font-mono);font-size:12px;line-height:1.6;background:var(--aic-neutral-50);border:1px solid var(--aic-neutral-200);border-radius:var(--radius-sm);padding:12px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--aic-neutral-800);max-height:40vh;overflow:auto}
.agc-mail dd a{color:var(--aic-blue-900);text-decoration:underline;overflow-wrap:anywhere}
.agc-copyrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.agc-copied{font-size:13px;line-height:1.4;color:var(--aic-neutral-700)}