/* Goodhart-moduuli — lisäykset main.css:n tokenien päälle.
   Ladataan main.css:n jälkeen. Toistaa ne lohkot, jotka se jakaa muiden
   moduulien kanssa (stat-row, pull, dated), koska niiden tyylitiedostoja ei
   ladata tänne. */

/* ---------- histogrammi ---------- */

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

/* Kirjattu jakauma on täytetty, todellinen pelkkä ääriviiva. Painotus on
   argumentti: lukija katsoo sitä, mikä kirjataan, ja totuus jää taustaksi —
   juuri niin kuin organisaatiossakin. */
.palkki { fill: var(--wine); fill-opacity: .82; }
.aariviiva { fill: none; stroke: var(--slate); stroke-width: 2; stroke-linejoin: round; }
.perusviiva { stroke: var(--hairline); stroke-width: 1; }

.raja-viiva { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.raja-lappu {
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; fill: var(--ink);
}

.avain { font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; fill: var(--gray); }
.avain-lati { fill: var(--wine); fill-opacity: .82; }
.avain-viiva { stroke: var(--slate); stroke-width: 2; }

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

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

/* Kynnysmerkki kertoo, millä paineella kuilu aukeaa. Se on tarkoituksella
   merkki eikä luku: sen paikka riippuu mallin vakioista, mutta sen liike on
   mallin sisällä tosi. */
.slider-kehys { position: relative; }
.kynnys {
  position: absolute; top: -3px; width: 0; pointer-events: none;
}
.kynnys i {
  position: absolute; left: -1px; display: block;
  width: 2px; height: 22px; background: var(--ink);
}
.kynnys i::after {
  content: ""; position: absolute; top: -5px; left: -3px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
}

.mittari-napit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mittari-nappi {
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  color: var(--slate); background: transparent;
  border: 1px solid var(--hairline); padding: 7px 14px; cursor: pointer;
}
.mittari-nappi:hover { border-color: var(--slate); }
.mittari-nappi[aria-pressed="true"] {
  color: #fff; background: var(--ink); border-color: var(--ink);
}

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

.stat[data-taso="pieni"] .value { color: var(--amber); }
.stat[data-taso="suuri"] .value { color: var(--wine); }

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

.mekanismit, .paatokset {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px; margin: 28px 0;
}
.mekanismi, .paatos { border-top: 3px solid var(--hairline); padding-top: 16px; }
.mekanismi-katkennut { border-top-color: var(--slate); }
.mekanismi-pelattava { border-top-color: var(--wine); }
.paatos { border-top-color: var(--hairline); }
.paatos-ensin { border-top-color: var(--petrol); }

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

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

/* Nimetty testi: rakenteellinen hiusviiva ja versaalilippu. Pääraja on varattu
   nostolle, joten tässä käytetään kevyempää viivaa, ja merkityksen kantaa lipun
   meripihkainen väri — se on ohjeistuksen väri kokeilulle ja varaukselle. */
.testi { border-top: 1px solid var(--hairline); padding-top: 14px; margin: 30px 0; }
.testi-nimi {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.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;
}

/* ---------- jaetut ---------- */