/* LOUHOS — kenttäkirjan ulkoasu.
 *
 * Koko käyttöliittymä on yksi kirja: yläreunassa sivun otsikko ja
 * päivämäärä, alareunassa kirjanmerkit joista sivua vaihdetaan.
 *
 * ── SIVUSTO ON TARKOITUKSELLA VAIN VAALEA ───────────────────────────
 * Kenttäkirja on paperia. Tumma tila tekisi siitä ruudun, ja koko
 * ulkoasun idea on ettei tämä näytä ruudulta. `html`-elementille on
 * annettu sama tausta kuin bodylle: ilman sitä iOS piirtää bodyn alle
 * jäävän kaistan valkoisena kotivalikkosovelluksessa.
 *
 * ── TÄMÄ SIVUSTO EI OLE PELTOVIRTA-PALETIN KULUTTAJA ────────────────
 * Kenttäkirjan ilme (kermanvärinen paperi, mustesininen teksti, punakynä)
 * on käyttäjän valitsema ja tarkoituksella eri kuin muiden sivustojen.
 * Siksi `~/paletti.js`:n kuluttajalistaan EI ole lisätty riviä: se
 * vaatisi `--ground`- ja `--ink`-arvot lähteestä ja tekisi tästä
 * saman näköisen kuin muut. Vahdin oma perustelu sanoo saman —
 * «vahti joka vaatisi nekin samoiksi estäisi sivustoja olemasta
 * erilaisia siellä missä niiden KUULUU olla».
 * Kirjasinperheet ovat silti samat, koska ne ovat luettavuutta eivätkä
 * väriä.
 *
 * ── NAPIT EIVÄT SAA JÄÄDÄ RUUDUN ALLE ───────────────────────────────
 * Peli on sovellus (`overflow: hidden`), joten ruudun alle mennyttä
 * nappia EI voi vierittää esiin — se on saavuttamaton, ei hankala.
 * Kriittinen korkeus on ~580 px eli puhelin jossa osoitepalkki näkyy.
 * Siksi: vierivä osa on `main` ja vain se, `min-height: 0` jokaisella
 * flex-lapsella, ja kiinteät korkeudet ovat muotoa `min(px, vh)`.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --display: "Superclarendon", "Bookman Old Style", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --kasiala: "Bradley Hand", "Segoe Script", "Snell Roundhand", cursive;

  --paperi: #f3e9d2;
  --paperi-2: #eadfc4;
  --paperi-3: #e0d3b4;
  --muste: #1f3352;
  --muste-2: #56637b;
  --punakyna: #b23a2e;
  --teippi: #d9cba6;
  --hius: rgba(31, 51, 82, 0.16);
  --kulta: #9a7b28;
}

html, body {
  height: 100%;
  background: var(--paperi);
  color: var(--muste);
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;
  touch-action: manipulation;          /* tuplanapautuksen zoomi pois; nipistys jää */
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Paperin kuitu: kaksi hyvin haaleaa liukuväriä, ei kuvatiedostoa. */
.kirja {
  height: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,51,82,0.055) 27px 28px),
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.5), transparent 60%),
    var(--paperi);
  box-shadow: 0 0 0 1px var(--hius);
  position: relative;
}

/* Punainen marginaaliviiva kuten oikeassa vihossa. */
.kirja::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 34px;
  width: 1px;
  background: rgba(178, 58, 46, 0.28);
  pointer-events: none;
}

/* ── YLÄTUNNISTE ──────────────────────────────────────────────── */
.ylatunniste {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px 8px 44px;
  border-bottom: 1px solid var(--hius);
}
.ylatunniste h1 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ylatunniste .kello {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muste-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── SIVU (ainoa vierivä osa) ─────────────────────────────────── */
main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 18px 44px;
}
.piilo { display: none !important; }

h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}
.paikka {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muste-2);
  margin-bottom: 10px;
}
p { margin-bottom: 10px; }
.pieni { font-size: 13.5px; color: var(--muste-2); }

/* Punakynällä kirjoitettu marginaalimerkintä = vihje. */
.merkinta {
  font-family: var(--kasiala);
  color: var(--punakyna);
  font-size: 17px;
  line-height: 1.3;
  margin: 10px 0 14px;
  padding-left: 16px;
  border-left: 2px solid rgba(178, 58, 46, 0.35);
}

/* Teipattu lappu — käytetään toimeksiannossa ja tuloksissa. */
.lappu {
  position: relative;
  background: var(--paperi-2);
  border: 1px solid var(--hius);
  padding: 12px 14px;
  margin: 12px 0;
  box-shadow: 1px 2px 0 rgba(31, 51, 82, 0.07);
}
.lappu::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 54px; height: 16px;
  transform: translateX(-50%) rotate(-1.5deg);
  background: var(--teippi);
  opacity: 0.85;
  box-shadow: inset 0 0 0 1px rgba(31,51,82,0.08);
}

