/* Etusivun Yö/Päivä-vertailuliuku (Designer SPEC /workspace/nettisivut-etusivu/yopaiva-liuku, Rolf 11.10.2026 23.03–23.07). */
.yp { --pos: 50%; position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate; }
.yp-layer { position: absolute; inset: 0; }
.yp-paiva { clip-path: inset(0 0 0 var(--pos)); }          /* Päivä oikealla: paljastuu viivan oikealta puolelta */
.yp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; margin-left: -0.5px; background: #00B4FF; opacity: 0.85; z-index: 3; pointer-events: none; }
.yp-hit { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 24px; margin-left: -12px; z-index: 4; cursor: ew-resize; }
.yp-handle { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 5; border: 0; padding: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.yp-handle::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid #00B4FF; background: rgba(10,10,12,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.yp-handle svg { position: absolute; inset: 4px; width: 36px; height: 36px; color: #F2F2F2; }
.yp-handle:hover::before, .yp.is-hover .yp-handle::before { background: rgba(10,10,12,0.86); }
.yp-handle:hover svg, .yp.is-hover .yp-handle svg { color: #00B4FF; }
.yp:hover .yp-line, .yp.is-hover .yp-line, .yp.is-drag .yp-line { opacity: 1; }
.yp-handle:focus { outline: none; }
.yp-handle:focus-visible::after, .yp.is-focus .yp-handle::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid #F2F2F2; }   /* valkoinen: oranssi ei erotu oransseista teistä */
.yp.is-drag, .yp.is-drag .yp-handle, .yp.is-drag .yp-hit { cursor: grabbing; }
.yp.is-drag .yp-handle::before { background: rgba(0,180,255,0.18); }
.yp.is-drag .yp-handle svg { color: #00B4FF; }
/* Yö- ja Päivä-tekstit alakulmissa */
.yp-tag { position: absolute; bottom: 14px; z-index: 2; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px;
  border: 1px solid rgba(0,180,255,0.35); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; pointer-events: none;
  transition: opacity 160ms ease; }
.yp-tag--yo { left: 14px; color: #F2F2F2; background: rgba(10,10,12,0.72); }
.yp-tag--paiva { right: 14px; color: #111114; background: rgba(248,250,253,0.86); }
.yp-tag.is-hidden { opacity: 0; }
@media (max-width: 599px) { .yp-tag { bottom: 10px; } .yp-tag--yo { left: 10px; } .yp-tag--paiva { right: 10px; } }
@media (prefers-reduced-motion: reduce) { .yp-tag { transition: none; } }
.et-map .fleet-map.yp::after { content: none; }   /* etusivun reunahäivytys pois liukuversiosta */

/* --- Tuotanto: autot DOM-markkereina kummassakin kartassa (sama simulaatio, sama sijainti ja suunta).
   Marker-elementin "ylös" = ajosuunta (Marker.setRotation(bearing), rotationAlignment: 'map'). Jälki = ::after auton takana.
   Päivä-kartan kontti on clip-pathilla leikattu → viivalla oleva auto on puoliksi Yö- ja puoliksi Päivä-tyyliä. --- */
.yp .fi-car { width: 5px; height: 10px; border-radius: 2px; pointer-events: none; }
/* 1 px rengas = box-shadow: a ::before with z-index -1 would paint over the body inside the marker stacking context. */
.yp .fi-car::after  { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; margin-left: -1px; border-radius: 1px; }   /* jälki */
/* Yö: vaalea + syaani (ent. oranssi), jälki 18 px */
.yp-yo .fi-car { background: #F2F2F2; }
.yp-yo .fi-car { box-shadow: 0 0 0 1px #07080C; }
.yp-yo .fi-car::after { height: 18px; background: linear-gradient(to bottom, rgba(242,242,242,0.45), rgba(242,242,242,0)); }
.yp-yo .fi-car.alt { background: #00B4FF; }
.yp-yo .fi-car.alt::after { background: linear-gradient(to bottom, rgba(0,180,255,0.55), rgba(0,180,255,0)); }
/* Päivä: tumma + oranssi, valkoinen rengas, jälki 12 px */
.yp-paiva .fi-car { background: #111114; }
.yp-paiva .fi-car { box-shadow: 0 0 0 1px rgba(255,255,255,0.9); }
.yp-paiva .fi-car::after { height: 12px; background: linear-gradient(to bottom, rgba(17,17,20,0.22), rgba(17,17,20,0)); }
.yp-paiva .fi-car.alt { background: #FE5000; }
.yp-paiva .fi-car.alt::after { background: linear-gradient(to bottom, rgba(254,80,0,0.35), rgba(254,80,0,0)); }
@media (max-width: 599px) {
  .yp .fi-car { width: 4px; height: 8px; }
  .yp-yo .fi-car::after { height: 14px; } .yp-paiva .fi-car::after { height: 10px; }
}
@media (prefers-reduced-motion: reduce) { .yp .fi-car::after { display: none; } }   /* autot pysähtyvät → ei jälkiä */
.yp-layer > .yp-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.yp .maplibregl-map { width: 100%; height: 100%; }

/* Hälytysajoneuvot (Rolf 11.10.2026 23.52). Kattolamppu SuomiNavi+-sovelluksesta: SirenChrome.swift (RoofPalette, RoofLampView)
   ja SirenLogic.swift (SirenMath.waves: sini 0,8 s jakso, sininen ja punainen vuorotellen, himmeä linssi 28 %). */
.yp .fi-car.fi-hk { width: 6px; height: 12px; border-radius: 2px; z-index: 1; }
.yp-yo .fi-car.fi-hk, .yp-paiva .fi-car.fi-hk { background: #0B0D12; box-shadow: 0 0 0 1px #C9D2DE; }
.yp-yo .fi-car.fi-hk::after { background: linear-gradient(to bottom, rgba(47,123,255,0.5), rgba(47,123,255,0)); height: 24px; }
.yp-paiva .fi-car.fi-hk::after { background: linear-gradient(to bottom, rgba(31,107,255,0.3), rgba(31,107,255,0)); height: 16px; }
.fi-hk-lamp { position: absolute; left: -1px; right: -1px; top: 4px; height: 3px; display: flex; gap: 1px; padding: 0 0.5px;
  background: #0B0D12; border-radius: 1px; box-shadow: 0 0 0 0.5px #C9D2DE; font-style: normal; }
.fi-hk-lamp b { flex: 1; border-radius: 1px; opacity: 0.28; }
.fi-hk-b { background: radial-gradient(circle, #FFFFFF 0 18%, #9CC2FF 19% 45%, #1F6BFF 46%); animation: fiHkB 0.8s linear infinite; }
.fi-hk-r { background: radial-gradient(circle, #FFFFFF 0 18%, #FFB0B0 19% 45%, #FF2433 46%); animation: fiHkR 0.8s linear infinite; }
.yp-paiva .fi-hk-b { animation-name: fiHkBd; } .yp-paiva .fi-hk-r { animation-name: fiHkRd; }
/* SirenMath.waves: blue = smoothstep(-0.15, 0.55, sin), red = smoothstep(-0.15, 0.55, -sin); lens = 0.28 + 0.72·wave; glow yö 0.9 / päivä 0.55 */
@keyframes fiHkB { 0%,45% { opacity: 1; box-shadow: 0 0 5px 2px rgba(47,123,255,0.9), 0 0 14px 6px rgba(47,123,255,0.45); }
  55%,95% { opacity: 0.28; box-shadow: none; } 100% { opacity: 1; box-shadow: 0 0 5px 2px rgba(47,123,255,0.9), 0 0 14px 6px rgba(47,123,255,0.45); } }
@keyframes fiHkR { 0%,45% { opacity: 0.28; box-shadow: none; }
  55%,95% { opacity: 1; box-shadow: 0 0 5px 2px rgba(255,42,58,0.9), 0 0 14px 6px rgba(255,42,58,0.45); } 100% { opacity: 0.28; box-shadow: none; } }
@keyframes fiHkBd { 0%,45% { opacity: 1; box-shadow: 0 0 4px 1px rgba(31,107,255,0.6), 0 0 10px 4px rgba(31,107,255,0.28); }
  55%,95% { opacity: 0.28; box-shadow: none; } 100% { opacity: 1; box-shadow: 0 0 4px 1px rgba(31,107,255,0.6), 0 0 10px 4px rgba(31,107,255,0.28); } }
@keyframes fiHkRd { 0%,45% { opacity: 0.28; box-shadow: none; }
  55%,95% { opacity: 1; box-shadow: 0 0 4px 1px rgba(255,36,51,0.6), 0 0 10px 4px rgba(255,36,51,0.28); } 100% { opacity: 0.28; box-shadow: none; } }
@media (max-width: 599px) { .yp .fi-car.fi-hk { width: 5px; height: 10px; } .fi-hk-lamp { top: 3px; } }
/* Reduce Motion: ei vilkkumista, linssit pysyvästi 0,7 (kuten sovelluksessa) */
@media (prefers-reduced-motion: reduce) { .fi-hk-lamp b { animation: none; opacity: 0.7; } }