/* Kauppalappu (docs/specs/kauppalappu.md) — suunta A "Linjakartta".
 * Tokenit: styles/tokens.css. Kosketuskohteet ≥ 44 px (ui-design.md
 * 4.3/4.7). */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kl-ohje {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.kl-teksti-alue {
  width: 100%;
  box-sizing: border-box;
  min-height: 9rem;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

.kl-teksti-alue:focus,
.kl-lisays input:focus,
.kl-tarkennus input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: transparent;
}

.kl-nappi {
  min-height: 44px;
  padding: 0 var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-accent);
  color: #000;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.kl-nappi[disabled] { opacity: 0.5; cursor: default; }

.kl-nappi-toissijainen {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-hairline);
}

/* Lappu: rivit hyllyvälijärjestyksessä (KL-4) */
ul.kl-rivit {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  border-top: 1px solid var(--color-hairline);
}

.kl-rivi-paa {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
}

.kl-rivi-paa input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-accent);
}

/* Rivin painallus avaa ehdokkaat (KL-6) — koko loppurivi on painike */
.kl-avaa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Kerätty rivi yliviivataan (KL-7) */
.kl-rivi.on-keratty .kl-avaa { text-decoration: line-through; color: var(--color-text-muted); }

/* Nimiö: rivin teksti ja sen alla osaston selite (KL-22) */
.kl-nimio { flex: 1; display: flex; flex-direction: column; }
/* Yksiselitteisen rivin hinta hyllyvälin edessä (KL-18) */
.kl-hinta { color: var(--color-text-muted); flex: none; }
.kl-hylly { color: var(--color-accent); flex: none; }

/* Koodihyllyvälin selite (KL-22) rivin tekstin alla: hyllyvälin vieressä
   pisin osasto (38 merkkiä) kaventaisi rivin tekstin kapealla näytöllä
   muutamaan merkkiin. */
.kl-osasto {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.kl-rivi.on-tunnistamaton .kl-hylly { color: var(--color-text-muted); font-family: var(--font-display); }

/* Kerätyn rivin poisto (KL-17) — näkyy vasta keräysmerkinnän jälkeen */
.kl-poista {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.kl-poista:hover { color: var(--color-alert); }

/* Rivin laajennus (KL-6): kaksi otsikoitua lohkoa ja tarkennushaku
   (KL-20). Laajennus kantaa reunuksen ja pehmusteet, lohkojen listat
   vain oman vierityksensä. */
.kl-laajennus {
  padding: var(--space-2) 0 var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-sm);
}

.kl-lohko-otsikko {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-text-muted);
}

.kl-lohko-otsikko:first-child { margin-top: 0; }

/* Kerralla näkyy viisi tuotetta (5 × 44 px kosketuskohde väleineen),
   loput vierittämällä — kummassakin lohkossa erikseen. */
.kl-ehdokkaat {
  margin: 0;
  padding: 0 0 0 var(--space-4);
  max-height: calc(5 * 44px + 5 * var(--space-1));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Vieritys on kosketuslaitteella näkymätön ilman merkkiä: häivytetty
   alareuna kertoo, että ehdokkaita on lisää. */
.kl-ehdokkaat.on-vierittyy {
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--space-3)), transparent);
}

.kl-ehdokkaat li { margin-bottom: var(--space-1); }

/* Ehdokas on valittavissa riville (KL-19) — 44 px kosketuskohde */
.kl-ehdokas {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-2) 0 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kl-ehdokas .kl-ehdokas-tiedot { color: var(--color-text-muted); }
.kl-ehdokas[aria-pressed="true"] { color: var(--color-accent); }
.kl-ehdokas[aria-pressed="true"]::after { content: " \2713"; }

/* Laajennuksen merkki rivin lopussa (KL-6) */
.kl-kaari {
  flex: none;
  color: var(--color-text-muted);
  transition: transform 120ms ease;
}

.kl-avaa[aria-expanded="true"] .kl-kaari { transform: rotate(90deg); }

/* Tarkennushaku rivin laajennuksessa (KL-20): koko katalogi käyttäjän
   omalla hakusanalla, kun oikea tuote ei ole ehdokaslohkoissa. */
.kl-tarkennus { margin-top: var(--space-3); }

.kl-tarkennus input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

/* Lisäyskenttä muodostetun lapun alla (KL-8) */
.kl-lisays {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.kl-lisays input {
  flex: 1;
  min-width: 12rem;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text);
  font: inherit;
}

.kl-lisays .kl-nappi { margin-top: 0; }

/* Tilaviesti: haku käynnissä (KL-12) tai virhe (KL-11). Mittateksti on
   päällekkäin viestin kanssa ja varaa pisimmän viestin tilan jokaisella
   leveydellä, joten avauksen jälkeen ilmestyvä varoitus ei siirrä kuvausta
   (CLS-budjetti, ui-design.md 4.1). */
.kl-tila-varaus { display: grid; margin-top: var(--space-3); }
.kl-tila-varaus > p { grid-area: 1 / 1; margin: 0; }
.kl-tila-mitta { visibility: hidden; }
.kl-tila { color: var(--color-text-muted); }
.kl-tila.on-virhe { color: var(--color-alert); }

.kl-kuvaus {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}