/* Finnishhammockman's Aurora Cast - tyylit
   Eriytetty index.html:sta 8.9.2026. Sisalto on identtinen aiemman <style>-lohkon
   kanssa; vain sijainti muuttui. Ladataan index.html:n <head>-osasta. */
  :root{
    --bg-0:#080B18;
    --bg-1:#111833;
    --card:#141B36;
    --card-border:#232C52;
    --text-hi:#F1F3F9;
    --text-lo:#8993B8;
    /* Väliaste tekstille: korostettu mutta ei täysi valkoinen. Käytössä kaavioiden
       nollaviivan lukemassa ja selitteiden avainsanoissa. Lisätty jälkikäteen -
       niissä oli jo var(--text-mid) vaikka tokenia ei ollut määritelty lainkaan,
       jolloin ne perivät värinsä ja jäivät huomaamatta väärän värisiksi. */
    --text-mid:#B9C2DC;
    --green:#3ED888;
    --yellow:#E7D257;
    --orange:#F0964B;
    --red:#FF5C7A;
    --violet:#8C7CF0;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  /* Taustan revontulihehku ohjautuu OIKEASTA tilanteesta, ei ole koriste:
     --revontuli  = 0..1 aurinkotuulen aktiivisuus (Boylen indeksi)
     --taivas     = 0..1 pimeys (0 = päivä, 1 = tähtitieteellinen yö)
     Näin sivun taustaa vilkaisemalla näkee onko yö pimeä ja onko taivaalla mitään
     odotettavissa - ilman että lukee yhtään numeroa. Oletusarvot ovat vaimeat, joten
     jos data ei ole vielä latautunut, tausta on rauhallinen eikä lupaa liikoja. */
  :root{ --revontuli:0.12; --taivas:0.35; }
  body{
    background:
      radial-gradient(60% 40% at 15% 0%, rgba(140,124,240,calc(0.05 + 0.16 * var(--taivas))), transparent 60%),
      radial-gradient(50% 35% at 90% 8%, rgba(62,216,136,calc(0.04 + 0.30 * var(--revontuli))), transparent 60%),
      linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
    background-size:200% 200%, 200% 200%, 100% 100%;
    background-position:0% 0%, 100% 0%, 0% 0%;
    animation:auroraDrift 50s ease-in-out infinite alternate;
    transition:background-color 2s ease;
    min-height:100vh;
    font-family:'Space Grotesk', sans-serif;
    color:var(--text-hi);
    display:flex;
    justify-content:center;
    padding:calc(env(safe-area-inset-top, 0px) + 28px) 0 60px;
  }
  @keyframes auroraDrift{
    0%{ background-position:0% 0%, 100% 0%, 0% 0%; }
    50%{ background-position:25% 20%, 75% 25%, 0% 0%; }
    100%{ background-position:10% 30%, 90% 5%, 0% 0%; }
  }
  @media (prefers-reduced-motion: reduce){
    body{ animation:none; }
  }
  /* Revontulihehku omana kerroksenaan näytön yläreunassa. Aiemmin hehku oli body:n
     taustassa, mutta kortit peittävät lähes koko ruudun - hehkua näkyi vain kapeilla
     reunoilla eikä eroa tasojen välillä erottanut. Kiinteänä kerroksena se on
     korttien TAKANA mutta selvästi näkyvissä yläreunassa, kuten oikea revontuli
     horisontin yllä. Ei ota kosketuksia vastaan (pointer-events:none). */
  /* Värit kalibroitu käyttäjän omasta Kp 8 -myrskykuvasta: hapen 557,7 nm vihreä,
     kirkkaimmillaan lähes valkoiseksi kyllästyvä ydin, ja typen 427,8 nm magenta
     ylälaidassa. Aiemmin käytin sinivioletttia, joka ei vastaa todellista väriä. */
  .revontuli-hehku{
    position:fixed;
    top:0; left:0; right:0;
    height:46vh;
    pointer-events:none;
    z-index:0;
    opacity:calc(var(--revontuli) * var(--taivas));
    filter:blur(16px);
    transition:opacity 1.6s ease;
  }
  /* Vihreä verho. KORJATTU: gradienttien keskipisteet olivat ruudun yläpuolella
     (-22%), joten näkyvissä oli vain niiden häntä - lopputulos oli litteä sävy
     eikä verho. Nyt keskipisteet ovat ruudun sisällä ja verho on epäsymmetrinen,
     kuten oikea revontuli: kirkkain kohta ei ole keskellä.
     Pystyraidat jäljittelevät verhon säteittäistä rakennetta - revontuli ei ole
     tasainen läiskä vaan magneettikenttäviivoja pitkin laskeutuvia juovia. */
  .revontuli-hehku::before{
    content:'';
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(96deg,
        rgba(232,255,240,0.16) 0 10px,
        transparent 10px 34px,
        rgba(75,227,139,0.13) 34px 44px,
        transparent 44px 78px),
      radial-gradient(90% 62% at 38% 30%, rgba(232,255,240,0.62), rgba(75,227,139,0.50) 30%, rgba(62,216,136,0.16) 62%, transparent 82%),
      radial-gradient(65% 50% at 76% 16%, rgba(75,227,139,0.42), transparent 68%);
    animation:hehkuAalto 24s ease-in-out infinite alternate;
  }
  /* Magenta ylälaita ilmestyy VAIN voimakkaassa myrskyssä. Typen emissio vaatii
     paljon energisemmät hiukkaset kuin hapen vihreä, joten heikossa revontulessa
     sitä ei näy lainkaan - siksi opacity on aktiivisuuden NELIÖ eikä suoraan
     verrannollinen: se pysyy lähes nollassa pitkään ja syttyy vasta lopussa.
     Sijoitettu vihreän YLÄPUOLELLE, koska typen emissio tapahtuu korkeammalla -
     kuvassa magenta on aina verhon yläreunassa. */
  .revontuli-hehku::after{
    content:'';
    position:absolute; inset:0;
    opacity:calc(var(--revontuli) * var(--revontuli));
    background:
      repeating-linear-gradient(96deg,
        rgba(214,138,222,0.14) 0 12px,
        transparent 12px 40px),
      radial-gradient(78% 42% at 42% 2%, rgba(206,132,232,0.72), rgba(168,96,206,0.34) 44%, transparent 74%),
      radial-gradient(50% 32% at 74% -4%, rgba(224,150,230,0.46), transparent 66%);
    animation:hehkuAalto 31s ease-in-out infinite alternate-reverse;
  }
  @keyframes hehkuAalto{
    0%{ transform:translateX(-5%) scaleY(1) skewX(-2deg); }
    50%{ transform:translateX(4%) scaleY(1.14) skewX(3deg); }
    100%{ transform:translateX(-2%) scaleY(0.92) skewX(-1deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .revontuli-hehku::before, .revontuli-hehku::after{ animation:none; }
  }
  .phone{
    width:390px;
    max-width:94vw;
    position:relative;
    z-index:1;
  }
  @media (min-width: 700px){
    .phone{ width:520px; max-width:90vw; }
  }
  /* Macilla/leveällä näytöllä: "Tilanne nyt" ja "Mene ulos tänään" vierekkäin sen
     sijaan että sivu jää kapeaksi puhelinpylvääksi keskelle isoa näyttöä. Muu sisältö
     (välilehdet) pysyy yhtenä leveämpänä palstana - ei täyttä kaksipalstaista
     uudelleenjärjestelyä koko sivulle, koska se on jo toimiva mobiilissa. */
  @media (min-width: 1000px){
    .phone{ width:1000px; max-width:92vw; }
    /* 29.9.2026: Nyt-osioon lisättiin Tämä yö, Yökello ja Horisontti saman kääreen sisään,
       jolloin kaikki viisi puristuivat yhdelle riville. Nyt kääre rivittyy: Tilanne nyt +
       Mene ulos vierekkäin, Tämä yö koko leveydeltä, Yökello + Horisontti vierekkäin. */
    .nyt-flex-wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; margin:0 14px 22px; }
    .nyt-flex-wrap > *{ flex:1 1 100%; min-width:0; }
    .nyt-flex-wrap > .card, .nyt-flex-wrap > .hero{ margin:0; }   /* voittaa .card-säännön marginaalin */
    /* 8.10.2026: sankarinäkymä koko leveydeltä; Tilanne nyt ja Horisontti vierekkäin
       (Mene ulos- ja Yökello-kortit korvautuivat sankarinäkymällä). */
    .nyt-flex-wrap > #sankari{ margin:0; }
    .nyt-flex-wrap > .hero,
    .nyt-flex-wrap > #horisonttikortti{ flex:1 1 calc(50% - 8px); align-self:stretch; }
    .card:hover{ border-color:rgba(140,124,240,0.5); }
    /* Yksinkertaiset (kaavioton) datakortit vierekkäin leveällä näytöllä sen sijaan
       että jättäisivät ison tyhjän välin nimen ja arvon väliin - kortit joissa on
       sparkline/kuva/kaavio pysyvät tarkoituksella täysleveinä omana rivinään, koska
       ne tarvitsevat leveyttä pysyäkseen luettavina. */
    .card-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:10px;
      margin:0 14px 10px;
    }
    .card-grid .card{ margin:0; }
  }
  .header-panel{
    margin:14px 14px 18px;
    padding:18px 18px 15px;
    border-radius:18px;
    background:linear-gradient(155deg, #16204A 0%, #0F1530 100%);
    border:1px solid var(--card-border);
  }
  .eyebrow{
    min-width:0;          /* flex-lapsi saa kutistua, muuten pitkä rivi työntyy napeille */
    overflow-wrap:anywhere;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-lo);
    margin:0;
  }
  .eyebrow-row{
    display:block;
  }
  .eyebrow-paikka{
    color:var(--text-hi);
    font-weight:600;
  }
  .eyebrow-meta{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:7px;
  }
  .eyebrow-alue{
    display:inline-block;
    width:auto;
    margin:0;
    padding:0;
    background:none;
    border:none;
    color:var(--text-lo);
    font-size:11px;
    letter-spacing:0.22em;
    text-align:center;
    opacity:0.75;
  }
  .eyebrow-koordinaatit{
    display:inline-block;
    margin-left:8px;
    color:var(--text-lo);
    font-size:11px;
    letter-spacing:0.08em;
    opacity:0.8;
    /* Ei white-space:nowrap. Rivi on pitkä (koordinaatit, korkeus ja lämpötila),
       ja katkeamattomana se jatkoi otsikon nappien ali - lämpötila jäi kuunapin
       alle piiloon. Kääntyköön mieluummin seuraavalle riville. */
  }
  h1{
    font-size:15px;
    font-weight:700;
    margin:0 0 6px;
    letter-spacing:0em;
    line-height:1.15;
  }
  .logo-title{
    font-family:'Rajdhani', sans-serif;
    text-transform:uppercase;
  }
  /* Liukuväri asetettu erikseen KUMMALLEKIN riville, ei vain yhteiselle yläelementille -
     Safari ei aina leikkaa (-webkit-background-clip:text) liukuväriä luotettavasti
     lohko-lapsiin (display:block) kun väritys on vain esi-isällä; jälkimmäinen rivi jäi
     tästä syystä täysin näkymättömäksi (läpinäkyvä teksti ilman omaa taustaa). */
  .logo-main{
    display:block;
    font-size:19px;
    font-weight:700;
    line-height:1.15;
    background:linear-gradient(90deg, var(--green), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .logo-accent{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    line-height:1.2;
    margin-top:2px;
    opacity:0.85;
    background:linear-gradient(90deg, var(--green), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* HERO STATUS */
  .hero{
    margin:0 14px 22px;
    border-radius:20px;
    padding:20px 20px 18px;
    background:linear-gradient(155deg, #16204A 0%, #0F1530 100%);
    border:1px solid var(--card-border);
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(48% 60% at 100% -10%, rgba(62,216,136,0.22), transparent 70%),
      radial-gradient(38% 50% at 88% 15%, rgba(231,210,87,0.14), transparent 75%);
    pointer-events:none;
    animation:heroGlow 18s linear infinite;
  }
  @keyframes heroGlow{
    0%{ filter:hue-rotate(0deg); opacity:1; }
    50%{ filter:hue-rotate(15deg); opacity:0.85; }
    100%{ filter:hue-rotate(0deg); opacity:1; }
  }
  body.piilossa{ animation-play-state:paused; }
  body.piilossa .hero::after{ animation-play-state:paused; }
  .hero-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative;}
  .hero-label{
    font-size:15px;
    font-weight:700;
    color:var(--violet);
    font-family:'IBM Plex Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.08em;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .hero-label::before{
    content:'';
    display:inline-block;
    width:4px;
    height:14px;
    background:var(--violet);
    border-radius:1px;
  }
  /* 10.10.2026 y: kapealla näytöllä tila (esim. "Kohtalainen") ja Kp mahtuvat samalle riville:
     päivitä-napista jää vain kuvake ja tilan fontti pienenee hieman. */
  /* 10.10.2026 ad: kapealla näytöllä päivitä-nappi pitää nimensä; Kp + "3 h" siirtyvät napin alle
     (aiemmin napista jäi vain kuvake, jotta Kp mahtui samalle riville). */
  @media (max-width:440px){
    .hero-oikea{ display:grid !important; grid-template-columns:auto auto; grid-template-areas:"nappi piste" "kp kp"; row-gap:6px; column-gap:10px !important; justify-items:end; }
    .hero-oikea > #paivita-btn{ grid-area:nappi; }
    .hero-oikea > .hero-dot{ grid-area:piste; }
    .hero-oikea > .hero-kp-lohko{ grid-area:kp; flex-direction:row !important; align-items:baseline !important; gap:6px; }
  }
  .hero-status{
    font-size:clamp(22px, 6.4vw, 26px);
    font-weight:700;
    margin-top:4px;
    background:linear-gradient(90deg, var(--green), #A9E88A);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 4px rgba(62,216,136,0.18);
    margin-top:8px;
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(62,216,136,0.18); }
    50%{ box-shadow:0 0 0 8px rgba(62,216,136,0.05); }
  }
  /* Säähistoriakortin välilehtinapit */
  .hist-tab{
    background:rgba(127,168,217,0.1);
    border:1px solid rgba(127,168,217,0.3);
    border-radius:16px;
    padding:5px 12px;
    color:var(--text-lo);
    font-family:'Space Grotesk',sans-serif;
    font-size:13px;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  /* 11.10.2026 m: kaikki valintanapit samaa tyyliä - kehystetty pilleri, valittu korostettu
     kirkkaammalla reunalla ja tekstillä (ei raskasta täytettyä väriä). */
  .hist-tab-aktiivinen{
    background:rgba(127,168,217,0.24);
    border-color:#9FC0EA;
    color:var(--text-hi);
    font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(159,192,234,0.35);
  }
  @keyframes spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  /* Sijaintinappi: isompi kosketusalue (44px = Applen suositus sormelle) ja
     hienovarainen sykkivä kehä, joka kutsuu napauttamaan. Sykkeen väri on
     violetti kuten napin oma ikoni. prefers-reduced-motion huomioitu alempana. */
  .sijainti-nappi{
    flex-shrink:0;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    background:linear-gradient(145deg, rgba(140,124,240,0.22), rgba(140,124,240,0.08));
    border:1px solid rgba(140,124,240,0.5);
    border-radius:13px;
    color:var(--violet);
    cursor:pointer;
    transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .sijainti-nappi::after{
    content:'';
    position:absolute; inset:-1px;
    border-radius:13px;
    animation:sijaintiSyke 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  .sijainti-nappi:hover{
    background:linear-gradient(145deg, rgba(140,124,240,0.32), rgba(140,124,240,0.14));
    border-color:rgba(140,124,240,0.75);
  }
  .sijainti-nappi:active{ transform:scale(0.93); }
  @keyframes sijaintiSyke{
    0%,100%{ box-shadow:0 0 0 0 rgba(140,124,240,0.35); }
    55%{ box-shadow:0 0 0 9px rgba(140,124,240,0); }
  }
  /* Sijainnin haun ajaksi nappi jää kirkkaaksi ja sykkii nopeammin - näin käyttäjä
     näkee heti että napautus rekisteröityi (GPS-haku voi kestää useita sekunteja). */
  .sijainti-nappi.hakee{
    background:linear-gradient(145deg, rgba(140,124,240,0.4), rgba(140,124,240,0.2));
    border-color:var(--violet);
  }
  .sijainti-nappi.hakee::after{ animation-duration:1s; }
  @media (prefers-reduced-motion: reduce){
    .sijainti-nappi::after{ animation:none; }
  }
  #paivita-icon{ display:inline-block; }
  @keyframes lataaPulssi{
    0%, 100%{ opacity:0.35; }
    50%{ opacity:0.85; }
  }
  .lataa-pulssi{
    animation:lataaPulssi 1.3s ease-in-out infinite;
  }
  .hero-sub{
    font-size:13px;
    color:var(--text-lo);
    margin-top:10px;
    line-height:1.5;
    position:relative;
  }
  .hero-scale{
    display:flex;
    gap:3px;
    margin-top:16px;
    position:relative;
  }
  .hero-scale span{
    flex:1;
    height:5px;
    border-radius:3px;
    background:var(--card-border);
  }
  .hero-scale span.on{background:linear-gradient(90deg, var(--green), #A9E88A);}

  /* METRIC CARDS */
  .pvt-aika{
    /* 4.10.2026 (i): sama fontti kuin muussa vihjerivissä - ennen "päivitetty 19.16"
       vaihtui kesken rivin tasalevyiseksi osassa korteista. */
    font-size:inherit;
    font-family:inherit;
    color:var(--text-lo);
    margin-left:2px;
  }
  .section-label{
    font-size:11px;
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-lo);
    margin:22px 18px 10px;
  }
  .card{
    margin:0 14px 10px;
    border-radius:16px;
    background:var(--card);
    border:1px solid var(--card-border);
    overflow:hidden;
    position:relative;
  }
  .card-row{
    display:flex;
    align-items:stretch;
    cursor:pointer;
    padding:0 0 0 5px;
  }
  .card-meter{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:5px;
  }
  .card-main{
    flex:1;
    padding:14px 14px 14px 12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }
  /* Safari/WebKit ei aina kutista sisäkkäistä flex-lasta rivittääkseen pitkän tekstin
     ilman eksplisiittistä min-width:0 - Chrome hoitaa tämän oletuksena, Safari ei aina.
     Koskee nimi+hint-lohkoa jonka vieressä on arvo/chevron samalla rivillä. */
  .card-main > div:first-child{ min-width:0; }
  .card-name{
    font-size:15px;
    font-weight:500;
    color:var(--text-hi);
  }
  .card-name.hero-label{
    font-size:15px;
    font-weight:700;
    color:var(--violet);
  }
  .card-hint{
    font-size:13px;
    color:var(--text-lo);
    margin-top:2px;
  }
  .card-value{
    font-family:'IBM Plex Mono', monospace;
    font-size:19px;
    font-weight:600;
    text-align:right;
    white-space:nowrap;
  }
  .card-value .unit{
    font-size:11px;
    color:var(--text-lo);
    margin-left:5px;   /* 11.10.2026 p: "2,3 3 h" luettiin "2,33 h" */
  }
  .chev{
    color:var(--text-lo);
    font-size:13px;
    transition:transform 0.25s ease;
    flex-shrink:0;
  }
  .card.open .chev{ transform:rotate(90deg); }
  .card-detail{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .card.open .card-detail{ max-height:3000px; }
  /* Saana-kortti sisältää ison SVG-kompassin + 8 selitesolua, jotka ylittävät
     yleisen 3000px-rajan - siksi omansa, muuten sisältö leikkautuisi auki. */
  #saanakortti.open .card-detail{ max-height:6000px; }
  .card-detail-inner{
    padding:0 16px 16px 20px;
    font-size:13px;
    line-height:1.55;
    color:var(--text-lo);
    border-top:1px solid var(--card-border);
    margin-top:2px;
    padding-top:12px;
  }

  .note{
    margin:24px 18px 0;
    font-size:13px;
    line-height:1.6;
    color:var(--text-lo);
    padding:14px 16px;
    border-radius:14px;
    background:rgba(140,124,240,0.08);
    border:1px solid rgba(140,124,240,0.25);
  }
  .note b{ color:var(--text-hi); }

  
  #ovaali-wrap{ background-size:contain !important; background-position:center !important; }
  .nav-chip{
    flex-shrink:0;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--text-lo);
    text-decoration:none;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--card-border);
    padding:6px 10px;
    border-radius:20px;
  }
  .nav-chip:active{ background:rgba(62,216,136,0.15); color:var(--green); border-color:rgba(62,216,136,0.4); }
  .nav-chip.aktiivinen{ background:rgba(62,216,136,0.15); color:var(--green); border-color:rgba(62,216,136,0.5); }
  /* 4.10.2026 (h): 52 -> 62 px - välilehtipalkki peitti osion otsikon ääkkösten pisteet ("SAA"). */
  #sec-nyt, #sec-kamerat, #sec-data, #sec-pilvisyys, #sec-saa, #sec-taivas, #sec-kalenteri{ scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 62px); }

  /* Revontulikartta (MapLibre GL, pyöritettävä maapalloprojektio).
     OSM:n tiilet ovat vaaleat - ne tummennetaan MapLibren omilla raster-paint-
     ominaisuuksilla (ks. JS), ei CSS-suodattimella, jotta ovaali ja pilvet
     säilyttävät omat värinsä. */
  #revontulikartta .maplibregl-ctrl-attrib{ background:rgba(11,16,48,0.75); }
  #revontulikartta .maplibregl-ctrl-attrib, #revontulikartta .maplibregl-ctrl-attrib a{ color:#8B93B8; font-size:11px; }
  #revontulikartta .maplibregl-ctrl-attrib a{ color:#8C7CF0; }
  #revontulikartta .maplibregl-ctrl-group{ background:#151B45; border:1px solid rgba(255,255,255,0.12); }
  #revontulikartta .maplibregl-ctrl-group button+button{ border-top-color:rgba(255,255,255,0.12); }
  #revontulikartta .maplibregl-ctrl-group button .maplibregl-ctrl-icon{ filter:invert(1); }
  #revontulikartta canvas{ outline:none; }

  /* Kunnioittaa käyttöjärjestelmän "vähemmän liikettä" -asetusta - pysäyttää kaikki
     animaatiot (aurora-tausta, pulssit, spinnerit) niille joille liike voi haitata. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

/* Tahtitausta maapallonakymaan. MapLibre ei piirra tahtia, ja globe-projektiossa
   maapallon ulkopuolinen alue jaa lapinakyvaksi - joten tahdet tehdaan taalla
   kartan kehyksen taustaksi. Kolme radial-gradient-kerrosta eri kokoisia pisteita
   antaa satunnaisen vaikutelman ilman kuvatiedostoa tai canvas-piirtoa.
   Luokka lisataan ja poistetaan JS:sta zoomin mukaan (ks. paivitaTahtitausta). */
/* Maastokartan sailio. Taustavari oli aiemmin inline-tyylina itse elementissa;
   se siirrettiin tanne, jotta tyylitiedosto paasee vaikuttamaan siihen. */
#maastokartta{
  background-color:#0B1030;
}

/* ===== YÖTILA =====
   Pimeänäkö sopeutuu 20-30 minuutissa ja katoaa sekunneissa, kun katsoo
   sinivalkoista ruutua. Punainen valo ei sammuta sopeutumista lähimainkaan
   yhtä nopeasti - siksi tähtitieteessä ja merenkulussa on käytetty punaista
   kartanlukuvaloa vuosikymmeniä. Tämä sivu on rakennettu käytettäväksi
   maastossa yöllä, joten se on juuri se tila jota sivu eniten tarvitsee.

   TOTEUTUS SUODATTIMENA, ei väritokeneja vaihtamalla: kaavioiden SVG-attribuutit
   ja MapLibren paint-arvot eivät tunne CSS-muuttujia, joten tokenien vaihto
   jättäisi kartat ja kaaviot ennalleen - eli juuri ne isot kirkkaat pinnat.
   Suodatin osuu kaikkeen, myös satelliittikuvaan ja live-kamerakuviin. */
body.yotila{
  background:#000;
  animation:none;                 /* revontulihehkun ajelehdinta pois - turhaa valoa */
}
body.yotila .revontuli-hehku{
  display:none;                   /* koristehehku on sinivihreä, eli pahin mahdollinen */
}
body.yotila .phone{
  /* Väримatriisi index.html:ssä (#yofiltteri). Kokeilin ensin CSS:n omilla
     suodattimilla (grayscale + sepia + hue-rotate + saturate) mutta lopputulos oli
     oranssi, ja vaalea teksti jätti läpi 47 % sinistä - eli juuri sen mikä
     pimeänäön sammuttaa. Väримatriisilla sinistä jää enintään 6 %. */
  filter:url(#yofiltteri);
}
/* Kytkin itse jää suodattimen ulkopuolelle vain siltä osin, että se on
   tunnistettavissa: annetaan sille selvä oma reunus kun tila on päällä. */
.yotila-nappi{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--card-border);
  background:rgba(255,92,122,0.08);
  color:var(--text-lo);
  cursor:pointer;
}
body.yotila .yotila-nappi{
  border-color:rgba(255,92,122,0.65);
  background:rgba(255,92,122,0.18);
  color:var(--text-hi);
}

/* ===== KOSKETUSKOHTEIDEN VÄHIMMÄISKOKO =====
   40 napista 25 jäi alle 44 pikselin: tyypillinen oli padding 6px + 11px fontti,
   eli noin 28 px korkea. Se riittää sisällä paljain sormin, mutta tämä sivu
   käytetään maastossa hanskat kädessä ja usein kylmissään - silloin 28 px on liian
   pieni ja väärä nappi osuu helposti.

   min-height eikä isompi padding: padding siirtäisi tekstiä ja rikkoisi korttien
   asettelun, kun taas min-height + flex keskittää sisällön koskematta muuhun.
   Napin näkyvä koko ei siis kasva yhtä paljon kuin sen osumapinta - juuri niin
   kuin halutaan. */
button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* Kartan omat zoom- ja kompassipainikkeet ovat MapLibren omaa käyttöliittymää ja
   muodostavat kiinteän pystypinon: 44 px venyttäisi pinon kartan yli. Palautetaan
   ne alkuperäisiksi. Erillisenä sääntönä eikä :not()-rakenteena, koska :not()
   yhdistelmävalitsimella ei toimi luotettavasti vanhemmissa Safareissa. */
.maplibregl-ctrl button{
  min-height:0;
  display:block;
}

/* Navipalkki. Tyylit olivat ennen inline-attribuuttina, mikä esti yötilaa
   toimimasta: backdrop-filter loi elementille oman taustakerroksen, jolloin se
   karkasi .phone-elementin väримatriisista ja jäi ainoana siniseksi - eikä
   tyylitiedosto voinut kumota sitä, koska inline voittaa aina. */
#pikanav{
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:20;
  display:flex;
  gap:5px;
  padding:8px 12px;
  margin:0 0 4px;
  /* 0.92 oli niin peittävä, ettei sumennus näkynyt käytännössä lainkaan - lasi-ilme
     syntyy vasta kun taustaa kuultaa selvemmin läpi. 0.72 + vahvempi sumennus
     jättää kortit näkyviin sumeina palkin alla vieritettäessä, mutta pitää tekstin
     yhä luettavana. */
  background:rgba(8,11,24,0.72);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--card-border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  /* Palkki pysähtyy aina sirun reunaan eikä keskelle sirua. Ilman tätä vieritys jäi
     mihin tahansa kohtaan, jolloin molemmissa päissä näkyi puolikas siru - se näytti
     rikkinäiseltä vaikka mitään ei ollut vialla. proximity eikä mandatory: pakotettu
     kohdistus tuntuu takkuiselta lyhyessä listassa. */
  scroll-snap-type:x proximity;
  scroll-padding-inline:12px;
  /* 6.10.2026 (w): piilotetaan vierityspalkki. iOS piirsi sirujen alle harmaan
     palkin aina kun riviä tai sivua vieritettiin - näytti palkin muuttuneen. */
  scrollbar-width:none;
}
#pikanav::-webkit-scrollbar{ display:none; width:0; height:0; }
#pikanav .nav-chip{
  scroll-snap-align:start;
}
/* Flexin ja overflow-x:n tunnettu ongelma: säiliön OIKEA padding jätetään huomiotta
   kun sisältö ylivuotaa, joten viimeinen siru leikkautuu kiinni reunaan. Näennäinen
   välike lopussa palauttaa saman välin kuin vasemmalla. */
#pikanav::after{
  content:'';
  flex:0 0 12px;
}
/* YÖTILAN NAVIPALKKI - käsin väritetty, ei suodatettu.
   backdrop-filter luo elementille oman taustakerroksen, ja WebKitissä se jää
   .phone-elementin väримatriisin ulkopuolelle - eikä sitä saa purettua edes
   arvolla none. Vaihtoehtoja oli kaksi: poistaa sumennus (kokeiltiin, näytti
   tylsältä) tai värittää palkki itse. Nämä arvot on laskettu samasta matriisista
   kuin muu sivu, joten palkki näyttää täsmälleen siltä kuin se olisi suodatettu -
   ja sumennus säilyy.
     tausta   #080B18 -> rgb(12,2,1)
     reunus   #232C52 -> rgb(47,6,3)
     teksti   #8993B8 -> rgb(149,19,9)
     valittu  #3ED888 -> rgb(150,20,9)                                        */
body.yotila #pikanav{
  background:rgba(12,2,1,0.72);
  border-bottom-color:rgb(47,6,3);
}
body.yotila .nav-chip{
  color:rgb(149,19,9);
  background:rgba(255,255,255,0.03);
  border-color:rgb(47,6,3);
}
body.yotila .nav-chip.aktiivinen,
body.yotila .nav-chip:active{
  color:rgb(150,20,9);
  background:rgba(150,20,9,0.16);
  border-color:rgba(150,20,9,0.5);
}

  /* Kuukausikarttakortin kuukausinavigointi. Pyöreä 34px nappi on juuri ja
     juuri sormelle riittävä; isompi veisi tilaa otsakkeelta kapealla näytöllä. */
  .kkkartta-navi{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(127,168,217,0.3);
    background:rgba(127,168,217,0.1);
    color:var(--text-mid);
    font-size:19px;
    line-height:1;
    cursor:pointer;
    transition:opacity 0.15s ease;
  }
  .kkkartta-navi:disabled{ cursor:default; }

  /* Molemmissa korteissa on paljon sisältöä: asemamittauksessa 12 riviä plus pitkä
     selite, kuukausikartoissa koko Suomen kartta pystysuuntaisena. Yleinen 3000px
     katto riittäisi luultavasti, mutta jos ei riitä, sisältö leikkautuisi hiljaisesti
     ilman virheilmoitusta - se on juuri sellainen vika jota ei huomaa testatessa. */
  #asemahistoriakortti.open .card-detail{ max-height:6000px; }
  #kpkortti.open .card-detail{ max-height:6000px; }
  #syklikortti.open .card-detail, #kp27kortti.open .card-detail, #lumipeitekortti.open .card-detail, #pilviyokortti.open .card-detail, #ensemblekortti.open .card-detail, #pakkaskortti.open .card-detail, #kilkeokortti.open .card-detail, #yokellokortti.open .card-detail, #horisonttikortti.open .card-detail{ max-height:3000px; }
  #kuukausikarttakortti.open .card-detail{ max-height:6000px; }

/* ===== KESKITYSTILA =====
   Yksi nappi piilottaa kaiken paitsi kolme korttia: Tilanne nyt, Mene ulos tänään
   ja Sää nyt. Tarkoitus on maastokäyttö - kun seisot pimeässä hanskat kädessä,
   et halua selata neljääkymmentä korttia nähdäksesi kannattaako mennä ulos.

   Toteutus on tarkoituksella CSS-pohjainen eikä JS-silmukka, joka asettaisi
   display:none jokaiselle kortille erikseen: silloin tilan purku joutuisi
   muistamaan kunkin kortin ALKUPERÄISEN näkyvyyden, ja osa korteista on
   display:none siksi ettei niillä ole dataa. Se palauttaisi ne vahingossa
   näkyviin. Nyt alkuperäinen display säilyy koskemattomana. */
/* !important ja :not() ovat molemmat välttämättömiä. Suurimmalla osalla
   datakorteista on merkinnässä style="display:none", ja niiden hakufunktio
   asettaa style.display = 'block' kun data saapuu. Inline-tyyli voittaa aina
   tyylitiedoston, joten ilman !importantia juuri ne kortit jäivät näkyviin -
   eli kaikki ne joilla on dataa. Vastaavasti :not() on parempi kuin kolme
   erillistä display-sääntöä: näin säilytettävät lohkot pitävät OMAN
   display-arvonsa, eikä Sää nyt -kortti tule vahingossa näkyviin silloin kun
   sen oma haku on piilottanut sen datan puuttuessa. */
body.keskity .phone > *:not(.header-panel):not(.nyt-flex-wrap):not(#saanytkortti):not(#kilpisjarvi-live-kortti){
  display:none !important;
}
/* 8.10.2026 l: Keskity-tila isolla näytöllä (MacBook Safari) mahtuu yhdelle ruudulle:
   sankarinäkymä vasemmalle, Kilpisjärvi Live ja Sää nyt oikealle. Piilotetut kortit
   (display:none) eivät vie ruudukosta paikkaa. Sankarinäkymän luvut 3 × 2, koska
   kapeammassa palstassa kuusi ruutua rinnakkain ei mahdu. */
@media (min-width:1100px){
  body.keskity .phone{ width:1440px; max-width:96vw; display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows:auto auto auto 1fr; column-gap:16px; align-items:start; }
  body.keskity .phone > .header-panel{ grid-column:1 / -1; }
  body.keskity .phone > .nyt-flex-wrap{ grid-column:1; grid-row:2 / span 3; margin:0 0 22px 14px; }   /* 1fr-rivi ottaa korkeuseron, ei Live- ja Sää nyt -korttien väli */
  body.keskity .phone > #kilpisjarvi-live-kortti{ grid-column:2; grid-row:2; margin:0 14px 12px 0; }
  body.keskity .phone > #saanytkortti{ grid-column:2; grid-row:3; margin:0 14px 10px 0; }
  body.keskity #sankari .s-luvut{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  body.keskity #sankari .s-sis{ grid-template-columns:1fr 320px; }
}
/* 8.10.2026 g: Keskity-tilassa yläosasta näkyy vain sankarinäkymä (Tänä yönä);
   Tilanne nyt, Tämä yö ja Horisontti piiloon. */
body.keskity .nyt-flex-wrap > *:not(#sankari){
  display:none !important;
}

.keskity-nappi{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--card-border);
  background:rgba(127,168,217,0.08);
  color:var(--text-lo);
  cursor:pointer;
}
body.keskity .keskity-nappi{
  border-color:rgba(127,168,217,0.65);
  background:rgba(127,168,217,0.2);
  color:var(--text-hi);
}

/* Arvo joka koostuu useasta erillisestä nowrap-palasta saa rivittyä PALOJEN VÄLISTÄ.
   Ilman tätä .card-value{white-space:nowrap} tekee koko arvosta katkeamattoman:
   flex antaa sille silloin kaiken tarvitsemansa tilan ja viereinen vihjeteksti
   kutistuu min-content-leveyteen eli yhteen sanaan riviä kohti. Tuulikortissa arvo
   on "9.4 m/s LU · puuska 15.3 m/s", ja juuri siinä ilmiö näkyi.
   Palojen sisäinen nowrap säilyy, joten luku ja yksikkö eivät koskaan katkea. */
.card-value.card-value-rivittyva{ white-space:normal; }

/* ===== MAASTOKARTAN ATTRIBUUTIO =====
   MapLibren oletus on valkoinen laatikko, joka tummalla kartalla ja
   ilmakuvalla peittää ison osan näkymästä. Sama hillitty tyyli kuin
   revontulikartassa: tumma tausta, pieni fontti.
   Attribuutiota ei piiloteta kokonaan - OpenTopoMap on CC-BY-SA ja Esri
   edellyttää mainintaa, joten se on oltava saatavilla ⓘ-napin takaa. */
#maastokartta .maplibregl-ctrl-attrib{
  background:rgba(11,16,48,0.72);
  border-radius:6px;
}
#maastokartta .maplibregl-ctrl-attrib,
#maastokartta .maplibregl-ctrl-attrib a{
  color:#8B93B8;
  font-size:11px;
  line-height:1.35;
}
#maastokartta .maplibregl-ctrl-attrib a{ color:#7FA8D9; }
/* ⓘ-nappi pienemmäksi ja himmeämmäksi kuin MapLibren oletus */
#maastokartta .maplibregl-ctrl-attrib-button{
  background-color:rgba(11,16,48,0.72);
  opacity:0.65;
  width:22px;
  height:22px;
}


