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

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

.module-valvonta .chart-wrap svg { width: 100%; height: auto; display: block; }

/* Pinnat kertovat merkityksestä: tekeminen on hygieniaa (slate), tarkistaminen
   kaupallista painoa (wine), jäännöstappio varausta (amber). Läpinäkyvyys on
   sama kaikilla, jotta pinojen keskinäinen korkeus luetaan eikä sävyä. */
.module-valvonta .ala-tekeminen { fill: var(--slate); fill-opacity: .30; }
.module-valvonta .ala-tarkistus { fill: var(--wine); fill-opacity: .72; }
.module-valvonta .ala-jaannos { fill: var(--amber); fill-opacity: .72; }

.module-valvonta .kokonaisviiva {
  fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round;
}

.module-valvonta .ristikko { stroke: var(--hairline); stroke-width: 1; }
.module-valvonta .akseli-viiva { stroke: #C5CBD4; stroke-width: 1.5; }
.module-valvonta .perustaso { stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 2 4; }

.module-valvonta .katto-viiva { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.module-valvonta .katto-piste { fill: var(--ink); }
.module-valvonta .katto-lappu {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; fill: var(--ink);
}

.module-valvonta .akseli-teksti,
.module-valvonta .avain {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; fill: var(--gray);
}

/* ---------- säätimet ---------- */

.module-valvonta .slider-row.on-agentti { margin-top: 22px; margin-bottom: 0; }
.module-valvonta .slider-row.on-agentti .year-now { color: var(--amber); }
.module-valvonta .slider-row.on-agentti input[type="range"] { accent-color: var(--amber); }

/* ---------- lukemat ---------- */

.module-valvonta .stat[data-tila="sitoo"] .value { color: var(--wine); }

/* ---------- kolmen elementin perheet ---------- */

/* Agenttikustannuksen kolme osaa ja kolme uloskäyntiä ovat sama komponentti:
   yhteinen rakenne ja yläviiva, ei erillisiä kortteja, ei varjoa eikä
   pyöristystä. Väri kantaa merkityksen, viiva vain rajaa. */
.module-valvonta .osat,
.module-valvonta .uloskaynnit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; margin: 28px 0;
}
.module-valvonta .osa,
.module-valvonta .uloskaynti {
  border-top: 3px solid var(--hairline); padding-top: 16px;
}

.module-valvonta .osa-valvonta { border-top-color: var(--slate); }
.module-valvonta .osa-sitoutus { border-top-color: var(--petrol); }
.module-valvonta .osa-jaannos { border-top-color: var(--amber); }

.module-valvonta .u-halpa { border-top-color: var(--petrol); }
.module-valvonta .u-kapea { border-top-color: var(--slate); }
.module-valvonta .u-sopimus { border-top-color: var(--wine); }

.module-valvonta .osa h3,
.module-valvonta .uloskaynti h3 {
  font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--ink);
}
.module-valvonta .osa p,
.module-valvonta .uloskaynti p {
  font-size: 16px; color: var(--slate); margin: 0 0 10px;
}
.module-valvonta .uloskaynti p b { color: var(--ink); }

/* ---------- kaksi päätöstä ---------- */

.module-valvonta .paatokset {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px; margin: 28px 0;
}
.module-valvonta .paatos { border-top: 3px solid var(--hairline); padding-top: 16px; }
.module-valvonta .paatos-ensin { border-top-color: var(--wine); }
.module-valvonta .paatos h3 {
  font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--ink);
}
.module-valvonta .paatos p { font-size: 16px; color: var(--slate); margin: 0 0 10px; }

/* ---------- nimetty testi ---------- */

/* Hiusviiva ja versaalilippu, kuten moduulissa 7. Pääraja on varattu nostolle. */
.module-valvonta .testi {
  border-top: 1px solid var(--hairline); padding-top: 14px; margin: 30px 0;
}
.module-valvonta .testi-nimi {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.module-valvonta .testi p {
  font-family: var(--font-head); font-size: clamp(19px, 2.8vw, 23px);
  font-weight: 600; line-height: 1.35; color: var(--ink); margin: 8px 0 0;
}

.module-valvonta h3 { font-size: 21px; margin: 32px 0 10px; }