/* ===============================================================
   Reseptipankki — tyylit

   Väripaletti on äidin valitsema:
     #d8e2dc salvia   #ffe5d9 persikka   #ffcad4 pinkki
     #f4acb7 ruusu    #9d8189 mauve

   Pastellit ovat liian vaaleita kantamaan valkoista tekstiä, joten
   niitä käytetään pintoina ja teksti on syvä luumunsävy, joka on
   johdettu mauvesta. Näin kontrasti riittää myös keittiön valossa.
   =============================================================== */

:root {
  /* Äidin paletti sellaisenaan — näitä käytetään painikkeissa ja
     korosteissa, ja ne pysyvät kirkkaina myös tummassa teemassa. */
  --salvia:   #D8E2DC;
  --persikka: #FFE5D9;
  --pinkki:   #FFCAD4;
  --ruusu:    #F4ACB7;
  --mauve:    #9D8189;

  /* Korttien ja kuvapaikkojen taustasävyt. Tummassa teemassa nämä
     himmenevät, jotta ruudukko ei hehku pimeässä keittiössä. */
  --tintti-salvia:   #D8E2DC;
  --tintti-persikka: #FFE5D9;
  --tintti-pinkki:   #FFCAD4;
  --tintti-ruusu:    #F4ACB7;

  /* Käyttöliittymän sävyt */
  --tausta:        #FFF7F4;
  --pinta:         #FFFFFF;
  --pinta-2:       #FFF1EB;
  --muste:         #43333A;
  --muste-himmea:  #7C6870;
  --viiva:         #F2E1DB;
  --korostus:      #F4ACB7;
  --korostus-pehm: #FFE7EC;
  --korostus-teksti: #4A363B;
  --varjo:         0 1px 2px rgba(67, 51, 58, .05), 0 8px 24px rgba(157, 129, 137, .13);
  --varjo-levy:    0 -6px 44px rgba(67, 51, 58, .18);
  --pyoristys:     20px;
  --sisalto-max:   940px;

  /* Liikkeen sanasto */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-levy:   cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tausta:        #1D1719;
    --pinta:         #2A2226;
    --pinta-2:       #372B30;
    --muste:         #F7EAE6;
    --muste-himmea:  #C3ABB1;
    --viiva:         #3E3236;
    --korostus:      #F4ACB7;
    --korostus-pehm: #453036;
    --korostus-teksti: #2A2226;
    --varjo:         0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .34);
    --varjo-levy:    0 -6px 44px rgba(0, 0, 0, .5);

    --tintti-salvia:   #46534E;
    --tintti-persikka: #55403A;
    --tintti-pinkki:   #5A3B43;
    --tintti-ruusu:    #6B4049;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0 0 calc(78px + env(safe-area-inset-bottom));
  background: var(--tausta);
  color: var(--muste);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Otsikot: iso koko saa tiiviin välistyksen ja rivivälin, leipäteksti ei. */
h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 600;
  margin: 0;
}

h1 { letter-spacing: -0.021em; line-height: 1.12; }
h2 { letter-spacing: -0.014em; line-height: 1.2; }
h3 { letter-spacing: -0.008em; line-height: 1.25; }

a { color: var(--mauve); }

button, .nappi, .siru, .kortti, .alanavi a, .takaisin, .kahva, .arvo-painike {
  -webkit-user-select: none;
  user-select: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1.0625rem;   /* alle 16px saisi iOS:n zoomaamaan kenttään */
  color: inherit;
}

/* Vaaka-asennossa Dynamic Island ja pyöristetyt kulmat vievät tilaa
   sivureunoista, joten sisältö väistää ne turva-alueiden verran. */
.sisalto {
  max-width: var(--sisalto-max);
  margin: 0 auto;
  padding: 0 calc(16px + env(safe-area-inset-right))
           0 calc(16px + env(safe-area-inset-left));
}

/* --- Yläpalkki ------------------------------------------------- */

