/* 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;
  }
  .hero-status{
    font-size: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;
  }
  .hist-tab-aktiivinen{
    background:#7FA8D9;
    border-color:#7FA8D9;
    color:#0B0E1A;
    font-weight:600;
  }
  @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:2px;
  }
  .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, #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: "20261009t"; }

/* ===== 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; }

/* ===== 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; }
#sankari .s-sis{ position:relative; padding:18px 18px 14px; }
#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-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-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 5; grid-column:2; margin:0; padding:0; }
  #sankari .s-luvut, #sankari .s-ala, #sankari .s-jaa, #sankari .s-selite{ grid-column:1; }
}
body.yotila #sankari{ background:#000; }