/*
  Hintalaskuri (#laskuri) — toissijainen konversio.

  Rakenne: kysymykset vasemmalla, laskelma oikealla omana korttinaan. Tulos on
  aina näkyvissä ja päivittyy valintojen mukana, ei "Laske"-napin takana:
  napin takana oleva tulos on ylimääräinen klikki ja kävijä ei tiedä
  etukäteen kannattaako se.

  ── MIKSI TULOS ON TAULUKKO EIKÄ KAKSI KORTTIA ─────────────────────────────
  Kaksi isoa lukua vierekkäin on väite. Rivi riviltä eritelty laskelma on
  perustelu: jokainen kävijän rasti ilmestyy omalle rivilleen, ja Älysivut-
  sarakkeessa lukee "sisältyy" kahdeksan kertaa allekkain. Se toisto on koko
  osion argumentti, eikä sitä voi tiivistää yhteen lukuun.

  Vertailun kaksi puolta ovat tarkoituksella eriarvoiset: markkinapuoli on
  harmaa, Älysivut vihreä. Se on koko laskurin tehtävä — antaa 498 €:lle
  ankkuri jota vasten se on halpa.
*/

.laskuri {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--panel-tint);
}

.laskuri-head {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}

.laskuri-sub {
  margin: 12px 0 0;
  color: var(--text-2);
}

.laskuri-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .laskuri-grid {
    grid-template-columns: 0.95fr 1fr;
    gap: 32px;
  }
}

/* Vain ruudunlukijalle: sarakeotsikko rivin solun alussa, jotta "250–600 €"
   ei jää irralleen siitä kumman puolen hinta se on. */
.laskuri-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------- Kysymykset -------------------- */

.laskuri-form {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3.5vw, 32px);
  box-shadow: var(--shadow-card);
}

.laskuri-kysymys {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
}

.laskuri-kysymys:last-of-type {
  margin-bottom: 0;
}

.laskuri-kysymys legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 12px;
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

/* Numero omana pillerinään eikä "1." tekstin alussa: kolme kysymystä on
   lyhyt matka, ja numeroitu askelmerkki kertoo sen yhdellä silmäyksellä. */
.laskuri-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--ink-deep);
  color: var(--lime);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.laskuri-ohje {
  margin: -4px 0 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-2);
}

.laskuri-ohje-erikseen {
  margin-top: 16px;
}

.laskuri-vaihtoehdot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
  Radiot ja valintaruudut piilotetaan visuaalisesti mutta EI display:nonella
  eikä visibility:hiddenillä — kumpikin poistaisi ne välilehtijärjestyksestä ja
  radioryhmän nuolinäppäinnavigoinnista, joka on sen oikea käyttötapa.
  Fokusrengas piirretään labelin ympärille :has()-valitsimella alla.
*/
.laskuri-vaihtoehdot input[type="radio"],
.laskuri-vaihtoehdot input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.laskuri-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.laskuri-chip:hover {
  border-color: var(--brand);
}

.laskuri-chip:has(input:checked) {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: #FFFFFF;
}

.laskuri-chip:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/*
  Monivalinta saa näkyvän ruudun, radiot eivät. Ilman sitä molemmat ryhmät
  näyttäisivät samalta pillerimatolta, eikä kävijä tietäisi että kysymyksissä
  2 ja 3 saa valita monta.
*/
.laskuri-ruutu {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.laskuri-ruutu::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--ink-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.5);
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

.laskuri-chip:has(input:checked) .laskuri-ruutu {
  background: var(--lime);
  border-color: var(--lime);
}

.laskuri-chip:has(input:checked) .laskuri-ruutu::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Erikseen hinnoiteltavat: valittuna vihreän sijaan neutraali reunus, koska
   ne eivät päädy vertailun summaan eivätkä ole "sisältyy"-rivejä. */
.laskuri-chip-erikseen:has(input:checked) {
  background: var(--surface);
  border-color: var(--ink-deep);
  color: var(--text);
}

.laskuri-chip-erikseen:has(input:checked) .laskuri-ruutu {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}

.laskuri-chip-erikseen:has(input:checked) .laskuri-ruutu::after {
  border-color: #FFFFFF;
}

/* -------------------- Tulos -------------------- */

.laskuri-tulos {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3.5vw, 30px);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .laskuri-tulos {
    position: sticky;
    /* Sticky-header on ~104 px, ks. style.css:n scroll-padding-top. */
    top: 116px;
  }
}