.ylapalkki {
  padding: calc(env(safe-area-inset-top) + 22px)
           calc(16px + env(safe-area-inset-right)) 8px
           calc(16px + env(safe-area-inset-left));
  max-width: var(--sisalto-max);
  margin: 0 auto;
}

.ylapalkki h1 { font-size: 1.95rem; }

.ylapalkki p {
  margin: 5px 0 0;
  color: var(--muste-himmea);
  font-size: 0.94rem;
}

.takaisin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-right: 12px;
  color: var(--mauve);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}

.takaisin:active { transform: scale(0.96); opacity: .7; }

/* --- Arvontapainike -------------------------------------------- */

.arvo-painike {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  margin: 18px 0 18px;
  border: 0;
  border-radius: var(--pyoristys);
  background: linear-gradient(135deg, var(--ruusu) 0%, var(--pinkki) 100%);
  color: var(--korostus-teksti);
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  box-shadow: var(--varjo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.arvo-painike:active {
  transform: scale(0.975);
  box-shadow: 0 1px 2px rgba(67, 51, 58, .06);
}

.arvo-painike .noppa {
  display: inline-block;
  font-size: 1.15em;
  transition: transform 260ms var(--ease-out);
}

.arvo-painike:active .noppa { transform: rotate(-18deg); }

/* --- Haku ja suodattimet --------------------------------------- */

.hakukentta { position: relative; margin-bottom: 12px; }

.hakukentta input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--viiva);
  border-radius: 15px;
  background: var(--pinta);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hakukentta input:focus {
  border-color: var(--ruusu);
  box-shadow: 0 0 0 3px var(--korostus-pehm);
}

.hakukentta .kuvake {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .45;
  pointer-events: none;
}

.suodattimet {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 2px;
  padding-bottom: 14px;
  padding-left:  max(calc(16px + env(safe-area-inset-left)),
                     calc((100% - var(--sisalto-max)) / 2 + 16px));
  padding-right: max(calc(16px + env(safe-area-inset-right)),
                     calc((100% - var(--sisalto-max)) / 2 + 16px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.suodattimet::-webkit-scrollbar { display: none; }

.siru {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--viiva);
  border-radius: 999px;
  background: var(--pinta);
  color: var(--muste-himmea);
  font-size: 0.94rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 180ms ease,
              color 180ms ease, border-color 180ms ease;
}

.siru:active { transform: scale(0.95); }

.siru[aria-pressed="true"] {
  background: var(--ruusu);
  border-color: var(--ruusu);
  color: var(--korostus-teksti);
}

/* --- Reseptiruudukko -------------------------------------------- */

.ruudukko {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-bottom: 28px;
}

/* Sarakemäärä kasvaa näytön mukana. Puhelimissa (375–440 pt) kaksi
   saraketta pitää kortit luettavan kokoisina; iPadin pystyasennossa
   (820 pt) niitä mahtuu kolme ja vaakatasossa (1180 pt) neljä. */
@media (min-width: 640px) {
  .ruudukko { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (min-width: 1000px) {
  .ruudukko { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.kortti {
  display: block;
  background: var(--pinta);
  border-radius: var(--pyoristys);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--varjo);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.kortti:active {
  transform: scale(0.975);
  box-shadow: 0 1px 2px rgba(67, 51, 58, .05);
}

/* Ensilatauksen porrastettu saapuminen. Suodatus ja haku eivät
   käytä tätä — listan pomppiminen joka näppäinpainalluksella
   tekisi hakemisesta hitaan tuntuista. */
.ruudukko.saapuu .kortti {
  opacity: 0;
  animation: kortti-saapuu 280ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes kortti-saapuu {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.kortti .kuva {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tintti-persikka);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}

.kortti .kuva.salvia   { background: var(--tintti-salvia); }
.kortti .kuva.persikka { background: var(--tintti-persikka); }
.kortti .kuva.pinkki   { background: var(--tintti-pinkki); }
.kortti .kuva.ruusu    { background: var(--tintti-ruusu); }

.kortti .kuva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kortti .sydan {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, .93);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(67, 51, 58, .12);
}

.kortti .teksti { padding: 12px 13px 15px; }

.kortti h3 { font-size: 1.02rem; margin-bottom: 5px; }

.kortti .meta { font-size: 0.8rem; color: var(--muste-himmea); }

/* --- Tyhjä tila ja ilmoitukset ---------------------------------- */

.tyhja {
  text-align: center;
  padding: 48px 24px;
  color: var(--muste-himmea);
  animation: pehmea-saapuu 320ms var(--ease-out) both;
}

.tyhja .iso { font-size: 2.9rem; display: block; margin-bottom: 12px; }

.tyhja h2 { font-size: 1.3rem; color: var(--muste); margin-bottom: 8px; }

@keyframes pehmea-saapuu {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.huomio {
  background: var(--korostus-pehm);
  border: 1px solid var(--viiva);
  border-radius: 15px;
  padding: 16px 18px;
  margin: 16px 0;
  font-size: 0.94rem;
  line-height: 1.55;
}

.huomio h2 { font-size: 1.12rem; margin-bottom: 8px; }

.huomio code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: var(--pinta);
  padding: 1px 5px;
  border-radius: 5px;
}

/* --- Reseptisivu ------------------------------------------------ */

.hero {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--tintti-persikka);
}

.hero-tyhja {
  aspect-ratio: 3 / 2;
  background: var(--tintti-persikka);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.6rem;
}

.hero-tyhja.salvia   { background: var(--tintti-salvia); }
.hero-tyhja.persikka { background: var(--tintti-persikka); }
.hero-tyhja.pinkki   { background: var(--tintti-pinkki); }
.hero-tyhja.ruusu    { background: var(--tintti-ruusu); }

/* Kuva ja teksti saapuvat kahtena ryhmänä, eivät yksitellen. */
.saapuva-kuva { animation: pehmea-saapuu 300ms var(--ease-out) both; }

.saapuva-teksti {
  animation: pehmea-saapuu 320ms var(--ease-out) both;
  animation-delay: 60ms;
}

.resepti-otsikko { margin: 22px 0 10px; }

.resepti-otsikko h1 { font-size: 1.95rem; }

.tiedot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
}

.tieto {
  background: var(--pinta);
  border: 1px solid var(--viiva);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.88rem;
  color: var(--muste-himmea);
}

.osio { margin-bottom: 32px; }

.osio > h2 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pinkki);
}

/* Väliotsikko ainesten ja työvaiheiden sisällä: *Pohja, *Täyte. Erottuu
   leipätekstistä mauven sävyllä muttei kilpaile osion pääotsikon kanssa. */
.osio-otsikko {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--mauve);
  margin: 22px 0 9px;
}

.osio h2 + .osio-otsikko { margin-top: 2px; }

/* Ainekset: rivin voi kuitata tehdyksi kesken kokkaamisen */
.ainekset { list-style: none; margin: 0; padding: 0; }

.ainekset li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 12px;
  border-bottom: 1px solid var(--viiva);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--ease-out);
}

