/* Enterprise module — additions on top of main.css tokens.
   Loaded after main.css. Repeats the blocks it shares with the other modules
   (stat-row, pull, dated), because their stylesheets are not loaded here. */

/* ---------- the chart ---------- */

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

/* The three curves carry different weights on purpose: net is the argument,
   the other two are the working. */
.kayra-netto { fill: none; stroke: var(--ink); stroke-width: 3; }
.kayra-pysyvyys { fill: none; stroke: var(--petrol); stroke-width: 1.75; }
.kayra-kustannus { fill: none; stroke: var(--wine); stroke-width: 1.75; stroke-dasharray: 6 4; }

.kaista-viiva { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 6; }
.huippu-tikku { stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 4 4; }
.oma-tikku { stroke: var(--amber); stroke-width: 1.5; }
.oma-piste {
  fill: var(--amber);
  stroke: #fff;
  stroke-width: 3;
  transition: cx .25s var(--ease), cy .25s var(--ease);
}

.kayra-avain { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.kayra-avain span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 13px; color: var(--gray);
}
.kayra-avain i { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
/* The swatches repeat each curve's colour, weight and dash. They need the
   parent class: `.kayra-avain i` sets the border shorthand and would otherwise
   reset every swatch to the text colour. tests/selite.spec.js guards this. */
.kayra-avain .avain-netto { border-top: 3px solid var(--ink); }
.kayra-avain .avain-pysyvyys { border-top: 2px solid var(--petrol); }
.kayra-avain .avain-kustannus { border-top: 2px dashed var(--wine); }

/* The three positions, named in HTML so they read at any size and line up with
   the band lines drawn inside the SVG. */
.asema-strip {
  display: grid;
  grid-template-columns: 32% 40% 28%;
  gap: 6px;
  margin: 10px 6.7% 0 8.6%;
}
.asema-strip div {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
  border-top: 2px solid var(--hairline);
  padding-top: 6px;
}
.asema-strip .a-gaselli { border-top-color: var(--petrol); color: var(--petrol); }

/* The reader's own slider is the amber one; the other two are the world. */
.slider-row.on-maailma .year-now { color: var(--wine); }
.slider-row.on-maailma input[type="range"] { accent-color: var(--wine); }
.slider-row.on-oma .year-now { color: var(--amber); }
.slider-row.on-oma input[type="range"] { accent-color: var(--amber); }
.slider-row.on-oma { margin-top: 22px; margin-bottom: 0; }

/* ---------- readouts ---------- */

.stat[data-osuu="false"] .value { color: var(--wine); }
.stat[data-osuu="true"] .value { color: var(--petrol); }

@media (prefers-reduced-motion: reduce) { .oma-piste { transition: none; } }

/* ---------- three positions as a table ---------- */

.asemat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 20px;
}
/* Parallel columns like Goodhart's: the coloured top rule names the segment;
   no surface, border or corner (docs/tietoiset-valinnat.md). */
.asema {
  border-top: 3px solid var(--hairline);
  padding-top: 16px;
}
.asema h3 { margin: 0 0 6px; font-size: 18px; }
.asema p { margin: 0 0 10px; font-size: 15px; color: var(--slate); }
.asema p:last-child { margin-bottom: 0; }
.asema .liike {
  display: block; margin-top: 10px;
  font-family: var(--font-head); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.asema-pieni { border-top-color: var(--slate); }
.asema-pieni .liike { color: var(--slate); }
.asema-gaselli { border-top-color: var(--petrol); }
.asema-gaselli .liike { color: var(--petrol); }
.asema-enterprise { border-top-color: var(--wine); }
.asema-enterprise .liike { color: var(--wine); }

/* ---------- pull quote, dated ---------- */

@media (max-width: 720px) {
  .chart-wrap svg { width: 640px; max-width: none; }

  .asema-strip { margin-left: 0; margin-right: 0; grid-template-columns: repeat(3, 1fr); }
}

.nolla-label { font-family: var(--font-head); font-size: 12px; fill: var(--gray); }

/* Toinen kuva: oman aseman diagnoosi. Ei käyrää, koska mekanismi on jo
   kerrottu — jäljellä on vain välimatka omasta painopisteestä huippuun. */
.oma-jana { stroke: var(--slate); stroke-width: 1.5; opacity: .35; }
.oma-vali { stroke: var(--wine); stroke-width: 3; opacity: .55; }
.jana-label { font: 600 11px/1 var(--sans); letter-spacing: .08em; fill: var(--slate); }
.jana-label.huippu-label { fill: var(--petrol); }
#oma-svg .kaista-viiva { stroke: var(--slate); stroke-width: 1; opacity: .18; stroke-dasharray: 3 4; }