/* Agentit ja työn uusjako — Kamoon Digital "Pohjoismainen raikas" tokens */

:root {
  --wine: #CC0033;
  --wine-700: #A30029;
  --petrol: #107C82;
  --amber: #E3A130;
  --ink: #16181D;
  --navy: #1C2333;
  --slate: #334155;
  --gray: #666666;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --hairline: #E4E6EA;
  --greige: #F2EEE7;
  --greige-korostus: #EAE4DA;
  --shadow-rest: 0 1px 2px rgba(22, 24, 29, .06);
  --shadow-lift: 0 4px 12px rgba(22, 24, 29, .10);
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3, .num { font-family: var(--font-head); letter-spacing: -0.02em; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.measure { max-width: 720px; }

/* Header */
.site-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-header img { height: 28px; display: block; }

.eyebrow {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Hero */
.hero { padding: 72px 0 48px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.08; margin: 12px 0 20px; }
.hero .lead { font-size: 21px; color: var(--slate); margin: 0; }
.hero .lead-secondary { margin-top: 18px; }

/* Sections */
section { padding: 40px 0; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.section-head .num { color: var(--wine); font-size: 28px; font-weight: 700; }
.section-head h2 { font-size: clamp(24px, 4vw, 32px); margin: 0; }
section p { color: var(--slate); }
section p strong { color: var(--ink); }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
}
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-delighter { background: var(--wine); }
.dot-performance { background: var(--petrol); }
.dot-hygiene { background: var(--slate); }
.dot-reverse { background: var(--amber); }

/* Labra. Ohjeistuksen mukaan interaktiivinen työkalu on mittalaite: yksi
   täsmällinen suorakulmainen ulkokehys, ei pyöristettyä ja varjostettua korttia
   (asiasivu-skilli, kiellot 3 ja 6). Sääntö oli aiemmin
   pyöristetty ja jokainen toimituksellinen moduuli kumosi sen erikseen, mikä
   jätti moduulit 2–8 ja en/ ajautumaan. Kehys ratkaistaan nyt täällä kerran. */
.lab {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: 28px;
}

/* Slider */
.slider-row { margin-bottom: 20px; }
.slider-row label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 8px;
}
.slider-row .year-now {
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--wine);
  cursor: pointer;
}
.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--gray);
}
.slider-caption { font-size: 14px; color: var(--gray); margin-top: 4px; }

/* Chart */
.chart-wrap { position: relative; margin: 8px 0 4px; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.curve { fill: none; stroke-width: 2.5; }
.curve-delighter { stroke: var(--wine); }
.curve-performance { stroke: var(--petrol); }
.curve-hygiene { stroke: var(--slate); }
.curve-reverse { stroke: var(--amber); stroke-dasharray: 6 5; }
.axis { stroke: var(--hairline); stroke-width: 1.5; }
.axis-label {
  font-family: var(--font-head);
  font-size: 12px;
  fill: var(--gray);
  letter-spacing: .06em;
}

/* Feature dots on the chart */
.dot {
  stroke: #fff;
  stroke-width: 2;
  transition: cx .5s var(--ease), cy .5s var(--ease);
  pointer-events: none;
}
.dot[data-class="delighter"] { fill: var(--wine); }
.dot[data-class="performance"] { fill: var(--petrol); }
.dot[data-class="hygiene"] { fill: var(--slate); }
.dot[data-class="reverse"] { fill: var(--amber); }
.dot.selected { stroke: var(--ink); r: 9px; }
.dot-label {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  fill: var(--ink);
}

/* Feature chips (selector list below the chart) */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chip {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-rest);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.chip[data-class="delighter"]::before { background: var(--wine); }
.chip[data-class="performance"]::before { background: var(--petrol); }
.chip[data-class="hygiene"]::before { background: var(--slate); }
.chip[data-class="reverse"]::before { background: var(--amber); }
.chip:hover { box-shadow: var(--shadow-lift); }
.chip.selected { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(204, 0, 51, .18); }

/* Feature detail panel */
.panel {
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.panel h3 { margin: 0 0 4px; font-size: 20px; }
.class-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  margin-bottom: 12px;
}
.class-tag[data-class="delighter"] { background: var(--wine); }
.class-tag[data-class="performance"] { background: var(--petrol); }
.class-tag[data-class="hygiene"] { background: var(--slate); }
.class-tag[data-class="reverse"] { background: var(--amber); color: var(--ink); }

.price-block .label,
.omit-block .label {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.meter {
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  margin-bottom: 10px;
}
.meter > div {
  height: 100%;
  background: var(--wine);
  border-radius: 999px;
  transition: width .5s var(--ease), background-color .5s var(--ease);
}
#price-label { margin: 0; font-size: 16px; }

.omit-block label.toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
}
.omit-block input { accent-color: var(--wine); width: 18px; height: 18px; margin-top: 4px; }
#omit-consequence {
  margin: 10px 0 0;
  font-size: 16px;
  border-left: 3px solid var(--hairline);
  padding-left: 14px;
}
#omit-consequence.severe { border-left-color: var(--wine); }
#omit-consequence.good { border-left-color: var(--petrol); }