.ainekset li:last-child { border-bottom: 0; }

.ainekset li:active { background: var(--pinta-2); }

.ainekset .ruutu {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  margin-top: 8px;
  border: 2px solid var(--viiva);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: transparent;
  transition: background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
}

.ainekset li.valmis .ruutu {
  background: var(--mauve);
  border-color: var(--mauve);
  color: #FFF7F4;
}

.ainekset li span { padding: 9px 0; }

.ainekset li span.teksti {
  transition: color 150ms var(--ease-out), opacity 150ms var(--ease-out);
}

.ainekset li.valmis span.teksti {
  text-decoration: line-through;
  color: var(--muste-himmea);
  opacity: .65;
}

/* Ohje: numeroidut askeleet */
.askeleet { list-style: none; margin: 0; padding: 0; counter-reset: askel; }

.askeleet li {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.askeleet li::before {
  counter-increment: askel;
  content: counter(askel);
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  background: var(--pinkki);
  color: var(--korostus-teksti);
  font-size: 0.94rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.vinkki {
  background: var(--tintti-salvia);
  border-radius: 15px;
  padding: 15px 17px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muste);
}

/* Painikkeet jakavat rivin tasan ja venyvät täyteen leveyteen jos
   teksti pakottaa ne omalle rivilleen — muuten kapeaan näyttöön jää
   puolityhjiä rivejä. */
.toiminnot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 40px;
}

