/* Etusivun karttakortit, polttoainemerkit ja «Minne mennään?» -hakukortti (Rolf 11.10.2026 23.10–23.12).
   Kerrokset liukusäätimen päällä (yopaiva-liuku/lahde/liuku.css). 1 px reunat, ei hehkua eikä varjoja. */
.kk { --yo-glass: rgba(14,17,24,0.62); --pv-glass: rgba(250,251,253,0.80); }
.kk-sec { position: relative; }

/* ---------- Teemat ---------- */
.kk-yo { --tx:#F2F2F2; --tx2:#8B93A7; --ar:#00B4FF; --edge:#00B4FF; --glass:rgba(14,17,24,0.62); --fill:rgba(127,127,140,0.16); --line:rgba(139,147,167,0.22);
  --halpa:#34C77B; --keski:#F2B630; --kallis:#FF6B5E; --fuel:#FE5000; --ev:#30D158; --keli:#00B4FF; --scedge:rgba(0,180,255,0.85); --scbg:rgba(18,20,26,0.80); }
.kk-pv { --tx:#111114; --tx2:#5A6170; --ar:#0077CC; --edge:#0077CC; --glass:rgba(250,251,253,0.80); --fill:rgba(118,118,128,0.12); --line:rgba(90,97,112,0.18);
  --halpa:#1E8E47; --keski:#9A6400; --kallis:#C62F2A; --fuel:#C55A0E; --ev:#1E9E45; --keli:#0077CC; --scedge:rgba(0,128,196,0.75); --scbg:rgba(250,251,253,0.86); }

/* ---------- Alakortit ---------- */
.kk-row { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 8px; z-index: 2; }
.kk-card { box-sizing: border-box; width: var(--cw, 196px); height: 55px; padding: 8px 9px; border-radius: 14px; border: 1px solid var(--edge);
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: none;
  color: var(--tx); display: flex; flex-direction: column; justify-content: center; gap: 2px; text-decoration: none; font-family: "Inter", system-ui, sans-serif; flex: none; }
.kk-card.two { height: 73px; padding: 7px 9px; }
.kk-card .r { display: flex; align-items: center; height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kk-card .n { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kk-card .g { width: 16px; height: 16px; flex: none; margin-right: 5px; }
.kk-card .c { font-size: 13px; font-weight: 600; color: var(--tx2); margin-right: 3px; }
.kk-card .p { font-size: 15px; font-weight: 700; }
.kk-card .d { font-size: 13px; font-weight: 500; color: var(--tx2); }
.kk-card .s { font-size: 13px; color: var(--tx2); opacity: .6; margin: 0 3.5px; }
.kk-card .sp { flex: 1; min-width: 8px; }
.kk-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev); margin-right: 4px; flex: none; }
.kk-card .ok { font-size: 13px; font-weight: 500; color: var(--ev); }
.kk-card .halpa { color: var(--halpa); } .kk-card .keski { color: var(--keski); } .kk-card .kallis { color: var(--kallis); }
.kk-card:hover, .kk-card.is-hover { background: color-mix(in srgb, var(--glass) 100%, var(--edge) 8%); }
.kk-card:focus-visible { outline: 2px solid #F2F2F2; outline-offset: 2px; }
/* tyhjä- ja virhetila */
.kk-card.muted { border-color: var(--line); }
.kk-card .m { font-size: 13px; font-weight: 500; color: var(--tx2); }
.kk-sk { height: 10px; border-radius: 5px; background: var(--fill); }
/* < 1200: kortit kartan alla (ei kartan päällä), vaakavieritys */
.kk-strip { position: relative; display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kk-strip::-webkit-scrollbar { display: none; }
.kk-strip .kk-card { scroll-snap-align: start; }
.kk-attr { margin-top: 10px; font: 500 11px/16px "Inter", system-ui, sans-serif; color: rgba(242,242,242,0.45); }
.kk-attr a { color: inherit; }

/* ---------- Polttoainemerkit ---------- */
.kk-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kk-pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: auto; }
.kk-pin img, .kk-pin svg { width: 100%; height: 100%; display: block; }
.kk-pin.halvin { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.kk-chip { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 8px; border-radius: 11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--halpa); background: var(--scbg); font: 700 12px/1 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--halpa); }
.kk-chip i { font-style: normal; font-weight: 600; color: var(--tx2); }
.kk-pin.halvin .kk-chip { left: 36px; }
@media (max-width: 599px) { .kk-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; } .kk-pin.halvin { width: 28px; height: 28px; margin: -14px 0 0 -14px; } .kk-pin.halvin .kk-chip { left: 32px; } }

/* ---------- Reitti (mockupissa SVG, tuotannossa MapLibre line-kerros) ---------- */
.kk-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- Hakukortti (iPadin pikavalinnat-komponentti, k = 1) ---------- */
.kk-sc { position: absolute; left: 16px; top: 16px; z-index: 6; width: 400px; box-sizing: border-box; padding: 12px; border-radius: 24px;
  background: var(--scbg); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid var(--scedge); box-shadow: none;
  font-family: "Inter", system-ui, sans-serif; color: var(--tx); transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.kk-fld { height: 52px; border-radius: 26px; background: var(--fill); display: flex; align-items: center; gap: 10px; padding: 0 14px 0 15px; font-size: 17px; font-weight: 600; color: var(--tx2); box-sizing: border-box; }
.kk-fld svg.ic { width: 20px; height: 20px; color: var(--ar); flex: none; }
.kk-fld.on { box-shadow: inset 0 0 0 1px var(--ar); background: color-mix(in srgb, var(--fill) 100%, var(--ar) 6%); }
.kk-fld .q { color: var(--tx); }
.kk-fld .caret { width: 2px; height: 22px; border-radius: 1px; background: var(--ar); margin-left: 1px; }
.kk-fld .sp { flex: 1; }
.kk-x { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; color: var(--tx2); flex: none; }
.kk-x.hover { background: var(--fill); color: var(--ar); box-shadow: inset 0 0 0 1px var(--ar); }
.kk-x svg { width: 19px; height: 19px; }
.kk-list { margin-top: 8px; }
.kk-li { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px; border-radius: 14px; box-sizing: border-box; }
.kk-li + .kk-li { box-shadow: inset 0 1px 0 var(--line); }
.kk-li.act { background: color-mix(in srgb, transparent 100%, var(--ar) 12%); box-shadow: inset 0 0 0 1px color-mix(in srgb, transparent 100%, var(--ar) 45%); }
.kk-li .ci { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--fill); color: var(--ar); flex: none; }
.kk-li .ci svg { width: 16px; height: 16px; }
.kk-li .mn { flex: 1; min-width: 0; }
.kk-li .t1 { font-size: 15.5px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-li .t1 b { font-weight: 800; }
.kk-li .t2 { font-size: 13px; font-weight: 500; line-height: 17px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-li .rt { font-size: 13.5px; font-weight: 650; color: var(--tx2); font-variant-numeric: tabular-nums; flex: none; }
.kk-sum { display: flex; align-items: baseline; gap: 8px; margin: 12px 6px 0; font-variant-numeric: tabular-nums; }
.kk-sum b { font-size: 15px; font-weight: 700; } .kk-sum span { font-size: 13px; font-weight: 500; color: var(--tx2); }
.kk-cta { margin-top: 10px; height: 40px; border-radius: 20px; border: 1px solid var(--ar); background: color-mix(in srgb, transparent 100%, var(--ar) 10%);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ar); text-decoration: none; }
.kk-cta .sep { color: var(--tx2); font-weight: 500; }
.kk-cta svg { width: 14px; height: 14px; }
.kk-err { display: flex; gap: 10px; align-items: flex-start; margin: 12px 6px 2px; }
.kk-err svg { width: 18px; height: 18px; color: var(--tx2); flex: none; margin-top: 1px; }
.kk-err b { display: block; font-size: 15px; font-weight: 650; line-height: 20px; } .kk-err span { display: block; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--tx2); }
.kk-load { font-size: 13px; font-weight: 500; color: var(--tx2); margin: 12px 6px 2px; display: flex; align-items: center; gap: 8px; }
.kk-load i { width: 40px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--ar) 55%, var(--fill) 55%); }

