/*
 * Tilisivu.
 *
 * Kapea laatikko keskellä, ei täysleveä lista. Tämä on sivuston ainoa
 * sivu jolla ei selata vaan täytetään — ja lomake on sitä helpompi
 * täyttää mitä vähemmän sen ympärillä on. Siksi tilisivua EI ole
 * teeman täysleveiden listojen joukossa.
 */

.ls-tili {
  --ls-tili-bg: #1c2126;
  --ls-tili-line: #2a3238;
  --ls-tili-text: #eef1f2;
  --ls-tili-dim: #9aa3aa;
  --ls-tili-accent: #2f7f94;
  --ls-tili-accent-text: #6bb6c8;
  --ls-tili-virhe: #e23744;
  --ls-tili-ok: #3fa66b;

  max-width: 420px;
  margin: 0 auto;
  color: var(--ls-tili-text);
  font-size: 15px;
  line-height: 1.5;
}

:root[data-theme="light"] .ls-tili {
  --ls-tili-bg: #ffffff;
  --ls-tili-line: #e2e6e8;
  --ls-tili-text: #1b1f22;
  --ls-tili-dim: #697076;
  --ls-tili-accent: #0f4c5c;
  --ls-tili-accent-text: #0f4c5c;
}

.ls-tili__box {
  padding: 22px;
  background: var(--ls-tili-bg);
  border: 1px solid var(--ls-tili-line);
  border-radius: 12px;
}

.ls-tili__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.ls-tili__help,
.ls-tili__hint {
  margin: 0 0 14px;
  color: var(--ls-tili-dim);
  font-size: 0.85rem;
}

.ls-tili__hint {
  margin: -8px 0 14px;
}

/* ------------------------------------------------------------ ilmoitukset */

.ls-tili__note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ls-tili-line);
  font-size: 0.9rem;
}

/*
 * Väri ei ole ainoa ero.
 *
 * Reunan paksuus vasemmalla erottaa onnistumisen virheestä myös
 * silloin kun värejä ei erota — ja se on kahdeksan miestä sadasta.
 */
.ls-tili__note--ok {
  border-left: 4px solid var(--ls-tili-ok);
}

.ls-tili__note--virhe {
  border-left: 4px solid var(--ls-tili-virhe);
}

.ls-tili__resend {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- lomake */

.ls-tili__form {
  display: flex;
  flex-direction: column;
}

.ls-tili__label {
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ls-tili-dim);
}

.ls-tili__input {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--ls-tili-line);
  border-radius: 8px;
  color: var(--ls-tili-text);
  font: inherit;

  /*
   * 16 pikseliä puhelimessa. Sitä pienempi tekstikoko saa iOS:n
   * zoomaamaan sivua kenttään osuttaessa, eikä se zoomaa takaisin —
   * käyttäjä jää vinoon sivuun kesken lomakkeen täytön.
   */
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ls-tili__input:focus {
  outline: 2px solid var(--ls-tili-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.ls-tili__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--ls-tili-dim);
  cursor: pointer;
}

.ls-tili__submit {
  display: inline-block;
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ls-tili-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ls-tili__submit:hover,
.ls-tili__submit:focus-visible {
  filter: brightness(1.12);
  color: #fff;
  text-decoration: none;
}

.ls-tili__alt {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--ls-tili-dim);
}

/*
 * Tietosuojahuomautus napin ALLA, ei sen yllä.
 *
 * Yllä se olisi este jonka lukija ohittaa päästäkseen nappiin; alla se
 * on se mihin katse osuu napin jälkeen. Pienempi kuin lomakkeen teksti
 * mutta ei harmaampi kuin luettava — huomautus jota ei voi lukea ei
 * ole huomautus.
 */
.ls-tili__privacy {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ls-tili-dim);
}

/*
 * Linkki ja lomakenappi näyttävät samalta.
 *
 * "Lähetä vahvistuslinkki uudelleen" on lomake eikä linkki, koska se
 * muuttaa jotain palvelimella — mutta käyttäjälle se on rivissä muiden
 * linkkien kanssa eikä sen kuulu näyttää painikkeelta.
 */
.ls-tili__link,
button.ls-tili__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ls-tili-accent-text);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.ls-tili__link:hover,
.ls-tili__link:focus-visible {
  color: var(--ls-tili-text);
}

.ls-tili__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/*
 * HUNAJAPURKKI.
 *
 * display: none olisi yksinkertaisin, mutta osa roboteista tunnistaa
 * sen ja jättää kentän väliin. Kenttä siirretään näytön ulkopuolelle,
 * jolloin se on olemassa ja täytettävissä mutta ei näy kenellekään.
 * aria-hidden ja tabindex="-1" pitävät sen poissa ruudunlukijan ja
 * näppäimistön tieltä, jottei ansa osu ihmiseen.
 */
.ls-tili__hunaja {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .ls-tili__box {
    padding: 18px 16px;
  }
}