.toiminnot .nappi { flex: 1 1 auto; }

/* --- Painikkeet ------------------------------------------------- */

.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 15px;
  border: 1px solid var(--viiva);
  background: var(--pinta);
  color: var(--muste);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 160ms ease,
              opacity 160ms ease;
}

.nappi:active { transform: scale(0.97); }

.nappi.paa {
  background: var(--ruusu);
  border-color: var(--ruusu);
  color: var(--korostus-teksti);
  width: 100%;
  min-height: 58px;
  font-size: 1.08rem;
}

.nappi.vaara { color: #A33F4C; }

@media (prefers-color-scheme: dark) {
  .nappi.vaara { color: #F0A0A9; }
}

.nappi:disabled { opacity: .5; }
.nappi:disabled:active { transform: none; }

/* --- Arvonnan alalevy ------------------------------------------- */

.verho {
  position: fixed;
  inset: 0;
  background: rgba(67, 51, 58, .34);
  opacity: 0;
  z-index: 40;
  transition: opacity 400ms var(--ease-levy);
}

.verho.auki { opacity: 1; }

.arpalevy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--pinta);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--varjo-levy);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-levy);
  touch-action: none;
}

.arpalevy.auki { transform: translateY(0); }

/* Vedon aikana levy seuraa sormea suoraan, ilman siirtymää. */
.arpalevy.vetaa { transition: none; }

#arpasisalto {
  opacity: 1;
  transition: opacity 160ms var(--ease-out);
}

.kahva {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--viiva);
  margin: 0 auto 16px;
}

.arpa-ylapuoli {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.arpa-kuva {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: var(--tintti-persikka);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  overflow: hidden;
}

.arpa-kuva.salvia   { background: var(--tintti-salvia); }
.arpa-kuva.persikka { background: var(--tintti-persikka); }
.arpa-kuva.pinkki   { background: var(--tintti-pinkki); }
.arpa-kuva.ruusu    { background: var(--tintti-ruusu); }

.arpa-kuva img { width: 100%; height: 100%; object-fit: cover; }

.arpa-nimi { font-size: 1.4rem; margin-bottom: 4px; }

.arpa-meta { font-size: 0.9rem; color: var(--muste-himmea); }

.arpa-napit { display: flex; gap: 10px; }

.arpa-napit .nappi { flex: 1; min-height: 54px; padding: 0 12px; }

/* --- Lomake ----------------------------------------------------- */

.kentta { margin-bottom: 20px; }

.kentta label {
  display: block;
  font-size: 0.94rem;
  font-weight: 650;
  margin-bottom: 7px;
}

.kentta .ohjeteksti {
  font-size: 0.88rem;
  color: var(--muste-himmea);
  margin: -3px 0 8px;
  line-height: 1.45;
}

.kentta input[type="text"],
.kentta input[type="number"],
.kentta select,
.kentta textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid var(--viiva);
  border-radius: 15px;
  background: var(--pinta);
  outline: none;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.kentta textarea { resize: vertical; min-height: 130px; }

.kentta input:focus, .kentta select:focus, .kentta textarea:focus {
  border-color: var(--ruusu);
  box-shadow: 0 0 0 3px var(--korostus-pehm);
}

.rivi { display: flex; gap: 12px; }
.rivi .kentta { flex: 1; }

.kuvavalinta {
  display: block;
  border: 2px dashed var(--viiva);
  border-radius: var(--pyoristys);
  background: var(--pinta);
  padding: 26px 16px;
  text-align: center;
  color: var(--muste-himmea);
  cursor: pointer;
  overflow: hidden;
  transition: transform 140ms var(--ease-out), border-color 160ms ease;
}

.kuvavalinta:active { transform: scale(0.985); border-color: var(--ruusu); }

.kuvavalinta.taytetty { padding: 8px; border-style: solid; }

.kuvavalinta .iso { font-size: 2.1rem; display: block; margin-bottom: 6px; }

.kuvavalinta img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 13px;
  display: block;
  animation: kuva-saapuu 220ms var(--ease-out) both;
}

