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

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

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

/* Kaksi käyrää, kaksi merkitystä: projektitie on nykyinen tapa tehdä työtä
   (slate, hygienia), tuotetie on kaupallinen siirtymä (wine). Aktiivinen
   vertailu on tuotetie, joten se on paksumpi. */
.module-tuotteistus .kayra { fill: none; stroke-linejoin: round; }
.module-tuotteistus .kayra-projekti { stroke: var(--slate); stroke-width: 2; }
.module-tuotteistus .kayra-tuote { stroke: var(--wine); stroke-width: 2.5; }

.module-tuotteistus .ristikko { stroke: var(--hairline); stroke-width: 1; }
.module-tuotteistus .akseli-viiva { stroke: #C5CBD4; stroke-width: 1.5; }

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

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

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

.module-tuotteistus .slider-row.on-agentti .year-now { color: var(--amber); }
.module-tuotteistus .slider-row.on-agentti input[type="range"] { accent-color: var(--amber); }

/* Tasosäädin on eri lajia kuin kaksi muuta: sen tehtävä on osoittaa, ettei se
   tee mitään. Se erotetaan omalle alueelleen hiusviivalla eikä laatikolla. */
.module-tuotteistus .slider-row.on-taso {
  border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: 24px;
}

.module-tuotteistus .suhde {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  margin: 18px 0 0;
}
.module-tuotteistus .suhde b { color: var(--ink); font-size: 15px; }

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

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

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

/* Kolme termiä ja kolme päätöskysymystä ovat sama komponentti: yhteinen
   rakenne ja yläviiva, ei erillisiä kortteja, ei varjoa eikä pyöristystä. */
.module-tuotteistus .termit,
.module-tuotteistus .kysymykset {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; margin: 28px 0;
}
.module-tuotteistus .termi,
.module-tuotteistus .kysymys {
  border-top: 3px solid var(--hairline); padding-top: 16px;
}

.module-tuotteistus .termi-yhtenevainen { border-top-color: var(--slate); }
.module-tuotteistus .termi-vakiointi { border-top-color: var(--petrol); }
.module-tuotteistus .termi-loytyminen { border-top-color: var(--wine); }

.module-tuotteistus .kysymys-sama { border-top-color: var(--slate); }
.module-tuotteistus .kysymys-valitsija { border-top-color: var(--wine); }
.module-tuotteistus .kysymys-markkina { border-top-color: var(--petrol); }

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

/* ---------- Brooksin nelikenttä ---------- */

/* Nelikenttä on taulukko eikä neljän kortin ruudukko, koska akselit ovat sen
   sisältö: rivi kertoo irrallisuuden ja sarake järjestelmäriippuvuuden. */
.module-tuotteistus .nelikentta {
  width: 100%; border-collapse: collapse; margin: 26px 0;
  border-top: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
}
.module-tuotteistus .nelikentta th,
.module-tuotteistus .nelikentta td {
  text-align: left; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--hairline); vertical-align: top;
}
.module-tuotteistus .nelikentta tr:last-child td { border-bottom: 0; }
.module-tuotteistus .nelikentta th {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
}
.module-tuotteistus .nelikentta td { font-size: 16px; color: var(--slate); }
.module-tuotteistus .nelikentta .kerroin {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.module-tuotteistus .nelikentta .kerroin-yhdeksan { color: var(--wine); }

/* ---------- rajaus ---------- */

/* Hiusviiva ja versaalilippu, kuten muissa moduuleissa. Pääraja on varattu
   nostolle, eikä värillistä vasenta reunaa käytetä. */
.module-tuotteistus .rajaus {
  border-top: 1px solid var(--hairline); padding-top: 14px; margin: 30px 0;
}
.module-tuotteistus .rajaus-nimi {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.module-tuotteistus .rajaus p {
  font-size: 16px; color: var(--slate); margin: 8px 0 0;
}

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

/* ---------- nelikenttä mobiilissa ---------- */

/* Taulukko pinoutuu allekkain eikä vierity vaakasuunnassa. Sarakkeen nimi
   siirtyy solun omaksi versaalilipuksi, jotta akselit säilyvät luettavina. */
@media (max-width: 640px) {
  .module-tuotteistus .nelikentta,
  .module-tuotteistus .nelikentta tbody,
  .module-tuotteistus .nelikentta tr,
  .module-tuotteistus .nelikentta td { display: block; width: 100%; }

  .module-tuotteistus .nelikentta .otsikkorivi { display: none; }

  .module-tuotteistus .nelikentta tr { border-bottom: 1px solid var(--hairline); }
  .module-tuotteistus .nelikentta tr:last-child { border-bottom: 0; }

  .module-tuotteistus .nelikentta td { border-bottom: 0; padding: 10px 0; }

  .module-tuotteistus .nelikentta .rivi-nimi {
    padding-top: 16px; font-size: 17px; color: var(--ink);
  }

  .module-tuotteistus .nelikentta td[data-sarake]::before {
    content: attr(data-sarake);
    display: block; margin-bottom: 4px;
    font-family: var(--font-head); font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  }
}