/* latauspiste.app – oma asettelu; kortit, taulukot ja merkit tulevat style.css:stä. */
.hinta-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.h-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.h-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); }
.h-card .field { margin-top: 12px; margin-bottom: 0; }
.h-panel { margin-top: 12px; }
.h-panel[hidden] { display: none; }
.h-map { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--surface-3); }
.h-foot { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); line-height: 1.4; }
.h-foot a { color: inherit; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; }
.h-card .seg label { min-height: 38px; }
.h-card .seg-full label { min-width: 0; }

.combo { position: relative; }
.combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.combo-list[hidden] { display: none; }
.combo-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; }
.combo-list li:hover, .combo-list li.on { background: var(--accent-soft); color: var(--accent-ink); }
.combo-list li.none { color: var(--muted); cursor: default; }

.h-ops { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--surface-2); }
.h-ops summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.h-ops-actions { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.h-ops-hint { margin: 0 0 6px; }
.h-ops-list { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.h-ops-list label { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 0.92rem; cursor: pointer; }
.h-ops-list input { width: 18px; height: 18px; flex: none; }

.h-legend { margin-top: 12px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #000; vertical-align: -1px; }
.dot.cheap { background: var(--accent); }
.dot.other { background: var(--browse-other); }
.dot.nop { background: #b9bfbc; }
.h-notice { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 0.9rem; }
.h-notice[hidden] { display: none; }

.h-list-card h2 { margin: 0 0 2px; font-size: 1.02rem; }
.h-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.h-list button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--text); }
.h-list button:hover { border-color: var(--accent); background: var(--accent-soft); }
.h-list .pr { grid-row: span 2; font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; min-width: 64px; }
.h-list .pr small { display: block; font-weight: 500; color: var(--muted); font-size: 0.72rem; }
.h-list .nm { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-list .sub { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; grid-column: 2; }
.h-list .rt { grid-row: span 2; text-align: right; font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.h-list-card .ghost { margin-top: 8px; width: 100%; }

.leaflet-container .h-here { border-radius: 50%; background: #2a7de1; border: 3px solid #fff; box-shadow: 0 0 0 2px rgb(42 125 225 / 0.35); }
.st-pop .afir-links a { margin-right: 6px; }

/* Puhelin kuten tietokone: "Latauspiste.app - Löydä edullisin ja vapaa latauspiste" samalla rivillä (rivittyy tarvittaessa), alla pieni teksti */
@media (max-width: 600px) {
  .brand .brand-dash { display: inline; }
  .brand .brand-tag { display: inline; font-size: inherit; font-weight: 450; line-height: inherit; letter-spacing: inherit; }
  .brand .brand-name { line-height: 1.2; }
}

/* Kartan napit: + / koko Suomi / − sekä GPS-nappi */
.h-ctl a { display: flex; align-items: center; justify-content: center; color: var(--text); }
.h-ctl a.h-fit, .h-ctl a.h-gps-btn { color: var(--accent); }
.h-ctl a:hover { background: var(--surface-2); }
.h-mapmsg { position: absolute; z-index: 800; left: 50%; bottom: 34px; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 0.88rem; text-align: center; }
.h-mapmsg[hidden] { display: none; }
/* Estetyn paikannuksen ilmoitus keskellä karttaa; napautus kartalle läpäisee sen (sulkee ilmoituksen). */
.h-mapmsg.loc-alert { top: 50%; bottom: auto !important; transform: translate(-50%, -50%); width: max-content; max-width: min(380px, calc(100% - 48px)); color: var(--danger); border-color: var(--danger); border-radius: 14px; font-weight: 600; pointer-events: none; }
.st-pop .h-range { margin: 6px 0 2px; font-size: 0.95rem; }

/* Päivitä sivu -symboli yläpalkin oikeassa reunassa */
#refreshBtn { flex: none; }
#refreshBtn.spin svg { animation: h-spin 0.7s linear infinite; }
@keyframes h-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #refreshBtn.spin svg { animation: none; } }

/* Asettelu: yläpalkki (välilehdet + ratas + haku), kartta täyttää loput, lista avautuu kartan päälle */
.h-bar { position: relative; z-index: 1300; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.h-bar-row { display: flex; gap: 8px; align-items: stretch; }
.h-bar-row .seg-full { flex: 1; min-width: 0; }
.h-bar .seg label { min-height: 44px; }
.h-gear, .h-loc, .h-opsbtn { flex: none; width: 52px; min-height: 52px; }
/* Paikannussymboli: käynnissä sykkii, epäonnistunut (lupa estetty tai sijaintia ei saatu) punaisena = napauta uudelleen */
.h-loc.busy { color: var(--accent); border-color: var(--accent); }
.h-loc.busy svg { animation: h-pulse 1s ease-in-out infinite; }
.h-loc.alert { color: var(--danger); border-color: var(--danger); }
@keyframes h-pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .h-loc.busy svg { animation: none; } }
@media (max-width: 420px) {
  .h-gear, .h-loc, .h-opsbtn { width: 44px; }
  .h-bar-row { gap: 4px; }
  .h-bar .seg label { padding: 0 4px; font-size: 0.84rem; }
}
/* Kapein (320 px): välilehdet koko riville, symbolit seuraavalle riville */
@media (max-width: 345px) {
  .h-bar-row { flex-wrap: wrap; }
  .h-bar-row .seg-full { flex: 1 1 100%; }
  .h-bar-row .icon-btn { flex: 1 1 0; width: auto; }
}

/* Suomen latausoperaattorit -lista (käyttäjän pyyntö 9.10.2026) */
.ops-sorts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 14px 0 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ops-sort { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.ops-sort:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ops-sort.on { background: var(--accent); color: var(--accent-text, #fff); box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.ops-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ops-arrow { margin-left: 6px; font-size: 0.72em; }
@media (min-width: 600px) { .ops-sorts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ops-dir { margin: 6px 0 0; color: var(--muted); }
.ops-rank { list-style: none; margin: 8px 0 0; padding: 0; }
.ops-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.ops-row:last-child { border-bottom: 0; }
.ops-n { grid-row: 1 / 3; align-self: start; padding-top: 2px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.ops-name { font-weight: 700; overflow-wrap: anywhere; }
.ops-price { grid-row: 1 / 3; grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ops-price b { display: block; font-size: 1.2rem; }
.ops-price small { color: var(--muted); }
.ops-sub { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: 0.85rem; }
.ops-sub span { white-space: nowrap; }
.ops-sub .hl { color: var(--text); font-weight: 650; }
.ops-row.muted .ops-name { font-weight: 600; color: var(--muted); }
.ops-note { margin: 14px 0 0; color: var(--muted); }
.overload-dlg { text-align: center; max-width: 420px; }
.overload-dlg .ov-emoji { font-size: 2.6rem; line-height: 1.2; margin-top: 4px; }
.overload-dlg h2 { margin: 8px 0; font-size: 1.15rem; }
.overload-dlg p { margin: 0 0 14px; color: var(--muted); }
.overload-dlg .ov-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 600px) { .ops-row { padding: 12px 6px; } .ops-price b { font-size: 1.3rem; } }
.h-bar .h-panel { margin: 0; }
.h-bar .combo input { width: 100%; }
.h-bar .check { margin: 8px 0 0; min-height: 40px; }
.h-sum { margin: 0; color: var(--muted); line-height: 1.3; }
.h-bar .h-notice { margin: 0; }
.h-map { flex: 1; position: relative; min-width: 0; min-height: 0; }
.h-legend-map { position: absolute; z-index: 800; left: 10px; bottom: 28px; margin: 0 !important; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); font-size: 0.75rem; max-width: calc(100% - 20px); }
.h-listbtn { position: absolute; z-index: 800; right: 10px; top: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-weight: 650; box-shadow: var(--shadow); cursor: pointer; }
.h-listbtn:hover { background: var(--accent-soft); }
.h-sheet { position: absolute; z-index: 1200; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.h-sheet[hidden] { display: none; }
.h-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 4px; }
.h-sheet-head h2 { margin: 0; }
.h-sheet-body { overflow-y: auto; padding: 0 14px 14px; overscroll-behavior: contain; }
.dialog .field { margin-top: 16px; margin-bottom: 0; }
.dialog .h-ops-list { max-height: 34vh; }
.h-dlg-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; }
.h-dlg-actions .primary { flex: 1; max-width: 220px; }
#kwSeg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; box-sizing: border-box; }
#kwSeg label { padding: 0 4px; }

@media (min-width: 900px) {
  .h-bar { padding: 12px 16px; }
  .h-bar-row, .h-bar .h-panel, .h-sum { width: min(530px, 100%); }
  .h-sheet { top: 10px; right: 10px; bottom: 10px; width: 400px; border-radius: var(--radius-md); }
  .h-listbtn.on { display: none; }
}
@media (max-width: 899px) {
  .h-sheet { left: 0; right: 0; bottom: 0; max-height: 68%; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .h-sheet-head { padding-top: 14px; }
  /* 16 px:n kenttäfontti (iOS ei zoomaa kenttään) ja isot kosketuskohteet */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea { font-size: 16px; min-height: 48px; }
  .check input, .h-ops-list input { width: 22px; height: 22px; }
  .h-ops-list label { min-height: 44px; font-size: 1rem; }
  .h-ops-actions .small-btn { min-height: 40px; }
  .combo-list li { padding: 12px; font-size: 1rem; }
  .h-list button { min-height: 62px; padding: 10px 12px; }
  .h-list .nm { font-size: 0.98rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .h-list .sub { white-space: normal; }
  .h-foot { font-size: 0.75rem; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}
.h-foot summary { cursor: pointer; padding: 2px 0; }
.h-mapmsg { bottom: 64px; }
@media (max-width: 899px) { .brand small { display: block; font-size: 0.72rem; line-height: 1.3; } }
.h-foot p { margin: 6px 0 2px; }

/* Edullisimman aseman korostus: iso vilkkuva punainen rengas; toiseksi edullisin pienempi punainen rengas */
.h-rank-wrap { pointer-events: none; }
.h-rank { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--rank); background: color-mix(in srgb, var(--rank) 14%, transparent); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.75), 0 0 14px 3px color-mix(in srgb, var(--rank) 55%, transparent); animation: h-blink 1.1s ease-in-out infinite; }
.h-rank-1, .h-rank-2 { border-width: 3px; } /* samankokoiset renkaat (käyttäjän pyyntö 12.10.2026) */
.h-rank-2 { animation-delay: 0.3s; }
@keyframes h-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .h-rank { animation: none; } }

/* Kartta täyttää koko alueensa (inset yksin jätti sen 100 px matalammaksi) */
#map { width: 100%; height: 100%; }
/* style.css:n puhelinsääntö (#map min-height 300 px) ylitti matalan näytön: kartta jäi osin sivun alle ja alareunan tekstit peittyivät (käyttäjän palaute 10.10.2026) */
.h-map #map { height: 100%; min-height: 0; }

/* Kartta ulottuu alareunaan asti: alatunniste poistettu, lähteet ovat asetusikkunassa; liitännäisosat väistävät kotipalkkia */
.h-sources { margin-top: 18px; font-size: 0.85rem; color: var(--text-2); }
.h-sources summary { cursor: pointer; padding: 6px 0; }
.h-sources p { margin: 6px 0 0; line-height: 1.45; }
.h-sources a { color: inherit; }
/* Alareunan tekstit (copyright, lähdemaininta, selite): vähintään 10 px ja iPhonen kotipalkin alueella 60 % turva-alueesta ylöspäin,
   jotta selaimen alapalkki tai kotipalkki ei peitä niitä (käyttäjän palaute 10.10.2026). */
:root { --foot: max(10px, calc(env(safe-area-inset-bottom, 0px) * 0.6)); }
.leaflet-bottom { padding-bottom: var(--foot); }
.h-legend-map { bottom: calc(28px + var(--foot)); }
.h-mapmsg { bottom: calc(64px + var(--foot)); }

/* Päivä-/yötila: liukukytkin asetuksissa */
.h-switch { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; user-select: none; }
.h-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h-track { position: relative; flex: none; width: 58px; height: 32px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color 0.2s; }
.h-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35); transition: transform 0.2s; }
.h-switch input:checked + .h-track { background: var(--accent); }
.h-switch input:checked + .h-track .h-thumb { transform: translateX(26px); }
.h-switch input:focus-visible + .h-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.h-switch:has(input:checked) .h-sw-opt:first-child, .h-switch:has(input:not(:checked)) .h-sw-opt:last-child { color: var(--muted); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .h-track, .h-thumb { transition: none; } }

/* Pallojen värit teholuokan mukaan ja punainen edullisimman korostus */
:root { --kw-low: #f0a04b; --kw-mid: #b4c540; --kw-high: var(--accent); --rank: #e5252a; --rank-text: #c81e24; } /* teksti tummempi: kontrasti ≥ 4,5 (laaja testaus 13.10.2026) */
:root[data-theme="dark"] { --kw-low: #f2b36b; --kw-mid: #c5d65a; --rank: #ff5a5a; --rank-text: #ff5a5a; }
.dot.low { background: var(--kw-low); }
.dot.mid { background: var(--kw-mid); }
.dot.high { background: var(--kw-high); }
.dot.rank { background: transparent; border: 2px solid var(--rank); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7); }
.h-legend-map { border-radius: 16px; }
.st-cluster.kw-low { background: color-mix(in srgb, var(--kw-low) 30%, transparent); border-color: var(--kw-low); }
.st-cluster.kw-mid { background: color-mix(in srgb, var(--kw-mid) 30%, transparent); border-color: var(--kw-mid); }
.st-cluster.kw-high { background: color-mix(in srgb, var(--kw-high) 24%, transparent); border-color: var(--kw-high); }
.st-cluster.ranked { box-shadow: 0 0 0 3px var(--rank), 0 0 10px 2px color-mix(in srgb, var(--rank) 50%, transparent); }

/* Selitteen "edullisin"-merkki: punainen pallo ja sen ulkopuolella toinen, vilkkuva punainen kehä (kuten kartan rengas) */
.dot.rank { position: relative; margin: 0 6px 0 5px; }
.dot.rank::after { content: ""; position: absolute; inset: -6px; box-sizing: border-box; border: 2px solid var(--rank); border-radius: 50%; animation: h-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dot.rank::after { animation: none; } }

/* Copyright vasemmassa alareunassa (Leafletin lähdemaininnan tapaan), linkki sähköpostiin */
.h-copy { position: absolute; z-index: 800; left: 0; bottom: var(--foot); padding: 1px 7px 1px 6px; font-size: 11px; line-height: 1.5; color: var(--text-2); text-decoration: none; background: color-mix(in srgb, var(--surface) 85%, transparent); border-top-right-radius: 4px; }
.h-copy:hover, .h-copy:focus-visible { color: var(--accent); text-decoration: underline; }
/* Versionumero copyrightin perässä (käyttäjän pyyntö 9.10.2026); erotin vasta kun versio on haettu */
.h-copy-ver:not(:empty)::before { content: " · "; }
.h-copy-ver { font-variant-numeric: tabular-nums; }

/* Puhelin (laaja testaus 8.10.2026): kartan napit 44 px, selite yhdelle riville, ilmoitus selitteen yläpuolelle */
@media (max-width: 600px) {
  .leaflet-bar.h-ctl a { width: 44px !important; height: 44px !important; line-height: 44px !important; } /* ohittaa style.css:n .leaflet-bar a 38 px !important */
  .h-legend-map { font-size: 0.7rem; padding: 4px 9px; gap: 2px 7px; flex-wrap: nowrap; white-space: nowrap; }
  .h-legend-map .dot { width: 9px; height: 9px; }
  .h-legend-map .dot.rank { margin: 0 5px 0 4px; }
  .h-legend-map .dot.rank::after { inset: -5px; }
  .h-mapmsg { bottom: calc(66px + var(--foot)); }
}

/* Sädepaneeli: nuolet ja nykyisen säteen arvo kehän kello 3 -pisteessä, pysyy aina näkyvissä (positionRadiusControls) */
.h-rad-wrap { position: absolute; left: 0; top: 0; z-index: 900; display: flex; align-items: center; gap: 8px; pointer-events: none; will-change: transform; }
.h-rad-wrap[hidden] { display: none; }
.h-rad-btn { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid #2a7de1; border-radius: 50%; background: var(--surface); color: #2a7de1; box-shadow: var(--shadow); cursor: pointer; pointer-events: auto; }
.h-rad-btn:hover { background: color-mix(in srgb, #2a7de1 12%, var(--surface)); }
.h-rad-btn.off { opacity: 0.35; cursor: default; }
.h-rad-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Nykyisen säteen arvo nuolten välissä */
.h-rad-val { padding: 3px 9px; border: 2px solid #2a7de1; border-radius: 999px; background: var(--surface); color: #2a7de1; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; font-variant-numeric: tabular-nums; }
/* Puhelin: lyhyt copyright ja pienempi lähdemaininta, jotta ne mahtuvat samalle riville */
@media (max-width: 600px) {
  .h-copy-word { display: none; }
  .h-copy { font-size: 10px; }
  /* Versio omalle rivilleen copyrightin alle (ei mahdu lähdemaininnan viereen); selite ja ilmoitus rivin verran ylemmäs */
  .h-copy-ver { display: block; }
  .h-copy-ver:not(:empty)::before { content: none; }
  .h-legend-map { bottom: calc(42px + var(--foot)); }
  .h-mapmsg { bottom: calc(80px + var(--foot)); }
  .leaflet-control-attribution { font-size: 10px; }
  /* Kapealla näytöllä (360 px) lähdemaininta rivittyy copyrightin viereen eikä mene sen alle (testaus 9.10.2026) */
  .leaflet-control-attribution { max-width: calc(100vw - 140px); }
}

/* Huomiopallojen selitteet (1. edullisin / 2. edullisin) ohuella viivalla renkaaseen */
.h-rank-line { position: absolute; overflow: visible; pointer-events: none; }
.h-rank-line line { stroke: var(--rank); stroke-width: 1.2; stroke-linecap: round; }
.h-rank-label { position: absolute; box-sizing: border-box; display: grid; place-items: center; padding: 0 6px; border: 1.5px solid var(--rank); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; }
.h-list button.rank, .h-list button.rank:hover { border-color: var(--rank); } /* kartalla korostetut 1. ja 2. edullisin: punainen reunus */

/* 1. ja 2. edullisin: hinta ja teho näkyvät selitteessä, ei merkin vieressä */
.st-rankhide { display: none !important; }

/* Asemien hinta- ja tehotekstit laatikoina, joista ohut punainen viiva palloon (updateStationLabels); merkkien omat tooltipit piilotetaan */
.leaflet-tooltip.st-label { display: none !important; }
.st-lbls { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.st-lbl-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.st-lbl-lines line { stroke: var(--rank); stroke-width: 1; stroke-linecap: round; }
.st-lbl { position: absolute; margin: 0; padding: 0 5px; border: 1px solid var(--lbl-border, #5b6661); border-radius: 5px; background: var(--surface); color: var(--text-2); font: 650 10.5px/15px Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); cursor: pointer; }
.st-lbl span { display: block; }
/* Napautusalue 40 px (käyttäjän päätös 11.10.2026; laatikko itse 27 px): näkymätön alue laatikon ympärillä */
.st-lbl::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 40px; min-height: 100%; transform: translateY(-50%); }
.st-lbl small { display: block; margin-top: -2px; padding-bottom: 1px; font: 600 9.5px/11px Inter, system-ui, sans-serif; }
.st-lbl.free { color: var(--accent-ink); }
.st-lbl.busy { color: var(--danger); }
.st-lbl.down { color: var(--danger); }
/* Ei yhtään vapaata paikkaa (käyttäjän pyyntö 12.10.2026): koko teksti harmaana – näkyy, mutta erottuu selvästi asemista,
   joissa on vapaata. Sama 1./2. edullisin -selitteissä. */
:root { --lbl-full: #8f9994; }
:root[data-theme="dark"] { --lbl-full: #8e9894; } /* kontrasti ≥ 4,5:1 tummalla (laaja testaus 16.10.2026) */
.st-lbl.full, .st-lbl.full .op, .st-lbl.full .av,
.h-rank-label.full, .h-rank-label.full small, .h-rank-label.full small .av { color: var(--lbl-full) !important; }
.st-lbl.full { border-color: color-mix(in srgb, var(--lbl-full) 70%, transparent); }
/* Operaattori laatikon toisella rivillä neutraalina (väri kuuluu vapaille paikoille); pitkä nimi lyhennetään */
.st-lbl .op { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-style: normal; font-weight: 600; color: var(--text-2); }
.st-lbl .av { font-weight: 700; }
.h-rank-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.h-rank-label b { font-weight: 700; }
.h-rank-label small { font-size: 0.625rem; font-weight: 400; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 1./2. edullisin -selite hillitymmäksi (käyttäjän pyyntö 12.10.2026: kaikki eivät hae edullisinta – näkyvä, mutta ei liikaa
   korostettu): saman kokoinen kuin muiden asemien hintalaatikot, ei lihavointeja, ohut punainen kehys vilkkuu renkaan tahdissa. */
.h-rank-label { padding: 0 5px; border: 1px solid var(--lbl-rank-border, #111); border-radius: 5px; font: 500 10.5px/14px Inter, system-ui, sans-serif; color: var(--text-2); gap: 0; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); animation: h-frame 1.1s ease-in-out infinite; }
.h-rank-label b { font-weight: 500; }
.h-rank-label small { font: 500 9.5px/11px Inter, system-ui, sans-serif; color: var(--text-2); }
/* Ohut musta kehys + sen ympärillä vilkkuva 2 px punainen kehys (käyttäjän pyyntö 12.10.2026); varjo ei muuta laatikon kokoa */
@keyframes h-frame { 0%, 100% { box-shadow: 0 0 0 2px var(--rank), 0 1px 3px rgb(0 0 0 / 0.12); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rank) 15%, transparent), 0 1px 3px rgb(0 0 0 / 0.12); } }
@media (prefers-reduced-motion: reduce) { .h-rank-label { animation: none; box-shadow: 0 0 0 2px var(--rank), 0 1px 3px rgb(0 0 0 / 0.12); } }
.h-list .rt .av { display: block; margin-top: 2px; font-weight: 650; color: var(--text-2); }
.h-list .rt .av.free { color: var(--accent-ink); }
.h-list .rt .av.busy { color: var(--danger); }
.h-list .rt .av.down { color: var(--danger); }
.h-rank-label[data-id] { pointer-events: auto; cursor: pointer; }
.st-pop .sp-togglerow { margin: 20px 0 0; }
.sp-free { margin: 4px 0; }
.sp-price { margin: 3px 0; }
/* Infolaatikko aseman vieressä ohuella viivalla palloon (placePopup): kärki piiloon */
.st-popup .leaflet-popup-tip-container { display: none; }
.st-pop-line { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.st-pop-line line { stroke: var(--rank); stroke-width: 1; stroke-linecap: round; }
.sp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
/* Asemakortin toiminnot (käyttäjän pyyntö 13.10.2026): kaikki neljä samanlaisina pyöreinä nappeina allekkain – Navigoi vihreä, muut valkoiset */
.st-pop .sp-actions { flex-direction: column; align-items: stretch; gap: 4px; }
.st-pop .sp-actions a.nav-btn { justify-content: center; }
.st-pop .sp-links { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 20px 0 0; } /* tilaa Navigoi-napin ja kotisivunapin väliin kuten Näytä lisätiedot -napin yläpuolelle (13.10.2026) */
.st-pop .sp-links a, .st-pop .sp-share, .st-pop .sp-toggle, .st-pop .sp-ackbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--accent-ink, var(--accent)); font: inherit; font-size: 0.86rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.st-pop .sp-links a:hover, .st-pop .sp-share:hover, .st-pop .sp-toggle:hover, .st-pop .sp-ackbtn:hover { background: var(--accent-soft); }
.sp-trip { font-size: 0.75rem; white-space: nowrap; }
/* Puhelin: avoimen infolaatikon aikana Lista-painike ja sädepaneeli piiloon, ettei ne peitä laatikon tekstejä */
.h-map:has(.map-locked) .h-listbtn, .h-map:has(.map-locked) .h-rad-wrap { visibility: hidden; }
.sp-rank { margin: 0 0 4px; font-size: 0.6875rem; color: var(--rank-text); font-weight: 600; }
/* Laaja testaus 9.10.2026: sädepaneeli ei peitä avointa asemaikkunaa (tietokoneellakin); sulkuruksi isompi kosketukselle;
   säteen arvon kontrasti yötilassa (4,27:1 → yli 4,5:1). */
.h-map:has(.leaflet-popup) .h-rad-wrap { visibility: hidden; }
@media (pointer: coarse) { .leaflet-container a.leaflet-popup-close-button { width: 40px; height: 40px; font: 26px/38px Tahoma, Verdana, sans-serif; } }
:root[data-theme="dark"] .h-rad-btn, :root[data-theme="dark"] .h-rad-val { color: #7db6ff; border-color: #7db6ff; }
@media (pointer: coarse) { .st-pop h4 { padding-right: 30px; } }
/* Operaattorilista Asetuksissa kokonaan ilman sisäkkäistä vieritystä (koko ikkuna vierittyy; laaja testaus 9.10.2026) */
.dialog .h-ops-list { max-height: none; overflow: visible; }
/* Vaihtuvan hinnan nykyhetki ja vieritysvihje (laaja testaus 9.10.2026) */
.sp-now { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.68rem; font-weight: 700; vertical-align: 2px; }
.sp-scrollhint { position: sticky; bottom: 0; display: none; width: 100%; margin: 6px 0 0; padding: 14px 0 4px; border: 0; background: linear-gradient(to bottom, transparent, var(--surface) 55%); color: var(--accent-ink); font: inherit; font-size: 0.8rem; font-weight: 700; text-align: center; cursor: pointer; }
.sp-scrollhint.on { display: block; }
/* Vapaat paikat / kaikki: vapaita → vihreä, kaikki varattuja → punainen (käyttäjän päätös 9.10.2026, kaikkialla) */
.h-rank-label small .av { font-weight: 600; }
.h-rank-label small .av.free { color: var(--accent-ink); }
.h-rank-label small .av.busy { color: var(--danger); }
.ag-count.busy { color: var(--danger) !important; }
/* Pikakuvake-nappi asetusten lopussa */
.h-install { margin-top: 4px; }
.h-install .hint { margin: 6px 0 0; color: var(--text-2); font-size: 0.82rem; line-height: 1.4; }

.sp-member { color: var(--accent-ink); }

/* Kaksi hintaa asemakortissa (rekisteröityneen ja ilman rekisteröitymistä) */
.sp-two { display: grid; gap: 2px; margin: 4px 0 2px; padding: 6px 8px; border-radius: 8px; background: var(--accent-soft); font-size: 0.8125rem; }
.sp-two > span { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sp-two i { font-style: normal; color: var(--text-2, inherit); }
.sp-two b { white-space: nowrap; }
.sp-two > span:first-child b { color: var(--accent-ink); }

/* Sulkemisristit (käyttäjän pyyntö 11.10.2026): lihavoitu risti ja 40 px:n napautusalue kaikilla näytöillä (ikkunat, lista, asemaikkuna) */
#listClose, #opsClose, #settingsClose, .dialog-head .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; color: var(--text); }
#listClose .x-ico, #opsClose .x-ico, #settingsClose .x-ico { display: block; }
.leaflet-container a.leaflet-popup-close-button { width: 40px; height: 40px; font: 700 30px/38px Tahoma, Verdana, sans-serif; color: var(--text); text-shadow: 0.6px 0 currentColor, -0.6px 0 currentColor; }
.st-pop h4 { padding-right: 40px; }

/* Reittihaku (käyttäjän pyyntö 11.10.2026): kolmas välilehti, Mistä/Minne-kentät ja vaihtonappi, reitti kartalla */
/* Välilehdet leveyden mukaan (ei vierityspalkkia): Paikkakunta ja Hae läheltä ovat pidempiä kuin Reitti */
.h-bar-row .seg-full { display: flex; overflow: hidden; }
.h-bar-row .seg-full label { flex: 1 1 auto; padding: 0 10px; }
@media (max-width: 420px) { .h-bar-row .seg-full label { padding: 0 3px; } }
.lbl-s { display: none; }
@media (max-width: 560px) {
  .h-bar-row .lbl-l { display: none; }
  .h-bar-row .lbl-s { display: inline; }
}
.h-route { display: flex; gap: 8px; align-items: center; }
.h-route[hidden] { display: none; }
.h-route-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.h-route-reset { flex: none; width: 44px; height: 44px; }
.combo-list li small { display: block; color: var(--muted); font-size: 0.8125rem; }
.combo-list li.me { font-weight: 600; }
.h-route-sort { margin: 6px 0 8px; width: 100%; }
.h-route-sort[hidden] { display: none; }
.h-route-sort label { min-height: 36px; font-size: 0.86rem; }
.h-list .legs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.h-list .leg { display: inline-block; margin-left: 0; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.h-route-pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2a7de1; color: #fff; font: 700 13px/1 Inter, system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.h-route-pin.b { background: #0a7457; }

/* Asetukset → Mistä hinnat tulevat? (käyttäjän pyyntö 11.10.2026) */
.h-install + .h-install { margin-top: 8px; }
.h-prices-info { font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.h-prices-info p { margin: 10px 0; }
.h-prices-info ul { margin: 8px 0; padding-left: 20px; }
.h-prices-info li { margin: 6px 0; }

/* Asetusten operaattorilista useassa sarakkeessa, järjestys latauspisteiden määrän mukaan (käyttäjän pyyntö 11.10.2026) */
.dialog .h-ops-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; } /* kolme rinnakkain (käyttäjän pyyntö 11.10.2026); puhelimessa kaksi */
.h-ops-list label { min-width: 0; }
.h-ops-list .op-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.h-ops-list .op-n { overflow-wrap: break-word; hyphens: auto; }
.h-ops-list .op-t small { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .dialog .h-ops-list { grid-template-columns: 1fr 1fr; } .h-ops-list label { font-size: 0.9rem; } }

/* Reittihaun akkulaskenta (käyttäjän pyyntö 11.10.2026) */
.h-route-soc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.h-depart { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 10px; }
.h-depart[hidden] { display: none; }
#routeDepart { width: 5.2em !important; text-align: right; }
#routeDepart::placeholder { color: var(--muted); opacity: 0.8; }
.h-destsoc[hidden] { display: none; }
.h-socpair { display: contents; } /* tavallisessa versiossa otsikko ja kenttä ovat rivin suoria osia kuten ennen */
.h-route-soc > .h-socpair > label { flex: 1 1 auto; }
/* Testiversio ver2: Lähtöaika, Akku ja Akku kohteessa samalla rivillä, otsikko kentän vasemmalla puolella (käyttäjän pyynnöt
   15.10.2026); kapealla näytöllä pari (otsikko + kenttä) siirtyy kokonaisena seuraavalle riville */
.h-route-soc.v2 { justify-content: flex-start; gap: 6px 16px; }
.h-route-soc.v2 .h-depart, .h-route-soc.v2 .h-socpair, .h-route-soc.v2 .h-destsoc { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; flex: none; }
.h-route-soc.v2 .h-depart { order: 1; }
.h-route-soc.v2 .h-socpair { order: 2; }
.h-route-soc.v2 .h-destsoc { order: 3; }
.h-route-soc.v2 .h-depart[hidden], .h-route-soc.v2 .h-destsoc[hidden] { display: none; }
.h-route-soc.v2 .h-socpair > label { flex: none; }
.h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc, .h-route-soc.v2 #routeDepart { width: 4.2em !important; }
.h-route-soc.v2 .h-unit { gap: 4px; }
@media (max-width: 420px) {
  .h-route-soc.v2 { gap: 6px 12px; }
  .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc, .h-route-soc.v2 #routeDepart { width: 3.4em !important; padding-left: 6px !important; padding-right: 6px !important; }
}

.h-route-soc label { color: var(--text-2, inherit); }
.h-unit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.h-unit { flex: none; }
.h-car .h-unit > span { display: inline-block; width: 6.6em; } /* yksikön leveys vakio → syöttölaatikot samassa linjassa */
.h-route-need { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--danger, #c0392b) 10%, transparent); color: var(--danger, #c0392b); font-size: 0.86rem; line-height: 1.35; }
.h-route-need[hidden] { display: none; }
.h-route-soc.need #routeSoc { border: 2px solid var(--danger, #c0392b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #c0392b) 18%, transparent); }
.h-route-soc.need .h-socpair label { color: var(--danger, #c0392b); font-weight: 650; } /* vain puuttuva Akku-kenttä punaisella (laaja testaus 16.10.2026) */
p.h-route-need { margin: 0; }
.h-route-need .small-btn { margin-top: 6px; }
.h-unit input { width: 5.5em !important; flex: none; text-align: right; }
#routeSoc { width: 7em !important; }
.h-unit input::placeholder { color: var(--muted); opacity: 0.8; }
.h-car { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
/* Auton tiedot tarvitaan vain reittilaskentaan: väli ja vaakaviiva erottavat ryhmän muista asetuksista (käyttäjän pyyntö 15.10.2026) */
.h-car { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-strong); }
.h-car > legend { float: left; width: 100%; } /* kelluva selite ei katkaise yläviivaa */
.h-car > legend + * { clear: both; }
.h-car legend { padding: 0; margin-bottom: 6px; }
.h-car-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.h-car-row label { flex: 1; min-width: 0; font-size: 0.9rem; hyphens: auto; overflow-wrap: anywhere; } /* pitkä sana (latauspysähdyksellä) ei ylitä kapealla näytöllä */
.st-soc { display: block; font-size: 11px; font-weight: 600; color: var(--accent-ink, #0a7457); }
.st-soc.low, .st-soc-l.low, .sp-soc.low { color: var(--danger, #c0392b); }
.sp-soc { margin: 2px 0 6px; }
.h-soc-limit { position: relative; }
.h-soc-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #e8590c; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.h-soc-txt { position: absolute; left: 14px; top: -12px; white-space: nowrap; background: #e8590c; color: #fff; font: 700 12px/1 Inter, system-ui, sans-serif; padding: 5px 7px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
@media (max-width: 600px) { .h-unit input { font-size: 16px; } }

.h-legend .lg { white-space: nowrap; }
.h-legend .lg[hidden] { display: none; }
.leg.win { background: #12b886; color: #fff; }

/* Palaute (käyttäjän pyyntö 11.10.2026): nappi päivityssymbolin vieressä, lomake ikkunassa */
.h-top-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.h-fb-btn { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font-weight: 600; font-size: 0.9rem; }
@media (max-width: 600px) { .h-fb-btn { width: 40px; padding: 0; justify-content: center; } .h-fb-lbl { display: none; } }
.h-fb-intro { margin: 4px 0 12px; color: var(--text-2); font-size: 0.95rem; }
.h-fb-topics { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.h-fb-topics legend { font-weight: 650; margin-bottom: 6px; padding: 0; }
.h-fb-topics label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 0.92rem; }
.h-fb-topics label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
@media (max-width: 420px) { .h-fb-topics { grid-template-columns: 1fr; } }
.h-fb-msg-lbl { display: block; font-weight: 650; margin-bottom: 6px; }
#fbMessage { width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.h-fb-email-lbl { margin-top: 12px; }
.h-fb-email-lbl .muted { font-weight: 400; }
#fbEmail { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.h-fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h-fb-status { min-height: 1.4em; margin: 10px 0 0; font-size: 0.92rem; }
.h-fb-status.ok { color: var(--accent-ink); font-weight: 600; }
.h-fb-status.err { color: var(--danger); font-weight: 600; }

/* Asemakortti (käyttäjän pyyntö 12.10.2026): hillitty otsikkolaatikko, korostetut Hinta- ja Vapaana-ruudut, latauspisteet
   tehoittain, sää nyt. Tärkeimmät tiedot (hinta, vapaat paikat) ovat suurimmalla fontilla; otsikkolaatikko vain vaalealla taustalla. */
.st-pop .sp-hd { margin: 0 0 8px; padding: 8px 10px 7px; border-radius: 10px; background: var(--surface-2); }
.st-pop .sp-hd h4 { margin: 0 0 2px; font-size: 1rem; line-height: 1.25; }
.st-pop .sp-hd .sp-rank { margin: 0 0 2px; }
.st-pop .sp-hd .sp-op { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--text-2); }
.st-pop .sp-hd .sp-op b { color: var(--text); font-weight: 650; }
.st-pop .sp-hd h4, .st-pop .sp-hd .sp-rank { padding-right: 34px; } /* sulkemisristi oikeassa yläkulmassa */
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.sp-tile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 10px 8px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); }
.sp-tile .t-lbl { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.sp-tile .t-lbl .sp-now { text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.sp-tile .t-val { font-size: 1.45rem; font-weight: 750; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-tile .t-val small { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.sp-tile .t-val .t-from { font-size: 0.7rem; font-weight: 600; }
.sp-tile .t-val.t-none { font-size: 1rem; color: var(--muted); }
.sp-tile .t-sub { font-size: 0.75rem; line-height: 1.3; color: var(--text-2); }
.sp-tile-free.free { border-color: var(--accent); }
.sp-tile-free.busy { border-color: var(--danger); }
.sp-tile-free .t-val.ag-count { font-size: 1.45rem; }
.sp-tile-free.free .t-val { color: var(--accent-ink); }
.sp-tile-free.busy .t-val { color: var(--danger); }
.sp-tile-free.free .t-val small, .sp-tile-free.busy .t-val small { color: inherit; opacity: 0.8; }
.sp-sec .afir-total .small { font-size: 0.75rem; font-weight: 400; line-height: 1.35; }
.sp-grps-common { margin: 4px 0 0; font-size: 0.75rem; line-height: 1.35; color: var(--text-2); }
.sp-sec { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.st-pop .sp-h { margin: 0 0 4px; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.sp-h-src { float: right; text-transform: none; letter-spacing: 0; font-weight: 500; }
.sp-grps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-grp { display: grid; gap: 2px; }
.sp-grp .g-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sp-grp .g-kw { font-weight: 650; font-size: 0.875rem; }
.sp-grp .g-kw .muted { font-weight: 500; }
.sp-grp .g-kw .g-max { font-weight: 500; color: var(--text-2); }
.sp-grp .g-pr { white-space: nowrap; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.sp-grp .g-det { font-size: 0.75rem; line-height: 1.35; color: var(--text-2); }
.sp-grp .sp-two { margin: 2px 0 0; }
.sp-sec .afir-total { margin: 8px 0 0 !important; font-size: 0.8125rem; font-weight: 600; }
.sp-wx .wx-body { display: flex; align-items: center; gap: 10px; margin: 0; }
.sp-wx .wx-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #eaf1f8; }
:root[data-theme="dark"] .sp-wx .wx-ico { background: #dfe8f2; }
.sp-wx .wx-t { font-size: 1.05rem; }
.sp-wx .wx-rain.wet { color: #1f6bbf; font-weight: 600; }
:root[data-theme="dark"] .sp-wx .wx-rain.wet { color: #7db6ff; }
.st-pop .sp-actions { margin-top: 10px !important; }
@media (max-width: 380px) { .sp-tile .t-val, .sp-tile-free .t-val.ag-count { font-size: 1.25rem; } }

/* Kehykset (käyttäjän pyynnöt 12.10.2026): muiden asemien hintalaatikoissa ohut tummanharmaa, edullisimmissa ohut musta
   (+ vilkkuva punainen). Tummassa teemassa vaaleammat sävyt, jotta kehykset erottuvat tummaa taustaa vasten. */
:root { --lbl-border: #5b6661; --lbl-rank-border: #111; }
:root[data-theme="dark"] { --lbl-border: #7f8b86; --lbl-rank-border: #e6ece9; }

/* Määränpään täsmäsää reitillä (käyttäjän pyyntö 12.10.2026): hillitty laatikko B-merkin vieressä, pieni ”ennuste perillä klo …” */
.h-dest-wx { position: absolute; left: 20px; top: -20px; display: flex; align-items: center; gap: 6px; width: max-content; max-width: min(320px, calc(100vw - 48px)); padding: 4px 8px 4px 5px; border: 1px solid var(--lbl-border, #5b6661); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 12px/1.25 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); pointer-events: auto; }
.h-dest-wx.left { left: auto; right: 20px; }
.h-dest-wx.mid { left: 0; top: 18px; transform: translateX(-50%); }
.h-dest-wx.down { top: 14px; }
.h-dest-wx.mid.down { top: 18px; }
/* Testiversio ver2: laatikko kauempana B-merkistä ja viiva palloon (käyttäjän pyyntö 15.10.2026) */
.h-dest-wx.v2 { left: 44px; top: -66px; }
.h-dest-wx.v2.left { left: auto; right: 44px; }
.h-dest-wx.v2.mid { left: 0; top: 44px; }
.h-dest-wx.v2.down { top: 30px; }
.h-dest-wx.v2.mid.down { top: 44px; }
.h-dest-ln { position: absolute; left: 0; top: -1px; height: 2px; background: var(--lbl-border, #5b6661); transform-origin: 0 50%; pointer-events: none; }
.h-dest-wx b { font-weight: 700; }
.h-dest-wx small { display: block; font: 500 10px/1.3 Inter, system-ui, sans-serif; color: var(--text-2); }
.h-dest-wx > b { display: block; }
.h-dest-wx .dw-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eaf1f8; }
:root[data-theme="dark"] .h-dest-wx .dw-ico { background: #dfe8f2; }
.h-dest-wx .dw-txt { display: block; min-width: 0; }
/* Laatikko kasvaa tekstin mukaan (kieliversiot ovat pidempiä); kapealla näytöllä pienet rivit rivittyvät eivätkä valu yli (käyttäjän ohje 13.10.2026) */
.h-dest-wx small { white-space: normal; }
.sp-wx .wx-basis { margin: 6px 0 0; font-size: 0.6875rem; line-height: 1.35; }
.sp-wx .sp-h { display: flex; justify-content: space-between; gap: 8px; }

/* Testitila (13.10.2026): näkyvä merkintä Asetukset-ikkunan alussa */
.h-testnote { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--warn, #b45309); border-radius: 10px; background: color-mix(in srgb, var(--warn, #b45309) 12%, var(--surface, #fff)); color: var(--text, inherit); font-size: 0.875rem; line-height: 1.4; }
.h-testnote[hidden] { display: none; }
.h-testnote a { color: inherit; text-decoration: underline; }

/* ”Sää nyt” -linkki (13.10.2026): sää on kiinni oletuksena, otsikko laajentaa täsmäsään */
.sp-wx .sp-wxlink { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; color: var(--accent-ink, var(--accent)); font: inherit; font-weight: 700; text-transform: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-wx .sp-wxlink:hover { text-decoration-thickness: 2px; }

/* ”Vain vapaana nyt” -suodatin vähimmäistehon alla (käyttäjän päätös 13.10.2026) */
.h-check { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; min-height: 44px; font-weight: 600; cursor: pointer; }
.h-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.h-free-hint { margin: 0 0 4px; }

/* Laventuva ”Lisätietoja” pitkille selitteille (reittilista, operaattoritilasto; käyttäjän päätös 13.10.2026) */
.h-more { margin: 4px 0 0; }
.h-more > summary { cursor: pointer; color: var(--accent-ink, var(--accent)); font-weight: 600; padding: 6px 0; -webkit-tap-highlight-color: transparent; } /* list-item: avausnuoli näkyy */
.h-more > summary::marker { color: var(--accent-ink, var(--accent)); }
.h-more[open] > summary { margin-bottom: 2px; }
.h-ops-more { margin: 0 0 10px; }
.h-ops-more > p { margin: 4px 0 0; }

/* Haetun paikan merkki (käyttäjän päätös 13.10.2026) */
.leaflet-container .h-pin { display: block; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
.leaflet-container .h-pin path { fill: #2a7de1; stroke: #fff; stroke-width: 1.5; }
.leaflet-container .h-pin circle { fill: #fff; }

/* Kielivalinta (kokeilu /kielet, käyttäjän pyynnöt 13.10.2026): yksi symbolinappi (nykyisen kielen lippu), josta aukeaa valikko lippuineen */
.h-lang { position: relative; display: inline-flex; }
.h-lang[hidden] { display: none; }
.h-lang-btn { width: auto; min-width: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.h-lang-cur { display: inline-flex; }
.h-lang-caret { color: var(--text-2); }
.h-lang-menu { position: absolute; z-index: 3000; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 2px; min-width: 160px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow, 0 4px 16px rgb(0 0 0 / 0.18)); }
.h-lang-menu[hidden] { display: none; }
.h-lang-menu button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 0.95rem; text-align: left; white-space: nowrap; cursor: pointer; }
.h-lang-menu button:hover, .h-lang-menu button:focus-visible { background: var(--surface-2); }
.h-lang-menu button[aria-checked="true"] { font-weight: 700; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.flag { display: inline-block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); vertical-align: -2px; }
@media (max-width: 600px) { .h-lang-btn { padding: 0 5px; } }

/* Valitsimet (välilehdet ja Asetusten valinnat, käyttäjän pyyntö 13.10.2026): jokaisella vaihtoehdolla himmeä kehys, valittu valkoisella taustalla */
.seg label { box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-strong); }
/* Yläpalkin kielivalikko kartan ja valitsimien päällä myös puhelimessa */
.hinta-page .top { z-index: 1400; } /* .h-bar on 1300 */

/* ”Sijainti löytyi” sijaintipisteen yläpuolella: laatikko ja viiva pisteeseen (käyttäjän pyyntö 13.10.2026) */
.leaflet-container .h-here-note { position: absolute; left: 0; bottom: 9px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity 0.5s; }
.leaflet-container .h-here-note.fade { opacity: 0; }
.leaflet-container .h-here-note .hn-box { padding: 5px 11px; border: 2px solid #2a7de1; border-radius: 8px; background: var(--surface); color: var(--text); font: 600 13px/1.3 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.leaflet-container .h-here-note .hn-line { width: 2px; height: 34px; background: #2a7de1; }

/* Sivu ei saa vieriä eikä zoomautua kaksoisnapautuksesta (käyttäjän havainto 13.10.2026: puhelimessa säteen suurentaminen 50 km:iin
   – ylärajalla nuoli ei enää tee mitään – ja yläpalkki katosi, kun kartta täytti näytön). touch-action: manipulation estää
   kaksoisnapautuszoomin (nipistyszoomaus toimii yhä); overscroll-behavior estää sivun ”kumivenytyksen”. */
html:has(body.hinta-page) { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
.hinta-page button, .hinta-page a, .hinta-page label, .hinta-page input, .h-rad-wrap, .h-rad-btn, .h-rad-val { touch-action: manipulation; }

/* Automallihaku Asetuksissa (testiversio ver2, käyttäjän pyyntö 15.10.2026) */
.h-carmodel { margin: 0 0 10px; }
.h-carmodel[hidden] { display: none; }
.h-carmodel > label { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.h-carmodel-row input { width: 100%; padding-right: 40px; }
.h-carmodel-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.h-carmodel-clear:hover { background: var(--surface-2); color: var(--text); }
.h-carmodel-clear[hidden] { display: none; }
.h-carmodel-info { margin: 4px 0 0; }
.h-ver2-tag { font-weight: 600; }
.h-ver2-tag[hidden] { display: none; }

/* Säde: otsikko ja valinta samalla rivillä, valinta sisällön levyinen (käyttäjän pyyntö 15.10.2026) */
#radiusField:not([hidden]) { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
#radiusField > label { margin: 0; }
#radiusField > select { width: auto; min-width: 0; flex: 0 0 auto; padding-left: 10px; padding-right: 28px; background-position: right 6px center; } /* vain hieman km-määrää leveämpi (käyttäjän pyyntö 15.10.2026) */

/* Reitin latauspysähdykset (testiversio ver2, käyttäjän pyyntö 15.10.2026) */
#chargeNote p { margin: 6px 0 0; }
.h-route-plan { margin: 8px 0 0; font-weight: 650; font-size: 0.9rem; line-height: 1.4; }
.h-route-ack { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface-2); font-size: 0.86rem; line-height: 1.4; }
.h-route-ack .small-btn { margin-left: 4px; }
.sp-leg { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 0.86rem; line-height: 1.45; }
.sp-leg b { font-weight: 650; }
.st-pop .sp-ackbtn { border-color: #12b886; }
.st-pop .sp-leg p { margin: 0; }
.st-pop .sp-leg p + p { margin-top: 4px; }
.st-pop .sp-need.low { color: var(--danger); font-weight: 600; }
.st-pop .sp-ack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; padding: 8px 10px; border: 1px solid #12b886; border-radius: 10px; }
.st-pop .sp-ack label { font-weight: 600; font-size: 0.86rem; }
.st-pop .sp-ack input { width: 4.2em !important; text-align: right; }
.st-pop .sp-ack .sp-ackbtn { flex: 1 1 100%; }
.st-pop .sp-ack-msg { flex: 1 1 100%; margin: 0; font-size: 0.82rem; }
.st-pop .sp-ack-msg:empty { display: none; }
.st-pop .sp-ack-msg.err { color: var(--danger); font-weight: 600; }
.h-soc-limit.zone .h-soc-dot { background: #0b7a5a; }
.h-soc-limit.zone .h-soc-txt { background: #0b7a5a; left: 12px; top: -11px; }

/* Testiversio: välietapit reittihakuun (käyttäjän pyyntö 15.10.2026): pieni + Mistä-kentän oikealla puolella, välietapin rivillä ✕ */
.h-route .combo.has-btn { display: flex; align-items: center; gap: 6px; }
.h-route .combo.has-btn > input { flex: 1; min-width: 0; }
.h-via-btn { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--accent-ink); cursor: pointer; touch-action: manipulation; }
.h-via-btn:hover { background: var(--surface-2); }
.h-via-btn[hidden] { display: none; }
.h-via-btn.del { color: var(--text-2); }
.h-vias { display: flex; flex-direction: column; gap: 6px; }
.h-vias[hidden] { display: none; }
.h-route-pin.v { width: 22px; height: 22px; background: #fff; color: #2a7de1; border-color: #2a7de1; font-size: 12px; }

/* Testiversio: reitin tiedot piiloon, kun reitti on piirretty (käyttäjän pyyntö 15.10.2026); tiivis rivi + lavennussymboli */
.h-route-side { flex: none; display: flex; flex-direction: column; gap: 6px; }
.h-route-side .icon-btn[hidden] { display: none; }
.h-route.collapsed .h-route-fields, .h-route.collapsed .h-route-side { display: none; }
.h-route-compact { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 10px); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.h-route-compact[hidden] { display: none; }
.h-rc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h-rc-txt b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rc-txt span { font-size: 0.8125rem; color: var(--text-2); }
.h-rc-ico { flex: none; color: var(--accent-ink); }
.h-sum.route-collapsed { display: none; }
.h-route-side:not(:has(.icon-btn:not([hidden]))) { display: none; }
/* Testiversio: Lähtöaika, Akku ja Akku kohteessa samalle riville myös puhelimessa (käyttäjän pyyntö 15.10.2026): kapeammat
   kentät, pitkä otsikko rivittyy kahdelle riville otsikon kohdalla (ei kenttien alle) */
@media (max-width: 600px) {
  .h-route-soc.v2 { gap: 6px 8px; flex-wrap: nowrap; justify-content: space-between; }
  .h-route-soc.v2 .h-depart, .h-route-soc.v2 .h-socpair, .h-route-soc.v2 .h-destsoc { gap: 4px; flex: none; }
  .h-route-soc.v2 label { font-size: 0.78rem; line-height: 1.15; max-width: 5.2em; white-space: normal; }
  .h-route-soc.v2 .h-unit { gap: 2px; }
  .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc { width: 2.5em !important; padding-left: 4px !important; padding-right: 4px !important; }
  .h-route-soc.v2 #routeDepart { width: 3.3em !important; padding-left: 4px !important; padding-right: 4px !important; }
}
.h-route-soc.v2 { flex-wrap: nowrap; }
.h-route-soc.v2 label { max-width: 8em; white-space: normal; line-height: 1.2; }
@media (min-width: 601px) { .h-route-soc.v2 #routeDepart { width: 4.8em !important; } }
@media (max-width: 600px) { .h-route-soc.v2 label { max-width: 5.2em; } }
@media (max-width: 600px) {
  .h-route-soc.v2 { gap: 6px 6px; }
  .h-route-soc.v2 label { font-size: 0.75rem; max-width: 5em; }
  .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc { width: 2.3em !important; padding-left: 3px !important; padding-right: 3px !important; }
  .h-route-soc.v2 #routeDepart { width: 3.1em !important; padding-left: 3px !important; padding-right: 3px !important; }
}
@media (max-width: 600px) { .h-route-soc.v2 { gap: 6px 4px; } .h-route-soc.v2 .h-unit { gap: 1px; } }
@media (max-width: 350px) { .h-route-soc.v2 { flex-wrap: wrap; } } /* hyvin kapea puhelin: Akku kohteessa seuraavalle riville */
/* Testiversio: Oma sijainti ilman sijaintia → punainen ohje kentässä */
.h-route input.loc-miss { border-color: var(--danger, #c0392b) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #c0392b) 15%, transparent); }
.h-locmiss { position: absolute; left: 13px; right: 12px; top: 50%; transform: translateY(-50%); color: var(--danger, #c0392b); font-size: 0.85rem; line-height: 1.2; pointer-events: none; }
.h-locmiss[hidden] { display: none; }
.h-route .combo.has-btn > .h-locmiss { right: 48px; }
/* Testiversio: latauksen kuittaus asemakortin yläosassa (käyttäjän pyyntö 15.10.2026) */
.st-pop .sp-ack { margin: 8px 0; background: color-mix(in srgb, #12b886 9%, var(--surface)); }
.st-pop .sp-ack-hd { flex: 1 1 100%; margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--text-2); }
.st-pop .sp-ack .sp-ackbtn { flex: 1 1 auto; background: #0a7a57; border-color: #0a7a57; color: #fff; } /* kontrasti 5,3:1 (laaja testaus 15.10.2026) */
.st-pop .sp-ack .sp-ackbtn:hover { background: #0a6b4d; }
.h-route-soc #routeDepart.bad { border: 2px solid var(--danger, #c0392b) !important; }

/* Akun tyyppi (testiversio ver2, käyttäjän pyyntö 16.10.2026): kaksi vaihtoehtoa, otsikko ja valinta samalla rivillä */
.h-bat-row { flex-wrap: wrap; }
.h-bat-lbl { flex: 1; min-width: 0; font-size: 0.9rem; }
.h-bat-row .seg { flex: none; padding: 3px; }
.h-bat-row .seg label { flex: none; min-height: 34px; padding: 0 12px; font-size: 0.88rem; }
#batInfo { margin: 0 0 8px; }
/* Ehdotus latausrajan yli asemakortissa */
.sp-over { margin: 6px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--accent); font-size: 0.86rem; }
.h-soc-limit.zone.flip .h-soc-txt { left: auto; right: 12px; }
.h-dest-wx .dw-soc { font-weight: 650; color: var(--text); }
.h-dest-wx .dw-soc.low { color: var(--danger); }
/* Punaisen latausosuuden alun ja lopun akun varaus (testiversio ver2, käyttäjän pyyntö 16.10.2026), näkyy lähennettäessä */
.h-red-end { position: relative; display: none; }
.leaflet-container.h-zin .h-red-end { display: block; }
.h-red-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 3px solid #e03131; box-sizing: border-box; }
.h-red-txt { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #c92a2a; border: 1.5px solid #e03131; border-radius: 6px; padding: 2px 6px; font: 700 11px/1.2 Inter, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.h-red-end.start .h-red-txt { bottom: 9px; }
.h-red-end.end .h-red-txt { top: 9px; }
[data-theme="dark"] .h-red-txt { background: #2b1414; color: #ffa8a8; }
/* Testiversio: Lähtöaika, Akku ja Akku kohteessa koko rivin leveydellä ja kentät leveämpinä (käyttäjän pyyntö 16.10.2026:
   ”akku ja akku kohteessa -laatikot leveämmiksi, optimoi koko tilan käyttö leveyden osalta, jotta toimii myös mobiilissa”):
   otsikot eivät kutistu, vapaa tila jaetaan kentille (lähtöaika enintään 4,6 em, varauskentät enintään 5 em) */
.h-route-soc.v2 { display: flex !important; flex-wrap: nowrap; justify-content: space-between; gap: 6px 14px; }
.h-route-soc.v2 > .h-depart, .h-route-soc.v2 > .h-socpair, .h-route-soc.v2 > .h-destsoc { display: flex !important; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.h-route-soc.v2 > [hidden] { display: none !important; }
.h-route-soc.v2 label { flex: none; max-width: 7em; }
.h-route-soc.v2 .h-unit { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; }
.h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc, .h-route-soc.v2 #routeDepart { width: 0 !important; flex: 1 1 auto; min-width: 2.6em; max-width: none; padding-left: 4px !important; padding-right: 4px !important; text-align: center; }
/* Kentät täyttävät koko rivin leveyden (käyttäjän pyyntö 16.10.2026: ”levennä, käytetään koko leveystila, mutta ei rivity mobiilissa”) */
.h-route-soc.v2 { gap: 6px 10px; }
@media (max-width: 600px) {
  .h-route-soc.v2 { gap: 6px 8px; }
  .h-route-soc.v2 > .h-depart, .h-route-soc.v2 > .h-socpair, .h-route-soc.v2 > .h-destsoc { gap: 4px; }
  .h-route-soc.v2 label { font-size: 0.75rem; max-width: 5.6em; }
}
@media (max-width: 380px) {
  .h-route-soc.v2 { gap: 6px 5px; }
  .h-route-soc.v2 > .h-depart, .h-route-soc.v2 > .h-socpair, .h-route-soc.v2 > .h-destsoc { gap: 3px; }
  .h-route-soc.v2 .h-unit { gap: 2px; }
  .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc, .h-route-soc.v2 #routeDepart { min-width: 2.4em; padding-left: 2px !important; padding-right: 2px !important; }
}
@media (max-width: 340px) {
  .h-route-soc.v2 { gap: 6px 4px; }
  .h-route-soc.v2 label { font-size: 0.7rem; max-width: 5.2em; }
  .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc, .h-route-soc.v2 #routeDepart { min-width: 2.2em; font-size: 15px; }
}
/* Reittitilan lukitus (testiversio): päivitysnappi vilkkuu punaisena ilmoituksen ajan */
@keyframes h-lockblink { 0%, 100% { background: var(--surface); color: inherit; box-shadow: none; } 50% { background: #e03131; color: #fff; box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.35); } }
#refreshBtn.lock-blink { animation: h-lockblink 0.8s ease-in-out infinite; border-color: #e03131; }
@media (prefers-reduced-motion: reduce) { #refreshBtn.lock-blink { animation: none; background: #e03131; color: #fff; } }
/* Tietyöt ja liikennetiedotteet reitillä (testiversio ver2), näkyvät lähennettäessä */
.h-road { width: 26px; height: 26px; display: none; align-items: center; justify-content: center; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.leaflet-container.h-zroad .h-road { display: flex; }
.h-road-pop h4 { margin: 2px 0 6px; font-size: 0.95rem; line-height: 1.3; }
.h-road-pop p { margin: 4px 0; }
.h-road-kind { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.h-road-kind.w { color: #a35f00; }
.h-road-kind.a { color: var(--danger); }
.h-road-info { margin: 4px 0; padding-left: 18px; }
[data-theme="dark"] .h-road-kind.w { color: #ffc078; }
/* %-merkki kentän sisään oikeaan reunaan (testiversio, 16.10.2026): vapauttaa rivin leveyttä kentille myös puhelimessa */
.h-route-soc.v2 .h-unit { position: relative; gap: 0; }
.h-route-soc.v2 .h-unit > span { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: 0.85em; }
.h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc { padding-right: 18px !important; text-align: right; }
@media (max-width: 380px) { .h-route-soc.v2 .h-unit > span { right: 4px; } .h-route-soc.v2 #routeSoc, .h-route-soc.v2 #destSoc { padding-right: 14px !important; } }
/* Pakolliset tiedot reittitilassa (testiversio ver2): ohut punainen kehys, kunnes tieto on annettu */
input.req-miss { border: 1px solid var(--danger, #c0392b) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger, #c0392b) 35%, transparent) !important; }

/* Reittisuunnitelman Lisätietoja riveittäin (käyttäjän päätös 16.10.2026) */
.h-more .pd { display: block; }
.h-more .pd p { margin: 6px 0 2px; }
.h-more .pd .pd-h { font-weight: 600; color: var(--text); margin-top: 10px; }
.h-more .pd .pd-h:first-child { margin-top: 2px; }
.h-more .pd .pd-l { margin: 0; padding-left: 18px; }
.h-more .pd .pd-l li { margin: 2px 0; overflow-wrap: anywhere; }

/* Lähtöajan rullavalitsin (testiversio ver2, käyttäjän pyyntö 16.10.2026) */
#routeDepart.dp-input { cursor: pointer; caret-color: transparent; }
.dp-pop { position: fixed; z-index: 3000; width: 232px; padding: 10px; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.22)); font-size: 0.9rem; }
.dp-pop .dp-days { display: flex; gap: 4px; margin: 0 0 8px; }
.dp-pop .dp-days button { flex: 1 1 0; min-height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.dp-pop .dp-days button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); font-weight: 600; }
.dp-wheels { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; height: 180px; }
.dp-colw { width: 72px; height: 180px; overflow: hidden; }
.dp-col { height: 180px; margin: 0; padding: 72px 0; list-style: none; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; outline: none; mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.dp-col::-webkit-scrollbar { display: none; }
.dp-col li { height: 36px; line-height: 36px; text-align: center; scroll-snap-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer; user-select: none; }
.dp-col li[aria-selected="true"] { color: var(--text); font-weight: 700; }
.dp-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; }
.dp-sep { font-size: 1.2rem; font-weight: 700; }
.dp-band { position: absolute; left: 8px; right: 8px; top: 72px; height: 36px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; pointer-events: none; }
.dp-prev { margin: 8px 0; text-align: center; font-weight: 600; font-size: 0.86rem; }
.dp-acts { display: flex; gap: 6px; }
.dp-acts button { flex: 1 1 0; min-height: 40px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.dp-acts .dp-ok { background: #0a7a57; border-color: #0a7a57; color: #fff; }

/* Ulkoasun hionta 16.10.2026 (käyttäjän pyyntö: ”mahdollisimman tyylikäs ja ammattimaisen näköinen”) */
/* 1. Asemakortin vierityvihje pienenä pillerinä kortin alareunassa – ei peitä Navigoi-nappia tai kuittausriviä (puhelin) */
.sp-scrollhint { width: max-content; max-width: calc(100% - 24px); margin: 8px auto 0; padding: 5px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); box-shadow: 0 2px 8px rgb(0 0 0 / 0.16); bottom: 6px; font-size: 0.78rem; }
/* 2. Pienet napit (Valitse kaikki / Poista valinnat, Avaa asetukset, Laske alusta, raja-ilmoitus) samaan pyöreään tyyliin kuin kortin napit */
button.small-btn:not(.on) { border-radius: 999px !important; border: 1px solid var(--border-strong); background: var(--surface); color: var(--accent-ink, var(--accent)); font-weight: 600; }
button.small-btn:not(.on):hover { background: var(--accent-soft); }
/* 3. ”Sää nyt” -otsikkolinkki ilman pysyvää alleviivausta (nuoli kertoo laventumisen) */
.sp-wx .sp-wxlink { text-decoration: none; }
.sp-wx .sp-wxlink:hover, .sp-wx .sp-wxlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Testiversio: akun varaus lataukseen saavuttaessa pienin–suurin ja kaksiriviset otsikot (käyttäjän pyynnöt 16.10.2026) */
.h-socrng.v2 { gap: 4px; }
.h-socrng.v2 input { width: 3.1em !important; }
.h-socrng .h-rng-dash { font-weight: 500; color: var(--text-2); }
.h-car-row label .h-lbl-sub { display: block; font-size: 0.78rem; line-height: 1.2; color: var(--text-2); font-weight: 400; }
/* Puhelimessa otsikko ja laatikot samalla rivillä (käyttäjän pyyntö 16.10.2026: ”tekstien ja syöttölaatikoiden tulee olla samalla tasolla”) */
@media (max-width: 600px) {
  .h-car-row.h-stack label .h-lbl-sub { font-size: 0.74rem; }
  .h-car .h-car-row .h-unit { gap: 4px; }
  .h-car .h-unit > span { width: 6em; font-size: 0.85rem; white-space: nowrap; }
  .h-car .h-car-row .h-unit input { width: 4.2em !important; }
  .h-car-row.h-stack .h-socrng.v2 { gap: 3px; min-width: 9.21rem; justify-content: flex-start; } /* laatikot alkavat samasta kohdasta kuin muiden rivien (4.2em + 4px + 5.6em × 0.85rem) */
  .h-car-row.h-stack .h-socrng.v2 > span { width: auto; }
  .h-car-row.h-stack .h-socrng.v2 input { width: 2.6em !important; padding-left: 4px !important; padding-right: 4px !important; text-align: center; }
}
/* Testiversio: pienet operaattorit Näytä muut -valinnan takana (käyttäjän pyyntö 16.10.2026) */
.h-ops-list .h-ops-more-btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 4px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--accent-ink, var(--accent)); font: 600 0.85rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.h-ops-list .h-ops-more-btn:hover { background: var(--accent-soft); }
.h-ops-list .h-ops-minor-hint { grid-column: 1 / -1; margin: 0; }
.h-ops-list label[hidden] { display: none; }
/* Kuitattu lataus: lähtöaika ei käytössä (laaja testaus 3, 16.10.2026) */
#routeDepart.ack-off { opacity: 0.55; cursor: not-allowed; font-size: 0.8em; text-align: center; }
/* Lopeta reitti (laaja testaus 3, 16.10.2026) */
.h-route-endrow { margin: 6px 0 0; text-align: right; }
.h-route-endrow[hidden] { display: none; }
/* Hintalaatikon yhdysviiva erottuu punaisen reitin päällä (laaja testaus 3, 16.10.2026) */
.st-lbl-lines { filter: drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 1px var(--surface)); }
.h-car-restore { margin-top: 6px; }