@keyframes kuva-saapuu {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.kuvavalinta input { display: none; }

/* --- Alanavigaatio ---------------------------------------------- */

/* Sisältö rullaa läpikuultavan palkin alta. Kova viiva on korvattu
   pehmeällä häivytyksellä, joka erottaa palkin vasta kun sen alle
   tulee sisältöä. */
.alanavi {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: color-mix(in srgb, var(--tausta) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--viiva) 70%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  z-index: 20;
}

.alanavi::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 22px;
  background: linear-gradient(to top, var(--tausta), transparent);
  pointer-events: none;
}

.alanavi a {
  flex: 1;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--muste-himmea);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}

.alanavi a .kuvake {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 160ms var(--ease-out);
}

.alanavi a:active .kuvake { transform: scale(0.88); }

.alanavi a[aria-current="page"] { color: var(--mauve); }

/* --- Muuta ------------------------------------------------------ */

.latautuu {
  text-align: center;
  padding: 60px 20px;
  color: var(--muste-himmea);
}

/* --- Saavutettavuus --------------------------------------------- */

/* Vähennetty liike: siirtymät säilyvät ymmärrettävyyden vuoksi,
   mutta paikanmuutokset ja porrastus poistetaan. */
@media (prefers-reduced-motion: reduce) {
  .ruudukko.saapuu .kortti,
  .kategoriaruudukko.saapuu .kategoriakortti {
    animation: haipyy-esiin 200ms ease both;
    animation-delay: 0ms;
  }

  .tyhja, .saapuva-kuva, .saapuva-teksti, .kuvavalinta img {
    animation: haipyy-esiin 200ms ease both;
  }

  @keyframes haipyy-esiin {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .ryhma-sisus { transition: visibility 1ms; }
  .ryhma .nuoli { transition: none; }

  .arpalevy {
    transition: opacity 220ms ease;
    transform: none;
    opacity: 0;
  }

  .arpalevy.auki { opacity: 1; }

  a.kategoriakortti:active, .valintasiru:active, .tieto-linkki:active,
  .kortti:active, .nappi:active, .arvo-painike:active,
  .siru:active, .takaisin:active, .kuvavalinta:active,
  .alanavi a:active .kuvake, .arvo-painike:active .noppa {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .alanavi {
    background: var(--tausta);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --viiva: #B79FA6; --muste-himmea: #5E4A51; }
  .kortti, .nappi, .tieto { border: 1px solid var(--viiva); }
}


/* --- Kategoriasivu ---------------------------------------------- */

/* Ryhmät ovat aluksi kiinni, jotta molemmat otsikot mahtuvat ruudulle
   kerralla — muuten leivonta jäisi ensisilmäyksellä näkymättä. */
.ryhma {
  background: var(--pinta);
  border-radius: var(--pyoristys);
  box-shadow: var(--varjo);
  margin-bottom: 14px;
  overflow: hidden;
}

.ryhma-otsikko {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 78px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 160ms var(--ease-out);
}

.ryhma-otsikko:active { background: var(--pinta-2); }

.ryhma-merkki {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--tintti-persikka);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.ryhma:nth-of-type(2) .ryhma-merkki { background: var(--tintti-pinkki); }

.ryhma-teksti { flex: 1; min-width: 0; }

.ryhma-nimi {
  display: block;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.014em;
}

.ryhma-kuvaus {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  color: var(--muste-himmea);
}

.ryhma .nuoli {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muste-himmea);
  transition: transform 240ms var(--ease-out);
}

.ryhma.auki .nuoli { transform: rotate(180deg); }

/* Ruudukon rivikorkeus 0fr–1fr on ainoa tapa animoida tuntematon
   korkeus ilman mittaamista. Sisältö pysyy koko ajan asettelussa,
   joten liike toimii yhtä pehmeästi molempiin suuntiin. */
.ryhma-sisus {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 280ms var(--ease-out), visibility 280ms;
}

.ryhma.auki .ryhma-sisus {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* Vierityskerros ja pehmuste eri elementteihin: border-box-laatikossa
   pehmuste ei kutistu nollaan, joten suljettu ryhmä jäisi muuten
   pehmusteen korkuiseksi raoksi. */
.ryhma-sisus > .ryhma-sisalto {
  overflow: hidden;
  min-height: 0;
}

.ryhma-sisalto > .kategoriaruudukko { padding: 0 14px 16px; }

/* Puhelimessa yksi sarake: kategorianimet ovat pitkiä ("Keksit ja
   pikkuleivät"), ja kahdessa sarakkeessa ne katkeaisivat kolmelle
   riville. Leveämmillä näytöillä sarakkeita mahtuu useampi. */
.kategoriaruudukko {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.kategoriakortti {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px 12px 12px;
  background: var(--pinta);
  border-radius: 16px;
  box-shadow: var(--varjo);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

a.kategoriakortti:active {
  transform: scale(0.985);
  box-shadow: 0 1px 2px rgba(67, 51, 58, .05);
}

.kategoriakortti .merkki {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--tintti-persikka);
}

.kategoriakortti .merkki.salvia   { background: var(--tintti-salvia); }
.kategoriakortti .merkki.persikka { background: var(--tintti-persikka); }
.kategoriakortti .merkki.pinkki   { background: var(--tintti-pinkki); }
.kategoriakortti .merkki.ruusu    { background: var(--tintti-ruusu); }

.kategoriakortti .nimi {
  flex: 1;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
}

.kategoriakortti .maara {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--muste-himmea);
  text-align: right;
}

/* Tyhjä kategoria näkyy listalla mutta ei ole avattavissa — muuten
   sen napauttaminen veisi tyhjään näkymään. */
.kategoriakortti.tyhjana {
  box-shadow: none;
  background: transparent;
  border: 1px dashed var(--viiva);
  opacity: .62;
}

.kategoriaruudukko.saapuu .kategoriakortti {
  opacity: 0;
  animation: kortti-saapuu 280ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}


/* --- Monivalinta lomakkeella ------------------------------------- */

.valintaryhma {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}

.valintaryhma legend {
  padding: 0;
  font-size: 0.94rem;
  font-weight: 650;
  margin-bottom: 7px;
}

.valintaosio { margin-bottom: 14px; }

.valintaosio h3 {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--muste-himmea);
  margin-bottom: 8px;
}

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

.valintasiru {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--viiva);
  border-radius: 999px;
  background: var(--pinta);
  color: var(--muste-himmea);
  font-size: 0.94rem;
  font-weight: 550;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 140ms var(--ease-out), background-color 180ms ease,
              color 180ms ease, border-color 180ms ease;
}

.valintasiru:active { transform: scale(0.95); }

.valintasiru[aria-pressed="true"] {
  background: var(--ruusu);
  border-color: var(--ruusu);
  color: var(--korostus-teksti);
}

/* --- Reseptisivun uudet merkinnät --------------------------------- */

.tieto-linkki {
  text-decoration: none;
  color: var(--muste);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}

.tieto-linkki:active { transform: scale(0.96); background: var(--pinta-2); }

.tiedot.raaka-aineet { margin: -14px 0 20px; }

.tieto.raaka-aine {
  background: var(--tintti-salvia);
  border-color: transparent;
  color: var(--muste);
}

.lisaaja {
  margin: 0 0 20px;
  font-size: 0.94rem;
  color: var(--muste-himmea);
}

.lisaaja strong { color: var(--muste); font-weight: 650; }

/* --- Tuonti ja vienti --------------------------------------------- */

.sivulinkki {
  margin: 6px 0 34px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muste-himmea);
}

