/* Hetkio — tyylitesti. Theme-tokenien web-vastineet (ios/Hetkio/Theme/Theme.swift).
   Hiljainen luksus: lämmin luu, espresso, pronssiaksentti, serif-otsikot,
   hiusviivat. JOS Theme.swift MUUTTUU, PÄIVITÄ NÄMÄ.
   Synkronoitu design-systemiin 2026-07-20. */

:root {
  /* --- Neutraalit (lämmin) --- */
  --bg: #F4EEE4;
  --panel: #FBF8F2;
  --ink: #2A2521;
  --ink-soft: #756A5E;
  --line: #E5DBCB;

  /* --- Aksentti + signaali --- */
  --accent: #8A6D3B;
  --alert: #A8503C;
  --on-route: #FFFFFF;

  /* --- Teemavärit (routes): 7 kuratoitua maasävyä --- */
  --route-terrakotta: #B06A4E;
  --route-liuskesininen: #5C7C94;
  --route-sammal: #6F7A4C;
  --route-okra: #A98A45;
  --route-luumu: #8A6079;
  --route-teali: #47857B;
  --route-ruusupuu: #9A5D5A;

  /* --- Typografia --- */
  --font-serif: "New York", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --type-station: 28px;
  --type-title: 22px;
  --type-display: 27px;
  --type-prose: 17px;
  --type-name: 17px;
  --type-body: 16px;
  --type-eyebrow: 13px;
  --type-micro: 11px;
  --type-wordmark: 12px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --track-eyebrow: 1.4px;
  --track-wide: 2px;

  --leading-tight: 1.25;
  --leading-prose: 1.55;
  --leading-body: 1.5;

  /* --- Mitat --- */
  --screen-padding: 26px;
  --gap: 14px;
  --section-gap: 30px;

  --radius: 16px;
  --radius-small: 12px;
  --radius-large: 20px;
  --radius-rail: 3px;
  --radius-thin: 2px;

  --hairline: 1px;
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.05);

  /* --- Liike --- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-press: 0.18s;
  --dur-snap: 0.22s;
  --dur-reveal: 0.30s;
  --dur-page: 0.35s;
  --dur-result: 0.45s;

  --press-scale: 0.98;
  --press-opacity: 0.9;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18140F;
    --panel: #211C16;
    --ink: #EDE4D6;
    --ink-soft: #9C8F7D;
    --line: #2E2820;

    --accent: #C9A24B;
    --alert: #C56A54;
    --on-route: #18140F;

    --route-terrakotta: #C8805F;
    --route-liuskesininen: #7C9AB0;
    --route-sammal: #8D976A;
    --route-okra: #C6A45E;
    --route-luumu: #A87E96;
    --route-teali: #64A398;
    --route-ruusupuu: #B87D79;
  }
}

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

/* display:flex-luokat eivät saa yliajaa hidden-attribuuttia (intro/quiz-vaihto). */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--screen-padding);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Sanamerkki ja eyebrow */
.wordmark {
  font-family: var(--font-sans);
  font-size: var(--type-wordmark);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow.accent { color: var(--accent); }

/* Typografia */
h1, .display {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--type-station);
  line-height: var(--leading-tight);
  color: var(--ink);
}
.situation {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--type-display);
  line-height: 1.3;
}
.prose {
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  line-height: var(--leading-prose);
}
.soft { color: var(--ink-soft); }
.micro { font-size: var(--type-micro); color: var(--ink-soft); }

/* Kortit */
.card {
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
button.choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
button.choice:hover { border-color: var(--accent); }
button.choice:active { transform: scale(var(--press-scale)); }

/* Pääkutsu (SignBox-vastine) */
.signbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--accent);
  color: var(--on-route);
  border: none;
  border-radius: var(--radius);
  padding: 17px 22px;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out);
}
.signbox:active { transform: scale(var(--press-scale)); opacity: var(--press-opacity); }

.ghost {
  background: none;
  border: none;
  font: inherit;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 10px;
}

/* Edistymisviiva — hiusviiva, ei mittaristo */
.progress {
  height: 2px;
  background: var(--line);
  border-radius: var(--radius-thin);
  overflow: hidden;
  margin: 18px 0 26px;
}
.progress > div {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width var(--dur-reveal) var(--ease-out);
}

/* Rakenne */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.gap-l { gap: var(--section-gap); }
.spacer { flex: 1; }
header.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
}
footer.bottom {
  padding-top: 40px;
  text-align: center;
}

/* Tulossivu */
.shape-wrap { display: flex; justify-content: center; padding: 8px 0; }
.result-lines { display: flex; flex-direction: column; gap: var(--gap); }
.arki { border-left: 3px solid var(--accent); border-radius: var(--radius-rail); padding: 2px 0 2px 14px; }

/* Essee (/toistovaje/) — pitkä luettava teksti, ei tuotepinta.
   Ingressi kantaa teesin yksin, siksi serif ja väljä; väliotsikot ovat
   kevyempiä kuin h1 jottei sivu näytä osastoidulta luettelolta. */
.lead {
  font-family: var(--font-serif);
  font-size: var(--type-display);
  line-height: 1.35;
  color: var(--ink-soft);
}
/* Lukurail: orientaatio, ei palkinto. Rata on läpinäkyvä — harmaa hiusviiva
   ruudun poikki lukisi rikkinäiseksi yläpalkiksi, ja täyttyvä osa yksin riittää
   kertomaan paljonko on jäljellä. Ei siirtymää: scrollin kanssa 0.3 s viive
   näyttäisi nykivältä. */
.progress.rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  z-index: 2;
}
.progress.rail > div { transition: none; }

.essee { display: flex; flex-direction: column; gap: 18px; }
.essee h2 {
  font-family: var(--font-serif);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 16px 0 -4px;
}
.essee .prose { margin: 0; }
.essee strong { font-weight: var(--weight-semibold); }

.fade-in { animation: fade var(--dur-result) var(--ease-out) both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .progress > div { transition: none; }
}