/* 820: kortti 360 px */
@media (max-width: 1199px) { .kk-sc { width: 360px; } }
/* 390: hakukortti kartan yläpuolella, ehdotukset kartan päällä */
@media (max-width: 599px) {
  .kk-scwrap { position: relative; height: 66px; margin-bottom: 10px; z-index: 7; }   /* varattu korkeus = lepotilan kortti (8 + 48 + 8 + 2 reunat); muut tilat kasvavat kartan päälle, kartta ei hyppää */
  .kk-sc { left: 0; top: 0; right: 0; width: auto; padding: 8px; border-radius: 22px; }
  .kk-fld { height: 48px; border-radius: 24px; font-size: 16px; }
}

/* ---------- Liukusäätimen Yö/Päivä-tekstit ≥ 1200: ylös viivan viereen (alakulmat ovat korttirivin alla) ---------- */
@media (min-width: 1200px) {
  .kk .yp-tag { top: 14px; bottom: auto; }
  .kk .yp-tag--yo { left: auto; right: calc(100% - var(--pos) + 10px); }
  .kk .yp-tag--paiva { right: auto; left: calc(var(--pos) + 10px); }
}
@media (prefers-reduced-motion: reduce) { .kk-sc { transition: none; } }
/* Pinoaminen: kumpikin kerros oma pinoamiskontekstinsa, jotta Yön merkit/reitti/kortit (z-index) eivät nouse leikatun Päivä-kerroksen päälle. */
.kk .yp-yo { z-index: 0; } .kk .yp-paiva { z-index: 1; }