/* ===== TILAPALKIN ALUE (kotivalikosta avattaessa) =====
   apple-mobile-web-app-status-bar-style on black-translucent, jolloin sivu ulottuu
   tilapalkin alle. html-elementillä ei ollut omaa taustaa, joten yläreunassa näkyi
   vaalea kaistale. Tämä korjaus tehtiin jo aiemmin, mutta se ei koskaan päätynyt
   tähän tiedostoon. */
html{ background-color:#080B18; }

/* ===== VÄLIMATKAT-KARTTA ===== */
#valimatkakartta{
  width:100%;
  height:360px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--card-border);
  background:#0B1030;
}
.vm-merkki{
  background:rgba(8,11,24,0.82);
  border:1px solid rgba(231,210,87,0.45);
  border-radius:7px;
  padding:3px 6px 4px;
  pointer-events:none;
  white-space:nowrap;
  line-height:1.15;
}
.vm-merkki.vm-retki{ border-color:rgba(62,216,136,0.45); }
.vm-merkki-nimi{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.03em;
  color:#E2E8FF; text-transform:uppercase;
}
.vm-merkki-km{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px; font-weight:700; color:var(--yellow);
}
.vm-merkki.vm-retki .vm-merkki-km{ color:var(--green); }
.vm-keskus{ display:flex; flex-direction:row; align-items:center; gap:4px; pointer-events:none; }
.vm-keskus-pallo{
  width:14px; height:14px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 3px rgba(231,210,87,0.25);
}
.vm-keskus-nimi{
  font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.05em; color:#E2E8FF;
  text-shadow:0 0 3px #080B18, 0 0 6px #080B18;
}
.vm-lista{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.vm-rivi{ display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.vm-teksti{ flex:1; min-width:0; display:flex; flex-direction:column; }
.vm-pallo{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  border:2px solid var(--yellow); position:relative; top:3px;
}
.vm-pallo.vm-retki{ border-color:var(--green); }
.vm-nimi{ color:var(--text-hi); font-weight:600; }
.vm-suunta{ color:var(--text-lo); font-size:11px; margin-top:1px; }
.vm-km{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--yellow); white-space:nowrap; }
.vm-km.vm-retki{ color:var(--green); }

/* ===== JULKAISUN TARKISTUS ===== */
.julkaisu-varoitus{
  position:fixed;
  left:12px; right:12px;
  top:calc(env(safe-area-inset-top, 0px) + 8px);
  z-index:1000;
  background:#3A1420;
  border:1px solid var(--red);
  border-radius:10px;
  padding:10px 12px;
  color:#FFD9E0;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}


/* ===== VAROITUSRIVI SÄÄ NYT -KORTISSA =====
   Väri (teksti + reuna) asetetaan app.js:ssä varoituksen tason mukaan. */
.saanyt-varoitus{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:7px;
  padding:5px 9px;
  border:1px solid;
  border-left-width:3px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  font-size:11px;
  line-height:1.4;
  cursor:pointer;
}
.saanyt-varoitus b{ font-weight:600; }
/* Sticky-välilehtipalkki peittäisi muuten kortin yläreunan vierityksen jälkeen. */
#varoituskortti{ scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 64px); }


/* ===== AURINKO VALITTUNA PÄIVÄNÄ ===== */
.apv-ohjaimet{ display:flex; gap:6px; align-items:center; }
.apv-nappi{
  flex:0 0 auto; min-width:40px; height:38px; padding:0 10px;
  background:rgba(231,210,87,0.10); border:1px solid rgba(231,210,87,0.35);
  border-radius:9px; color:var(--yellow);
  font-family:'Space Grotesk',sans-serif; font-size:19px; cursor:pointer;
}
.apv-tanaan{ font-size:13px; }
.apv-pvm{
  flex:1; min-width:0; height:38px; padding:0 8px;
  background:rgba(255,255,255,0.05); border:1px solid var(--card-border);
  border-radius:9px; color:var(--text-hi); color-scheme:dark;
  font-family:'IBM Plex Mono',monospace; font-size:15px;
}
.apv-paiva{ margin-top:12px; font-size:15px; font-weight:600; color:var(--text-hi); }
.apv-paiva::first-letter{ text-transform:uppercase; }
.apv-paikka{ font-size:11px; color:var(--text-lo); margin-top:2px; }
.apv-tila{ margin-top:8px; font-size:13px; font-weight:600; color:var(--violet); }
.apv-ruudukko{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.apv-ruutu{
  background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  border-radius:10px; padding:9px 11px;
}
.apv-otsikko{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-lo); }
.apv-arvo{ margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:700; color:var(--text-hi); }
.apv-ala{ margin-top:2px; font-size:11px; color:var(--text-lo); }
.apv-seur{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:500; color:var(--text-lo); }
.apv-lisa{ margin-top:8px; font-size:13px; color:var(--text-mid); line-height:1.5; }


/* ===== KORTIN SISÄLTÖ EI SAA VENYÄ REUNAN YLI =====
   .card-main on .card-row:n flex-lapsi, jonka oletus min-width:auto antaa sen kasvaa
   sisällön vähimmäisleveyden mukaan. Kp-kaavioissa 24-32 tuntilabelia ylitti kortin
   leveyden, jolloin koko sisältö (otsikon arvo, kaavio, väriasteikko) valui oikean
   reunan yli ja leikkautui (23.9.2026). min-width:0 pakottaa sisällön kortin mittaan. */
.card-main{ min-width:0; }
#kp-labels > div, #kp-ennuste-labels > div{ white-space:nowrap; overflow:visible; }


/* ===== LUMITILANNE SATELLIITISTA ===== */
.lk-kehys{ position:relative; width:100%; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  border:1px solid var(--card-border); background:#0B1030; }
.lk-iso{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lk-merkki{ position:absolute; transform:translate(-5px,-5px); display:flex; align-items:center; gap:4px; pointer-events:none; }
.lk-piste{ width:10px; height:10px; border-radius:50%; background:var(--yellow); border:2px solid #080B18; box-sizing:border-box; }
.lk-nimi{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:#fff;
  text-shadow:0 0 3px #000, 0 0 6px #000; }
.lk-nauha{ display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.lk-peukalo{ flex:0 0 62px; width:62px; min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:0; background:none; border:2px solid transparent;
  border-radius:8px; cursor:pointer; color:var(--text-lo); font-family:'IBM Plex Mono',monospace; font-size:11px; }
.lk-peukalo img{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:3/4; border-radius:6px; background:#0B1030; }
.lk-peukalo span{ display:block; margin-top:2px; text-align:center; }
.lk-peukalo.valittu{ border-color:var(--yellow); color:var(--yellow); }
/* 7.10.2026: pilviprosentti NASAn metatiedosta; pilviset kuvat himmennetään */
.lk-peukalo .lk-pilvi{ margin-top:0; font-size:11px; opacity:0.75; }
.lk-peukalo.pilvinen img{ opacity:0.45; }
.lk-peukalo.pilvinen.valittu img{ opacity:1; }


/* ===== PILVET JUURI NYT ===== */
.pk-kehys{ position:relative; width:100%; aspect-ratio:800/780; border-radius:10px; overflow:hidden;
  border:1px solid var(--card-border); background:#0B1030; }
.pk-kuva{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Pilvikuvan paikkamerkit ja näkymävalinta */
.pk-merkki .lk-piste{ width:7px; height:7px; border-width:1.5px; background:#fff; }
.pk-merkki .lk-nimi{ font-size:11px; font-weight:600; }
.pk-merkki.tarkea .lk-piste{ width:10px; height:10px; background:var(--yellow); }
.pk-merkki.tarkea .lk-nimi{ font-size:11px; font-weight:700; color:var(--yellow); }
.pk-merkki{ transform:translate(-3.5px,-3.5px); }
.pk-merkki.tarkea{ transform:translate(-5px,-5px); }
.pk-merkki.vasen{ flex-direction:row-reverse; transform:translate(calc(-100% + 3.5px), -3.5px); }
.pk-merkki.tarkea.vasen{ transform:translate(calc(-100% + 5px), -5px); }
.pk-valinta{ display:flex; gap:6px; margin-top:8px; }
.pk-nakyma{ flex:1; height:34px; background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  border-radius:9px; color:var(--text-mid); font-family:'Space Grotesk',sans-serif; font-size:13px; cursor:pointer; }
.pk-nakyma.valittu{ background:rgba(231,210,87,0.12); border-color:rgba(231,210,87,0.45); color:var(--yellow); }


/* ===== FORECA-VERTAILUN AIKAJANA (Pilvisyys-näkymä) ===== */
.fv-aikajana{ display:flex; gap:6px; margin-top:8px; }
.fv-otsikot{ flex:0 0 auto; display:flex; flex-direction:column; gap:3px; }
.fv-sarakkeet{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:2px; }
.fv-sarake{ display:flex; flex-direction:column; gap:3px; border-radius:6px; padding:0; border:1.5px solid transparent; min-width:0; }
.fv-sarake.eri{ border-color:var(--yellow); }
.fv-tunti{ height:14px; font:11px/14px 'IBM Plex Mono',monospace; color:var(--text-lo); text-align:center; }
.fv-nimi{ height:22px; font:11px/22px 'Space Grotesk',sans-serif; color:var(--text-mid); white-space:nowrap; }
.fv-ruutu{ height:22px; border-radius:4px; font:700 11px/22px 'IBM Plex Mono',monospace; letter-spacing:-0.4px; color:#0B1030; text-align:center; overflow:hidden; white-space:nowrap; }

/* VERSIO: sama kuin index.html:n ?v= ja app.js:n APP_VERSIO. index.html lukee tämän. */
:root{ --css-versio: "20261020a"; }

/* ===== MAPLIBREN VÄLTTÄMÄTTÖMÄT SIJOITTELUSÄÄNNÖT =====
   Kopio maplibre-gl.css:n olennaisista säännöistä. 25.9.2026 macOS Safarissa
   unpkg.com:n maplibre-gl.css ei latautunut (kirjasto itse latautui): merkit jäivät
   sivun normaaliin virtaan täysleveinä palkkeina eikä nimiä näkynyt oikeissa
   paikoissa. Nämä säännöt pitävät kartat toimivina, vaikka ulkoinen CSS puuttuisi.
   Jos ulkoinen CSS latautuu, säännöt ovat samat eivätkä riitele. */
.maplibregl-map{ position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.maplibregl-canvas-container, .maplibregl-canvas{ position:absolute; left:0; top:0; }
.maplibregl-canvas{ outline:none; }
.maplibregl-marker{ position:absolute; top:0; left:0; will-change:transform; }
.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right{ position:absolute; pointer-events:none; z-index:2; }
.maplibregl-ctrl-top-left{ top:0; left:0; }
.maplibregl-ctrl-top-right{ top:0; right:0; }
.maplibregl-ctrl-bottom-left{ bottom:0; left:0; }
.maplibregl-ctrl-bottom-right{ bottom:0; right:0; }
.maplibregl-ctrl{ clear:both; pointer-events:auto; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl{ float:right; margin:0 10px 10px 0; }
.maplibregl-ctrl-top-right .maplibregl-ctrl{ float:right; margin:10px 10px 0 0; }
.maplibregl-popup{ position:absolute; top:0; left:0; display:flex; will-change:transform; pointer-events:none; }
.maplibregl-popup-content{ pointer-events:auto; }

/* 29.9.2026: Yökellon maisema (tähtitaivas, revontulihehku, oma tunturisiluetti, usva) */
#yokellokortti .card-row{ position:relative; }
#yokellokortti .yk-maisema{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
#yokellokortti .yk-taivas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#yokellokortti .yk-maa{ position:absolute; left:0; right:0; bottom:0; width:100%; height:118px; display:block; }
#yokellokortti .card-main{ position:relative; z-index:1; }
#yokellokortti .card-meter{ z-index:2; }
#yokellokortti .yk-otsikko{ flex:1; text-align:center; padding-left:14px; font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:26px; letter-spacing:0.28em; text-transform:uppercase; color:#EEF3FF; text-shadow:0 0 18px rgba(160,200,255,0.35); }
#yokellokortti #yokello-sisalto > div:last-child{ text-shadow:0 0 5px #080C20, 0 0 2px #080C20; }
/* 29.9.2026: leveällä näytöllä Tämä yö -aikajana ei veny koko leveydelle (tekstit
   kasvoivat jättimäisiksi, koska SVG skaalautuu). */
#tamayo-sisalto > svg{ max-width:640px; margin-left:auto; margin-right:auto; }

/* 2.10.2026: näkyvä kohdistus näppäimistöllä liikuttaessa (ei sormella napauttaessa) */
[role="button"]:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #A99CF5; outline-offset: 2px; border-radius: 6px;
}

/* 4.10.2026: Revontulet info / Aurora borealis info */
.ri{ font-family:'Space Grotesk',sans-serif; color:var(--text-hi); cursor:default; max-width:640px; }
.ri-johdanto{ font-size:15px; line-height:1.55; color:#DDE2F7; margin:2px 0 6px; }
.ri-h{ font-weight:600; font-size:19px; line-height:1.3; margin:26px 0 10px; color:#EEF1FF; padding-top:14px; border-top:1px solid rgba(170,180,230,0.16); }
.ri-nimi{ font-weight:600; font-size:13px; color:#EEF1FF; }
.ri-txt{ font-size:13px; line-height:1.55; color:#AEB5D6; }
.ri-vaiheet{ list-style:none; counter-reset:ri; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.ri-vaiheet li{ counter-increment:ri; display:grid; grid-template-columns:24px 1fr; column-gap:8px; }
.ri-vaiheet li::before{ content:counter(ri); grid-row:span 2; font-weight:600; font-size:15px; color:#7CF5A8; line-height:1.35; }
.ri-vaiheet .ri-txt{ grid-column:2; }
.ri-varit{ display:grid; gap:12px; margin-top:12px; }
.ri-vari{ display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start; }
.ri-pallo{ width:12px; height:12px; border-radius:50%; margin-top:4px; }
.ri-muodot{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
@media (min-width:640px){ .ri-muodot{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ri-muoto .ri-nimi{ margin-top:6px; }
.ri-muoto .ri-txt{ font-size:13px; }
.ri-selite{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin-top:8px; font-size:11px; color:#AEB5D6; }
.ri-selite i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.ri-tiedot{ display:grid; gap:14px; }
.ri-tieto{ padding-left:12px; border-left:2px solid rgba(124,245,168,0.45); }

/* 4.10.2026 (h): kortin alaotsikko (päivitetty ... · ~N min välein) koko leveydelle.
   Ennen se jäi otsikon sarakkeeseen arvon viereen ja rivittyi leveän arvon kanssa
   5-6 riviksi (Bz/Bt, VxBz/paine, Nopeus). Nyt rivi 1 = nimi | arvo, rivi 2 = vihje
   koko leveydeltä. Vain kortit joissa rakenne on täsmälleen [nimi+vihje] [arvo]:
   display:contents koskee pelkkää kääre-diviä, ei painikkeeksi merkittyä .card-namea
   (vanhan Safarin display:contents-saavutettavuusvika ei siis osu). Selaimet ilman
   :has-tukea pitävät vanhan asettelun. */
.card-main:has(> div:first-child > .card-name + .card-hint):not(:has(> :nth-child(3))){
  display:grid;
  /* 5.10.2026 (j): nimi ei kapene lyhintä sanaansa kapeammaksi ("Tuuli" jäi leveän
     arvon alle), arvo rivittyy tarvittaessa ja tasataan oikealle. */
  grid-template-columns:minmax(min-content, 1fr) auto;
  column-gap:10px;
  align-items:start;
}
.card-main:has(> div:first-child > .card-name + .card-hint):not(:has(> :nth-child(3))) > div:first-child{ display:contents; }
.card-main:has(> div:first-child > .card-name + .card-hint):not(:has(> :nth-child(3))) > div:first-child > .card-name{ grid-column:1; grid-row:1; align-self:center; min-width:0; }
.card-main:has(> div:first-child > .card-name + .card-hint):not(:has(> :nth-child(3))) > div:first-child > :not(.card-name){ grid-column:1 / -1; min-width:0; }
.card-main:has(> div:first-child > .card-name + .card-hint):not(:has(> :nth-child(3))) > div:nth-child(2){ grid-column:2; grid-row:1; align-self:center; justify-self:end; text-align:right; min-width:0; }

/* 4.10.2026 (i): kuvakkeen ja tekstin väli painikkeissa ("☁Alapilvet" näytti liimautuneelta).
   Pelkän kuvakkeen painikkeet rajataan pois, jottei kuvake siirry sivuun keskeltä. */
button > svg:first-child{ margin-right:0.3em; }
#keskity-nappi > svg, .yotila-nappi > svg, .sijainti-nappi > svg, #tallennaBtn > svg,
button[title="Käytä nykyistä sijaintia"] > svg{ margin-right:0; }

/* 4.10.2026 (i): päivämääräkentän suomenkielinen teksti natiivikentän päällä. */
.apv-pvm-kaare{ position:relative; flex:1; min-width:0; display:flex; }
.apv-pvm-kaare .apv-pvm{ width:100%; color:transparent; -webkit-text-fill-color:transparent; }
.apv-pvm-teksti{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; color:var(--text-hi);
  font-family:'IBM Plex Mono',monospace; font-size:15px;
}

/* 5.10.2026 (p): Macin leveässä ikkunassa Muut sääkamerat -kortin 12 kamerakuvaa
   (~700 px kukin) ylittivät avatun osan 3000 px rajan, ja viimeiset 7 kameraa
   leikkautuivat pois. Kamerakortilla ei rajaa lainkaan; leveissä ikkunoissa ei
   millään kortilla (puhelimessa avausanimaatio säilyy ennallaan). */
#muutkameratkortti.open .card-detail{ max-height:none; }
@media (min-width: 700px){
  .card.open .card-detail{ max-height:none !important; }
}

/* ===== 8.10.2026: REUNAVÄRI = TILA =====
   Palkin väri tulee data-tila-attribuutista (app.js paivitaReunavarit), ei korttien
   omista inline-väreistä: vihreä hyvä, keltainen seuraa, punainen varoitus, harmaa tieto. */
.card .card-meter{ background:#39436B !important; transition:background-color .6s ease; }
.card .card-meter[data-tila="hyva"]{ background:var(--green) !important; }
.card .card-meter[data-tila="seuraa"]{ background:var(--yellow) !important; }
.card .card-meter[data-tila="varoitus"]{ background:var(--red) !important; }
/* 11.10.2026 m: aktiivisuusasteikko (sama kuin luvuissa): keltainen, oranssi, punainen, violetti */
.card .card-meter[data-tila="akt1"]{ background:#E7D257 !important; }
.card .card-meter[data-tila="akt2"]{ background:#F0964B !important; }
.card .card-meter[data-tila="akt3"]{ background:#FF4B4B !important; }
.card .card-meter[data-tila="akt4"]{ background:#B24DFF !important; }

/* ===== 8.10.2026: SELITYKSET ⓘ-AVATTAVIEN TAAKSE ===== */
details.selite{ margin:6px 0 4px; }
details.selite > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  min-height:32px; padding:2px 10px 2px 0; color:var(--violet); font-size:13px;
  -webkit-user-select:none; user-select:none;
}
details.selite > summary::-webkit-details-marker{ display:none; }
details.selite[open] > summary{ color:var(--text-lo); }
details.selite > *:not(summary){ margin-top:4px; }

/* ===== 8.10.2026: OTSIKKOKORTIN LINJAUS =====
   Koordinaatit, "True North" ja yhteystila samaan vasempaan reunaan kuin paikan nimi
   (ennen keskitetty ja sisennetty, jolloin rivit näyttivät eri linjoilta). */
.eyebrow-koordinaatit{ display:block; margin:3px 0 0 0; }
.eyebrow-meta{ justify-content:flex-start; gap:4px 12px; }
.eyebrow-alue{ text-align:left; }
#yhteys-mittari{ margin-left:0 !important; }

/* ===== 8.10.2026: ELÄVÄ REVONTULITAUSTA (WebGL) =====
   Kangas koko näytön takana, kiinteänä: revontuli pysyy taivaalla kun sivua vieritetään.
   Kortit ovat hieman läpikuultavia, jotta valo kajastaa niiden läpi kuin ohuen pilven
   takaa - tekstin kontrasti säilyy (taustasta läpi enintään 16 %). */
#revontulitausta{ position:fixed; inset:0; width:100vw; height:100vh; display:none; pointer-events:none; z-index:0; }
.gl-revontuli #revontulitausta{ display:block; }
.gl-revontuli .revontuli-hehku{ display:none; }
.gl-revontuli .card{ background:rgba(20,27,54,0.84); }
.gl-revontuli .hero,
.gl-revontuli .header-panel{ background:linear-gradient(155deg, rgba(22,32,74,0.86) 0%, rgba(15,21,48,0.86) 100%); }
body.yotila #revontulitausta{ display:none !important; }


/* ===== 8.10.2026: SANKARINÄKYMÄ =====
   Tämän yön tuomio, ikkuna, Yökello ja viisi lukua. Tausta on läpikuultava, jotta elävä
   revontulitausta näkyy läpi. Reunan ja tuomion väri tulevat data-tila-attribuutista. */
#sankari{ --s-vari:#8993B8; position:relative; margin:0 14px 18px; border-radius:22px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--s-vari) 40%, transparent);
  background:linear-gradient(180deg, rgba(10,14,34,.40), rgba(10,14,34,.80) 70%); }
@supports not (border-color: color-mix(in srgb, red 40%, transparent)){ #sankari{ border-color:var(--card-border); } }
#sankari[data-tila="hyva"]{ --s-vari:#3ED888; }
#sankari[data-tila="seuraa"]{ --s-vari:#E7D257; }
#sankari[data-tila="ei"]{ --s-vari:#8993B8; }
/* 11.10.2026 n: viisiportainen tuomio - Juokse ulos (punainen), CME osui (violetti, sykkivä reuna),
   myrsky mutta pilvistä (harmaa, violetti reuna), myrsky päivällä (oranssi, odota pimeää) */
#sankari[data-tila="juokse"]{ --s-vari:#FF4B4B; }
#sankari[data-tila="cme"]{ --s-vari:#C77DFF; animation:sankariSyke 2.4s ease-in-out infinite; }
#sankari[data-tila="odota"]{ --s-vari:#F0964B; }
#sankari[data-tila="myrsky-pilvi"]{ --s-vari:#9AA3C0; border-color:rgba(178,77,255,0.55); }
#sankari[data-tila="juokse"], #sankari[data-tila="cme"]{ border-width:1.5px; }
@keyframes sankariSyke{
  0%,100%{ box-shadow:0 0 0 0 rgba(178,77,255,0.0), 0 0 18px rgba(178,77,255,0.25); }
  50%{ box-shadow:0 0 0 3px rgba(178,77,255,0.35), 0 0 32px rgba(178,77,255,0.45); }
}
@media (prefers-reduced-motion: reduce){ #sankari[data-tila="cme"]{ animation:none; box-shadow:0 0 0 2px rgba(178,77,255,0.4); } }
#sankari .s-sis{ position:relative; padding:18px 18px 14px; }
#sankari .s-isku{ margin:0 0 12px; padding:9px 12px; border-radius:12px; border:1px solid rgba(199,125,255,.6); background:rgba(178,77,255,.12); color:var(--text-hi); font-size:13px; line-height:1.5; }
#sankari .s-isku[hidden]{ display:none; }
#sankari .s-isku b{ color:#C77DFF; }   /* 11.10.2026 n: CME = violetti kuten tuomiossa */
#sankari .s-yla{ display:flex; justify-content:space-between; gap:10px; font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--text-lo); text-transform:uppercase; }
#sankari .s-tuomio{ font:700 34px/1.05 'Space Grotesk',sans-serif; color:var(--s-vari); margin-top:10px; text-shadow:0 0 24px rgba(0,0,0,.4); }
#sankari .s-ali{ font:500 15px/1.35 'Space Grotesk',sans-serif; color:var(--text-hi); margin-top:6px; }
#sankari .s-syy{ font:400 13px/1.45 'Space Grotesk',sans-serif; color:var(--text-mid); margin-top:6px; }
#sankari .s-kello{ position:relative; margin:10px -18px 0; padding:4px 18px 8px; }
#sankari .s-kello #yokello-sisalto svg{ max-width:330px !important; }
#sankari .yk-maisema{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
#sankari .yk-taivas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#sankari .yk-maa{ position:absolute; left:0; right:0; bottom:0; width:100%; height:118px; display:block; }
#sankari #yokello-sisalto > div:last-child{ text-shadow:0 0 5px #080C20, 0 0 2px #080C20; }
#sankari .s-luvut{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; margin-top:6px; }
#sankari .s-luku{ background:rgba(20,27,54,.78); border:1px solid var(--card-border); border-radius:12px; padding:8px 2px 7px; text-align:center; min-width:0; }
#sankari .s-luku span{ display:block; font:500 11px 'IBM Plex Mono',monospace; color:var(--text-lo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sankari .s-luku b{ display:block; font:600 19px/1.15 'IBM Plex Mono',monospace; margin-top:3px; white-space:nowrap; color:var(--text-hi); }
/* 8.10.2026 j: kuusi lukua - kapealla näytöllä 3 × 2, jotta otsikot ja luvut mahtuvat täysikokoisina */
@media (max-width:600px){ #sankari .s-luvut{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
#sankari .s-luku i{ display:block; font:400 11px 'IBM Plex Mono',monospace; color:var(--text-lo); font-style:normal; }
#sankari .s-vaihe{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:8px 10px; border-radius:10px; background:rgba(20,27,54,.78); border:1px solid var(--card-border); font-size:13px; line-height:1.45; color:var(--text-mid); }
#sankari .s-vaihe[hidden]{ display:none; }
#sankari .s-vaihe-piste{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:5px; }
#sankari .s-ala{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 16px; margin-top:12px; font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.06em; }
#sankari .s-ala a{ color:var(--text-lo); text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
#sankari .s-jaa{ display:flex; justify-content:flex-end; gap:6px; margin-top:8px; }
#sankari .s-notes{ margin-top:6px; padding:7px 10px; border:1px dashed var(--card-border); border-radius:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-hi); text-align:right; overflow-wrap:anywhere; }
#sankari .s-notes-t{ user-select:all; -webkit-user-select:all; }
#sankari .s-notes-m{ color:var(--text-lo); font-size:10px; user-select:none; -webkit-user-select:none; }
#sankari .s-notes[hidden]{ display:none; }
#sankari .s-selite{ margin-top:4px; }
@media (min-width:1000px){
  #sankari .s-sis{ display:grid; grid-template-columns:1fr 360px; gap:10px 28px; align-items:center; }
  #sankari .s-kello{ grid-row:1 / span 6; grid-column:2; margin:0; padding:0; }
  #sankari .s-luvut, #sankari .s-vaihe, #sankari .s-ala, #sankari .s-jaa, #sankari .s-notes, #sankari .s-selite{ grid-column:1; }
}
body.yotila #sankari{ background:#000; }

/* ===== 11.10.2026 m: OTSIKKOKORTTI SIISTIMMÄKSI =====
   Paikan nimi isommin, tavallisin kirjaimin ja yhdelle riville (ennen harva versaali-
   kirjainväli rivitti "SAANA, LAPPI, SUOMI" kahdelle riville). Koordinaatit, korkeus ja
   lämpötila pienemmällä rivillä alla. */
.eyebrow-paikka{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-size:17px;
  letter-spacing:0;
  text-transform:none;
  line-height:1.25;
  margin-top:2px;
}
.eyebrow-row > svg{ float:left; margin:5px 6px 0 0; }
.eyebrow-koordinaatit{ letter-spacing:0.04em; margin-top:4px; }
.eyebrow-alue{ letter-spacing:0.18em; font-size:10px; }

/* 11.10.2026 m: Lumipeite- ja Pakkaset-korttien kaaviot vasta avattuna (ennen aina auki) */
#pilviyokortti:not(.open) #pilviyokortti-sisalto,
#lumipeitekortti:not(.open) #lumipeitekortti-sisalto,
#pakkaskortti:not(.open) #pakkaskortti-sisalto{ display:none; }

/* 11.10.2026 m: Data-osion lisämittarit (By, VxBz) avattavan alle */
details.lisamittarit{ margin:0 0 12px; }
details.lisamittarit > summary{
  list-style:none; cursor:pointer; margin:0 18px 10px; padding:9px 14px; border-radius:12px;
  border:1px dashed var(--card-border); color:var(--text-lo); font-family:'Space Grotesk',sans-serif; font-size:13px;
}
details.lisamittarit > summary::-webkit-details-marker{ display:none; }
details.lisamittarit > summary::before{ content:'▸ '; }
details.lisamittarit[open] > summary::before{ content:'▾ '; }
.card-grid > details.lisamittarit{ grid-column:1 / -1; margin:0; }
.card-grid > details.lisamittarit > summary{ margin:0 0 10px; }
details.lisamittarit > .card{ margin-bottom:10px; }

/* 11.10.2026 n: päivittyneen luvun välähdys (D18) */
@keyframes lukuValahdys{ 0%{ text-shadow:0 0 0 rgba(255,255,255,0); } 25%{ text-shadow:0 0 14px rgba(255,255,255,0.75); } 100%{ text-shadow:0 0 0 rgba(255,255,255,0); } }
.luku-valahdys{ animation:lukuValahdys 1.2s ease-out; }
@media (prefers-reduced-motion: reduce){ .luku-valahdys{ animation:none; } }

/* 11.10.2026 t: Aurinkosykli suljettuna vain pilkkuluku - kaavio ja napit vasta avattuna */
#syklikortti:not(.open) #syklikortti-sisalto{ display:none; }

/* 12.10.2026: Pitkä ennuste - ensemble-haarukka ja ennuste vs. toteutunut */
.ens16-rivi { margin-top:2px; padding-left:52px; font-size:11px; color:var(--text-lo); font-family:'IBM Plex Mono',monospace; }
.ens16-rivi:empty { display:none; }
.ens16-laatikko { margin-bottom:10px; padding:8px 10px; border:1px solid var(--card-border); border-radius:8px; font-size:11px; line-height:1.5; color:var(--text-lo); }
.vko-vertailu { width:100%; border-collapse:collapse; margin-top:12px; font-size:11px; font-family:'IBM Plex Mono',monospace; }
.vko-vertailu th { text-align:right; font-weight:500; color:var(--text-mid); padding:3px 4px; border-bottom:1px solid var(--card-border); }
.vko-vertailu th:first-child, .vko-vertailu td:first-child { text-align:left; }
.vko-vertailu td { text-align:right; padding:4px; border-bottom:1px solid var(--card-border); color:var(--text-hi); }

/* 13.10.2026: Reittikartta (jaettava kartta asiakkaille) */
#reittikartta-ov { display:none; position:fixed; inset:0; z-index:9000; background:#0B1024; }
#reittikartta-kartta { position:absolute; inset:0; }
body.rk-auki { overflow:hidden; }
.rk-yla { position:absolute; top:0; left:0; right:0; padding:calc(env(safe-area-inset-top) + 10px) 14px 26px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(rgba(8,11,24,0.9), rgba(8,11,24,0)); pointer-events:none; }
.rk-yla > * { pointer-events:auto; }
.rk-otsikko { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:#F4F6FB; }
.rk-ala { position:absolute; left:0; right:0; bottom:0; padding:26px 14px calc(env(safe-area-inset-bottom) + 12px); background:linear-gradient(rgba(8,11,24,0), rgba(8,11,24,0.92) 40%); }
.rk-ohje { font-size:12px; color:#C7CCE0; line-height:1.45; margin-bottom:8px; }
.rk-napit { display:flex; gap:8px; flex-wrap:wrap; }
.rk-nappi { background:rgba(20,27,56,0.9); border:1px solid rgba(127,168,217,0.45); color:#E4E8F5; border-radius:10px; padding:9px 13px; font-family:'Space Grotesk',sans-serif; font-size:14px; cursor:pointer; min-height:40px; }
.rk-nappi.rk-paa { background:#E3342F; border-color:#E3342F; color:#fff; font-weight:700; margin-left:auto; }
.rk-merkki { position:relative; width:40px; height:40px; cursor:pointer; }
.rk-merkki canvas { display:block; }
.rk-nimi { position:absolute; white-space:nowrap; width:max-content; font:700 12px 'Space Grotesk',sans-serif; color:#F4F6FB; background:rgba(8,11,24,0.82); border:1.5px solid; border-radius:999px; padding:3px 8px; pointer-events:none; }
.rk-nimi.rk-n-oikea { left:42px; top:50%; transform:translateY(-50%); }
.rk-nimi.rk-n-vasen { right:42px; top:50%; transform:translateY(-50%); }
.rk-nimi.rk-n-yla { bottom:42px; left:50%; transform:translateX(-50%); }
.rk-nimi.rk-n-ala { top:42px; left:50%; transform:translateX(-50%); }
/* 13.10.2026 i: oma sijainti reittikartalla */
.rk-gps { position:relative; width:20px; height:20px; pointer-events:none; }
.rk-gps-piste { position:absolute; inset:0; border-radius:50%; background:#1A8CFF; border:3px solid #fff; box-shadow:0 0 6px rgba(0,0,0,0.55); }
.rk-gps-pulssi { position:absolute; inset:0; border-radius:50%; background:rgba(26,140,255,0.55); animation:rkGpsPulssi 2s ease-out infinite; }
.rk-gps-tarkkuus { display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(26,140,255,0.14); border:1px solid rgba(26,140,255,0.5); }
@keyframes rkGpsPulssi { 0% { transform:scale(1); opacity:0.85; } 100% { transform:scale(3.4); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .rk-gps-pulssi { animation:none; opacity:0; } }
.rk-gps-ikoni { display:inline-block; width:10px; height:10px; border-radius:50%; background:#1A8CFF; border:2px solid #fff; vertical-align:-1px; margin-right:3px; }
.rk-nappi.rk-valittu { background:#1A8CFF; border-color:#1A8CFF; color:#fff; font-weight:700; }
.rk-tassa { display:flex; align-items:center; gap:6px; cursor:grab; touch-action:none; }
.rk-tassa-piste { width:30px; height:30px; box-sizing:border-box; border-radius:50%; background:#1A8CFF; border:5px solid #fff; box-shadow:0 0 0 7px rgba(26,140,255,0.3), 0 2px 8px rgba(0,0,0,0.5); flex:none; }
.rk-tassa-nimi { font:700 13px 'Space Grotesk',sans-serif; color:#F4F6FB; background:rgba(8,11,24,0.86); border:2px solid #1A8CFF; border-radius:999px; padding:4px 10px; white-space:nowrap; }
.rk-tassa-kasin .rk-tassa-nimi { border-style:dashed; }
.rk-kahva { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #E3342F; box-shadow:0 0 0 4px rgba(255,255,255,0.35); cursor:grab; }
#reittikartta-ov .maplibregl-ctrl-bottom-left { bottom:calc(env(safe-area-inset-bottom) + 110px); }

/* 13.10.2026 f: reittikartan paikannimet (vain kartalla) */
.rk-paikka { display:flex; flex-direction:column; align-items:center; pointer-events:none; text-align:center; z-index:1;
  text-shadow:0 0 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9); line-height:1.15; }
.rk-paikka-kolmio { font-size:10px; color:#F4E3C1; }
.rk-paikka-nimi { font:700 11px 'Space Grotesk',sans-serif; color:#FFFFFF; white-space:nowrap; }
.rk-paikka-ala { font:600 10px 'IBM Plex Mono',monospace; color:#F4E3C1; white-space:nowrap; }
.rk-paikka-vesi .rk-paikka-nimi { font-style:italic; font-weight:600; color:#BFE6FF; }
.rk-paikka-kyla .rk-paikka-nimi { font-size:12px; letter-spacing:0.03em; color:#FFFFFF; }
.rk-paikka-kohde .rk-paikka-kolmio { color:#FFD86B; }
.rk-paikka-kohde .rk-paikka-nimi { color:#FFE7A3; }
.rk-paikka-kohde .rk-paikka-ala { color:#FFE7A3; }

/* 13.10.2026 t: Minne mennä tänä yönä? + katsottavan paikan palkki */
#katsottava-palkki { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px;
  border:1px solid rgba(255,212,59,0.55); background:rgba(255,212,59,0.1); border-radius:12px; font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--text-hi); }
#katsottava-palkki[hidden] { display:none; }
.minne-otsikko { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--text-hi); margin-bottom:8px; }
.minne-rivi { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,0.07); }
.minne-rivi:first-of-type { border-top:none; }
.minne-nro { flex:none; width:24px; height:24px; border-radius:50%; background:rgba(62,216,136,0.14); color:var(--green); font:700 13px 'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center; }
.minne-tiedot { flex:1; min-width:0; }
.minne-nimi { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--text-hi); }
.minne-maa { font:600 10px 'IBM Plex Mono',monospace; color:var(--text-lo); border:1px solid var(--card-border); border-radius:5px; padding:0 4px; vertical-align:2px; }
.minne-ali { font-family:'Space Grotesk',sans-serif; font-size:12.5px; color:var(--text-lo); margin-top:2px; }
.minne-napit { flex:none; display:flex; gap:6px; }
.minne-nappi { background:rgba(255,255,255,0.05); border:1px solid var(--card-border); border-radius:9px; padding:6px 10px; color:var(--text-hi); font-family:'Space Grotesk',sans-serif; font-size:13px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:4px; min-height:34px; }
.minne-ryhma { font:600 11px 'IBM Plex Mono',monospace; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mid); margin:4px 0 2px; }
.minne-ryhma-kaukana { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.12); }
.minne-ryhma + .minne-rivi, .minne-ryhma + .minne-varoitus + .minne-rivi { border-top:none; }
.minne-pilvessa { font-family:'Space Grotesk',sans-serif; font-size:13.5px; color:var(--text-mid); padding:6px 0 2px; }
.minne-puuttuvat { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-lo); margin-top:8px; line-height:1.6; }
.minne-puuttuvat summary { cursor:pointer; color:var(--text-mid); }
.minne-oma { font-family:'Space Grotesk',sans-serif; font-size:12.5px; color:var(--text-mid); margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.07); }
.minne-varoitus { font-family:'Space Grotesk',sans-serif; font-size:13px; color:#9AA3C0; margin-bottom:6px; }
.minne-hiljainen { font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--text-lo); }
.minne-lahde { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-lo); margin-top:8px; line-height:1.5; }

/* 14.10.2026 zq: pitkät lähde- ja selitystekstit avattaviksi */
.lahde-info { margin-top:8px; font-family:'Space Grotesk',sans-serif; }
.lahde-info > summary { cursor:pointer; list-style:none; font-size:12px; color:var(--text-lo); display:inline-flex; align-items:center; gap:4px; padding:2px 0; }
.lahde-info > summary::-webkit-details-marker { display:none; }
.lahde-info[open] > summary { color:var(--text-mid); }
.lahde-info > div { font-size:11px; color:var(--text-lo); line-height:1.55; margin-top:4px; }
.lahde-info .minne-lahde { margin-top:4px; }

/* 14.10.2026 zs: Minne mennä -kortti avattavaksi (oletuksena kiinni) */
.minne-otsikkorivi { all:unset; box-sizing:border-box; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:8px; width:100%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.minne-otsikkorivi .minne-otsikko { margin-bottom:0; }
.minne-nuoli { color:var(--text-lo); font-size:13px; transition:transform .2s ease; }
.minne-tiivis { grid-column:1 / -1; font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--text-mid); margin-top:3px; }
.minne-tiivis:empty { display:none; }
#minne-kortti #minne-sisalto { display:none; }
#minne-kortti.auki #minne-sisalto { display:block; margin-top:8px; }
#minne-kortti.auki .minne-nuoli { transform:rotate(90deg); }
#minne-kortti.auki .minne-tiivis { display:none; }
.minne-otsikkorivi:focus-visible { outline:2px solid var(--violet); outline-offset:4px; border-radius:6px; }