/* Reading promise — what the reader can do after the module */
.promise {
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin: 28px 0 0;
}

/* Kokeile-ohjeet labran sisällä (lyhytkoodi kokeilut, vaihtoehto E 13.10.2026).
   Ohje on mittalaitteen viimeinen alue: hiusviiva erottaa sen tuloksista,
   meripihkainen lippu kertoo lajin, ja numerot tulevat listasta. Lippu on
   tekstinä tummempi meripihka, jotta se on luettava valkoisella pinnalla.
   Mallin rajat (varaus labra="1") on samalla tavalla labran viimeinen alue
   ohjeiden jälkeen, petrolinvärisellä lipulla: lukija, joka ohittaa labran,
   ohittaa myös sen rajaukset. */
.lab-ohje,
.lab-varaus { border-top: 1px solid var(--hairline); margin-top: 20px; padding-top: 14px; }
.lab-ohje .lippu,
.lab-varaus .lippu {
  font-family: var(--font-head); font-size: 12px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: #B57611; margin: 0 0 6px;
}
.lab-varaus .lippu { color: var(--petrol); }
.lab-ohje ol { margin: 0; padding-left: 22px; font-size: 16px; color: var(--ink); }
.lab-ohje li + li { margin-top: 8px; }
.lab-ohje li::marker { font-family: var(--font-head); font-weight: 600; color: #B57611; }
.lab-varaus p:not(.lippu) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate); }

/* Vanha kokeile-ohje labran alla. Moduulit eivät käytä tätä enää
   (13.10.2026), ja kokeile-lyhytkoodi kieltäytyy tuottamasta sitä. Säilyy
   vain käsin kirjoitetun en/index.html-sivun vuoksi. */
.try {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 16px;
  margin: 18px 0 0;
}
.try b { font-family: var(--font-head); letter-spacing: .08em; font-size: 13px; color: var(--gray); }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; padding: 64px 0; margin-top: 48px; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); margin: 0 0 12px; }
.cta-band p { color: rgba(255, 255, 255, .78); max-width: 640px; }
.cta-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  background: var(--wine);
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  /* Ohjeistus: painikkeen kulman säde on enintään 2 px. Sääntö oli aiemmin
     var(--radius) eli 12 px, ja vain Kano ja moduuli 5 kumosivat sen, joten
     loput sarjasta ajautui. Kulma ratkaistaan täällä kerran. */
  border-radius: 2px;
  margin-top: 16px;
  transition: background-color .2s var(--ease), transform .12s var(--ease);
}
.cta-btn:hover { background: var(--wine-700); }
.cta-btn:active { transform: translateY(1px); }