/* --- Tuotanto (Orja): oikea syötekenttä, napit, merkit markkereina, esimerkkimerkintä --- */
.kk-fld { cursor: text; }
.kk-fld input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0; margin: 0;
  font: inherit; color: var(--tx); caret-color: var(--ar); -webkit-appearance: none; appearance: none; }
.kk-fld input::placeholder { color: var(--tx2); opacity: 1; }
.kk-fld input::-webkit-search-cancel-button { display: none; }
.kk-fld:focus-within { box-shadow: inset 0 0 0 1px var(--ar); background: color-mix(in srgb, var(--fill) 100%, var(--ar) 6%); }
.kk-x { border: 0; padding: 0; background: transparent; cursor: pointer; }
.kk-x:hover, .kk-x:focus-visible { background: var(--fill); color: var(--ar); box-shadow: inset 0 0 0 1px var(--ar); outline: none; }
.kk-x[hidden] { display: none; }
.kk-qp { cursor: pointer; font-family: inherit; }
.kk-qp:focus-visible { outline: 2px solid #F2F2F2; outline-offset: 2px; }
.kk-li { cursor: pointer; }
.kk-li:hover:not(.act) { background: color-mix(in srgb, transparent 100%, var(--ar) 6%); }
.kk-load i { background: linear-gradient(90deg, var(--ar) var(--p, 0%), var(--fill) var(--p, 0%)); }
.kk-cta:focus-visible { outline: 2px solid #F2F2F2; outline-offset: 2px; }
.kk-example { margin: 10px 6px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F2B630; }
.kk-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kk-row[hidden], .kk-strip[hidden] { display: none; }
.kk-row { pointer-events: auto; }
.kk-pv .kk-card, .kk-row.kk-pv { pointer-events: none; }
/* Merkit ovat MapLibre-markkereita: sijainti tulee kirjastolta (ei left/top/margin). */
.kk-pin { position: absolute; margin: 0; cursor: default; }
.kk-pin.halvin { margin: 0; }
.kk-pin .kk-chip { display: none; }
.kk-pin.halvin .kk-chip, .kk-pin.is-hot .kk-chip { display: inline-flex; }
.kk-pin.is-hot:not(.halvin) .kk-chip { left: 32px; }
@media (max-width: 599px) { .kk-pin, .kk-pin.halvin { margin: 0; } }
.kk-start { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ring); position: absolute; }
.kk-start::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--ring); }
.kk .kk-strip { margin-top: 12px; }

