/* Stacey-moduuli — lisäykset main.css:n tokenien päälle.
   Ladataan main.css:n jälkeen ja rajataan body-luokalla .module-stacey,
   jotta tyyli ei vuoda tarkastamattomiin sivuihin. */

/* Moduulisivut kiristävät hiusviivan näkyväksi (docs/visuaalinen-ohjeistus.md,
   Viivahierarkia toteutuksena). Puuttui tästä moduulista ensimmäisestä
   versiosta asti. */
.module-stacey { --hairline: #C5CBD4; }

/* ---------- kaavio ---------- */

/* Teorian kaavio upotetaan lyhytkoodilla kaavio (layouts/partials/kaavio.html).
   Sama rakenne kuin korttien kaaviolla: ei kehystä eikä pintaa, kuvateksti
   rakenneviivan alla. */
.module-stacey .kaavio { margin: 28px 0 32px; }
.module-stacey .kaavio svg { display: block; width: 100%; height: auto; }
.module-stacey .kaavio figcaption {
  font-size: 14px; line-height: 1.45; color: var(--gray);
  margin-top: 10px; padding-top: 8px; border-top: 1px solid #C5CBD4;
}

/* ---------- labra: syötteet ---------- */

.module-stacey .stacey-syotteet { border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.module-stacey .stacey-otsikkorivi,
.module-stacey .stacey-paatos {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(90px, 1fr)) 108px;
  gap: 16px; align-items: center;
}
.module-stacey .stacey-otsikkorivi {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray);
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.module-stacey .stacey-paatos { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.module-stacey .stacey-paatos:last-child { border-bottom: 0; }
.module-stacey .stacey-teksti { display: flex; align-items: center; gap: 10px; margin: 0; }
.module-stacey .stacey-nro {
  flex: 0 0 22px; font-family: var(--font-head); font-weight: 600; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.module-stacey .stacey-teksti input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid #C5CBD4; border-radius: 2px;
  padding: 6px 8px;
}
.module-stacey .stacey-saadin { display: block; margin: 0; }
.module-stacey .stacey-saadin span { display: none; }
.module-stacey .stacey-lukema {
  font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; text-align: right;
}

/* ---------- labra: kytkin ---------- */

/* Kytkin on valinta eikä ensisijainen toiminto, joten se on rajattu
   painike. Valittuna se on kokonaan wine, ohjeistuksen valitun tilan mukaan. */
.module-stacey .stacey-kytkinrivi { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.module-stacey #stacey-kytkin {
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--slate); border-radius: 2px;
  padding: 9px 16px; cursor: pointer;
}
.module-stacey #stacey-kytkin:hover { border-color: var(--wine); }
.module-stacey #stacey-kytkin[aria-pressed="true"] {
  background: var(--wine); border-color: var(--wine); color: #fff;
}

/* ---------- labra: tulos ---------- */

.module-stacey .stacey-tulosalue {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 28px; align-items: start; padding-top: 20px;
}
.module-stacey #stacey-lab-svg { display: block; width: 100%; height: auto; }

.module-stacey #stacey-lab-svg .kehys { stroke: #C5CBD4; stroke-width: 1; fill: none; }
.module-stacey #stacey-lab-svg .akseli,
.module-stacey #stacey-lab-svg .raja { stroke: var(--slate); stroke-width: 2; fill: none; }
.module-stacey #stacey-lab-svg .katko { stroke: var(--slate); stroke-width: 1.25; stroke-dasharray: 5 5; fill: none; }
.module-stacey #stacey-lab-svg .savy-poliittinen { fill: var(--wine); fill-opacity: .08; }
.module-stacey #stacey-lab-svg .savy-arvio { fill: var(--petrol); fill-opacity: .09; }
.module-stacey #stacey-lab-svg .akseli-teksti {
  font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: .13em; fill: var(--slate);
}
.module-stacey #stacey-lab-svg .merkki { stroke: var(--surface); stroke-width: 2.5; }
.module-stacey #stacey-lab-svg .piste-fakta .merkki { fill: var(--petrol); }
.module-stacey #stacey-lab-svg .piste-etu .merkki { fill: var(--wine); }
.module-stacey #stacey-lab-svg .piste-kokeilu .merkki { fill: var(--amber); }
.module-stacey #stacey-lab-svg .numero {
  font-family: var(--font-head); font-weight: 600; font-size: 13px; fill: #fff; pointer-events: none;
}
.module-stacey #stacey-lab-svg .haamu { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 3 3; }
.module-stacey #stacey-lab-svg .jalki { stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 3 4; }

.module-stacey .stacey-tulos { list-style: none; margin: 0; padding: 0; }
.module-stacey .stacey-tulos li { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.module-stacey .stacey-tulos li:first-child { padding-top: 0; }
.module-stacey .stacey-tulos b { display: block; color: var(--ink); }
.module-stacey .stacey-tulos .alueet { display: block; color: var(--slate); }
.module-stacey .stacey-tulos .tulosjono { display: block; font-family: var(--font-head); font-weight: 600; }
.module-stacey .stacey-tulos .tulosjono-fakta { color: var(--petrol); }
.module-stacey .stacey-tulos .tulosjono-etu { color: var(--wine); }
.module-stacey .stacey-tulos .tulosjono-kokeilu { color: var(--slate); }
.module-stacey .stacey-tulos .paljastui { display: block; color: var(--slate); font-style: italic; }

/* ---------- päätös: kaksi jonoa ---------- */

/* Perhe ohjeistuksen mukaan: yhteinen pääraja ylhäällä ja alhaalla,
   pystyviiva jäsenten välissä, neliömerkki otsikon edessä. Väri tulee
   merkistä: petrol analyysille, wine johdon pöydälle. */
.module-stacey .jonot {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  margin: 24px 0;
}
.module-stacey .jono { padding: 20px; }
.module-stacey .jono:first-child { padding-left: 0; }
.module-stacey .jono + .jono { border-left: 1px solid var(--slate); }
.module-stacey .jono h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 19px; margin: 0 0 8px;
}
.module-stacey .jono h3::before { content: ""; flex: 0 0 10px; width: 10px; height: 10px; }
.module-stacey .jono-fakta h3::before { background: var(--petrol); }
.module-stacey .jono-etu h3::before { background: var(--wine); }
.module-stacey .jono p { margin: 0; }

/* ---------- puhelin ---------- */

@media (max-width: 760px) {
  .module-stacey .stacey-otsikkorivi { display: none; }
  .module-stacey .stacey-paatos { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .module-stacey .stacey-lukema { text-align: left; }
  .module-stacey .stacey-saadin span { display: block; font-size: 13px; color: var(--gray); }
  .module-stacey .stacey-tulosalue { grid-template-columns: 1fr; }
  .module-stacey .jonot { grid-template-columns: 1fr; }
  .module-stacey .jono { padding: 18px 0; }
  .module-stacey .jono + .jono { border-left: 0; border-top: 1px solid var(--slate); }
}