/* Footer */
.site-footer { padding: 32px 0 48px; color: var(--gray); font-size: 14px; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* Kano v3 — editorial components */
.definition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.definition-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  padding: 18px;
}
.definition-card[data-class="delighter"] { border-top-color: var(--wine); }
.definition-card[data-class="performance"] { border-top-color: var(--petrol); }
.definition-card[data-class="hygiene"] { border-top-color: var(--slate); }
.definition-card h3 { font-size: 17px; line-height: 1.25; margin: 0 0 8px; }
.definition-card p { font-size: 15px; line-height: 1.5; margin: 0; }
.scope-note {
  background: rgba(16, 124, 130, .07);
  border-left: 4px solid var(--petrol);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
}
/* Nostolaatikko: pääraja ylä- ja alareunassa.

   Värillinen vasen reuna oli tässä aiemmin, ja se on visuaalisen ohjeistuksen
   neljäs kielto — se on juuri se ele, joka tekee sivusta geneerisen. Tilalla on
   ohjeistuksen oma keino: viiva ryhmittelee, ja pääraja rajaa väitteen ylhäältä
   ja alhaalta. Älä palauta reunaa. */
.pull {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(21px, 3.2vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  padding: 20px 0;
  margin: 30px 0;
}
.side-note {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  margin-top: 26px;
  padding: 0 18px;
}
.side-note summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  padding: 16px 28px 16px 0;
}
.side-note > div { border-top: 1px solid var(--hairline); padding: 4px 0 8px; }

/* Metatieto: lohko ei puhu aiheesta vaan moduulista itsestään. Greige on
   sarjan ainoa lämmin sävy ja kertoo lajin jo suljettuna. Varjo pois, koska
   lohko istuu sivulla eikä kellu sen päällä. */
.side-note.metatieto { background: var(--greige); box-shadow: none; }
.side-note.metatieto summary:hover { background: var(--greige-korostus); }