/* ---- 12.10.2026: hintarivi, latausmerkit, paikkarivit, teaserin auto (Rolf 23.55–00.00, SPEC §5.4–5.5) ---- */
.kk-row { right: 16px; }                                  /* rivi täytetään dynaamisesti reunasta reunaan */
.kk-strip { overflow: hidden; scroll-snap-type: none; }    /* vain mahtuvat kortit, ei vieritystä */
.kk .kk-strip { margin-top: 12px; }
.kk .kk-strip + .kk-attr { margin-top: 12px; }             /* sama väli kortin ylä- ja alapuolelle */
.kk-pin.ev .kk-chip { left: 32px; }
.kk-li .ci.poi.liikenne { color: var(--ar); background: color-mix(in srgb, transparent 100%, var(--ar) 16%); }
.kk-li .ci.poi.vapaa { color: var(--ok, #34C77B); background: color-mix(in srgb, transparent 100%, var(--ok, #34C77B) 16%); }
.kk-pv .kk-li .ci.poi.vapaa { color: #1E8E47; }
.kk-car { width: 10px; height: 18px; pointer-events: none; }
.kk-car svg { display: block; width: 10px; height: 36px; overflow: visible; }
.kk-car:not(.ajaa) .tr { display: none; }
@media (max-width: 599px) { .kk-car { width: 7.5px; height: 13.5px; } .kk-car svg { width: 7.5px; height: 27px; } }
.kk-sc[data-state="kehote"] .kk-sum, .kk-sc[data-state="kehote"] .kk-cta { animation: kkIn 150ms ease-out; }
@keyframes kkIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kk-sc[data-state="kehote"] .kk-sum, .kk-sc[data-state="kehote"] .kk-cta { animation: none; } }

/* ---------- Kierros 2 (SPEC §11): yhden hinnan kortit, sähkökortin teho ja vapaat ---------- */
.kk-card .kw { margin-left: auto; padding-left: 6px; font-size: 13px; font-weight: 500; color: var(--tx2); flex: none; }
.kk-card .dot.off { background: var(--tx2); }
.kk-card .r .n { flex: 0 1 auto; }
.kk-note { margin-top: 10px; font: 500 11px/16px "Inter", system-ui, sans-serif; color: rgba(242,242,242,0.55); }
.kk-note + .kk-attr { margin-top: 2px; }

/* Etusivun Keli-kortti, graafinen (Rolf 12.10.2026 klo 1.25–1.27). Kartan oikea yläkulma kummassakin liukusäätimen kerroksessa.
   Alakortit-2:n lasi: 1 px teemareuna, säde 14, ei hehkua eikä varjoa. Värit: SPEC §5. */
.kk-keli { position: absolute; right: 16px; top: 16px; z-index: 3; pointer-events: none; }
.kl { --b: var(--kl-c); box-sizing: border-box; height: 55px; padding: 0 12px 0 9px; display: flex; align-items: center; gap: 10px; border-radius: 14px;
  border: 1px solid var(--kl-c); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: none;
  color: var(--tx); font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-yo .kl { --n:#00B4FF; --h:#FFD60A; --v:#FF2D55; --kova:#C2003C; --kl-on:#0E1118; --tile:rgba(127,127,140,0.16); --sepc:rgba(139,147,167,0.28); }
.kk-pv .kl { --n:#0077CC; --h:#9A6400; --v:#B0003A; --kova:#B0003A; --kl-on:#FFFFFF; --tile:rgba(118,118,128,0.12); --sepc:rgba(90,97,112,0.22); }
.kk-pv .kl .b-pakkanen { --b:#FF2D55; } .kk-pv .kl .b-pakkanen b, .kk-pv .kl .b-pakkanen i { color:#B0003A; }
.kl-normaali { --kl-c: var(--n); } .kl-huomio { --kl-c: var(--h); } .kl-varoitus { --kl-c: var(--v); }
/* tienpinta: ruutu 36, säde 10; huomio ja varoitus: sävytetty pohja + 1 px reuna tason värillä, varoituksessa ⚠-merkki */
.kl-pinta { position: relative; flex: none; box-sizing: border-box; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tile); color: var(--kl-c); }
.kl-huomio .kl-pinta, .kl-varoitus .kl-pinta { background: color-mix(in srgb, var(--kl-c) 16%, transparent); border: 1px solid var(--kl-c); }
.kk-pv .kl-huomio .kl-pinta { background: color-mix(in srgb, #FFCC00 26%, transparent); }
.kl-pinta .kl-i { width: 26px; height: 26px; }
.kl-badge { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; }
.kl-badge svg { display: block; width: 16px; height: 16px; }
.kl-sana { margin-left: -4px; font-size: 12px; font-weight: 700; color: var(--kl-c); }
/* lämpötilat: mittari (täyttö −20…+30 °C, väri kaistan mukaan) + «+6 °C» */
.kl-t { display: flex; align-items: center; gap: 1px; color: var(--tx2); }
.kl-t .kl-th { width: 24px; height: 24px; flex: none; }
.kl-t b { font-size: 15px; font-weight: 700; color: var(--b); margin-left: 1px; }
.kl-t i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--b); margin-left: 3px; }
.b-normaali { --b: var(--n); } .b-nolla { --b: var(--h); } .b-pakkanen { --b: var(--v); } .b-kova { --b: var(--kova); }
.kk-yo .kl .b-kova b, .kk-yo .kl .b-kova i { color: var(--v); }      /* #C2003C on lukuna liian tumma Yössä; mittarin täyttö pysyy #C2003C */
.kl-sep { width: 1px; height: 26px; background: var(--sepc); flex: none; margin: 0 -2px; }
/* sää: yksi ikoni (sade > sumu > pilvisyys) + intensiteetti 1–3 pistettä */
.kl-saa { display: flex; align-items: center; gap: 4px; color: var(--tx); }
.kl-saa.w { color: var(--v); }
.kl-saa .kl-i { width: 24px; height: 24px; flex: none; }
.kl-int { display: flex; flex-direction: column-reverse; gap: 2px; }
.kl-int i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .25; }
.kl-int i.on { opacity: 1; }
.kl-n { font-size: 13px; font-weight: 600; }
/* tuuli: nuoli tuulen menosuuntaan (TUULENSUUNTA), «6–9 m/s» */
.kl-tuuli { display: flex; align-items: center; gap: 2px; color: var(--tx); }
.kl-tuuli .kl-i { width: 18px; height: 18px; flex: none; }
.kl-ar { display: inline-flex; }
.kl-tuuli b { font-size: 15px; font-weight: 700; margin-left: 2px; }
.kl-tuuli i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--tx2); margin-left: 3px; }
@media (max-width: 599px) {
  .kk-keli { right: 10px; top: 10px; }
  .kl { height: 50px; gap: 8px; padding: 0 10px 0 7px; }
  .kl-pinta { width: 32px; height: 32px; } .kl-pinta .kl-i { width: 23px; height: 23px; }
  .kl-t .kl-th { width: 22px; height: 22px; }
}

/* Huomio-tason syy-ikoni (Rolf 01.49, kysymys 6): 18 px tason värillä tienpintaruudun jälkeen */
.kl-syy { display: inline-flex; flex: none; color: var(--kl-c); margin-left: -4px; }
.kl-syy .kl-i { width: 18px; height: 18px; }

/* Hinnan ikä (Rolf 02.00): himmennetty toissijainen teksti; ahtaassa kortissa etäisyys pois ennen ikää */
.kk-card .age { font-size: 13px; font-weight: 500; color: var(--tx2); opacity: .7; }
.kk-card .r { overflow: hidden; }
.kk-card.no-d .ds, .kk-card.no-d .d { display: none; }