/* ── NÄYTERIVI ────────────────────────────────────────────────── */
.naytteet {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.nayte {
  flex: none;
  width: min(46px, 12vw);
  height: min(46px, 12vw);
  border: 1.5px solid var(--muste);
  background: var(--paperi-2);
  color: var(--muste);
  font-family: var(--display);
  font-size: 16px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.nayte[aria-pressed="true"] {
  background: var(--muste);
  color: var(--paperi);
}
.nayte.valmis::after {
  content: "✓";
  position: absolute;
  right: -3px; bottom: -5px;
  font-size: 14px;
  color: var(--punakyna);
  font-weight: 700;
}

/* ── NÄYTEKORTTI ──────────────────────────────────────────────── */
.kortti {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.luonnos {
  flex: none;
  width: min(140px, 34vw);
  height: min(120px, 30vw);
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--hius);
}
.havainnot { flex: 1; min-width: 0; }
.havainnot li {
  list-style: none;
  font-size: 14px;
  padding: 2px 0 2px 14px;
  position: relative;
  overflow-wrap: break-word;
}
.havainnot li::before {
  content: "▸";
  position: absolute; left: 0;
  color: var(--punakyna);
  font-size: 11px;
}
.havainnot .tyhja { color: var(--muste-2); font-style: italic; }

/* ── VÄLINEET ─────────────────────────────────────────────────── */
h3 {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muste-2);
  margin: 14px 0 7px;
  border-bottom: 1px solid var(--hius);
  padding-bottom: 3px;
}
.valineet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 1fr ei kutistu alle sisällön */
  gap: 6px;
}
.valine {
  text-align: left;
  background: var(--paperi-2);
  border: 1px solid var(--muste);
  color: var(--muste);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.25;
  padding: 8px 9px;
  border-radius: 3px;
  cursor: pointer;
  overflow-wrap: break-word;
}
.valine b { display: block; font-weight: 600; }
.valine small { color: var(--muste-2); font-size: 11.5px; }
.valine:disabled { opacity: 0.42; cursor: default; }
.valine.tehty { background: transparent; border-style: dashed; }

/* ── NAPIT ────────────────────────────────────────────────────── */
.nappi {
  display: block;
  width: 100%;
  min-height: min(50px, 6.6vh);
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--muste);
  color: var(--paperi);
  border: none;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.nappi.toinen {
  background: transparent;
  color: var(--muste);
  border: 1.5px solid var(--muste);
}
.nappi:disabled { opacity: 0.4; cursor: default; }

.ehdokkaat { display: grid; gap: 6px; margin-top: 8px; }
.ehdokas {
  text-align: left;
  padding: 10px 12px;
  background: var(--paperi-2);
  border: 1px solid var(--muste);
  border-radius: 3px;
  font-family: var(--display);
  font-size: 15px;
  color: var(--muste);
  cursor: pointer;
}

/* Vastauksen palaute — punakynällä, kuten opettajan korjaus. */
.palaute {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--punakyna);
  color: var(--punakyna);
  font-family: var(--kasiala);
  font-size: 17px;
  line-height: 1.32;
}
.palaute.oikein {
  border-color: var(--kulta);
  color: var(--kulta);
}

/* ── KIVIKIRJA ────────────────────────────────────────────────── */
.kirjasivu {
  border-bottom: 1px solid var(--hius);
  padding: 11px 0;
  display: flex;
  gap: 12px;
}
.kirjasivu .luonnos { width: min(96px, 24vw); height: min(80px, 20vw); }
.kirjasivu h4 { font-family: var(--display); font-size: 16px; margin-bottom: 3px; }
.kirjasivu.tuntematon h4 { color: var(--muste-2); }
.rivit { font-size: 13px; }
.rivi { display: flex; gap: 6px; }
.rivi span:first-child { color: var(--muste-2); flex: none; }
.rivi .puuttuu {
  flex: 1;
  border-bottom: 1px dashed var(--muste-2);
  opacity: 0.55;
  margin-bottom: 4px;
}

/* ── KIRJANMERKIT ─────────────────────────────────────────────── */
nav {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hius);
  background: var(--paperi-2);
}
.merkki {
  flex: 1;
  min-width: 0;
  min-height: min(46px, 6.4vh);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px 3px 0 0;
  color: var(--muste-2);
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  overflow-wrap: break-word;
}
.merkki[aria-current="page"] {
  background: var(--paperi);
  border-color: var(--hius);
  border-bottom-color: var(--paperi);
  color: var(--muste);
}

