/* Vuevia: yhteiset perustyylit. Värit ovat muuttujia, jotta asiakaskohtainen ulkoasu on helppo lisätä. */
:root {
  --vv-tausta: #f6f7f9;
  --vv-kortti: #ffffff;
  --vv-teksti: #1b1f24;
  --vv-hento: #5b6470;
  --vv-reuna: #dde1e6;
  --vv-paa: #1f5fbf;
  --vv-paa-teksti: #ffffff;
  --vv-ok: #1e7b45;
  --vv-virhe: #b3261e;
  --vv-testi: #f2c230;
  --vv-sade: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vv-tausta: #14171b;
    --vv-kortti: #1d2127;
    --vv-teksti: #e8eaed;
    --vv-hento: #9aa3ad;
    --vv-reuna: #2e343c;
    --vv-paa: #5b9bf0;
    --vv-paa-teksti: #0b1320;
    --vv-ok: #5fcf8d;
    --vv-virhe: #f28b82;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vv-tausta);
  color: var(--vv-teksti);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.vv-ymparistomerkki {
  position: sticky; top: 0; z-index: 10;
  background: var(--vv-testi); color: #1b1f24;
  text-align: center; font-weight: 700; letter-spacing: .08em; font-size: 13px;
  padding: 4px 8px;
}

.vv-sivu { max-width: 560px; margin: 0 auto; padding: 24px 16px 96px; }
.vv-otsake h1 { margin: 0; font-size: 28px; }
.vv-hento { color: var(--vv-hento); margin: 4px 0 0; }

.vv-kortti {
  background: var(--vv-kortti);
  border: 1px solid var(--vv-reuna);
  border-radius: var(--vv-sade);
  padding: 16px;
  margin-top: 16px;
}
.vv-kortti h2 { margin: 0 0 12px; font-size: 18px; }

.vv-lista { list-style: none; margin: 0; padding: 0; }
.vv-lista li {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--vv-reuna);
}
.vv-lista li:first-child { border-top: 0; }
.vv-merkki { font-weight: 700; text-align: center; color: var(--vv-hento); }
.vv-arvo { color: var(--vv-hento); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.vv-ok .vv-merkki { color: var(--vv-ok); }
.vv-virhe .vv-merkki, .vv-virhe .vv-arvo { color: var(--vv-virhe); }
.vv-odottaa { opacity: .55; }

.vv-napit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vv-nappi {
  font: inherit; font-weight: 600;
  min-height: 44px; padding: 8px 16px;
  border-radius: var(--vv-sade);
  border: 1px solid var(--vv-reuna);
  background: var(--vv-kortti); color: var(--vv-teksti);
  cursor: pointer;
}
.vv-nappi--paa { background: var(--vv-paa); color: var(--vv-paa-teksti); border-color: var(--vv-paa); }
.vv-nappi--toissijainen { background: transparent; }
.vv-nappi:disabled { opacity: .5; cursor: progress; }
.vv-nappi:focus-visible { outline: 3px solid var(--vv-paa); outline-offset: 2px; }

#vv-ilmoitukset {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.vv-ilmoitus {
  max-width: 560px; width: 100%;
  padding: 12px 16px; border-radius: var(--vv-sade);
  background: var(--vv-teksti); color: var(--vv-tausta);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  pointer-events: auto;
}
.vv-ilmoitus--virhe { background: var(--vv-virhe); color: #fff; }
.vv-ilmoitus--ok { background: var(--vv-ok); color: #fff; }