.case-section { background: var(--navy); color: #fff; margin: 40px 0; padding: 64px 0; }
.case-section .section-head h2,
.case-section .pull {
  color: #fff;
  border-top-color: rgba(255, 255, 255, .36);
  border-bottom-color: rgba(255, 255, 255, .36);
}
.case-section .section-head .num { color: #ff6b86; }
.case-section p { color: rgba(255, 255, 255, .78); }
.case-section p strong { color: #fff; }
.case-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
}
.case-numbers div {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  padding: 20px;
}
.case-numbers strong {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(38px, 8vw, 58px);
  line-height: 1;
}
.case-numbers span { color: rgba(255, 255, 255, .72); font-size: 14px; }
.source-line { font-size: 13px; }
.source-line a { text-underline-offset: 3px; }
/* Valkoinen vain tummalla case-osiolla; vaalealla pohjalla (5-data) se katosi. */
.case-section .source-line a { color: #fff; }

/* Kano v3 — interactive lab */
.lab-intro { max-width: 760px; }
.lab-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.feature-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.feature-fieldset legend,
.lab-controls .slider-row > label {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
}
.feature-fieldset .chip-list { margin: 0; }
.custom-feature { display: block; margin-top: 14px; }
.custom-feature span {
  display: block;
  color: var(--gray);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.custom-feature input {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  padding: 9px 11px;
}
.custom-feature input:focus-visible,
.chip:focus-visible,
input[type="range"]:focus-visible,
.cta-btn:focus-visible,
.module-nav a:focus-visible {
  outline: 3px solid rgba(204, 0, 51, .3);
  outline-offset: 3px;
}
.lab-controls .slider-row { margin: 0; }
.lab-visual { max-width: 860px; margin: 18px auto 0; }
.lab-visual .curve { opacity: .2; stroke-width: 2; transition: opacity .3s var(--ease), stroke-width .3s var(--ease); }
.lab-visual .curve.active { opacity: 1; stroke-width: 5; }
.lab-visual .dot-label { font-size: 16px; }
.kano-legend { justify-content: center; margin-top: 0; }
.kano-legend span { opacity: .48; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.kano-legend span.active { border-color: var(--slate); opacity: 1; }

.result-panel {
  background: var(--bg);
  border-radius: var(--radius);
  margin-top: 24px;
  padding: 22px;
}
.result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.result-heading h3 { font-size: 23px; line-height: 1.2; margin: 2px 0 0; }
.result-kicker,
.decision-grid > div > span {
  color: var(--gray);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.impact-grid,
.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.impact-card,
.decision-grid > div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 16px;
}
.impact-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 8px; }
.impact-label span { color: var(--gray); }
.impact-label strong { color: var(--ink); font-family: var(--font-head); }
.impact-card p,
.decision-grid p { color: var(--slate); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.risk-meter > div { background: var(--wine); }
.lab[data-class="delighter"] #price-meter-fill { background: var(--wine); }
.lab[data-class="performance"] #price-meter-fill { background: var(--petrol); }
.lab[data-class="hygiene"] #price-meter-fill { background: var(--slate); }
.decision-grid { margin-top: 14px; }

.action-box {
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: #fff;
  margin: 34px 0 0;
  padding: 28px;
}
.action-box .eyebrow { color: #ff9aae; }
.action-box h3 { color: #fff; font-size: 24px; line-height: 1.25; margin: 8px 0 14px; }
.action-box p { color: rgba(255, 255, 255, .78); }
.action-box p:last-child { margin-bottom: 0; }
.action-box strong { color: #fff; }

.tier-shift {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin: 28px 0;
}
.tier-shift > div:not(.tier-arrow) {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.tier-shift span { color: var(--gray); display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tier-shift strong { display: block; font-family: var(--font-head); font-size: 24px; }
.tier-shift p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.tier-arrow { align-self: center; color: var(--wine); font-family: var(--font-head); font-size: 28px; }

.question-list { counter-reset: kano-question; list-style: none; margin: 24px 0 0; padding: 0; }
.question-list li {
  counter-increment: kano-question;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  border-top: 1px solid var(--hairline);
  padding: 20px 0;
}
.question-list li::before {
  content: counter(kano-question, decimal-leading-zero);
  color: var(--wine);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  grid-row: 1 / span 2;
}
.question-list strong { font-family: var(--font-head); font-size: 18px; line-height: 1.35; }
.question-list span { color: var(--slate); font-size: 15px; margin-top: 5px; }

.references { border-top: 1px solid var(--hairline); padding-top: 48px; }
.references h2 { font-size: 24px; }
.references li { color: var(--slate); font-size: 14px; margin-bottom: 9px; }
.references a { color: var(--petrol); text-underline-offset: 3px; }
.dated {
  color: var(--gray); font-family: var(--font-head);
  font-size: 13px; letter-spacing: .06em;
  margin-top: 18px; text-transform: uppercase;
}

/* Lukemapaneeli labran alla. Oli kopioituna viidessä moduulitiedostossa eikä
   lainkaan täällä, mistä seurasi kaksi eri kokoa ja puuttuva tabular-nums. */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; margin-top: 20px;
  border-top: 1px solid var(--hairline); padding-top: 20px;
}
.stat .label {
  font-family: var(--font-head); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 8px;
}
.stat .value {
  font-family: var(--font-head); font-size: 26px; font-weight: 700;
  line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .note { font-size: 15px; color: var(--slate); margin: 6px 0 0; }

/* Leveä kaavio vieritetään puhelimessa omassa kotelossaan, ei sivua. Sääntö on
   rajattu koteloon: ilman rajausta se pakottaisi 640px myös niille kaavioille,
   joita ei ole kääritty, ja sivu vierisi vaakasuunnassa. */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .chart-scroll .chart-wrap svg { width: 640px; max-width: none; }
}

.module-nav { padding: 18px 0 0; }
/* TIETOINEN POIKKEUS. Tämä on sarjan ainoa komponentti, joka saa olla
   pyöristetty, valkoinen ja varjolla nouseva painike. Se on painike myös
   tehtävältään: moduulin lopussa oleva ainoa toiminto, jonka kuuluu vetää
   puoleensa. Muualla samat piirteet ovat kieltoja 3 ja 6.

   Älä "korjaa" tätä ohjeistuksen mukaiseksi. Perustelu on
   docs/tietoiset-valinnat.md, ja tests/moduulinavigaatio.spec.js kaatuu, jos
   moduulikohtainen tyylitiedosto alkaa taas kumota tätä.

   Reuna on rakenneviiva #C5CBD4 eikä var(--hairline), koska kaksi sivua
   määrittelee tokenin uudelleen ja komponentin pitää näyttää samalta
   kaikilla. */
.module-nav a {
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid #C5CBD4;
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  text-decoration: none;
}
.module-nav a:hover { box-shadow: var(--shadow-lift); }
.module-nav span { color: var(--gray); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.module-nav strong { font-family: var(--font-head); text-align: right; }

@media (max-width: 720px) {
  .panel { grid-template-columns: 1fr; }
  .lab { padding: 18px; }
  .chip { font-size: 12px; padding: 5px 10px; white-space: normal; }
  body { font-size: 16px; }
  .site-header .container { align-items: flex-start; gap: 16px; }
  .site-header img { height: 24px; }
  .header-meta { max-width: 190px; text-align: right; }
  .hero { padding: 54px 0 30px; }
  .hero .lead { font-size: 18px; }
  .definition-grid,
  .lab-controls,
  .impact-grid,
  .decision-grid { grid-template-columns: 1fr; }
  .case-section { margin: 24px 0; padding: 48px 0; }
  .case-numbers { grid-template-columns: 1fr 1fr; gap: 8px; }
  .case-numbers div { padding: 14px; }
  .case-numbers span { font-size: 12px; line-height: 1.35; }
  .result-heading { align-items: flex-start; flex-direction: column; }
  .result-panel { padding: 16px; }
  .axis-label { font-size: 20px; }
  .lab-visual .dot-label { font-size: 23px; }
  .tier-shift { grid-template-columns: 1fr; }
  .tier-arrow { justify-self: center; transform: rotate(90deg); }
  .module-nav a { align-items: flex-start; flex-direction: column; }
  .module-nav strong { text-align: left; }
}

/* Kano v4 — toimituksellinen perusrakenne ja mittalaitemainen labra */
.module-kano {
  /* 1 px rakenneviivat: näkyvät myös heikkokontrastisella näytöllä mutta jäävät
     selvästi 2 px päärajoja kevyemmiksi. */
  --hairline: #C5CBD4;
}
.module-kano .definition-card,
.module-kano .side-note,
.module-kano .impact-card,
.module-kano .decision-grid > div,
.module-kano .action-box,
.module-kano .tier-shift > div:not(.tier-arrow) {
  border-radius: 0;
  box-shadow: none;
}

/* Luokat luetaan toimituksellisena listana, ei värireunaisina kortteina. */
.module-kano .definition-grid {
  gap: 0;
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
}
.module-kano .definition-card {
  background: transparent;
  border: 0;
  padding: 20px;
}
.module-kano .definition-card:first-child { padding-left: 0; }
.module-kano .definition-card:last-child { padding-right: 0; }
.module-kano .definition-card + .definition-card { border-left: 1px solid var(--slate); }
.module-kano .definition-card h3 {
  align-items: center;
  display: flex;
  gap: 10px;
}
.module-kano .definition-card h3::before {
  content: "";
  display: inline-block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  background: var(--slate);
}
.module-kano .definition-card[data-class="delighter"] h3::before { background: var(--wine); }
.module-kano .definition-card[data-class="performance"] h3::before { background: var(--petrol); }

/* Rajaukset ovat toimituksellisia huomioita, eivät kortteja. */
.module-kano .scope-note {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--petrol);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 15px 0 17px;
}
.module-kano .side-note {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 0;
}
.module-kano .side-note > div { padding-right: 18px; }
/* Labran kehyksellä ei ole sisennystä; jokainen alue sisentää itsensä. */
.module-kano .lab-ohje { margin-top: 0; padding: 14px 24px 20px; }

/* Tumma case on harvinainen rytminvaihdos. Numerot eivät tarvitse omia kortteja. */
.module-kano .case-numbers {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .36);
  border-bottom: 1px solid rgba(255, 255, 255, .36);
}
.module-kano .case-numbers div {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 20px 20px 22px 0;
}
.module-kano .case-numbers div + div {
  border-left: 1px solid rgba(255, 255, 255, .36);
  padding-left: 24px;
}

/* Labra käyttäytyy visuaalisesti mittalaitteen tavoin. */
.module-kano .lab {
  border: 1px solid var(--slate);
  padding: 0;
}
.module-kano .lab-controls {
  padding: 24px;
}
.module-kano .lab-visual {
  margin-top: 0;
  padding: 20px 24px 0;
}
.module-kano .chip {
  border-radius: 2px;
  box-shadow: none;
  padding: 8px 11px;
}
.module-kano .chip:hover { border-color: var(--slate); box-shadow: none; }
.module-kano .chip.selected {
  background: var(--wine);
  border-color: var(--wine);
  box-shadow: none;
  color: #fff;
}
.module-kano .chip.selected::before { background: #fff; }
.module-kano .custom-feature input {
  border-radius: 2px;
}
.module-kano .legend span {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 5px 8px;
}
.module-kano .kano-legend span.active {
  box-shadow: inset 0 -2px 0 currentColor;
}
.module-kano .class-tag {
  background: transparent !important;
  border-bottom: 2px solid var(--slate);
  border-radius: 0;
  color: var(--slate);
  padding: 3px 0 5px;
}
.module-kano .class-tag[data-class="delighter"] { border-color: var(--wine); color: var(--wine); }
.module-kano .class-tag[data-class="performance"] { border-color: var(--petrol); color: var(--petrol); }
.module-kano .result-panel {
  background: transparent;
  border-top: 1px solid var(--slate);
  border-radius: 0;
  margin-top: 20px;
  padding: 22px 24px 24px;
}
.module-kano .impact-card,
.module-kano .decision-grid > div {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  padding: 14px 0 0;
}
.module-kano .meter,
.module-kano .meter > div {
  border-radius: 1px;
}

/* Muut rakenteet jatkavat samaa viiva- ja pintakieltä. */
/* Toimintalaatikko on tumma rytminvaihto ilman värillistä yläreunaa: lippu kertoo lajin. */
.module-kano .tier-shift > div:not(.tier-arrow) {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  padding: 17px 0 19px;
}

@media (max-width: 720px) {
  .module-kano .definition-card,
  .module-kano .definition-card:first-child,
  .module-kano .definition-card:last-child {
    padding: 16px 0 18px;
  }
  .module-kano .definition-card + .definition-card {
    border-left: 0;
    border-top: 1px solid var(--slate);
  }
  .module-kano .case-numbers div { padding-right: 12px; }
  .module-kano .case-numbers div + div { padding-left: 14px; }
  .module-kano .lab-controls { padding: 18px; }
  .module-kano .lab-visual { padding: 14px 10px 0; }
  .module-kano .result-panel { padding: 18px; }
  .module-kano .lab-ohje { padding: 14px 18px 18px; }
}

/* Lähdekuva — the cover of a book or the top of an article's first page where
   the work is first named. It borrows the work's authority; it is not
   decoration, so it carries a full reference and no shadow or rounding. */
.lahdekuva {
  float: right;
  width: 50%;
  margin: 6px 0 16px 28px;
}
.lahdekuva img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #C5CBD4;
}
.lahdekuva figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray);
  margin-top: 8px;
}
/* The figure never runs past its section or under a heading: the section
   grows to hold it, and a heading after it starts below it at full width. */
section > .container:has(> .lahdekuva)::after { content: ""; display: block; clear: both; }
/* Only running text wraps: a grid, lab, family or pull beside the figure
   would be squeezed, so every other block starts below it at full width. */
.lahdekuva ~ :not(p, ul, ol) { clear: both; }
/* Only a small scan exists: show it near its own size instead of blowing it up. */
.lahdekuva.pieni { width: 180px; }
@media (max-width: 640px) {
  .lahdekuva { float: none; width: 100%; margin: 4px 0 20px; }
  .lahdekuva.pieni { width: 180px; }
}

/* One left edge for reading text. A wide shell exists for the lab and for
   families of parallel blocks; headings, prose, pulls and try-prompts inside
   it sit in the same 672 px column as the hero and every measure section.
   tests/lupaus.spec.js measures every text block against the hero. */
section > .container:not(.measure) > :is(.section-head, p, h3, ul, ol, details, .measure, .try, .lab-intro) {
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}