/* -----------------------------------------------------------------------
   Aloituskysely

   Sama visuaalinen kieli kuin tilauswidgetissä, mutta rauhallisempi:
   asiakas on jo ostanut, joten mikään ei yritä myydä. Tavoite on, että
   pitkä lomake tuntuu lyhyeltä ja että keskeneräiseksi jättäminen on
   selvästi sallittua.
   ----------------------------------------------------------------------- */

.al {
  /* ⚠ VÄRISLUGIT: pohja ja pohja-2 ovat TAUSTAVÄREJÄ, teksti on tekstin
     väri. Tämä meni kerran väärin widgetissä — kaikki teksti piirtyi
     lähes mustana. Tarkista slugi, älä arvaa nimestä. */
  --al-pohja:   var(--wp--preset--color--pohja-2, #0A100C);
  --al-kortti:  #18271B;
  --al-kortti2: #20321F;
  --al-raja:    #3A4C36;
  --al-teksti:  var(--wp--preset--color--teksti, #F2F5F0);
  --al-teksti2: var(--wp--preset--color--pehmea, #B9C4B7);
  --al-himmea:  var(--wp--preset--color--himmea, #8E9C8C);
  --al-lime:    var(--wp--preset--color--vihrea, #8BD03C);
  --al-lime-v:  var(--wp--preset--color--vihrea-v, #A3E355);
  --al-kelta:   var(--wp--preset--color--keltainen, #FBD00F);
  --al-tumma:   #08120A;

  max-width: 780px;
}

.al *, .al *::before, .al *::after { box-sizing: border-box; }

/*
 * ⚠ NOLLAUS NOLLATARKKUUDELLA. :where() ei kasvata tarkkuutta lainkaan,
 * joten jokainen komponenttisääntö voittaa sen. Widgetissä sama nollaus
 * kirjoitettiin ensin muodossa .bn-widget button, ja se voitti kolme
 * kertaa peräkkäin sen mitä sen ei pitänyt.
 */
:where(.al) :where(button, input, textarea, select) { color: inherit; font: inherit; }
:where(.al) :where(button) { cursor: pointer; }

/* ---------- yläosa ---------- */

.al-yla { margin-bottom: clamp(28px, 4vw, 44px); }

.al-tunnus {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--al-himmea); margin: 0 0 10px;
}

.al h1 { margin: 0 0 14px; }

.al-lede {
  margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.62;
  color: var(--al-teksti2); max-width: 58ch;
}

/* Tallennuksen tila. Varattu korkeus, ettei sivu hyppää kun teksti
   ilmestyy ja katoaa. */
.al-tila {
  min-height: 22px; margin-top: 18px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 12px; color: var(--al-himmea);
}
.al-tila.al-ok { color: var(--al-lime-v); }
.al-tila.al-virhe { color: var(--al-kelta); }

.al-valmis-lippu {
  margin-bottom: 26px; padding: 14px 18px;
  background: var(--al-kortti2); border: 1px solid var(--al-lime);
  border-radius: 11px; font-size: .94rem; color: var(--al-teksti2);
}

/* ---------- osiot ---------- */

.al-osio {
  margin-bottom: clamp(30px, 4vw, 48px);
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--al-raja);
}
.al-osio:last-of-type { border-bottom: 0; }

.al-osio-yla { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }

.al-numero {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--al-kortti); border: 1px solid var(--al-raja);
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 14px; color: var(--al-lime-v);
}

.al-osio h2 { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); }
.al-selite { margin: 0; font-size: .94rem; line-height: 1.58; color: var(--al-himmea); max-width: 60ch; }

/* ---------- kentät ---------- */

.al-kentta { margin-bottom: 22px; }

.al-kentta label, .al-otsake {
  display: block; margin-bottom: 8px;
  font-size: .95rem; font-weight: 600; color: var(--al-teksti);
}

.al-kentta input[type="text"],
.al-kentta input[type="email"],
.al-kentta textarea {
  width: 100%; padding: 13px 15px;
  background: var(--al-kortti); border: 2px solid var(--al-raja);
  border-radius: 10px; color: var(--al-teksti); font-size: 1rem;
}
.al-kentta input:focus, .al-kentta textarea:focus {
  outline: none; border-color: var(--al-lime);
}
.al-kentta textarea { resize: vertical; line-height: 1.55; }
.al-kentta ::placeholder { color: var(--al-himmea); opacity: .75; }

.al-apu {
  display: block; margin-top: 7px;
  font-size: .85rem; line-height: 1.5; color: var(--al-himmea); max-width: 58ch;
}

/* ---------- valinnat ---------- */

.al-valinnat { display: grid; gap: 10px; }

/*
 * ⚠ JOKAINEN NAPPI ASETTAA TAUSTANSA JA REUNANSA ITSE. Nollaus ei tee
 * sitä, koska silloin se veisi ne myös niiltä napeilta jotka tarvitsevat
 * omansa. Ilman tätä selain piirtää oman vaalean nappityylinsä tummalle.
 */
.al-valinta {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 18px; width: 100%; text-align: left;
  background: var(--al-kortti); border: 2px solid var(--al-raja);
  border-radius: 11px;
  transition: border-color .13s, background .13s;
}
.al-valinta:hover { border-color: var(--al-himmea); }
.al-valinta.al-on { border-color: var(--al-lime); background: var(--al-kortti2); }

.al-valinta .al-merkki {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--al-himmea);
}
.al-valinta.al-on .al-merkki {
  background: var(--al-lime); border-color: var(--al-lime);
  box-shadow: inset 0 0 0 4px var(--al-kortti2);
}

.al-valinta .al-t b { display: block; font-size: 1rem; font-weight: 600; color: var(--al-teksti); }
.al-valinta .al-t span { display: block; margin-top: 3px; font-size: .88rem; color: var(--al-himmea); }

/* ---------- ruksit ---------- */

.al-ruksit { display: grid; gap: 9px; }

.al-ruksi {
  display: flex; gap: 13px; align-items: center;
  padding: 13px 16px; width: 100%; text-align: left;
  background: var(--al-kortti); border: 2px solid var(--al-raja);
  border-radius: 10px; font-size: .98rem; color: var(--al-teksti);
}
.al-ruksi:hover { border-color: var(--al-himmea); }
.al-ruksi.al-on { border-color: var(--al-lime); background: var(--al-kortti2); }

.al-ruksi .al-merkki {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  border: 2px solid var(--al-himmea); display: grid; place-items: center;
  font-size: 12px; color: transparent;
}
.al-ruksi.al-on .al-merkki {
  background: var(--al-lime); border-color: var(--al-lime); color: var(--al-tumma);
}

/* ---------- ehdolliset kohdat ---------- */

/*
 * Näkyvissä oletuksena. Ilman JavaScriptiä asiakas näkee kaikki kentät
 * kerralla ja voi täyttää ne — piilotus tehdään vasta skriptissä. Näin
 * lomake ei koskaan jää tyhjäksi laatikoksi.
 */
.al-jos {
  margin: -6px 0 22px 46px; padding-left: 18px;
  border-left: 2px solid var(--al-raja);
}
.al-jos[hidden] { display: none; }

/* ---------- verkkotunnuksen haku ---------- */

.al-haku { display: flex; gap: 10px; }
.al-haku input { flex: 1; min-width: 0; }

.al-tarkista {
  flex: 0 0 auto; padding: 0 20px;
  background: var(--al-lime); color: var(--al-tumma);
  border: 0; border-radius: 10px; font-weight: 700;
}
.al-tarkista:hover { background: var(--al-lime-v); }

.al-tulos:not(:empty) {
  margin-top: 14px; padding: 14px 16px;
  background: var(--al-kortti); border: 1px solid var(--al-raja); border-radius: 10px;
}
.al-rivi {
  margin: 0 0 6px; font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .92rem; color: var(--al-teksti2);
}
.al-rivi b { color: var(--al-teksti); font-weight: 500; }
.al-vapaa { color: var(--al-lime-v); }
.al-varattu { color: var(--al-kelta); }
.al-epavarma { color: var(--al-himmea); }
.al-odota { margin: 0; font-size: .9rem; color: var(--al-himmea); }
.al-tulos .al-apu { margin-top: 10px; }

/* ---------- logon vektorointi ---------- */

.al-tarjous {
  margin: 20px 0 0; padding: 20px;
  background: var(--al-kortti); border: 1px solid var(--al-raja);
  border-radius: 12px;
}
.al-tarjous-otsikko {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--al-himmea);
}
.al-tarjous p { margin: 0 0 14px; font-size: .94rem; line-height: 1.6; color: var(--al-teksti2); }
.al-tarjous .al-kentta { margin-bottom: 0; }

/* ---------- tiedostot ---------- */

.al-lataus input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.al-lataa-nappi {
  display: inline-block; margin-bottom: 0; padding: 12px 22px;
  background: var(--al-kortti2); border: 2px solid var(--al-raja);
  border-radius: 10px; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.al-lataa-nappi:hover { border-color: var(--al-lime); }
.al-lataus input[type="file"]:focus-visible + .al-lataa-nappi {
  outline: 2px solid var(--al-lime); outline-offset: 3px;
}

.al-tiedostot { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.al-tiedostot:empty { margin: 0; }
.al-tiedostot li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 15px; background: var(--al-kortti2);
  border: 1px solid var(--al-raja); border-radius: 9px; font-size: .9rem;
}
.al-tnimi { color: var(--al-teksti); word-break: break-all; }
.al-tkoko {
  flex: 0 0 auto; color: var(--al-himmea);
  font-family: var(--wp--preset--font-family--mono, monospace); font-size: .85rem;
}

/* ---------- vapaat kädet ---------- */

.al-vapaat { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.al-vapaat-nappi {
  padding: 9px 16px; background: none;
  border: 1px dashed var(--al-himmea); border-radius: 8px;
  font-size: .9rem; color: var(--al-lime-v);
}
.al-vapaat-nappi:hover { border-color: var(--al-lime); border-style: solid; }
.al-vapaat span { font-size: .85rem; color: var(--al-himmea); }

/* ---------- lähetys ---------- */

.al-loppu { margin-top: clamp(20px, 3vw, 30px); }

.al-laheta {
  padding: 16px 34px; background: var(--al-lime); color: var(--al-tumma);
  border: 0; border-radius: 11px; font-size: 1.05rem; font-weight: 700;
}
.al-laheta:hover:not(:disabled) { background: var(--al-lime-v); }
.al-laheta:disabled { opacity: .55; cursor: default; }

.al-loppu-apu {
  margin: 14px 0 0; font-size: .88rem; line-height: 1.55;
  color: var(--al-himmea); max-width: 56ch;
}

.al-kiitos {
  margin-bottom: 22px; padding: 22px 24px;
  background: var(--al-kortti2); border: 2px solid var(--al-lime);
  border-radius: 13px;
}
.al-kiitos h2 { margin: 0 0 10px; font-size: 1.3rem; }
.al-kiitos p { margin: 0; font-size: .96rem; line-height: 1.62; color: var(--al-teksti2); }

/* ---------- linkki ei kelpaa ---------- */

.al-tyhja {
  max-width: 560px; padding: 30px;
  background: #0C130E; border: 1px solid #3A4C36; border-radius: 14px;
}
.al-tyhja h2 { margin: 0 0 14px; font-size: 1.4rem; }
.al-tyhja p { margin: 0 0 12px; line-height: 1.62; color: var(--wp--preset--color--pehmea); }
.al-tyhja p:last-child { margin-bottom: 0; }

/* ---------- kapea ruutu ---------- */

@media (max-width: 620px) {
  .al-osio-yla { gap: 12px; }
  .al-jos { margin-left: 0; padding-left: 14px; }
  .al-haku { flex-wrap: wrap; }
  .al-haku input { flex: 1 1 100%; }
  .al-tarkista { width: 100%; padding: 13px 20px; }
  .al-laheta { width: 100%; }
}

.al :focus-visible { outline: 2px solid var(--al-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .al * { transition: none !important; } }