.laskuri-tulos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.laskuri-tulos-title {
  margin: 0;
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.laskuri-tulos-alv {
  margin: 0;
  font-size: 0.74rem;
  color: var(--text-2);
}

/* -------------------- Laskelma -------------------- */

/*
  Sarakeleveydet ovat kiinteitä eivätkä auto: otsikkorivi, rivit ja summarivi
  ovat erillisiä gridejä, joten auto-sarakkeet laskisivat jokaiselle oman
  leveytensä eivätkä osuisi kohdakkain.

  Yksikkö on rem eikä em. em ratkeaa gridin OMAA fonttikokoa vasten, ja näiden
  kolmen gridin fonttikoot ovat eri: otsikkorivi 0,68rem, datarivit 0,84rem,
  summarivi 0,95–1,28rem. em-arvoilla sarakkeet ajautuivat kymmeniä pikseleitä
  erilleen. rem ratkeaa juurifonttia vasten, joten kaikki kolme saavat saman
  leveyden. Mitoitettu pisimmälle mahdolliselle arvolle ("2 680–5 980 €"
  summarivin Clash Displaylla, joka on leveämpi kuin rivien "1 300–2 600 €").
*/
.laskuri-sheet {
  --sheet-cols: minmax(0, 1fr) 7.2rem 4.4rem;
  margin-bottom: 18px;
}

/* Kapealla ruudulla nimisarake jää muuten alle 90 px:n, jolloin "Hinnasto tai
   palvelukortit" rivittyy kolmelle riville. Sarakkeet kapenevat yhdessä
   fonttikokojen kanssa, mutta pysyvät rem-yksiköissä eli kohdakkain. */
@media (max-width: 420px) {
  .laskuri-sheet {
    /* Kolmas sarake mahtuu tiukimmillaan summarivin "498 €":oon 1,12rem:n
       Clash Displaylla. 3,3rem leikkasi siitä 6 px pois. */
    --sheet-cols: minmax(0, 1fr) 6.2rem 3.9rem;
  }

  .laskuri-sheet-otsikot,
  .laskuri-rivi-sisus,
  .laskuri-summa {
    gap: 0 6px;
  }

  .laskuri-rivi-sisus {
    font-size: 0.79rem;
  }

  .laskuri-summa-muualla {
    font-size: 0.84rem;
  }

  .laskuri-summa-meilla {
    font-size: 1.12rem;
  }
}

.laskuri-sheet-otsikot,
.laskuri-rivi-sisus,
.laskuri-summa {
  display: grid;
  grid-template-columns: var(--sheet-cols);
  gap: 0 10px;
  align-items: baseline;
}

.laskuri-sheet-otsikot {
  padding-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.laskuri-sheet-otsikot span:nth-child(2),
.laskuri-sheet-otsikot span:nth-child(3) {
  text-align: right;
}

.laskuri-rivit {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  Rivin korkeus animoituu grid-template-rows 1fr → 0fr. Se on ainoa tapa
  animoida "auto"-korkeutta ilman että korkeus kovakoodataan CSS:ään —
  ja rivin korkeus riippuu siitä rivittyykö nimi kahdelle riville.
*/
.laskuri-rivi {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease;
}

.laskuri-rivi.is-off {
  grid-template-rows: 0fr;
  opacity: 0;
}

.laskuri-rivi-sisus {
  min-height: 0;
  overflow: hidden;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
  line-height: 1.35;
  transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-top-width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
  0fr romahduttaa vain SISÄLLÖN. Täyte ja yläreunaviiva jäisivät voimaan, joten
  jokainen piilotettu rivi jättäisi 19 px korkean raon ja irrallisen viivan
  laskelmaan — kolme piilotettua riviä olisi 57 px tyhjää ja kolme viivaa jotka
  eivät erota mitään. Ne on nollattava erikseen.
*/
.laskuri-rivi.is-off .laskuri-rivi-sisus {
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}

.laskuri-rivi-nimi {
  color: var(--text);
}

.laskuri-rivi-lisa {
  display: block;
  margin-top: 1px;
  font-size: 0.74rem;
  color: var(--text-2);
}

.laskuri-rivi-muualla {
  text-align: right;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* "Sisältyy" on ainoa vihreä asia laskelmassa, ja se toistuu joka rivillä.
   Toisto on tarkoitus: se on osion varsinainen viesti. */
.laskuri-rivi-meilla {
  text-align: right;
  font-weight: 600;
  color: var(--brand);
}

.laskuri-summa {
  margin: 0;
  padding-top: 12px;
  border-top: 2px solid var(--ink-deep);
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.laskuri-summa-label {
  font-size: 0.9rem;
}

.laskuri-summa-muualla {
  text-align: right;
  font-size: 0.95rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-decoration-color: rgba(92, 92, 90, 0.5);
}

.laskuri-summa-meilla {
  text-align: right;
  font-size: 1.28rem;
  line-height: 1.05;
  color: var(--brand-dark);
}

.laskuri-summa-meilla s {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-2);
  text-decoration-thickness: 2px;
}

/* -------------------- Erikseen hinnoiteltavat -------------------- */

/*
  Nämä ovat summan ALApuolella eivätkä sen sisällä, koska ne eivät ole mukana
  kummankaan puolen luvussa. Katkoviiva erottaa ne laskelmasta ilman että ne
  katoavat — vanhassa laskurissa erikoistoiminnon valinta ei näkynyt tuloksessa
  lainkaan, mikä teki koko kysymyksestä koristeen.
*/
.laskuri-erikset {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.laskuri-erikset[hidden] {
  display: none;
}

.laskuri-rivi-erikseen .laskuri-rivi-sisus {
  border-top: 0;
  padding: 5px 0;
}

.laskuri-rivi-erillinen {
  grid-column: 2 / -1;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}

.laskuri-erikset-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-2);
}

/* -------------------- Mittasuhdepalkit -------------------- */

/*
  Palkit sanovat saman kuin summarivi, mutta pituutena. Luku 4 300 € vaatii
  kävijältä vertailun 498 €:oon; kuusinkertainen palkki ei vaadi mitään.
  Molemmat on skaalattu samaan 6 000 €:n asteikkoon (js/laskuri.js,
  SKAALA_MAX), joten alempi palkki pysyy paikallaan kun ylempi kasvaa.
*/
.laskuri-palkit {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.laskuri-palkki {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: center;
  gap: 10px;
}

.laskuri-palkki-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.laskuri-palkki-track {
  display: block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--panel-tint);
  overflow: hidden;
}

.laskuri-palkki-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  /* Vinoraidoitus on haarukan yläpää: se osa hinnasta jota ei voi luvata
     tarkasti. Umpinainen osa alla on haarukan alalaita. */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(24, 24, 24, 0.22) 0,
    rgba(24, 24, 24, 0.22) 3px,
    rgba(24, 24, 24, 0.08) 3px,
    rgba(24, 24, 24, 0.08) 7px
  );
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.laskuri-palkki-varma {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--text-2);
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.laskuri-palkki-meilla .laskuri-palkki-label {
  color: var(--brand-dark);
}

.laskuri-palkki-meilla .laskuri-palkki-fill {
  background-image: none;
  background-color: var(--lime);
}

/* -------------------- Säästö -------------------- */

.laskuri-saasto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--ink-deep);
  color: #FFFFFF;
  border-radius: var(--radius);
}

.laskuri-saasto-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--lime);
}