.tuolaatikko { padding: 22px 16px; }

.koodilohko {
  background: var(--pinta);
  border: 1px solid var(--viiva);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  margin: 0;
}

.tuoyhteenveto {
  background: var(--korostus-pehm);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.tuolista { list-style: none; margin: 0 0 16px; padding: 0; }

.tuorivi + .tuorivi { border-top: 1px solid var(--viiva); }

.tuorivi label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tuorivi input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--mauve);
}

.tuorivi-teksti { flex: 1; min-width: 0; }

.tuorivi-nimi {
  display: block;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.tuorivi-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--muste-himmea);
}

.liput { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.lippu {
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tintti-persikka);
  color: var(--korostus-teksti);
}

.lippu.kaksoiskappale { background: var(--tintti-ruusu); }

/* ===============================================================
   Leveät näytöt

   Puhelimet osuvat välille 375–440 pt, joten perustyylit on
   mitoitettu sinne. Nämä säännöt sovittavat saman käyttöliittymän
   11 tuuman iPadille (820 pt pystyssä, 1180 pt vaakatasossa) ilman
   että mistään tulee venytettyä.
   =============================================================== */

@media (min-width: 700px) {
  body { font-size: 1.09rem; }

  .ylapalkki { padding-top: calc(env(safe-area-inset-top) + 30px); }
  .ylapalkki h1 { font-size: 2.5rem; }
  .ylapalkki p { font-size: 1.03rem; }

  /* Täysleveä arvontapainike näyttäisi tabletilla venytetyltä, joten
     se kutistuu omaan mittaansa ja haku täyttää loput rivistä. */
  .ohjaimet {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 20px;
  }

  .arvo-painike {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 28px;
  }

  .hakukentta { flex: 1; margin-bottom: 0; }

  .hakukentta input { min-height: 62px; }

  .siru { min-height: 44px; padding: 0 18px; font-size: 1rem; }

  .kortti h3 { font-size: 1.12rem; }
  .kortti .meta { font-size: 0.86rem; }
  .kortti .kuva { font-size: 3rem; }

  /* Alanavigaatio keskitetään: 1180 pistettä leveä palkki, jonka
     päissä on kolme kuvaketta, pakottaisi silmän laidasta laitaan. */
  .alanavi { justify-content: center; }
  .alanavi a { flex: 0 0 150px; }
  .alanavi a { font-size: 0.78rem; }
  .alanavi a .kuvake { font-size: 1.45rem; }

  /* Kuva ei saa täyttää koko näyttöä ennen kuin ohjeeseen pääsee. */
  .hero, .hero-tyhja {
    aspect-ratio: auto;
    height: 40vh;
    max-height: 420px;
  }

  .hero-tyhja { font-size: 6rem; }

  .resepti-otsikko h1 { font-size: 2.5rem; }

  .osio > h2 { font-size: 1.45rem; }

  .toiminnot .nappi { min-height: 56px; }

  .nappi.paa { width: auto; min-width: 260px; }

  .arpalevy { padding-left: 26px; padding-right: 26px; }

  .kategoriaruudukko { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ryhma-otsikko h2 { font-size: 1.7rem; }
}

/* Ainekset ja työvaiheet rinnakkain. Keittiössä iPad on tyypillisesti
   pystyssä tasolla, jolloin molemmat näkyvät kerralla eikä reseptiä
   tarvitse rullata edestakaisin kesken kokkaamisen. */
@media (min-width: 820px) {
  .resepti-palstat {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
    gap: 20px 44px;
    align-items: start;
  }

  .askeleet li { margin-bottom: 20px; }
}

@media (min-width: 1000px) {
  :root { --sisalto-max: 1160px; }

  .kategoriaruudukko { grid-template-columns: repeat(3, 1fr); }

  /* Luettavuus menisi pilalle, jos leipäteksti venyisi yhtä leveäksi
     kuin ruudukko, joten reseptisivu pysyy kapeampana. */
  .resepti-sivu .sisalto { max-width: 1000px; }
}