.tahdet { color: var(--kulta); letter-spacing: 0.12em; }
.kytkin {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muste-2); cursor: pointer;
  margin-top: 6px;
}

/* ── KARTTA JA POIKKILEIKKAUS ─────────────────────────────────
 * Molemmat ovat ruudukoita joissa ruutu on nappi. `minmax(0, 1fr)`
 * eikä `1fr`: sisältö ei saa työntää saraketta leveämmäksi, muuten
 * ruudukko vierii vaakasuunnassa puhelimessa.
 */
.kartta, .leikkaus {
  display: grid;
  gap: 2px;
  margin: 12px 0 8px;
  width: 100%;
}
.mruutu, .kruutu {
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 1px solid var(--hius);
  background: rgba(255, 255, 255, 0.35);
  color: var(--muste);
  font-family: var(--body);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
}
.mruutu.tyhja { color: var(--muste-2); background: transparent; }
.mruutu.loyto { background: #e6d9b4; border-color: var(--muste); font-weight: 600; }
.mruutu.kallio { background: var(--muste); color: var(--paperi); font-size: 14px; }
.mruutu.lippu { background: var(--punakyna); color: var(--paperi); font-size: 15px; }
.mruutu.valittu { outline: 2px solid var(--punakyna); outline-offset: -2px; }

/* Kerrosvärit ovat maalajien omia sävyjä eivätkä paletin korostuksia:
   poikkileikkaus on kuva maasta, ei kaavio. */
.kruutu.moreeni  { background: #cbbb99; border-color: #b3a27f; }
.kruutu.sivukivi { background: #9aa0a6; border-color: #7d848b; }
.kruutu.malmi    { background: #6b4a2f; border-color: #4d3520; }
.kruutu.arvio    { box-shadow: inset 0 0 0 2px var(--punakyna); }

.selite {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--muste-2);
  margin-bottom: 10px;
}
.selite b { color: var(--muste); font-weight: 600; }
.selite i.n {
  display: inline-block;
  width: 12px; height: 12px;
  vertical-align: -2px;
  border: 1px solid var(--hius);
  border-radius: 2px;
}
.selite i.moreeni { background: #cbbb99; }
.selite i.sivukivi { background: #9aa0a6; }
.selite i.malmi { background: #6b4a2f; }
.selite i.arvio { box-shadow: inset 0 0 0 2px var(--punakyna); }

/* ★ TARTTUVA VALINTAPANEELI — mitattu vika, ei tyyliseikka.
 * Kartan ruudukko on 423 px korkea puhelimessa. Kun ruutua napautti,
 * lippunappi ilmestyi 217 px ruudun alapuolelle: napautus näytti siltä
 * ettei mitään tapahtunut. Nappi ei ollut saavuttamaton — sen näki
 * vierittämällä — mutta yhdeksänvuotias ei tiedä että pitäisi vierittää
 * kun mitään ei näy.
 * Paneeli tarttuu vierivän alueen alareunaan, joten se on aina siinä. */
.tarttuva {
  position: sticky;
  bottom: -18px;                       /* mainin alatäyte pois näkyvistä */
  margin: 8px -14px -18px -44px;
  padding: 10px 14px 18px 44px;
  background: var(--paperi-2);
  border-top: 1px solid var(--hius);
  box-shadow: 0 -6px 12px -8px rgba(31, 51, 82, 0.28);
}
.tarttuva h3 { margin-top: 0; }
.tarttuva .nappi { margin-top: 8px; }

/* Louhintasuunnitelman esikatselu poikkileikkauksessa: poistettava
   alue punakynällä varjostettuna, kuilu umpinaisena. Kartion
   leveneminen ylöspäin on koko päätöksen perustelu, ja se näkyy vain
   kuvana — hintaluku ei kerro miksi. */
/* ★ Läpinäkyvyys 0,55 haalisti kerrosvärit niin ettei malmia erottanut
   moreenista poistettavalta alueelta — juuri se ero on se mitä kuvasta
   pitäisi lukea. Nyt väri jää ennalleen ja merkintä on punakynän veto. */
.kruutu.poistettava {
  box-shadow: inset 0 0 0 2px rgba(178, 58, 46, 0.85);
  filter: saturate(0.75);
}
.kruutu.kuilu { background: var(--punakyna); opacity: 1; }
.valine.valittu { border-width: 2px; background: var(--paperi-3); }
.valine.kone { display: block; margin-bottom: 6px; }
.valine .omahavainto {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--hius);
  color: var(--punakyna);
  font-family: var(--kasiala);
  font-size: 14px;
}