.laskuri-saasto p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  /* Globaali "p { color: var(--text-2) }" (style.css) asettaa värin suoraan
     tähän elementtiin, joten se ei peri .laskuri-saastonin valkoista väriä —
     periytyminen pätee vain jos mikään sääntö ei aseta ominaisuutta itse.
     Tumma harmaa tummalla pohjalla oli lähes näkymätön. */
  color: #FFFFFF;
}

.laskuri-saasto strong {
  display: block;
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* -------------------- Toiminnot -------------------- */

.laskuri-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.laskuri-actions .btn {
  width: 100%;
  text-align: center;
}

.laskuri-disclaimer {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-2);
}

/* Ilman JS:ää laskuri ei laske mitään eikä laskelmassa ole yhtään riviä
   (rivit piirretään js/laskuri.js:ssä), joten koko osio on piilossa ja tilalle
   jää staattinen ohjaus hintasivulle. Sama periaate kuin
   #verkkotunnus-osiossa: tyhjä työkalu näyttäisi rikkinäiseltä. */
.laskuri-nojs {
  text-align: center;
}

.laskuri.is-ready .laskuri-nojs {
  display: none;
}

.laskuri:not(.is-ready) .laskuri-grid {
  display: none;
}

/* Vierivät luvut hoidetaan JS:ssä (kevytLiike), mutta palkit ja rivikorkeudet
   ovat CSS-siirtymiä, joten ne on sammutettava täältä. */
@media (prefers-reduced-motion: reduce) {
  .laskuri-rivi,
  .laskuri-rivi-sisus,
  .laskuri-palkki-fill,
  .laskuri-palkki-varma,
  .laskuri-ruutu,
  .laskuri-ruutu::after {
    transition: none;
  }
}