/* Estä mobiiliselainten automaattinen fontin suurennus (text/font boosting).
       Ilman tätä esim. Aktiivisuuden metriikkavälilehden "Aloitteet"-nappi
       paisui aidossa mobiilissa laatikkoaan leveämmäksi (scrollWidth 123 >
       clientWidth 98) ja teksti leikkautui — desktop-selain 375px:llä ei
       toistanut tätä, mutta mobiiliemulaatio (is_mobile) toisti. 100% pitää
       tekstin suunnitellussa koossa koko sivustolla (lisätty 15.07.2026). */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    :root {
      /* Vanhat nimet ovat aliaksia teematokeneille, jotta koko sivusto
         (otsikkokiilto, kortit, reunat, scrollbarit, footer) seuraa teemaa */
      --bg-deep:     var(--t-bg-deep);
      --bg-panel:    var(--t-bg-panel);
      --bg-card:     var(--t-bg-card);
      --border:      var(--t-border);
      --glow-cyan:   var(--t-accent);
      --glow-pink:   var(--t-accent-alt);
      --glow-green:  var(--t-positive);
      --text-primary:var(--t-text);
      --text-muted:  var(--t-text-muted);
      --accent:      var(--t-accent);

      /* ── TEEMAMUUTTUJAT (oletus: Suomi) ── */
      --t-bg-deep:     #0a0e14;
      --t-bg-panel:    #0e131c;
      --t-bg-card:     #131a26;
      --t-border:      #1c2536;
      --t-text:        #f2f6ff;
      --t-text-bright: #ffffff;
      --t-text-muted:  #c2ccdc;
      --t-text-dim:    #7f8ca3;
      --t-text-faint:  #7582a8; /* A4-kontrastisweep 16.07.2026: dim+faint >=4.5:1 kortti- ja paneelitaustaa vasten KAIKISSA teemoissa (sävy säilytetty, valoisuus säädetty) */
      --t-accent:      #2f6fee;
      --t-accent-text: #447ef0; /* A4 16.07.2026: aksentti pienena tekstina, >=4.5:1 */
      --t-accent-alt:  #4fc3f7;
      --t-accent-2:    #8fb2f0;
      --t-accent-3:    #5f89d6;
      --t-steel:       #3a8ec2;
      --t-bronze:      #d4a24a;
      --t-positive:    #4ad66d;
      --t-bg-gradient: radial-gradient(ellipse 130% 90% at 50% -15%, #142a4a 0%, #0a1220 48%, #02050a 100%);

      /* ── OSIOAKSENTIT — jokainen teema määrittelee omansa [data-theme]-lohkossa.
         Osioiden scope-muuttujat (--rk-accent, --lup-accent, …) ovat aliaksia näille.
         Sävyperheet pysyvät teemasta toiseen: rk/lup/oidx = violetti, hil = kulta,
         kyt/kan = viileä sininen, porssi = vihreä/teal, sig = puna/pinkki, ohj = lämmin. ── */
      --acc-rk:     #8f7cf0;   /* Ryhmäkuri */
      --acc-lup:    #a89bf5;   /* Lupausindeksi */
      --acc-hil:    #d4a24a;   /* Hillotolpat */
      --acc-kyt:    #4fc3f7;   /* Kytkökset */
      --acc-kan:    #6ea3ff;   /* Puolueiden kannatus */
      --acc-porssi: #3fb9a8;   /* Poliittinen pörssi */
      --acc-sig:    #e0607a;   /* Signaali / Mediapulssi */
      --acc-ohj:    #e8c06a;   /* Puolueohjelmat */
      --acc-oidx:   #8f7cf0;   /* Ohjelmaindeksi & -vertailu */
      --ohj-accent: var(--acc-ohj);

      /* ── MITALI- JA HÄNTÄPÄÄVÄRIT — sijoitusten kulta/hopea/pronssi ja
         häntäpään punasävyt (Aktiivisuus, Lupausindeksi). Oletukset toimivat
         tummilla teemoilla; vaalea Virasto ohittaa tummemmilla sävyillä,
         jotta kontrasti riittää vaalealla taustalla (todettu 10.07.2026). ── */
      --pp-kulta:   #ffd700;
      --pp-hopea:   #c0c0c0;
      --pp-pronssi: #cd7f32;
      --pp-hanta-1: #ff2244;
      --pp-hanta-2: #ff5533;
      --pp-hanta-3: #ff9944;

      /* ── VISUALISOINTIPALETTI — Ikärakenteen (ym.) dekadivärit tekstinä ja
         täyttöinä. Oletukset = kirkkaat neonit tummille teemoille; vaalea
         Virasto ohittaa tummennetuilla (teemakierros 10.07.2026: kirkas
         kulta/syaani/minttu oli valkoisella 1.3–1.5 — lukukelvoton). ── */
      --viz-1: #e040fb; --viz-3: #3ec63e; --viz-4: #ff9500; --viz-5: #ff4d6d;
      --viz-6: #00e5ff; --viz-7: #ffd700; --viz-8: #ff6b6b; --viz-9: #a8e6cf;
      --viz-10: #c5cede;
      /* Lobbauksen kaaviokeltainen (LOBBAUS_VARIT) — sama ohitustarve */
      --lb-kelta: #f5c400;

      /* Etusivun päänavigointikortit + moduulisivu. var()-viittaus ratkeaa
         käyttöhetkellä, joten jokainen teema saa omat aksenttinsa ilman
         teemakohtaisia määrittelyjä. */
      --acc-valta:    var(--t-accent);
      --acc-valvonta: var(--t-accent-alt);

      /* ── EFEKTITOKENIT — teemakohtainen "persoonallisuus" jaetuissa komponenteissa.
         Oletukset = klassinen Suomi-ilme. Teemat ohittavat: Kyber maksimoi,
         Oikea/Vasen hillitsee, Virasto nollaa kaiken. ── */
      --fx-decor: block;      /* koristepseudot (valojuova, tekstuuri): block/none */
      --fx-glow: 32%;         /* hover-hehkun color-mix-% */
      --fx-glow-active: 24%;  /* aktiivitilan hehkun % */
      --fx-noise-seed: 3479cd4a9cc15865; /* proseduraalisen tekstuurin siemen */
      --fx-texture: .18;      /* pistetekstuurin hover-opacity */
      --fx-sheen: .85;        /* valojuovan huippuopacity */
      --fx-sheen-dur: 1.4s;   /* valojuovan kesto */
      --fx-lift: -2px;        /* hover-translateY */

      /* ── NEUTRAALIPINNAT — overlay/varjo-musteet rgb-tripletteinä.
         Tummissa teemoissa muste on valkoinen/musta (= entinen renderöinti
         alphan tarkkuudella); vaalea Virasto kääntää musteet. ── */
      --t-sheen-ink: 255,255,255;   /* reunakiillot, hienovaraiset overlay-pinnat */
      --t-shadow-ink: 0,0,0;        /* pudotusvarjot */
      --t-scrim: rgba(2,5,12,.82);  /* modaalien taustahimmennys */

      /* ── PAINIKEJÄRJESTELMÄ (.btn) — periytyy --t-*-tokeneista, päivittyy automaattisesti teemanvaihdossa ── */
      --btn-radius-sm: 8px;
      --btn-radius-md: 10px;
      --btn-radius-lg: 12px;

      --btn-primary-bg:        linear-gradient(120deg, var(--t-accent), color-mix(in srgb, var(--t-accent) 55%, white));
      --btn-primary-bg-hover:  linear-gradient(120deg, color-mix(in srgb, var(--t-accent) 90%, white), color-mix(in srgb, var(--t-accent) 40%, white));
      --btn-primary-border:    var(--t-accent);
      --btn-primary-text:      var(--t-bg-deep);

      --btn-secondary-bg:            var(--t-bg-card);
      --btn-secondary-border:        var(--t-border);
      --btn-secondary-border-hover:  var(--t-accent);
      --btn-secondary-text:          var(--t-text-muted);
      --btn-secondary-text-hover:    var(--t-text);

      --btn-ghost-text:        var(--t-text-muted);
      --btn-ghost-text-hover:  var(--t-text);
      --btn-ghost-bg-hover:    rgba(var(--t-sheen-ink),.07);

      --btn-danger-bg:          #3a1016;
      --btn-danger-border:      #ef4444;
      --btn-danger-text:        #ff9a9a;
      --btn-danger-bg-hover:    #ef4444;
      --btn-danger-text-hover:  #fff5f5;

      --btn-focus-ring: 0 0 0 3px color-mix(in srgb, var(--t-accent) 45%, transparent);
      --btn-disabled-opacity: .45;

      /* ── FONTTIKOOT (3-tasoinen järjestelmä) ── */
      --fs-sm:  .75rem;   /* 12px — metatieto, labelit, aikaleimat, badge */
      --fs-md:  .9rem;    /* 14.4px — leipäteksti, listat, painikkeet, selitteet */
      --fs-lg:  1.1rem;   /* 17.6px — nimet, otsikot, tärkeät numerot */

      /* Puoluevärit */
      --kok:   #1565C0;
      --ps:    #29B6F6;
      --sdp:   #E53935;
      --kesk:  #43A047;
      --vihr:  #7CB342;
      --vas:   #880E4F;
      --rkp:   #FFA726;
      --kd:    #7B1FA2;
      --liik:  #D81B60;
    }

    /* Suomi-teemassa (ei data-theme-attribuuttia) Valvontamoduulin aksentti on
       valkoinen — pari on siniristilipun sininen + valkoinen. */
    :root:not([data-theme]) { --acc-valvonta: #e8edf7; }

    /* ══════════════ TEEMAT ══════════════ */
    /* Suomi on oletus :root-lohkossa. Muut teemat ohittavat --t-* muuttujat. */

    /* 🌌 REVONTULET — kuusenvihreä pohja, smaragdi + violetti aurora */
    [data-theme="revontulet"] {
      --t-bg-deep:     #03060f;
      --t-bg-panel:    #07121f;
      --t-bg-card:     #0a1a2a;
      --t-border:      #1c4a3e;
      --t-text:        #eafff5;
      --t-text-bright: #ffffff;
      --t-text-muted:  #8fd9c0;
      --t-text-dim:    #5a9a85;
      --t-text-faint:  #4e8e79;
      --t-accent:      #5fe6aa;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #9678f0;
      --t-accent-2:    #7ad4c0;
      --t-accent-3:    #9678f0;
      --t-steel:       #4a9edd;
      --t-bronze:      #c4a878;
      --t-positive:    #5fe6aa;
      --t-bg-gradient: radial-gradient(ellipse 120% 80% at 50% 115%, #0d3b2e 0%, #07121f 50%, #03060f 100%);
      /* Osioaksentit: auroran vihreät ja violetit */
      --acc-rk:     #9678f0;
      --acc-lup:    #b596f5;
      --acc-hil:    #c4a878;
      --acc-kyt:    #4a9edd;
      --acc-kan:    #5fd0e6;
      --acc-porssi: #5fe6aa;
      --acc-sig:    #f070a8;
      --acc-ohj:    #d4c98a;
      --acc-oidx:   #9678f0;
      /* Efektit: unenomainen aurora-liuku */
      --fx-glow: 40%; --fx-glow-active: 30%; --fx-texture: .14;
      --fx-sheen: .8; --fx-sheen-dur: 1.8s;
    }

    /* ⚡ CYBER — alkuperäinen neon */
    [data-theme="cyber"] {
      --t-bg-deep:     #03050f;
      --t-bg-panel:    #080d1f;
      --t-bg-card:     #0b1128;
      --t-border:      #1a2a55;
      --t-text:        #e8f4ff;
      --t-text-bright: #ffffff;
      /* muted/dim/faint kirkastettu 10.07.2026 (teemakierros): vanhat arvot
         #5a7a99/#3a5a77/#2a4a67 antoivat korttitaustalla vain 4.2/2.6/2.0 —
         nyt 5.5/4.2/3.2 (sama porras kuin suomi-oletusteemassa) */
      --t-text-muted:  #718eab;
      --t-text-dim:    #5381ab;
      --t-text-faint:  #4a82b4;
      --t-accent:      #00d4ff;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #ff007a;
      --t-accent-2:    #00f5ff;
      --t-accent-3:    #0099cc;
      --t-steel:       #00d4ff;
      --t-bronze:      #ff9500;
      --t-positive:    #39ff14;
      --t-bg-gradient: radial-gradient(ellipse 130% 90% at 50% -15%, #0a1228 0%, #05080f 100%);
      /* Osioaksentit: täysneon */
      --acc-rk:     #b44dff;
      --acc-lup:    #d46aff;
      --acc-hil:    #ffd300;
      --acc-kyt:    #00d4ff;
      --acc-kan:    #4d7bff;
      --acc-porssi: #00ffb3;
      --acc-sig:    #ff2e6e;
      --acc-ohj:    #ff9500;
      --acc-oidx:   #b44dff;
      /* Efektit: maksimoitu neon */
      --fx-glow: 48%; --fx-glow-active: 36%; --fx-texture: .22;
      --fx-sheen: 1; --fx-sheen-dur: .9s;
    }

    /* ✨ MILKY WAY — indigo, tähtipöly, kulta */
    [data-theme="milkyway"] {
      --t-bg-deep:     #070512;
      --t-bg-panel:    #14102e;
      --t-bg-card:     #1c1640;
      --t-border:      #4a3a7a;
      --t-text:        #f0eaff;
      --t-text-bright: #ffffff;
      --t-text-muted:  #b8a8e0;
      --t-text-dim:    #8b7bb2;
      /* faint kirkastettu 10.07.2026 (teemakierros): #5a4a80 antoi 2.2 → 3.2 */
      --t-text-faint:  #8c7bb3;
      --t-accent:      #c9a8ff;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #ffd98a;
      --t-accent-2:    #d8c8ff;
      --t-accent-3:    #ffd98a;
      --t-steel:       #8a9ed4;
      --t-bronze:      #ffd98a;
      --t-positive:    #7ae6b0;
      --t-bg-gradient: radial-gradient(ellipse 120% 100% at 30% 20%, #2a1a4f 0%, #14102e 50%, #070512 100%);
      /* Osioaksentit: tähtipöly, indigo ja kulta */
      --acc-rk:     #c9a8ff;
      --acc-lup:    #b28aff;
      --acc-hil:    #ffd98a;
      --acc-kyt:    #7ac7e8;
      --acc-kan:    #8ab4ff;
      --acc-porssi: #7ae6b0;
      --acc-sig:    #ff9fc8;
      --acc-ohj:    #f0b860;
      --acc-oidx:   #c9a8ff;
      /* Efektit: tähtituike */
      --fx-glow: 36%; --fx-glow-active: 28%; --fx-texture: .22;
      --fx-sheen: .9; --fx-sheen-dur: 1.6s;
    }

    /* 🌲 METSÄ — kuusi, sammal, koivunhopea */
    [data-theme="metsa"] {
      --t-bg-deep:     #050d08;
      --t-bg-panel:    #0e2015;
      --t-bg-card:     #14301c;
      --t-border:      #2e5038;
      --t-text:        #eaf5e8;
      --t-text-bright: #ffffff;
      --t-text-muted:  #8aa87e;
      /* dim/faint kirkastettu 10.07.2026 (teemakierros): 2.9/1.8 → 4.2/3.2 */
      --t-text-dim:    #749c64;
      --t-text-faint:  #669f54;
      --t-accent:      #9cc088;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #c4a878;
      --t-accent-2:    #b4d4a0;
      --t-accent-3:    #c4a878;
      --t-steel:       #6a9ec0;
      --t-bronze:      #c4a878;
      --t-positive:    #9cc088;
      --t-bg-gradient: radial-gradient(ellipse 130% 90% at 50% -15%, #1a3322 0%, #0e2015 55%, #050d08 100%);
      /* Osioaksentit: sammal, kanerva ja koivunhopea */
      --acc-rk:     #a88fd0;
      --acc-lup:    #bfa0e0;
      --acc-hil:    #c4a878;
      --acc-kyt:    #6a9ec0;
      --acc-kan:    #7cc4a8;
      --acc-porssi: #9cc088;
      --acc-sig:    #d4788a;
      --acc-ohj:    #d9b86a;
      --acc-oidx:   #a88fd0;
      /* Efektit: pehmeä ja orgaaninen */
      --fx-glow: 18%; --fx-glow-active: 14%; --fx-texture: .10;
      --fx-sheen: .45; --fx-sheen-dur: 2s; --fx-lift: -1px;
    }

    /* 🌹 ROSE GOLD — viininpunainen, kupari, samppanja */
    [data-theme="rosegold"] {
      --t-bg-deep:     #120a0d;
      --t-bg-panel:    #241419;
      --t-bg-card:     #321c24;
      --t-border:      #5a3540;
      --t-text:        #f5e6e0;
      --t-text-bright: #fff5f0;
      --t-text-muted:  #c89a8e;
      /* dim/faint kirkastettu 10.07.2026 (teemakierros): 3.6/2.0 → 4.2/3.2 */
      --t-text-dim:    #a78178;
      --t-text-faint:  #a88078;
      --t-accent:      #e8a087;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #f0d5b8;
      --t-accent-2:    #f0d5b8;
      --t-accent-3:    #d4886a;
      --t-steel:       #c08878;
      --t-bronze:      #d4a574;
      --t-positive:    #b0c488;
      --t-bg-gradient: radial-gradient(ellipse 130% 90% at 50% -15%, #3a1f2a 0%, #241419 55%, #120a0d 100%);
      /* Osioaksentit: ruusu, kupari ja samppanja */
      --acc-rk:     #c090c8;
      --acc-lup:    #d8a8d8;
      --acc-hil:    #d4a574;
      --acc-kyt:    #e8a087;
      --acc-kan:    #e8c8a0;
      --acc-porssi: #b0c488;
      --acc-sig:    #e87a8a;
      --acc-ohj:    #f0b890;
      --acc-oidx:   #c090c8;
      /* Efektit: lämmin, hidas kiilto */
      --fx-glow: 26%; --fx-glow-active: 20%; --fx-texture: .12;
      --fx-sheen: .95; --fx-sheen-dur: 2.2s;
    }

    /* ⚖️ OIKEA / VASEN — sininen (oikeisto) vs punainen (vasemmisto) */
    [data-theme="oikeavasen"] {
      --t-bg-deep:     #05070f;
      --t-bg-panel:    #0e1320;
      --t-bg-card:     #141b2a;
      --t-border:      #25304d;
      --t-text:        #eef3fb;
      --t-text-bright: #ffffff;
      --t-text-muted:  #aeb9cf;
      --t-text-dim:    #7c89a3;
      --t-text-faint:  #7783a2;
      --t-accent:      #2f6bff;
      --t-accent-text: #467bff; /* A4 16.07.2026: aksentti pienena tekstina, >=4.5:1 */
      --t-accent-alt:  #ff3b4e;
      --t-accent-2:    #5b8cff;
      --t-accent-3:    #ff6470;
      --t-steel:       #2f6bff;
      --t-bronze:      #ff3b4e;
      --t-positive:    #39d98a;
      --t-bg-gradient: radial-gradient(ellipse 90% 70% at 0% 0%, #16244e 0%, transparent 45%), radial-gradient(ellipse 90% 70% at 100% 0%, #54141f 0%, transparent 45%), radial-gradient(ellipse 130% 90% at 50% -15%, #0b1020 0%, #05070f 100%);
      /* Osioaksentit: asiallinen, sini-punainen akseli */
      --acc-rk:     #8a7cf0;
      --acc-lup:    #a394f5;
      --acc-hil:    #d4a24a;
      --acc-kyt:    #6ab0d8;
      --acc-kan:    #2f6bff;
      --acc-porssi: #39d98a;
      --acc-sig:    #ff5a6a;
      --acc-ohj:    #8fa3c8;
      --acc-oidx:   #8a7cf0;
      /* Efektit: hillitty ja asiallinen (oletusteema — vähemmän hehkua kuin muissa) */
      --fx-glow: 14%; --fx-glow-active: 10%; --fx-texture: 0;
      --fx-sheen: .35; --fx-lift: -1px;
    }

    /* 🏛 VIRASTO — vaalea, pelkistetty, asiallinen (suomi.fi-henki). Myös
       etusivun aurinko/kuu-kytkimen "vaalea tila" (vaihdaTeemaMoodi).
       Ei hehkuja, ei valojuovia, ei tekstuureja, ei animaatioita. */
    [data-theme="virasto"] {
      color-scheme: light;
      --t-bg-deep:     #e8eaed;
      --t-bg-panel:    #f4f5f7;
      --t-bg-card:     #ffffff;
      --t-border:      #c6ccd4;
      --t-text:        #1c2430;
      --t-text-bright: #000000;
      --t-text-muted:  #3f4a58;
      --t-text-dim:    #5f6b7a;
      --t-text-faint:  #667181;
      --t-accent:      #2f5f9e;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #2f5f9e;
      --t-accent-2:    #4a729e;
      --t-accent-3:    #4a729e;
      --t-steel:       #4a729e;
      --t-bronze:      #7a6a4a;
      --t-positive:    #2e7d4f;
      --t-bg-gradient: #eef0f2;
      --btn-primary-text: #ffffff;
      --btn-ghost-bg-hover: rgba(0,0,0,.05);
      /* Neutraalimusteet kääntyvät: kiillot ja varjot tummalla musteella, kevyempinä */
      --t-sheen-ink: 28,36,48;
      --t-shadow-ink: 15,23,42;
      --t-scrim: rgba(40,50,60,.5);
      /* Osioaksentit: kaikki sama virastosininen */
      --acc-rk: #2f5f9e; --acc-lup: #2f5f9e; --acc-hil: #2f5f9e;
      --acc-kyt: #2f5f9e; --acc-kan: #2f5f9e; --acc-porssi: #2f5f9e;
      --acc-sig: #2f5f9e; --acc-ohj: #2f5f9e; --acc-oidx: #2f5f9e;
      /* Mitali-/häntäpäävärit: tummennetut, jotta teksti erottuu vaalealta
         taustalta (kirkas kulta/hopea on valkoisella lähes näkymätön) */
      --pp-kulta: #8a6d00; --pp-hopea: #5f6b7a; --pp-pronssi: #8c5a2b;
      --pp-hanta-1: #c00021; --pp-hanta-2: #b04416; --pp-hanta-3: #955c00;
      /* Visualisointipaletti tummennettuna (kontrasti >= 4.0 valkoisella,
         laskettu 10.07.2026) */
      --viz-1: #cb05ed; --viz-3: #298a29; --viz-4: #af6700; --viz-5: #f0002b;
      --viz-6: #008493; --viz-7: #8d7700; --viz-8: #f20000; --viz-9: #278763;
      --viz-10: #6179a5;
      --lb-kelta: #917400;
      /* Efektit pois */
      --fx-decor: none; --fx-glow: 0%; --fx-glow-active: 0%; --fx-texture: 0;
      --fx-sheen: 0; --fx-sheen-dur: 0s; --fx-lift: 0px;
    }
    /* Virasto-litistin: poistaa hohdot ja koristefiltterit joita tokenit eivät kata */
    [data-theme^="virasto"] * { text-shadow: none !important; }
    [data-theme^="virasto"] .nav-btn {
      background: var(--t-bg-card);
      border: 1px solid var(--t-border);
      box-shadow: 0 1px 2px rgba(var(--t-shadow-ink),.08);
    }
    [data-theme^="virasto"] .nav-btn:hover { transform: none; filter: none; }
    [data-theme^="virasto"] .nav-btn::before,
    [data-theme^="virasto"] .nav-btn::after { display: none; }
    /* Sanamerkin pyyhkaisy on koriste — virasto-teema on tarkoituksella littea.
       Huom. `[data-theme^="virasto"] * { text-shadow:none !important }` yllä
       ei riita: .nav-wordmark piilottaa tekstin (color:transparent) ja tuo sen
       takaisin taustagradientilla, joten ilman tata riviä otsikko olisi
       virastoteemassa TYHJA. */
    [data-theme^="virasto"] #etusivuUusi .nk-otsikko.nav-wordmark {
      background-image: none;
      color: var(--text-strong);
      -webkit-text-fill-color: var(--text-strong);
      filter: none;
      animation: none;
    }
    [data-theme^="virasto"] .motif,
    [data-theme^="virasto"] .lp-symbol,
    [data-theme^="virasto"] .kytk-symbol,
    [data-theme^="virasto"] .rk-symbol,
    [data-theme^="virasto"] .ohj-symbol,
    [data-theme^="virasto"] .nav-btn-icon { filter: none !important; }
    [data-theme^="virasto"] .lnv .panel { box-shadow: 0 1px 3px rgba(var(--t-shadow-ink),.10); }
    [data-theme^="virasto"] .lnv .card-hover:hover,
    [data-theme^="virasto"] .lnv-lup .trow:hover, [data-theme^="virasto"] .lnv-lup .crow:hover,
    [data-theme^="virasto"] .lnv-akt .trow:hover, [data-theme^="virasto"] .lnv-rk .rk-row:hover,
    [data-theme^="virasto"] .lnv-kyt .org:hover, [data-theme^="virasto"] .lnv-kyt .pair:hover {
      transform: none;
      box-shadow: 0 2px 6px rgba(var(--t-shadow-ink),.12);
    }
    [data-theme^="virasto"] .ui-tab-btn:hover,
    [data-theme^="virasto"] .ui-tab-btn.active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 45%, transparent); }
    /* Etusivun VALTAVAHTI-pääotsikko: litistetty mutta NÄKYVÄ.
       (Vanha opacity:.05 oli ajalta jolloin .ghost oli pelkkä tausta-
       vesileima — nykyään se on splashin pääotsikko, joka katosi
       molemmissa virasto-varianteissa. Havaittu 10.07.2026.) */
    [data-theme^="virasto"] #etusivuUusi .ghost {
      background: none;
      -webkit-background-clip: initial; background-clip: initial;
      -webkit-text-fill-color: var(--t-text);
      filter: none; animation: none;
    }

    /* 🏛 VIRASTO (TUMMA) — virasto-parivaljakon tumma puolisko.
       Sama pelkistetty filosofia kuin vaaleassa virastossa (litistinsäännöt
       yllä osuvat [data-theme^="virasto"]-etuliitteellä molempiin) —
       vain paletti on tumma ja neutraali. */
    [data-theme="virasto-tumma"] {
      color-scheme: dark;
      --t-bg-deep:     #14171c;
      --t-bg-panel:    #1a1e24;
      --t-bg-card:     #22272f;
      --t-border:      #3a424d;
      --t-text:        #e2e6eb;
      --t-text-bright: #ffffff;
      --t-text-muted:  #b4bcc7;
      --t-text-dim:    #99a2ad;
      --t-text-faint:  #868e9a;
      --t-accent:      #6f9fd8;
      --t-accent-text: var(--t-accent);
      --t-accent-alt:  #6f9fd8;
      --t-accent-2:    #8db4e2;
      --t-accent-3:    #8db4e2;
      --t-steel:       #6f9fd8;
      --t-bronze:      #b09a6a;
      --t-positive:    #4caf7d;
      --t-bg-gradient: #171a20;
      --btn-ghost-bg-hover: rgba(255,255,255,.06);
      /* Neutraalimusteet: vaalea muste tummalla pohjalla, kevyet varjot */
      --t-sheen-ink: 226,230,235;
      --t-shadow-ink: 0,0,0;
      --t-scrim: rgba(0,0,0,.55);
      /* Osioaksentit: kaikki sama virastosininen (kuten vaaleassa) */
      --acc-rk: #6f9fd8; --acc-lup: #6f9fd8; --acc-hil: #6f9fd8;
      --acc-kyt: #6f9fd8; --acc-kan: #6f9fd8; --acc-porssi: #6f9fd8;
      --acc-sig: #6f9fd8; --acc-ohj: #6f9fd8; --acc-oidx: #6f9fd8;
      /* Efektit pois */
      --fx-decor: none; --fx-glow: 0%; --fx-glow-active: 0%; --fx-texture: 0;
      --fx-sheen: 0; --fx-sheen-dur: 0s; --fx-lift: 0px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: auto; }


    body {
      background: var(--t-bg-gradient) fixed;
      color: var(--text-primary);
      font-family: 'Source Sans 3', sans-serif;
      font-size: 16px;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Modal auki — poista raskas taustakuvio */
    body.modal-open::before { display: none; }
    /* body.modal-open ei estä scrollia — drawer scrollaa itse */
    body.ttl-open { overflow: hidden; }

    /* ── Taustakuvio: hieno verkko, sama tunnelma kuin etusivulla ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
      background-size: 28px 28px, 28px 28px;
    }

    /* ── Täysinäytön näkymät: sama teematausta kuin bodyllä/etusivulla ──
       AIEMMIN: tasainen --t-bg-panel (#0e1320) maalasi koko ruudun, mikä
       lukeutui isona kenttänä sinisenä. Nyt seuraa teemaa (--t-bg-gradient),
       jolloin näkymät ovat yhtenäisiä etusivun kanssa jokaisessa teemassa. */
    .pp-fullview {
      background: var(--t-bg-gradient) fixed;
    }
    /* Sama hienovarainen verkkokuvio kuin bodyssa (body::before). Omana ::after-
       kerroksena, koska --t-bg-gradient on eri teemoissa eri määrä kerroksia eikä
       sitä voi latoa samaan background-riviin ruudukon kanssa ilman että
       background-size menee epälinjaan. z-index:-1 = gradientin päälle, sisällön
       taakse (pp-fullview:t ovat position:fixed = oma stacking-konteksti). */
    .pp-fullview::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
      background-size: 28px 28px, 28px 28px;
    }

    /* Pörssipaneelin napit — estä selaimen valkoinen default (ei koske
       jaettuja tab/filter-komponentteja, joilla on oma taustansa) */
    #porssiNakyma button:not(.ui-filter-btn):not(.ui-tab-btn) {
      background: var(--t-bg-panel);
    }

    /* ── YLÄPALKKI (logo) — sama tunnistettavuus kuin etusivulla ── */
    .pp-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 13px clamp(16px, 4vw, 48px);
      background-color: color-mix(in srgb, var(--t-bg-deep) 80%, transparent);
      /* Sama verkkokuvio kuin body::before — backdrop-filterin sumennus muuten
         pyyhkisi taustaruudukon näkymättömiin topbarin kohdalla. background-
         attachment:fixed pitää ruudukon linjassa muun sivun kanssa vieritettäessä. */
      background-image:
        linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
      background-size: 28px 28px, 28px 28px;
      background-attachment: fixed, fixed;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--t-border);
    }
    /* Tausta EI ole enaa taalla: liukuvari ja kulmapyoristys ovat logo.svg:n
       sisalla, jotta merkista on yksi lahde. Tanne jaa vain sijoittelu ja
       hehku, jotka ovat sivuston tyylia eivat merkkia. */
    .pp-topbar-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 8px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent) 40%, transparent);
    }
    .pp-topbar-mark img { display: block; width: 34px; height: 34px; }
    .pp-topbar-text {
      font-family: 'Orbitron', 'Source Sans 3', sans-serif;
      font-weight: 900;
      font-size: 16px;
      letter-spacing: .08em;
      color: var(--t-text);
    }

    /* ── HEADER ── */
    header {
      position: relative;
      text-align: center;
      padding: 3rem 1rem 2.5rem;
      border-bottom: 1px solid var(--border);
      overflow: visible;
      /* Oltava .pp-topbaria (z-index:40) korkeampi, koska headerin sisällä
         olevat position:fixed-pudotusvalikot (z-index:499) pinoutuvat vain
         headerin OMAAN pino-kontekstiin — muuten ne jäisivät logopalkin alle. */
      z-index: 45;
    }


    /* ── GRANIITTI (royal-teema) ── */
    .graniitti-pinta {
      position: relative;
      background: linear-gradient(175deg, #23262e 0%, #15171d 60%, #0e1014 100%);
    }
    .graniitti-pinta::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.54 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
      opacity: .5; pointer-events: none;
    }
    .graniitti-pinta > * { position: relative; }
    .graniitti-kultaviiru {
      position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: linear-gradient(90deg, transparent 5%, var(--t-accent) 50%, transparent 95%);
    }
    .graniitti-valoviiva {
      position: absolute; left: 0; right: 0; top: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--t-sheen-ink),.3), transparent);
    }
    /* Kapeilla näytöillä kaistaleen teksti piiloon, jottei mene teemapainikkeen alle */
    @media (max-width: 560px) {
      .graniitti-pinta > span:nth-of-type(2) {
        font-size: var(--fs-sm) !important;
        max-width: 55%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    /* Korttien sisäkiilto — sametti */
    .card { background: linear-gradient(170deg, rgba(var(--t-sheen-ink),.04), rgba(var(--t-shadow-ink),.16)), var(--bg-card); }

    header::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(201,212,232,.18), transparent 70%);
      pointer-events: none;
    }

    .header-eyebrow {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .35em;
      color: var(--glow-cyan);
      text-transform: uppercase;
      margin-bottom: .75rem;
      opacity: .8;
    }

    h1 {
      font-family: 'Orbitron', 'Source Sans 3', sans-serif;
      font-size: clamp(2rem, 6vw, 4.5rem);
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: linear-gradient(100deg,
        color-mix(in srgb, var(--t-text) 24%, transparent) 0%,
        color-mix(in srgb, var(--t-text) 24%, transparent) 38%,
        var(--t-text) 47%,
        var(--glow-cyan) 50%,
        var(--t-text) 53%,
        color-mix(in srgb, var(--t-text) 24%, transparent) 62%,
        color-mix(in srgb, var(--t-text) 24%, transparent) 100%
      );
      background-size: 280% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 14px rgba(160,176,200,.3));
      line-height: 1.05;
      animation: h1-lapivalaisu 6s linear infinite;
    }
    @keyframes h1-lapivalaisu {
      0%   { background-position: 240% 0; }
      100% { background-position: -140% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      h1 { animation: none; background-position: 50% 0; }
    }

    .header-sub {
      margin-top: .9rem;
      font-size: var(--fs-lg);
      letter-spacing: .15em;
      color: var(--text-muted);
      font-weight: 500;
    }

    .header-slogan {
      margin-top: .9rem;
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .4rem 1.1rem;
      border-radius: 999px;
      background: var(--t-bg-panel);
      border: 1px solid var(--t-border);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--t-text-muted);
      text-transform: uppercase;
    }
    .header-slogan::before {
      content: '';
      width: 7px;
      height: 7px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--glow-cyan);
      box-shadow: 0 0 8px var(--glow-cyan);
    }

    /* Etusivun uutisticker — pyörii 10 viimeisimmän otsikon välillä */
    .etusivu-ticker {
      margin: 1.1rem auto 0;
      max-width: 600px;
      min-height: 1.4em;
      font-size: var(--fs-md);
      color: var(--t-text-dim);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: 0 1rem;
    }
    .etusivu-ticker a {
      color: inherit;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      opacity: 0;
      animation: ticker-fade .5s ease forwards;
      transition: color .15s;
      /* WCAG 2.2 AA 24x24: tekstirivi on ~18px — nostetaan kosketusala
         paddingilla ja kumotaan visuaalinen kasvu marginilla (sama kuvio
         kuin kicker-linkissa). Jäi 23.07. kosketuskohdenoston katveeseen. */
      padding: 4px 0;
      margin: -4px 0;
    }
    .etusivu-ticker a:hover { color: var(--t-accent); }
    .etusivu-ticker .ticker-label {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .1em;
      color: var(--glow-cyan);
      flex-shrink: 0;
      opacity: .8;
    }
    @keyframes ticker-fade {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 640px) {
      .etusivu-ticker { font-size: var(--fs-sm); padding: 0 .75rem; }
      .etusivu-ticker .ticker-label { display: none; }
    }

    /* Scanline dekoratiivinen viiva otsikossa */
    .scanline {
      display: block;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--glow-cyan), var(--glow-pink), transparent);
      margin: 1.4rem auto 0;
      width: 60%;
      opacity: .6;
      animation: pulse-line 3s ease-in-out infinite;
    }
    @keyframes pulse-line {
      0%,100% { opacity:.3; } 50% { opacity:.9; }
    }
    /* teksti kiinteänä (AA), vain hehku sykkii */
    @keyframes pulse-hint {
      0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 14px currentColor; }
    }



    /* ── GRID ── */
    main {
      position: relative;
      z-index: 1;
      padding: 2rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 900px) {
      main { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      main { grid-template-columns: 1fr; }
    }

    /* ── CARD ── */
    .card {
      position: relative;
      background: color-mix(in srgb, var(--party-color, var(--t-accent)) 7%, var(--bg-card));
      border: 1px solid color-mix(in srgb, var(--party-color, var(--t-accent)) 25%, transparent);
      border-radius: 14px;
      padding: 0;
      cursor: pointer;
      overflow: hidden;
      transition: transform .25s, border-color .3s, box-shadow .3s;
      animation: fadeIn .4s ease both;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 6%, transparent);
    }
    @keyframes fadeIn {
      from { opacity:0; transform: translateY(14px); }
      to   { opacity:1; transform: translateY(0); }
    }

    .card:hover {
      transform: translateY(-5px) scale(1.02);
      border-color: var(--party-color, var(--accent));
      box-shadow: 0 8px 32px rgba(var(--t-shadow-ink),.5), 0 0 20px color-mix(in srgb, var(--party-color, var(--t-accent)) 25%, transparent);
    }

    /* Poista vanha topbar */
    .card-topbar { display: none; }

    .card-body { padding: 1.25rem 1.25rem 1rem; flex: 1; }

    .card-party-tag {
      display: inline-block;
      font-size: var(--fs-sm);
      font-family: 'Source Sans 3', sans-serif;
      letter-spacing: .12em;
      padding: .25rem .7rem;
      border-radius: 4px;
      /* A4-badge-päätös 16.07.2026: väri taustana + auto-kontrastiteksti (AA).
         --party-text = #fff/#0c1017, JS laskee (puolueTekstiVari). */
      background: var(--party-color, var(--t-accent));
      border: 1px solid color-mix(in srgb, var(--party-color, var(--t-accent)) 60%, var(--t-border));
      color: var(--party-text, #ffffff);
      font-weight: 600;
      margin-bottom: .65rem;
    }

    .card-name {
      font-family: 'Source Sans 3', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .03em;
      line-height: 1.35;
      color: var(--text-primary);
      margin-bottom: .4rem;
    }

    .card-meta {
      font-size: var(--fs-md);
      color: var(--text-muted);
      letter-spacing: .04em;
    }

    .card-arrow { display: none; }

    /* ── Pistepalkki ── */
    .card-score-bar-wrap {
      height: 2px;
      background: rgba(var(--t-sheen-ink),0.05);
      margin: 0;
    }
    .card-score-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--party-color, var(--t-accent)), color-mix(in srgb, var(--party-color, var(--t-accent)) 60%, #fff));
      transition: width .6s ease;
    }

    /* ── Kortin toimintopalkki ── */
    .card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .6rem 1.25rem .65rem;
      border-top: 1px solid rgba(var(--t-sheen-ink),0.06);
      margin-top: auto;
      position: relative;
      min-height: 44px;
    }

    /* Pisteet + sijoitus — normaalitila */
    /* (Vanhan korttidesignin .card-score-xxx, .card-hover-actions ja .card-action-avaa
       -säännöt poistettu 17.07.2026 hover-affordanssi-sweepissä: mikään HTML/JS ei
       tuota luokkia — kortit ovat .card.ek + .ek-actions, jolla on kosketusfallback.)
       HUOM: tässä luki aiemmin ".card-score-*" jonka tähti+kauttaviiva SULKI kommentin
       kesken — lopputeksti jäsentyi CSS:ksi ja söi seuraavan @keyframes-lohkon
       (vert-pulssi oli poissa CSSOMista 17.07.–31.07.2026). Älä päätä luokkanimeä
       tähteen ennen kauttaviivaa kommentin sisällä. */

    @keyframes vert-pulssi {
      0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent-alt) 60%, transparent); }
      50%      { box-shadow: 0 0 0 7px transparent; }
    }
    .card-action-vert {
      font-size: var(--fs-sm);
      letter-spacing: .08em;
      color: var(--t-accent-alt);
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 600;
      background: none;
      border: 1px solid color-mix(in srgb, var(--t-accent-alt) 40%, transparent);
      border-radius: 999px;
      padding: .3rem .75rem;
      min-height: 40px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
      display: flex;
      align-items: center;
      gap: .3rem;
      animation: vert-pulssi 2.2s ease-in-out infinite;
    }
    .card-action-vert:hover {
      color: var(--t-accent-alt);
      border-color: var(--t-accent-alt);
      background: color-mix(in srgb, var(--t-accent-alt) 10%, transparent);
      animation: none;
    }
    .card-action-vert.valittu {
      color: var(--t-accent-alt);
      border-color: var(--t-accent-alt);
      background: color-mix(in srgb, var(--t-accent-alt) 15%, transparent);
      animation: none;
      box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent-alt) 35%, transparent);
    }


    /* ══════════════════════════════════════════════════════════════════
       EDUSTAJAKORTTI — uudistettu ilme (.card.ek)
       Teemariippumaton: kaikki värit --t-* -tokeneista. --party-color
       asetetaan korttikohtaisesti JS:ssä (puolueVari).
       ══════════════════════════════════════════════════════════════════ */
    .card.ek {
      --pc: var(--party-color, var(--t-accent));
      display: block;
      background: linear-gradient(160deg,
                    color-mix(in srgb, var(--pc) 9%, var(--t-bg-card)) 0%,
                    var(--t-bg-card) 60%);
      border: 0;
      border-left: 3px solid var(--pc);
      border-radius: 14px;
      padding: 16px;
      box-shadow: none;
      overflow: hidden;
      transition: transform .18s, box-shadow .18s, border-color .18s;
    }
    .card.ek:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(var(--t-shadow-ink),.5),
                  0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent),
                  0 0 26px color-mix(in srgb, var(--pc) 22%, transparent);
    }
    .card.ek.ek-valittu {
      border-left-color: var(--t-accent-alt);
      box-shadow: 0 0 0 1px var(--t-accent-alt),
                  0 0 24px color-mix(in srgb, var(--t-accent-alt) 45%, transparent);
    }

    .ek-top { display: flex; gap: 14px; }
    .ek-kuva {
      width: 80px; height: 100px; flex: 0 0 auto;
      border-radius: 10px; overflow: hidden;
      border: 2px solid color-mix(in srgb, var(--pc) 60%, transparent);
      background:
        radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--pc) 42%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--pc) 40%, #0a0f18), #0a0f18);
      display: grid; place-items: center; position: relative;
      box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 26%, transparent);
    }
    .ek-kuva img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .ek-ph { font-size: 2rem; opacity: .4; }
    /* Kuvaplaceholder: line-art-hahmo maskina (korvasi emoji-hahmon 08.07.2026) */
    .ek-ph::before { content:''; display:block; width:1.6em; height:1.6em; margin:auto;
      background: currentColor;
      -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%223.4%22/%3E%3Cpath d=%22M5 20c0-3.6 3.1-6.5 7-6.5s7 2.9 7 6.5%22/%3E%3C/svg%3E') center/contain no-repeat;
      mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%223.4%22/%3E%3Cpath d=%22M5 20c0-3.6 3.1-6.5 7-6.5s7 2.9 7 6.5%22/%3E%3C/svg%3E') center/contain no-repeat; }

    .ek-tiedot { flex: 1 1 0; min-width: 0; }
    .ek-pbadge {
      display: inline-block;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 11px; font-weight: 800; letter-spacing: .06em;
      color: var(--party-text, #fff); padding: 3px 10px; border-radius: 999px; /* A4 16.07.2026: auto-kontrastiteksti */
      background: var(--pc);
      box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 50%, transparent);
    }
    .ek-nimi {
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 700; font-size: 17.6px; line-height: 1.2;
      letter-spacing: normal;
      color: var(--t-text);
      margin: 9px 0 0;
      text-wrap: balance;
    }
    .ek-roolit { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; align-items: flex-start; }
    .ek-rooli {
      display: inline-flex; align-items: center; gap: 6px; width: fit-content;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 11px; font-weight: 700; letter-spacing: .03em;
      padding: 3px 9px; border-radius: 999px;
    }
    .ek-rooli.ministeri {
      color: #ffd700;
      background: color-mix(in srgb, #ffd700 14%, transparent);
      border: 1px solid color-mix(in srgb, #ffd700 40%, transparent);
    }
    .ek-rooli.puhemies {
      color: var(--t-accent-alt);
      background: color-mix(in srgb, var(--t-accent-alt) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--t-accent-alt) 38%, transparent);
    }
    .ek-rooli.keskeytynyt {
      color: #fbbf24;
      background: color-mix(in srgb, #fbbf24 13%, transparent);
      border: 1px solid color-mix(in srgb, #fbbf24 38%, transparent);
    }
    .ek-meta {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 12px; color: var(--t-text-dim);
      margin-top: 9px; letter-spacing: .02em;
    }

    .ek-palkki { margin-top: 14px; height: 5px; border-radius: 999px; background: var(--t-border); overflow: hidden; }
    .ek-fill {
      height: 100%; border-radius: 999px;
      /* Kirkkaampi lähtösävy — pienetkin pistemäärät erottuvat puoluevärinä */
      background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 78%, #000), var(--pc));
      box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 60%, transparent);
      transition: width .6s ease;
    }

    .ek-footer {
      display: flex; align-items: stretch;
      margin-top: 14px; padding-top: 13px;
      border-top: 1px solid var(--t-border);
      position: relative; min-height: 46px;
    }
    .ek-footer.hist { min-height: 0; }
    .ek-fluku { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; transition: opacity .12s; }
    .ek-fluku.oikea { align-items: flex-end; text-align: right; }
    .ek-num { font-family: 'Source Sans 3', sans-serif; font-weight: 800; font-size: 22px; color: var(--t-text); line-height: 1; }
    .ek-num small { font-size: 12px; font-weight: 600; color: var(--t-text-dim); }
    .ek-num.sija { color: var(--t-accent-alt); }
    .ek-lab {
      font-family: 'Source Sans 3', sans-serif;
      font-size:11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--t-text-dim); font-weight: 700; margin-top: 4px;
    }
    .ek-divider { width: 1px; background: var(--t-border); margin: 0 4px; transition: opacity .12s; }

    .ek-actions {
      position: absolute; inset: 13px 0 0;
      display: flex; gap: 8px; align-items: center;
      opacity: 0; transform: translateY(6px); pointer-events: none;
      transition: opacity .16s, transform .16s;
    }
    .ek-footer.hist .ek-actions { position: static; opacity: 1; transform: none; pointer-events: auto; }
    .card.ek:hover .ek-fluku,
    .card.ek:hover .ek-divider { opacity: 0; }
    .card.ek:hover .ek-actions { opacity: 1; transform: none; pointer-events: auto; }

    .ek-act {
      flex: 1 1 0;
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 700; font-size: 12px; letter-spacing: .05em;
      border-radius: 10px; padding: 10px 12px;
      cursor: pointer; border: 1px solid transparent;
      transition: .15s;
    }
    .ek-act.avaa {
      background: linear-gradient(120deg, var(--t-accent), color-mix(in srgb, var(--t-accent) 55%, #fff));
      color: #fff;
      box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent) 40%, transparent);
    }
    .ek-act.avaa:hover { filter: brightness(1.12); }
    .ek-act.vertaile {
      background: transparent;
      color: var(--t-accent-alt);
      border-color: color-mix(in srgb, var(--t-accent-alt) 50%, transparent);
    }
    .ek-act.vertaile:hover {
      background: color-mix(in srgb, var(--t-accent-alt) 14%, transparent);
      box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent-alt) 45%, transparent);
    }
    .ek-act.vertaile.valittu {
      background: color-mix(in srgb, var(--t-accent-alt) 18%, transparent);
      border-color: var(--t-accent-alt);
      box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent-alt) 40%, transparent);
    }
    .card.ek:hover .ek-act.vertaile:not(.valittu) { animation: ekPulssi 1.6s ease-in-out infinite; }
    @keyframes ekPulssi {
      0%, 100% { box-shadow: 0 0 0 0 transparent; }
      50%      { box-shadow: 0 0 14px color-mix(in srgb, var(--t-accent-alt) 45%, transparent); }
    }

    /* ── Kosketuslaitteet / kapeat näytöt: näytä kortin toimintonapit pysyvästi ──
       Työpöydällä .ek-actions (Avaa + Vertaile) on hoverin takana ja pisteet/
       sijoitus vaihtuu napeiksi. Kosketuksella hoveria ei ole → Vertaile-nappia
       (event.stopPropagation, ei muuta laukaisutapaa) ei voi mitenkään löytää.
       Ratkaisu: napit omalle riville pisteiden/sijoituksen ALLE, aina näkyvissä.
       Sekä `(hover:none)` (aidot kosketuslaitteet) että `(max-width:640px)`
       (verifioitavuus width-pohjaisella mobiiliautomaatiolla, kapea ikkuna). */
    @media (hover: none), (max-width: 640px) {
      .card.ek .ek-footer { flex-wrap: wrap; }
      .card.ek .ek-fluku,
      .card.ek .ek-divider { opacity: 1 !important; }   /* pidä pisteet/sijoitus näkyvissä, älä piilota */
      .card.ek .ek-actions {
        position: static; inset: auto;
        flex: 1 0 100%;                 /* pakota napit omalle riville numeroiden alle */
        opacity: 1; transform: none; pointer-events: auto;
        margin-top: 12px;
      }
      .card.ek .ek-act { min-height: 44px; }   /* riittävä kosketuskohde (WCAG 2.5.5) */
      .card.ek .ek-act.vertaile:not(.valittu) { animation: none; }  /* ei jatkuvaa pulssia kosketuksella */
    }


    /* ── DRAWER HAKUPALKKI ── */
    #drawerHakuPalkki {
      flex-shrink: 0;
      display: none;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
      padding: .55rem 1rem .55rem;
      padding-top: 1.1rem;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--t-bg-panel) 80%, transparent);
    }
    #drawerHakuPalkki.vis { display: flex; }
    #drawerHakuPalkki #drawerNakymaValinta > .ui-tab-btn {
      flex: 1;
      min-width: 80px;
    }
    #drawerAlarivi .ui-tab-btn {
      flex: none;
      min-width: 0;
      padding: .3rem .65rem;
      font-size: var(--fs-sm);
    }
    /* KORJATTU 20.07.2026: #drawerHakuPalkki sai flex-wrapin, mutta sen sisällä
       oleva #drawerAlarivi EI — ja juuri se vuoti. Alarivillä on kolme lasta
       (lisänäkymät-pudotus 158px + hakukenttä 180px + puoluesuodatin 424px)
       342px:n tilassa = 82px ylivuoto, joka levitti hakupalkin 66px yli.
       Löytyi Historian ennätykset -näkymästä, mutta palkki on jaettu
       komponentti, joten korjaus koskee kaikkia drawer-näkymiä. */
    #drawerAlarivi {
      flex-wrap: wrap;
      row-gap: .5rem;
    }
    #drawerAlarivi > *,
    #drawerHakuPalkki > * {
      min-width: 0;
      max-width: 100%;
    }
    #drawerHakuInput {
      background: rgba(11,17,40,.9);
      border: 1px solid var(--t-border);
      border-radius: 6px;
      color: var(--t-text);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-md);
      letter-spacing: .04em;
      padding: .35rem .75rem;
      outline: none;
      width: 200px;
      transition: border-color .2s, box-shadow .2s;
    }
    #drawerHakuInput:focus {
      border-color: var(--t-accent-3);
      box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent-3) 20%, transparent);
    }
    #drawerHakuInput::placeholder { color: var(--t-text-dim); }
    #drawerPuoluePainikkeet {
      display: flex;
      flex-wrap: nowrap;
      gap: .3rem;
    }
    .drawer-puolue-btn {
      background: transparent;
      border: 1px solid var(--t-border);
      border-radius: 3px;
      color: var(--t-text-muted);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .08em;
      padding: .2rem .55rem;
      cursor: pointer;
      transition: all .15s;
      text-transform: uppercase;
    }
    .drawer-puolue-btn:hover  { border-color: var(--t-accent-3); color: var(--t-accent-3); }
    .drawer-puolue-btn.active {
      background: color-mix(in srgb, var(--t-accent-3) 15%, transparent);
      border-color: var(--t-accent-3);
      color: color-mix(in srgb, var(--t-accent-3) 70%, white);
    }
    #drawerHakuTulos {
      font-size: var(--fs-sm);
      color: var(--t-text-muted);
      letter-spacing: .08em;
    }

    /* ── DRAWER ── */
    #drawerOverlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,5,.7);
      z-index: 5000;
      opacity: 0;
      pointer-events: none;
      /* visibility poistaa suljetun scrimin myös tab-järjestyksestä ja
         saavutettavuuspuusta (WCAG 2.4.3) — pelkkä opacity:0 ei riitä */
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s;
    }
    #drawerOverlay.open {
      opacity: 1;
      pointer-events: all;
      visibility: visible;
    }
    #drawer {
      position: fixed;
      top: 0;
      left: 0;   /* left+right eikä width:100vw — 100vw sisältää pystyscrollbarin
                    leveyden ja aiheuttaa 16px vaakavuodon (todettu 10.07.2026) */
      right: 0;
      height: 100dvh;
      background-color: var(--t-bg-deep);
      background-image:
        linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
      background-size: 28px 28px, 28px 28px;
      border-left: 1px solid var(--border);
      z-index: 5001;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.22,1,.36,1);
      box-shadow: -12px 0 60px rgba(var(--t-shadow-ink),.7);
    }
    #drawer.open { transform: translateX(0); }
    #drawerTopbar {
      height: 4px;
      flex-shrink: 0;
      background: linear-gradient(90deg, var(--drawer-color, var(--accent)), transparent);
      transition: background .3s;
    }
    #drawerHeader { display: none; }
    #drawerClose {
      background: none;
      border: 1px solid var(--t-border);
      border-radius: 4px;
      color: var(--t-text-muted);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .12em;
      padding: .25rem .65rem;
      cursor: pointer;
      transition: all .15s;
      margin-left: auto;
      flex-shrink: 0;
    }
    #drawerClose:hover { border-color: var(--t-accent-alt); color: var(--t-accent-alt); }
    #drawerContent {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
    }
    @media (max-width: 600px) {
      #drawer { left: 0; }
    }

    /* ── MOBIILI ── */
    @media (max-width: 640px) {
      header { padding-top: 4.5rem !important; }
      h1 { font-size: clamp(1.4rem, 7vw, 2.5rem) !important; letter-spacing: .05em !important; padding: 0 .5rem; }
      #teemaNappi { font-size: var(--fs-sm) !important; padding: .35rem .6rem !important; top: .6rem !important; left: .6rem !important; min-height: 44px !important; }
      .nav-btn-sub { display: none !important; }
      .nav-btn { padding: .6rem .8rem !important; font-size: var(--fs-sm) !important; }
      #grid { grid-template-columns: 1fr !important; padding: .5rem !important; }
      /* Hakurivi pinotaan allekkain */
      .header-search-row > div[style*="display:flex"] { flex-direction: column !important; }
      .header-search-row > div[style*="display:flex"] > button,
      .header-search-row > div[style*="display:flex"] > div { width: 100% !important; }
      /* Toimintohaku input täysleveys */
      #toimintoHaku { width: 100% !important; box-sizing: border-box !important; }
      /* Ylärivi-napit skaalautuvat */
      #drawerNakymaValinta button:not(#drawerClose) { flex: 1 1 47% !important; min-width: 130px !important; font-size: var(--fs-sm) !important; padding: .55rem .4rem !important; white-space: normal !important; }
      #drawerClose { flex: 0 0 auto !important; }
      /* Voimasuhteet / Ikärakenne / Kokemus -näkymät: donitsi+lista -gridit pinoutuvat yhdelle sarakkeelle, eivät jää viereen puristumaan */
      [style*="grid-template-columns:1fr 1fr;gap:2rem;align-items:start"] { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
      [style*="grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1000px;margin-top:2rem"] { grid-template-columns: 1fr !important; }
      /* Donitsikaavion kiinteä 220px-leveys ei sovi 390px-viewportiin */
      div[style*="position:relative;width:220px"] { width: 100% !important; max-width: 220px !important; margin: 0 auto; }
      /* Voimasuhteet/Puoluevertailu-alavälilehdet rivittyvät tarvittaessa */
      #voimasuhteetNakyma > div[style*="display:flex;gap:.5rem"] { flex-wrap: wrap !important; }
      #btnVsOsio1, #btnVsOsio2 { white-space: normal !important; min-width: 140px !important; }
      [style*="padding:1.5rem 2rem 3rem"] { padding: 1.25rem 1rem 2rem !important; }
      /* Valvontamoduuli: 3 saraketta (Seuranta/Analytiikka/Vertaile) eivät mahdu mobiiliin vierekkäin */
      .nav-dropdown-grid { grid-template-columns: 1fr !important; }
      .nav-dropdown-col { border-right: none !important; border-bottom: 1px solid var(--t-border); padding-bottom: .4rem; margin-bottom: .4rem; }
      .nav-dropdown-col:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    }

    /* ── MODAL OVERLAY ── */
    #modalOverlay {
      position: fixed;
      inset: 0;
      background: rgba(var(--t-shadow-ink),.82);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 6000;
    }
    #modalOverlay.open {
      display: flex;
    }

    /* ── MODAL BOX ── */
    #modalBox {
      position: relative;
      background: var(--bg-panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: min(620px, 96vw);
      max-height: 90vh;
      overflow: visible;
      box-shadow: 0 4px 24px rgba(var(--t-shadow-ink),.8);
    }

    .modal-topbar {
      height: 3px;
      background: linear-gradient(90deg, var(--glow-cyan), var(--glow-pink));
    }

    #modalContent {
      overflow-y: auto;
      max-height: calc(90vh - 4rem);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 2rem 2rem 2.5rem;
    }
    @media (max-width: 480px) {
      #modalContent { padding: 1.25rem 1rem 2rem; }
      #submodalContent { padding: 1rem .9rem 1.5rem; }
      .modal-name { font-size: var(--fs-lg); }
    }

    .modal-label {
      font-size: var(--fs-sm);
      letter-spacing: .22em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: .2rem;
    }
    .modal-party-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-sm);
      font-family: 'Source Sans 3', sans-serif;
      letter-spacing: .12em;
      padding: .3rem .65rem;
      border-radius: 5px;
      /* A4-badge-päätös 16.07.2026: sama auto-kontrastimalli kuin .card-party-tag */
      background: var(--modal-party-color, rgba(var(--t-sheen-ink),.05));
      border: 1px solid var(--modal-party-color, var(--border));
      color: var(--modal-party-text, #ffffff);
      text-transform: uppercase;
      margin-bottom: .75rem;
      font-weight: 600;
    }
    .modal-name {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
      letter-spacing: .04em;
    }

    .modal-divider {
      height: 1px;
      background: linear-gradient(90deg, var(--modal-party-color, var(--accent)), transparent);
      margin: 1.25rem 0;
      opacity: .5;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.5rem;
    }

    .detail-item {}
    .detail-item .d-label {
      font-size: var(--fs-sm);
      letter-spacing: .18em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: .2rem;
    }
    .detail-item .d-value {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: .04em;
    }


    /* .spinner — sama pomppiva 4-pylväs-motiivi kuin logossa, toteutettu ilman
       lapsielementtejä (4 tausta-layeria), jotta olemassa olevat 57 kutsupaikkaa
       (pelkkä <div class="spinner" style="margin:...">) saavat uuden animaation
       ilman merkkauksen muuttamista. Uuteen koodiin käytä mieluummin .pp-bar-loader
       (oikeat <i>-elementit, transform-pohjainen, tukee aria-labelia). */
    .spinner {
      width: 32px; height: 26px;
      display: inline-block;
      background-repeat: no-repeat;
      background-position: 2px bottom, 10px bottom, 18px bottom, 26px bottom;
      background-image:
        linear-gradient(#2563eb, #2563eb),
        linear-gradient(#7c3aed, #7c3aed),
        linear-gradient(#b0299b, #b0299b),
        linear-gradient(#dc2626, #dc2626);
      animation: ppSpinnerBars 1.1s cubic-bezier(.45,0,.55,1) infinite;
    }
    @keyframes ppSpinnerBars {
      0%   { background-size: 4px 28%, 4px 28%, 4px 28%, 4px 28%; }
      20%  { background-size: 4px 100%, 4px 28%, 4px 28%, 4px 28%; }
      40%  { background-size: 4px 28%, 4px 100%, 4px 28%, 4px 28%; }
      60%  { background-size: 4px 28%, 4px 28%, 4px 100%, 4px 28%; }
      80%  { background-size: 4px 28%, 4px 28%, 4px 28%, 4px 100%; }
      100% { background-size: 4px 28%, 4px 28%, 4px 28%, 4px 28%; }
    }

    /* Pomppiva 4-pylväs-latausanimaatio — sama motiivi kuin .pp-topbar-mark-logo.
       Käyttö: <span class="pp-bar-loader" role="status" aria-label="Ladataan"><i></i><i></i><i></i><i></i></span>
       Lisää luokka "lg" isompaan kokoon. Väri seuraa logon sininen→punainen-gradienttia bar-kohtaisesti. */
    .pp-bar-loader { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; }
    .pp-bar-loader.lg { height: 40px; gap: 6px; }
    .pp-bar-loader i {
      display: block; width: 4px; height: 100%; border-radius: 2px;
      transform-origin: bottom;
      animation: ppBarBounce 1.1s cubic-bezier(.45,0,.55,1) infinite;
    }
    .pp-bar-loader.lg i { width: 6px; }
    .pp-bar-loader i:nth-child(1) { background: #2563eb; animation-delay: -0.95s; }
    .pp-bar-loader i:nth-child(2) { background: #7c3aed; animation-delay: -0.72s; }
    .pp-bar-loader i:nth-child(3) { background: #b0299b; animation-delay: -0.49s; }
    .pp-bar-loader i:nth-child(4) { background: #dc2626; animation-delay: -0.26s; }
    @keyframes ppBarBounce { 0%, 40%, 100% { transform: scaleY(.28); } 20% { transform: scaleY(1); } }

    /* Sulje-nappi */
    #closeBtn {
      position: absolute;
      top: .85rem;
      right: 1rem;
      background: none;
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text-muted);
      cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .15em;
      padding: .3rem .65rem;
      transition: all .2s;
    }
    #closeBtn:hover {
      border-color: var(--glow-pink);
      color: var(--glow-pink);
      box-shadow: 0 0 8px rgba(197,206,222,.3);
    }

    /* ── EMPTY STATE ── */
    .empty-state {
      grid-column: 1/-1;
      text-align: center;
      padding: 5rem 1rem;
      color: var(--text-muted);
    }
    .empty-state span {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 2rem;
      display: block;
      margin-bottom: .5rem;
      opacity: .3;
    }

    /* ── PP-TILA: yhtenäinen tyhjä/virhetila (design-järjestelmä 09.07.2026)
       JS-apurit ppTyhjaTila()/ppVirheTila() app.js:n alussa. Legacy-luokat
       (.info-ei, .kan-empty) yhtenäistetty samaan ilmeeseen alla — uusi
       koodi käyttää aina pp-tila-komponenttia. ── */
    .pp-tila {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      grid-column: 1/-1;
      text-align: center;
      padding: 44px 20px;
      color: var(--t-text-muted);
    }
    .pp-tila > svg { opacity: .4; }
    .pp-tila-otsikko {
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 700;
      font-size: var(--fs-lg);
      letter-spacing: .05em;
      color: var(--t-text-muted);
    }
    .pp-tila-seloste {
      font-size: var(--fs-md);
      color: var(--t-text-dim);
      max-width: 460px;
      line-height: 1.55;
    }
    .pp-tila-virhe { color: var(--t-negative, #ff4d6d); }
    .pp-tila-virhe .pp-tila-otsikko { color: var(--t-negative, #ff4d6d); }
    .pp-tila-retry { margin-top: 6px; }

    /* Legacy-tyhjätilaluokat samaan ilmeeseen (käyttökohtia ~40 eri
       näkymissä — yhtenäistys yhdellä säännöllä, ei 40 kutsukohdan
       muutoksella). Ei layout-rikkovia ominaisuuksia: vain keskitys,
       ilmava padding ja yhtenäinen väri. */
    .info-ei, .kan-empty {
      display: block;
      padding: 28px 16px;
      text-align: center;
      color: var(--t-text-muted);
      font-size: var(--fs-md);
    }

    /* ── HEADER SEARCH ── */
    .header-search {
      position: relative;
      overflow: visible;
    }
    .header-search input {
      width: 100%;
      background: rgba(11,17,40,.9);
      border: 1px solid var(--t-border);
      border-radius: 6px;
      color: var(--t-text);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-lg);
      letter-spacing: .06em;
      padding: .75rem 1.25rem;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .header-search input:focus {
      border-color: var(--t-accent);
      box-shadow: 0 0 20px rgba(201,212,232,.2);
    }
    .header-search input::placeholder { color: var(--t-text-dim); }
    /* ── HEADER SEARCH ROW ── */
    .header-search-row {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin: 1.5rem auto 0;
      width: min(820px, 92%);
      flex-wrap: wrap;
      justify-content: center;
    }
    .header-search {
      position: relative;
      flex: 1;
      min-width: 200px;
    }

    /* Puolue-nappi hakukentän vieressä */
    .header-filters {
      display: flex;
      gap: .5rem;
      align-items: center;
    }
    .hdr-btn {
      background: rgba(11,17,40,.85);
      border: 1px solid var(--t-border);
      border-radius: var(--btn-radius-sm);
      color: var(--t-text-muted);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-md);
      letter-spacing: .12em;
      padding: .6rem .9rem;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap;
      text-transform: uppercase;
    }
    .hdr-btn:hover { border-color: var(--t-accent); color: var(--t-accent); }
    .hdr-btn.active { background: rgba(201,212,232,.08); border-color: var(--t-accent); color: var(--t-accent); }

    /* ── ISO NAVIGAATIORIVI ── */
    .nav-btn-row {
      display: flex;
      gap: 1.2rem;
      justify-content: center;
      flex-wrap: wrap;
      width: min(1100px, 94%);
      margin: 2rem auto 0;
    }

    /* ── DROPDOWN WRAP ── */
    .nav-dropdown-wrap {
      position: relative;
      flex: 1;
      min-width: 220px;
      max-width: 340px;
    }
    .nav-dropdown-wrap .nav-btn {
      width: 100%;
      max-width: 100%;
    }
    .nav-btn-group { position: relative; }
    .nav-dropdown-arrow {
      display: none;
    }
    .nav-dropdown-wrap.open .nav-dropdown-arrow { transform: rotate(180deg); }

    /* Overlay-tausta */
    .nav-panel-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 498;
      background: rgba(3,5,15,.7);
      backdrop-filter: blur(2px);
    }
    .nav-panel-overlay.open { display: block; }

    /* Paneeli — kiinnittyy headerin alle, ei leikkaudu */
    .nav-dropdown-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      width: min(480px, 92vw);
      background: var(--t-bg-panel);
      border: 1px solid var(--nb-color, var(--t-border));
      border-radius: 12px;
      overflow: hidden;
      z-index: 499;
      box-shadow: 0 16px 48px rgba(var(--t-shadow-ink),.8), 0 0 60px color-mix(in srgb, var(--nb-color,var(--t-border)) 20%, transparent);
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
    }
    .nav-dropdown-wrap.open .nav-dropdown-menu {
      display: block;
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      animation: panelIn .18s ease forwards;
    }
    @keyframes panelIn {
      from { opacity:0; transform: translateX(-50%) translateY(-16px) scale(.97); }
      to   { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
    }

    /* Paneelin yläotsikko */
    .nav-panel-header {
      padding: .9rem 1.2rem .7rem;
      border-bottom: 1px solid var(--t-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-panel-title {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--nb-color, var(--t-text-bright));
      text-shadow: 0 0 12px var(--nb-color, var(--t-text-bright));
    }
    .nav-panel-close {
      background: none; border: none; color: var(--t-text-dim); cursor: pointer;
      font-size: var(--fs-lg); line-height: 1; padding: .2rem .4rem;
      border-radius: 4px; transition: color .15s;
    }
    .nav-panel-close:hover { color: var(--t-text); }

    /* Itemit paneelissa */
    .nav-dropdown-item {
      display: flex;
      align-items: center;
      gap: .9rem;
      width: 100%;
      padding: .9rem 1.2rem;
      background: transparent;
      border: none;
      border-bottom: 1px solid #0d1530;
      color: #aeb8cc;
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: .06em;
      cursor: pointer;
      text-align: left;
      transition: background .15s, color .15s;
    }
    .nav-dropdown-item:last-child { border-bottom: none; }
    .nav-dropdown-item:hover { background: rgba(var(--t-sheen-ink),.05); color: var(--t-text); }
    .nav-dropdown-item.active { background: rgba(var(--t-sheen-ink),.07); color: var(--t-text); }
    .nav-dropdown-item > span:first-child { font-size: 1.3rem; flex-shrink: 0; }
    .nav-dropdown-item > span:last-child {
      display: flex; flex-direction: column; gap: .15rem;
    }
    .nav-dropdown-item small {
      font-size: var(--fs-sm); color: var(--t-text-dim); letter-spacing: .08em;
      font-weight: 400; display: block;
    }
    .nav-dropdown-item:hover small { color: var(--t-text-muted); }

    /* ── Lisänäkymät-valikko etusivun alkuvalikkojen tyyliin (.rrivi) ──
       Kohdennettu vain tähän valikkoon (.ndi-etusivu), ei muihin dropdowneihin. */
    /* Oma aksenttimuuttuja: eristää valikon värin id-pohjaisilta #btnXxx-säännöiltä
       (esim. #btnVoimasuhteet asettaa --nb-color:n), jotta kaikki ikonilaatat pysyvät samanvärisinä. */
    .ndi-etusivu { padding: .35rem; --ndi-accent: var(--nb-color, var(--t-accent)); }
    .ndi-etusivu .nav-panel-header {
      padding: .55rem .7rem .5rem;
      border-bottom: 1px solid var(--t-border);
      margin-bottom: .2rem;
    }
    .ndi-etusivu .nav-panel-title {
      letter-spacing: .16em;
      text-shadow: none;
      color: var(--nb-color, var(--t-accent));
    }
    .ndi-etusivu .nav-dropdown-item {
      gap: .8rem;
      width: auto;
      padding: .6rem .65rem;
      margin: .12rem 0;
      border: 1px solid transparent;
      border-radius: 10px;
      color: var(--t-text-muted);
    }
    .ndi-etusivu .nav-dropdown-item:hover {
      background: var(--t-bg-card);
      color: var(--t-text);
      border-color: var(--t-border);
    }
    .ndi-etusivu .ndi-ikoni {
      width: 32px; height: 32px; flex: none;
      border-radius: 9px; display: grid; place-items: center;
      background: color-mix(in srgb, var(--ndi-accent) 16%, var(--t-bg-card));
      border: 1px solid color-mix(in srgb, var(--ndi-accent) 40%, transparent);
    }
    .ndi-etusivu .ndi-ikoni svg { width: 16px; height: 16px; color: var(--ndi-accent); }
    .ndi-etusivu .ndi-teksti {
      flex: 1; font-size: var(--fs-md); font-weight: 600; letter-spacing: .02em;
    }
    .ndi-etusivu .ndi-nuoli {
      display: flex; color: var(--t-text-muted);
      opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s;
    }
    .ndi-etusivu .nav-dropdown-item:hover .ndi-nuoli { opacity: 1; transform: none; }
    .ndi-etusivu .ndi-nuoli svg { width: 15px; height: 15px; }

    .nav-dropdown-category {
      padding: .45rem 1.1rem .3rem;
      font-size:11px; font-family: 'Source Sans 3', sans-serif;
      letter-spacing: .18em; font-weight: 700;
      color: var(--t-text-dim); text-transform: uppercase;
      border-top: 1px solid var(--t-border);
      margin-top: .25rem;
    }
    .nav-dropdown-category:first-of-type { border-top: none; margin-top: 0; }

    /* Valvontamoduulin 3-sarakkeinen grid */
    .nav-dropdown-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      padding: .5rem .6rem .7rem;
    }
    .nav-dropdown-col {
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--t-border);
    }
    .nav-dropdown-col:last-child { border-right: none; }
    .nav-dropdown-col-header {
      padding: .5rem .7rem .35rem;
      font-size: .72rem; font-family: 'Source Sans 3', sans-serif;
      letter-spacing: .16em; font-weight: 700;
      color: var(--t-text-dim); text-transform: uppercase;
      border-bottom: 1px solid var(--t-border);
      margin-bottom: .2rem;
    }
    .nav-dropdown-col .nav-dropdown-item {
      padding: .65rem .7rem;
      border-bottom: none;
      border-radius: 7px;
      font-size: .82rem;
      gap: .6rem;
    }
    .nav-dropdown-col .nav-dropdown-item > span:first-child { font-size: 1.1rem; }
    .nav-dropdown-col .nav-dropdown-item small { font-size:11px; }

    /* Vertaile — featured-sarake */
    .nav-dropdown-col--featured {
      border-right: none;
      padding: .4rem .4rem .4rem .5rem;
    }
    .nav-vertaile-featured {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      width: 100%;
      height: 100%;
      min-height: 160px;
      background: linear-gradient(135deg, #1a0a0a 0%, #2a0d0d 50%, #1a0a0a 100%);
      border: 1px solid rgba(232,16,42,.35);
      border-radius: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
      box-shadow: 0 0 18px rgba(232,16,42,.12), inset 0 0 30px rgba(232,16,42,.04);
    }
    .nav-vertaile-featured::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 40%, rgba(232,16,42,.18) 0%, transparent 70%);
      opacity: 0;
      transition: opacity .3s;
    }
    .nav-vertaile-featured::after {
      content: '';
      position: absolute;
      top: -60%;
      left: -60%;
      width: 60%;
      height: 220%;
      background: linear-gradient(105deg, transparent 40%, rgba(var(--t-sheen-ink),.07) 50%, transparent 60%);
      transform: skewX(-15deg);
      animation: vertaileSweep 3.5s ease-in-out infinite;
    }
    @keyframes vertaileSweep {
      0%   { left: -60%; }
      100% { left: 160%; }
    }
    .nav-vertaile-featured:hover {
      border-color: rgba(232,16,42,.75);
      box-shadow: 0 0 32px rgba(232,16,42,.3), inset 0 0 40px rgba(232,16,42,.08);
    }
    .nav-vertaile-featured:hover::before { opacity: 1; }
    .nav-vertaile-swords {
      font-size: 2.4rem;
      animation: vertailePulse 2.2s ease-in-out infinite;
      filter: drop-shadow(0 0 8px rgba(232,16,42,.6));
      position: relative;
      z-index: 1;
    }
    @keyframes vertailePulse {
      0%, 100% { transform: scale(1) rotate(-5deg);   filter: drop-shadow(0 0 6px rgba(232,16,42,.5)); }
      50%       { transform: scale(1.12) rotate(5deg); filter: drop-shadow(0 0 14px rgba(232,16,42,.9)); }
    }
    .nav-vertaile-label {
      font-family: 'Source Sans 3', sans-serif;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .22em;
      color: #e8102a;
      text-shadow: 0 0 10px rgba(232,16,42,.7);
      position: relative;
      z-index: 1;
    }
    .nav-vertaile-sub {
      font-family: 'Source Sans 3', sans-serif;
      font-size:11px;
      color: rgba(174,184,204,.6);
      text-align: center;
      line-height: 1.3;
      padding: 0 .4rem;
      position: relative;
      z-index: 1;
    }

    /* ── UI-TAB-BTN: kompakti teemapainike drawer-välilehdille jne. ──
       Yhtenäistetty 2026-07 design-työkalun Lobbaus/Rahoitus/Kytkökset/
       Aktiivisuus-standaloneissa vakiintuneeseen pillerityyliin: hienovarainen
       pistekuviotekstuuri + vino valojuova hoverissa, liukuväri-reunus
       aktiivisessa tilassa (--ui-tab-color). Ei ikoneja.
       HUOM: ::before/::after ovat z-index:-1 (painikkeen oman taustan päällä,
       mutta AINA tekstin/lasten alla) — tämä säilyttää yhteensopivuuden
       vanhojen käyttökohteiden kanssa, joissa nappien teksti ei ole
       <span>-käärittynä (esim. drawerin EDUSTAJAT/HALLITUS-rivi). */
    .ui-tab-btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      flex: 1;
      min-width: 100px;
      padding: .6rem .9rem;
      border-radius: 999px;
      border: 1px solid transparent;
      outline: none;
      cursor: pointer;
      background:
        linear-gradient(var(--t-bg-card), var(--t-bg-card)) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 26%, transparent), rgba(var(--t-sheen-ink),.05) 60%) border-box;
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-md);
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--t-text-muted);
      text-transform: uppercase;
      transition: transform .2s ease, color .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }
    /* Pistekuviotekstuuri, häivähtää esiin hoverissa (diagonaalisesti maskattu) */
    .ui-tab-btn::before {
      content: '';
      display: var(--fx-decor);
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image: radial-gradient(color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 65%, transparent) 1px, transparent 1.5px);
      background-size: 9px 9px;
      background-position: center;
      opacity: 0;
      transition: opacity .28s ease;
      -webkit-mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
      mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
    }
    /* Vino valojuova, pyyhkäisee painikkeen yli kertaalleen hoverissa */
    .ui-tab-btn::after {
      content: '';
      display: var(--fx-decor);
      position: absolute;
      top: 0; left: 0; height: 100%; width: 55%;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 0%,
        color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 30%, transparent) 42%,
        color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 55%, #fff 40%) 50%,
        color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 30%, transparent) 58%, transparent 100%);
      transform: translateX(-160%) skewX(-18deg);
      opacity: 0;
    }
    .ui-tab-btn:hover {
      transform: translateY(var(--fx-lift));
      color: var(--t-text);
      box-shadow: 0 10px 26px rgba(var(--t-shadow-ink),.45), 0 0 22px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) var(--fx-glow), transparent);
    }
    .ui-tab-btn:hover::before { opacity: var(--fx-texture); }
    .ui-tab-btn:hover::after { animation: uiTabSheen var(--fx-sheen-dur) ease-out; }
    @keyframes uiTabSheen {
      0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
      18%  { opacity: var(--fx-sheen); }
      100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
    }
    .ui-tab-btn:active { transform: translateY(1px); }
    .ui-tab-btn.active {
      color: var(--ui-tab-color, var(--t-accent));
      background:
        linear-gradient(color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 14%, var(--t-bg-card)), color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 14%, var(--t-bg-card))) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 72%, transparent), color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 22%, transparent)) border-box;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 30%, transparent),
                  0 0 20px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) var(--fx-glow-active), transparent),
                  inset 0 0 20px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 8%, transparent);
    }
    .ui-tab-btn.active:hover { color: var(--ui-tab-color, var(--t-accent)); }
    /* Pieni lukumääräpilleri välilehdessä (esim. Keskeytyneet) */
    .ui-tab-count {
      display: inline-grid;
      place-items: center;
      min-width: 1.35rem;
      height: 1.35rem;
      padding: 0 .4rem;
      border-radius: 999px;
      font-size: var(--fs-sm);
      font-weight: 700;
      line-height: 1;
      color: var(--t-text);
      background: color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 22%, var(--t-bg-panel));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 45%, transparent);
    }
    .ui-tab-btn.active .ui-tab-count {
      background: var(--ui-tab-color, var(--t-accent));
      color: #fff;
      box-shadow: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .ui-tab-btn:hover { transform: none; }
      .ui-tab-btn:hover::before { opacity: 0; }
      .ui-tab-btn:hover::after { animation: none; opacity: 0; }
    }

    /* Pysyvästi korostettu tab-nappi (esim. Lisänäkymät) — sama väriviritys
       kuin .active, mutta ei sidottu vaihtuvaan valintatilaan: käytetään
       kun napin takana on paljon sisältöä ja sen pitää erottua muista
       samalla rivillä olevista, muuten neutraaleista kontrolleista. */
    .ui-tab-btn-korosta {
      color: var(--ui-tab-color, var(--t-accent));
      background:
        linear-gradient(color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 14%, var(--t-bg-card)), color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 14%, var(--t-bg-card))) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 72%, transparent), color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 22%, transparent)) border-box;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 30%, transparent),
                  0 0 20px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) var(--fx-glow-active), transparent);
    }
    .ui-tab-btn-korosta:hover {
      color: var(--ui-tab-color, var(--t-accent));
    }

    /* ── UI-CLOSE-BTN: sulkemispainike (ESC, ×) ── */
    .ui-close-btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: .35rem;
      padding: .35rem .75rem;
      border-radius: 10px;
      background: linear-gradient(160deg, var(--t-bg-card) 0%, var(--t-bg-panel) 100%);
      border: none; outline: none; cursor: pointer;
      font-family: 'Source Sans 3', sans-serif; font-size: var(--fs-sm); font-weight: 700;
      letter-spacing: .1em; color: var(--t-text-muted);
      transition: color .15s, filter .15s;
      white-space: nowrap; position: relative;
    }
    .ui-close-btn::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--t-border) 0%, transparent 60%);
      opacity: .5; pointer-events: none;
    }
    .ui-close-btn:hover { color: var(--t-text); filter: brightness(1.2); }
    .ui-close-btn:active { transform: translateY(1px); }

    /* ── UI-FILTER-BTN: pieni suodatinpainike (pörssi, ryhmäkuri jne.) ── */
    .ui-filter-btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: .2rem .55rem;
      border-radius: 999px;
      background: transparent;
      border: none; outline: none; cursor: pointer;
      font-family: 'Source Sans 3', sans-serif; font-size: var(--fs-sm); font-weight: 700;
      letter-spacing: .08em; color: var(--t-text-muted);
      transition: color .12s, background .12s;
      white-space: nowrap; position: relative;
    }
    .ui-filter-btn::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--t-border) 0%, transparent 70%);
      opacity: .4; pointer-events: none; transition: opacity .12s;
    }
    .ui-filter-btn:hover { color: var(--t-text); }
    .ui-filter-btn:hover::before { opacity: .7; }
    .ui-filter-btn.active {
      color: var(--ui-filter-color, var(--t-accent));
      background: color-mix(in srgb, var(--ui-filter-color, var(--t-accent)) 8%, transparent);
    }
    .ui-filter-btn.active::before {
      background: linear-gradient(135deg, var(--ui-filter-color, var(--t-accent)) 0%, transparent 60%);
      opacity: .45;
    }
    .ui-filter-btn:active { transform: translateY(1px); }

    /* ── UI-FILTER-BTN HEHKUVERSIO — jaettu hologrammipilleri (deduplikoitu 08.07.2026
       viidestä identtisestä scope-kopiosta: .lnv-hil/-kan/-porssi/-lup + #ohjelmaNakyma).
       Pistetekstuuri + valojuova + aktiivihehku, voimakkuudet --fx-*-tokeneista.
       Osion oletusväri tulee scope-rootin --ui-filter-color-muuttujasta; app.js:n
       inline style="--ui-filter-color:…" ohittaa sen nappikohtaisesti. ── */
    .lnv-hil .ui-filter-btn, .lnv-kan .ui-filter-btn, .lnv-porssi .ui-filter-btn,
    .lnv-lup .ui-filter-btn, #ohjelmaNakyma .ui-filter-btn {
      --ui-tab-color: var(--ui-filter-color, var(--t-accent));
      position: relative; overflow: hidden; isolation: isolate;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
      background:
        linear-gradient(var(--t-bg-card), var(--t-bg-card)) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--ui-tab-color) 26%, transparent), rgba(var(--t-sheen-ink),.05) 60%) border-box;
      font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: .04em; color: var(--t-text-dim);
      transition: transform .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
      white-space: nowrap;
    }
    .lnv-hil .ui-filter-btn > *, .lnv-kan .ui-filter-btn > *, .lnv-porssi .ui-filter-btn > *,
    .lnv-lup .ui-filter-btn > *, #ohjelmaNakyma .ui-filter-btn > * { position: relative; z-index: 2; }
    .lnv-hil .ui-filter-btn svg, .lnv-kan .ui-filter-btn svg, .lnv-porssi .ui-filter-btn svg,
    .lnv-lup .ui-filter-btn svg { width: 14px; height: 14px; color: var(--ui-tab-color); flex: 0 0 auto; }
    .lnv-hil .ui-filter-btn::before, .lnv-kan .ui-filter-btn::before, .lnv-porssi .ui-filter-btn::before,
    .lnv-lup .ui-filter-btn::before, #ohjelmaNakyma .ui-filter-btn::before {
      content: ''; display: var(--fx-decor); position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(color-mix(in srgb, var(--ui-tab-color) 65%, transparent) 1px, transparent 1.5px);
      background-size: 8px 8px; background-position: center; opacity: 0; transition: opacity .28s ease;
      -webkit-mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
      mask-image: linear-gradient(115deg, #000 12%, transparent 78%);
    }
    .lnv-hil .ui-filter-btn::after, .lnv-kan .ui-filter-btn::after, .lnv-porssi .ui-filter-btn::after,
    .lnv-lup .ui-filter-btn::after, #ohjelmaNakyma .ui-filter-btn::after {
      content: ''; display: var(--fx-decor); position: absolute; top: 0; left: 0; height: 100%; width: 55%;
      z-index: 1; pointer-events: none;
      background: linear-gradient(105deg, transparent 0%,
        color-mix(in srgb, var(--ui-tab-color) 30%, transparent) 42%,
        color-mix(in srgb, var(--ui-tab-color) 55%, #fff 40%) 50%,
        color-mix(in srgb, var(--ui-tab-color) 30%, transparent) 58%, transparent 100%);
      transform: translateX(-160%) skewX(-18deg); opacity: 0;
    }
    .lnv-hil .ui-filter-btn:hover:not(:disabled), .lnv-kan .ui-filter-btn:hover:not(:disabled),
    .lnv-porssi .ui-filter-btn:hover:not(:disabled), .lnv-lup .ui-filter-btn:hover:not(:disabled),
    #ohjelmaNakyma .ui-filter-btn:hover:not(:disabled) {
      transform: translateY(var(--fx-lift)); color: var(--t-text);
      box-shadow: 0 6px 16px rgba(var(--t-shadow-ink),.35), 0 0 14px color-mix(in srgb, var(--ui-tab-color) var(--fx-glow), transparent);
    }
    .lnv-hil .ui-filter-btn:hover:not(:disabled)::before, .lnv-kan .ui-filter-btn:hover:not(:disabled)::before,
    .lnv-porssi .ui-filter-btn:hover:not(:disabled)::before, .lnv-lup .ui-filter-btn:hover:not(:disabled)::before,
    #ohjelmaNakyma .ui-filter-btn:hover:not(:disabled)::before { opacity: var(--fx-texture); }
    .lnv-hil .ui-filter-btn:hover:not(:disabled)::after, .lnv-kan .ui-filter-btn:hover:not(:disabled)::after,
    .lnv-porssi .ui-filter-btn:hover:not(:disabled)::after, .lnv-lup .ui-filter-btn:hover:not(:disabled)::after,
    #ohjelmaNakyma .ui-filter-btn:hover:not(:disabled)::after { animation: uiFilterSheen var(--fx-sheen-dur) ease-out; }
    @keyframes uiFilterSheen {
      0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
      18%  { opacity: var(--fx-sheen); }
      100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
    }
    .lnv-hil .ui-filter-btn.active, .lnv-kan .ui-filter-btn.active, .lnv-porssi .ui-filter-btn.active,
    .lnv-lup .ui-filter-btn.active, #ohjelmaNakyma .ui-filter-btn.active {
      color: var(--ui-tab-color);
      background:
        linear-gradient(color-mix(in srgb, var(--ui-tab-color) 14%, var(--t-bg-card)), color-mix(in srgb, var(--ui-tab-color) 14%, var(--t-bg-card))) padding-box,
        linear-gradient(150deg, color-mix(in srgb, var(--ui-tab-color) 72%, transparent), color-mix(in srgb, var(--ui-tab-color) 22%, transparent)) border-box;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-tab-color) 30%, transparent),
                  0 0 14px color-mix(in srgb, var(--ui-tab-color) var(--fx-glow-active), transparent),
                  inset 0 0 14px color-mix(in srgb, var(--ui-tab-color) 8%, transparent);
    }
    .lnv-hil .ui-filter-btn.active:hover, .lnv-kan .ui-filter-btn.active:hover,
    .lnv-porssi .ui-filter-btn.active:hover, .lnv-lup .ui-filter-btn.active:hover,
    #ohjelmaNakyma .ui-filter-btn.active:hover { color: var(--ui-tab-color); }
    @media (prefers-reduced-motion: reduce) {
      .lnv-hil .ui-filter-btn:hover:not(:disabled), .lnv-kan .ui-filter-btn:hover:not(:disabled),
      .lnv-porssi .ui-filter-btn:hover:not(:disabled), .lnv-lup .ui-filter-btn:hover:not(:disabled),
      #ohjelmaNakyma .ui-filter-btn:hover:not(:disabled) { transform: none; }
      .lnv-hil .ui-filter-btn:hover:not(:disabled)::after, .lnv-kan .ui-filter-btn:hover:not(:disabled)::after,
      .lnv-porssi .ui-filter-btn:hover:not(:disabled)::after, .lnv-lup .ui-filter-btn:hover:not(:disabled)::after,
      #ohjelmaNakyma .ui-filter-btn:hover:not(:disabled)::after { animation: none; opacity: 0; }
    }


    .nav-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      flex: 1;
      min-width: 200px;
      max-width: 340px;
      padding: 1.8rem 1.2rem 1.6rem;
      background: linear-gradient(168deg, color-mix(in srgb, var(--nb-color, var(--t-accent)) 38%, var(--t-bg-card)) 0%, var(--t-bg-panel) 60%, var(--t-bg-deep) 100%);
      border-radius: 18px;
      cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      text-transform: uppercase;
      letter-spacing: .13em;
      transition: transform .25s, filter .25s, box-shadow .25s;
      overflow: visible;
      border: none;
      outline: none;
      isolation: isolate;
    }

    /* Reunaviiva clip-pathin kanssa — pseudo-elementtinä */
    .nav-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      background: linear-gradient(160deg, rgba(201,212,232,.45), rgba(201,212,232,.08) 60%);
      opacity: .5;
      transition: opacity .25s;
      z-index: 0;
    }

    /* Reunan outline — hopeinen kehys */
    .nav-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      padding: 1px;
      background: linear-gradient(160deg, var(--nb-color), rgba(201,212,232,.25) 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .55;
      transition: opacity .25s;
      z-index: 0;
    }

    .nav-btn:hover {
      transform: translateY(-3px);
      filter: brightness(1.12);
      box-shadow: 0 10px 30px rgba(var(--t-shadow-ink),.4), 0 2px 0 var(--nb-glow);
    }
    .nav-btn:hover::before { opacity: .68; }
    .nav-btn:hover::after  { opacity: .9; }

    .nav-btn.active {
      transform: translateY(-3px);
      filter: brightness(1.1);
      box-shadow: 0 8px 26px rgba(var(--t-shadow-ink),.45), 0 2px 0 var(--nb-color);
    }
    .nav-btn.active::before { opacity: .6; }
    .nav-btn.active::after  { opacity: 1; }

    /* Klikatessa painuu */
    .nav-btn:active { transform: translateY(-1px) scale(.99); filter: brightness(1.15); }

    .nav-btn-icon {
      font-size: 3rem;
      line-height: 1;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 2px 4px rgba(var(--t-shadow-ink),.5));
      transition: transform .22s, filter .22s;
    }
    .nav-btn:hover .nav-btn-icon {
      transform: scale(1.1) translateY(-2px);
      filter: drop-shadow(0 3px 8px rgba(var(--t-shadow-ink),.6));
    }

    .nav-btn-label {
      font-size: var(--fs-lg);
      font-weight: 700;
      color: var(--t-text);
      letter-spacing: .18em;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 3px rgba(var(--t-shadow-ink),.5);
    }
    .nav-btn-sub {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      color: color-mix(in srgb, var(--nb-color, var(--t-accent)) 45%, var(--t-text-dim));
      letter-spacing: .02em;
      font-weight: 400;
      position: relative;
      z-index: 1;
      transition: color .2s;
      margin-top: .15rem;
      opacity: .7;
    }
    .nav-btn:hover .nav-btn-sub,
    .nav-btn.active .nav-btn-sub { color: var(--nb-color); opacity: .6; }

    /* Leviävä alleviivaus painikkeen herätessä */
    .nav-btn-label::after {
      content: '';
      position: absolute;
      left: 50%; transform: translateX(-50%);
      width: 30%;
      height: 1px;
      background: var(--nb-color);
      opacity: 0;
      bottom: -5px;
      transition: width .25s, opacity .25s;
    }
    .nav-btn:hover .nav-btn-label::after,
    .nav-btn.active .nav-btn-label::after { opacity: .8; width: 70%; }

    /* Sanamerkin tyylit ovat #etusivuUusi-lohkossa (.nk-otsikko.nav-wordmark).
       HUOM: yllaoleva .nav-btn on PIILOTETTUA legacy-markupia (#etusivuLegacy,
       display:none) jota uuden etusivun kortit klikkaavat delegoiden. Nakyva
       paanavigaatio on #etusivuUusi .navkortti. */

    /* ══════════ TEEMAKOHTAISET NAV-HOHDOT ══════════ */
    /* Hohto tulee .nav-btn:n omaan ::before-kerrokseen teemoittain.
       Suomi / Metsä / Rose Gold: ei animaatiota (hillitty). */

    /* 🌌 REVONTULET — ajelehtiva aurora-verho laatan takana */
    [data-theme="revontulet"] .nav-btn {
      background:
        linear-gradient(115deg, transparent 30%, rgba(95,230,170,.18) 45%, rgba(150,120,240,.16) 58%, rgba(95,230,170,.10) 72%, transparent 88%),
        linear-gradient(168deg, var(--t-bg-card) 0%, var(--t-bg-panel) 70%, var(--t-bg-deep) 100%);
      background-size: 250% 250%, 100% 100%;
      animation: navAurora 7s ease-in-out infinite;
    }
    @keyframes navAurora {
      0%, 100% { background-position: 0% 50%, 0 0; }
      50%      { background-position: 100% 50%, 0 0; }
    }

    /* ⚡ CYBER — skannaava neonviiva + hillitty reunahehku */
    [data-theme="cyber"] .nav-btn {
      box-shadow: inset 0 0 0 1px rgba(0,212,255,.12), 0 0 10px rgba(0,212,255,.05);
    }
    [data-theme="cyber"] .nav-btn .nav-btn-icon {
      filter: drop-shadow(0 0 4px rgba(0,245,255,.3));
    }
    [data-theme="cyber"] .nav-btn::before {
      /* kevyt, ohut skannausviiva — säilyttää myös pohjan sisäkiillon */
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(0,245,255,.28) 0%, transparent 4%),
        linear-gradient(160deg, rgba(201,212,232,.45), rgba(201,212,232,.08) 60%);
      background-size: 100% 100%, 100% 100%;
      background-repeat: no-repeat;
      animation: navCyberScan 5s ease-in-out infinite;
      opacity: .5;
    }
    @keyframes navCyberScan {
      0%   { background-position: 0 -20%, 0 0; }
      55%  { background-position: 0 120%, 0 0; }
      100% { background-position: 0 120%, 0 0; }
    }

    /* ✨ MILKY WAY — tuikkiva tähtipöly */
    [data-theme="milkyway"] .nav-btn {
      background-image:
        radial-gradient(1.5px 1.5px at 20% 25%, rgba(var(--t-sheen-ink),.7), transparent),
        radial-gradient(1px 1px at 68% 55%, rgba(255,232,176,.7), transparent),
        radial-gradient(1.5px 1.5px at 42% 78%, rgba(216,200,255,.7), transparent),
        radial-gradient(1px 1px at 85% 30%, rgba(var(--t-sheen-ink),.6), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(var(--t-sheen-ink),.5), transparent),
        linear-gradient(168deg, var(--t-bg-card) 0%, var(--t-bg-panel) 70%, var(--t-bg-deep) 100%);
      animation: navTwinkle 3.5s ease-in-out infinite;
    }
    @keyframes navTwinkle {
      0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 1; }
      50%      { opacity: .82; }
    }

    @media (prefers-reduced-motion: reduce) {
      [data-theme="revontulet"] .nav-btn,
      [data-theme="cyber"] .nav-btn::before,
      [data-theme="milkyway"] .nav-btn { animation: none; }
    }

    /* ══════════ TEEMAKOHTAISET PANEELIPERSOONAT ══════════
       Ambient-animaatiot VAIN .lnv .panel -elementeissä (muutama per näkymä)
       — ei koskaan listariveissä. Suomi / Oikea/Vasen / Virasto: ei lohkoja,
       niiden luonne tulee pelkistä --fx-tokeneista. */

    /* 🌌 REVONTULET — hidas aurora-verho paneelin pinnassa */
    [data-theme="revontulet"] .lnv .panel {
      background-image:
        linear-gradient(115deg, transparent 40%, rgba(95,230,170,.05) 52%, rgba(150,120,240,.05) 62%, transparent 78%),
        linear-gradient(var(--t-bg-panel), var(--t-bg-panel));
      background-size: 250% 250%, 100% 100%;
      animation: navAurora 9s ease-in-out infinite;
    }

    /* ⚡ CYBER — neonreunus paneeleissa + hehkuvat tabi-ikonit */
    [data-theme="cyber"] .lnv .panel {
      box-shadow: 0 24px 60px rgba(var(--t-shadow-ink),.4), inset 0 1px 0 rgba(var(--t-sheen-ink),.04),
                  inset 0 0 0 1px rgba(0,212,255,.10);
    }
    [data-theme="cyber"] .ui-tab-btn svg,
    [data-theme="cyber"] .ui-filter-btn svg {
      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ui-tab-color, var(--t-accent)) 40%, transparent));
    }

    /* ✨ MILKY WAY — tuikkiva tähtipöly paneelin pinnassa */
    [data-theme="milkyway"] .lnv .panel {
      background-image:
        radial-gradient(1.5px 1.5px at 18% 22%, rgba(var(--t-sheen-ink),.5), transparent),
        radial-gradient(1px 1px at 64% 48%, rgba(255,232,176,.5), transparent),
        radial-gradient(1.5px 1.5px at 38% 82%, rgba(216,200,255,.5), transparent),
        radial-gradient(1px 1px at 88% 26%, rgba(var(--t-sheen-ink),.4), transparent),
        radial-gradient(1px 1px at 12% 64%, rgba(var(--t-sheen-ink),.35), transparent),
        linear-gradient(var(--t-bg-panel), var(--t-bg-panel));
      animation: navTwinkle 3.5s ease-in-out infinite;
    }

    /* 🌲 METSÄ — pehmeät, hitaammat siirtymät */
    [data-theme="metsa"] .ui-tab-btn,
    [data-theme="metsa"] .lnv .card-hover { transition-duration: .35s; }

    /* 🌹 ROSE GOLD — staattinen lämmin hehku paneelin yläreunassa */
    [data-theme="rosegold"] .lnv .panel {
      background-image:
        linear-gradient(180deg, rgba(232,160,135,.06), transparent 32%),
        linear-gradient(var(--t-bg-panel), var(--t-bg-panel));
    }

    @media (prefers-reduced-motion: reduce) {
      [data-theme="revontulet"] .lnv .panel,
      [data-theme="milkyway"] .lnv .panel { animation: none; }
    }

    /* Värit per nappi — kaikki teemamuuttujista, vaihtuvat teeman mukana */
    #btnNykyiset       { --nb-color:var(--t-positive); --nb-glow:color-mix(in srgb,var(--t-positive) 30%,transparent); border:none; }
    #btnVoimasuhteet   { --nb-color:var(--t-accent-3); --nb-glow:color-mix(in srgb,var(--t-accent-3) 30%,transparent); border:none; }
    #btnHallitus       { --nb-color:var(--t-accent); --nb-glow:color-mix(in srgb,var(--t-accent) 30%,transparent); border:none; }
    #btnLobbaus        { --nb-color:var(--t-bronze); --nb-glow:color-mix(in srgb,var(--t-bronze) 30%,transparent); border:none; }
    #btnHistorialliset { --nb-color:var(--t-bronze); --nb-glow:color-mix(in srgb,var(--t-bronze) 30%,transparent); border:none; }
    #btnSignaali       { --nb-color:var(--t-steel); --nb-glow:color-mix(in srgb,var(--t-steel) 30%,transparent); border:none; }
    #btnKytkokset      { --nb-color:var(--acc-kyt); --nb-glow:color-mix(in srgb,var(--acc-kyt) 30%,transparent); border:none; }
    #btnHillotolpat    { --nb-color:var(--acc-hil); --nb-glow:color-mix(in srgb,var(--acc-hil) 30%,transparent); border:none; }
    .hillo-tab { background:none;border:none;border-bottom:2px solid transparent;padding:.5rem .9rem;font-size:var(--fs-sm);font-family:'Source Sans 3',sans-serif;letter-spacing:.05em;color:var(--t-text-muted);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s; }
    .hillo-tab:hover { color:var(--acc-hil); }
    .hillo-tab.active { color:var(--acc-hil);border-bottom-color:var(--acc-hil); }
    /* Mobiiliylivuoto (löydetty Mobiilivahti-tarkistuksessa 04.07.2026): välilehtirivi on
       leveämpi kuin kapea näyttö, ja overflow-x:auto oli olemassa mutta ilman mitään
       visuaalista vihjettä — käyttäjä ei arvannut pyyhkäistä, "Verkosto" näkyi katkaistuna
       ja "Puoluetilastot" ei näkynyt lainkaan. Lisätty häivytysvihje oikeaan reunaan,
       joka piiloutuu kun rivi on vieritetty loppuun. */
    /* Pystypehmuste (31.07.2026): overflow-x:auto tekee rivistä leikkaavan MYÖS
       pystysuunnassa — CSS laskee toisen akselin `visible`-arvon `auto`ksi, jolloin
       rivistä tulee scrollportti jonka reunaan kaikki lapsen ylivuoto katkeaa.
       Mitattu: .ui-tab-btn:n hover-nosto (--fx-lift -2px) vei napin yläreunan 2 px
       scrollportin ulkopuolelle, elementsFromPoint ei nähnyt sitä siellä lainkaan,
       ja koko hover-hehku (box-shadow) leikkautui pois. Pehmuste on scrollportin
       SISÄLLÄ eikä siksi leikkaa; wrapin negatiivinen margin-top ja rivin pienennetty
       margin-bottom (ks. .lnv-kyt .kytk-tabs-row) pitävät asettelun ennallaan.
       Pehmuste mahtuu .kytk-kehyksen 8 px:n yläpehmusteeseen — älä kasvata sitä
       kysymättä, sillä kehys leikkaa oman padding-boxinsa reunaan. */
    .kytk-tabs-wrap { position:relative;flex-shrink:0;border-bottom:1px solid var(--t-border);margin-top:-8px; }
    .kytk-tabs-row { display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding-block:8px; }
    .kytk-tabs-row::-webkit-scrollbar { display:none; }
    .kytk-tabs-fade { position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--t-bg-panel,#0d1420));transition:opacity .2s;opacity:1; }
    .kytk-tabs-fade.piilossa { opacity:0; }
    #btnAktiivisuus    { --nb-color:var(--t-accent); --nb-glow:color-mix(in srgb,var(--t-accent) 30%,transparent); border:none; }
    #btnVertaile       { --nb-color:var(--t-accent-2); --nb-glow:color-mix(in srgb,var(--t-accent-2) 30%,transparent); border:none; }
    #btnOhjelmat       { --nb-color:var(--t-bronze); --nb-glow:color-mix(in srgb,var(--t-bronze) 30%,transparent); border:none; }
    #btnRahoitus       { --nb-color:var(--t-accent); --nb-glow:color-mix(in srgb, var(--t-accent) 35%, transparent);  border:none; }

    /* vertailu-tila kortissa */
    .card.vert-valittu { border-color: var(--t-accent-alt) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent-alt) 30%, transparent) !important; }

    /* Vertailupalkki alhaalla */
    #vertPalkki {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 200;
      background: linear-gradient(135deg, var(--t-bg-panel), var(--t-bg-card));
      border-top: 1px solid color-mix(in srgb, var(--t-accent-alt) 33%, transparent);
      padding: .75rem 2rem;
      display: flex; align-items: center; gap: 1rem;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 -4px 24px rgba(197,206,222,.15);
    }
    #vertPalkki.auki { transform: translateY(0); }
    /* Kapeilla näytöillä palkin sisältö (✕ NOLLAA) vuoti viewportin yli —
       tiiviimpi täyte ja rivitys pitävät kaikki napit näkyvissä */
    @media (max-width: 480px) {
      #vertPalkki { padding: .6rem .75rem; gap: .5rem; flex-wrap: wrap; }
    }

    /* Pulssianimaatio Nykyiset-napille */
    #btnNykyiset:not(.active):not(:hover) {
      animation: game-pulse 2.5s ease-in-out infinite;
    }
    @keyframes game-pulse {
      0%,100% { filter: brightness(1)   drop-shadow(0 0 4px rgba(62,198,62,.2)); }
      50%      { filter: brightness(1.08) drop-shadow(0 0 14px rgba(62,198,62,.5)); }
    }
    #btnNykyiset.active { animation: none; }




    /* ── ANIMOITU PLACEHOLDER ── */
    .header-search input::placeholder {
      color: var(--t-text-bright);
      text-shadow: 0 0 8px var(--t-text-bright);
    }

    /* ── SPLASH ── */
    #splash {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3rem 1rem 4rem;
      animation: fadeIn .5s ease;
    }
    .splash-inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    #reticle {
      width: 160px;
      height: 160px;
      opacity: .7;
    }
    .reticle-rotate {
      transform-origin: 100px 100px;
      animation: rot 8s linear infinite;
    }
    .reticle-rotate-slow {
      transform-origin: 100px 100px;
      animation: rot 20s linear infinite reverse;
    }
    @keyframes rot { to { transform: rotate(360deg); } }
    .splash-hint {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .3em;
      color: var(--t-accent-text, var(--t-accent));
      /* A4 16.07.2026: teksti ei saa pulssata alle AA:n — oma animaatio,
         lattia .85 (pulse-line .3-lattia jää koristeviivoille) */
      opacity: 1;
      animation: pulse-hint 2s ease-in-out infinite;
    }
    .splash-sub {
      font-size: var(--fs-md);
      letter-spacing: .1em;
      color: var(--t-text-dim);
    }

    /* ── PUOLUE DROPDOWN ── */
    .puolue-dropdown-wrap {
      position: relative;
    }
    .puolue-dropdown {
      display: none;
      position: fixed;
      background: var(--t-bg-panel);
      border: 1px solid var(--t-border);
      border-radius: 6px;
      padding: .5rem;
      z-index: 99999;
      min-width: 320px;
      flex-wrap: wrap;
      gap: .35rem;
      box-shadow: 0 8px 32px rgba(var(--t-shadow-ink),.8), 0 0 16px rgba(201,212,232,.1);
    }
    .puolue-dropdown.open {
      display: flex;
    }
    .puolue-dropdown .dp-btn {
      background: transparent;
      border: 1px solid var(--t-border);
      border-radius: 3px;
      color: var(--t-text-muted);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .1em;
      padding: .3rem .6rem;
      cursor: pointer;
      transition: all .15s;
      text-transform: uppercase;
    }
    .puolue-dropdown .dp-btn:hover { border-color: var(--t-accent); color: var(--t-accent); }
    .puolue-dropdown .dp-btn.active { border-color: var(--t-accent); color: var(--t-accent); background: rgba(201,212,232,.08); }
    /* Vanhat hdr-btn-tyylit poistettu — korvattu .nav-btn-tyyleillä */

    /* ── SIVUTUS ── */
    #pagination {
      position: relative;
      z-index: 1;
      display: none;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: 1.25rem 1rem 2rem;
      flex-wrap: wrap;
    }
    .page-btn {
      background: transparent;
      border: 1px solid var(--t-border);
      border-radius: 4px;
      color: var(--t-text-muted);
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .1em;
      padding: .4rem .7rem;
      cursor: pointer;
      transition: all .2s;
      min-width: 36px;
      min-height: 44px;
    }
    .page-btn:hover  { border-color: var(--t-accent); color: var(--t-accent); }
    .page-btn.active { border-color: var(--t-accent); color: var(--t-accent); background: rgba(201,212,232,.1); }
    .page-btn:disabled { opacity: .25; cursor: default; }
    .page-info {
      font-size: var(--fs-sm);
      letter-spacing: .12em;
      color: var(--t-text-muted);
      padding: 0 .5rem;
    }

    /* ── LOBBAUS ── */
    .lobbaus-bar-wrap { margin-bottom: .35rem; }
    .lobbaus-bar-label {
      display: flex; justify-content: space-between;
      font-size: var(--fs-sm); letter-spacing: .06em;
      color: var(--text-muted); margin-bottom: .18rem;
    }
    .lobbaus-bar-track {
      background: rgba(var(--t-sheen-ink),.05);
      border-radius: 3px; height: 8px; overflow: hidden;
    }
    .lobbaus-bar-fill {
      height: 100%; border-radius: 3px;
      background: linear-gradient(90deg, var(--party-c, var(--t-accent)), var(--t-text-bright));
      transition: width .6s cubic-bezier(.4,0,.2,1);
    }
    .lobbaus-aikasarja {
      display: flex; align-items: flex-end;
      gap: 8px; height: 90px; margin-top: .5rem;
      padding: 0 .25rem;
    }

    /* ── XML-OSIOT ── */
    .xml-osio { min-height: 40px; }
    .xml-rivi {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: .35rem 0; border-bottom: 1px solid var(--t-border)66;
      font-size: var(--fs-md); gap: .75rem; line-height: 1.4;
    }
    .xml-rivi:last-child { border-bottom: none; }
    .xml-rivi-nimi  { color: var(--t-text-muted); flex: 1; }
    .xml-rivi-aika  { color: var(--t-text-muted); font-size: var(--fs-sm); white-space: nowrap; flex-shrink: 0; }
    .xml-ryhmaotsikko {
      font-family: 'Source Sans 3', sans-serif; font-size: var(--fs-sm);
      letter-spacing: .15em; color: var(--t-text-muted);
      margin: .75rem 0 .3rem; padding-top: .5rem;
      border-top: 1px solid var(--t-border);
    }
    .xml-ryhmaotsikko:first-child { margin-top: 0; border-top: none; }

    /* Korostus kun etusivun tickerista tullaan suoraan muuttuneeseen
       merkintaan (21.07.2026). Haipyy itsestaan 6 s:ssa — huomionosoitin,
       ei pysyva tila. Vasen palkki + tausta erottuvat myos silloin kun
       kayttaja on vaihtanut teemaa, koska molemmat tulevat teemamuuttujista.
       prefers-reduced-motion: ei sykettae, pelkka staattinen korostus. */
    .xml-rivi.pp-sid-korostus,
    .xml-ryhmaotsikko.pp-sid-korostus {
      background: color-mix(in srgb, var(--t-accent) 14%, transparent);
      border-left: 3px solid var(--t-accent);
      padding-left: .6rem; border-radius: 3px;
      animation: ppSidKorostus 1.1s ease-in-out 2;
    }
    .xml-rivi.pp-sid-korostus .xml-rivi-nimi { color: var(--t-text); }
    @keyframes ppSidKorostus {
      0%,100% { box-shadow: 0 0 0 0 transparent; }
      50%     { box-shadow: 0 0 14px 0 color-mix(in srgb, var(--t-accent) 45%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      .xml-rivi.pp-sid-korostus,
      .xml-ryhmaotsikko.pp-sid-korostus { animation: none; }
    }

    .hidden-overlay { display: none !important; }
    .hidden-overlay.open { display: flex !important; }

    /* ── HALLITUS-KORTIT ── */
    .hallitus-card {
      background: var(--t-bg-panel);
      border: 1px solid var(--t-border);
      border-radius: 6px;
      padding: 1rem;
      transition: border-color .2s, box-shadow .2s;
      position: relative;
    }
    .hallitus-card:hover {
      border-color: var(--party-color, var(--t-accent));
      box-shadow: 0 0 12px rgba(201,212,232,.08);
    }

    /* ── LOBBAUSKORTTI-overlay & Lobbausinfomodal (jaettu kuori, sisältö .lnv-lb:ssä) ── */
    .lb-overlay {
      position: fixed; inset: 0; z-index: 6100;
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      background: rgba(2,6,23,.92);
      backdrop-filter: blur(6px);
    }
    .lb-box {
      position: relative;
      width: min(720px,96vw); max-height: 90vh; overflow-y: auto;
      background: var(--t-bg-panel);
      border: 1px solid color-mix(in srgb, var(--t-bronze) 26%, var(--t-border));
      border-radius: 18px;
      box-shadow: 0 34px 90px rgba(var(--t-shadow-ink),.62), inset 0 1px 0 rgba(var(--t-sheen-ink),.05),
                  0 0 40px color-mix(in srgb, var(--t-bronze) 18%, transparent);
      padding: 1.75rem;
    }
    .lb-close {
      position: absolute; top: 1rem; right: 1rem; z-index: 2;
      display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
      background: none; border: none; color: var(--t-text-muted); cursor: pointer;
      transition: color .18s ease, transform .18s ease;
    }
    .lb-close:hover { color: var(--t-bronze); transform: translateY(-1px); }
    .lb-close .xic {
      width: 34px; height: 34px; border: 1px solid var(--t-border); border-radius: 10px;
      display: flex; align-items: center; justify-content: center; background: var(--t-bg-card);
    }
    .lb-close .xic svg { width: 16px; height: 16px; }
    .lb-close .kbd { font-size:11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
    .lb-box .kh-eyebrow {
      font-family: 'Source Sans 3', sans-serif; font-size:11px; letter-spacing: .2em;
      text-transform: uppercase; color: var(--t-text-muted); font-weight: 700;
    }
    .lb-box .kh-title {
      font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
      color: var(--t-text); font-size: clamp(20px,3.4vw,28px); margin: 6px 0 2px;
      text-shadow: 0 0 20px color-mix(in srgb, var(--t-bronze) 35%, transparent);
    }
    .lb-modal-box { width: min(440px,96vw); }
    .lb-modal-txt { font-size: 13.5px; line-height: 1.6; color: var(--t-text-dim); margin-top: 14px; }
    .lb-modal-meta {
      display: flex; align-items: baseline; gap: 10px; margin-top: 18px;
      padding-top: 14px; border-top: 1px solid var(--t-border);
    }
    .lb-modal-meta .m-v {
      font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 30px; color: var(--t-bronze);
      text-shadow: 0 0 18px color-mix(in srgb, var(--t-bronze) 40%, transparent);
    }
    .lb-modal-meta .m-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-text-muted); font-weight: 700; }

    /* ── YLEISET APULUOKAT (korvaa JS:n inline-tyylejä) ── */
    .orb { font-family: 'Source Sans 3', sans-serif; }
    .orb-lg { font-family: 'Source Sans 3', sans-serif; font-size: 1.3rem; font-weight: 700; }
    .orb-sm { font-family: 'Source Sans 3', sans-serif; font-size: var(--fs-sm); letter-spacing: .15em; }
    .muted  { color: var(--t-text-muted); }
    .muted-sm { color: var(--t-text-muted); font-size: var(--fs-md); }
    .txt-sm { font-size: var(--fs-sm); }
    .txt-xs { font-size: var(--fs-sm); }
    .d-label {
      font-size: var(--fs-sm); letter-spacing: .18em;
      color: var(--text-muted); text-transform: uppercase; margin-bottom: .2rem;
    }
    .d-value { font-size: 1rem; font-weight: 600; color: var(--text-primary); letter-spacing: .04em; }
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
    .stat-box {
      background: var(--t-bg-card); border: 1px solid var(--t-border);
      border-radius: 10px; padding: .65rem; text-align: center;
    }
    /* minmax(0,1fr): pelkkä 1fr perii min-content-lattian, jolloin pitkä sana
       ("organisaatioita") levittää sarakkeet yli kontin mobiilissa — havaittu
       18.07.2026 Kytkökset +155px / Rahoitus +118px / Rahoitusepäselvyys +111px. */
    .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-bottom: .85rem; }
    .stat-grid > * { min-width: 0; }
    @media (max-width: 560px) {
      .stat-grid { gap: .5rem; }
      .stat-grid > * { overflow-wrap: anywhere; }
    }
    .data-row {
      font-size: var(--fs-sm); color: #9aa4bc; padding: .25rem 0;
      border-bottom: 1px solid var(--t-border)88; line-height: 1.45;
    }
    .data-row:last-child { border-bottom: none; }
    .section-divider { margin-top: 1rem; border-top: 1px solid var(--t-border); padding-top: .85rem; }
    .tag-pill {
      display: inline-block;
      background: rgba(var(--t-sheen-ink),.05); border-radius: 3px;
      padding: .2rem .5rem; font-size: var(--fs-sm);
    }
    .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
    .bar-col-val { font-size: var(--fs-sm); margin-bottom: 2px; font-family: 'Source Sans 3', sans-serif; }
    .bar-col-bar { width: 100%; border-radius: 3px 3px 0 0; opacity: .8; }
    .bar-col-lbl { font-size: var(--fs-sm); color: var(--t-text-muted); text-align: center; margin-top: 3px; }
    .spinner-wrap { margin: .5rem auto; }
    .lnk-btn {
      font-size: var(--fs-sm); letter-spacing: .1em; text-decoration: none;
      border-radius: 3px; display: inline-block; padding: .25rem .6rem;
    }
    /* .info-ei: yhtenäistetty .pp-tila-lohkon yhteyteen (ks. EMPTY STATE) */

    /* ── PROFIILI-HEADER ── */
    .profil-header {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 1.5rem;
      align-items: start;
      margin-bottom: 1.5rem;
    }
    .profil-kuva-wrap { flex-shrink: 0; }
    .profil-kuva-wrap img, .profil-kuva-wrap a { display: block; }
    .profil-info { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
    .profil-info-rivi { display: flex; flex-direction: column; gap: .5rem; }
    .profil-kentta { display: flex; flex-direction: column; }
    .profil-napit { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
    .profil-nappi {
      background: transparent; border-radius: 4px;
      font-family: 'Source Sans 3', sans-serif; font-size: var(--fs-sm);
      letter-spacing: .12em; padding: .35rem .75rem;
      cursor: pointer; text-align: left;
    }

    /* ── PROFNAV GRID ── */
    .profnav-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .4rem;
      margin-top: .75rem;
    }
    @media (max-width: 480px) {
      .profnav-grid { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
      .profnav-label { font-size: var(--fs-sm); letter-spacing: .06em; }
      .profnav-icon  { font-size: 1rem; }
    }

    /* Pelimäinen — sama clip-path tyyli kuin nav-btn */
    .profnav-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .2rem;
      padding: .6rem .4rem .55rem;
      background: linear-gradient(160deg, var(--t-bg-panel) 60%, var(--t-bg-card) 100%);
      border-radius: 12px;
      cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      text-transform: uppercase;
      letter-spacing: .1em;
      transition: transform .18s, box-shadow .18s, filter .18s;
      border: none;
      outline: none;
      isolation: isolate;
    }
    .profnav-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background: linear-gradient(160deg, var(--pnb-color, var(--t-accent)), transparent 60%);
      opacity: .12;
      transition: opacity .2s;
      z-index: 0;
    }
    .profnav-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1px;
      background: var(--pnb-color, var(--t-accent));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .28;
      transition: opacity .2s;
      z-index: 0;
    }
    .profnav-btn:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 6px 20px var(--pnb-color, var(--t-accent));
      filter: brightness(1.15);
    }
    .profnav-btn:hover::before { opacity: .25; }
    .profnav-btn:hover::after  { opacity: .7; }
    .profnav-btn.active {
      transform: translateY(-1px);
      box-shadow: 0 4px 18px var(--pnb-color, var(--t-accent));
      filter: brightness(1.1);
    }
    .profnav-btn.active::before { opacity: .22; }
    .profnav-btn.active::after  { opacity: .9; }
    .profnav-btn:active { transform: scale(.97); filter: brightness(1.3); }

    .profnav-icon {
      font-size: 1.2rem;
      line-height: 1;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 1px 2px rgba(var(--t-shadow-ink),.5));
      transition: transform .2s;
    }
    .profnav-btn:hover .profnav-icon { transform: scale(1.18) translateY(-1px); }

    .profnav-label {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--pnb-color, var(--t-accent));
      letter-spacing: .1em;
      text-align: center;
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }
    /* ── PROFIILI SUBMODAL ── */
    #submodalOverlay {
      position: fixed;
      inset: 0;
      background: rgba(var(--t-shadow-ink),.78);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 6500;
      opacity: 1;
      pointer-events: none;
      transition: opacity .2s;
    }
    #submodalOverlay.open {
      opacity: 1;
      pointer-events: all;
    }
    #submodalBox {
      position: relative;
      background: var(--t-bg-panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: min(580px, 94vw);
      max-height: 85vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      box-shadow: 0 8px 40px rgba(var(--t-shadow-ink),.95);
      animation: submodal-in .2s ease both;
    }
    @keyframes submodal-in {
      from { opacity: 0; transform: scale(.96) translateY(10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    #submodalTopbar {
      height: 3px;
      border-radius: 8px 8px 0 0;
    }
    #submodalContent {
      padding: 1.5rem 1.75rem 2rem;
    }
    #submodalTitle {
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .2em;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    #submodalClose {
      position: absolute;
      top: .75rem;
      right: .85rem;
      background: none;
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text-muted);
      cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      font-size: var(--fs-sm);
      letter-spacing: .15em;
      padding: .28rem .6rem;
      transition: all .2s;
      z-index: 1;
    }
    #submodalClose:hover {
      border-color: var(--glow-pink);
      color: var(--glow-pink);
    }

    /* ══════════════════════════════════════════════════════════════════
       PROFIILIKORTTI — uudistettu ilme (pk-*)
       Teemariippumaton: värit --t-* -tokeneista. --modal-party-color
       asetetaan JS:ssä (openTTLProfile).
       ══════════════════════════════════════════════════════════════════ */
    /* Modaalin kuori */
    #modalBox {
      width: min(720px, 96vw);
      border-radius: 14px;
      border-color: color-mix(in srgb, var(--t-text-dim) 24%, var(--t-border));
      overflow: hidden;
      box-shadow: 0 40px 90px rgba(var(--t-shadow-ink),.6);
      animation: pkSlideUp .26s cubic-bezier(.2,.7,.3,1);
    }
    @keyframes pkSlideUp { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { #modalBox { animation: none; } }
    /* topbar — puolueväri-liuku + hienovarainen hehku sen alla */
    .modal-topbar {
      position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
      background: linear-gradient(90deg, var(--t-accent), var(--t-accent-alt) 55%, var(--modal-party-color, var(--t-accent)));
    }
    .modal-topbar::after {
      content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 14px; z-index: -1;
      background: linear-gradient(90deg, var(--t-accent), var(--t-accent-alt) 55%, var(--modal-party-color, var(--t-accent)));
      filter: blur(11px); opacity: .5;
    }
    #modalContent { padding: 28px 26px 30px; }
    #closeBtn {
      top: 16px; right: 16px;
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: var(--t-bg-card);
      border: 1px solid color-mix(in srgb, var(--t-text-dim) 24%, var(--t-border));
      font-size: 15px; letter-spacing: 0;
      transition: border-color .16s, color .16s, box-shadow .16s, transform .16s;
    }
    #closeBtn:hover {
      border-color: var(--t-accent-alt);
      color: var(--t-accent-alt);
      transform: translateY(-1px);
      box-shadow: 0 0 14px color-mix(in srgb, var(--t-accent-alt) 40%, transparent);
    }
    #closeBtn:active { transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) { #closeBtn { transition: none; } }

    /* Yläosa: kuva + tiedot */
    .profil-header.pk-ylaosa {
      display: flex; gap: 24px; align-items: flex-start;
      grid-template-columns: none; margin-bottom: 0;
    }
    @media (max-width: 560px) {
      .profil-header.pk-ylaosa { flex-direction: column; align-items: center; text-align: center; }
    }
    .pk-kuva {
      flex: 0 0 auto; width: 200px; height: 250px;
      border-radius: 16px; overflow: hidden; position: relative;
      display: grid; place-items: center; text-decoration: none;
      border: 1px solid color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 55%, transparent);
      box-shadow:
        0 0 0 4px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 10%, transparent),
        0 0 30px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 22%, transparent),
        inset 0 -40px 46px -20px rgba(var(--t-shadow-ink),.55);
      background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 38%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 34%, #0a0f18), #0a0f18);
      transition: box-shadow .2s ease, transform .2s ease;
    }
    a.pk-kuva:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 4px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 16%, transparent),
        0 0 40px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 34%, transparent),
        inset 0 -40px 46px -20px rgba(var(--t-shadow-ink),.55);
    }
    @media (prefers-reduced-motion: reduce) { .pk-kuva, a.pk-kuva:hover { transition: none; transform: none; } }
    .pk-kuva img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .pk-ph { font-size: 3.5rem; opacity: .35; color: var(--t-text-faint); }
    .pk-ext {
      position: absolute; bottom: 10px; right: 10px;
      width: 27px; height: 27px; border-radius: 8px;
      display: grid; place-items: center;
      background: rgba(4,8,14,.72); backdrop-filter: blur(3px);
      border: 1px solid color-mix(in srgb, var(--t-text-dim) 24%, var(--t-border));
      color: var(--t-text-dim);
    }
    .pk-ext svg { width: 13px; height: 13px; }

    .pk-tiedot { min-width: 0; flex: 1 1 0; display: block; gap: 0; }
    .pk-ylaotsikko {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
      color: var(--t-text-muted); font-weight: 700;
    }
    .pk-ylaotsikko::before {
      content: ""; width: 14px; height: 1.5px; border-radius: 1px;
      background: var(--modal-party-color, var(--t-accent)); display: inline-block;
    }
    .modal-name.pk-nimi {
      font-family: 'Orbitron', 'Source Sans 3', sans-serif;
      font-weight: 800; font-size: clamp(24px, 3.6vw, 31px); line-height: 1.14;
      letter-spacing: .01em; color: var(--t-text);
      margin: 10px 0 0; text-wrap: balance;
    }
    .modal-party-tag.pk-pbadge {
      display: inline-flex; align-items: center; gap: 7px; width: fit-content;
      margin: 16px 0 0; cursor: pointer;
      font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--modal-party-text, #fff); padding: 8px 9px 8px 16px; border-radius: 999px; border: none; /* A4 16.07.2026 */
      background:
        linear-gradient(rgba(var(--t-sheen-ink),.16), rgba(var(--t-sheen-ink),0) 45%),
        var(--modal-party-color, var(--t-accent));
      box-shadow:
        0 1px 0 rgba(var(--t-sheen-ink),.18) inset,
        0 0 0 1px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 70%, transparent),
        0 8px 18px -6px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 65%, transparent);
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .modal-party-tag.pk-pbadge:hover {
      transform: translateY(-1px);
      box-shadow:
        0 1px 0 rgba(var(--t-sheen-ink),.22) inset,
        0 0 0 1px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 85%, transparent),
        0 10px 24px -6px color-mix(in srgb, var(--modal-party-color, var(--t-accent)) 78%, transparent);
    }
    @media (prefers-reduced-motion: reduce) { .modal-party-tag.pk-pbadge { transition: none; } }
    .pk-pbadge-arrow {
      width: 20px; height: 20px; border-radius: 999px; flex: none;
      display: grid; place-items: center;
      background: rgba(var(--t-sheen-ink),.16); font-size: 1em; line-height: 1;
    }

    .pk-roolit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    @media (max-width: 560px) { .pk-roolit { justify-content: center; } }
    .pk-rooli {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 12px; font-weight: 700; letter-spacing: .06em;
      padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
    }
    .pk-rooli.ministeri {
      color: #ffd700;
      background: color-mix(in srgb, #ffd700 12%, transparent);
      border: 1px solid color-mix(in srgb, #ffd700 38%, transparent);
    }
    .pk-rooli.puhemies {
      color: var(--t-accent-alt);
      background: color-mix(in srgb, var(--t-accent-alt) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--t-accent-alt) 38%, transparent);
    }
    .pk-rooli.keskeytynyt {
      color: #fbbf24;
      background: color-mix(in srgb, #fbbf24 12%, transparent);
      border: 1px solid color-mix(in srgb, #fbbf24 38%, transparent);
    }

    .pk-perustiedot {
      display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 22px;
      padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--t-text-dim) 10%, transparent);
    }
    @media (max-width: 560px) { .pk-perustiedot { text-align: left; } }
    .pk-kentta .pk-lab {
      font-family: 'Source Sans 3', sans-serif;
      font-size:11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--t-text-faint); font-weight: 700;
    }
    .pk-kentta .pk-arvo {
      font-size: var(--fs-md); color: var(--t-text); font-weight: 600; margin-top: 4px;
    }

    .modal-divider.pk-erotin {
      height: 1px; margin: 26px 0; border: none;
      background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--t-text-dim) 22%, transparent) 18%,
        color-mix(in srgb, var(--t-text-dim) 22%, transparent) 82%,
        transparent);
    }

    /* Kategoriaruudukko + laatat */
    .profnav-grid.pk-kategoriat {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0;
    }
    @media (max-width: 480px) {
      .profnav-grid.pk-kategoriat { grid-template-columns: 1fr; gap: 10px; }
    }
    .profnav-btn.pk-kat {
      --kc: var(--t-accent); position: relative; isolation: isolate; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
      text-align: center; padding: 25px 16px; cursor: pointer; border-radius: 12px;
      color: inherit; font: inherit; outline: none;
      background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 13%, var(--t-bg-card)), var(--t-bg-card) 72%);
      border: 1px solid color-mix(in srgb, var(--kc) 28%, var(--t-border));
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .profnav-btn.pk-kat.pk-leveä { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
    /* Himmeä line-art-taustasymboli oikeaan yläkulmaan, bleedaa reunan yli */
    .pk-kat .pk-symboli {
      position: absolute; top: -14px; right: -14px; width: 84px; height: 84px;
      color: var(--kc); opacity: .07; pointer-events: none; z-index: 0;
      transition: opacity .2s ease, transform .2s ease;
    }
    .pk-kat.pk-leveä .pk-symboli { width: 96px; height: 96px; top: -16px; right: -16px; }
    .pk-kat .pk-symboli svg { width: 100%; height: 100%; display: block; }
    /* pistekuviotekstuuri + vino valojuova — sama kieli kuin .ui-tab-btn */
    .profnav-btn.pk-kat::before {
      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; padding: 0;
      background-image: radial-gradient(color-mix(in srgb, var(--kc) 65%, transparent) 1px, transparent 1.5px);
      background-size: 9px 9px; background-position: center;
      opacity: 0; transition: opacity .28s ease;
      /* mask-lyhenne (ei mask-image) nollaa geneerisen .profnav-btn::before -reunamaskin
         (mask-composite/origin), joka muuten maskaisi tämän pistekuvion pois */
      -webkit-mask: linear-gradient(115deg, #000 12%, transparent 78%);
      mask: linear-gradient(115deg, #000 12%, transparent 78%);
    }
    .profnav-btn.pk-kat::after {
      content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 0; pointer-events: none; padding: 0;
      /* nollaa geneerinen reunamaski, muuten valojuova maskautuisi 1px-renkaaksi */
      -webkit-mask: none; mask: none;
      background: linear-gradient(105deg, transparent 0%,
        color-mix(in srgb, var(--kc) 28%, transparent) 42%,
        color-mix(in srgb, var(--kc) 55%, #fff 40%) 50%,
        color-mix(in srgb, var(--kc) 28%, transparent) 58%, transparent 100%);
      transform: translateX(-160%) skewX(-18deg); opacity: 0;
    }
    .profnav-btn.pk-kat:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--kc) 62%, transparent);
      box-shadow: 0 14px 32px rgba(var(--t-shadow-ink),.42), 0 0 24px color-mix(in srgb, var(--kc) 28%, transparent);
    }
    .profnav-btn.pk-kat:hover .pk-symboli { opacity: .22; }
    .profnav-btn.pk-kat:hover::before { opacity: .16; }
    .profnav-btn.pk-kat:hover::after { animation: pkKatSheen 1.4s ease-out; }
    @keyframes pkKatSheen {
      0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
      18%  { opacity: .8; }
      100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
    }
    .profnav-btn.pk-kat:active { transform: translateY(-1px); }
    .profnav-btn.pk-kat.active {
      border-color: color-mix(in srgb, var(--kc) 75%, transparent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--kc) 40%, transparent),
                  0 0 26px color-mix(in srgb, var(--kc) 32%, transparent),
                  inset 0 0 22px color-mix(in srgb, var(--kc) 10%, transparent);
    }
    .profnav-btn.pk-kat.active .pk-symboli { opacity: .24; }
    @media (prefers-reduced-motion: reduce) {
      .profnav-btn.pk-kat, .pk-kat .pk-symboli,
      .profnav-btn.pk-kat::before, .profnav-btn.pk-kat::after { transition: none; animation: none; }
      .profnav-btn.pk-kat:hover { transform: none; }
    }
    .pk-kat .profnav-label {
      position: relative; z-index: 1;
      font-weight: 800; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
      color: var(--t-text-dim); transition: color .18s ease;
    }
    .profnav-btn.pk-kat:hover .profnav-label,
    .profnav-btn.pk-kat.active .profnav-label { color: var(--t-text); }
    @media (prefers-reduced-motion: reduce) { .pk-kat .profnav-label { transition: none; } }

    /* Submodal — sama pyöreys & leveys kuin päämodaalissa */
    #submodalBox {
      width: min(660px, 94vw);
      border-radius: 14px;
      border-color: color-mix(in srgb, var(--t-text-dim) 24%, var(--t-border));
    }
    #submodalTopbar { border-radius: 14px 14px 0 0; }
    #submodalContent { padding: 20px 22px 26px; }
    #submodalClose { border-radius: 10px; }
    #submodalClose:hover { border-color: var(--t-accent-alt); color: var(--t-accent-alt); }

    /* ── SCROLLBAR ──
       Kaksi kirjoitustapaa tarvitaan, eika toinen korvaa toista:
       ::-webkit-scrollbar on WebKit/Blink-kohtainen (Chrome, Edge, Safari) ja
       scrollbar-width/-color on standardi jota Firefox ymmartaa. Ilman
       standardirivia Firefox piirsi jarjestelman oman LEVEAN vaalean palkin,
       joten sama sivusto nayti eri selaimilla erilaiselta — havaittu
       rahoitusnakymasta 29.07.2026. Molemmat asetetaan :root-tasolla, koska
       scrollbar-width ja scrollbar-color PERIYTYVAT: yksi maarittely kattaa
       kaikki vieritettavat kontit (nakymien .«-kehys»-elementit, modaalit,
       taulukot) eika uusi kontti voi jaada vahingossa tyylittelemattä.
       Elementit jotka piilottavat palkkinsa (esim. .kytk-tabs-row) yliajavat
       taman omalla saannollaan. */
    :root { scrollbar-width: thin; scrollbar-color: var(--t-border) var(--t-bg-deep); }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--t-bg-deep); }
    ::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: 4px;
      border: 1px solid var(--t-bg-deep); }
    ::-webkit-scrollbar-thumb:hover { background: var(--t-accent); }
    ::-webkit-scrollbar-corner { background: var(--t-bg-deep); }

    /* ── FOOTER ── */
    footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 1.5rem;
      border-top: 1px solid var(--border);
      font-size: var(--fs-sm);
      letter-spacing: .12em;
      color: var(--text-muted);
    }
    footer strong { color: var(--accent); }

    @media (max-width: 600px) {
      main { padding: 1rem; gap: .85rem; }
      .detail-grid { grid-template-columns: 1fr; }
    }
    /* ── SIGNAALI RYHMÄPAINIKKEET ── */
    .signaali-ryhma-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      flex: 1;
      min-width: 160px;
      padding: 1.2rem .75rem 1.1rem;
      background: rgba(8,13,31,.9);
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Source Sans 3', sans-serif;
      text-transform: uppercase;
      letter-spacing: .13em;
      transition: transform .2s, box-shadow .2s, background .2s;
      overflow: hidden;
      border: 1px solid var(--t-border);
    }
    .signaali-ryhma-btn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--sr-color);
      box-shadow: 0 0 12px var(--sr-color);
      transition: height .2s;
    }
    .signaali-ryhma-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--sr-glow), transparent 70%);
      opacity: 0;
      transition: opacity .25s;
      pointer-events: none;
    }
    .signaali-ryhma-btn:hover::after,
    .signaali-ryhma-btn.active::after { opacity: 1; }
    .signaali-ryhma-btn:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px var(--sr-shadow), 0 0 40px var(--sr-glow), inset 0 0 20px var(--sr-glow);
      border-color: var(--sr-color);
    }
    .signaali-ryhma-btn.active {
      background: var(--sr-bg);
      box-shadow: 0 0 24px var(--sr-shadow), 0 0 60px var(--sr-glow);
      border-color: var(--sr-color);
    }
    .signaali-ryhma-btn.active::before { height: 4px; }
    .signaali-ryhma-label {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--sr-color);
      letter-spacing: .14em;
    }
    .signaali-ryhma-sub {
      font-size: var(--fs-sm);
      color: var(--t-text-dim);
      letter-spacing: .08em;
    }

    /* ── MEDIAPULSSI-RIVIT (moderni kortti flat-jakoviivan sijaan) ── */
    .media-item {
      padding: .75rem .95rem;
      margin-bottom: .5rem;
      border: 1px solid var(--t-border);
      border-left: 3px solid var(--acc-sig);
      border-radius: 8px;
      background: var(--t-bg-panel);
      transition: border-color .15s, transform .15s, box-shadow .15s;
    }
    .media-item:hover {
      border-color: color-mix(in srgb, var(--acc-sig) 53%, transparent);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--acc-sig) 15%, transparent);
    }

    /* RSS LISTA OVERLAY */
    #rssListaOverlay {
      position: fixed;
      inset: 0;
      background: rgba(var(--t-shadow-ink),.82);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 6300;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    #rssListaOverlay.open { opacity: 1; pointer-events: all; }
    #rssListaBox {
      background: var(--t-bg-panel);
      border: 1px solid var(--t-border);
      border-radius: 8px;
      width: min(600px, 96vw);
      max-height: 88vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 0 60px rgba(var(--t-shadow-ink),.8);
    }
  
    /* ── TEEMA-NAPPI — sama pillerimuoto kuin OPAS, hillitty ── */
    #teemaNappi {
      position:absolute; left:1.2rem; top:1.2rem; z-index:10;
      display:flex; align-items:center; gap:.5rem;
      padding:.45rem 1.1rem; min-height:44px;
      background: color-mix(in srgb, var(--t-bg-card) 75%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border:1px solid var(--t-border);
      border-radius:999px;
      cursor:pointer;
      font-family:'Source Sans 3',sans-serif; font-size:var(--fs-sm); letter-spacing:.15em;
      color:var(--t-text-muted);
      transition:border-color .2s, color .2s, box-shadow .2s;
    }
    #teemaNappi:hover {
      border-color: var(--t-accent);
      color: var(--t-accent);
      box-shadow: 0 0 14px color-mix(in srgb, var(--t-accent) 30%, transparent);
    }

    /* ── KIERTUE / OPAS ── */
    @keyframes kiertue-pulssi {
      0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-accent-alt) 70%, transparent); }
      50%      { box-shadow: 0 0 0 10px transparent; }
    }
    @keyframes kohde-pulssi {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,200,0,.8), 0 0 0 4px rgba(255,200,0,.4); }
      50%      { box-shadow: 0 0 0 12px rgba(255,200,0,0), 0 0 0 4px rgba(255,200,0,.4); }
    }
    #kiertuePainike {
      position:absolute; right:1.2rem; top:1.2rem;
      background: color-mix(in srgb, var(--t-bg-card) 75%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border:1px solid color-mix(in srgb, var(--t-accent-alt) 50%, transparent);
      border-radius:999px;
      padding:.45rem 1.1rem; cursor:pointer; min-height:44px;
      font-family:'Source Sans 3',sans-serif; font-size:var(--fs-sm); letter-spacing:.15em;
      color:var(--t-accent-alt); display:flex; align-items:center; gap:.5rem;
      transition:all .2s; z-index:10;
      animation: kiertue-pulssi 2.4s ease-in-out infinite;
    }
    #kiertuePainike:hover { background: color-mix(in srgb, var(--t-accent-alt) 12%, transparent); }
    #kiertuePainike.kayty { animation:none; opacity:.35; border-color:var(--t-border); color:var(--t-text-dim); }

    /* Spotlight tausta — tumma kalvo jossa "reikä" korostetun kohteen päällä
       (clip-path leikkaa reiän, joten kohde pysyy klikattavana riippumatta
       sen omasta z-indexistä/pinoutuskontekstista — ks. _kiertueAsetaAukko) */
    /* z-index 10100/10200: korkeampi kuin minkään sisältöpaneelin (esim.
       tilastotOverlay/ennätyksetOverlay/teemaOverlay ovat 9998–9999), jotta
       opas pysyy aina näkyvissä ja käytettävissä riippumatta siitä mikä
       näkymä on auki sen takana. */
    #kiertueTausta {
      display:none; position:fixed; inset:0; z-index:10100;
      background:rgba(1,3,9,.9); pointer-events:auto; cursor:pointer;
    }
    #kiertueTausta.auki { display:block; }

    /* Tooltip-kortti */
    #kiertueTooltip {
      display:none; position:fixed; z-index:10200;
      background:var(--t-bg-panel); border:1px solid rgba(255,200,0,.5);
      border-left:3px solid #ffc800; border-radius:10px;
      padding:1.25rem 1.5rem 1.25rem 1.5rem; width:min(360px,90vw);
      box-shadow:0 8px 32px rgba(var(--t-shadow-ink),.6);
      pointer-events:all;
      isolation:isolate;
    }
    #kiertueTooltip.auki { display:block; }

    /* Puhekuplan kärki (21.07.2026). Google Cloudin opaskiertue sitoo kuplan
       korostettuun kontrolliin hännällä; meillä sen teki pelkkä valokeila-aukko,
       joka ei kerro suuntaa kun ruudulla on useita korostuvia elementtejä.
       Kärki on 45° käännetty neliö: kaksi ulospäin osoittavaa reunaa saavat
       kuplan reunavärin, loput jäävät taustan alle. Sijainti reunalla tulee
       JS:stä (--kt-karki), koska kupla kiinnitetään ruudun reunoihin eikä
       keskitetty kärki osuisi ankkuriin. data-karki asetetaan VAIN kun kupla on
       ankkurin vieressä — dokatussa kulmassa ja mobiilin bottom sheetissä ei. */
    #kiertueTooltip[data-karki]::after {
      content:''; position:absolute; width:12px; height:12px;
      background:var(--t-bg-panel); border:1px solid rgba(255,200,0,.5);
      transform:rotate(45deg);
    }
    #kiertueTooltip[data-karki="ylos"]::after {   /* kupla ankkurin ALLA */
      top:-7px; left:var(--kt-karki,50%); margin-left:-6px;
      border-right:none; border-bottom:none;
    }
    #kiertueTooltip[data-karki="alas"]::after {   /* kupla ankkurin YLLÄ */
      bottom:-7px; left:var(--kt-karki,50%); margin-left:-6px;
      border-left:none; border-top:none;
    }
    #kiertueTooltip[data-karki="vasen"]::after {  /* kupla ankkurin OIKEALLA */
      left:-7px; top:var(--kt-karki,50%); margin-top:-6px;
      border-right:none; border-top:none;
    }
    #kiertueTooltip[data-karki="oikea"]::after {  /* kupla ankkurin VASEMMALLA */
      right:-7px; top:var(--kt-karki,50%); margin-top:-6px;
      border-left:none; border-bottom:none;
    }
    /* Vasen 3px korostusreuna peittäisi vasemmalle osoittavan kärjen tyven. */
    #kiertueTooltip[data-karki="vasen"] { border-left-width:1px; }
    @media (max-width: 640px) { #kiertueTooltip::after { display:none !important; } }
    .kt-vaihe { font-family:'Source Sans 3',sans-serif; font-size:var(--fs-md); letter-spacing:.12em; color:#ffc800; margin-bottom:.5rem; }
    .kt-otsikko { font-family:'Source Sans 3',sans-serif; font-size:var(--fs-lg); color:var(--t-text); margin-bottom:.6rem; }
    .kt-teksti { font-family:'Source Sans 3',sans-serif; font-size:var(--fs-lg); color:var(--t-text-muted); line-height:1.65; margin-bottom:1.1rem; }
    /* Osiovalikko lopetusruudussa (21.07.2026): kiertue on jaettu kuuteen
       lyhyeen osioon, ja tästä pääsee seuraavaan. Korvaa aiemman tekstimuurin,
       joka luetteli kaikki jäljelle jäävät näkymät yhdessä virkkeessä. */
    #ktOsiovalikko { grid-template-columns:1fr; gap:.4rem; margin:0 0 1rem; }
    .kt-osio { display:flex; flex-direction:column; gap:.15rem; width:100%;
      font-family:'Source Sans 3',sans-serif; text-align:left; cursor:pointer;
      background:rgba(255,200,0,.06); border:1px solid rgba(255,200,0,.28);
      border-radius:8px; padding:.5rem .7rem;
      transition:background .18s ease, border-color .18s ease; }
    .kt-osio:hover { background:rgba(255,200,0,.14); border-color:rgba(255,200,0,.55); }
    .kt-osio:focus-visible { outline:2px solid #ffc800; outline-offset:2px; }
    .kt-osio-nimi { font-size:var(--fs-md); color:#ffc800; letter-spacing:.03em; }
    .kt-osio-maara { color:var(--t-text-muted); font-size:var(--fs-sm); }
    .kt-osio-kuvaus { font-size:var(--fs-sm); color:var(--t-text-muted); line-height:1.4; }
    .kt-osio--kayty { background:none; border-color:var(--t-border); }
    .kt-osio--kayty .kt-osio-nimi { color:var(--t-text-muted); }

    .kt-napit { display:flex; justify-content:space-between; align-items:center; }
    .kt-progressi { display:flex; gap:4px; }
    .kt-piste { width:5px; height:5px; border-radius:50%; background:rgba(255,200,0,.25); }
    .kt-piste.aktiivinen { background:#ffc800; }

    /* Kohde-elementti korostetaan — EI pakoteta z-index/position: silloin
       toimii oikein myös modaalien/kiinteästi aseteltujen paneelien SISÄLLÄ
       (esim. profiilikortin painikkeet), koska reikä tummaan kalvoon leikataan
       clip-pathilla eikä kilpailulla pinoutusjärjestyksestä. */
    .kiertue-kohde {
      animation: kohde-pulssi 1.4s ease-in-out infinite !important;
      border-radius:8px;
      pointer-events:all !important;
    }

    /* Koko-näkymän askeleet (Voimasuhteet, Tilastot, Rahoitus, Mediapulssi,
       Lupausindeksi, Historian ennätykset): ankkuri on lähes koko paneeli,
       joten törmäystietoinen asemointi ei löydä vapaata kohtaa ja tooltip
       päätyisi keskelle sisältöä. Näille kiinnitetään aina sama, ennustettava
       kulma. !important voittaa JS:n asettamat inline-tyylit samasta syystä
       kuin mobiilin bottom sheet alla. */
    #kiertueTooltip.kt-dokattu {
      top:auto !important; left:auto !important;
      right:1.25rem !important; bottom:1.25rem !important;
      transform:none !important;
    }

    /* Mobiili: tooltip alareunan "bottom sheet" -paneelina, jotta se ei peitä
       koko näkymää eikä korostettua kohdetta. !important voittaa JS:n asettamat
       inline-tyylit (author-important > inline-normal), joten desktop-asemointi
       ei vuoda mobiiliin. */
    @media (max-width: 640px) {
      #kiertueTooltip {
        top:auto !important; left:0 !important; right:0 !important; bottom:0 !important;
        width:100% !important; transform:none !important;
        max-height:50dvh; overflow-y:auto;
        border-radius:14px 14px 0 0;
        border-left:1px solid rgba(255,200,0,.5); border-top:3px solid #ffc800;
        padding:1rem 1.1rem;
        box-shadow:0 -8px 32px rgba(var(--t-shadow-ink),.7);
      }
      /* Näppäimistövihjeet eivät ole relevantteja kosketusnäytöllä */
      #kiertueTooltip .kt-nappaimisto-vihje { display:none; }
    }

    /* ══════════════ YHTENÄINEN PAINIKEJÄRJESTELMÄ (.btn) ══════════════
       Peruskehys .btn + variantit (--primary/--secondary/--ghost/--danger)
       + koot (--sm/--md/--lg). Värit tulevat --btn-*-tokeneista (ks. :root),
       jotka periytyvät --t-*-teematokeneista — teemanvaihto päivittää
       painikkeet automaattisesti ilman, että itse elementteihin koskee. */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 600;
      letter-spacing: .03em;
      border-radius: var(--btn-radius-md);
      border: 1px solid transparent;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      white-space: nowrap;
      transition: background .15s, color .15s, border-color .15s, filter .15s, transform .1s;
    }
    /* Koot */
    .btn--sm { padding: .35rem .7rem;  font-size: var(--fs-sm); min-height: 2rem;    border-radius: var(--btn-radius-sm); }
    .btn--md { padding: .6rem 1.1rem;  font-size: var(--fs-md); min-height: 2.5rem; }
    .btn--lg { padding: .85rem 1.5rem; font-size: var(--fs-lg); min-height: 3rem;   border-radius: var(--btn-radius-lg); }
    .btn:not(.btn--sm):not(.btn--lg) { padding: .6rem 1.1rem; font-size: var(--fs-md); min-height: 2.5rem; }
    .btn--full { width: 100%; }

    /* Variantit */
    .btn--primary {
      background: var(--btn-primary-bg);
      border-color: var(--btn-primary-border);
      color: var(--btn-primary-text);
      box-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 45%, transparent), 0 6px 16px rgba(var(--t-shadow-ink),.35);
    }
    .btn--primary:hover:not(:disabled):not(.disabled) { background: var(--btn-primary-bg-hover); filter: brightness(1.06); box-shadow: 0 0 26px color-mix(in srgb, var(--t-accent) 60%, transparent), 0 8px 20px rgba(var(--t-shadow-ink),.4); }
    .btn--primary:active:not(:disabled):not(.disabled) { filter: brightness(.94); transform: translateY(1px); }

    .btn--secondary {
      background: var(--btn-secondary-bg);
      border-color: var(--btn-secondary-border);
      color: var(--btn-secondary-text);
    }
    .btn--secondary:hover:not(:disabled):not(.disabled) { border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-text-hover); }
    .btn--secondary:active:not(:disabled):not(.disabled) { transform: translateY(1px); }
    .btn--secondary.active {
      background: color-mix(in srgb, var(--t-accent) 10%, var(--btn-secondary-bg));
      border-color: var(--btn-secondary-border-hover);
      color: var(--t-accent);
    }

    .btn--ghost {
      background: transparent;
      border-color: transparent;
      color: var(--btn-ghost-text);
    }
    .btn--ghost:hover:not(:disabled):not(.disabled) { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-text-hover); }
    .btn--ghost:active:not(:disabled):not(.disabled) { transform: translateY(1px); }
    .btn--ghost.active { color: var(--t-accent); }

    .btn--danger {
      background: var(--btn-danger-bg);
      border-color: var(--btn-danger-border);
      color: var(--btn-danger-text);
    }
    .btn--danger:hover:not(:disabled):not(.disabled) { background: var(--btn-danger-bg-hover); color: var(--btn-danger-text-hover); }
    .btn--danger:active:not(:disabled):not(.disabled) { transform: translateY(1px); }

    /* Ruudunlukijalle näkyvä, visuaalisesti piilotettu sisältö (WCAG 1.3.1/2.4.6).
       display:none EI käy — se poistaisi myös saavutettavuuspuusta. */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    /* Tilat: focus-visible (näppäimistö), disabled */
    .btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
    /* A11y (14.07.2026): näkyvä fokusrengas näppäimistöllä nostetuille onclick-kontrolleille
       (role=button + tabindex=0, ks. app.js "A11y: näppäimistökäytettävyys"). WCAG 2.4.7. */
    [data-kbd-btn]:focus-visible {
      outline: 2px solid var(--t-accent, #2f6bff);
      outline-offset: 2px;
      border-radius: 6px;
    }
    .btn:disabled, .btn[disabled], .btn.disabled {
      opacity: var(--btn-disabled-opacity);
      cursor: not-allowed;
      filter: none;
      transform: none;
      pointer-events: none;
    }

    /* Yhtenäinen pyöristys kaikille napeille, jotka eivät kuulu yllä oleviin
       nimettyihin nappijärjestelmiin (mm. runsaasti JS:n generoimia napteja
       vanhoilla kulmikkailla inline-tyyleillä) — sama pyöreä, moderni ilme
       kuin uudella etusivulla, ilman että jokaista yksittäistä nappia
       tarvitsee muokata erikseen. */
    button:not(.btn):not(.nav-btn):not(.ui-tab-btn):not(.ui-close-btn):not(.ui-filter-btn):not(.lb-kausi-btn):not(.profnav-btn):not(.pp-nappi):not(#teemaNappi):not(#kiertuePainike):not(.card-action-vert) {
      border-radius: 10px !important;
    }

    @media (max-width: 560px) {
      .btn--sm { min-height: 2.25rem; }
      .btn--md, .btn:not(.btn--sm):not(.btn--lg) { min-height: 2.75rem; }
    }

    /* Yhtenäinen focus-visible myös olemassa oleville erikoispainiketyyleille (nav-btn, ui-tab-btn jne.),
       jotta näppäimistökäyttäjät näkevät fokuksen kauttaaltaan ilman visuaalisen identiteetin muuttamista. */
    .nav-btn:focus-visible,
    .hdr-btn:focus-visible,
    .ui-tab-btn:focus-visible,
    .ui-filter-btn:focus-visible,
    .ui-close-btn:focus-visible,
    .nav-dropdown-item:focus-visible,
    .nav-panel-close:focus-visible {
      outline: none;
      box-shadow: var(--btn-focus-ring);
    }

/* ===== PP-KORTTI — vertailukortti (nimiavaruus: .pp-kortti) ===== */
.pp-kortti{
  --bg-base:var(--t-bg-deep, #0a0e14);
  --bg-panel:var(--t-bg-panel, #0e131c);
  --bg-elevated:var(--t-bg-card, #131a26);
  --text-strong:var(--t-text, #f2f6ff);
  --text-body:var(--t-text-muted, #c2ccdc);
  --text-muted:var(--t-text-dim, #7f8ca3);
  --pp-accent:var(--t-accent, #00e5ff);
  --pp-accent-alt:var(--t-accent-alt, #ff007a);
  --puolue-a:var(--kok, #1565C0);
  --puolue-b:var(--vas, #880E4F);
  --risk-low:#3ec63e; --risk-mid:#f59e0b; --risk-high:#ff4d6d;
  --segment-off:rgba(var(--t-sheen-ink),.08);
  --pp-font-display:'Orbitron','Source Sans 3',sans-serif;
  --pp-font-ui:'Source Sans 3',sans-serif;
  max-width:900px; margin:0 auto;
  font-family:var(--pp-font-ui); color:var(--text-body);
  background-color:var(--bg-base);
  background-image:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb,var(--puolue-a) 16%,transparent) 0%, transparent 42%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb,var(--puolue-b) 16%,transparent) 0%, transparent 42%),
    linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,28px 28px,28px 28px;
  padding:clamp(14px,3vw,26px);
  border-radius:16px;
  -webkit-font-smoothing:antialiased;
}
.pp-kortti *{box-sizing:border-box;margin:0;padding:0;}
/* Pagehead-rivi (symboli + silmäotsikko + gradienttiotsikko + beta-pilleri) */
.pp-kortti .pp-banneri{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:0; margin-bottom:4px; background:none; border:none; box-shadow:none; text-align:left;
}
.pp-kortti .pp-pv-symbol{
  flex:0 0 auto; width:46px; height:46px;
  background:linear-gradient(135deg, var(--puolue-a), var(--puolue-b));
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3v18"/><path d="M7 3v18"/><path d="M3 8h4"/><path d="M3 16h4"/><path d="M17 8h4"/><path d="M17 16h4"/><circle cx="12" cy="12" r="3"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3v18"/><path d="M7 3v18"/><path d="M3 8h4"/><path d="M3 16h4"/><path d="M17 8h4"/><path d="M17 16h4"/><circle cx="12" cy="12" r="3"/></svg>') center/contain no-repeat;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--puolue-a) 40%, transparent));
}
.pp-kortti .pp-headtext{ display:flex; flex-direction:column; gap:4px; }
.pp-kortti .pp-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); font-weight:700;
}
.pp-kortti .pp-pagehead{
  font-family:var(--pp-font-display); font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-strong); font-size:clamp(20px,3.6vw,30px); line-height:1.1;
  background:linear-gradient(90deg, var(--puolue-a), var(--text-strong) 50%, var(--puolue-b));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(var(--t-sheen-ink),.10);
}
.pp-kortti .pp-beta{
  margin-left:auto; align-self:center; flex:0 0 auto;
  font-family:var(--pp-font-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); padding:5px 11px; border-radius:999px;
  border:1px solid rgba(var(--t-sheen-ink),.07); background:var(--bg-panel);
}
.pp-kortti .pp-areena{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: auto;
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.pp-kortti .pp-paneeli{
  --c:var(--puolue-a);
  background:linear-gradient(160deg, color-mix(in srgb,var(--c) 12%,var(--bg-panel)) 0%, var(--bg-panel) 55%);
  border:1px solid color-mix(in srgb,var(--c) 45%,var(--t-border)); border-radius:14px; padding:16px; text-align:center;
  box-shadow:0 24px 60px rgba(var(--t-shadow-ink),.4), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.pp-kortti .pp-paneeli.pp-oikea{ --c:var(--puolue-b); }
.pp-kortti .pp-kasvot{
  width:100%; height:min(24vh, 170px); border-radius:10px; overflow:hidden; position:relative;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--c) 40%,transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb,var(--c) 55%,#000), #0b0f16);
  border:1px solid color-mix(in srgb,var(--c) 50%,transparent);
  display:flex; align-items:center; justify-content:center;
}
.pp-kortti .pp-kasvot img{ width:100%; height:100%; object-fit:contain; object-position:center top; display:block; }
.pp-kortti .pp-siluetti{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; color:rgba(var(--t-sheen-ink),.32); }
.pp-kortti .pp-siluetti svg{ width:62%; height:auto; }
.pp-kortti .pp-nimi{
  font-family:var(--pp-font-display); font-weight:700; font-size:clamp(11px,2vw,15px);
  color:var(--text-strong); margin-top:8px; letter-spacing:.04em; line-height:1.25;
  word-break:break-word;
  text-shadow:0 0 14px color-mix(in srgb,var(--c) 75%,transparent);
}
.pp-kortti .pp-badge{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:8px; padding:5px 14px; border-radius:999px;
  background:var(--c); color:#fff; font-weight:700; letter-spacing:.05em;
  box-shadow:0 0 16px color-mix(in srgb,var(--c) 60%,transparent);
}
.pp-kortti .pp-badge .pp-lyhenne{ font-family:var(--pp-font-display); font-size:15px; }
.pp-kortti .pp-badge .pp-rooli{ font-size:11px; font-weight:600; opacity:.85; letter-spacing:.02em; }
.pp-kortti .pp-ovr-label{ margin-top:10px; font-size:11px; letter-spacing:.22em; color:var(--text-muted); font-weight:700; }
.pp-kortti .pp-ovr{
  font-family:var(--pp-font-display); font-weight:900; font-size:clamp(28px,5vw,48px); line-height:1;
  color:var(--c); text-shadow:0 0 22px color-mix(in srgb,var(--c) 80%,transparent);
}
.pp-kortti .pp-ovr-huom{ margin-top:4px; font-size:11px; letter-spacing:.12em; color:var(--text-muted); opacity:.8; }
.pp-kortti .pp-statsit{
  grid-column: 2;
  grid-row: 1;
  background:var(--bg-panel); border:1px solid rgba(var(--t-sheen-ink),.07);
  border-radius:14px; padding:10px 14px 14px;
  margin-top: 0;
  position:relative;   /* .pp-latausylite ankkuroituu tähän */
}
/* LATAUSYLITE (lisätty 28.07.2026): vertailudata haetaan verkosta, ja ennen
   tätä kortin kentät näyttivät "—" koko haun ajan ilman mitään merkkiä siitä
   että jotain tapahtuu. Ylite peittää statsirivit kunnes molempien edustajien
   haut ovat valmiit. Elementin luo ppAsetaLataustila(). */
/* Korkeus rajattu ~4 statriviin (kayttajan havainto 28.07.2026): inset:0
   venytti ylitteen koko statsilohkon mittaiseksi, jolloin se oli niin pitka
   etta keskitetty spinneri jai ruudun ulkopuolelle - kayttaja naki pelkan
   harmaan palkin ilman latauslogoa. Nyt ylite peittaa lohkon ylaosan ja
   spinneri on aina nakyvissa. */
.pp-latausylite{
  position:absolute; inset:0 0 auto; z-index:3; border-radius:14px;
  /* Kiintea korkeus, EI pelkka max-height: inset:0 0 auto tekee korkeudesta
     sisallon mittaisen, jolloin ylite kutistui 53 px:iin eika peittanyt
     statsirivejä lainkaan (mitattu). Nelja statrivia on noin 380 px. */
  height:min(100%, 380px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:color-mix(in srgb, var(--t-bg-panel,#0e131c) 88%, transparent);
  backdrop-filter:blur(2px);
  font-family:'Source Sans 3',sans-serif; font-size:var(--fs-sm,13px);
  letter-spacing:.1em; text-transform:uppercase; color:var(--t-text-muted,#7f8ca3);
}
/* Kortin muut osat himmenevät hienovaraisesti latauksen ajaksi, jotta
   keskeneräiset "—"-arvot eivät näytä lopullisilta lukemilta. */
.pp-kortti.pp-lataa .pp-etiikka{ opacity:.45; transition:opacity .2s ease; }
@media (prefers-reduced-motion: reduce){
  .pp-latausylite{ backdrop-filter:none; }
  .pp-kortti.pp-lataa .pp-etiikka{ transition:none; }
}
.pp-kortti .pp-stat-rivi{ padding:12px 0; border-bottom:1px solid rgba(var(--t-sheen-ink),.05); }
.pp-kortti .pp-stat-rivi:last-child{ border-bottom:none; }
/* Erikoisrivit (äänestysjakauma, vaalirahoitus) — JS-täytetty vapaamuotoinen
   sisältö kortin sivutuksessa (27.07.2026 remontti) */
.pp-kortti .pp-stat-erikois{ font-size:var(--fs-md); }
.pp-kortti .pp-stat-erikois:empty{ display:none !important; }
/* VAIHDA VERTAILTAVAT bannerissa: pienempi pilleri, ei kilpaile otsikon kanssa */
.pp-kortti .pp-vaihda-banneri{ flex:0 0 auto; font-size:11px; padding:7px 13px; }
.pp-kortti .pp-stat-top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.pp-kortti .pp-stat-arvo{ font-family:var(--pp-font-display); font-weight:700; font-size:clamp(18px,3.5vw,24px); }
.pp-kortti .pp-stat-arvo.pp-a{ color:var(--puolue-a); text-align:right; text-shadow:0 0 10px color-mix(in srgb,var(--puolue-a) 60%,transparent); }
.pp-kortti .pp-stat-arvo.pp-b{ color:var(--puolue-b); text-align:left;  text-shadow:0 0 10px color-mix(in srgb,var(--puolue-b) 60%,transparent); }
.pp-kortti .pp-stat-kesko{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:110px; }
.pp-kortti .pp-stat-kesko svg{ width:20px; height:20px; color:var(--text-muted); }
.pp-kortti .pp-stat-nimi{ font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--text-strong); text-align:center; line-height:1.25; }
.pp-kortti .pp-stat-sub{ font-size:11px; color:var(--text-muted); letter-spacing:.04em; }
.pp-kortti .pp-stat-palkki{ margin-top:8px; height:7px; border-radius:4px; background:var(--segment-off); display:flex; overflow:hidden; }
.pp-kortti .pp-stat-palkki .pp-puoli{ height:100%; display:flex; width:50%; }
.pp-kortti .pp-stat-palkki .pp-puoli.pp-a{ justify-content:flex-end; }
.pp-kortti .pp-stat-palkki .pp-puoli.pp-b{ justify-content:flex-start; }
.pp-kortti .pp-stat-palkki .pp-fill{ height:100%; border-radius:4px; }
.pp-kortti .pp-stat-palkki .pp-puoli.pp-a .pp-fill{ background:linear-gradient(90deg,transparent,var(--puolue-a)); box-shadow:0 0 8px var(--puolue-a); }
.pp-kortti .pp-stat-palkki .pp-puoli.pp-b .pp-fill{ background:linear-gradient(90deg,var(--puolue-b),transparent); box-shadow:0 0 8px var(--puolue-b); }
.pp-kortti .pp-etiikka{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pp-kortti .pp-etiikka-puoli{ background:var(--bg-panel); border:1px solid rgba(var(--t-sheen-ink),.07); border-radius:12px; padding:12px 14px; }
.pp-kortti .pp-etiikka-otsikko{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.pp-kortti .pp-etiikka-otsikko .pp-ot{ font-size:11px; letter-spacing:.18em; font-weight:700; color:var(--text-muted); }
.pp-kortti .pp-etiikka-taso{ display:flex; align-items:center; gap:7px; font-family:var(--pp-font-display); font-weight:700; font-size:15px; }
.pp-kortti .pp-etiikka-taso svg{ width:18px; height:18px; }
.pp-kortti .pp-taso-matala{ color:var(--risk-low); }    .pp-kortti .pp-taso-matala svg{ color:var(--risk-low); }
.pp-kortti .pp-taso-kohonnut{ color:var(--risk-mid); }   .pp-kortti .pp-taso-kohonnut svg{ color:var(--risk-mid); }
.pp-kortti .pp-segmentit{ display:flex; gap:5px; margin-top:10px; }
.pp-kortti .pp-segmentit .pp-seg{ flex:1; height:9px; border-radius:3px; background:var(--segment-off); }
.pp-kortti .pp-seg.pp-on-low{ background:var(--risk-low); box-shadow:0 0 8px var(--risk-low); }
.pp-kortti .pp-seg.pp-on-mid{ background:var(--risk-mid); box-shadow:0 0 8px var(--risk-mid); }
.pp-kortti .pp-seg.pp-on-high{ background:var(--risk-high); box-shadow:0 0 8px var(--risk-high); }
/* Media-signaali: informatiivinen rivi etiikkasegmenttien alla (ei pisteytetä).
   Ei .pp-kortti-scopea — sama rivi renderöityy myös profiilimodaalissa. */
.pp-media-sig{ margin-top:7px; font-size:11.5px; color:var(--t-text-muted,#7c8aa0);
  cursor:help; line-height:1.4; }
.pp-media-sig .pp-media-sig-note{ font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; opacity:.75; border:1px solid currentColor; border-radius:4px;
  padding:0 5px; margin-left:4px; white-space:nowrap; }
.pp-kortti .pp-toiminnot{ margin-top:16px; text-align:center; }
.pp-kortti .pp-slogan{
  font-family:var(--pp-font-display); font-weight:700; letter-spacing:.22em; font-size:14px; color:var(--text-strong);
  background:linear-gradient(90deg,var(--pp-accent),var(--t-text-bright,#fff),var(--pp-accent-alt));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pp-kortti .pp-napit{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.pp-kortti .pp-nappi{
  --ui-tab-color:var(--pp-accent, var(--t-accent));
  position:relative; overflow:hidden; isolation:isolate; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  background:
    linear-gradient(var(--t-bg-card),var(--t-bg-card)) padding-box,
    linear-gradient(150deg, color-mix(in srgb,var(--ui-tab-color) 30%,transparent), rgba(var(--t-sheen-ink),.05) 60%) border-box;
  font-family:'Source Sans 3', sans-serif; font-weight:700; font-size:var(--fs-sm); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); white-space:nowrap;
  transition:transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.pp-kortti .pp-nappi svg{ width:15px; height:15px; position:relative; z-index:2; flex-shrink:0; color:currentColor; }
.pp-kortti .pp-nappi span{ position:relative; z-index:2; }
.pp-kortti .pp-nappi::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ui-tab-color) 65%,transparent) 1px, transparent 1.5px);
  background-size:9px 9px; background-position:center; opacity:0; transition:opacity .28s ease;
  -webkit-mask:linear-gradient(115deg,#000 12%,transparent 78%); mask:linear-gradient(115deg,#000 12%,transparent 78%);
}
.pp-kortti .pp-nappi::after{
  content:''; position:absolute; top:0; left:0; height:100%; width:55%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%,
    color-mix(in srgb,var(--ui-tab-color) 30%,transparent) 42%,
    color-mix(in srgb,var(--ui-tab-color) 55%,#fff 40%) 50%,
    color-mix(in srgb,var(--ui-tab-color) 30%,transparent) 58%, transparent 100%);
  transform:translateX(-160%) skewX(-18deg); opacity:0;
}
.pp-kortti .pp-nappi:hover{ transform:translateY(-2px); color:var(--text-strong);
  box-shadow:0 10px 26px rgba(var(--t-shadow-ink),.45), 0 0 22px color-mix(in srgb,var(--ui-tab-color) 32%,transparent); }
.pp-kortti .pp-nappi:hover::before{ opacity:.18; }
.pp-kortti .pp-nappi:hover::after{ animation:ppUiSheen 1.4s ease-out; }
@keyframes ppUiSheen{ 0%{transform:translateX(-160%) skewX(-18deg);opacity:0;} 18%{opacity:.85;} 100%{transform:translateX(230%) skewX(-18deg);opacity:0;} }
.pp-kortti .pp-nappi:focus-visible{ outline:2px solid var(--ui-tab-color); outline-offset:2px; }
.pp-kortti .pp-nappi:active{ transform:translateY(0); }
.pp-kortti .pp-nappi.active{ color:var(--text-strong);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-tab-color) 45%,transparent), 0 0 20px color-mix(in srgb,var(--ui-tab-color) 30%,transparent); }
.pp-kortti .pp-nappi.active::before{ opacity:.14; }
@media (prefers-reduced-motion: reduce){
  .pp-kortti .pp-nappi{ transition:none; }
  .pp-kortti .pp-nappi:hover{ transform:none; }
  .pp-kortti .pp-nappi:hover::after{ animation:none; opacity:0; }
}
.pp-kortti .pp-paneeli[style*="cursor"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 64px rgba(var(--t-shadow-ink),.48), inset 0 1px 0 rgba(var(--t-sheen-ink),.05),
              0 0 26px color-mix(in srgb, var(--c) 26%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .pp-kortti .pp-paneeli, .pp-kortti .pp-paneeli[style*="cursor"]:hover { transition: none; transform: none; }
}
/* VERTAILUVALINTATILA: korosta vertaile-napit */
body.vert-valinta-aktiivinen .card-action-vert {
  font-size: var(--fs-md);
  padding: .5rem 1.1rem;
  background: color-mix(in srgb, var(--t-accent-alt) 16%, transparent);
  border-color: var(--t-accent-alt);
  box-shadow: 0 0 14px color-mix(in srgb, var(--t-accent-alt) 40%, transparent);
  animation: vert-pulssi 1.4s ease-in-out infinite;
}
body.vert-valinta-aktiivinen .card-action-avaa { opacity: .4; }

@media (max-width:600px){
  .pp-kortti .pp-areena{ grid-template-columns:1fr; }
  .pp-kortti .pp-statsit{ grid-column:1; grid-row:auto; }
  .pp-kortti .pp-etiikka{ grid-template-columns:1fr; }
  .pp-kortti .pp-kasvot{ height: min(18vh, 130px); }
  .pp-kortti .pp-stat-kesko{ min-width:96px; }
  .pp-kortti .pp-stat-nimi{ font-size:11px; letter-spacing:.08em; }
}
/* pp-kortti piilotettu kun ei vertailtavia */
#ppKorttiWrap{ display:block; margin-bottom:1.5rem; }

/* VERTAILUN TYHJÄ/VAJAA VALINTATILA (.pp-valintakesken) — lisätään JS:llä
   (renderPPKorttiPerustiedot) kun < 2 edustajaa valittu. Tausta (käyttäjän
   havainto 13.07.2026): mobiilissa paneeli B (2. valintaslotti) renderöityi
   ~1000px paneeli A:n alapuolelle stat-vertailurakenteen taakse → käyttäjä ei
   nähnyt että vertailuun valitaan KAKSI edustajaa, eikä mistä toinen valitaan.
   Tyhjässä tilassa: piilota merkityksetön stat-/etiikka-/toimintorakenne ja
   näytä molemmat valintaslotit vierekkäin ylhäällä + ohje + numerointi (1./2.).
   Vaikuttaa VAIN vertailun tyhjään tilaan (ei täytettyyn korttiin, ei .pk-solo-
   poliitikkokorttiin). Spesifisyys (3 luokkaa) voittaa mobiilin .pp-areena-
   säännön (2 luokkaa). */
.pp-kortti.pp-valintakesken .pp-statsit,
.pp-kortti.pp-valintakesken .pp-etiikka,
.pp-kortti.pp-valintakesken .pp-toiminnot{ display:none; }
/* minmax(0,1fr) EI 1fr (korjattu 20.07.2026): 1fr on oikeasti minmax(auto,1fr),
   jolloin paneelien min-content (175px kumpikin) piti sarakkeet leveinä ja
   grid levisi 365px:iin 282px:n kontissa = 83px ylivuoto 375px:n mobiilissa.
   Ks. CLAUDE.md, grid-sarakkeiden min-content-lattia. */
.pp-kortti.pp-valintakesken .pp-areena{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.pp-kortti.pp-valintakesken .pp-paneeli{ min-width:0; }
.pp-kortti.pp-valintakesken .pp-paneeli *{ overflow-wrap:anywhere; }
.pp-kortti.pp-valintakesken .pp-areena::before{
  content:'Valitse kaksi edustajaa — napauta kumpaakin ruutua';
  grid-column:1 / -1; text-align:center;
  font-family:'Source Sans 3',sans-serif; font-weight:700;
  font-size:var(--fs-sm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); line-height:1.5; padding:2px 0 8px;
}
.pp-kortti.pp-valintakesken .pp-paneeli{ cursor:pointer; }

/* ===== POLIITIKKOKORTTI — yhden edustajan pelaajakortti (.pk-solo) =====
   Jakaa .pp-kortti-kromin (teemaseuraava tausta, banneri, paneeli, etiikka,
   napit). Erot vertailukorttiin: yksi paneeli, yksisuuntaiset statsipalkit
   kiinteällä asteikolla — väri tulee edustajan puolueesta (--c-solo).
   Huom. profiilikortin .pk-kentta/.pk-nimi ym. ovat ERI nimiavaruutta;
   tämän osion luokat eivät leikkaa niiden kanssa. */
.pk-tyokalut{ max-width:560px; margin:0 auto 12px; display:flex; gap:8px; align-items:center; position:relative; }
.pk-tyokalut input{ flex:1 1 auto; min-width:0; background:var(--t-bg-card); border:1px solid var(--t-border); border-radius:999px;
  color:var(--t-text); font-family:'Source Sans 3',sans-serif; font-size:var(--fs-md); padding:.55rem 1rem; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.pk-tyokalut input:focus{ border-color:var(--t-accent); box-shadow:0 0 10px color-mix(in srgb,var(--t-accent) 30%,transparent); }
.pk-nuoli{ flex:0 0 auto; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; cursor:pointer; background:var(--t-bg-card); border:1px solid var(--t-border); color:var(--t-text-muted);
  transition:border-color .15s, color .15s, box-shadow .15s; }
.pk-nuoli:hover{ border-color:var(--t-accent); color:var(--t-text); box-shadow:0 0 12px color-mix(in srgb,var(--t-accent) 35%,transparent); }
.pk-nuoli:focus-visible{ outline:2px solid var(--t-accent); outline-offset:2px; }
.pk-nuoli svg{ width:17px; height:17px; }
.pk-hakulista{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--t-bg-panel);
  border:1px solid var(--t-border); border-radius:12px; max-height:min(340px,50vh); overflow-y:auto;
  box-shadow:0 14px 34px rgba(var(--t-shadow-ink),.5); }
.pk-hakulista:empty{ display:none; }
.pk-hakurivi{ display:flex; align-items:center; gap:.7rem; padding:.5rem .9rem; cursor:pointer;
  border-bottom:1px solid rgba(var(--t-sheen-ink),.06); transition:background .1s; }
.pk-hakurivi:last-child{ border-bottom:none; }
.pk-hakurivi:hover{ background:rgba(var(--t-sheen-ink),.05); }
.pp-kortti.pk-solo{ max-width:560px; --c-solo:var(--puolue-a); }
.pk-solo .pk-runko{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }
/* Soolokortissa on tilaa: isompi kuva, nimi ja indeksi kuin kaksipaneelisessa vertailussa */
.pk-solo .pp-kasvot{ height:auto; aspect-ratio:1/1; max-height:300px; }
.pk-solo .pp-nimi{ font-size:clamp(18px,5vw,30px); margin-top:12px; }
.pk-solo .pp-ovr{ font-size:clamp(38px,8vw,60px); }
.pk-solo .pk-vaalipiiri{ margin-top:8px; font-size:11px; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase; }
/* Tyhjatila kortissa kun edustajalla ei ole aanestys-/aktiivisuusdataa
   (toimikausi keskeytynyt). Ilman tata viisi stat-rivia nayttaa "—" ilman
   selitysta. Fonttikoko 12 px, ei 11 px kuten sisarriveilla: alle 12 px on
   omalla listallamme mobiilivikana (PAATOS-021 A), eika uutta velkaa lisata. */
.pk-solo .pk-eidataa{ margin:10px 0 0; padding:9px 12px; font-size:12px; line-height:1.5;
  color:var(--text-muted); background:rgba(var(--t-sheen-ink),.04);
  border:1px solid rgba(var(--t-sheen-ink),.08); border-radius:8px;
  overflow-wrap:anywhere; }
.pk-solo .pk-stat-rivi{ padding:11px 0; border-bottom:1px solid rgba(var(--t-sheen-ink),.05); }
.pk-solo .pk-stat-rivi:last-child{ border-bottom:none; }
.pk-solo .pk-stat-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pk-solo .pk-stat-nimi{ display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--text-strong); min-width:0; flex-wrap:wrap; }
.pk-solo .pk-stat-nimi svg{ width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.pk-solo .pk-stat-sub{ font-size:11px; color:var(--text-muted); letter-spacing:.04em; font-weight:400; }
.pk-solo .pk-stat-arvo{ font-family:var(--pp-font-display); font-weight:700; font-size:clamp(16px,3vw,21px); color:var(--c-solo);
  text-shadow:0 0 10px color-mix(in srgb,var(--c-solo) 60%,transparent); white-space:nowrap; flex-shrink:0; }
.pk-solo .pk-stat-palkki{ margin-top:7px; height:7px; border-radius:4px; background:var(--segment-off); overflow:hidden; }
.pk-solo .pk-fill{ height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--c-solo) 30%,transparent), var(--c-solo));
  box-shadow:0 0 8px var(--c-solo); transition:width .5s ease; }
.pk-solo .pp-etiikka{ grid-template-columns:1fr; }
@media (max-width:600px){
  .pk-solo .pp-kasvot{ height:auto; max-height:240px; }
}

/* Footer etusivun sisältövirran lopussa (19.07.2026: oli kelluva
   position:fixed-badge vasemmassa alanurkassa — käyttäjän linjaus: footerin
   kuuluu näkyä vain sivun alareunassa, ei seurata selaamista). */
/* Footer ankkuroidaan sivun ALALAITAAN (käyttäjän linjaus 21.07.2026:
   "Tämä voisi olla aivan sivun alalaidassa"). Aiemmin se leijui heti
   moduulikorttien perässä ja alle jäi ~125 px tyhjää.

   min-height + flex eikä position:fixed — footerin ei pidä seurata
   selaamista (käyttäjän linjaus 19.07.2026), vaan istua sivun pohjalla.
   `flex:1 0 auto` säilyttää normaalin vierityksen kun sisältöä on enemmän
   kuin ruutuun mahtuu. dvh eikä vh: mobiiliselaimen osoitepalkki.

   21.07.2026: tehtiin VAIN leveillä ruuduilla, koska sama temppu body/header-
   tasolla rikkoi mitatusti kapealla ruudulla — `body`/`header` flex-
   konttina sai `.et-tools`- ja `.ghost`-elementit mitoittumaan max-contentin
   mukaan (229–501 px vaakaylivuoto, sama min-content-lattian ansa jonka
   CLAUDE.md dokumentoi).

   02.08.2026 (käyttäjän huomio): kapealla ruudulla footer kelluu heti
   moduulikorttien perässä, häiritsevän lähellä niitä, ja alle jää
   vaihteleva määrä tyhjää (mitattu 198 px 375×812:lla) — huonompi kuin
   21.07. mittaushetkellä (158 px), koska sisältö on muuttunut. Ratkaisu:
   SAMA flex+margin-top:auto -tekniikka myös ≤640px, mutta skaalattu vain
   `#etusivuUusi`:lle — body/header EIVÄT muutu flex-konteiksi, joten
   21.07. bugi ei toistu. min-height lasketaan `100dvh`:sta miinus 133px
   (pp-topbarin renderöity korkeus ~61px + headerin mobiili-padding-top
   4.5rem/72px, ks. rivi ~1315 — molemmat kiinteitä tässä breakpointissä).
   `.ticker` tarvitsi oman korjauksen samasta min-content-lattiasta: sen
   omat auto-marginit (keskitystä varten) ohittavat flexin oletusarvoisen
   `align-items:stretch`-venytyksen, joten ilman `width:100%`:aa se kutistuu
   uutisotsikon max-content-leveyteen ja työntää sivun vaakaan. */
@media (min-width:900px){
  body{ min-height:100dvh; display:flex; flex-direction:column; }
  body > header{ flex:1 0 auto; display:flex; flex-direction:column; }
  #etusivuUusi{ flex:1 0 auto; display:flex; flex-direction:column; width:100%; }
}
@media (max-width:640px){
  #etusivuUusi{ display:flex; flex-direction:column; min-height:calc(100dvh - 133px); }
  #etusivuUusi > .ticker{ width:100%; min-width:0; }
}

#ppCopyrightBadge{
  display:block; text-align:center; max-width:920px;
  font-family:'Source Sans 3',sans-serif; font-size:11px; letter-spacing:.03em;
  color:var(--t-text-dim,#6b7385); opacity:.75;
  /* Kapealla ruudulla footer on tavallisessa virrassa (34px väli); leveällä
     ruudulla margin-top:auto työntää sen alalaitaan — ks. media-lohko yllä. */
  margin:34px auto 0;
  padding:10px 16px 18px; border-top:1px solid rgba(148,163,184,.14);
}
/* Katselutila-pilleri (vasen alanurkka) renderöidään VAIN localhostilla
   (premium.js), joten sen vaatima iso alatila varataan vain silloin —
   ei kaikille käyttäjille. Luokan asettaa premium.js pilleriä luodessaan. */
body.pp-kehityspilleri #ppCopyrightBadge{ padding-bottom:96px; }
@media (min-width:900px){
  #ppCopyrightBadge{ margin-top:auto; }
}
@media (max-width:640px){
  #ppCopyrightBadge{ margin-top:auto; }
}
#ppCopyrightBadge a{ cursor:pointer; }

/* Täysistunto-LIVE-pilleri (kelluva, näkyy vain kun istunto käynnissä).
   Oikeassa alanurkassa — vasen alanurkka on #ppCopyrightBadgen käytössä.
   z-index 60 = näkymien/drawerien (5000+) alla, joten näkyy vain etusivulla. */
#taysistuntoLivePilleri{
  position:fixed; right:12px; bottom:10px; z-index:60;
  display:none; align-items:center; gap:8px;
  font-family:'Source Sans 3',sans-serif; font-size:13px; font-weight:600;
  color:var(--t-text,#e8ecf3); cursor:pointer;
  background:var(--t-bg-card,#141a24); backdrop-filter:blur(6px);
  border:1px solid rgba(220,38,38,.55); border-radius:999px;
  padding:8px 14px 8px 11px;
  box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 14px rgba(220,38,38,.22);
  transition:transform .15s ease, box-shadow .2s ease;
}
#taysistuntoLivePilleri:hover,
#taysistuntoLivePilleri:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(0,0,0,.42), 0 0 20px rgba(220,38,38,.4);
  outline:2px solid rgba(220,38,38,.7); outline-offset:2px;
}
#taysistuntoLivePilleri .tlp-pallo{
  width:9px; height:9px; border-radius:50%; background:#dc2626; flex:0 0 auto;
  box-shadow:0 0 8px #dc2626; animation:tlpPulssi 1.6s ease-in-out infinite;
}
#taysistuntoLivePilleri .tlp-tag{
  font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff;
  background:#dc2626; padding:1px 6px; border-radius:4px;
}
@keyframes tlpPulssi{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.72)} }
@media (prefers-reduced-motion:reduce){
  #taysistuntoLivePilleri .tlp-pallo{ animation:none; }
}
/* (19.07.2026: badge ei enää kellu alanurkassa — pilleri saa pitää
   normaalin paikkansa myös kapealla; aiempi bottom:60px-väistö poistettu.) */
/* Hyvin kapealla: jätä pallo + LIVE-tag, piilota pitkä teksti (kompakti nurkkamerkki). */
@media (max-width:420px){
  #taysistuntoLivePilleri{ font-size:12px; padding:7px 11px 7px 9px; }
  #taysistuntoLivePilleri .tlp-lbl{ display:none; }
}

/* ==================================================================
   MEDIAPULSSI (signaali) — modernisoitu näkymä
   Sama tokeni-pohjainen suunnittelukieli kuin Vertaile/landing:
   --t-* teemamuuttujat + signaaliväri #ff4d6d, Fraunces + Source Sans 3.
   ================================================================== */
#signaalinNakyma{
  --sig:var(--acc-sig);
  --sig-media:#ff4d6d; --sig-eduskunta:#3ec63e; --sig-valtioneuvosto:#f5c400;
  --sig-kortti2:color-mix(in srgb, var(--t-bg-card) 82%, var(--t-text-dim));
  --sig-reuna2:color-mix(in srgb, var(--t-border) 55%, var(--t-text-dim));
}
/* .sig-wrap: leveys tulee jaetusta 1040px-säännöstä tiedoston lopusta
   (otsikko täysleveänä vasemmalla, sisältö keskitettynä). */

/* ── Yläotsikko (Landing-ilme, ks. .lnv-akt/.lnv-kyt) ── */
.lnv-sig .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-sig .sig-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--sig);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--sig) 55%,transparent));}
.lnv-sig .sig-symbol svg{width:100%;height:100%;display:block;}

/* ── Tilastoraita ── */
.sig-tilastot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.sig-tstat{
  flex:1;min-width:150px;background:var(--t-bg-card);border:1px solid var(--t-border);
  border-radius:10px;padding:12px 14px;position:relative;overflow:hidden;
}
.sig-tstat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--sig),transparent 60%);opacity:.7;}
.sig-tstat .sig-lab{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--t-text-dim);font-weight:600;position:relative;z-index:1;}
.sig-tstat .sig-val{font-family:'Orbitron',sans-serif;font-weight:900;font-size:24px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-text);margin-top:3px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;position:relative;z-index:1;}
.sig-badge-mini{display:inline-block;padding:1px 9px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;font-family:'Source Sans 3',sans-serif;}
/* FIX 3: RYHMA_IKONIT-emojien tilalle line-art SVG, väritetty RYHMA_VARIT-varein */
.sig-gicon-mini{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;vertical-align:-2px;}
.sig-gicon-mini svg{width:100%;height:100%;display:block;}
/* Taustamotiivi: hiljainen taustaikoni joka syttyy hoverissa, sama mekaniikka kuin .lnv-*-nakymissa */
.lnv-sig .card-hover{--gl:var(--sig);}
.sig-tstat .motif,.sig-feed-panel .motif{position:absolute;right:-18px;top:50%;transform:translateY(-50%) rotate(-8deg);
  width:130px;height:130px;color:var(--gl,var(--sig));opacity:.05;pointer-events:none;
  transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--sig)) 60%,transparent));}
.sig-feed-panel .motif{width:210px;height:210px;right:-26px;}
.sig-tstat .motif svg,.sig-feed-panel .motif svg{width:100%;height:100%;display:block;}
.sig-tstat.card-hover:hover .motif,.sig-feed-panel.card-hover:hover .motif{opacity:.42;}

/* ── Viikon kuumat aiheet (aiheseuranta.json) ── */
.sig-kuumat{margin-top:14px;}
.kuumat-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.kuumat-title{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sig);}
.kuumat-sub{font-size:11.5px;color:var(--t-text-muted);}
.kuumat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:10px;}
.kuumat-aihe{
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:10px;
  padding:12px 14px;position:relative;overflow:hidden;min-width:0;
}
.kuumat-aihe::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#f59e0b,transparent 60%);opacity:.75;}
.kuumat-aihe .ka-nimi{font-weight:700;font-size:14.5px;color:var(--t-text-bright,#f1f5f9);margin-bottom:3px;}
.kuumat-aihe .ka-rivi{font-size:13px;color:var(--t-text-muted);}
.kuumat-aihe .ka-rivi b{color:var(--t-text-bright,#f1f5f9);}
.ka-trendi{font-weight:700;font-size:12px;}
.ka-trendi.ylos{color:#f87171;}   /* kohun kasvu = punainen */
.ka-trendi.alas{color:#34d399;}   /* hiipuminen = vihreä */
.ka-kriisi{display:flex;align-items:center;gap:8px;margin:8px 0 2px;}
.ka-kriisi .ka-lab{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-text-muted);white-space:nowrap;}
.ka-mittari{flex:1;height:6px;border-radius:999px;background:var(--t-border);overflow:hidden;min-width:40px;}
.ka-mittari > div{height:100%;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#ef4444);}
.ka-kriisi .ka-arvo{font-size:11.5px;font-weight:700;color:var(--t-text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.kuumat-aihe .ka-karjet{font-size:12px;color:var(--t-text-muted);margin-top:4px;
  overflow-wrap:anywhere;}
/* Kortti avaa aiheen erittelymodaalin (kaikki artikkelit + mainitut edustajat).
   Nuoli otsikon perassa on kosketuslaitteen affordanssi — hover ei nay siella. */
.kuumat-aihe.klik{cursor:pointer;transition:border-color .18s ease,transform .18s ease;}
.kuumat-aihe.klik:hover{border-color:color-mix(in srgb,#f59e0b 45%,var(--t-border));transform:translateY(-2px);}
.kuumat-aihe.klik:focus-visible{outline:2px solid #f59e0b;outline-offset:2px;}
.kuumat-aihe .ka-avaa{color:#f59e0b;font-weight:700;margin-left:6px;}

/* Aiheen erittelymodaali (.lb-box.ka-modaali) */
.ka-modaali .ka-osio{display:block;margin:22px 0 8px;}
.ka-modaali .ka-lista{display:flex;flex-direction:column;gap:7px;}
.ka-modaali .ka-hlo{display:grid;grid-template-columns:minmax(0,1fr) 96px 42px;align-items:center;gap:12px;
  padding:6px 8px;margin:0 -8px;border-radius:9px;cursor:pointer;transition:background .16s ease;}
.ka-modaali .ka-hlo:hover{background:rgba(var(--t-sheen-ink),.05);}
.ka-modaali .ka-hlo:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px;}
.ka-modaali .ka-hlo-nimi{font-size:13px;color:var(--t-text-dim);min-width:0;overflow-wrap:anywhere;}
.ka-modaali .ka-hlo-palkki{height:6px;border-radius:999px;background:var(--t-border);overflow:hidden;}
.ka-modaali .ka-hlo-palkki > div{height:100%;border-radius:999px;}
.ka-modaali .ka-hlo-lkm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12.5px;
  color:var(--t-text);text-align:right;font-variant-numeric:tabular-nums;}
.ka-modaali .ka-artlista{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
.ka-modaali .ka-art{display:block;text-decoration:none;background:var(--t-bg-card);
  border:1px solid var(--t-border);border-radius:10px;padding:10px 12px;transition:border-color .16s ease;}
a.ka-art:hover{border-color:color-mix(in srgb,#f59e0b 45%,var(--t-border));}
.ka-modaali .ka-art-otsikko{font-size:13px;color:var(--t-text);line-height:1.4;overflow-wrap:anywhere;}
.ka-modaali .ka-art-meta{font-size:11.5px;color:var(--t-text-muted);margin-top:3px;overflow-wrap:anywhere;}
.ka-modaali .ka-tyhja{font-size:13px;color:var(--t-text-muted);}
.ka-modaali .ka-lahteet{font-size:12px;color:var(--t-text-muted);margin-top:14px;overflow-wrap:anywhere;}
.ka-modaali .ka-lahteet b{color:var(--t-text-dim);}
@media (max-width:560px){
  .ka-modaali .ka-hlo{grid-template-columns:minmax(0,1fr) 60px 38px;gap:8px;}
}
@media (max-width:560px){
  .kuumat-list{grid-template-columns:1fr;}
}

/* ── Alarivi: Lähderyhmät + suodattimet vierekkäin (29.07.2026) ──
   Mitattu ennen muutosta (valtavahti.fi, 1520 px): Lähderyhmät-nappi 300 px
   yksin 1040 px:n rivilla (740 px tyhjaa), suodattimet omalla rivillaan ja
   teemavalitsin viela kolmannella. Kolme riviä 343 px → kaksi riviä.
   Suodattimien selectit tehdaan joustaviksi (flex + min-width:0) sen sijaan
   etta ne kapenisivat kiinteaan mittaan: kiinteilla arvoilla rivi mahtui
   vain 13 px:n marginaalilla ja olisi rivittynyt fonttimetriikan muuttuessa. */
.sig-alarivi{display:flex;gap:12px;align-items:stretch;margin-top:14px;}
.sig-alarivi > .sig-kanavat{flex:0 0 300px;margin-top:0;}
.sig-alarivi > .sig-suodattimet{flex:1 1 auto;min-width:0;margin-top:0;flex-wrap:nowrap;}
.sig-alarivi .sig-selecti{flex:1 1 0;min-width:0;}
.sig-alarivi .sig-selecti select{min-width:0;width:100%;}
.sig-alarivi .sig-tyhjenna{flex:0 0 auto;white-space:nowrap;}
.sig-alarivi .sig-teemat{flex:1 1 0;min-width:0;}
.sig-alarivi .sig-teema-select{width:100%;min-width:0;}
/* Kapealla ruudulla takaisin allekkain — 980 px, ei 720 px: valissa rivi on
   jo niin ahdas etta neljä kontrollia + 300 px:n nappi puristuvat. */
@media (max-width:980px){
  .sig-alarivi{flex-wrap:wrap;}
  .sig-alarivi > .sig-kanavat{flex:1 1 100%;}
  .sig-alarivi > .sig-suodattimet{flex:1 1 100%;flex-wrap:wrap;}
}
/* Kapea puhelin: kontrollit rivittyvat, EIVAT purista.
   `flex:1 1 0` kutistaa lapsen nollaan asti, joten 375 px:lla kolme valikkoa
   puristui 48 px:iin ja teksti katkesi. Sama vika oli jo tuotannossa ennen
   tata muutosta (mitattu valtavahti.fi 29.07.2026: valikot 75 px, sisalto
   110 px) — teemavalitsimen nousu samalle riville vain teki siita nakyvan.
   Basis 120 px eika 140 px: 375 px:lla suodatinpalkin sisaleveys on 285 px,
   ja 140+140+9 = 289 ylittaa sen niukasti -> jokainen kontrolli sai oman
   rivinsa ja palkki kasvoi 165 px:iin. 120+120+9 = 249 mahtuu, jolloin
   valikot ovat 138 px rinnakkain (sisalto 110-112 px mahtuu) ja Tyhjenna +
   teema jakavat toisen rivin. Mitattu, ei arvattu. */
@media (max-width:560px){
  .sig-alarivi > .sig-suodattimet{flex-wrap:wrap;}
  .sig-alarivi .sig-selecti{flex:1 1 120px;}
  .sig-alarivi .sig-teemat{flex:1 1 120px;}
}

/* ── Lähteet-painike (kaikki ryhmät yhden painikkeen alla) ── */
.sig-kanavat{display:flex;margin-top:14px;}
.sig-kanava{
  --c:var(--sig);
  width:100%;text-align:left;cursor:pointer;background:var(--t-bg-card);
  border:1px solid var(--t-border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;
  transition:transform .16s,border-color .16s,box-shadow .16s;color:inherit;font-family:inherit;
  display:flex;flex-direction:row;align-items:center;gap:14px;
}
.sig-kanava::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c),transparent 70%);}
.sig-kanava:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--c) 55%,var(--t-border));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 14px 34px color-mix(in srgb,var(--c) 22%,transparent);
}
.sig-kanava .sig-ikoni{
  flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,var(--sig-kortti2));
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--c) 30%,transparent);
}
.sig-kanava .sig-ikoni svg{width:22px;height:22px;color:var(--c);}
.sig-kanava .sig-nimi{font-size:var(--fs-lg);font-weight:700;color:var(--t-text);}
.sig-kanava .sig-maara{font-size:var(--fs-sm);color:var(--t-text-dim);margin-top:2px;}
.sig-kanava .sig-maara b{color:var(--c);font-weight:700;font-size:var(--fs-md);}
.sig-kanava .sig-avaa{margin-left:auto;color:var(--t-text-dim);opacity:.7;transition:transform .16s,color .16s;}
.sig-kanava:hover .sig-avaa{transform:translateX(2px);color:var(--c);}
.sig-kanava .sig-avaa svg{width:18px;height:18px;}

/* ── Suodatinpalkki ── */
.sig-suodattimet{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:12px;padding:11px 12px;margin-top:20px;
}
.sig-selecti{position:relative;}
.sig-selecti::after{
  content:"";position:absolute;right:11px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--t-text-dim);border-bottom:2px solid var(--t-text-dim);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.sig-selecti select{
  appearance:none;-webkit-appearance:none;
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:600;color:var(--t-text);
  background:var(--t-bg-card);border:1px solid var(--sig-reuna2);border-radius:10px;
  padding:9px 32px 9px 13px;cursor:pointer;min-width:150px;transition:border-color .15s,box-shadow .15s;
}
.sig-selecti select:hover{border-color:color-mix(in srgb,var(--sig) 45%,var(--sig-reuna2));}
.sig-selecti select:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px rgba(255,77,109,.16);}
/* Edustajarajaus hakukenttänä (ennen: 200 rivin pudotusvalikko). Sama muoto
   kuin muiden näkymien hakukentät: kuvake vasemmalla, kenttä venyy riville. */
.sig-hakuruutu{position:relative;flex:1 1 200px;min-width:160px;display:flex;align-items:center;}
.sig-hakuruutu > svg{position:absolute;left:12px;width:15px;height:15px;color:var(--t-text-muted);pointer-events:none;}
.sig-hakuruutu input{
  width:100%;min-width:0;font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:600;
  color:var(--t-text);background:var(--t-bg-card);border:1px solid var(--sig-reuna2);border-radius:10px;
  padding:9px 13px 9px 34px;transition:border-color .15s,box-shadow .15s;
}
.sig-hakuruutu input::placeholder{color:var(--t-text-muted);font-weight:600;}
.sig-hakuruutu input:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px rgba(255,77,109,.16);}
.sig-tyhjenna{
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:600;color:var(--t-text-muted);
  background:transparent;border:1px solid var(--sig-reuna2);border-radius:10px;padding:9px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:all .15s;
}
.sig-tyhjenna svg{width:14px;height:14px;}
.sig-tyhjenna:hover{border-color:var(--sig);color:var(--sig);}

/* ── Teemavalitsin (ennen 29.07.2026: yhdeksan chippia) ──
   flex-basis:100% + dashed border-top olivat chippien ajalta: ne rivittyivat
   ja tarvitsivat oman rivinsa. Nyt sisalto on yksi 179 px:n select, ja
   tayslevea perusta pakotti sille turhan rivin suodatinpalkin sisalla.
   Chip-tyylit (.sig-teema-chip) on jatetty paikalleen tarkoituksella. */
.sig-teemat{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.sig-teema-chip{
  --tc:var(--sig);
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);font-weight:600;color:var(--t-text-muted);
  background:var(--t-bg-card);border:1px solid var(--sig-reuna2);border-radius:999px;
  padding:6px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.sig-teema-chip b{font-weight:700;color:var(--t-text-dim);font-size:var(--fs-xs);}
.sig-teema-chip:hover{border-color:color-mix(in srgb,var(--tc) 55%,var(--t-border));color:var(--t-text);transform:translateY(-1px);}
.sig-teema-chip.on{
  border-color:var(--tc);color:var(--t-text);
  background:color-mix(in srgb,var(--tc) 16%,var(--t-bg-card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 30%,transparent);
}
.sig-teema-chip.on b{color:var(--tc);}
.sig-teema-chip.tyhja{opacity:.45;}
@media (max-width:520px){
  .sig-teema-chip{padding:5px 10px;}
}

/* ============================================================
   TÄYSISTUNTO — salinäkymä + LIVE-status
   ============================================================ */
.sali-wrap{max-width:1100px;margin:0 auto;}
.sali-wrap .pagehead-row{display:flex;align-items:center;gap:18px;}
.sali-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-accent) 55%,transparent));}
.sali-symbol svg{width:100%;height:100%;display:block;}
.sali-live{margin-top:8px;}
.sali-tila{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:12px;padding:14px 18px;
}
.sali-tila.sali-live-on{border-color:color-mix(in srgb,#ff4d4d 55%,var(--t-border));
  box-shadow:0 0 0 1px color-mix(in srgb,#ff4d4d 30%,transparent),0 0 28px color-mix(in srgb,#ff4d4d 18%,transparent);}
.sali-pallo{flex:none;width:14px;height:14px;border-radius:50%;}
.sali-pallo.sali-off{background:var(--t-text-dim);opacity:.6;}
.sali-pallo.sali-on{background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:saliPulssi 1.6s infinite;}
@keyframes saliPulssi{
  0%{box-shadow:0 0 0 0 rgba(255,77,77,.55);}
  70%{box-shadow:0 0 0 12px rgba(255,77,77,0);}
  100%{box-shadow:0 0 0 0 rgba(255,77,77,0);}
}
.sali-otsikko{font-weight:700;color:var(--t-text);letter-spacing:.06em;font-size:var(--fs-lg);}
.sali-live-tag{display:inline-block;background:#ff4d4d;color:#fff;border-radius:5px;
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;padding:2px 8px;margin-left:8px;vertical-align:2px;}
.sali-selite{color:var(--t-text-muted);font-size:var(--fs-md);margin-top:2px;}
.sali-selite strong{color:var(--t-text);}
.sali-live-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:700;color:var(--t-text);
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:10px;padding:9px 16px;
  transition:border-color .15s,color .15s,transform .15s;
}
.sali-live-btn svg{width:15px;height:15px;}
.sali-live-btn:hover{border-color:var(--t-accent);color:var(--t-accent);transform:translateY(-1px);}
.sali-kartta{
  margin-top:14px;background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:12px;
  padding:18px 18px 14px;position:relative;overflow:hidden;
}
/* Valtioneuvoston aitio — ministerit virkajärjestyksessä (erillinen rivi salin yllä) */
.sali-ministeriaitio{
  margin:0 auto 16px;max-width:980px;padding:12px 14px 14px;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:12px;
  border-top:2px solid #ffd700;
}
.sma-otsikko{
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-text-muted);
  text-align:center;margin-bottom:12px;
}
.sma-rivi{display:flex;flex-wrap:wrap;gap:6px 4px;justify-content:center;}
.sma-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;
  background:transparent;border:none;padding:2px 0;cursor:pointer;position:relative;
  font-family:inherit;
}
.sma-nro{
  position:absolute;top:-2px;left:12px;z-index:2;
  min-width:15px;height:15px;line-height:15px;padding:0 3px;border-radius:8px;
  background:var(--t-bg-panel);border:1px solid var(--t-border);
  font-size:11px;font-weight:800;color:var(--t-text-muted);text-align:center;
}
.sma-kuva{
  width:42px;height:42px;border-radius:50%;overflow:hidden;
  background:var(--party-color);border:2.5px solid var(--party-color);
  box-shadow:0 0 0 1.5px var(--t-bg-card);transition:transform .14s;
}
.sma-kuva img{width:100%;height:100%;object-fit:cover;display:block;}
.sma-kuva.sma-ph{background:var(--party-color);}
.sma-kuva.sma-ph img{display:none;}
.sma-nimi{
  font-size:var(--fs-xs);font-weight:600;color:var(--t-text-muted);
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
}
.sma-item:hover .sma-kuva{transform:translateY(-2px) scale(1.06);}
.sma-item:hover .sma-nimi{color:var(--t-text);}
@media (max-width:560px){
  .sali-ministeriaitio{padding:10px 6px 12px;}
  /* Sama leikkauskuvio kuin .kytk-tabs-row:ssa: overflow-x:auto leikkaa myös
     pystysuunnassa, jolloin .sma-item:hover .sma-kuva -nosto (translateY(-2px))
     katkeaisi yläreunasta. Pehmuste scrollportin sisällä, negatiivinen
     margin-top kumoaa sen asettelusta. */
  .sma-rivi{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:6px;padding-top:6px;margin-top:-6px;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .sma-item{width:56px;flex:0 0 auto;}
  .sma-nimi{max-width:56px;}
}
.sali-svg{width:100%;height:auto;display:block;max-width:980px;margin:0 auto;}
.sali-paikka{cursor:pointer;stroke:var(--t-bg-panel);stroke-width:1.5;transition:opacity .12s;}
.sali-paikka:hover{opacity:.75;}
.sali-ministeri{stroke:#ffd700;stroke-width:2.5;}
.sali-koroke{fill:var(--t-bg-card);stroke:var(--t-border);stroke-width:1;}
.sali-koroke-teksti{fill:var(--t-text-muted);font-family:'Source Sans 3',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.18em;}
.sali-legenda{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:12px;}
.sali-leg{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--t-text-muted);}
.sali-leg b{color:var(--t-text);}
.sali-leg i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.sali-leg-min{background:transparent;border:2.5px solid #ffd700;}
.sali-lahde{margin-top:12px;text-align:center;color:var(--t-text-dim);font-size:var(--fs-xs);}
@media (max-width:640px){
  #taysistuntoNakyma{padding:1.2rem .8rem 2.5rem !important;}
  .sali-live-btn{margin-left:0;width:100%;justify-content:center;}
}

/* ── Feed (poliitikkomaininnat) ── */
.sig-feed-panel{margin-top:14px;background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:12px;overflow:hidden;position:relative;}
.sig-feed-panel > .sig-feed-head,.sig-feed-panel > .sig-feed{position:relative;z-index:1;}
.sig-feed-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;
  border-bottom:1px solid var(--t-border);background:linear-gradient(180deg,rgba(255,77,109,.05),transparent);position:relative;
}
.sig-feed-head::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--sig),transparent 60%);opacity:.8;}
.sig-fh-title{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--t-text);font-weight:700;}
.sig-fh-title svg{width:16px;height:16px;color:var(--sig);}
.sig-tiheys{margin-left:auto;display:flex;background:var(--t-bg-card);border:1px solid var(--sig-reuna2);border-radius:10px;padding:3px;gap:2px;}
.sig-tiheys button{
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
  color:var(--t-text-dim);background:transparent;border:none;border-radius:7px;padding:6px 12px;cursor:pointer;transition:all .14s;
}
.sig-tiheys button.on{background:var(--sig);color:#fff;box-shadow:0 0 12px rgba(255,77,109,.4);}
.sig-tiheys button:not(.on):hover{color:var(--t-text);}

.sig-feed{max-height:600px;overflow-y:auto;}
.sig-uutinen{
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:14px 16px;
  border-bottom:1px solid var(--t-border);cursor:pointer;transition:background .14s;position:relative;
  text-decoration:none;color:inherit;
}
.sig-uutinen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sig);transform:scaleY(0);transform-origin:top;transition:transform .16s;}
.sig-uutinen:hover{background:var(--t-bg-card);}
.sig-uutinen:hover::before{transform:scaleY(1);}
.sig-uutinen:last-child{border-bottom:none;}
.sig-badges{grid-column:1/2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.sig-pbadge{
  font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--sig-badge-text,#fff);padding:2px 9px;border-radius:999px;line-height:1.5; /* A4 16.07.2026: auto-kontrastiteksti */
  cursor:pointer;box-shadow:0 0 10px color-mix(in srgb,var(--pc,var(--sig)) 45%,transparent);transition:transform .14s;
}
.sig-pbadge:hover{transform:scale(1.07);}
.sig-pers-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--t-text);
  background:var(--sig-kortti2);border:1px solid var(--sig-reuna2);padding:2px 9px 2px 6px;border-radius:999px;
  transition:transform .14s,border-color .14s;
}
.sig-pers-badge.klik{cursor:pointer;}
.sig-pers-badge.klik:hover{transform:scale(1.05);border-color:var(--sig);}
.sig-pers-badge svg{width:12px;height:12px;color:var(--t-text-dim);}
.sig-otsikko{grid-column:1/2;font-size:var(--fs-md);color:var(--t-text);font-weight:600;line-height:1.35;}
.sig-meta{grid-column:1/2;display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--t-text-dim);flex-wrap:wrap;}
.sig-meta .sig-lahde{font-weight:600;color:var(--t-text-muted);}
.sig-uutinen .sig-aika-col{grid-column:2/3;grid-row:1/4;display:flex;align-items:flex-start;justify-content:flex-end;}
.sig-aika{font-size:var(--fs-sm);color:var(--t-text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* tiivis-tila */
.sig-feed.tiivis .sig-uutinen{padding:9px 16px;grid-template-columns:auto 1fr auto;align-items:center;gap:0 12px;}
.sig-feed.tiivis .sig-badges{grid-column:1/2;grid-row:1;flex-wrap:nowrap;}
.sig-feed.tiivis .sig-otsikko{grid-column:2/3;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sig-feed.tiivis .sig-meta{display:none;}
.sig-feed.tiivis .sig-aika-col{grid-column:3/4;grid-row:1;align-items:center;}
.sig-feed.tiivis .sig-pers-badge span{display:none;}
.sig-feed.tiivis .sig-pers-badge{padding:2px 6px;}

.sig-tyhja{padding:40px 20px;text-align:center;color:var(--t-text-dim);font-size:var(--fs-md);}

/* ── Responsiivisuus ── */
@media (max-width:720px){
  .sig-kanava{padding:14px;}
}
@media (max-width:520px){
  .sig-tiheys{margin-left:0;order:5;}
  .sig-selecti{flex:1;}
  .sig-selecti select{min-width:0;width:100%;}
}

/* ============================================================
   UUSI ETUSIVU — integroitu 2026-07 (Landing-designjärjestelmä)
   Kaikki säännöt skoopattu #etusivuUusi-alle. Paikalliset muuttujat
   mappautuvat teematokeneihin -> reagoi teemanvaihtoon.
   ============================================================ */
#etusivuUusi{
  --bg-panel:var(--t-bg-panel);
  --bg-base:var(--t-bg-deep);
  --bg-elevated:var(--t-bg-card);
  --text-strong:var(--t-text-bright, var(--t-text));
  --text-body:var(--t-text);
  --text-muted:var(--t-text-muted);
  --line:var(--t-border);
  --cyan:var(--glow-cyan, #00e5ff);
  --kok:#2563eb; --vas:#dc2626;
  --serif:'Orbitron','Source Sans 3',sans-serif;
  --sans:'Source Sans 3',system-ui,sans-serif;
  --r-tag:3px; --r-nappi:8px; --r-cta:10px; --r-kortti:14px; --r-paneeli:16px; --r-pilleri:999px;
  position:relative; max-width:1200px; margin:0 auto; text-align:center;
}
#etusivuUusi *{box-sizing:border-box;}

#etusivuUusi .et-tools{display:flex;justify-content:flex-end;align-items:flex-start;gap:10px;margin-bottom:6px;}
#etusivuUusi .pilleri-nappi{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-body);background:var(--bg-panel);border:1px solid var(--line);
  border-radius:var(--r-pilleri);padding:9px 17px;transition:all .16s;}
/* Hologrammipyyhkäisy: valojuova kulkee painikkeen yli vain hoverissa (sama kuin välilehdissä) */
#etusivuUusi .pilleri-nappi::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--pn-accent,var(--cyan)) 42%,transparent) 50%,transparent 100%);
  transform:skewX(-18deg);opacity:0;pointer-events:none;}
#etusivuUusi .pilleri-nappi:hover::before{opacity:.75;animation:uiTabSheen var(--fx-sheen-dur) ease-out;}
#etusivuUusi .pilleri-nappi.teema{--pn-accent:var(--cyan);}
/* Aurinko/kuu-kytkin (19.07.2026, korvasi "Teema pois" -napin): pieni ikonipilleri */
#etusivuUusi .pilleri-nappi.teema-moodi{--pn-accent:var(--t-text-dim);padding:8px 12px;color:var(--t-text-dim);}
#etusivuUusi .pilleri-nappi.teema-moodi svg{width:15px;height:15px;display:block;}
#etusivuUusi .pilleri-nappi.opas{--pn-accent:var(--vas);}
/* Hehku näkyy vasta hoverissa (ei pysyvää reunahehkua) */
#etusivuUusi .pilleri-nappi.teema:hover{border-color:var(--cyan);color:var(--text-strong);box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 32%,transparent);}
#etusivuUusi .pilleri-nappi.teema-moodi:hover{border-color:var(--t-text-dim);color:var(--t-text);box-shadow:0 0 12px color-mix(in srgb,var(--t-text-dim) 25%,transparent);}
#etusivuUusi .pilleri-nappi.opas:hover{border-color:color-mix(in srgb,var(--vas) 65%,transparent);color:#ffd9dd;box-shadow:0 0 22px color-mix(in srgb,var(--vas) 42%,transparent);}
@media (prefers-reduced-motion:reduce){#etusivuUusi .pilleri-nappi:hover::before{animation:none;opacity:0;}}

/* Taustaan upotettu VALTAVAHTI + teemareaktiivinen valojuova */
#etusivuUusi .ghost{position:relative;z-index:0;margin:0 auto;text-align:center;white-space:nowrap;
  font-family:var(--serif);font-weight:900;text-transform:uppercase;
  letter-spacing:.12em;line-height:1.05;font-size:clamp(1.6rem,6vw,4.4rem);
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--text-strong) 22%,transparent) 0%,
    color-mix(in srgb,var(--text-strong) 22%,transparent) 38%,
    var(--text-strong) 47%,
    var(--cyan) 50%,
    var(--text-strong) 53%,
    color-mix(in srgb,var(--text-strong) 22%,transparent) 62%,
    color-mix(in srgb,var(--text-strong) 22%,transparent) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cyan) 20%,transparent));
  animation:etuHehkujuova 6s linear infinite;
  pointer-events:none;user-select:none;}
@keyframes etuHehkujuova{0%{background-position:240% 0;}100%{background-position:-140% 0;}}
@media (prefers-reduced-motion:reduce){#etusivuUusi .ghost{animation:none;background-position:50% 0;}}
/* Mobiili: logo hallitsevaksi, työkalupillerit sivurooliin (27.07.2026).
   Ilman tätä ghost kutistuu 25.6 px:iin mutta pillerit pysyvät 38 px:ssä →
   painikerivi näyttää otsikkoa isommalta. Pillerien korkeus pysyy ≥24 px (WCAG 2.2). */
@media (max-width:560px){
  #etusivuUusi .et-tools{gap:8px;margin-bottom:8px;}
  #etusivuUusi .pilleri-nappi{font-size:11px;padding:6px 12px;gap:6px;}
  #etusivuUusi .pilleri-nappi.teema-moodi{padding:6px 9px;}
  #etusivuUusi .pilleri-nappi.teema-moodi svg{width:13px;height:13px;}
  #etusivuUusi .ghost{font-size:clamp(1.8rem,9.3vw,2.6rem);}
}

/* align-self:center on PAKOLLINEN, ei koristetta. Yli 900 px:n footer-
   ankkurointi (21.07.2026, ks. @media min-width:900px) tekee #etusivuUusi:sta
   sarakesuuntaisen flex-kontin. Flex-lapsi BLOKKIUTUU: inline-flex -> flex,
   jolloin oletus align-items:stretch venytti pillerin koko 1200 px:n
   leveyteen ja emon text-align:center lakkasi keskittamasta laatikkoa -
   teksti jai vasempaan reunaan pillerin oman justify-content:flex-startin
   takia. Alle 900 px:n vikaa ei ole, joten mobiilikierros ei voinut nappaa
   tata. align-self on inertti flexin ulkopuolella, joten sama saanto kelpaa
   molempiin tiloihin. */
/* ── SEURAA · VERTAA · VAIKUTA — uusittu 28.07.2026 ──────────────────────────
   Vanha versio oli PILLERI: tausta, 1 px reunus, pyoristys, tiiviit valit.
   Ylhaalla se toimi merkkina, mutta sanamerkin (VALTA/VAHTI) rinnalla se
   nakytti tonkolta — kaksi laatikkoa allekkain, molemmat huutamassa.
   Nyt lause on KISKO: reunaton, hiusviivat molemmin puolin haipymassa
   tyhjaan, sanat valjasti harvennettuina ja valissa hehkupisteet. Se ei ole
   enaa nappula vaan viiva jonka paalla sanat lepaavat — kevyempi kuin kortit
   ja siksi selvasti niiden alapuolella hierarkiassa.
   Pilleri poistettiin kokonaan, joten sita ei tarvitse enaa kutistaa
   erikseen 480 px:lla (vanha 16 px:n vaakavuoto 10.07.2026 katosi mukana):
   kisko joustaa itsestaan, koska hiusviivat ovat `flex:1`. */
#etusivuUusi .slogan{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vw,20px);
  width:min(760px,92%);margin:26px auto 0;
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:clamp(.16em,.5vw,.3em);
  color:var(--text-muted);
}
#etusivuUusi .slogan .sl-sana{white-space:nowrap;transition:color .3s;}
/* Hiusviivat haipyvat ulospain, jolloin lause ei ala eika lopu mihinkaan. */
#etusivuUusi .slogan .sl-kisko{
  flex:1 1 0;min-width:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--line) 90%,transparent));
}
#etusivuUusi .slogan .sl-kisko:last-child{
  background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--line) 90%,transparent));
}
#etusivuUusi .slogan .sl-piste{
  width:5px;height:5px;flex:0 0 5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
  opacity:.55;animation:sloganSyke 3.2s ease-in-out infinite;
}
/* Porrastus: pisteet sykkivat vuorotellen, jolloin rivi hengittaa
   vasemmalta oikealle samaan suuntaan kuin sanamerkin juova.
   Viive kiinnitetaan OMAAN LUOKKAAN eika `nth-of-type`een: kaikki kiskon
   lapset ovat span-elementteja, joten `nth-of-type(2)` osuisi toiseen
   SANAAN eika toiseen pisteeseen. Positiohaku hajoaisi muutenkin heti jos
   riviin lisataan sana. */
#etusivuUusi .slogan .sl-piste--b{animation-delay:.55s;}
@keyframes sloganSyke{
  0%,100%{opacity:.35;transform:scale(.85);}
  50%    {opacity:1;   transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  #etusivuUusi .slogan .sl-piste{animation:none;opacity:.7;transform:none;}
}
/* Virastoteema on littea: ei hehkua eika sykkeita. */
[data-theme^="virasto"] #etusivuUusi .slogan .sl-piste{
  box-shadow:none;animation:none;opacity:.8;transform:none;
}
/* Tagline "Riippumaton politiikan avoimuusalusta — avoin data, läpinäkyvät
   lähteet" (lisätty uskottavuustyöpaketti T4:ssä 18.07.2026, commit 217e39fd)
   POISTETTU dashboardin etusivulta 20.07.2026: sovellukseen tullut käyttäjä ei
   tarvitse myyntilausetta sloganin alle.
   Lause asuu nyt: suomeksi metodologia.html:n ingressissä (20.07.2026),
   englanniksi about.html:n ingressissä (oli siellä jo ennestään).
   HUOM: sijoitus metodologia.html:ään on VÄLIAIKAINEN — lopullinen paikka
   päätetään myöhemmin (ks. TO-DO v2). */

#etusivuUusi .ticker{margin:22px auto 0;max-width:860px;display:flex;align-items:center;gap:14px;padding:0 4px;}
#etusivuUusi .ticker .kicker{flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--serif);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);}
#etusivuUusi .ticker .kicker svg{width:15px;height:15px;}
#etusivuUusi .ticker .kicker-linkki{cursor:pointer;padding:5px 8px;margin:-5px -2px;border-radius:7px;
  /* padding 3px->5px 25.07.2026: 11px kicker jäi 21px korkeaksi — WCAG 2.2 AA 24px */
  transition:color .15s,text-shadow .15s,background .15s;}
#etusivuUusi .ticker .kicker-linkki:hover{color:var(--text-strong);
  text-shadow:0 0 12px color-mix(in srgb,var(--cyan) 60%,transparent);
  background:color-mix(in srgb,var(--cyan) 12%,transparent);}
#etusivuUusi .ticker .kicker-linkki:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
#etusivuUusi .ticker .viewport{flex:1;min-width:0;text-align:left;}
#etusivuUusi .ticker .viewport .etusivu-ticker{margin:0;max-width:none;justify-content:flex-start;}

/* ===== NAVIGOINTIKORTIT (haitari) ===== */
#etusivuUusi .navgrid{max-width:1200px;margin:clamp(20px,3vw,34px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
/* MOBIILI: kortit PYSYVAT VIEREKKAIN (kayttajan paatos 28.07.2026).
   Aiemmin ne pinottiin allekkain 760 px:n alapuolella. Se toimi kun otsikot
   olivat "VALTARAKENTEET" ja "VALVONTAMODUULI" — pitkat sanat vaativat koko
   leveyden. VALTA ja VAHTI ovat viisi kirjainta, ja ne OVAT sanamerkki:
   allekkain pinottuina pari lakkaa lukemasta yhtena sanana ja synkronoitu
   juova menee ylhaalta alas eika vasemmalta oikealle. Vierekkain sailyy sama
   luenta kuin tyopoydalla, vain pienempana.
   Gap ja pyoristys kutistuvat leveyden mukana, jottei kahdesta kortista tule
   375 px:lla kahta kapeaa nauhaa. */
@media (max-width:760px){
  #etusivuUusi .navgrid{grid-template-columns:1fr 1fr;gap:clamp(8px,2.6vw,14px);}
  #etusivuUusi .navkortti{border-radius:clamp(16px,5vw,24px);}
  #etusivuUusi .nk-head{padding:clamp(16px,5vw,24px) clamp(8px,2.5vw,14px) clamp(14px,4vw,20px);}
  /* Alaotsikko kahdelle riville: "Kansanedustajat ja puolueohjelmat" ei mahdu
     ~170 px:n sarakkeeseen yhdella rivilla ilman etta kirjainvali romahtaa. */
  #etusivuUusi .nk-ala{font-size:clamp(8.5px,2.5vw,11px);letter-spacing:.06em;
    line-height:1.35;margin-top:7px;}
}
#etusivuUusi .navkortti{--c:var(--acc-valta);position:relative;isolation:isolate;text-align:left;
  background:
    linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--bg-panel)) 0%, var(--bg-panel) 62%) padding-box,
    linear-gradient(150deg,color-mix(in srgb,var(--c) 55%,transparent),rgba(var(--t-sheen-ink),.05) 60%) border-box;
  border:1px solid transparent;border-radius:32px;overflow:hidden;
  box-shadow:0 24px 60px rgba(var(--t-shadow-ink),.4), inset 0 1px 0 rgba(var(--t-sheen-ink),.03);
  transition:transform .18s ease,box-shadow .18s ease;}
#etusivuUusi .navkortti.valvonta{--c:var(--acc-valvonta);}
/* ── KOSKETUSANSA: hover jai pohjaan (kayttajan havainto 28.07.2026) ───────
   Mobiilissa VALTA/VAHTI-kortin napautus jatti hologrammikuvion ja nostetun
   varjon PAALLE senkin jalkeen kun kayttaja palasi alkuruutuun. Syy on
   kosketuslaitteiden :hover-semantiikka: sormi ei "poistu" elementin paalta,
   joten viimeksi kosketettu elementti jaa hover-tilaan kunnes jotain muuta
   kosketetaan. Ei siis JS-vika eika tilan nollaus vaan CSS-oletus.
   Korjaus: kaikki .navkortti-hoverit vain laitteille joilla on oikea
   osoitinlaite. Kosketuksella kortti nayttaa nyt aina lepotilassa. */
@media (hover:hover) and (pointer:fine){
#etusivuUusi .navkortti:hover{transform:translateY(-4px);
  box-shadow:0 28px 66px rgba(var(--t-shadow-ink),.5),0 0 34px color-mix(in srgb,var(--c) 26%,transparent),inset 0 1px 0 rgba(var(--t-sheen-ink),.04);}
}
/* Pistekuviotekstuuri, haivahtaa esiin hoverissa (sama tekniikka kuin .ui-tab-btn) */
#etusivuUusi .navkortti::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--c) 65%,transparent) 1px, transparent 1.5px);
  background-size:11px 11px;background-position:center;opacity:0;transition:opacity .28s ease;
  -webkit-mask-image:linear-gradient(115deg,#000 12%,transparent 78%);mask-image:linear-gradient(115deg,#000 12%,transparent 78%);}
@media (hover:hover) and (pointer:fine){#etusivuUusi .navkortti:hover::before{opacity:.16;}}
/* Vino valojuova - pyyhkaisee KOKO painikkeen yli kerran hoverissa (sama @keyframes uiTabSheen
   kuin muualla sivustolla). Korvaa aiemman hologrammiin rajatun sheen-ratkaisun. */
#etusivuUusi .navkortti::after{content:'';position:absolute;top:0;left:0;height:100%;width:55%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,
    color-mix(in srgb,var(--c) 30%,transparent) 42%,
    color-mix(in srgb,var(--c) 55%,#fff 40%) 50%,
    color-mix(in srgb,var(--c) 30%,transparent) 58%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);opacity:0;}
@media (hover:hover) and (pointer:fine){#etusivuUusi .navkortti:hover::after{animation:uiTabSheen 1.4s ease-out;}}
@media (prefers-reduced-motion:reduce){
  #etusivuUusi .navkortti:hover::before{opacity:0;}
  #etusivuUusi .navkortti:hover::after{animation:none;opacity:0;}
}
#etusivuUusi .nk-taustahahmo{position:absolute;top:-26px;right:-26px;width:200px;height:200px;
  color:var(--c);opacity:0;pointer-events:none;z-index:0;transition:opacity .22s ease,filter .22s ease;}
@media (hover:hover) and (pointer:fine){
#etusivuUusi .navkortti:hover .nk-taustahahmo{opacity:.62;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 95%,transparent))
         drop-shadow(0 0 16px color-mix(in srgb,var(--c) 78%,transparent))
         drop-shadow(0 0 34px color-mix(in srgb,var(--c) 52%,transparent));}
}
#etusivuUusi .nk-taustahahmo svg{width:100%;height:100%;display:block;transition:stroke-width .22s ease;}
@media (hover:hover) and (pointer:fine){#etusivuUusi .navkortti:hover .nk-taustahahmo svg{stroke-width:2.6;}}

/* ── Taustavesileima (himmeä, suuri line-art -symboli sisällön taustalla) ──
   Oletussymboli = Valtarakenteet-kruunu (Kansanedustajat, Puolueohjelmat, Toteutumisindeksi).
   Vaihda symboli per näkymä muuttujalla --tausta-svg ja koko muuttujalla --tausta-koko.
   mask + teemaväri = reagoi teemaan; z-index:-1 piirtää containerin taustan päälle mutta
   sisällön taakse. */
#drawerContent{position:relative;isolation:isolate;}
.vr-tausta{
  --tausta-svg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M74%2044l10-8%206%2010%2010-10%2010%2010%206-10%2010%208-6%2016H80z%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2284%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22M100%2095v14%22%2F%3E%3Cpath%20d%3D%22M100%20109H58v10M100%20109h42v10%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22137%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%22137%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%22111%22%20cy%3D%22137%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22137%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M48%20119v8M90%20119v8M111%20119v8M152%20119v8%22%2F%3E%3C%2Fsvg%3E");
  --tausta-koko:min(600px,68vw);}
.vr-tausta::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--tausta-koko);height:var(--tausta-koko);
  background-color:var(--t-accent);
  -webkit-mask:var(--tausta-svg) center/contain no-repeat;
          mask:var(--tausta-svg) center/contain no-repeat;
  opacity:.06;pointer-events:none;user-select:none;z-index:-1;}
@media (max-width:760px){.vr-tausta::before{width:min(420px,82vw);height:min(420px,82vw);opacity:.05;}}
/* Puolueohjelmat & Toteutumisindeksi: tausta + ruudukko tulevat nyt
   .pp-fullview'sta (teemagradientti). Täällä vain neutraloidaan kruunu-
   vesileima (muuten se olisi --t-accent = sininen ja värjäisi taustan). */
#ohjelmaNakyma.vr-tausta::before,
#ohjelmaindeksiNakyma.vr-tausta::before{
  background-color:var(--t-text-bright,#fff);
  opacity:.045;}

/* Voimasuhteet-näkymä: vaaka/tasapaino-symboli, suurempana, molempien alavälilehtien taustalla */
#voimasuhteetNakyma.vr-tausta{position:relative;isolation:isolate;
  --tausta-svg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18%22%2F%3E%3Cpath%20d%3D%22M6%207h12%22%2F%3E%3Cpath%20d%3D%22M6%207l-3%206h6z%22%2F%3E%3Cpath%20d%3D%22M18%207l-3%206h6z%22%2F%3E%3Cpath%20d%3D%22M8%2021h8%22%2F%3E%3C%2Fsvg%3E");
  --tausta-koko:min(720px,80vw);}
@media (max-width:760px){#voimasuhteetNakyma.vr-tausta{--tausta-koko:min(500px,88vw);}}

#etusivuUusi .nk-head{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:32px 24px 26px;cursor:pointer;position:relative;z-index:1;}
#etusivuUusi .nk-otsikko{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.08em;color:var(--text-strong);}
#etusivuUusi .nk-ala{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--c) 70%,var(--text-muted));margin-top:9px;}

/* ══════════ SANAMERKKI: VALTA + VAHTI (PÄÄTÖS-036, 28.07.2026) ══════════
   Paanavigaation kaksi korttia OVAT tuotteen nimi kahtia jaettuna. Sama
   sahkopyyhkaisy kulkee molempien lapi vasemmalta oikealle SYNKRONOIDUSTI —
   se on se osa joka vaittaa visuaalisesti "nama ovat yksi sana" samalla kun
   ne ovat kaksi erillista kontrollia. Ilman sita ne olisivat vain kaksi
   korttia jotka sattuvat alkamaan samalla tavulla.

   Synkronointi: molemmilla sama kesto ja sama keyframe, mutta VAHTI on puolen
   jakson jaljessa. Kirkas kaista ehtii siis kulkea VALTAn lapi ensin ja
   VAHDIN sen jalkeen -> yksi yhtenainen pyyhkaisy parin yli. Jakson
   loppupuoli on tarkoituksella levossa, jottei efekti ole jatkuvaa
   valkkymista lukijan silmakulmassa.

   Merkitys ei jaa ison sanan varaan: alaotsikko (.nk-ala) kertoo mita kortti
   sisaltaa — ja se nakyy myos mobiilissa, toisin kuin legacy-navin
   .nav-btn-sub. Kortin otsakkeella on lisaksi aria-label joka sanoo koko
   asian ruudunlukijalle. Koko sanamerkki VALTAVAHTI sailyy ylapalkissa ja
   hero-ghostissa, joten nimi ei katoa nimena. */
/* Leikkaus, paksuus, kirjainvali ja hehkujuova ovat SAMAT kuin poistuneessa
   .ghost-otsikossa: sama serif (Orbitron) 900:lla, sama .12em, sama
   kaksiportainen gradientti jossa kirkas ydin kulkee himmean tekstin lapi.

   KOKO EI OLE SAMA, ja siihen on mitattu syy. Ghost oli koko sivun levyinen
   koriste (`clamp(1.6rem,6vw,4.4rem)` = 70,4 px @1280); sanamerkki asuu
   navikortin sisalla, jonka `.nk-head` antaa tekstille 375 px:n mobiilissa
   vain 117 px — VALTA vie siita jo 115 px. Mobiilikokoa ei siis voi nostaa
   ilman ylivuotoa, joten clampin ALARAJA on jaanyt 1.5rem:iin ja kasvu on
   vw-osassa ja ylarajassa (kayttajan paatos 28.07.2026: "kasvata selvasti,
   kohti ghostin kokoa"). Tulos: 24 px @375 (ennallaan), 34,6 px @768,
   54,4 px @1280 = 77 % ghostin koosta. Aiempi kommentti vaitti tassa kohtaa
   kokojen olevan samat, mika ei pitanyt paikkaansa kertaakaan.

   YKSI ERO GHOSTIIN, ja se on tahallinen. Ghost animoi background-positionia
   valilla 240 % -> -140 %, jolloin gradientti oli osan jaksosta KOKONAAN
   laatikon ulkopuolella eika teksti saanut lainkaan maalia: koristeteksti siis
   katosi ~44 % ajasta. Koristeelle se on tyylikeino, NAVIGAATION OTSIKOLLE se
   olisi vika — painike olisi valilla nimeton. (Tormasin tahan ensin itse:
   130 % -> -130 % nayttti kuvakaappauksessa vasemmalla "ALTA" ja oikealla ei
   mitaan.) Siksi liike pidetaan valilla 100 % -> 0 %, jolloin 280 %:n levyinen
   gradientti peittaa laatikon aina ja teksti on levossa himmea mutta luettava.

   Suunta: 100 % -> 0 % siirtaa kuvaa oikealle, jolloin kirkas ydin saapuu
   VASEMMALTA ja poistuu oikealta. VAHTI on puoli jaksoa jaljessa, joten juova
   jatkaa VALTAsta VAHTIIN — yksi pyyhkaisy parin yli. */
#etusivuUusi .nk-otsikko.nav-wordmark{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(1.5rem,4.5vw,3.4rem);
  letter-spacing:.12em;
  line-height:1.05;
  white-space:nowrap;
  /* ── HEHKUJUOVA POISTETTU KOKONAAN 30.07.2026 (kayttajan paatos) ─────────
     Aiemmin tassa oli `etuHehkujuova 6s linear infinite` ghostin arvoilla:
     animoitu gradientti `background-clip:text`-tekstissa JA sen paalla
     `drop-shadow(0 0 14px)`. Se pakotti selaimen rasteroimaan tekstin ja
     laskemaan sumennuksen uudelleen JOKA RUUDULLA, ikuisesti, kahdessa
     elementissa.

     Kustannus oli mitattu jo 28.07.2026 (Playwright, 375 px, 6x CPU-hidastus,
     kaksi ajoa per koe): juovan sammutus nosti 31 / 31 fps -> 40 / 43 fps, ja
     se oli koko mittauksen AINOA toistuva loydos — h1-lapivalaisu ja
     sloganSyke eivat vaikuttaneet johdonmukaisesti. Silloin juova sammutettiin
     vain mobiilissa; nyt se on pois kaikkialta.

     Kayttajan perustelu: painikkeet eivat tarvitse siirtymaanimaatiota, se
     vain hidastaa. Navigaation otsikko on toiminnallinen elementti, ei
     koriste.

     Kiintea `--text-strong` on sama ratkaisu jonka projekti oli JO valinnut
     kolmeen erikoistapaukseen (mobiili, @prefers-reduced-motion ja
     background-clip-fallback), koska pysaytetty gradientti jatti tekstin
     22 %:n kirkkauteen reunoistaan. Ne kolme lohkoa poistettiin tarpeettomina
     — perusarvo tekee nyt saman.

     `etuHehkujuova`-keyframe JAA paikalleen: `#etusivuUusi .ghost` kayttaa
     sita yha. */
  color:var(--text-strong);
}

/* ── MOBIILI, KAKSI MITATTUA VIKAA SAMASSA KOHDASSA (28.07.2026 ilta) ──────
   Kayttajan havainto: "mobiili ei paivittanyt painikkeita ja painikkeiden
   teksti nakyy melko himmeana". Molemmat pitivat paikkansa, eri syista.

   1) HIMMEYS. Ylla oleva lohko sammuttaa animaation ja jattaa gradientin
      paikalleen vaittaen etta "otsikko nayttaa samalta kuin juovan huipussa".
      MITATTU: ei nayta. Gradientin kirkas ydin on vain kohdassa 47-53 %, ja
      koska 280 %:n taustakoosta nakyy vain keskiosa, teksti on reunoistaan
      22 %:n kirkkaudella. Mitatut arvot VALTA-sanan yli vasemmalta oikealle:
      22 / 51 / 100 / 48 / 22 %. Tyopoydalla vikaa ei ole, koska animaatio
      kuljettaa kirkkaan kaistan koko sanan yli. Ratkaisu on sama jonka
      projekti on jo valinnut liikeherkkyydelle (@prefers-reduced-motion):
      gradientti pois, kiintea vari -> tasaisen kirkas teksti.

   2) KOKO EI KASVANUT, koska mobiilin padding-saanto oli KUOLLUTTA KOODIA.
      Rivin ~4597 `#etusivuUusi .nk-head` (sivupadding clamp(8px,2.5vw,14px))
      ei ole koskaan vaikuttanut: yleinen `#etusivuUusi .nk-head`
      (padding:32px 24px 26px) tulee TIEDOSTOSSA MYOHEMMIN samalla
      spesifisyydella ja voittaa — media query ei nosta spesifisyytta.
      Mitattu 375 px:lla: computed padding 24 px, ei 9,4 px. Tekstille jai
      siis 117 px kun VALTA vie 115 px, eika mobiilikokoa voinut nostaa.
      Sama kuollut saanto koski kaikkia navikortteja, ei vain sanamerkkia.
      Korjaus toistaa saannon TASSA, yleisen saannon jalkeen. */
@media (max-width:760px){
  #etusivuUusi .nk-head{
    padding:clamp(16px,5vw,24px) clamp(8px,2.5vw,14px) clamp(14px,4vw,20px);
  }
  #etusivuUusi .nk-otsikko.nav-wordmark{
    /* Vari ja animaation puute tulevat nyt perusarvosta (ks. 30.07.2026:n
       kommentti sielta) — tanne jaa vain mobiilin oma kirjasinkoko.
       Ylaraja 2.2rem eika tyopoydan 3.4rem: 760 px:n rajalla mobiilikoko
       (35,2 px) ja tyopoytakoko (4.5vw = 34,2 px) osuvat lahes yhteen,
       joten breakpointilla ei ole nakyvaa hyppya. */
    font-size:clamp(1.75rem,7.4vw,2.2rem);
  }
}
#etusivuUusi .nk-body{max-height:0;overflow:hidden;position:relative;z-index:1;transition:max-height .45s ease;}
/* Opaskiertue avaa kortin sisältölistan inline (askeleet Valtarakenteet/
   Valvontamoduuli), jotta kiertue näyttää mitä moduulin sisällä on —
   aiemmin kortit esiteltiin vain suljettuina (käyttäjäpalaute 18.07.2026).
   Valokeila-aukko seuraa laajennusta ResizeObserverilla. */
#etusivuUusi .navkortti.kiertue-avattu .nk-body{max-height:1200px;}
#etusivuUusi .nk-inner{padding:4px 18px 20px;}
#etusivuUusi .nk-ryhma+.nk-ryhma{margin-top:14px;}
#etusivuUusi .nk-ryhma .rlab{font-family:var(--serif);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin:0 6px 8px;}
#etusivuUusi .rlista{display:flex;flex-direction:column;gap:2px;}
#etusivuUusi .rrivi{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-nappi);
  cursor:pointer;transition:background .14s;color:var(--text-body);text-decoration:none;border:1px solid transparent;}
#etusivuUusi .rrivi:hover{background:var(--bg-elevated);color:var(--text-strong);border-color:var(--line);}
#etusivuUusi .rrivi .ri{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,var(--bg-elevated));border:1px solid color-mix(in srgb,var(--c) 40%,transparent);}
#etusivuUusi .rrivi .ri svg{width:15px;height:15px;color:var(--c);}
#etusivuUusi .rrivi .rt{flex:1;font-size:14.4px;font-weight:600;}
#etusivuUusi .rrivi .beta{font-family:var(--serif);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 16%,transparent);border-radius:var(--r-tag);padding:.15rem .45rem;}
#etusivuUusi .rrivi .rarrow{color:var(--text-muted);opacity:0;transform:translateX(-4px);transition:all .15s;}
#etusivuUusi .rrivi:hover .rarrow{opacity:1;transform:none;}
#etusivuUusi .rrivi .rarrow svg{width:15px;height:15px;}
/* VERTAILE on erityispainike (pronssinen "special button"). Oikea/Vasen-teemassa
   --t-bronze on tarkoituksella määritelty punaiseksi (#ff3b4e), mikä muutti myös
   VERTAILE-pillerin punaiseksi. Palautetaan aito pronssi VAIN tähän elementtiin,
   jotta se pysyy pronssisena kaikissa teemoissa niin kuin design-prototyypissä. */
[data-theme="oikeavasen"] #etusivuUusi .vertaile-nosto{--t-bronze:#d4a24a;}
#etusivuUusi .vertaile-nosto{position:relative;isolation:isolate;overflow:hidden;margin-top:14px;display:flex;align-items:center;gap:13px;cursor:pointer;
  background:linear-gradient(120deg,color-mix(in srgb,var(--t-bronze) 14%,var(--bg-elevated)),var(--bg-elevated));
  border:1px solid color-mix(in srgb,var(--t-bronze) 42%,transparent);border-radius:var(--r-pilleri,999px);
  padding:15px 22px;transition:box-shadow .16s,transform .16s;}
#etusivuUusi .vertaile-nosto:hover{transform:translateY(-1px);box-shadow:0 0 24px color-mix(in srgb,var(--t-bronze) 30%,transparent);}
/* Sama valojuova kuin .rrivi:ssä */
#etusivuUusi .vertaile-nosto::after{content:'';position:absolute;top:0;left:0;height:100%;width:55%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,
    color-mix(in srgb,var(--t-bronze) 30%,transparent) 42%,
    color-mix(in srgb,var(--t-bronze) 55%,#fff 40%) 50%,
    color-mix(in srgb,var(--t-bronze) 30%,transparent) 58%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);opacity:0;}
#etusivuUusi .vertaile-nosto:hover::after{animation:uiTabSheen 1.4s ease-out;}
@media (prefers-reduced-motion:reduce){#etusivuUusi .vertaile-nosto:hover::after{animation:none;opacity:0;}}
#etusivuUusi .vertaile-nosto .vi{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--t-bronze) 16%,var(--bg-elevated));border:1px solid color-mix(in srgb,var(--t-bronze) 40%,transparent);}
#etusivuUusi .vertaile-nosto .vi svg{width:20px;height:20px;color:var(--t-bronze);}
#etusivuUusi .vertaile-nosto .vt{flex:1;}
#etusivuUusi .vertaile-nosto .vt b{display:block;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--text-strong);}
#etusivuUusi .vertaile-nosto .vt span{font-size:12.5px;color:var(--text-muted);}
/* Miekkojen risteys hologrammina taustalla, kirkastuu hoverissa */
#etusivuUusi .vertaile-nosto .v-bg{position:absolute;right:-18px;bottom:-40px;top:auto;transform:none;
  width:150px;height:150px;color:var(--t-bronze);opacity:.16;z-index:-1;pointer-events:none;
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;}
#etusivuUusi .vertaile-nosto .v-bg svg{width:100%;height:100%;display:block;}
#etusivuUusi .vertaile-nosto:hover .v-bg{opacity:.46;transform:scale(1.08);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-bronze) 75%,transparent));}
@media (prefers-reduced-motion:reduce){#etusivuUusi .vertaile-nosto .v-bg{transition:none;}}

/* ===== MODUULISIVU — täysikuvaruudun ominaisuusvalikko + logo-morph-siirtymä =====
   Korvaa entisen haitari-pudotuksen. Ajoitus/tekniikka hiottu design-prototyypissä
   (prototyyppi "Logo Morph Siirtymä", tekniikka B/clip valittu 07.07.2026,
   tuotantoon 4x hitaampana käyttäjän valinnasta). Kaksi osaa:
   1) .ms-seed — kiinteä siemen-ikoni joka pompahtaa klikkauskohtaan ja haalistuu.
      Erillinen omasta hover-tilastaan, joten toimii myös kylmästä kosketuksesta.
   2) #moduuliSivu — kohdesivu paljastuu suoraan clip-path-ympyränä samasta
      pisteestä (ei erillistä peittävää väripalloa; sivun oma --c-sävyinen
      radial-gradient antaa "väripinnan" tunnun heti paljastuksen alusta asti).
   Sisältö on klooni kortin .nk-inneristä, ja sen suorat lapset (rlista/nk-ryhma/
   vertaile-nosto) sekä otsikkorivin osat paljastuvat porrastettuna (stagger). */
#etusivuUusi .ms-seed{position:fixed;z-index:9990;pointer-events:none;
  width:200px;height:200px;color:#fff;opacity:0;display:none;
  filter:drop-shadow(0 0 8px var(--c,var(--cyan)))
         drop-shadow(0 0 26px color-mix(in srgb,var(--c,var(--cyan)) 65%,transparent))
         drop-shadow(0 0 60px color-mix(in srgb,var(--c,var(--cyan)) 40%,transparent));}
#etusivuUusi .ms-seed svg{width:100%;height:100%;display:block;}
#etusivuUusi .ms-seed.animoi{display:block;
  animation:msSeedPulse 260ms cubic-bezier(.3,1.3,.5,1) both,
            msSeedFade 320ms ease 160ms both;}
@keyframes msSeedPulse{
  0%{transform:translate(-50%,-50%) scale(.82);opacity:0;}
  65%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1.04);opacity:1;}
}
@keyframes msSeedFade{from{opacity:1;}to{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  #etusivuUusi .ms-seed{display:none !important;}
}

#moduuliSivu{position:fixed;inset:0;z-index:9985;display:none;flex-direction:column;
  background:radial-gradient(900px 520px at 82% -12%,color-mix(in srgb,var(--c,var(--cyan)) 20%,transparent),transparent 70%),
             var(--bg-base,var(--t-bg-deep));
  opacity:1;transform:scale(1);overflow:hidden;
  /* ── AVAUSANIMAATIO POISTETTU 30.07.2026 (käyttäjän päätös) ──────────────
     Tässä oli `clip-path:circle(0px at 50% 50%)` + `transition:clip-path
     460ms … 60ms`, eli VALTA/VAHTI-painalluksen jälkeen moduulisivu
     paljastui ympyränä klikkauspisteestä, ja sisältö häivytettiin sen
     päälle porrastettuna (180 ms + 42 ms per elementti). Käyttäjä: se vain
     hidastaa. Sivu avautuu nyt heti.
     🔴 clip-path EI saa jäädä 0px-arvoon: sivu on silloin näkymätön mutta
     `display:flex` ja z-index 9985 → se nielee klikit ja etusivun painikkeet
     "kuolevat" (bugi 08.07.2026). Siksi lähtöarvoa ei ole lainkaan. */
  }
#moduuliSivu.auki{display:flex;}
#moduuliSivu.sulkeutuu{opacity:0;transform:scale(.97);
  transition:opacity 300ms cubic-bezier(.4,0,1,1),transform 300ms cubic-bezier(.4,0,1,1);}
/* [data-stagger] jää pystyyn ILMAN transitiota: JS asettaa nämä elementit
   näkyviin inline-tyyleillä, ja sääntö on se joka takaa ettei mikään jää
   opacity:0-tilaan jos inline-arvo puuttuu. */
#moduuliSivu [data-stagger]{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  /* Speksi: pelkkä nopea ristihäivytys, ei kasvatusta/skaalausta — riippumatta
     yllä olevasta 4x-tuotantonopeudesta, joka koskee vain täysliikkeistä versiota. */
  #moduuliSivu{clip-path:none !important;opacity:0;transform:none !important;
    transition:opacity 160ms ease !important;}
  #moduuliSivu.auki{opacity:1;}
  #moduuliSivu.sulkeutuu{opacity:0;}
  #moduuliSivu [data-stagger]{opacity:1;transform:none;transition:none;transition-delay:0ms !important;}
}
#moduuliSivu .ms-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;
  padding:22px clamp(18px,4vw,40px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--cyan)) 16%,var(--bg-base,var(--t-bg-deep))) 0%,var(--bg-base,var(--t-bg-deep)) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--c,var(--cyan)) 32%,transparent);}
#moduuliSivu .ms-back{display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none;
  font-family:var(--serif);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-body,var(--t-text));background:var(--bg-panel,var(--t-bg-panel));
  border:1px solid var(--line,var(--t-border));border-radius:var(--r-pilleri,999px);padding:9px 16px;
  transition:border-color .16s,color .16s,box-shadow .16s;}
#moduuliSivu .ms-back:hover{border-color:var(--c,var(--cyan));color:var(--text-strong,var(--t-text-bright));
  box-shadow:0 0 16px color-mix(in srgb,var(--c,var(--cyan)) 34%,transparent);}
#moduuliSivu .ms-back svg{width:15px;height:15px;}
#moduuliSivu .ms-icon{width:38px;height:38px;flex:none;color:var(--c,var(--cyan));}
#moduuliSivu .ms-icon svg{width:100%;height:100%;display:block;}
#moduuliSivu .ms-titles{display:flex;flex-direction:column;min-width:0;}
#moduuliSivu .ms-titles b{font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.07em;color:var(--text-strong,var(--t-text-bright));}
#moduuliSivu .ms-titles span{font-size:12.5px;letter-spacing:.05em;color:var(--text-muted,var(--t-text-muted));}
/* KORJATTU 20.07.2026: ms-header on flex-rivi (paluunappi + ikoni + otsikot).
   Otsikon b on YKSI pitkä sana ("VALVONTAMODUULI", .07em letter-spacingilla
   238px), joten sen min-content ei kutistu — ms-titles puristui 135px:iin ja
   teksti valui 103px yli (ms-header yhteensä 85px yli). min-width:0 salli
   laatikon kutistua muttei tekstin. Mobiilissa otsikot pudotetaan omalle
   riville, jolloin niille jää koko leveys. Koskee myös haaravalikko-näkymää,
   joka jakaa saman komponentin. */
@media (max-width:560px){
  #moduuliSivu .ms-header{flex-wrap:wrap;row-gap:10px;}
  #moduuliSivu .ms-titles{flex-basis:100%;}
  #moduuliSivu .ms-titles b{overflow-wrap:anywhere;}
}
#moduuliSivu .ms-body{padding:clamp(20px,4vw,40px);max-width:1040px;margin:0 auto;width:100%;
  position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;}

/* Taustahologrammi: moduulin logo (klooni .nk-taustahahmo svg:stä) suurena, himmeänä
   ja hehkuvana korttien takana — sama tunnelma kuin alkunäytön hologrammissa. */
#moduuliSivu .ms-tausta{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
#moduuliSivu .ms-tausta svg{width:min(175vh,1750px);height:min(175vh,1750px);max-width:150vw;
  color:var(--c,var(--cyan));opacity:.09;
  /* Staattinen drop-shadow: filtterin animointi joka framessa oli raskasta ja
     aiheutti nykimistä avausanimaation aikana. Pulssataan vain opacity (kevyt). */
  filter:drop-shadow(0 0 34px color-mix(in srgb,var(--c,var(--cyan)) 45%,transparent));
  will-change:opacity;animation:msTaustaPulssi 7s ease-in-out infinite;}
@keyframes msTaustaPulssi{
  0%,100%{opacity:.05;}
  50%{opacity:.13;}
}
@media (max-width:560px){#moduuliSivu .ms-tausta svg{opacity:.05;}}
@media (prefers-reduced-motion:reduce){#moduuliSivu .ms-tausta svg{animation:none;opacity:.07;}}

/* Moduulikohtainen taustaposteri (kuvat/moduuli-*.jpg) — korvaa SVG-hologrammin,
   kun data-moduuli on asetettu (dashboard.html:n valikon avaus). Scrim pitää
   valikon sisällön luettavana posterin päällä. */
#moduuliSivu[data-moduuli] .ms-tausta svg{display:none;}
#moduuliSivu[data-moduuli="valta"] .ms-tausta{--poster:url("kuvat/moduuli-valtarakenteet.jpg");}
#moduuliSivu[data-moduuli="valvonta"] .ms-tausta{--poster:url("kuvat/moduuli-valvonta.jpg");}
/* Oikeat 16:9-vaakakuvat → puhdas cover reunasta reunaan (himmennetty
   opacityllä ettei syö valikon sisällön luettavuutta). */
#moduuliSivu[data-moduuli] .ms-tausta::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--poster);background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.6;}
@media (max-width:560px){#moduuliSivu[data-moduuli] .ms-tausta::before{opacity:.5;}}
/* Kun interaktiivinen vyöhykeposteri on läsnä (valta/valvonta), täysleveä
   taustaposteri on lähes sama kuva → vaimenna se hämäräksi bokeh-taustaksi
   ettei kaksi hologrammia kilpaile. */
#moduuliSivu.ms-interaktiivinen[data-moduuli] .ms-tausta::before{opacity:.14;filter:blur(3px);}
/* Muissa kuin cyber-/virasto-teemoissa moduulisivun (Valtarakenteet/Valvonta)
   taustaksi sama hienovarainen verkkoruudukko kuin etusivulla (body::before) —
   posteri on näissä teemoissa piilotettu (cyber-only), joten tausta jäisi muuten
   tyhjäksi. Cyber → posteri, virasto → puhdas, muut → verkkoruudukko. */
:root:not([data-theme="cyber"]):not([data-theme^="virasto"]) #moduuliSivu[data-moduuli] .ms-tausta{
  background-image:
    linear-gradient(90deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--t-sheen-ink),.03) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px;}

/* ============================================================
   INTERAKTIIVINEN VYÖHYKEPOSTERI (P5, integroitu 14.07.2026)
   16:9-taustakuva jonka jokainen alanäkymä on kuvaan upotettu,
   fokusoitava hotspot: lepotilassa himmeä, hoverissa/fokuksessa
   KIRKASTUU (mix-blend screen -spotlight) + hehku + tekstilabel.
   Prototyyppi: _kehitys/moduulitaustat/prototyyppi-standalone.html
   ============================================================ */
#moduuliSivu .ms-poster{
  position:relative;width:100%;aspect-ratio:16/9;margin:0 0 26px;
  border-radius:var(--r,14px);overflow:hidden;background:#04060a;
  border:1px solid color-mix(in srgb,var(--c,var(--cyan)) 30%,rgba(var(--t-sheen-ink),.10));
  box-shadow:0 24px 80px rgba(var(--t-shadow-ink),.55),0 0 0 1px rgba(0,0,0,.4) inset;}
#moduuliSivu .ms-poster-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) saturate(.95);
  user-select:none;-webkit-user-drag:none;pointer-events:none;}
/* Hotspot: läpinäkyvä <button> kuvan päällä. --x/--y = keskipiste, --w/--h = koko (kuvan %). */
#moduuliSivu .ms-hotspot{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  transform:translate(-50%,-50%);border-radius:48% / 46%;
  display:block;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  outline:none;-webkit-tap-highlight-color:transparent;}
/* Viivojen syttyminen: kirkastettu kopio SAMASTA taustakuvasta screen-blendillä,
   maskattuna hoveratun vyöhykkeen soikioon (JS asettaa --lit-maskin). Koska kuvan
   viivat ovat kirkkaita ja tausta lähes musta, kirkastus nostaa VAIN viivat esiin
   — tausta pysyy tummana (ei blobia). Yksi kerros per posteri; kuva-URL ja maski
   JS:stä. */
#moduuliSivu .ms-poster-lit{
  position:absolute;inset:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:brightness(1.75) contrast(1.3) saturate(1.4);
  mix-blend-mode:screen;opacity:0;transition:opacity .3s ease;
  -webkit-mask-image:var(--lit-maski,none);mask-image:var(--lit-maski,none);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
@media (prefers-reduced-motion:reduce){#moduuliSivu .ms-poster-lit{transition:none;}}
#moduuliSivu .ms-hotspot .hh-ring{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1.5px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;}
#moduuliSivu .ms-hotspot .hh-label{
  position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);
  white-space:nowrap;font-family:var(--serif);font-weight:700;letter-spacing:.08em;
  font-size:clamp(9px,1.15vw,13px);color:var(--text-body,var(--t-text-muted));
  /* Ei backdrop-filteriä (14.07.2026): 5 kpl blur-labelia posterin päällä + jatkuva
     msTaustaPulssi-animaatio pakotti backdrop-filterin uudelleenkompositoinnin joka
     framessa → lag. Tiiviimpi läpinäkymätön pilleritausta korvaa sumennuksen. */
  background:color-mix(in srgb,var(--bg-base,var(--t-bg)) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--cyan)) 30%,rgba(var(--t-sheen-ink),.10));
  border-radius:999px;padding:4px 11px;opacity:.62;
  /* pointer-events:auto → hover myös tekstin päältä sytyttää vyöhykkeen (napin lapsi). */
  pointer-events:auto;
  transition:opacity .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;}
#moduuliSivu .ms-hotspot .hh-label::before{
  content:"";position:absolute;left:50%;top:-6px;width:1px;height:6px;
  background:color-mix(in srgb,var(--c,var(--cyan)) 55%,transparent);transform:translateX(-50%);}
/* Label vyöhykkeen YLÄpuolelle (alareunan vyöhykkeille, ettei leikkaudu posterin
   overflow:hidden -alareunaan pienelläkin posterilla). */
#moduuliSivu .ms-hotspot.spot-lab-yla .hh-label{bottom:auto;top:-6px;transform:translate(-50%,-100%);}
#moduuliSivu .ms-hotspot.spot-lab-yla .hh-label::before{top:auto;bottom:-6px;}
/* Label vyöhykkeen VIEREEN (oikealle/vasemmalle), pystykeskitettynä — kun ylä/ala
   ei sovi (esim. maalitaulu posterin alareunassa). Yhdysviiva vaakasuoraan. */
#moduuliSivu .ms-hotspot.spot-lab-oikea .hh-label{left:auto;right:-6px;bottom:auto;top:50%;transform:translate(100%,-50%);}
#moduuliSivu .ms-hotspot.spot-lab-oikea .hh-label::before{left:-6px;top:50%;bottom:auto;width:6px;height:1px;transform:translateY(-50%);}
#moduuliSivu .ms-hotspot.spot-lab-vasen .hh-label{left:-6px;right:auto;bottom:auto;top:50%;transform:translate(-100%,-50%);}
#moduuliSivu .ms-hotspot.spot-lab-vasen .hh-label::before{left:auto;right:-6px;top:50%;bottom:auto;width:6px;height:1px;transform:translateY(-50%);}
/* Label vyöhykkeen VASEMMALLE, alareunaan kiinni JA työnnettynä kiinni itse kuvaan
   (maalitaulun vasen reuna ~42.5% kuvasta, kun vyöhykelaatikon vasen reuna on 40.5%).
   left:12% = 12% hotspotin leveydestä (17% posterista) → labelin oikea reuna ~42.5%
   posterista = kiinni maalitaulussa. Ei yhdysviivaa (label koskettaa kuvaa suoraan). */
#moduuliSivu .ms-hotspot.spot-lab-vasenala .hh-label{left:12%;right:auto;top:auto;bottom:0;transform:translate(-100%,0);}
#moduuliSivu .ms-hotspot.spot-lab-vasenala .hh-label::before{display:none;}
/* Reunaviiva (laatikko) EI näy hiirihoverissa — viivat syttyvät (.ms-poster-lit).
   Rengas jää VAIN näppäimistöfokukseen (WCAG-fokusindikaattori). */
#moduuliSivu .ms-hotspot:focus-visible .hh-ring{
  border-color:color-mix(in srgb,var(--c,var(--cyan)) 60%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--c,var(--cyan)) 35%,transparent),0 0 0 1px color-mix(in srgb,var(--c,var(--cyan)) 25%,transparent) inset;}
#moduuliSivu .ms-hotspot:hover .hh-label,
#moduuliSivu .ms-hotspot:focus-visible .hh-label{
  opacity:1;color:var(--text-strong,var(--t-text-bright));
  border-color:color-mix(in srgb,var(--c,var(--cyan)) 70%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--c,var(--cyan)) 30%,transparent);}
#moduuliSivu .ms-hotspot:focus-visible{
  box-shadow:0 0 0 3px var(--bg-base,var(--t-bg)),0 0 0 5px var(--c,var(--cyan));}
/* Kosketus (ei hoveria): vyöhykkeet pysyvästi hieman kirkkaina + labelit näkyvissä
   — sama oppi kuin Vertaa-napissa (hover-only katoaa mobiilissa). */
@media (hover:none){
  #moduuliSivu .ms-hotspot .hh-label{opacity:1;color:var(--text-strong,var(--t-text-bright));}
}
@media (max-width:560px){
  #moduuliSivu .ms-hotspot .hh-label{font-size:11px;padding:3px 8px;letter-spacing:.04em;}
}
@media (prefers-reduced-motion:reduce){
  #moduuliSivu .ms-hotspot .hh-ring{transition:none;}
  #moduuliSivu .ms-hotspot .hh-label{opacity:.85;transition:none;}
}
/* Otsikko posterin yllä (vinkki) */
#moduuliSivu .ms-poster-vihje{
  margin:0 0 10px;font-size:12.5px;color:var(--text-muted,var(--t-text-muted));
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#moduuliSivu .ms-poster-vihje b{font-family:var(--serif);font-weight:700;letter-spacing:.05em;
  color:var(--text-strong,var(--t-text-bright));font-size:13.5px;}
@media (max-width:560px){#moduuliSivu .ms-poster-vihje{font-size:11px;}}
/* "Kaikki näkymät" -väliotsikko rrivi-ruudukon yllä kun posteri on käytössä */
#moduuliSivu .ms-kaikki-otsikko{
  font-family:var(--serif);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:11px;color:var(--text-muted,var(--t-text-muted));margin:0 0 12px;}
/* Haarautuva malli (napsautus laajentaa): ryhmäsolmu (Lobbaus/Aktiivisuus) avaa
   ankkuroidun lapsivalikon posterin päälle. Emonäkymä on valikon 1. kohta. */
#moduuliSivu .ms-hotspot.has-children .hh-label::after{
  content:"▾";margin-left:5px;font-size:.85em;opacity:.85;display:inline-block;
  transition:transform .2s ease;}
#moduuliSivu .ms-hotspot.has-children[aria-expanded="true"] .hh-label::after{transform:rotate(180deg);}
#moduuliSivu .ms-haara{
  position:absolute;left:var(--x);top:var(--y);z-index:6;
  display:flex;flex-direction:column;gap:4px;padding:7px;border-radius:12px;
  background:color-mix(in srgb,var(--bg-base,var(--t-bg)) 93%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--cyan)) 35%,rgba(var(--t-sheen-ink),.10));
  box-shadow:0 14px 44px rgba(var(--t-shadow-ink),.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;}
#moduuliSivu .ms-haara.auki{opacity:1;visibility:visible;pointer-events:auto;}
/* Suunta 'vasen': valikko ryhmäsolmun vasemmalle, pystykeskitettynä (oikea reuna). */
#moduuliSivu .ms-haara--vasen{transform:translate(calc(-100% - 14px),-50%) scale(.96);}
#moduuliSivu .ms-haara--vasen.auki{transform:translate(calc(-100% - 14px),-50%) scale(1);}
/* Suunta 'yla': valikko ryhmäsolmun yläpuolelle, vaakakeskitettynä. */
#moduuliSivu .ms-haara--yla{transform:translate(-50%,calc(-100% - 14px)) scale(.96);}
#moduuliSivu .ms-haara--yla.auki{transform:translate(-50%,calc(-100% - 14px)) scale(1);}
#moduuliSivu .ms-haara-item{
  font-family:var(--serif);font-weight:600;letter-spacing:.02em;white-space:nowrap;
  font-size:clamp(10px,1.05vw,13px);color:var(--text-body,var(--t-text-muted));
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:6px 13px;cursor:pointer;text-align:left;
  transition:background .15s ease,color .15s ease,border-color .15s ease;}
#moduuliSivu .ms-haara-item:hover,
#moduuliSivu .ms-haara-item:focus-visible{
  background:color-mix(in srgb,var(--c,var(--cyan)) 16%,transparent);
  color:var(--text-strong,var(--t-text-bright));
  border-color:color-mix(in srgb,var(--c,var(--cyan)) 45%,transparent);outline:none;}
@media (prefers-reduced-motion:reduce){#moduuliSivu .ms-haara{transition:none;}}
/* Mobiili / kapea posteri: ankkurointi ei mahdu overflow:hidden -alueeseen →
   keskitä valikko posterille, jotta se ei leikkaudu. */
@media (max-width:560px){
  #moduuliSivu .ms-haara,
  #moduuliSivu .ms-haara--vasen,
  #moduuliSivu .ms-haara--yla{left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
    max-height:86%;overflow:auto;}
  #moduuliSivu .ms-haara.auki,
  #moduuliSivu .ms-haara--vasen.auki,
  #moduuliSivu .ms-haara--yla.auki{transform:translate(-50%,-50%) scale(1);}
  #moduuliSivu .ms-haara-item{font-size:12px;padding:8px 14px;}
}

/* ============================================================
   PELILLISYYSELEMENTIT (gamification) — .pelillinen-konventio
   ------------------------------------------------------------
   Pelillisyyteen kuuluvat visuaalit merkitään .pelillinen-luokalla.
   Nyt: moduuliposteritaustat (interaktiivinen vyöhykeposteri).
   Jatkossa: peliprofiili, XP-mittarit, saavutus-/tasoelementit,
   skini-/palkintovisuaalit yms.

   Pelilliset visuaalit näytetään VAIN cyber-teemalla (Kyber · neon).
   Kaikki muut teemat (virasto/virasto-tumma, metsa, milkyway, oikeavasen,
   revontulet, rosegold + tulevat) piilottavat KAIKKI .pelillinen-elementit
   yhdellä :not(cyber)-säännöllä. Uusi pelillisyyselementti perii tämän
   käytöksen pelkällä .pelillinen-luokalla — erillistä teemaehtoa ei
   tarvitse lisätä joka kerta.
   ============================================================ */
:root:not([data-theme="cyber"]) .pelillinen{ display:none !important; }
/* Moduulin täysleveä posteritausta on ::before-pseudo .ms-tausta-elementillä
   (sama elementti pitää myös SVG-hologrammin → luokkaa ei voi antaa suoraan).
   Interaktiivisen posterin saatetekstit ("Valitse näkymä" -vihje ja "Kaikki
   näkymät" -väliotsikko) menettävät merkityksensä ilman posteria → piilotetaan
   ne samalla. Jäljelle jää puhdas näkymäruudukko (ei-cyber-ilme). */
:root:not([data-theme="cyber"]) #moduuliSivu[data-moduuli] .ms-tausta::before,
:root:not([data-theme="cyber"]) #moduuliSivu .ms-poster-vihje,
:root:not([data-theme="cyber"]) #moduuliSivu .ms-kaikki-otsikko{ display:none !important; }

#moduuliSivu .nk-ryhma+.nk-ryhma{margin-top:26px;}
#moduuliSivu .rlista{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px;}
/* Kompakti vaaka-pilleri sivuston yleistä mittakaavaa myötäillen (ikoni · teksti ·
   badge). Pilleri + pistekuviotekstuuri + valojuova säilyvät. */
#moduuliSivu .rrivi{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:var(--r-pilleri,999px);
  border:1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb,var(--c,var(--cyan)) 9%,var(--bg-elevated,var(--t-bg-card))),color-mix(in srgb,var(--c,var(--cyan)) 9%,var(--bg-elevated,var(--t-bg-card)))) padding-box,
    linear-gradient(150deg,color-mix(in srgb,var(--c,var(--cyan)) 46%,transparent),rgba(var(--t-sheen-ink),.05) 60%) border-box;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
#moduuliSivu .rrivi .ri{width:30px;height:30px;flex:none;}
#moduuliSivu .rrivi .ri svg{width:16px;height:16px;}
#moduuliSivu .rrivi .rt{flex:1;min-width:0;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Badge (esim. "2023") omana pienenä pillerinä, ei sekoitu otsikkoon (vrt. standardi
   #etusivuUusi .rrivi .beta). align-self pitää sen vasemmassa laidassa. */
#moduuliSivu .rrivi .beta{flex:none;font-family:var(--serif);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--c,var(--cyan));background:color-mix(in srgb,var(--c,var(--cyan)) 16%,transparent);
  border-radius:var(--r-tag,3px);padding:.1rem .4rem;}
#moduuliSivu .rrivi .rarrow{display:none;}
#moduuliSivu .rrivi:hover{transform:translateY(-4px);
  box-shadow:0 12px 30px -10px color-mix(in srgb,var(--c,var(--cyan)) 46%,transparent);
  background:
    linear-gradient(color-mix(in srgb,var(--c,var(--cyan)) 15%,var(--bg-elevated,var(--t-bg-card))),color-mix(in srgb,var(--c,var(--cyan)) 15%,var(--bg-elevated,var(--t-bg-card)))) padding-box,
    linear-gradient(150deg,color-mix(in srgb,var(--c,var(--cyan)) 68%,transparent),color-mix(in srgb,var(--c,var(--cyan)) 20%,transparent)) border-box;}
/* Pistekuviotekstuuri kuten jaettu .ui-tab-btn -standardikomponentti — häivähtää
   esiin hoverissa. Korvaa aiemman jättimäisen per-kortti-logon (.rbg).
   Teemagating --fx-decor + hover-opacity --fx-texture (kanoniset tehostetokenit). */
#moduuliSivu .rrivi::before{content:'';display:var(--fx-decor,block);position:absolute;inset:0;
  z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--c,var(--cyan)) 65%,transparent) 1px,transparent 1.5px);
  background-size:9px 9px;background-position:center;
  opacity:0;transition:opacity .28s ease;
  -webkit-mask-image:linear-gradient(115deg,#000 12%,transparent 78%);mask-image:linear-gradient(115deg,#000 12%,transparent 78%);}
#moduuliSivu .rrivi:hover::before{opacity:var(--fx-texture,.18);}
/* Vino valojuova (sama @keyframes uiTabSheen kuin muissa sivuston painikkeissa) */
#moduuliSivu .rrivi::after{content:'';display:var(--fx-decor,block);position:absolute;top:0;left:0;height:100%;width:55%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,
    color-mix(in srgb,var(--c,var(--cyan)) 28%,transparent) 42%,
    color-mix(in srgb,var(--c,var(--cyan)) 55%,#fff 40%) 50%,
    color-mix(in srgb,var(--c,var(--cyan)) 28%,transparent) 58%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);opacity:0;}
#moduuliSivu .rrivi:hover::after{animation:uiTabSheen var(--fx-sheen-dur,1.4s) ease-out;}
#moduuliSivu .vertaile-nosto{margin-top:0;margin-bottom:22px;}
@media (max-width:560px){#moduuliSivu .rlista{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  #moduuliSivu .rrivi{transition:none;}
  #moduuliSivu .rrivi::after{display:none;}
}

/* ============================================================
   LISÄNÄKYMÄT — Ikärakenne / Kokemus / Tilastot & Aikajanat
   Landing-modernisointi. Kaikki scopetettu .lnv-alle jottei
   törmää sovelluksen muihin (geneerisiin) luokkanimiin.
   ============================================================ */
.lnv{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--t-text-dim);}

.lnv .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv .pagehead{font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-text);margin:6px 0 22px;font-size:clamp(20px,3.4vw,30px);text-shadow:0 0 20px color-mix(in srgb,var(--t-accent) 25%,transparent);}
.lnv .panel{background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:16px;
  box-shadow:0 24px 60px rgba(var(--t-shadow-ink),.4), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);padding:22px;}
.lnv .card-hover{transition:transform .22s ease, box-shadow .22s ease;}
.lnv .card-hover:hover{transform:translateY(calc(var(--fx-lift)*2));
  box-shadow:0 30px 66px rgba(var(--t-shadow-ink),.5), inset 0 1px 0 rgba(var(--t-sheen-ink),.05),
             0 0 26px color-mix(in srgb, var(--gl,var(--t-accent)) calc(var(--fx-glow)*.8), transparent);}
.lnv .seclab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv .track{height:8px;border-radius:999px;background:rgba(var(--t-sheen-ink),.06);overflow:hidden;}
.lnv .fill{height:100%;border-radius:999px;transform-origin:left;animation:lnvGrowX .9s ease both;}
.lnv .donut-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin-top:12px;}
.lnv .donut-mid{position:absolute;text-align:center;}
.lnv .donut-mid .big{font-family:'Orbitron',sans-serif;font-weight:900;font-size:46px;color:var(--t-text);line-height:1;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-accent) 50%,transparent));}
.lnv .donut-mid .cap{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-top:6px;}
.lnv .statgrid{display:grid;gap:16px;margin:20px 0;}
.lnv .stat{--gl:var(--t-accent);background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:16px;
  box-shadow:0 24px 60px rgba(var(--t-shadow-ink),.4), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);padding:20px;}
.lnv .stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv .stat .v{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,4vw,40px);line-height:1;margin-top:10px;
  color:var(--gl);text-shadow:0 0 22px color-mix(in srgb,var(--gl) 40%,transparent);}
.lnv .stat .s{font-size:11.5px;color:var(--t-text-dim);margin-top:8px;line-height:1.35;}
.lnv .source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;
  color:var(--t-text-muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--t-border);}
.lnv .source b{color:var(--t-text-dim);font-weight:700;}
.lnv .dot{width:4px;height:4px;border-radius:50%;background:var(--t-text-muted);display:inline-block;}
@keyframes lnvGrowX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes lnvGrowY{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes lnvDashDraw{from{stroke-dashoffset:var(--len);}to{stroke-dashoffset:0;}}

/* ---- IKÄRAKENNE ---- */
.lnv-ika .grid-2{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(300px,1.1fr);gap:20px;align-items:start;margin-top:20px;}
.lnv-ika .statgrid{grid-template-columns:repeat(3,1fr);}
/* minmax(0,1fr): pelkkä 1fr perii ikäryhmälabelien ("Alle 30-v.") min-content-
   leveyden → pylväikkö vuoti +65px mobiilissa (18.07.2026, sama juurisyy kuin
   .stat-grid). Labelit saavat rivittyä kapealla. */
.lnv-ika .vbars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(8px,2.2vw,28px);
  align-items:end;height:210px;margin-top:20px;padding:0 4px;}
@media (max-width:560px){
  .lnv-ika .vbar .lbl{white-space:normal;text-align:center;line-height:1.2;}
  /* Pylvaan oma min-width:auto esti kutistumisen alle labelin min-content-leveyden
     ("35-39-v." = 26px vs. pylvas 18px) -> +5px x6. Mitattu 20.07.2026. */
  .lnv-ika .vbar{min-width:0;}
  /* Spesifisyys .vbars mukaan: perussaanto .lnv-ika .vbar .lbl (font-size:11px) on
     tiedostossa TAMAN JALKEEN, joten samalla spesifisyydella se voittaisi. */
  .lnv-ika .vbars .vbar .lbl{overflow-wrap:anywhere;white-space:normal;font-size:11px;letter-spacing:0;}
  /* Lukema oli 17px Orbitron = 28px leveys 17,6px:n pylvaassa (10 pylvasta 258px:ssa). */
  .lnv-ika .vbars .vbar .cnt{font-size:11px;letter-spacing:0;}
}
.lnv-ika .vbar{display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end;}
.lnv-ika .vbar .col{width:100%;max-width:60px;border-radius:8px 8px 3px 3px;transform-origin:bottom;
  animation:lnvGrowY .9s cubic-bezier(.2,.7,.2,1) both;}
.lnv-ika .vbar .cnt{font-family:'Orbitron',sans-serif;font-weight:700;font-size:17px;color:var(--t-text);}
.lnv-ika .vbar .lbl{font-size:11px;letter-spacing:.05em;color:var(--t-text-muted);text-transform:uppercase;font-weight:700;}
.lnv-ika .legend{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:16px;justify-content:center;}
.lnv-ika .legend span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t-text-dim);letter-spacing:.04em;}
.lnv-ika .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.lnv-ika .agrow{display:grid;grid-template-columns:104px 1fr 96px;align-items:center;gap:14px;padding:9px 0;}
.lnv-ika .agrow + .agrow{border-top:1px solid rgba(var(--t-sheen-ink),.05);}
.lnv-ika .agrow .name{font-size:13px;color:var(--t-text-dim);font-weight:600;}
.lnv-ika .agrow .val{text-align:right;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--t-text);}
.lnv-ika .agrow .val small{color:var(--t-text-muted);font-size:11px;font-weight:400;font-family:'Source Sans 3',sans-serif;}
@media (max-width:820px){.lnv-ika .grid-2{grid-template-columns:1fr;}.lnv-ika .statgrid{grid-template-columns:1fr;}}

/* ---- KOKEMUS ---- */
.lnv-kok .grid-2{display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);gap:20px;align-items:start;margin-top:20px;}
.lnv-kok .statgrid{grid-template-columns:repeat(4,1fr);}
/* .top10-rivien leveyskatto (mitattu 20.07.2026, korjaus 2/6).
   Rivi (.trow) on grid, jonka raidat lasketaan konttinsa border-box-leveydesta;
   rivin oma padding (8px 10px) tulee sen PAALLE, joten rivi levenee tasan 20 px
   yli .top10:n. Nakyi Lobbauksessa (+8), Rahoituksessa (+10) ja
   Rahoitusepaselvyydessa (+10) seka desktopilla etta mobiilissa - ei
   dokumenttitason vaakascrollia, joten pelkka scrollWidth-mittaus ei nappaa.
   max-width EIKA width: ei kavenna rivia joka on luonnostaan konttia kapeampi.
   Yksi saanto kattaa kaikki .top10-skooppit (kok/lb/rah/kyt) ja tulevat. */
.top10 > *{max-width:100%;}
.lnv-kok .top10{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.lnv-kok .trow{display:grid;grid-template-columns:minmax(24px,auto) 54px 1fr 66px;align-items:center;gap:12px;}
.lnv-kok .trow .rank{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--t-text-muted);text-align:right;}
.lnv-kok .badge{justify-self:start;font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 8px;border-radius:999px;text-align:center;}
.lnv-kok .trow .who{min-width:0;}
.lnv-kok .trow .who .nm{font-size:13px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-kok .trow .who .track{margin-top:7px;height:6px;}
.lnv-kok .trow .val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:19px;text-align:right;}
.lnv-kok .trow .val small{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:11px;color:var(--t-text-muted);}
.lnv-kok .legend{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.lnv-kok .legend .li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t-text-dim);}
.lnv-kok .legend i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.lnv-kok .legend .n{margin-left:auto;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--t-text);}
.lnv-kok .prow{display:grid;grid-template-columns:56px 1fr 96px;align-items:center;gap:12px;padding:8px 0;}
.lnv-kok .prow + .prow{border-top:1px solid rgba(var(--t-sheen-ink),.05);}
.lnv-kok .prow .pn{font-weight:700;font-size:11px;letter-spacing:.04em;text-align:right;}
.lnv-kok .prow .pv{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--t-text);text-align:right;}
.lnv-kok .prow .pv small{font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:11px;color:var(--t-text-muted);}
.lnv-kok .plist{display:flex;flex-direction:column;gap:.55rem;}
.lnv-kok .prsn{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:4px;border-radius:8px;transition:background .15s;}
.lnv-kok .prsn:hover{background:rgba(var(--t-sheen-ink),.04);}
.lnv-kok .prsn img{width:26px;height:32px;object-fit:cover;object-position:top;border-radius:3px;flex-shrink:0;}
.lnv-kok .prsn .nm{font-size:12.5px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-kok .prsn .mt{font-size:11px;}
@media (max-width:860px){.lnv-kok .grid-2{grid-template-columns:1fr;}.lnv-kok .statgrid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.lnv-kok .statgrid{grid-template-columns:1fr;}}

/* ---- TILASTOT & AIKAJANAT ---- */
.lnv-til .tabrow{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px;}
.lnv-til .tabrow .ui-tab-btn{flex:1 1 0;min-width:140px;}
.lnv-til .togline{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin-bottom:6px;}
.lnv-til .toggroup{display:flex;flex-direction:column;gap:8px;}
.lnv-til .toglbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv-til .segset{display:inline-flex;gap:8px;flex-wrap:wrap;}
.lnv-til .segset .ui-tab-btn{flex:0 0 auto;min-width:0;padding:.5rem .8rem;font-size:12px;}
.lnv-til .chartwrap{margin-top:16px;}
.lnv-til .chartwrap svg{width:100%;height:auto;display:block;}
.lnv-til .legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;}
.lnv-til .legend .li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t-text-dim);letter-spacing:.03em;}
.lnv-til .legend i{width:20px;height:3px;border-radius:2px;display:inline-block;}
.lnv-til .cbars{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.lnv-til .cbar{display:grid;grid-template-columns:minmax(110px,160px) 1fr 52px;align-items:center;gap:12px;}
.lnv-til .cbar .cn{font-size:12.5px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-til .cbar .cv{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--t-text);text-align:right;}
.lnv-til .hint{font-size:12px;color:var(--t-text-muted);margin-top:14px;line-height:1.5;}

/* ---- LOBBAUS (Valvontamoduuli) ---- */
.lnv-lb .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-lb .lb-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-bronze);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-bronze) 55%,transparent));}
.lnv-lb .lb-symbol svg{width:100%;height:100%;display:block;}

/* Uusimmat merkinnat (.lnv-mrk) — PUUTTUI KOKONAAN, lisatty 28.07.2026.
   Kaytt. loydos: nakymaa avatessa ruudun tayttaa jattimainen lahjapaketti-
   ikoni, joka on skrollattava ohi ennen kuin sisallosta nakee mitaan.
   Syy: dashboard.html:n .mrk-symbol-divissa on <svg viewBox="0 0 24 24">
   ILMAN width/height-attribuutteja. Koko tulee muilla nakymilla CSS:sta,
   mutta .mrk-symbol oli ainoa 11 symboliluokasta jolle saantoa ei ollut
   koskaan kirjoitettu -> SVG venyi tayttamaan konttinsa.
   Sama kaava kuin .lb-symbol (molemmat pronssinsavyisia). */
.lnv-mrk .mrk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-bronze,#d4a017);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-bronze,#d4a017) 55%,transparent));}
.lnv-mrk .mrk-symbol svg{width:100%;height:100%;display:block;}
.lnv-lb .kausibar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0 22px;}
.lnv-lb .kausibar .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-right:4px;}
.lnv-lb .kausibar #lobbausKausiTabit{display:flex;gap:8px;flex-wrap:wrap;}
.lnv-lb .kausibar .ui-tab-btn{--ui-tab-color:var(--t-bronze);flex:0 0 auto;min-width:0;padding:.5rem .9rem;font-size:12px;}
.lnv-lb .panel{position:relative;overflow:hidden;}
.lnv-lb .panel > *{position:relative;z-index:1;}
.lnv-lb .motif{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:200px;height:200px;
  color:var(--gl,var(--t-bronze));opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--t-bronze)) 55%,transparent));}
.lnv-lb .motif svg{width:100%;height:100%;display:block;}
.lnv-lb .card-hover:hover .motif{opacity:.5;}
.lnv-lb .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.lnv-lb .grid-2{grid-template-columns:1fr;}}
.lnv-lb .lobbaus-aikasarja{display:flex;align-items:flex-end;gap:14px;height:190px;margin-top:16px;padding-top:20px;}
.lnv-lb .vbar{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;cursor:pointer;}
.lnv-lb .vbar .vb-num{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--t-bronze);margin-bottom:8px;
  text-shadow:0 0 10px color-mix(in srgb,var(--t-bronze) 45%,transparent);}
.lnv-lb .vbar .vb-fill{width:100%;border-radius:8px 8px 0 0;transform-origin:bottom;animation:lnvGrowY .9s ease both;
  background:linear-gradient(180deg,color-mix(in srgb,var(--t-bronze) 88%,#fff 8%),color-mix(in srgb,var(--t-bronze) 42%,transparent));
  box-shadow:0 0 16px color-mix(in srgb,var(--t-bronze) 38%,transparent), inset 0 1px 0 rgba(var(--t-sheen-ink),.16);
  border:1px solid color-mix(in srgb,var(--t-bronze) 45%,transparent);border-bottom:none;}
.lnv-lb .vbar.active .vb-fill{box-shadow:0 0 24px color-mix(in srgb,var(--t-bronze) 60%,transparent), inset 0 1px 0 rgba(var(--t-sheen-ink),.24);}
.lnv-lb .vbar .vb-lbl{font-size:11px;color:var(--t-text-muted);margin-top:9px;text-align:center;letter-spacing:.02em;white-space:nowrap;}
/* Kausikorostus: kaavio nayttaa AINA kaikki kaudet — kausivalinta ei vaihda
   dataa vaan korostaa valitun pylvaan ja himmentaa muut. .has-active on
   kontissa vain kun jokin yksittainen kausi on valittu ("Kaikki kaudet" ->
   kaikki pylvaat taydella kirkkaudella). Siirtymat tekevat vaihdosta
   luettavan; pylvaita EI renderoida uudelleen kausiklikkauksessa (app.js),
   joten kasvuanimaatio ei kaynnisty joka klikkauksella uudestaan. */
.lnv-lb .vbar .vb-num,
.lnv-lb .vbar .vb-lbl{transition:color .25s ease,opacity .25s ease,text-shadow .25s ease;}
.lnv-lb .vbar .vb-fill{transition:opacity .25s ease,filter .25s ease,box-shadow .25s ease,border-color .25s ease;}
.lnv-lb .lobbaus-aikasarja.has-active .vbar:not(.active) .vb-fill{opacity:.3;filter:saturate(.35);
  box-shadow:none;border-color:color-mix(in srgb,var(--t-bronze) 22%,transparent);}
.lnv-lb .lobbaus-aikasarja.has-active .vbar:not(.active) .vb-num{color:var(--t-text-faint);text-shadow:none;}
.lnv-lb .lobbaus-aikasarja.has-active .vbar:not(.active) .vb-lbl{opacity:.55;}
.lnv-lb .lobbaus-aikasarja.has-active .vbar.active .vb-fill{filter:brightness(1.18) saturate(1.15);}
.lnv-lb .lobbaus-aikasarja.has-active .vbar.active .vb-num{color:var(--t-text-bright);
  text-shadow:0 0 14px color-mix(in srgb,var(--t-bronze) 70%,transparent);}
.lnv-lb .lobbaus-aikasarja.has-active .vbar.active .vb-lbl{color:var(--t-text);font-weight:700;}
.lnv-lb .top10{display:flex;flex-direction:column;gap:11px;margin-top:16px;}
.lnv-lb .trow{display:grid;grid-template-columns:minmax(24px,auto) 1fr 66px;align-items:center;gap:12px;
  cursor:pointer;padding:6px 8px;margin:0 -8px;border-radius:10px;transition:background .18s ease;}
.lnv-lb .trow:hover{background:rgba(var(--t-sheen-ink),.035);}
.lnv-lb .trow .rank{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--t-text-muted);text-align:right;}
.lnv-lb .trow .who{min-width:0;}
.lnv-lb .trow .who .nm{font-size:13.5px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-lb .trow .who .track{margin-top:7px;}
.lnv-lb .trow .val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;text-align:right;}
.lnv-lb .lb-donut-list{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
.lnv-lb .lb-donut-row{display:grid;grid-template-columns:40px 1fr 52px;align-items:center;gap:14px;}
.lnv-lb .lb-donut-dot{width:40px;height:40px;flex:0 0 auto;}
.lnv-lb .lb-donut-dot svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.lnv-lb .lb-donut-row .dl{font-size:13.5px;color:var(--t-text-dim);}
.lnv-lb .lb-donut-row .dl small{display:block;font-size:11px;color:var(--t-text-muted);margin-top:2px;letter-spacing:.02em;}
.lnv-lb .lb-donut-row .dp{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;text-align:right;}
.lnv-lb .lb-pagin{display:flex;align-items:center;gap:.25rem;margin-top:.6rem;flex-wrap:wrap;font-size:11px;color:var(--t-text-muted);}
.lnv-lb .lb-pagin button{font-family:'Source Sans 3',sans-serif;font-size:11px;padding:.2rem .5rem;border-radius:6px;cursor:pointer;background:transparent;}

/* ---- RAHOITUS (Valvontamoduuli) ---- */
.lnv-rah .pagehead-row{display:flex;align-items:center;gap:18px;}
/* Vierivä sisältökehys (kanoninen malli, sama kuin .kan-kehys) */
.lnv-rah .rah-kehys{flex:1;overflow-y:auto;padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}
.lnv-rah .rah-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-accent) 55%,transparent));}
.lnv-rah .rah-symbol svg{width:100%;height:100%;display:block;}
.lnv-rah .rah-osiobar,.pp-osiobar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 22px;}
@media (max-width:820px){.lnv-rah .rah-osiobar,.pp-osiobar{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.lnv-rah .rah-osiobar,.pp-osiobar{grid-template-columns:1fr;}}
/* Kahden kortin variantti (Lupausindeksi, Johdonmukaisuus). Omana luokkanaan
   EIKA inline-tyylina: inline voittaisi yllaolevat media queryt, jolloin kaksi
   korttia jaisi vierekkain myos 375 px:lla. */
.pp-osiobar-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:460px){.pp-osiobar-2{grid-template-columns:1fr;}}
.lnv-rah .rah-osio-btn,.pp-osio-btn{
  --ui-tab-color:var(--t-accent);
  position:relative;overflow:hidden;isolation:isolate;text-align:left;
  display:flex;flex-direction:column;gap:5px;
  padding:14px 16px;border:1px solid transparent;border-radius:14px;cursor:pointer;
  background:
    linear-gradient(var(--t-bg-card),var(--t-bg-card)) padding-box,
    linear-gradient(150deg,color-mix(in srgb,var(--ui-tab-color) 24%,transparent),rgba(var(--t-sheen-ink),.05) 60%) border-box;
  transition:transform .2s ease, box-shadow .2s ease;
}
.lnv-rah .rah-osio-btn > *,.pp-osio-btn > *{position:relative;z-index:2;}
.lnv-rah .rah-osio-btn .ot,.pp-osio-btn .ot{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-text-dim);}
.lnv-rah .rah-osio-btn .od,.pp-osio-btn .od{font-size:11px;line-height:1.35;color:var(--t-text-muted);}
.lnv-rah .rah-osio-btn::before,.pp-osio-btn::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ui-tab-color) 65%,transparent) 1px, transparent 1.5px);
  background-size:9px 9px;background-position:center;opacity:0;transition:opacity .28s ease;
  -webkit-mask-image:linear-gradient(115deg,#000 12%,transparent 78%);mask-image:linear-gradient(115deg,#000 12%,transparent 78%);
}
.lnv-rah .rah-osio-btn::after,.pp-osio-btn::after{
  content:"";position:absolute;top:0;left:0;height:100%;width:55%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,
    color-mix(in srgb,var(--ui-tab-color) 30%,transparent) 42%,
    color-mix(in srgb,var(--ui-tab-color) 55%,#fff 40%) 50%,
    color-mix(in srgb,var(--ui-tab-color) 30%,transparent) 58%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);opacity:0;
}
.lnv-rah .rah-osio-btn:hover,.pp-osio-btn:hover{transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(var(--t-shadow-ink),.45),0 0 24px color-mix(in srgb,var(--ui-tab-color) 32%,transparent);}
.lnv-rah .rah-osio-btn:hover .ot,.pp-osio-btn:hover .ot{color:var(--t-text);}
.lnv-rah .rah-osio-btn:hover::before,.pp-osio-btn:hover::before{opacity:.16;}
.lnv-rah .rah-osio-btn:hover::after,.pp-osio-btn:hover::after{animation:uiTabSheen 1.4s ease-out;}
.lnv-rah .rah-osio-btn.on,.pp-osio-btn.on{
  background:
    linear-gradient(color-mix(in srgb,var(--ui-tab-color) 14%,var(--t-bg-card)),color-mix(in srgb,var(--ui-tab-color) 14%,var(--t-bg-card))) padding-box,
    linear-gradient(150deg,color-mix(in srgb,var(--ui-tab-color) 72%,transparent),color-mix(in srgb,var(--ui-tab-color) 22%,transparent)) border-box;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-tab-color) 28%,transparent),
             0 0 22px color-mix(in srgb,var(--ui-tab-color) 22%,transparent),
             inset 0 0 22px color-mix(in srgb,var(--ui-tab-color) 8%,transparent);
}
.lnv-rah .rah-osio-btn.on .ot,.pp-osio-btn.on .ot{color:var(--ui-tab-color);}
.lnv-rah .panel{position:relative;overflow:hidden;}
.lnv-rah .panel > *{position:relative;z-index:1;}
.lnv-rah .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
.lnv-rah .motif{position:absolute;right:-26px;top:50%;transform:translateY(-50%);width:200px;height:200px;
  color:var(--gl,var(--t-accent));opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--t-accent)) 60%,transparent));}
.lnv-rah .motif svg{width:100%;height:100%;display:block;}
.lnv-rah .card-hover:hover .motif{opacity:.5;}
.lnv-rah .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.lnv-rah .grid-2{grid-template-columns:1fr;}}
.lnv-rah .tabrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 18px;}
.lnv-rah .tabrow .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-right:2px;}
.lnv-rah .tabrow .yr-note{font-size:11px;color:var(--t-warning);font-weight:600;}
/* Vuosichipit eivät saa kutistua sisältöään kapeammiksi (esim. "2023 tammi–huhti"
   leikkautui molemmista päistä) — kasvu ok, kutistuminen ei; rivi rivittyy tarvittaessa */
.lnv-rah .tabrow .ui-tab-btn{flex:1 0 auto;min-width:0;}
.lnv-rah .top10{display:flex;flex-direction:column;gap:11px;margin-top:6px;}
.lnv-rah .trow{display:grid;grid-template-columns:minmax(26px,auto) 52px 1fr 108px;align-items:center;gap:12px;
  padding:8px 10px;margin:0 -10px;border-radius:11px;transition:background .18s ease,box-shadow .18s ease;}
.lnv-rah .trow.clk{cursor:pointer;}
.lnv-rah .trow.clk:hover{background:rgba(var(--t-sheen-ink),.04);
  box-shadow:inset 0 0 0 1px var(--t-border),0 0 22px color-mix(in srgb,var(--rc,var(--t-accent)) 12%,transparent);}
.lnv-rah .trow .rank{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--t-text-muted);text-align:right;}
.lnv-rah .badge{justify-self:start;font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-rah .trow .who{min-width:0;}
.lnv-rah .trow .who .nm{font-size:13.5px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-rah .trow .who .sub{font-size:11px;color:var(--t-text-muted);margin-top:1px;}
.lnv-rah .trow .who .track{margin-top:8px;}
.lnv-rah .trow .val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:17px;text-align:right;line-height:1.1;}
.lnv-rah .trow .val small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--t-text-muted);margin-top:2px;text-transform:none;}
.lnv-rah .rtable{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px;}
.lnv-rah .rtable th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;
  text-align:right;padding:10px 12px;border-bottom:1px solid var(--t-border);}
.lnv-rah .rtable th:first-child{text-align:left;}
.lnv-rah .rtable td{padding:11px 12px;border-bottom:1px solid rgba(var(--t-sheen-ink),.04);text-align:right;color:var(--t-text-dim);
  font-variant-numeric:tabular-nums;}
.lnv-rah .rtable td:first-child{text-align:left;}
.lnv-rah .rtable tr:hover td{background:rgba(var(--t-sheen-ink),.025);}
.lnv-rah .rtable .pn{display:inline-flex;align-items:center;gap:9px;}
.lnv-rah .rtable .pdot{width:9px;height:9px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 8px currentColor;}
.lnv-rah .rtable td.hi{color:var(--t-accent-text, var(--t-accent));font-weight:700;}
.lnv-rah .rtable col.hicol,.lnv-rah .rtable th.hicol{background:color-mix(in srgb,var(--t-accent) 8%,transparent);}
.lnv-rah .rtable td.hicol{background:color-mix(in srgb,var(--t-accent) 5%,transparent);}
.lnv-rah .rtable .delta.up{color:var(--t-positive);}
.lnv-rah .rtable .delta.dn{color:#ff4d6d;}
.lnv-rah .rah-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 18px;}
.lnv-rah .rah-search{position:relative;flex:1 1 240px;min-width:200px;}
.lnv-rah .rah-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t-text-muted);pointer-events:none;}
.lnv-rah .rah-search input{width:100%;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:13.5px;padding:11px 14px 11px 38px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.lnv-rah .rah-search input::placeholder{color:var(--t-text-muted);}
.lnv-rah .rah-search input:focus{outline:none;border-color:color-mix(in srgb,var(--t-accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--t-accent) 30%,transparent),0 0 20px color-mix(in srgb,var(--t-accent) 20%,transparent);}
.lnv-rah .rah-sortset{display:flex;gap:8px;flex-wrap:wrap;}
.lnv-rah .rah-banner{display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--t-accent) 6%,var(--t-bg-panel));
  border:1px solid color-mix(in srgb,var(--t-accent) 24%,var(--t-border));border-radius:14px;padding:16px 18px;margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(var(--t-sheen-ink),.04);}
.lnv-rah .rah-banner .bi{flex:0 0 auto;width:22px;height:22px;color:var(--t-accent);margin-top:1px;}
.lnv-rah .rah-banner .bi svg{width:100%;height:100%;}
.lnv-rah .rah-banner .bt{font-size:13px;line-height:1.55;color:var(--t-text-dim);}
.lnv-rah .rah-banner .bt b{color:var(--t-text);font-weight:700;}
.lnv-rah .cand-list{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.lnv-rah .cand{position:relative;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:14px;padding:16px 18px;
  transition:transform .2s ease, box-shadow .2s ease;overflow:hidden;}
.lnv-rah .cand:hover{transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,var(--cc,var(--t-accent)) 16%,transparent);}
/* Kortti avaa ehdokkaan erittelyn. Kosketuslaitteella hover ei kerro mitaan,
   joten affordanssi on myos "+N muuta" -linkissa (varillinen, nuoli perassa)
   ja fokusrenkaassa — kortti on role="button" + tabindex. */
.lnv-rah .cand.clk{cursor:pointer;}
.lnv-rah .cand.clk:focus-visible{outline:2px solid var(--cc,var(--t-accent));outline-offset:2px;}
.lnv-rah .cand .dn-lisaa{font-weight:700;}
.lnv-rah .cand.clk:hover .dn-lisaa{text-decoration:underline;}
.lnv-rah .trow.clk:focus-visible{outline:2px solid var(--rc,var(--t-accent));outline-offset:-2px;}
/* Erittelymodaalin palkkirivi (nimi · palkki · summa). Kapealla ruudulla
   summa nousee nimen viereen ja palkki venyy omalle rivilleen — muuten
   kolme saraketta ei mahdu 343 px:n modaaliin. */
.lnv-rah .rah-mrivi{align-items:center;cursor:default;grid-template-areas:"n b v";}
.lnv-rah .rah-mrivi .mnimi{grid-area:n;min-width:0;font-size:12.5px;line-height:1.35;
  color:var(--t-text-dim);overflow-wrap:anywhere;}
.lnv-rah .rah-mrivi .who{grid-area:b;}
.lnv-rah .rah-mrivi .val{grid-area:v;}
@media (max-width:560px){
  .lnv-rah .rah-mrivi{grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"n v" "b b";row-gap:6px;column-gap:10px;}
  .lnv-rah .rah-mrivi .val{font-size:12.5px;}
}
/* minmax(0,1fr): pelka 1fr perii ehdokasnimen+badgen min-content-leveyden,
   jolloin .cand-id vuoti ~100 px kortin ulkopuolelle 375 px:lla (mitattu
   29.07.2026). Kapealla ruudulla lohkot latautuvat allekkain. */
.lnv-rah .cand-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;}
@media (max-width:560px){
  .lnv-rah .cand-top{grid-template-columns:minmax(0,1fr);gap:12px;}
  .lnv-rah .cand-money{flex-wrap:wrap;gap:12px 18px;text-align:left;}
  .lnv-rah .cand-id .nm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
  .lnv-rah .cand-id .vp{overflow-wrap:anywhere;}
}
.lnv-rah .cand-id{display:flex;align-items:center;gap:11px;min-width:0;}
.lnv-rah .cand-id .nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--t-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-rah .cand-id .vp{font-size:11.5px;color:var(--t-text-muted);margin-top:2px;}
.lnv-rah .cand-money{display:flex;gap:20px;text-align:right;}
.lnv-rah .cand-money .cm{min-width:64px;}
.lnv-rah .cand-money .cm .cmk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv-rah .cand-money .cm .cmv{font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;margin-top:5px;line-height:1;}
.lnv-rah .cand-bar{height:6px;border-radius:999px;background:rgba(var(--t-sheen-ink),.06);margin:13px 0 11px;overflow:hidden;display:flex;}
.lnv-rah .cand-bar .seg{height:100%;transform-origin:left;animation:lnvGrowX .9s ease both;}
.lnv-rah .cand-donors{display:flex;gap:8px;flex-wrap:wrap;}
.lnv-rah .cand-donors .dn{font-size:11px;color:var(--t-text-muted);background:rgba(var(--t-sheen-ink),.04);border:1px solid var(--t-border);
  border-radius:999px;padding:4px 11px;}
.lnv-rah .cand-donors .dn b{color:var(--t-text-dim);font-weight:700;}
.lnv-rah .cand-donors .lead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;align-self:center;margin-right:2px;}
.lnv-rah .explain{background:var(--t-bg-card);border:1px solid var(--t-border);border-left:2px solid var(--eb,var(--t-accent));
  border-radius:12px;padding:15px 18px;margin-bottom:20px;font-size:13px;line-height:1.6;color:var(--t-text-dim);}
.lnv-rah .explain b{color:var(--t-text);font-weight:700;}
.lnv-rah .explain .pos{color:var(--t-positive);font-weight:700;}
.lnv-rah .explain .neg{color:#ff4d6d;font-weight:700;}
#osio-epaselvyydet .stat,#osio-epaselvyydet .panel{--gl:#ff4d6d;}

/* ---- KYTKÖKSET (Valvontamoduuli) — tunnusväri --acc-kyt (teemakohtainen) ---- */
.lnv-kyt{--kyt-accent:var(--acc-kyt);}
/* Vierivä sisältökehys (kanoninen malli, sama kuin .kan-kehys) */
.lnv-kyt .kytk-kehys{flex:1;overflow-y:auto;padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}
.lnv-kyt .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-kyt .kytk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--kyt-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--kyt-accent) 55%,transparent));}
.lnv-kyt .kytk-symbol svg{width:100%;height:100%;display:block;}
.lnv-kyt .pagehead-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.lnv-kyt .beta-pill{font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kyt-accent);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--kyt-accent) 50%,transparent);
  background:color-mix(in srgb,var(--kyt-accent) 10%,transparent);align-self:center;}
.lnv-kyt .ui-tab-btn{--ui-tab-color:var(--kyt-accent);}
/* Väli välilehtirivin ja alla olevan paneelin väliin: ilman sitä painikkeet
   näyttivät istuvan kiinni paneelin reunassa (kayttajan havainto 29.07.2026). */
/* margin-bottom 8px + rivin oma padding-block 8px = sama 16 px kuin ennen
   (ks. .kytk-tabs-row -pystypehmusteen selitys) */
.lnv-kyt .kytk-tabs-row{display:flex;gap:8px;margin-bottom:8px;}
.lnv-kyt .kytk-tabs-row .ui-tab-btn{flex:0 0 auto;min-width:0;}
.lnv-kyt .panel{position:relative;overflow:hidden;}
.lnv-kyt .panel > *{position:relative;z-index:1;}
.lnv-kyt .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
.lnv-kyt .motif{position:absolute;right:-30px;top:50%;transform:translateY(-50%) rotate(-12deg);width:220px;height:220px;
  color:var(--gl,var(--kyt-accent));opacity:.05;pointer-events:none;transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--kyt-accent)) 60%,transparent));}
.lnv-kyt .motif svg{width:100%;height:100%;display:block;}
.lnv-kyt .card-hover:hover .motif{opacity:.42;}
.lnv-kyt .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.lnv-kyt .grid-2{grid-template-columns:1fr;}}
.lnv-kyt .kytk-banner{display:flex;gap:14px;align-items:flex-start;background:color-mix(in srgb,var(--kyt-accent) 06%,transparent);
  border:1px solid color-mix(in srgb,var(--kyt-accent) 24%,transparent);border-radius:14px;padding:16px 18px;margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(var(--t-sheen-ink),.04);}
.lnv-kyt .kytk-banner .bi{flex:0 0 auto;width:22px;height:22px;color:var(--kyt-accent);margin-top:1px;}
.lnv-kyt .kytk-banner .bi svg{width:100%;height:100%;}
.lnv-kyt .kytk-banner .bt{font-size:13px;line-height:1.55;color:var(--t-text-dim);}
.lnv-kyt .kytk-banner .bt b{color:var(--t-text);font-weight:700;}
.lnv-kyt .kytk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 18px;}
.lnv-kyt .kytk-search{position:relative;flex:1 1 240px;min-width:200px;}
.lnv-kyt .kytk-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t-text-muted);pointer-events:none;}
.lnv-kyt .kytk-search input{width:100%;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:13.5px;padding:11px 34px 11px 38px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.lnv-kyt .kytk-search input::placeholder{color:var(--t-text-muted);}
.lnv-kyt .kytk-search input:focus{outline:none;border-color:color-mix(in srgb,var(--kyt-accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kyt-accent) 30%,transparent),0 0 20px color-mix(in srgb,var(--kyt-accent) 20%,transparent);}
.lnv-kyt .kytk-haku-tyhjenna{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  border:none;background:transparent;color:var(--t-text-muted);cursor:pointer;font-size:12px;line-height:1;
  border-radius:50%;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease;}
.lnv-kyt .kytk-haku-tyhjenna:hover{color:var(--t-text);background:rgba(var(--t-sheen-ink),.08);}
.lnv-kyt .kytk-filters{display:flex;gap:8px;flex-wrap:wrap;}
.lnv-kyt .kytk-select{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;color:var(--t-text-dim);
  font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;padding:10px 14px;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;}
.lnv-kyt .kytk-select:focus{outline:none;border-color:color-mix(in srgb,var(--kyt-accent) 45%,transparent);}
.lnv-kyt .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-kyt .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.lnv-kyt .tag.toimielin{color:var(--kyt-accent);border:1px solid color-mix(in srgb,var(--kyt-accent) 45%,transparent);background:color-mix(in srgb,var(--kyt-accent) 10%,transparent);}
.lnv-kyt .tag.sidonnaisuus{color:var(--t-warning);border:1px solid color-mix(in srgb,var(--t-warning) 40%,transparent);background:color-mix(in srgb,var(--t-warning) 9%,transparent);}
.lnv-kyt .org-list{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.lnv-kyt .org{position:relative;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:14px;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;}
.lnv-kyt .org:hover{transform:translateY(calc(var(--fx-lift)*1.5));
  box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,var(--kyt-accent) calc(var(--fx-glow)*.55),transparent);}
/* minmax(0,1fr) EI 1fr: '1fr' = 'minmax(auto,1fr)' eli min-content-lattia, jolloin pitka
   jarjestonimi ("Itameren parlamentaarikkokonferenssi") levittaa sarakkeen yli kontin
   ILMAN dokumenttitason vaakascrollia. Mitattu 20.07.2026: 61 ylivuotoa, pahimmillaan
   +122 px @ 375 px. Ks. CLAUDE.md "grid-min-content-ansa". */
.lnv-kyt .org-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px 18px;cursor:pointer;}
.lnv-kyt .org-id{min-width:0;}
/* min-width:0 + overflow-wrap: .nm on inline-flex, jonka anonyymilla tekstilapsella on
   oletuksena min-width:auto -> se ei kutistu min-content-leveytta pienemmaksi. */
.lnv-kyt .org-id .nm{display:inline-flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--t-text);min-width:0;overflow-wrap:anywhere;}
.lnv-kyt .org-id .nm .info{width:14px;height:14px;color:var(--t-text-muted);flex:0 0 auto;}
.lnv-kyt .org-id .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px;}
.lnv-kyt .org-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
/* max-width + wrap: yksittainen nimichippi leveampi kuin kontti ei mahdu rivittymaan
   (white-space:nowrap), jolloin .org-chips vuoti 5 px yli. Pitka nimi rivittyy nyt
   chipin sisalla sen sijaan etta katkeaisi tai vuotaisi - nimea ei koskaan typisteta. */
.lnv-kyt .ed-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:normal;
  max-width:100%;overflow-wrap:anywhere;
  border:1px solid;background:rgba(var(--t-sheen-ink),.02);cursor:pointer;}
.lnv-kyt .org-right{display:flex;align-items:center;gap:14px;}
.lnv-kyt .org-count{text-align:right;}
.lnv-kyt .org-count .n{font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;line-height:1;color:var(--kyt-accent);
  text-shadow:0 0 16px color-mix(in srgb,var(--kyt-accent) 40%,transparent);}
.lnv-kyt .org-count .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-top:4px;}
.lnv-kyt .org-caret{width:18px;height:18px;color:var(--t-text-muted);transition:transform .25s ease;}
.lnv-kyt .org.open .org-caret{transform:rotate(180deg);color:var(--kyt-accent);}
.lnv-kyt .org-detail{max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:1px solid transparent;}
.lnv-kyt .org.open .org-detail{max-height:600px;border-top:1px solid var(--t-border);}
.lnv-kyt .org-detail-inner{padding:6px 18px 16px;}
.lnv-kyt .ed-row{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(var(--t-sheen-ink),.04);cursor:pointer;}
.lnv-kyt .ed-row:last-child{border-bottom:none;}
.lnv-kyt .ed-row .pdot{width:9px;height:9px;border-radius:2px;box-shadow:0 0 8px currentColor;}
.lnv-kyt .ed-row .en{font-size:13.5px;color:var(--t-text-dim);}
.lnv-kyt .ed-row .ep{font-size:11px;color:var(--t-text-muted);margin-top:1px;}
.lnv-kyt .ed-row .role{font-size:11.5px;color:var(--t-text-muted);text-align:right;}
.lnv-kyt .ed-row .role b{color:var(--t-text-dim);font-weight:700;}
.lnv-kyt .role-pj{color:var(--kyt-accent) !important;}
.lnv-kyt .pair-list{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.lnv-kyt .pair{position:relative;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:14px;padding:15px 18px;
  transition:transform .2s ease, box-shadow .2s ease;overflow:hidden;}
.lnv-kyt .pair:hover{transform:translateY(calc(var(--fx-lift)*1.5));box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,var(--kyt-accent) calc(var(--fx-glow)*.5),transparent);}
.lnv-kyt .pair-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;}
.lnv-kyt .pair-names{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.lnv-kyt .pair-ed{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.lnv-kyt .pair-ed .nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--t-text);}
.lnv-kyt .pair-ed:hover .nm{color:var(--kyt-accent);}
.lnv-kyt .pair-link{width:20px;height:20px;color:var(--t-text-muted);flex:0 0 auto;}
.lnv-kyt .pair-cross{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--t-warning);border:1px solid color-mix(in srgb,var(--t-warning) 40%,transparent);
  background:color-mix(in srgb,var(--t-warning) 9%,transparent);border-radius:999px;padding:3px 9px;}
.lnv-kyt .pair-cross svg{width:11px;height:11px;}
.lnv-kyt .pair-meter{text-align:right;flex:0 0 auto;}
.lnv-kyt .pair-meter .n{font-family:'Orbitron',sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--kyt-accent);
  text-shadow:0 0 16px color-mix(in srgb,var(--kyt-accent) 40%,transparent);}
.lnv-kyt .pair-meter .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-top:4px;}
.lnv-kyt .pair-bar{height:6px;border-radius:999px;background:rgba(var(--t-sheen-ink),.06);margin:13px 0 12px;overflow:hidden;}
.lnv-kyt .pair-bar .seg{height:100%;border-radius:999px;transform-origin:left;animation:lnvGrowX .9s ease both;}
.lnv-kyt .pair-orgs{display:flex;gap:7px;flex-wrap:wrap;}
.lnv-kyt .pair-orgs .lead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;align-self:center;margin-right:2px;}
.lnv-kyt .orgpilleri{font-size:11px;color:var(--t-text-muted);background:rgba(var(--t-sheen-ink),.04);border:1px solid var(--t-border);
  border-radius:999px;padding:4px 11px;cursor:help;}
.lnv-kyt .verkko-frame{position:relative;border-radius:14px;overflow:hidden;
  background:radial-gradient(720px 440px at 50% 45%, color-mix(in srgb,var(--kyt-accent) 06%,transparent), transparent 70%), var(--t-bg-deep);
  border:1px solid var(--t-border);box-shadow:inset 0 1px 0 rgba(var(--t-sheen-ink),.04);margin-top:6px;}
.lnv-kyt .verkko-frame canvas{width:100%;display:block;cursor:grab;touch-action:none;}
.lnv-kyt .verkko-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--t-text-dim);}
.lnv-kyt .verkko-legend .li{display:flex;align-items:center;gap:9px;}
.lnv-kyt .verkko-legend .sw{flex:0 0 auto;border-radius:50%;box-shadow:0 0 8px currentColor;}
.lnv-kyt .verkko-hint{margin-top:10px;font-size:11px;letter-spacing:.02em;color:var(--t-text-muted);text-align:center;}
.lnv-kyt .verkko-tooltip{display:none;position:fixed;background:var(--t-bg-card);border:1px solid var(--t-border);
  border-radius:8px;padding:8px 12px;font-size:12px;z-index:9999;pointer-events:none;max-width:240px;
  box-shadow:0 12px 30px rgba(var(--t-shadow-ink),.4);}
.lnv-kyt .tabrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 18px;}
.lnv-kyt .tabrow .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-right:2px;}
.lnv-kyt .top10{display:flex;flex-direction:column;gap:11px;margin-top:6px;}
.lnv-kyt .trow{display:grid;grid-template-columns:minmax(26px,auto) 52px 1fr 96px;align-items:center;gap:12px;
  padding:8px 10px;margin:0 -10px;border-radius:11px;transition:background .18s ease;}
.lnv-kyt .trow .rank{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--t-text-muted);text-align:right;}
.lnv-kyt .trow .who{min-width:0;}
.lnv-kyt .trow .who .nm{font-size:13.5px;color:var(--t-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-kyt .trow .who .track{margin-top:8px;}
.lnv-kyt .trow .val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:17px;text-align:right;line-height:1.1;}
.lnv-kyt .trow .val small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--t-text-muted);margin-top:2px;text-transform:none;}
.lnv-kyt .rtable{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px;}
.lnv-kyt .rtable th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;
  text-align:right;padding:10px 12px;border-bottom:1px solid var(--t-border);}
.lnv-kyt .rtable th:first-child{text-align:left;}
.lnv-kyt .rtable td{padding:11px 12px;border-bottom:1px solid rgba(var(--t-sheen-ink),.04);text-align:right;color:var(--t-text-dim);font-variant-numeric:tabular-nums;}
.lnv-kyt .rtable td:first-child{text-align:left;}
.lnv-kyt .rtable tr:hover td{background:rgba(var(--t-sheen-ink),.025);}
.lnv-kyt .rtable .pn{display:inline-flex;align-items:center;gap:9px;}
.lnv-kyt .rtable .pdot{width:9px;height:9px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 8px currentColor;}
.lnv-kyt .rtable td.hi{color:var(--kyt-accent);font-weight:700;}

/* ---- AKTIIVISUUS (Valvontamoduuli · Analytiikka) — tunnusväri --t-accent ---- */
/* Vierivä sisältökehys (kanoninen malli, sama kuin .kan-kehys) */
.lnv-akt .akt-kehys{flex:1;overflow-y:auto;padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}
.lnv-akt .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-akt .akt-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-accent) 55%,transparent));}
.lnv-akt .akt-symbol svg{width:100%;height:100%;display:block;}
.lnv-akt .pagehead-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.lnv-akt .maxpill{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--t-text-muted);
  padding:4px 10px;border-radius:999px;border:1px solid var(--t-border);background:var(--t-bg-card);align-self:center;}
.lnv-akt .maxpill b{color:var(--t-accent-text, var(--t-accent));}
.lnv-akt .ui-tab-btn{--ui-tab-color:var(--t-accent);}
/* Haku + puolue + järjestys yhdellä rivillä heti listan yläpuolella. Sama
   kuvio kuin muissa Vahti-näkymissä (käyttäjän linjaus 29.07.2026): hakukenttä
   venyy, valikot pitävät leveytensä. */
.lnv-akt .akt-filterbar{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin:14px 0 16px;}
.lnv-akt .akt-filtergroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lnv-akt .akt-haku{position:relative;flex:1 1 220px;min-width:170px;display:flex;align-items:center;}
.lnv-akt .akt-haku > svg{position:absolute;left:13px;width:15px;height:15px;color:var(--t-text-muted);pointer-events:none;}
.lnv-akt .akt-haku input{width:100%;min-width:0;background:var(--t-bg-card);border:1px solid var(--t-border);
  border-radius:11px;color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;
  padding:10px 14px 10px 36px;transition:border-color .2s ease;}
.lnv-akt .akt-haku input::placeholder{color:var(--t-text-muted);}
.lnv-akt .akt-haku input:focus{outline:none;border-color:color-mix(in srgb,var(--t-accent) 45%,transparent);}
.lnv-akt .akt-select{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;
  padding:10px 14px;cursor:pointer;min-width:0;max-width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;}
.lnv-akt .akt-select:focus{outline:none;border-color:color-mix(in srgb,var(--t-accent) 45%,transparent);}
@media (max-width:560px){
  .lnv-akt .akt-filterbar{flex-direction:column;gap:10px;}
  .lnv-akt .akt-filtergroup{width:100%;}
  .lnv-akt .akt-select{flex:1 1 auto;}
}
/* Kompaktit suodatinpillerit (ohittaa jaetun .ui-tab-btn:n drawer-oletuksen flex:1,
   sama malli kuin .kytk-tabs-row / .hillo-sevbar) */
.lnv-akt .akt-filtergroup .ui-tab-btn{flex:0 0 auto;min-width:0;padding:10px 16px;font-size:12px;}
.lnv-akt .akt-filtergroup .glab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-text-muted);
  font-weight:700;flex:0 0 auto;margin-right:2px;}
.lnv-akt .panel{position:relative;overflow:hidden;}
.lnv-akt .panel > *{position:relative;z-index:1;}
.lnv-akt .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.lnv-akt .panel-head .rlab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.lnv-akt .motif{position:absolute;right:-30px;top:50%;transform:translateY(-50%) rotate(-8deg);width:220px;height:220px;
  color:var(--gl,var(--t-accent));opacity:.05;pointer-events:none;transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--t-accent)) 60%,transparent));}
.lnv-akt .motif svg{width:100%;height:100%;display:block;}
.lnv-akt .card-hover:hover .motif{opacity:.42;}
.lnv-akt .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:20px;}
@media (max-width:860px){.lnv-akt .grid-2{grid-template-columns:1fr;}}
.lnv-akt .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;margin-top:8px;}
.lnv-akt .pod-col{display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;}
.lnv-akt .pod-ava{width:64px;height:64px;border-radius:50%;overflow:hidden;position:relative;
  border:2px solid var(--pc,var(--t-accent));background:var(--t-bg-card);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px color-mix(in srgb,var(--pc,var(--t-accent)) 45%,transparent);}
.lnv-akt .pod-ava svg{width:34px;height:34px;color:var(--t-text-muted);}
.lnv-akt .pod-ava img{width:100%;height:100%;object-fit:cover;}
.lnv-akt .pod-col.p1 .pod-ava{width:76px;height:76px;}
.lnv-akt .pod-nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.01em;color:var(--t-text);
  text-align:center;margin-top:11px;line-height:1.25;}
.lnv-akt .pod-badge{margin-top:6px;}
.lnv-akt .pod-bar{width:100%;max-width:120px;margin-top:12px;border-radius:10px 10px 0 0;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 22%,var(--t-bg-card)),var(--t-bg-card));
  border:1px solid color-mix(in srgb,var(--pc) 40%,var(--t-border));border-bottom:none;
  box-shadow:inset 0 1px 0 rgba(var(--t-sheen-ink),.05), 0 -6px 22px color-mix(in srgb,var(--pc) 16%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12px;overflow:hidden;}
.lnv-akt .pod-bar .sija{font-family:'Orbitron',sans-serif;font-weight:900;font-size:30px;line-height:1;color:var(--pc);
  text-shadow:0 0 18px color-mix(in srgb,var(--pc) 55%,transparent);}
.lnv-akt .pod-bar .sijalab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-top:4px;}
.lnv-akt .pod-val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;color:var(--pc);margin-top:0;
  padding:7px 0 3px;text-shadow:0 0 14px color-mix(in srgb,var(--pc) 40%,transparent);}
.lnv-akt .pod-val small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-text-muted);margin-top:2px;}
.lnv-akt .legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.lnv-akt .legend .li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t-text-dim);}
.lnv-akt .legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 8px currentColor;}
.lnv-akt .legend .rg{font-size:11px;color:var(--t-text-muted);font-variant-numeric:tabular-nums;}
.lnv-akt .legend-note{margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--t-text-muted);}
.lnv-akt .legend-note b{color:var(--t-accent-text, var(--t-accent));}
.lnv-akt .akt-list{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.lnv-akt .trow{display:grid;grid-template-columns:minmax(44px,auto) 44px 1fr 168px 92px;align-items:center;gap:14px;
  padding:11px 14px;border-radius:13px;cursor:pointer;
  background:var(--t-bg-card);border:1px solid var(--t-border);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lnv-akt .trow:hover{transform:translateY(calc(var(--fx-lift)*1.5));
  box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,var(--t-accent) calc(var(--fx-glow)*.5),transparent);
  border-color:color-mix(in srgb,var(--t-accent) 30%,var(--t-border));}
.lnv-akt .trow .rank{font-family:'Orbitron',sans-serif;font-weight:900;font-size:20px;text-align:center;color:var(--t-text-muted);line-height:1;}
.lnv-akt .trow.top1{border-color:color-mix(in srgb,var(--pp-kulta) 40%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-kulta) 9%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-akt .trow.top2{border-color:color-mix(in srgb,var(--pp-hopea) 34%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-hopea) 8%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-akt .trow.top3{border-color:color-mix(in srgb,var(--pp-pronssi) 36%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-pronssi) 9%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-akt .trow.top1 .rank{color:var(--pp-kulta);text-shadow:0 0 16px rgba(255,215,0,.55);}
.lnv-akt .trow.top2 .rank{color:var(--pp-hopea);text-shadow:0 0 16px rgba(192,192,192,.45);}
.lnv-akt .trow.top3 .rank{color:var(--pp-pronssi);text-shadow:0 0 16px rgba(205,127,50,.5);}
.lnv-akt .trow .ava{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--t-bg-panel);
  border:1px solid var(--t-border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.lnv-akt .trow .ava svg{width:24px;height:24px;color:var(--t-text-muted);}
.lnv-akt .trow .ava img{width:100%;height:100%;object-fit:cover;}
.lnv-akt .trow .who{min-width:0;}
.lnv-akt .trow .who .nmrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lnv-akt .trow .who .nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--t-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-akt .trow:hover .who .nm{color:var(--t-accent);}
.lnv-akt .trow .barwrap{min-width:0;}
.lnv-akt .trow .mbar{height:8px;border-radius:999px;background:rgba(var(--t-sheen-ink),.06);overflow:hidden;display:flex;}
.lnv-akt .trow .mbar .seg{height:100%;transform-origin:left;animation:lnvGrowX .9s ease both;}
.lnv-akt .trow .cats{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:8px;}
.lnv-akt .trow .cat{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--t-text-muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.lnv-akt .trow .cat .cd{width:7px;height:7px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 6px currentColor;}
.lnv-akt .trow .cat b{color:var(--t-text-dim);font-weight:700;}
.lnv-akt .trow .score{text-align:right;font-family:'Orbitron',sans-serif;font-weight:900;font-size:26px;line-height:1;
  color:var(--t-accent);text-shadow:0 0 18px color-mix(in srgb,var(--t-accent) 38%,transparent);}
.lnv-akt .trow .score small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-text-muted);margin-top:3px;}
/* Erikoisroolit (puhemies/ministerit): erillinen lohko, katkoviivakehys erottaa
   ne varsinaisesta absoluuttisesta rankingista. */
.lnv-akt .akt-erikois-info{font-size:12px;color:var(--t-text-muted);line-height:1.55;margin:2px 2px 14px;max-width:74ch;}
.lnv-akt .akt-erikois-info b{color:var(--t-text-dim);font-weight:700;}
.lnv-akt .trow.erikois{border-style:dashed;}
.lnv-akt .trow.erikois .score{color:var(--t-steel);text-shadow:none;}
.lnv-akt .trow.erikois .tag{white-space:normal;}
.lnv-akt .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  text-align:center;white-space:nowrap;}
.lnv-akt .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 8px;
  border-radius:999px;white-space:nowrap;}
.lnv-akt .tag.puhemies{color:var(--t-accent);border:1px solid color-mix(in srgb,var(--t-accent) 45%,transparent);
  background:color-mix(in srgb,var(--t-accent) 10%,transparent);}
.lnv-akt .tag.keskeytys{color:var(--t-warning);border:1px solid color-mix(in srgb,var(--t-warning) 42%,transparent);
  background:color-mix(in srgb,var(--t-warning) 9%,transparent);}
.lnv-akt .akt-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;}
.lnv-akt .akt-pager button{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:9px;
  color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:12.5px;padding:8px 13px;cursor:pointer;
  transition:color .2s,border-color .2s,box-shadow .2s;}
.lnv-akt .akt-pager button:hover:not(:disabled){color:var(--t-text);border-color:color-mix(in srgb,var(--t-accent) 40%,transparent);}
.lnv-akt .akt-pager button.on{color:var(--t-accent);border-color:color-mix(in srgb,var(--t-accent) 55%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--t-accent) 20%,transparent);}
.lnv-akt .akt-pager button:disabled{opacity:.4;cursor:default;}
.lnv-akt .akt-loader{padding:40px;text-align:center;color:var(--t-text-muted);font-size:13px;}

/* ---- RYHMÄKURI (Valvontamoduuli) — tunnusväri --acc-rk (teemakohtainen) ----
   Nojaa jaettuun .lnv-järjestelmään (.panel/.seclab/.source/.dot) ja
   jaettuihin .ui-tab-btn / .ui-filter-btn -komponentteihin. Tokenit
   (--t-*) tulevat aktiivisesta teemasta — tässä ei uudelleenmääritetä. */
.lnv-rk{--rk-accent:var(--acc-rk);}
.lnv-rk .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-rk .rk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--rk-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--rk-accent) 55%,transparent));}
.lnv-rk .rk-symbol svg{width:100%;height:100%;display:block;}
.lnv-rk #ryhmakuriSisalto{max-width:1040px;width:100%;margin:0 auto;}
.lnv-rk .rk-tabs{display:flex;gap:.5rem;margin-bottom:20px;flex-wrap:wrap;}
/* '>' kuten Porssissa: vain napin oma ikoni, ei .prem-tahden sisakkaista tahtea. */
.lnv-rk .ui-tab-btn > svg{width:16px;height:16px;flex-shrink:0;}
.lnv-rk .panel{position:relative;overflow:hidden;padding:20px;}
.lnv-rk .panel > *{position:relative;z-index:1;}
.lnv-rk .motif{position:absolute;right:-24px;top:50%;transform:translateY(-50%) rotate(-8deg);width:150px;height:150px;
  color:var(--rk-accent);opacity:.05;pointer-events:none;transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--rk-accent) 60%,transparent));}
.lnv-rk .motif svg{width:100%;height:100%;display:block;}
.lnv-rk .panel:hover .motif{opacity:.28;}
.lnv-rk .rk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;}
.lnv-rk .rk-stat-val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:20px;margin-top:2px;
  text-shadow:0 0 14px color-mix(in srgb,var(--sv,var(--rk-accent)) 35%,transparent);}
.lnv-rk .rk-stat-sub{font-size:12.5px;color:var(--t-text-dim);margin-top:2px;}
.lnv-rk .rk-row{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:13px;padding:12px 14px;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.lnv-rk .rk-row:hover{transform:translateY(var(--fx-lift));
  box-shadow:0 18px 40px rgba(var(--t-shadow-ink),.4),0 0 20px color-mix(in srgb,var(--rk-accent) calc(var(--fx-glow)*.5),transparent);
  border-color:color-mix(in srgb,var(--rk-accent) 28%,var(--t-border));}
.lnv-rk .rk-bar-track{position:relative;height:18px;background:color-mix(in srgb,var(--t-text) 5%,transparent);
  border-radius:999px;border:1px solid var(--t-border);overflow:hidden;}
.lnv-rk .rk-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;}
.lnv-rk .rk-median{position:absolute;top:-4px;height:calc(100% + 8px);width:2px;background:var(--rk-accent);
  box-shadow:0 0 6px color-mix(in srgb,var(--rk-accent) 70%,transparent);}
.lnv-rk .rk-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--t-bg-panel);border:1.5px solid var(--pc,var(--rk-accent));}
.lnv-rk .rk-ava svg{width:18px;height:18px;color:var(--t-text-muted);}
.lnv-rk .badge{font-weight:700;font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-rk #rk-scatter-tip{position:absolute;display:none;pointer-events:none;z-index:10;
  background:var(--t-bg-card);border:1px solid var(--rk-accent);border-radius:8px;padding:6px 10px;
  font-size:12px;color:var(--t-text);white-space:nowrap;
  box-shadow:0 10px 26px rgba(var(--t-shadow-ink),.45),0 0 16px color-mix(in srgb,var(--rk-accent) 30%,transparent);}
@media (prefers-reduced-motion:reduce){.lnv-rk .rk-row{transition:none;}}
/* A11y (ideasivun kohta 7): näppäimistöfokus näkyviin + ≥44px kosketuskohteet mobiilissa */
.lnv-rk .rk-row:focus-visible{outline:2px solid var(--rk-accent);outline-offset:2px;}
@media (max-width:640px){
  .lnv-rk .rk-row{min-height:44px;}
  .lnv-rk .rk-edrivi{min-height:44px;}
}

/* ---- LUPAUSINDEKSI (Valvontamoduuli · Analytiikka) — tunnusväri --acc-lup (teemakohtainen) ---- */
.lnv-lup{--lup-accent:var(--acc-lup);--ui-filter-color:var(--lup-accent);}
.lnv-lup .pagehead-row{display:flex;align-items:center;gap:18px;}
/* Vierivä sisältökehys (kanoninen malli, sama kuin .kan-kehys) */
.lnv-lup .lup-kehys{flex:1;overflow-y:auto;padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}
.lnv-lup .lp-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--lup-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--lup-accent) 55%,transparent));}
.lnv-lup .lp-symbol svg{width:100%;height:100%;display:block;}
.lnv-lup .pagehead-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.lnv-lup .beta-pill{font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lup-accent);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--lup-accent) 50%,transparent);
  background:color-mix(in srgb,var(--lup-accent) 10%,transparent);align-self:center;}
.lnv-lup .lp-filterbar{display:flex;flex-direction:column;gap:13px;margin:18px 0 22px;}
.lnv-lup .lp-filtergroup{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lnv-lup .lp-filtergroup .glab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-text-muted);
  font-weight:700;flex:0 0 auto;min-width:74px;}
.lnv-lup .lp-tabs-row{display:flex;gap:9px;flex-wrap:wrap;}
/* Suodatinpillerit: jaettu hehkuversio (ks. UI-FILTER-BTN HEHKUVERSIO) — oletusväri scope-rootissa */
/* Haku + puoluerajaus samalla rivilla: molemmat rajaavat samaa listaa. */
.lnv-lup .lp-hakurivi{flex-wrap:wrap;}
.lnv-lup .lp-hakurivi .lp-filtergroup{gap:9px;flex:0 0 auto;}
.lnv-lup .lp-search{position:relative;flex:1 1 240px;min-width:200px;}
.lnv-lup .lp-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t-text-muted);pointer-events:none;}
.lnv-lup .lp-search input{width:100%;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:13.5px;padding:11px 14px 11px 38px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.lnv-lup .lp-search input::placeholder{color:var(--t-text-muted);}
.lnv-lup .lp-search input:focus{outline:none;border-color:color-mix(in srgb,var(--lp-focus,var(--lup-accent)) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lp-focus,var(--lup-accent)) 30%,transparent),0 0 20px color-mix(in srgb,var(--lp-focus,var(--lup-accent)) 20%,transparent);}
.lnv-lup .panel{position:relative;overflow:hidden;}
.lnv-lup .panel > *{position:relative;z-index:1;}
.lnv-lup .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.lnv-lup .panel-head .rlab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--t-text-muted);}
.lnv-lup .motif{position:absolute;right:-26px;top:50%;transform:translateY(-50%) rotate(-9deg);width:220px;height:220px;
  color:var(--gl,var(--lup-accent));opacity:.05;pointer-events:none;transition:opacity .4s ease;z-index:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl,var(--lup-accent)) 60%,transparent));}
.lnv-lup .motif svg{width:100%;height:100%;display:block;}
.lnv-lup .card-hover:hover .motif{opacity:.4;}
.lnv-lup .lp-list{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
/* rank-sarake johdetaan sisallosta: kiintea 38px vuoti +7px sijoilla 200+ (mitattu
   1280 px:lla 22.07.2026, sama vika oli myos tuotannossa). Sama kuvio kaikissa
   ranking-nakymissa alla. */
.lnv-lup .trow{display:grid;grid-template-columns:minmax(38px,auto) 44px 1fr 100px;align-items:center;gap:14px;
  padding:11px 14px;border-radius:13px;cursor:pointer;
  background:var(--t-bg-card);border:1px solid var(--t-border);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lnv-lup .trow:hover{transform:translateY(calc(var(--fx-lift)*1.5));
  box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,var(--rc,var(--lup-accent)) calc(var(--fx-glow)*.55),transparent);
  border-color:color-mix(in srgb,var(--rc,var(--lup-accent)) 32%,var(--t-border));}
.lnv-lup .trow .rank{font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;text-align:center;color:var(--t-text-muted);line-height:1;}
.lnv-lup .trow.top1{border-color:color-mix(in srgb,var(--pp-kulta) 40%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-kulta) 9%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-lup .trow.top2{border-color:color-mix(in srgb,var(--pp-hopea) 34%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-hopea) 8%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-lup .trow.top3{border-color:color-mix(in srgb,var(--pp-pronssi) 36%,var(--t-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--pp-pronssi) 9%,var(--t-bg-card)),var(--t-bg-card) 46%);}
.lnv-lup .trow.top1 .rank{color:var(--pp-kulta);text-shadow:0 0 16px rgba(255,215,0,.55);}
.lnv-lup .trow.top2 .rank{color:var(--pp-hopea);text-shadow:0 0 16px rgba(192,192,192,.45);}
.lnv-lup .trow.top3 .rank{color:var(--pp-pronssi);text-shadow:0 0 16px rgba(205,127,50,.5);}
.lnv-lup .trow .ava,.lnv-lup .crow .ava{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--t-bg-panel);
  border:1px solid var(--t-border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.lnv-lup .trow .ava svg,.lnv-lup .crow .ava svg{width:24px;height:24px;color:var(--t-text-muted);}
.lnv-lup .trow .ava img,.lnv-lup .crow .ava img{width:100%;height:100%;object-fit:cover;}
.lnv-lup .trow .who{min-width:0;}
.lnv-lup .trow .who .nmrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
/* Johdonmukaisuuden luottamuschippi ("luottamus kohtalainen"). Työpöydällä yhdellä
   rivillä; mobiilisääntö alla sallii rivityksen, koska kapea .nmrow ei vedä 130px. */
.lnv-lup .trow .who .lp-luottamus{white-space:nowrap;}
.lnv-lup .trow .who .nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--t-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lnv-lup .trow:hover .who .nm{color:var(--rc,var(--lup-accent));}
.lnv-lup .trow .summ{font-size:11.5px;color:var(--t-text-muted);margin-top:4px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lnv-lup .trow .lp-track{height:6px;border-radius:999px;background:rgba(var(--t-sheen-ink),.06);overflow:hidden;margin-top:8px;}
.lnv-lup .trow .lp-track .fill{height:100%;border-radius:999px;transform-origin:left;animation:lnvGrowX .9s ease both;}
.lnv-lup .trow .score{text-align:right;font-family:'Orbitron',sans-serif;font-weight:900;font-size:24px;line-height:1;color:var(--rc,var(--lup-accent));
  text-shadow:0 0 18px color-mix(in srgb,var(--rc,var(--lup-accent)) 38%,transparent);}
.lnv-lup .trow .score small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-text-muted);margin-top:3px;}

/* T3 vaihe 2 (21.07.2026): ranking-luvun klikattavuus. Affordanssi on PYSYVÄ
   (ⓘ näkyy aina), koska hover ei ole olemassa kosketuslaitteella — T3:n
   hyväksymiskriteeri kieltää hover-only-affordanssin erikseen. Hover ja focus
   vain korostavat sitä. Kosketuskohde levennetään pystysuunnassa padding+
   negatiivinen margin -parilla, joka EI muuta gridin sarakeleveyttä (eli ei
   voi laukaista CLAUDE.md:n dokumentoimaa ranking-rivin mobiiliahtautta). */
.score-klik{cursor:pointer;border-radius:9px;padding:4px 5px;margin:-4px -5px;
  transition:background .18s ease, box-shadow .18s ease;}
.score-klik .score-info{opacity:.5;font-weight:700;margin-left:.15em;
  transition:opacity .18s ease;}
.score-klik:hover{background:color-mix(in srgb,var(--rc,var(--lup-accent)) 12%,transparent);}
.score-klik:hover .score-info{opacity:.95;}
.score-klik:focus-visible{outline:2px solid var(--rc,var(--lup-accent));outline-offset:2px;}
.score-klik:focus-visible .score-info{opacity:.95;}
/* Kosketuslaite: ei hoveria — pidä merkki selvästi näkyvänä lähtökohtaisesti. */
@media (hover:none){
  .score-klik .score-info{opacity:.75;}
}
.lnv-lup .crow{display:grid;grid-template-columns:44px 1fr 96px;align-items:start;gap:14px;
  padding:13px 15px;border-radius:13px;cursor:pointer;
  background:var(--t-bg-card);border:1px solid var(--t-border);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lnv-lup .crow:hover{transform:translateY(calc(var(--fx-lift)*1.5));
  box-shadow:0 22px 50px rgba(var(--t-shadow-ink),.45),0 0 22px color-mix(in srgb,#ff4d6d calc(var(--fx-glow)*.6),transparent);
  border-color:color-mix(in srgb,#ff4d6d 34%,var(--t-border));}
.lnv-lup .crow .ava{margin-top:2px;}
.lnv-lup .crow .cmain{min-width:0;}
.lnv-lup .crow .nmrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lnv-lup .crow .nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--t-text);}
.lnv-lup .crow:hover .nm{color:#ff4d6d;}
.lnv-lup .crow .teema{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:#ff4d6d;border:1px solid rgba(255,77,109,.4);
  background:rgba(255,77,109,.09);border-radius:999px;padding:3px 9px;}
.lnv-lup .crow .teema svg{width:11px;height:11px;flex:0 0 auto;}
.lnv-lup .crow .cpair{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.lnv-lup .crow .cline{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:start;font-size:12px;line-height:1.45;}
.lnv-lup .crow .cline .clab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding-top:2px;display:flex;align-items:center;gap:6px;}
.lnv-lup .crow .cline .cdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 7px currentColor;}
.lnv-lup .crow .cline.lupasi .clab{color:var(--t-positive);}
.lnv-lup .crow .cline.aanesti .clab{color:#ff4d6d;}
.lnv-lup .crow .cline .ctext{color:var(--t-text-dim);}
.lnv-lup .crow .cscore{text-align:right;}
.lnv-lup .crow .cscore .n{font-family:'Orbitron',sans-serif;font-weight:900;font-size:24px;line-height:1;
  text-shadow:0 0 18px color-mix(in srgb,var(--csc,#ff4d6d) 38%,transparent);color:var(--csc,#ff4d6d);}
.lnv-lup .crow .cscore .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;margin-top:4px;line-height:1.3;}
.lnv-lup .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  text-align:center;white-space:nowrap;}
.lnv-lup .lp-empty{padding:34px;text-align:center;color:var(--t-text-muted);font-size:13px;}
.lnv-lup .lp-note{font-size:12px;line-height:1.6;color:var(--t-text-dim);margin-top:14px;
  background:color-mix(in srgb,var(--lup-accent) 5%,var(--t-bg-panel));
  border:1px solid color-mix(in srgb,var(--lup-accent) 20%,var(--t-border));border-radius:12px;padding:13px 15px;}
.lnv-lup .lp-note.danger{background:rgba(255,77,109,.05);border-color:rgba(255,77,109,.22);}
/* Näkymän aloittava selite (lisätty 29.07.2026): sama visuaalinen suku kuin
   .lp-note, mutta listan YLÄPUOLELLA — lukija saa tietää mitä luku mittaa
   ennen kuin tulkitsee rivejä. Väri tulee aktiivisesta välilehdestä
   (--lp-selite-vari), jotta Ristiriidat-tila pysyy punaisena. */
.lnv-lup .lp-selite{font-size:13px;line-height:1.6;color:var(--t-text-dim);margin:0 0 14px;
  background:color-mix(in srgb,var(--lp-selite-vari,var(--lup-accent)) 6%,var(--t-bg-panel));
  border:1px solid color-mix(in srgb,var(--lp-selite-vari,var(--lup-accent)) 22%,var(--t-border));
  border-radius:12px;padding:13px 16px;}
.lnv-lup .lp-selite strong{color:var(--lp-selite-vari,var(--lup-accent));font-weight:700;}
/* Puoluerajaus pudotusvalikkona (29.07.2026, kayttajan pyynto): kahdeksan
   nappia vei rivin verran tilaa jokaisessa ranking-nakymassa ja mobiilissa ne
   rivittyivat kolmelle riville. Sama komponentti kuin .hillo-select
   Hillotolpissa - ei uutta kuviota, vain sen laajennus tanne. */
.lnv-lup .lp-select{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;
  padding:9px 13px;cursor:pointer;min-height:40px;max-width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;}
.lnv-lup .lp-select:hover{border-color:color-mix(in srgb,var(--lup-accent) 35%,var(--t-border));}
.lnv-lup .lp-select:focus{outline:none;border-color:color-mix(in srgb,var(--lup-accent) 45%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lup-accent) 18%,transparent);}
@media (max-width:560px){.lnv-lup .lp-select{width:100%;min-height:44px;font-size:13px;}}
@media (max-width:560px){.lnv-lup .lp-selite{font-size:12.5px;padding:11px 13px;}}
.lnv-lup .lp-note b{color:var(--t-text);font-weight:700;}
.lnv-lup .source .ai{display:inline-flex;align-items:center;gap:6px;color:var(--lup-accent);font-weight:700;}
.lnv-lup .source .ai svg{width:13px;height:13px;}

/* MOBIILI: Lupausindeksi- ja Johdonmukaisuus-rankingin rivi (.trow). Työpöydän
   ruudukko 38px 44px 1fr 100px puristaa nimikentän (.who) mobiilissa ~38 px:iin,
   jolloin nimi katkeaa "Juv…"-tyyliin (havaittu 13.07.2026). Kavennetaan rank/ava/
   score, annetaan nimelle 1fr ja sallitaan nimen + tiivistelmän rivittyä usealle
   riville katkaisun sijaan.

   22.07.2026: rank-sarake oli kiinteä 26px, mutta Orbitron 900 -numerot ovat
   leveitä: sija "100" vaatii 31px ja "200" jopa 37px. Mitattu 375 px:llä →
   157 ylivuotavaa solua kahdessa näkymässä (Lupausindeksi 195 riviä,
   Johdonmukaisuus 204). Työpöydällä vika ei näkynyt, koska sarake on siellä
   38px. Korjaus on minmax(26px,auto) — leveys johdetaan sisällöstä eikä
   arvatusta pikseliluvusta, joten se kestää rekisterin kasvun. Sama korjaus
   viety kaikkiin sisarnäkymiin alla (ks. CLAUDE.md: korjaa koko sivustolta). */
@media (max-width:560px){
  .lnv-lup .trow{grid-template-columns:minmax(26px,auto) 40px minmax(0,1fr) auto;gap:10px;padding:11px 12px;}
  .lnv-lup .trow .rank{font-size:15px;}
  .lnv-lup .trow .ava,.lnv-lup .crow .ava{width:40px;height:40px;}
  .lnv-lup .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
  /* Kapeampi rank-sarake jättää .nmrow:lle 126px; "luottamus kohtalainen" on
     nowrapina 130px eikä flex-wrap auta, koska yksi item ei mahdu. Mitattu +6px
     kahdella rivillä 22.07.2026. Sallitaan chipin rivittyä ja lasten kutistua. */
  .lnv-lup .trow .who .nmrow>*{min-width:0;}
  .lnv-lup .trow .who .lp-luottamus{white-space:normal;}
  .lnv-lup .trow .summ{white-space:normal;}
  .lnv-lup .trow .score{font-size:20px;}
}

/* ── RANKING-NÄKYMIEN MOBIILISWEEP (≤560px) — koko sivustolta, ks. CLAUDE.md
   "Mobiilibugit — korjaa aina koko sivustolta". Sama vika kuin yllä .lnv-lup:ssa:
   kiinteäsarakkeinen .trow-ruudukko puristaa nimikentän (.who) mobiilissa.
   Mitattu dashboard.html:ssä 375 px:llä 13.07.2026: Aktiivisuudessa (.lnv-akt)
   .who romahti 0 px:iin, Rahoituksessa 69 px, Kokemuksessa 79 px → henkilönimet
   katkesivat. Kavennetaan kiinteät sarakkeet, annetaan nimelle minmax(0,1fr) ja
   sallitaan nimen rivittyä katkaisun sijaan. Kytköksissä näkyvät org-/pair-rivit
   ovat jo 1fr auto (turvallisia); korjataan vain laajennetun org:n sisäinen .trow.
   Verifioitu uudelleen mittaamalla samalla leveydellä. */
@media (max-width:560px){
  /* Aktiivisuus — vakavin: barwrap (168px) + score (92px) veivät koko rivin.
     Siirretään mittapalkki + kategoriat omalle riville grid-areoilla (riippumaton
     DOM-järjestyksestä), jotta rank/ava/nimi/score mahtuvat ylälle riville. */
  .lnv-akt .trow{grid-template-columns:minmax(34px,auto) 40px minmax(0,1fr) auto;
    grid-template-areas:"rank ava who score" "bar bar bar bar";gap:8px 12px;padding:11px 12px;}
  .lnv-akt .trow .rank{grid-area:rank;font-size:17px;}
  .lnv-akt .trow .ava{grid-area:ava;width:40px;height:40px;}
  .lnv-akt .trow .who{grid-area:who;}
  .lnv-akt .trow .barwrap{grid-area:bar;}
  .lnv-akt .trow .score{grid-area:score;font-size:20px;}
  .lnv-akt .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}
  /* Erikoisroolilohko (lisatty 18.07.2026: puhemies + ministerit omaan lohkoon) sai
     oman rivityyppinsa, johon ylla oleva .nm-rivityskorjaus EI ulottunut - se koskee
     vain .who .nm:aa, ei roolirivia eika .nmrow:ta. Mitattu 20.07.2026 375 px:lla:
     .who +26px ("Grahn-Laasonen Sanni Kaisa"), roolirivi +26px
     ("Sosiaaliturvaministeri · Poissa..."), .nmrow +17px, .rank +5px ("59%" 34 px
     sarakkeessa). Korjaus: rank-sarake 34->40px ja rivitys koko .who-puuhun. */
  .lnv-akt .trow.erikois{grid-template-columns:minmax(40px,auto) 40px minmax(0,1fr) auto;}
  .lnv-akt .trow.erikois .who,
  .lnv-akt .trow.erikois .nmrow{min-width:0;}
  .lnv-akt .trow.erikois .who *{white-space:normal;overflow-wrap:anywhere;}

  /* Lobbauksen aikasarjapylvaat: 5 pylvasta + 4x14px gap jattaa ~50px/pylvas, mutta
     lukema "12 378" vaatii ~59px -> aikasarja +16px, pylvaat +20px. Mitattu
     20.07.2026 375 px:lla. Kavennetaan valia ja pienennetaan lukemaa kapealla. */
  .lnv-lb .lobbaus-aikasarja{gap:5px;padding-left:0;padding-right:0;}
  .lnv-lb .vbar{min-width:0;}
  /* white-space:normal on valttamaton: pelkka overflow-wrap ei riita jos elementilla
     on nowrap. .vb-lbl on "01.07-31.08.2024" = 65px 48px:n pylvaassa. */
  .lnv-lb .vbar .vb-num{font-size:11px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;}
  .lnv-lb .vbar .vb-lbl{font-size:11px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25;}

  /* Rahoitus — .who 69px → henkilönimet katkesivat; val (108px) → auto. */
  .lnv-rah .trow{grid-template-columns:minmax(22px,auto) 44px minmax(0,1fr) auto;gap:10px;}
  .lnv-rah .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}

  /* Kokemus — .who 79px; badge (54px) + val (66px) → auto. */
  .lnv-kok .trow{grid-template-columns:minmax(22px,auto) auto minmax(0,1fr) auto;gap:10px;}
  .lnv-kok .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}

  /* Kytkökset — laajennetun organisaation sisäinen .trow (sama kuvio). */
  .lnv-kyt .trow{grid-template-columns:minmax(22px,auto) 44px minmax(0,1fr) auto;gap:10px;}
  .lnv-kyt .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}

  /* Lobbaus — .who 145px riittää useimmille; sallitaan pisimpien nimien rivittyä.
     Rivillä ei ollut lainkaan mobiilisääntöä ruudukolle, joten työpöydän
     24px 1fr 66px jäi voimaan: rank-sarake olisi vuotanut heti kun listalle
     tulee kolminumeroisia sijoja (13px Orbitron ≈ 27px > 24px), ja 1fr on
     oikeasti minmax(auto,1fr) eli CLAUDE.md:n min-content-lattia-ansa. */
  .lnv-lb .trow{grid-template-columns:minmax(24px,auto) minmax(0,1fr) auto;}
  .lnv-lb .trow .who .nm{white-space:normal;overflow:visible;text-overflow:clip;}

  /* Pitkät yhdyssanat ilman välilyöntiä (esim. lobbauskohteet
     "Lääkärihelikopteritoiminnan…", mitattu 15.07.2026: 161px > 145px .who) eivät
     rivity välilyönnittä → sana valui val-sarakkeen päälle. Sallitaan katkaisu
     koko sweepille. overflow-wrap:anywhere vaikuttaa VAIN sanoihin jotka eivät
     muuten mahtuisi — henkilönimet (jotka jo mahtuvat/rivittyvät) pysyvät ennallaan. */
  .lnv-akt .trow .who .nm, .lnv-rah .trow .who .nm, .lnv-kok .trow .who .nm,
  .lnv-kyt .trow .who .nm, .lnv-lb .trow .who .nm{overflow-wrap:anywhere;}
}

/* ---- HILLOTOLPAT (Valvontamoduuli · Ristiriitahavainnot) — kiinteä tunnusväri
   --hillo-accent (amber/honey, ei seuraa teemaa). Nojaa jaettuun
   .lnv-järjestelmään (.panel/.card-hover/.source/.dot) ja jaettuihin
   .ui-tab-btn / .ui-filter-btn -komponentteihin. Filter-btn:n hehkuversio on
   skoopattu tähän näkymään samaan tapaan kuin #ohjelmaNakyma:ssa — ei
   ylikirjoiteta jaettua komponenttia muualla. Havaintotyyppien värit (--k-*),
   vakavuustasot (--risk-*) ja puoluevärit ovat kiinteitä datasemantiikkoja.
   Portattu design-snapshotista 07.07.2026. */
.lnv-hil{--hillo-accent:var(--acc-hil);--ui-filter-color:var(--hillo-accent);
  /* Vakavuustasot ovat kiinteitä datasemantiikkoja. Sovelluksessa --risk-* on
     muualla määritelty vain .pp-kortti-scopessa, joten toistetaan ne tässä
     samoin arvoin (ei globaali :root-token). */
  --risk-low:#3ec63e;--risk-mid:#f59e0b;--risk-high:#ff4d6d;
  --k-rahoittaja:#ff4d6d;--k-lakannut:#f59e0b;--k-ytj:#00e5ff;--k-poikkeava:#f59e0b;--k-lobbaaja:#a855f7;--k-avustus:#34d399;--k-kunta:#7dd3fc;}

/* Otsikkorivi (kanoninen .pagehead-row, sama kuin Lobbaus/Kytkökset/Aktiivisuus/Lupausindeksi).
   Co-scopettu .lnv-mep:lle (MEP-näkymä jakaa saman rungon). */
.lnv-hil .pagehead-row,.lnv-mep .pagehead-row,.lnv-kuv .pagehead-row,.lnv-pyo .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-hil .pagehead-line,.lnv-mep .pagehead-line,.lnv-kuv .pagehead-line,.lnv-pyo .pagehead-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
/* .lnv-pyo on co-scopattu naihin kahteen 23.07.2026. Se kayttaa samaa
   .pagehead-row + .rk-symbol -runkoa kuin sisarnakymat ja oli co-scopattu jo
   .hillo-banner-saantoihin alla, mutta JAI POIS juuri ikonin mitoituksesta.
   Seuraus oli iso: ilman width/height ja ilman svg{width:100%} <svg viewBox
   "0 0 24 24"> venyi sisaltoleveyteen -> Pyoroovin otsikkoikoni oli
   tyopoydalla 1216x1222 px ja peitti KOKO nakyman sisallon. Mitattu 1280 px.
   Mobiilissa (375 px) se jai vahingossa 40x40:aan, joten vika ei nakynyt siella. */
.lnv-hil .rk-symbol,.lnv-mep .rk-symbol,.lnv-kuv .rk-symbol,.lnv-pyo .rk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--hillo-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--hillo-accent) 55%,transparent));}
.lnv-hil .rk-symbol svg,.lnv-mep .rk-symbol svg,.lnv-kuv .rk-symbol svg,.lnv-pyo .rk-symbol svg{width:100%;height:100%;display:block;}
.lnv-hil .beta-pill,.lnv-mep .beta-pill,.lnv-kuv .beta-pill,.lnv-pyo .beta-pill{font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hillo-accent);padding:4px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--hillo-accent) 50%,transparent);
  background:color-mix(in srgb,var(--hillo-accent) 10%,transparent);align-self:center;}

.lnv-hil #hillotolpatSisalto{max-width:1040px;width:100%;margin:0 auto;}

/* Varoitusbanneri */
.lnv-hil .hillo-banner,.lnv-mep .hillo-banner,.lnv-kuv .hillo-banner,.lnv-pyo .hillo-banner{display:flex;gap:14px;align-items:flex-start;
  background:color-mix(in srgb,var(--risk-mid) 8%,var(--t-bg-panel));
  border:1px solid color-mix(in srgb,var(--risk-mid) 30%,var(--t-border));border-radius:14px;padding:16px 18px;margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(var(--t-sheen-ink),.04);}
.lnv-hil .hillo-banner .bi,.lnv-mep .hillo-banner .bi,.lnv-kuv .hillo-banner .bi,.lnv-pyo .hillo-banner .bi{flex:0 0 auto;width:20px;height:20px;color:var(--risk-mid);margin-top:1px;}
.lnv-hil .hillo-banner .bi svg,.lnv-mep .hillo-banner .bi svg,.lnv-kuv .hillo-banner .bi svg,.lnv-pyo .hillo-banner .bi svg{width:100%;height:100%;}
.lnv-hil .hillo-banner .bt,.lnv-mep .hillo-banner .bt,.lnv-kuv .hillo-banner .bt,.lnv-pyo .hillo-banner .bt{font-size:13px;line-height:1.55;color:var(--t-text-dim);}
.lnv-hil .hillo-banner .bt b,.lnv-mep .hillo-banner .bt b,.lnv-kuv .hillo-banner .bt b{color:var(--t-text);font-weight:700;}

/* Havaintotyyppisirut: jaettu hehkuversio + hillo-koot ja Orbitron-lukumäärät */
.lnv-hil .hillo-filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.lnv-hil .ui-filter-btn{gap:8px;padding:9px 14px;font-size:12.5px;font-weight:600;letter-spacing:.02em;}
.lnv-hil .ui-filter-btn svg{width:15px;height:15px;}
.lnv-hil .ui-filter-btn b{font-family:'Orbitron',sans-serif;font-weight:700;color:var(--ui-tab-color);}

/* Työkalurivi: haku + puoluevalinta + vakavuussuodattimet */
.lnv-hil .hillo-toolbar,.lnv-kuv .hillo-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.lnv-hil .hillo-search,.lnv-kuv .hillo-search{position:relative;flex:1 1 260px;min-width:220px;}
.lnv-hil .hillo-search svg,.lnv-kuv .hillo-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t-text-muted);pointer-events:none;}
.lnv-hil .hillo-search input,.lnv-kuv .hillo-search input{width:100%;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:13.5px;padding:11px 14px 11px 38px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.lnv-hil .hillo-search input::placeholder,.lnv-kuv .hillo-search input::placeholder{color:var(--t-text-muted);}
.lnv-hil .hillo-search input:focus,.lnv-kuv .hillo-search input:focus{outline:none;border-color:color-mix(in srgb,var(--hillo-accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hillo-accent) 30%,transparent),0 0 20px color-mix(in srgb,var(--hillo-accent) 20%,transparent);}
.lnv-hil .hillo-select,.lnv-kuv .hillo-select{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;color:var(--t-text-dim);
  font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;padding:10px 14px;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;}
.lnv-hil .hillo-select:focus,.lnv-kuv .hillo-select:focus{outline:none;border-color:color-mix(in srgb,var(--hillo-accent) 45%,transparent);}
.lnv-hil .hillo-sevbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;}
.lnv-hil .hillo-sevbar .ui-tab-btn{--ui-tab-color:var(--sc,var(--hillo-accent));flex:0 0 auto;min-width:0;padding:10px 16px;font-size:12px;}

/* Metarivi */
.lnv-hil .hillo-meta{font-size:12.5px;color:var(--t-text-muted);margin-bottom:16px;letter-spacing:.02em;}
.lnv-hil .hillo-meta b{color:var(--t-text-dim);font-weight:700;}

/* Selite summalajittelulle: kaksi eri rahalajia samassa listassa (ks. app.js _hilloSumma) */
.lnv-hil .hillo-sortnote{font-size:12px;line-height:1.5;color:var(--t-text-muted);margin:-8px 0 16px;padding:10px 12px;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:10px;overflow-wrap:anywhere;}
.lnv-hil .hillo-sortnote b{color:var(--t-text-dim);font-weight:600;}

/* Havaintokortit (.panel + .card-hover + .motif) */
.lnv-hil .hillo-list{display:flex;flex-direction:column;gap:12px;}
.lnv-hil .panel{position:relative;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:16px;box-shadow:0 20px 50px rgba(var(--t-shadow-ink),.36), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);
  padding:18px 20px;overflow:hidden;}
.lnv-hil .panel > *{position:relative;z-index:1;}
.lnv-hil .panel.hillo-clickable{cursor:pointer;}
.lnv-hil .motif{position:absolute;right:-22px;top:50%;transform:translateY(-50%) rotate(-8deg);width:140px;height:140px;
  color:var(--kc,var(--hillo-accent));opacity:.05;pointer-events:none;transition:opacity .35s ease;z-index:0;}
.lnv-hil .motif svg{width:100%;height:100%;display:block;}
.lnv-hil .panel:hover .motif{opacity:.24;}
.lnv-hil .card-hover:hover{
  box-shadow:0 26px 58px rgba(var(--t-shadow-ink),.44), inset 0 1px 0 rgba(var(--t-sheen-ink),.05),
             0 0 24px color-mix(in srgb, var(--sev,var(--hillo-accent)) 22%, transparent);
  border-color:color-mix(in srgb, var(--sev,var(--hillo-accent)) 30%, var(--t-border));}
.lnv-hil .hillo-head{display:flex;align-items:flex-start;gap:12px;}
.lnv-hil .hillo-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--t-bg-card);border:1px solid var(--t-border);display:flex;align-items:center;justify-content:center;}
.lnv-hil .hillo-ava svg{width:22px;height:22px;color:var(--t-text-muted);}
.lnv-hil .hillo-ava img{width:100%;height:100%;object-fit:cover;object-position:top;}
.lnv-hil .hillo-who{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;flex:1;min-width:0;}
.lnv-hil .hillo-nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14.5px;color:var(--t-text);}
.lnv-hil .hillo-sev{margin-left:auto;flex:0 0 auto;font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;
  letter-spacing:.12em;color:var(--sev);text-shadow:0 0 12px color-mix(in srgb,var(--sev) 50%,transparent);}
.lnv-hil .hillo-finding{display:flex;align-items:center;gap:9px;margin:12px 0 10px;}
.lnv-hil .hillo-finding svg{width:18px;height:18px;color:var(--kc);flex:0 0 auto;}
.lnv-hil .hillo-finding .ft{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--kc);letter-spacing:.01em;}
.lnv-hil .hillo-fieldrow{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:10px;}
.lnv-hil .hillo-field{font-size:13px;color:var(--t-text-dim);}
.lnv-hil .hillo-field b{color:var(--t-text-muted);font-weight:700;}
.lnv-hil .hillo-desc{font-size:13px;line-height:1.6;color:var(--t-text-muted);}
.lnv-hil .hillo-desc b{color:var(--t-text-dim);font-weight:600;}
.lnv-hil .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-hil .hillo-empty{padding:32px;text-align:center;color:var(--t-text-muted);font-size:13px;}

@media (max-width:640px){
  .lnv-hil .hillo-toolbar,.lnv-kuv .hillo-toolbar{flex-direction:column;align-items:stretch;}
  /* Pystysuunnassa flex-basis koskisi korkeutta → nollataan, ettei hakukenttä veny */
  .lnv-hil .hillo-search,.lnv-kuv .hillo-search{flex:0 0 auto;}
  .lnv-hil .hillo-sevbar{margin-left:0;}
  .lnv-hil .hillo-fieldrow{flex-direction:column;gap:4px;}
}

/* ---- MEP-NÄKYMÄ (Valtarakenteet) — jakaa .lnv-hil-rungon (pagehead, banner),
   omat kortit. Aksentti: EU-sininen. */
.lnv-mep{--hillo-accent:#5b8cff;--risk-mid:#f59e0b;}
.lnv-mep .mep-meta,.lnv-kuv .mep-meta{font-size:12.5px;color:var(--t-text-muted);margin-bottom:16px;letter-spacing:.02em;}
.lnv-mep .mep-meta b,.lnv-kuv .mep-meta b{color:var(--t-text-dim);font-weight:700;}
.lnv-mep .mep-grid,.lnv-kuv .mep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:14px;}
.lnv-mep .panel,.lnv-kuv .panel{position:relative;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:16px;box-shadow:0 20px 50px rgba(var(--t-shadow-ink),.36), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);
  padding:18px 20px;overflow:hidden;}
.lnv-mep .card-hover:hover,.lnv-kuv .card-hover:hover{
  box-shadow:0 26px 58px rgba(var(--t-shadow-ink),.44), inset 0 1px 0 rgba(var(--t-sheen-ink),.05),
             0 0 24px color-mix(in srgb, var(--gl,var(--hillo-accent)) 22%, transparent);
  border-color:color-mix(in srgb, var(--gl,var(--hillo-accent)) 30%, var(--t-border));}
.lnv-mep .mep-head,.lnv-kuv .mep-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
/* Kasvokuva (23.07.2026, kayttajan paatos). Sama menetelma kuin
   kansanedustajilla: kuva on levylla kuvat/-kansiossa, ei ulkoisesta
   osoitteesta - se olisi hitaampi ja vuotaisi kavijan IP:n EP:lle joka
   sivulatauksella. Kuvallinen kortti tasaa ylareunaan, koska baseline
   suhteessa 66px korkeaan kuvaan tyontaisi tekstin alas. */
.lnv-mep .mep-head:has(.mep-kuva){align-items:flex-start;gap:12px;flex-wrap:nowrap;}
.lnv-mep .mep-kuva{flex:0 0 auto;width:52px;height:66px;border-radius:8px;
  object-fit:cover;object-position:center top;border:1px solid var(--t-border);
  background:var(--t-bg-card);}
.lnv-mep .mep-head-teksti{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  min-width:0;}
.lnv-mep .mep-nm,.lnv-kuv .mep-nm{font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;color:var(--t-text);}
.lnv-mep .badge,.lnv-kuv .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-mep .mep-ep-link{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--hillo-accent);text-decoration:none;border:1px solid color-mix(in srgb,var(--hillo-accent) 45%,transparent);
  border-radius:999px;padding:3px 10px;}
.lnv-mep .mep-ep-link:hover{background:color-mix(in srgb,var(--hillo-accent) 14%,transparent);}
.lnv-mep .mep-dpi-otsikko,.lnv-kuv .mep-dpi-otsikko{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-text-muted);margin:14px 0 6px;}
.lnv-mep .mep-dpi,.lnv-kuv .mep-dpi{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.lnv-mep .mep-dpi li,.lnv-kuv .mep-dpi li{font-size:12.5px;line-height:1.5;color:var(--t-text-dim);overflow-wrap:anywhere;}
/* Konekäännösmerkintä + alkuperäinen rivi (PÄÄTÖS-009, 21.07.2026).
   Alkuperäinen näytetään AINA käännöksen alla omana rivinään — ei piilotettua
   tilaa, jotta lukija voi tarkistaa lähteen ilman klikkausta. */
.mep-kk-merkki{display:inline-block;margin-left:6px;padding:0 4px;border-radius:3px;
  font-size:11px;font-weight:700;letter-spacing:.08em;vertical-align:2px;
  color:var(--t-text-muted);border:1px solid rgba(148,163,184,.35);
  background:rgba(148,163,184,.10);}
.lnv-mep .mep-dpi-alkup,.lnv-kuv .mep-dpi-alkup{display:block;margin-top:2px;
  font-size:11.5px;line-height:1.45;color:var(--t-text-muted);opacity:.85;
  font-style:italic;overflow-wrap:anywhere;}
.lnv-mep .mep-osuma,.lnv-kuv .mep-osuma{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--t-text-dim);
  background:color-mix(in srgb,var(--hillo-accent) 7%,var(--t-bg-card));
  border:1px solid color-mix(in srgb,var(--hillo-accent) 25%,var(--t-border));border-radius:10px;padding:10px 12px;}
.lnv-mep .mep-osuma b,.lnv-kuv .mep-osuma b{color:var(--t-text);font-weight:700;}
@media (max-width:640px){
  .lnv-mep .mep-ep-link{margin-left:0;}
}


/* ---- KUNTAVAHTI (pilotti) — jakaa MEP-kortiston rungon (.mep-*, co-scopettu
   yllä), omat lisät. Aksentti: teal. Luokkatagit erottelevat rakenteelliset
   roolit (kaupungin nimeämä / konserni / julkisyhteisö) itsenäisistä. */
.lnv-kuv{--hillo-accent:#2dd4bf;--risk-mid:#f59e0b;}
.lnv-kuv .kv-kuntaotsikko{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:var(--t-text);
  margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.lnv-kuv .kv-kuntaotsikko small{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:12px;
  color:var(--t-text-muted);letter-spacing:.02em;}
.lnv-kuv .kv-asema{font-size:12px;color:var(--t-text-muted);margin-top:2px;overflow-wrap:anywhere;}
.lnv-kuv .kv-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;border-radius:999px;
  padding:1px 7px;margin-left:4px;vertical-align:1px;white-space:nowrap;}
.lnv-kuv .kv-tag-nimeama{color:#7dd3fc;border:1px solid #7dd3fc55;background:#7dd3fc18;}
.lnv-kuv .kv-tag-konserni{color:#c4b5fd;border:1px solid #c4b5fd55;background:#c4b5fd18;}
.lnv-kuv .kv-tag-julkis{color:#fbbf24;border:1px solid #fbbf2455;background:#fbbf2418;}
.lnv-kuv .kv-top{margin:6px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:2px;}
.lnv-kuv .kv-top li{font-size:11.5px;line-height:1.45;color:var(--t-text-muted);overflow-wrap:anywhere;}
.lnv-kuv .mep-kortti{min-width:0;}
.lnv-kuv .kv-tyhja{padding:32px;text-align:center;color:var(--t-text-muted);font-size:13px;}

/* ---- PUOLUEIDEN KANNATUS (Valvontamoduuli) — kiinteä tunnusväri --kan-accent
   (taivaansininen). Yhdistää kolme entistä erillistä näkymää (Kannatusmittaukset
   / Puoluekannatus / Hallituksen kannatus) yhdeksi lnv-näkymäksi + 3 sisävälilehteä.
   Nojaa jaettuun .lnv-järjestelmään; muutosindikaattorit (--up/--down/--flat) ja
   puoluevärit ovat kiinteitä datasemantiikkoja. Portattu design-snapshotista
   07.07.2026. Interaktiiviset kaaviot (zoom/pan, vertailu, mittausselain) säilytetty
   liven render-funktioista — ei korvattu snapshotin staattisilla. */
.lnv-kan{--kan-accent:var(--acc-kan);--ui-filter-color:var(--kan-accent);--up:#3ec63e;--down:#ff4d6d;--flat:var(--t-text-muted);}

/* Otsikkorivi (kanoninen .pagehead-row, sama kuin Lobbaus/Kytkökset/Aktiivisuus/Lupausindeksi) */
.lnv-kan .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-kan .rk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--kan-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--kan-accent) 55%,transparent));}
.lnv-kan .rk-symbol svg{width:100%;height:100%;display:block;}

.lnv-kan .kan-kehys{flex:1;overflow-y:auto;padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}
.lnv-kan .kan-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.lnv-kan .kan-tabs .ui-tab-btn{flex:0 0 auto;min-width:0;padding:10px 16px;font-size:12px;}

/* Panelit + motif (jaettu sanasto, oma tunnusväri + väli) */
.lnv-kan .panel{position:relative;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:16px;box-shadow:0 20px 50px rgba(var(--t-shadow-ink),.36), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);
  padding:20px;overflow:hidden;margin-bottom:16px;}
.lnv-kan .panel > *{position:relative;z-index:1;}
.lnv-kan .panel .motif{position:absolute;right:-22px;top:50%;transform:translateY(-50%) rotate(-8deg);width:140px;height:140px;
  color:var(--kan-accent);opacity:.05;pointer-events:none;transition:opacity .35s ease;z-index:0;}
.lnv-kan .panel .motif svg{width:100%;height:100%;display:block;}
.lnv-kan .panel:hover .motif{opacity:.2;}
.lnv-kan .seclab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-text-muted);font-weight:700;display:block;margin-bottom:12px;}

/* Meta-banneri */
.lnv-kan .kan-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--t-text-muted);margin-bottom:18px;}
.lnv-kan .kan-meta b{color:var(--t-text-dim);font-weight:700;}

/* Nykytilanne / mittauksen rankatut palkkirivit */
.lnv-kan .kan-rivi{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--t-border);}
.lnv-kan .kan-rivi:last-child{border-bottom:none;}
.lnv-kan .kan-sija{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:var(--t-text-faint);min-width:20px;text-align:center;}
.lnv-kan .kan-nimi{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13.5px;min-width:56px;}
.lnv-kan .kan-bar-track{flex:1;height:20px;background:color-mix(in srgb,var(--t-text) 5%,transparent);
  border-radius:6px;overflow:hidden;position:relative;}
.lnv-kan .kan-bar-fill{height:100%;border-radius:6px;transform-origin:left;animation:lnvGrowX .8s ease both;}
.lnv-kan .kan-pct{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;min-width:52px;text-align:right;}
.lnv-kan .kan-muutos{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;min-width:52px;justify-content:flex-end;}
.lnv-kan .kan-muutos svg{width:11px;height:11px;}
.lnv-kan .kan-muutos.up{color:var(--up);} .lnv-kan .kan-muutos.down{color:var(--down);} .lnv-kan .kan-muutos.flat{color:var(--flat);}

/* Selainpalkki (edellinen/seuraava/liu'utin/autoplay) + lähdevalitsin */
.lnv-kan .kan-selain{display:flex;align-items:center;gap:.75rem;margin-top:20px;flex-wrap:wrap;}
.lnv-kan .kan-selain input[type=range]{flex:1;min-width:120px;accent-color:var(--kan-accent);}
.lnv-kan .kan-navbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:10px;color:var(--t-text-dim);
  font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:12px;padding:8px 12px;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.lnv-kan .kan-navbtn svg{width:14px;height:14px;}
.lnv-kan .kan-navbtn:hover:not(:disabled){color:var(--t-text);border-color:color-mix(in srgb,var(--kan-accent) 45%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--kan-accent) 18%,transparent);}
.lnv-kan .kan-navbtn:disabled{opacity:.4;cursor:default;}
.lnv-kan .kan-navcount{font-family:'Source Sans 3',sans-serif;font-size:12px;color:var(--t-text-muted);white-space:nowrap;}
.lnv-kan .kan-lahderivi{display:flex;align-items:center;gap:.6rem;margin-top:16px;flex-wrap:wrap;}
.lnv-kan .kan-lahderivi .glab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv-kan .kan-lahderivi .ui-tab-btn{flex:0 0 auto;min-width:0;padding:7px 14px;font-size:11px;}

/* Hallituksen yhteiskannatus -korostuskortti */
.lnv-kan .kan-hallitus{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.lnv-kan .kan-hallitus-val{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(30px,5vw,42px);color:var(--kan-accent);
  text-shadow:0 0 22px color-mix(in srgb,var(--kan-accent) 55%,transparent);line-height:1;}
.lnv-kan .kan-hallitus-lbl{font-size:13px;color:var(--t-text-dim);}
.lnv-kan .kan-hallitus-sub{font-size:12px;color:var(--t-text-muted);margin-top:2px;}

/* Aikasarjakaavioiden kehys + legendat + ohjeteksti (kaavion sisäinen SVG säilyy livenä) */
.lnv-kan .kan-chart-wrap{position:relative;width:100%;}
.lnv-kan .kan-chart-layout{display:flex;gap:1.5rem;flex-wrap:wrap;}
.lnv-kan .kan-chart-side{min-width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:9px;}
.lnv-kan .kan-legend{display:flex;flex-wrap:wrap;gap:8px;}
.lnv-kan .kan-hint{font-size:12px;color:var(--t-text-muted);margin-bottom:14px;line-height:1.5;}
.lnv-kan .kan-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--t-bg-card);border:1px solid var(--t-border);
  border-radius:999px;color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;
  padding:7px 13px;cursor:pointer;transition:color .18s ease,border-color .18s ease;white-space:nowrap;}
.lnv-kan .kan-toggle .kdot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.4;}
.lnv-kan .kan-toggle.on{color:var(--kan-accent);border-color:color-mix(in srgb,var(--kan-accent) 45%,transparent);}
.lnv-kan .kan-toggle.on .kdot{opacity:1;}

/* Legendan puoluepillerit: jaettu hehkuversio + kan-koot, swatch-pallo ja off-tila */
.lnv-kan .ui-filter-btn{gap:7px;padding:7px 13px;font-size:11.5px;letter-spacing:.03em;}
.lnv-kan .ui-filter-btn .kswatch{width:9px;height:9px;border-radius:50%;background:var(--ui-tab-color);flex:0 0 auto;}
.lnv-kan .ui-filter-btn.off{opacity:.4;}

/* Hallituskausikortit */
.lnv-kan .kan-hallitus-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--t-border);}
.lnv-kan .kan-hallitus-row:last-child{border-bottom:none;}
.lnv-kan .kan-hallitus-nimi{font-size:13px;color:var(--t-text);flex:1;min-width:0;}
.lnv-kan .kan-hallitus-kausi{font-size:11.5px;color:var(--t-text-faint);}
.lnv-kan .kan-hallitus-badge{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px;}

/* Badge / lähdefooter (jaettu .dot livestä) */
.lnv-kan .badge{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-kan .kan-source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;
  color:var(--t-text-faint);margin-top:6px;padding-top:16px;border-top:1px solid var(--t-border);}
.lnv-kan .kan-source b{color:var(--t-text-dim);font-weight:700;}
.lnv-kan .kan-source a{color:var(--kan-accent);}
.lnv-kan .kan-source .dot{width:4px;height:4px;border-radius:50%;background:var(--t-text-faint);display:inline-block;}
.lnv-kan .kan-empty{padding:34px;text-align:center;color:var(--t-text-muted);font-size:13px;}

@media (max-width:640px){
  .lnv-kan .kan-rivi{flex-wrap:wrap;}
  .lnv-kan .kan-bar-track{order:5;flex-basis:100%;margin-top:4px;}
  .lnv-kan .kan-chart-side{min-width:0;flex-basis:100%;}
}

/* ---- POLIITTINEN PÖRSSI (Valvontamoduuli) — kiinteä tunnusväri --porssi-accent
   (syvä teal). Säilyttää liven KAIKKI toiminnot (Lista/Kartta/Puolueet-alavälilehdet,
   rooli/puolue/tyyppi-suodattimet, lajittelu, KPI:t) — vain ulkoasu modernisoitu.
   Nousu/lasku-, puolue- ja tyyppivärit ovat kiinteitä datasemantiikkoja. Portattu
   design-snapshotista 07.07.2026. */
.lnv-porssi{--porssi-accent:var(--acc-porssi);--ui-filter-color:var(--porssi-accent);--up:#3ec63e;--down:#ff4d6d;--flat:var(--t-text-muted);}

/* Otsikkorivi (kanoninen .pagehead-row, sama kuin Lobbaus/Kytkökset/Aktiivisuus/Lupausindeksi) */
.lnv-porssi .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-porssi .rk-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--porssi-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--porssi-accent) 55%,transparent));}
.lnv-porssi .rk-symbol svg{width:100%;height:100%;display:block;}

.lnv-porssi #porssiSisalto{max-width:1040px;width:100%;margin:0 auto;}

/* Puolueohjelmat (.lnv-ohj, --acc-ohj) & Toteutumisindeksi (.lnv-oidx, --acc-oidx) —
   modernisoitu pagehead-row samaan malliin kuin Ryhmäkuri/Hillotolpat. */
.lnv-oidx{--oidx-accent:var(--acc-oidx);}
.lnv-ohj .pagehead-row,.lnv-oidx .pagehead-row{display:flex;align-items:center;gap:18px;
  padding:24px clamp(16px,4vw,32px) 0;flex-shrink:0;}
.lnv-ohj .ohj-symbol,.lnv-oidx .ohj-symbol{flex:0 0 auto;width:52px;height:52px;}
.lnv-ohj .ohj-symbol{color:var(--ohj-accent);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--ohj-accent) 55%,transparent));}
.lnv-oidx .ohj-symbol{color:var(--oidx-accent);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--oidx-accent) 55%,transparent));}
.lnv-ohj .ohj-symbol svg,.lnv-oidx .ohj-symbol svg{width:100%;height:100%;display:block;}
.lnv-ohj .pagehead{text-shadow:0 0 20px color-mix(in srgb,var(--ohj-accent) 35%,transparent);}
.lnv-oidx .pagehead{text-shadow:0 0 20px color-mix(in srgb,var(--oidx-accent) 35%,transparent);}
.lnv-ohj .pagehead-line,.lnv-oidx .pagehead-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.lnv-oidx .beta-pill{font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oidx-accent);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--oidx-accent) 50%,transparent);
  background:color-mix(in srgb,var(--oidx-accent) 10%,transparent);align-self:center;}
.lnv-ohj .ohj-kehys,.lnv-oidx .ohj-kehys{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:8px clamp(16px,4vw,32px) 60px;max-width:1040px;width:100%;margin:0 auto;}

/* Voimasuhteet (.lnv-vs) & Hallitus (.lnv-hal) — pagehead-row-symbolit */
.lnv-vs .pagehead-row,.lnv-hal .pagehead-row{display:flex;align-items:center;gap:18px;}
.lnv-vs .vs-symbol,.lnv-hal .hal-symbol{flex:0 0 auto;width:52px;height:52px;color:var(--t-accent);
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t-accent) 55%,transparent));}
.lnv-vs .vs-symbol svg,.lnv-hal .hal-symbol svg{width:100%;height:100%;display:block;}

/* Tilastot & Ennätykset -overlayt — moderni otsikkorivi (.ov-head).
   --ov-c = overlayn korostusväri (pronssi/accent). */
.lnv .ov-head{display:flex;align-items:center;gap:14px;margin-bottom:1.2rem;}
.lnv .ov-symbol{flex:0 0 auto;width:38px;height:38px;color:var(--ov-c,var(--t-accent));
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ov-c,var(--t-accent)) 55%,transparent));}
.lnv .ov-symbol svg{width:100%;height:100%;display:block;}
.lnv .ov-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-text);margin:2px 0 0;
  text-shadow:0 0 16px color-mix(in srgb,var(--ov-c,var(--t-accent)) 40%,transparent);}

/* Suodatinpillerit: jaettu hehkuversio (koot = jaetut oletukset) */

/* Lajittelu- ja alavälilehti-tabit (jaettu .ui-tab-btn, kompakti) */
.lnv-porssi .porssi-viewtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.lnv-porssi .porssi-viewtabs .ui-tab-btn,.lnv-porssi .porssi-sortrow .ui-tab-btn{flex:0 0 auto;min-width:0;padding:9px 15px;font-size:11.5px;}
/* Lapsivalitsin '>': saanto on tarkoitettu napin OMALLE ikonille. Ilman sita se osui
   myos .prem-tahti-spanin sisalla olevaan tahteen ja pakotti sen 15px:iin 11px:n
   laatikossa -> +4px ylivuoto. Mitattu 20.07.2026. */
.lnv-porssi .porssi-viewtabs .ui-tab-btn > svg,.lnv-porssi .porssi-sortrow .ui-tab-btn > svg{width:15px;height:15px;flex:0 0 auto;}

/* Hero-yhteenvetopanelit */
.lnv-porssi .porssi-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.lnv-porssi .panel{position:relative;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:16px;box-shadow:0 20px 50px rgba(var(--t-shadow-ink),.36), inset 0 1px 0 rgba(var(--t-sheen-ink),.04);
  padding:18px 20px;overflow:hidden;margin-bottom:16px;}
.lnv-porssi .porssi-stats .panel{margin-bottom:0;}
.lnv-porssi .panel > *{position:relative;z-index:1;}
.lnv-porssi .panel .motif{position:absolute;right:-22px;top:50%;transform:translateY(-50%) rotate(-8deg);width:130px;height:130px;
  color:var(--gl,var(--porssi-accent));opacity:.05;pointer-events:none;transition:opacity .35s ease;z-index:0;}
.lnv-porssi .panel .motif svg{width:100%;height:100%;display:block;}
.lnv-porssi .panel:hover .motif{opacity:.2;}
.lnv-porssi .seclab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;display:block;}
.lnv-porssi .porssi-stat-val{font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;margin-top:5px;line-height:1;
  text-shadow:0 0 18px color-mix(in srgb,var(--gl,var(--porssi-accent)) 35%,transparent);}
.lnv-porssi .porssi-stat-sub{font-size:12px;color:var(--t-text-dim);margin-top:4px;}

/* KPI-puolueindeksirivi (klikattavat) */
/* Tyyppisuodatin valikkona (ennen: 6 sirua omalla rivillaan). */
.lnv-porssi .porssi-select{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:999px;
  color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;padding:9px 14px;cursor:pointer;min-width:0;max-width:100%;
  transition:border-color .2s ease;}
.lnv-porssi .porssi-select:focus{outline:none;border-color:color-mix(in srgb,var(--porssi-accent) 45%,transparent);}
/* .porssi-kpirow / .porssi-kpi: rivi poistettu kaytosta 29.07.2026 (toinen
   puoluesuodatin varsinaisen ylapuolella). Saannot jatetaan toistaiseksi, jos
   rivi palautetaan — ne eivat vaikuta mihinkaan ilman elementtia. */
.lnv-porssi .porssi-kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px;}
.lnv-porssi .porssi-kpi{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:12px;padding:11px 13px;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.lnv-porssi .porssi-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--porssi-accent) 30%,var(--t-border));
  box-shadow:0 12px 28px rgba(var(--t-shadow-ink),.36);}
.lnv-porssi .porssi-kpi .p{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.03em;}
.lnv-porssi .porssi-kpi .v{font-family:'Orbitron',sans-serif;font-weight:900;font-size:19px;line-height:1;margin-top:4px;}
.lnv-porssi .porssi-kpi .s{font-size:11px;color:var(--t-text-muted);margin-top:4px;}

/* Suodatinrivit */
/* Haku + rajaukset + lajittelu yhdella rivilla heti listan ylla. Hakukentta
   venyy, napit ja valikot pitavat kokonsa (kayttajan linjaus 29.07.2026). */
.lnv-porssi .porssi-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.lnv-porssi .porssi-filterbar .porssi-search{flex:1 1 220px;min-width:180px;}
.lnv-porssi .porssi-filterbar .porssi-search input{padding:9px 13px 9px 36px;font-size:12.5px;border-radius:999px;}
.lnv-porssi .porssi-sortrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center;}
.lnv-porssi .porssi-sortrow .glab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;}
.lnv-porssi .porssi-puoluewrap{position:relative;}
.lnv-porssi .porssi-puomenu{position:absolute;top:calc(100% + 6px);left:0;z-index:200;display:none;flex-direction:column;gap:4px;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:12px;padding:8px;min-width:150px;
  box-shadow:0 20px 44px rgba(var(--t-shadow-ink),.5);}
.lnv-porssi .porssi-puomenu .ui-filter-btn{width:100%;justify-content:flex-start;}

/* Toolbar / haku */
.lnv-porssi .porssi-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.lnv-porssi .porssi-search{position:relative;flex:1 1 260px;min-width:220px;}
.lnv-porssi .porssi-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t-text-muted);pointer-events:none;}
.lnv-porssi .porssi-search input{width:100%;background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;
  color:var(--t-text);font-family:'Source Sans 3',sans-serif;font-size:13.5px;padding:11px 14px 11px 38px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.lnv-porssi .porssi-search input::placeholder{color:var(--t-text-muted);}
.lnv-porssi .porssi-search input:focus{outline:none;border-color:color-mix(in srgb,var(--porssi-accent) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--porssi-accent) 30%,transparent),0 0 20px color-mix(in srgb,var(--porssi-accent) 20%,transparent);}

.lnv-porssi .porssi-meta{font-size:12.5px;color:var(--t-text-muted);margin-bottom:12px;letter-spacing:.02em;}
.lnv-porssi .porssi-meta b{color:var(--t-text-dim);font-weight:700;}

/* Osakerivit */
.lnv-porssi .porssi-list{display:flex;flex-direction:column;gap:10px;}
.lnv-porssi .porssi-row{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:14px;
  padding:13px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lnv-porssi .porssi-row:hover{transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(var(--t-shadow-ink),.4),0 0 20px color-mix(in srgb,var(--porssi-accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--porssi-accent) 26%,var(--t-border));}
.lnv-porssi .porssi-sija{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:var(--t-text-faint);min-width:22px;text-align:center;}
.lnv-porssi .porssi-ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--t-bg-panel);border:1.5px solid var(--pc,var(--porssi-accent));}
.lnv-porssi .porssi-ava svg{width:20px;height:20px;color:var(--t-text-muted);}
.lnv-porssi .porssi-ava img{width:100%;height:100%;object-fit:cover;object-position:top;}
.lnv-porssi .porssi-who{flex:1;min-width:0;}
.lnv-porssi .porssi-nimi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lnv-porssi .porssi-nimi .nm{font-size:13.5px;color:var(--t-text);font-weight:600;}
.lnv-porssi .porssi-rooli{font-size:11.5px;color:var(--t-text-faint);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.lnv-porssi .porssi-tyyppi{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;color:var(--tc,var(--t-text-muted));
  border:1px solid color-mix(in srgb,var(--tc,var(--t-text-muted)) 45%,transparent);background:color-mix(in srgb,var(--tc,var(--t-text-muted)) 13%,transparent);}
.lnv-porssi .porssi-tyyppi svg{width:11px;height:11px;}
.lnv-porssi .porssi-metrics{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;min-width:132px;}
.lnv-porssi .porssi-metric{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.lnv-porssi .porssi-metric .mlab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-text-muted);font-weight:700;min-width:30px;text-align:right;}
.lnv-porssi .porssi-bar{width:52px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--t-text) 8%,transparent);overflow:hidden;flex:0 0 auto;}
.lnv-porssi .porssi-bar > i{display:block;height:100%;border-radius:999px;}
.lnv-porssi .porssi-metric .mval{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;min-width:48px;text-align:right;}
.lnv-porssi .porssi-metric.mv .mval{font-size:12px;}

/* Scatter-kartta */
.lnv-porssi .porssi-hint{font-size:12px;color:var(--t-text-muted);margin-bottom:12px;line-height:1.5;}
.lnv-porssi .porssi-scatter-wrap svg{width:100%;height:auto;display:block;border-radius:12px;
  background:color-mix(in srgb,var(--t-text) 2%,transparent);border:1px solid var(--t-border);}

/* Puoluekortit (Puolueet-alanäkymä) */
.lnv-porssi .porssi-pcards{display:flex;flex-direction:column;gap:10px;}
.lnv-porssi .porssi-pcard{background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:14px;padding:14px 16px;}
.lnv-porssi .porssi-pcard .phead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.lnv-porssi .porssi-pcard .pname{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13.5px;}
.lnv-porssi .porssi-pcard .psub{font-size:11.5px;color:var(--t-text-muted);}
.lnv-porssi .porssi-pcard .pk{margin-left:auto;font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;}
.lnv-porssi .porssi-pcard .prow{display:flex;align-items:center;gap:10px;margin-top:7px;}
.lnv-porssi .porssi-pcard .prow .rl{font-size:11px;letter-spacing:.06em;color:var(--t-text-faint);min-width:74px;text-transform:uppercase;font-weight:700;}
.lnv-porssi .porssi-pcard .prow .rt{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,var(--t-text) 8%,transparent);overflow:hidden;}
.lnv-porssi .porssi-pcard .prow .rt > i{display:block;height:100%;border-radius:999px;}
.lnv-porssi .porssi-pcard .prow .rv{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;min-width:34px;text-align:right;}

/* Kaava + lähdefooter */
.lnv-porssi .porssi-kaava{font-size:11px;line-height:1.6;color:var(--t-text-faint);margin-top:16px;
  background:color-mix(in srgb,var(--porssi-accent) 4%,var(--t-bg-panel));
  border:1px solid color-mix(in srgb,var(--porssi-accent) 16%,var(--t-border));border-radius:12px;padding:12px 14px;}
.lnv-porssi .porssi-kaava b{color:var(--t-text-dim);font-weight:700;}
.lnv-porssi .porssi-source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em;
  color:var(--t-text-faint);margin-top:18px;padding-top:16px;border-top:1px solid var(--t-border);}
.lnv-porssi .porssi-source b{color:var(--t-text-dim);font-weight:700;}
.lnv-porssi .porssi-source .dot{width:4px;height:4px;border-radius:50%;background:var(--t-text-faint);display:inline-block;}
.lnv-porssi .badge{font-weight:700;font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:999px;text-align:center;white-space:nowrap;}
.lnv-porssi .porssi-empty{padding:32px;text-align:center;color:var(--t-text-muted);font-size:13px;}

@media (max-width:640px){
  .lnv-porssi .porssi-stats{grid-template-columns:1fr;}
  .lnv-porssi .porssi-row{flex-wrap:wrap;}
  .lnv-porssi .porssi-metrics{min-width:0;flex-basis:100%;}
  .lnv-porssi .porssi-metric{justify-content:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .lnv *{animation:none !important;transition:none !important;}
  .lnv .card-hover:hover{transform:none;}
}

/* ============================================================
   PUOLUEOHJELMAT — näkymäkohtaiset tyylit (Valtarakenteet-moduuli).
   Portattu design-snapshotista 07.07.2026. Tunnusväri
   --ohj-accent (kiinteä amber). Jaettuja komponentteja (.ui-filter-btn,
   .ui-close-btn) EI ylikirjoiteta — ne tulevat sivuston yhteisistä säännöistä.
   ============================================================ */
.ohj-label{display:block;font-size:var(--fs-sm);color:var(--t-text-dim);letter-spacing:.08em;margin-bottom:.4rem;font-weight:700;text-transform:uppercase;}

.ohj-select-wrap{position:relative;display:inline-block;min-width:280px;max-width:100%;}
.ohj-select{appearance:none;-webkit-appearance:none;width:100%;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:11px;color:var(--t-text);
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:600;
  padding:.6rem 2.4rem .6rem .9rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
.ohj-select:hover{border-color:color-mix(in srgb,var(--ohj-accent) 35%,var(--t-border));}
.ohj-select:focus{outline:none;border-color:var(--ohj-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ohj-accent) 22%,transparent);}
.ohj-select-wrap::after{content:'';position:absolute;right:.9rem;top:50%;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--t-text-dim);border-bottom:2px solid var(--t-text-dim);transform:translateY(-70%) rotate(45deg);}

.ohj-card{position:relative;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:16px;box-shadow:0 18px 44px rgba(var(--t-shadow-ink),.32), inset 0 1px 0 rgba(var(--t-sheen-ink),.03);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.ohj-card:hover{transform:translateY(-2px);
  box-shadow:0 24px 54px rgba(var(--t-shadow-ink),.4),0 0 22px color-mix(in srgb,var(--ohj-accent) 18%,transparent);
  border-color:color-mix(in srgb,var(--ohj-accent) 30%,var(--t-border));}
.ohj-card .motif{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(-8deg);width:120px;height:120px;
  color:var(--ohj-accent);opacity:.05;pointer-events:none;transition:opacity .35s ease;z-index:0;}
.ohj-card:hover .motif{opacity:.28;}
.ohj-card .motif svg{width:100%;height:100%;display:block;}
.ohj-card > *{position:relative;z-index:1;}
.ohj-card-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-bottom:1px solid var(--t-border);flex-wrap:wrap;}
.ohj-card-code{font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:700;letter-spacing:.12em;}
.ohj-card-name{font-size:var(--fs-md);color:var(--t-text-dim);}
.ohj-card-body{padding:.9rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;}

.ohj-badge{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap;}

.ohj-lue{display:flex;align-items:center;gap:.85rem;padding:.7rem .95rem;border-radius:10px;cursor:pointer;
  background:color-mix(in srgb,var(--ohj-accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--ohj-accent) 32%,transparent);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;}
.ohj-lue:hover{background:color-mix(in srgb,var(--ohj-accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--ohj-accent) 55%,transparent);transform:translateX(2px);}
.ohj-lue-title{flex:1;min-width:0;font-size:var(--fs-md);color:var(--t-text);line-height:1.4;}
.ohj-lue-ic{flex-shrink:0;width:17px;height:17px;color:var(--ohj-accent);}
.ohj-lue-label{flex-shrink:0;display:flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.06em;color:var(--ohj-accent);text-transform:uppercase;}

.ohj-warn{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-md);color:var(--t-text-muted);line-height:1.5;margin-bottom:.75rem;}
.ohj-warn svg{flex-shrink:0;width:16px;height:16px;color:var(--ohj-accent);}

.ohj-source{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-sm);letter-spacing:.03em;
  color:var(--t-text-faint);margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--t-border);}
.ohj-source b{color:var(--t-text-dim);font-weight:700;}
.ohj-source .dot{width:4px;height:4px;border-radius:50%;background:var(--t-text-faint);display:inline-block;}

/* Lukunäkymän typografia — otsikkoväri per puolue (--ohj-vari), fallback amber */
.ohj-viewer-title{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,currentColor 40%,transparent);}
.ohj-viewer-body{--ohj-vari:var(--ohj-accent);}
.ohj-viewer-meta{font-size:var(--fs-md);color:var(--t-text-muted);margin-bottom:1.25rem;letter-spacing:.04em;}
.ohj-viewer-body h2{font-family:'Source Sans 3',sans-serif;font-size:1.05rem;font-weight:700;color:var(--ohj-vari);margin:1.6rem 0 .75rem;letter-spacing:.04em;}
.ohj-viewer-body h2:first-of-type{margin-top:0;}
.ohj-viewer-body h3{font-family:'Source Sans 3',sans-serif;font-size:var(--fs-md);font-weight:700;
  color:color-mix(in srgb,var(--ohj-vari) 80%,var(--t-text-dim));margin:1.1rem 0 .5rem;letter-spacing:.04em;}
.ohj-viewer-body p{font-size:var(--fs-md);color:var(--t-text-dim);line-height:1.7;margin:.5rem 0;}
.ohj-viewer-body .li{font-size:var(--fs-md);color:var(--t-text-dim);line-height:1.7;
  padding:.2rem 0 .2rem 1rem;border-left:2px solid color-mix(in srgb,var(--ohj-vari) 45%,transparent);margin:.2rem 0;}
.ohj-viewer-body .src{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--t-border);font-size:var(--fs-sm);color:var(--t-text-faint);}

/* Suodatinpillerit: jaettu hehkuversio + ohjelma-koot (keskitys, fs-sm) */
#ohjelmaNakyma{--ui-filter-color:var(--ohj-accent);}
#ohjelmaNakyma .ui-filter-btn{justify-content:center;padding:.35rem .85rem;font-size:var(--fs-sm);letter-spacing:.08em;}

/* Sulje-napin (SVG-X) koko tässä näkymässä ja lukunäkymässä */
#ohjelmaNakyma .ui-close-btn svg,#ohjelmaViewer .ui-close-btn svg{width:12px;height:12px;}

/* ============================================================
   YHTENÄINEN SISÄLTÖLEVEYS (08.07.2026) — pidettävä tiedoston
   LOPUSSA jotta voittaa samanspesifisyyksiset margin-shorthandit.
   Malli = Hillotolpat/Ryhmäkuri: pagehead-row alkaa vasemmasta
   laidasta täysleveänä, kaikki muu sisältö keskittyy 1040px:iin.
   ============================================================ */
.lnv-lb > :not(.pagehead-row),
.lnv-akt > :not(.pagehead-row),
.lnv-kyt > :not(.pagehead-row),
.lnv-lup > :not(.pagehead-row),
.lnv-rah > :not(.pagehead-row),
.lnv-vs > :not(.pagehead-row),
.lnv-hal > :not(.pagehead-row),
/* Lisatty 23.07.2026 kayttajan havainnosta: Kuntavahti, Aluevahti, Pyorooovi ja
   MEP levisivat koko ruudun leveydelle, kun kaikki muut osiot noudattavat tata
   1040px-linjaa. Syy oli sama hiljainen puuttuminen kuin Pyoroovin ikonivikassa
   22.-23.07.: nama scopet on co-scopattu jaettuun .hillo-*-komponenttiin, mutta
   ne jaivat pois TASTA valitsinlistasta - eika puuttuminen aiheuta virhetta vaan
   tyylittomyyden. Kayttaja huomasi kolme; MEP loytyi mittaamalla kaikki 15.
   Huom: .lnv-kuv kattaa seka Kuntavahdin etta Aluevahdin (jaettu scope). */
.lnv-kuv > :not(.pagehead-row),
.lnv-mep > :not(.pagehead-row),
.lnv-pyo > :not(.pagehead-row),
/* Lisatty 28.07.2026 — KOLMAS kerta samalle vialle (vrt. 08.07. ja 23.07.).
   Kayttaja huomasi Uusimmat merkinnat (.lnv-mrk) levialla koko ruudun
   leveydelle. Mitattiin kaikki 18 lnv-scopea, ja kayttajan havainnon lisaksi
   loytyi TOINEN jota han ei ollut huomannut: Ohjelmaindeksi (.lnv-oidx)
   levisi taydet 1440px. Ohjelma (.lnv-ohj) ei avautunut mittaukseen, mutta
   silla ei ole omaa leveyssaantoa lainkaan - vain ikonin koko - joten se on
   samassa tilassa ja lisataan tahan.
   Sama juurisyy joka kerta: puuttuminen tasta listasta ei aiheuta VIRHETTA
   vaan tyylittomyyden, joten mikaan ei huomauta siita. Nelja scopea
   (.lnv-rk, .lnv-hil, .lnv-kan, .lnv-porssi) eivat ole talla listalla mutta
   ovat silti kunnossa: niilla on oma 1040px-saantonsa. Siksi pelkka
   CSS:n lukeminen ei riita - lopputulos on mitattava. */
.lnv-mrk > :not(.pagehead-row),
.lnv-ohj > :not(.pagehead-row),
.lnv-oidx > :not(.pagehead-row),
.lnv-sig > :not(.pagehead-row){max-width:1040px;margin-inline:auto;}

/* ============================================================
   MOBIILIKORJAUKSET (10.07.2026, Mobiilivahti-löydökset):
   1) Kapealla näytöllä pitkä Orbitron-otsikko (PUOLUEOHJELMAT,
      TOTEUTUMISINDEKSI) työnsi pagehead-rivin ✕-sulkunapin kokonaan
      viewportin ulkopuolelle — näkymää ei voinut sulkea kosketuslaitteella.
   2) .ui-tab-btn: jaettu flex:1 + min-width:100px + overflow:hidden
      leikkasi pitkät tab-tekstit ("2023 tammi–huhti", "Valiokuntapoissaolot")
      — mobiilissa napit sisältölevyisiksi ja rivit rivittyviksi.
   3) Esc-näppäinvihjeillä ei ole virkaa kosketuslaitteilla.
   ============================================================ */
@media (max-width: 640px){
  .pagehead-row{gap:12px;}
  .pagehead-row > div{min-width:0;}
  .pagehead-row > [class*="-symbol"]{width:40px;height:40px;}
  /* !important: yleinen mobiili-h1-sääntö (rivi ~1256) käyttää !importantia.
     anywhere on tässä tietoinen kompromissi (✕-nappi ei saa työntyä ruudulta),
     mutta yksinään se katkoo sanan mistä kohtaa vain ("TOTEUTUMISINDEK SI").
     hyphens ohjaa katkon tavutuskohtaan ja anywhere jää hätävaraksi. */
  .lnv .pagehead{font-size:clamp(15px,4.4vw,20px) !important;letter-spacing:.05em !important;overflow-wrap:anywhere;hyphens:auto;}
  .pagehead-row .ui-close-btn{flex:0 0 auto;}
  .lnv .ui-tab-btn{flex:0 1 auto;min-width:0;padding:.5rem .7rem;}
  .lnv-til .tabrow .ui-tab-btn{flex:0 1 auto;min-width:0;}
  .lnv-kyt .kytk-tabs-row{flex-wrap:wrap;}
  .lnv-akt .akt-pager{flex-wrap:wrap;}
}
/* Näppäimistövihje (Esc) piiloon kosketuslaitteilla — näppäimistöä ei ole */
@media (hover: none) and (pointer: coarse){
  .kbd{display:none;}
}

/* ── Teemakierroksen 10.07.2026 täsmäkorjaukset ── */
/* Rahoituksen lähdelinkki oli selaimen oletussininen (tyyli puuttui) */
.lnv .source a{color:var(--t-accent);}
/* Vaalea Virasto: Hillotolppien YTJ-syaani ja kortin Avaa-napin liukuväri
   eivät erotu valkoiselta pohjalta */
[data-theme="virasto"] .lnv-hil{--k-ytj:#008493;--k-lakannut:#8a5c00;--k-poikkeava:#8a5c00;--k-avustus:#0b7a52;--k-kunta:#0369a1;}
[data-theme="virasto"] .ek-act.avaa{background:var(--t-accent);}
/* Kovakoodattu syaani pudotusvalikkonuoli ei erotu vaalealta pohjalta */
[data-theme="virasto"] .nav-dropdown-arrow{color:var(--t-accent);}

/* ============================================================
   PROFIILIKORTIN SUBMODALIT — modernisointi (08.07.2026).
   Sama kieli kuin moduulinäkymissä: Orbitron-otsikko hehkulla,
   line-art-symboli, jaetut .ui-tab-btn/.ui-filter-btn-painikkeet.
   ============================================================ */
#submodalTitle{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 16px color-mix(in srgb,currentColor 45%,transparent);}
#submodalTitle .sm-symbol{width:24px;height:24px;flex:0 0 auto;display:inline-flex;
  filter:drop-shadow(0 0 9px color-mix(in srgb,currentColor 60%,transparent));}
#submodalTitle .sm-symbol svg{width:100%;height:100%;display:block;}
/* Sisävälilehdet: kompakti pilleri, ikoni rajattu (perus .ui-tab-btn ei rajaa svg:tä) */
#submodalBody .ui-tab-btn{flex:0 0 auto;min-width:0;font-size:11px;padding:.45rem .85rem;}
#submodalBody .ui-tab-btn svg{width:14px;height:14px;flex:0 0 auto;}
#submodalBody .ui-filter-btn svg{width:13px;height:13px;flex:0 0 auto;}
/* Linkit-välilehden pilleri­linkit */
#submodalBody .pk-lnk{display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.12em;text-decoration:none;color:var(--lnk-c,var(--t-accent));
  border:1px solid color-mix(in srgb,var(--lnk-c,var(--t-accent)) 45%,transparent);
  border-radius:999px;padding:.5rem 1.05rem;
  background:color-mix(in srgb,var(--lnk-c,var(--t-accent)) 8%,transparent);
  transition:box-shadow .18s ease,transform .18s ease;}
#submodalBody .pk-lnk:hover{transform:translateY(-1px);
  box-shadow:0 0 14px color-mix(in srgb,var(--lnk-c,var(--t-accent)) 35%,transparent);}
@media (prefers-reduced-motion:reduce){
  #submodalBody .pk-lnk,#submodalBody .pk-lnk:hover{transform:none;transition:none;}
}

/* ============================================================
   PREMIUM-PORTTI — lukkopaneeli + tähtimerkit (08.07.2026).
   Sama kieli kuin moduulinäkymissä: Orbitron, line-art, hehku.
   Kulta-aksentti erottaa premiumin teeman omista väreistä.
   ============================================================ */
.prem-lukko{--prem-c:var(--t-bronze,#d4a017);
  max-width:min(560px,100%);box-sizing:border-box;margin:2.5rem auto;padding:2.2rem 1.8rem;text-align:center;
  border:1px dashed color-mix(in srgb,var(--prem-c) 55%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--prem-c) 6%,transparent);}
.prem-lukko-ikoni{width:44px;height:44px;margin:0 auto .9rem;color:var(--prem-c);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--prem-c) 55%,transparent));}
.prem-lukko-ikoni svg{width:100%;height:100%;display:block;}
.prem-lukko-laji{display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--prem-c);
  border:1px solid color-mix(in srgb,var(--prem-c) 45%,transparent);
  border-radius:999px;padding:.3rem .8rem;margin-bottom:1rem;
  background:color-mix(in srgb,var(--prem-c) 10%,transparent);}
.prem-lukko-laji svg{width:11px;height:11px;flex:0 0 auto;}
.prem-lukko-nimi{font-family:'Orbitron',sans-serif;font-weight:900;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-text);
  text-shadow:0 0 16px color-mix(in srgb,var(--prem-c) 40%,transparent);
  margin-bottom:.7rem;
  /* Pitkä yhdyssananimi (esim. RAHOITUSEPÄSELVYYDET-KOOSTE) ylivuoti 54 px
     mobiilissa (löytyi 27.07.2026 kun lukko tuli standalone-näkymään) */
  overflow-wrap:anywhere;}
.prem-lukko-kuvaus{font-size:var(--fs-md,14px);line-height:1.6;
  color:var(--t-text-muted);margin:0 auto 1.1rem;max-width:44ch;}
.prem-lukko-alaviite{font-size:var(--fs-sm,12px);line-height:1.55;
  color:var(--t-text-dim);border-top:1px solid color-mix(in srgb,var(--prem-c) 25%,transparent);
  padding-top:.9rem;max-width:46ch;margin:0 auto;}
/* ── VAALIRAHOITUKSEN TUKIJALISTA (vrh-*, 27.07.2026) ─────────────────
   Tiivis rivi: nimi katkaistaan ellipsillä (koko nimi title-attribuutissa),
   summa ei koskaan rivity. Kolme kärkeä näkyvissä, loput <details>-taitteen
   takana. Mobiilissa (≤560px) sarakkeet allekkain — kaksi rinnakkaista
   listaa 375px:llä jättäisi nimelle ~150px. */
.vrh-rivi{margin-bottom:.3rem;padding:.35rem .5rem;background:var(--t-bg-card);
  border:1px solid var(--t-border);border-radius:4px;}
.vrh-ylarivi{display:flex;justify-content:space-between;align-items:baseline;
  gap:.4rem;margin-bottom:.15rem;}
.vrh-nimi{font-size:var(--fs-sm);color:var(--t-text-muted);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vrh-summa{font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);
  flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
.vrh-palkki{background:var(--t-bg-deep,var(--t-bg-panel));border-radius:2px;height:3px;overflow:hidden;}
.vrh-palkki > div{height:100%;opacity:.7;border-radius:2px;}
.vrh-lisaa > summary{cursor:pointer;font-size:var(--fs-sm);color:var(--t-text-dim);
  padding:.3rem .5rem;border:1px dashed var(--t-border);border-radius:4px;
  list-style:none;transition:color .14s,border-color .14s;}
.vrh-lisaa > summary::-webkit-details-marker{display:none;}
.vrh-lisaa > summary::before{content:'▾ ';}
.vrh-lisaa[open] > summary::before{content:'▴ ';}
.vrh-lisaa > summary:hover{color:var(--t-text);border-color:var(--t-text-dim);}
.vrh-lisaa[open] > summary{margin-bottom:.3rem;}
@media (max-width:560px){
  .vrh-sarakkeet{grid-template-columns:minmax(0,1fr) !important;}
}

/* ── UUSIMMAT MERKINNÄT (lnv-mrk, 27.07.2026) ─────────────────────────
   Kortit ovat koko lokin selattava lista. Ei kiinteitä sarakeleveyksiä
   eikä nowrapia — pitkät lahjakuvaukset rivittyvät (mobiiliansat:
   grid-min-content & nimikatkeamiset, ks. CLAUDE.md). */
.lnv-mrk .mrk-kortti{--mk:var(--t-bronze,#d4a017);
  background:var(--t-bg-panel);border:1px solid var(--t-border);border-left:3px solid var(--mk);
  border-radius:10px;padding:.85rem 1rem;margin-bottom:.7rem;cursor:pointer;
  transition:background .14s,border-color .14s;}
.lnv-mrk .mrk-kortti:hover,.lnv-mrk .mrk-kortti:focus-visible{background:var(--t-bg-card);
  border-color:color-mix(in srgb,var(--mk) 55%,var(--t-border));outline:none;}
.lnv-mrk .mrk-ylarivi{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.25rem;}
.lnv-mrk .mrk-pvm{font-family:'Source Sans 3',sans-serif;font-size:var(--fs-sm);
  color:var(--t-text-dim);font-variant-numeric:tabular-nums;}
.lnv-mrk .mrk-kategoria{font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mk);
  border:1px solid color-mix(in srgb,var(--mk) 45%,transparent);border-radius:999px;
  padding:.15rem .6rem;overflow-wrap:anywhere;}
.lnv-mrk .mrk-nimirivi{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.35rem;}
.lnv-mrk .mrk-nimi{font-size:var(--fs-md);font-weight:700;color:var(--t-text);overflow-wrap:anywhere;}
.lnv-mrk .mrk-puolue{font-size:var(--fs-sm);font-weight:600;}
.lnv-mrk .mrk-teksti{font-size:var(--fs-md);color:var(--t-text-muted);line-height:1.5;
  overflow-wrap:anywhere;padding:.1rem 0;}
.lnv-mrk .mrk-poistettu{color:var(--t-text-dim);text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--t-text-dim) 55%,transparent);}

/* Tähtimerkki välilehtinapissa */
.prem-tahti{display:inline-flex;width:11px;height:11px;flex:0 0 auto;
  margin-left:.35rem;color:var(--t-bronze,#d4a017);vertical-align:middle;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--t-bronze,#d4a017) 60%,transparent));}
/* min-width:0 valttamaton: .prem-tahti on inline-flex, ja sen svg-lapsella on
   flexissa oletuksena min-width:auto -> se ei kutistu sisasyntyiseen kokoonsa
   (16px) pienemmaksi vaikka width:100% pyytaisi 11px. Tahti vuoti +5px yli
   laatikkonsa ja levitti myos emo-spanin ("Kapinalliset" +5px). Mitattu
   20.07.2026 Poliitikkokortissa, Porssissa ja Ryhmakurissa. */
/* Luokka toistettuna (.prem-tahti.prem-tahti) nostaa spesifisyyden 0-2-1:een, jotta
   tama voittaa nakymakohtaiset ikonisaannot kuten .lnv-rk .ui-tab-btn svg (0-2-1,
   rivi ~5427) - sama spesifisyys, mutta tama on tiedostossa myohempana. Ilman tata
   tahden svg jai 16px:iin 11px:n laatikossa ja vuoti +5px, mika levitti myos
   emo-spanin ("Kapinalliset"). min-width:0 tarvitaan koska flex-lapsen min-width:auto
   estaisi kutistumisen sisasyntyiseen kokoon asti. Mitattu 20.07.2026. */
.prem-tahti.prem-tahti svg{width:100%;height:100%;display:block;min-width:0;flex:0 1 auto;}
/* Odotuslista-CTA (lukkopaneeli + modaali) */
.prem-cta{--prem-c:var(--t-bronze,#d4a017);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--t-bg-deep,#0a0e1a);border-radius:999px;padding:.65rem 1.5rem;
  margin:0 auto 1.1rem;border:1px solid var(--prem-c);
  background:linear-gradient(150deg,color-mix(in srgb,var(--prem-c) 90%,#fff),var(--prem-c));
  box-shadow:0 0 18px color-mix(in srgb,var(--prem-c) 45%,transparent);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.prem-cta:hover{transform:translateY(-1px);
  box-shadow:0 0 26px color-mix(in srgb,var(--prem-c) 65%,transparent);}
/* Yläpalkin Premium-nappi */
.pp-topbar-prem{--prem-c:var(--t-bronze,#d4a017);
  display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--prem-c);
  border:1px solid color-mix(in srgb,var(--prem-c) 45%,transparent);
  border-radius:999px;padding:.35rem .85rem;
  background:color-mix(in srgb,var(--prem-c) 10%,transparent);
  cursor:pointer;transition:background .15s ease,box-shadow .15s ease;}
.pp-topbar-prem:hover{background:color-mix(in srgb,var(--prem-c) 18%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--prem-c) 40%,transparent);}
.pp-topbar-prem svg{width:11px;height:11px;flex:0 0 auto;}
/* Premium-modaali */
.prem-modal-overlay{position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  background:color-mix(in srgb,var(--t-bg-deep,#0a0e1a) 72%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.prem-modal{--prem-c:var(--t-bronze,#d4a017);
  position:relative;max-width:560px;max-height:min(86vh,720px);overflow-y:auto;
  padding:2.2rem 1.8rem;text-align:center;border-radius:14px;
  border:1px dashed color-mix(in srgb,var(--prem-c) 55%,transparent);
  background:color-mix(in srgb,var(--prem-c) 6%,var(--t-bg-deep,#0a0e1a));}
.prem-modal-close{position:absolute;top:.7rem;right:.7rem;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--t-border,#334);
  background:transparent;color:var(--t-text-muted,#99a);font-size:13px;
  cursor:pointer;line-height:1;}
.prem-modal-close:hover{color:var(--t-text,#eef);border-color:var(--t-text-muted,#99a);}
.prem-modal-lista{list-style:none;margin:0 auto 1.4rem;padding:0;max-width:46ch;
  text-align:left;font-size:var(--fs-sm,12px);line-height:1.6;color:var(--t-text-muted);}
.prem-modal-lista li{padding:.45rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--prem-c) 18%,transparent);}
.prem-modal-lista li:last-child{border-bottom:none;}
.prem-modal-lista strong{color:var(--t-text);font-weight:600;}

/* ── Menetelmäseloste (AI-linjaus 16.07.2026): "Miten tämä on laskettu?" ──
   Linkki + modaali korvaavat hajautetut Analyysi:tekoäly-badget. Linkkiväri
   --t-accent-text = AA-turvallinen pienessä koossa (A4-kontrastisweep). */
.metodi-link{background:none;border:none;padding:0;cursor:pointer;
  font-family:'Source Sans 3',sans-serif;font-size:inherit;letter-spacing:inherit;
  color:var(--t-accent-text,var(--t-accent));text-decoration:underline;
  text-underline-offset:2px;}
.metodi-link:hover{color:var(--t-text);}
.metodi-modal{--prem-c:var(--t-accent,#2f6fee);text-align:left;
  border-style:solid;}
.metodi-modal .prem-lukko-nimi{text-align:left;}
.metodi-runko{font-size:var(--fs-md,13px);line-height:1.65;color:var(--t-text-muted);
  margin:0 0 1.1rem;}
.metodi-runko p{margin:0 0 .8rem;}
.metodi-runko strong{color:var(--t-text);font-weight:600;}
/* Lukuvaroitus selitteen ylimpana lohkona. Tama teksti oli ennen nakyman
   ylalaidassa keltakolmioisena bannerina (.hillo-banner) — sama sisalto,
   sama merkki, mutta se ei enaa vie ylinta ruudullista joka kaynnilla. */
.metodi-varoitus{display:flex;gap:12px;align-items:flex-start;margin:0 0 1rem;
  background:color-mix(in srgb,var(--risk-mid,#e0a800) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--risk-mid,#e0a800) 30%,transparent);
  border-radius:10px;padding:12px 14px;}
.metodi-varoitus .mv-ikoni{flex:0 0 auto;width:19px;height:19px;color:var(--risk-mid,#e0a800);margin-top:1px;}
.metodi-varoitus .mv-ikoni svg{width:100%;height:100%;display:block;}
.metodi-varoitus .mv-teksti{font-size:12.5px;line-height:1.55;color:var(--t-text-dim);min-width:0;}
.metodi-varoitus .mv-teksti b{color:var(--t-text);font-weight:700;}
/* Sama kolmio napissa: kertoo etta selitteen takana on varoitus. */
.mita-mittaa .mm-varoitus{display:inline-flex;width:15px;height:15px;color:var(--risk-mid,#e0a800);flex:0 0 auto;}
.mita-mittaa .mm-varoitus svg{width:100%;height:100%;display:block;}
.mita-mittaa.varoittaa{border-color:color-mix(in srgb,var(--risk-mid,#e0a800) 38%,var(--t-border));}
/* Vakavuussuodattimen otsake — kolme nappia yksin eivat kertoneet mita
   "matala" tarkoittaa (kayttajan kysymys 29.07.2026). Maaritelmat ovat
   napin vihjeessa ja valinnan jalkeen listan ylla omana rivinaan.
   HUOM: .hillo-sevbarin oma saanto on rivilla ~6371 (margin-left:auto) —
   sita ei toisteta tassa, jotta rivin sijoitus ei muutu vahingossa. */
.lnv-hil .hillo-sevlbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-text-muted);font-weight:700;}
/*! pp-core rev 52e7479ae219d3a8 */

/* ================================================================
   LÄHDERIVI (.pp-lahderivi) — yhtenäinen "Lähde · päivitetty" -rivi
   joka näkymän alareunassa (uskottavuuspaketti T2, 18.07.2026).
   Täysnäkymissä (pp-fullview, flex column) kiinteä alapalkki;
   drawer-paneeleissa sisällön päättävä rivi. app.js:n PP_LAHTEET-
   rekisteri + ppVarmistaLahderivi luovat ja päivittävät rivin
   automaattisesti — älä lisää rivejä käsin HTML:ään.
   ================================================================ */
/* max-width:100% on PAKOLLINEN, ei kosmetiikkaa (korjattu 20.07.2026):
   .pp-fullview on sarakesuuntainen flex, jossa rivin POIKITTAISKOKO kasvaa
   suurimman lapsen mukaan. Pitkä lähdeteksti levitti siis koko täysnäkymän
   (mitattu: lnv-lup 663px > 375px = 288px ylivuoto, lnv-kyt 105px, lnv-akt
   32px, lnv-rah 24px). min-width:0 EI auta tähän — se sallii kutistumisen,
   mutta sarakesuunnassa mikään ei purista, joten leveys jää max-contentiin. */
.pp-lahderivi{flex-shrink:0;display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;
  margin-top:18px;padding:7px clamp(16px,4vw,32px);border-top:1px solid var(--t-border);
  font-size:11.5px;letter-spacing:.04em;color:var(--t-text-muted);line-height:1.4;}
.pp-lahderivi b{color:var(--t-text-dim);font-weight:700;}
.pp-lahderivi a{color:var(--t-accent);text-decoration:none;}
.pp-lahderivi a:hover{text-decoration:underline;}
.pp-lahderivi .pp-lr-ico{flex-shrink:0;display:inline-flex;width:13px;height:13px;color:var(--t-text-dim);}
.pp-lahderivi .pp-lr-ico svg{width:100%;height:100%;}
.pp-lahderivi .pp-lr-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pp-lahderivi .pp-lr-aika{flex-shrink:0;white-space:nowrap;}
.pp-lahderivi .pp-lr-dot{width:3px;height:3px;border-radius:50%;background:var(--t-text-muted);flex-shrink:0;display:inline-block;}
.pp-fullview > .pp-lahderivi{margin-top:0;background:color-mix(in srgb,var(--t-bg-panel) 60%,transparent);}
@media (max-width:560px){
  .pp-lahderivi{font-size:11px;gap:6px;padding:6px 12px;}
  .pp-lahderivi .pp-lr-huom{display:none;} /* mobiilissa kompakti yksirivinen esitys */
  /* Rivittyy mieluummin kahdelle riville kuin ellipsoi lähteen pois näkyvistä.
     Mitattu 20.07.2026: yksirivisenä .pp-lr-txt puristui 48px:iin kun sisältö
     vaati 148–207px (Ikärakenne, Kokemus) — lähdetieto oli lukukelvoton juuri
     siinä komponentissa joka rakennettiin uskottavuutta varten (T2). */
  .pp-lahderivi{flex-wrap:wrap;row-gap:2px;}
  .pp-lahderivi .pp-lr-txt{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere;flex:1 1 auto;}
}

/* ── Kokoa kortti (PDF) — print rajattuna poliitikkokorttiin (pkLataaPdf) ──
   Kortti on drawerin SISÄLLÄ → visibility-resepti + drawer-transformin nollaus
   (transform luo containing blockin ja rikkoisi absolute-asemoinnin). */
@media print {
  body.pp-print-kortti * { visibility: hidden !important; }
  body.pp-print-kortti #poliitikkokorttiNakyma,
  body.pp-print-kortti #poliitikkokorttiNakyma * { visibility: visible !important; }
  body.pp-print-kortti #drawer { transform: none !important; position: static !important;
    width: auto !important; height: auto !important; overflow: visible !important; }
  body.pp-print-kortti #poliitikkokorttiNakyma { position: absolute !important;
    left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important;
    overflow: visible !important; padding: 0 !important; }
  body.pp-print-kortti .pk-tyokalut,
  body.pp-print-kortti #poliitikkokorttiNakyma .ui-close-btn,
  body.pp-print-kortti #poliitikkokorttiNakyma .pp-lahderivi { display: none !important; }
  body.pp-print-kortti { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ── PYÖRÖOVI (lnv-pyo) — sotasuunnitelman linja D ──────────────────────────
   Mobiiliansat: kaikki grid-sarakkeet minmax(0,1fr) ja lapsille min-width:0,
   koska 1fr on oikeasti minmax(auto,1fr) ja pitkä organisaationimi levittäisi
   kontin yli mobiilileveyden ilman dokumenttitason vaakascrollia. */
.lnv-pyo .pyo-tyhja{background:var(--t-bg-panel);border:1px solid var(--t-border);border-radius:14px;
  padding:26px clamp(18px,4vw,30px);margin:8px 0 20px;}
.lnv-pyo .pyo-tyhja-otsikko{font-weight:700;font-size:1.05rem;margin-bottom:.7rem;letter-spacing:.01em;}
.lnv-pyo .pyo-tyhja p{color:var(--t-text-dim);font-size:13.5px;line-height:1.6;margin:0 0 .7rem;}
.lnv-pyo .pyo-tyhja ul{margin:0 0 .9rem;padding-left:1.15rem;color:var(--t-text-dim);
  font-size:13px;line-height:1.65;}
.lnv-pyo .pyo-tyhja li{margin-bottom:.3rem;overflow-wrap:anywhere;}
.lnv-pyo .pyo-tyhja-loppu{font-style:italic;color:var(--t-text-muted);margin-bottom:0 !important;}

.lnv-pyo .pyo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:12px;margin-bottom:20px;}
.lnv-pyo .pyo-stat{min-width:0;background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;}
/* Statlukujen aksenttivari ja display-leikkaus: sama kuvio kuin muiden
   nakymien luvuilla. Aiemmin luku peri saman harmaan kuin leipateksti. */
.lnv-pyo .pyo-stat b{display:block;font-family:'Orbitron','Source Sans 3',sans-serif;font-size:1.7rem;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--t-accent);
  text-shadow:0 0 18px color-mix(in srgb,var(--t-accent) 30%,transparent);}
/* Toinen ja kolmas luku ovat siirtyman kaksi suuntaa — samat varit kuin
   korttien nuolissa, jotta luku ja kortti puhuvat samaa kielta. */
.lnv-pyo .pyo-stat:nth-child(2) b{color:var(--t-accent-alt);
  text-shadow:0 0 18px color-mix(in srgb,var(--t-accent-alt) 30%,transparent);}
.lnv-pyo .pyo-stat span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-text-muted);margin-top:.25rem;overflow-wrap:anywhere;}

/* Saantelyn ajallinen soveltamisraja (PAATOS-016). Neutraali huomautus, ei
   varoitus - siksi sama vaimea savy kuin muissa selitteissa eika korostevaria. */
.lnv-pyo .pyo-saantelynote{background:var(--t-bg-panel);border:1px solid var(--t-border);
  border-left:3px solid var(--t-text-dim);border-radius:10px;padding:12px 16px;margin-bottom:20px;
  font-size:12.5px;line-height:1.5;color:var(--t-text-muted);overflow-wrap:anywhere;}

.lnv-pyo .pyo-lista{display:flex;flex-direction:column;gap:16px;}

/* ── PYOROOVIN ILME (PAATOS-041, kayttajan havainto 28.07.2026) ────────────
   Kayttajan sanoin: "Nyt se on pelkkaa harmaata tekstia. Verrattuna muihin
   osioihin joissa on erilaisia elementteja." Havainto piti paikkansa: koko
   nakyma kaytti vain neljaa muuttujaa — --t-bg-panel, --t-border,
   --t-text-dim, --t-text-muted — eika yhtaakaan aksentti- tai puoluevaria,
   vaikka muut nakymat kayttavat puolueVari():a 78 kohdassa ja --t-accentia
   290 kohdassa. Rekisterissa OLI puoluetieto, sita ei vain kaytetty.

   Rajaus on tahallinen (kayttajan valinta): tassa kaytetaan vain sita mita
   sivustolla jo on — korttirakenne, puoluevari, aksentti, otsikkofontti.
   EI uusia komponentteja: ei aikajanaa, ei karenssipalkkia, ei uutta
   nuolielementtia. Ominaisuusjaadytys on voimassa, ja tama on korjaus. */
.lnv-pyo .pyo-kortti{--c:var(--t-border);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 7%,var(--t-bg-panel)) 0%,var(--t-bg-panel) 60%);
  border:1px solid var(--t-border);border-left:3px solid var(--c);border-radius:14px;
  padding:18px clamp(16px,3vw,22px);}
.lnv-pyo .pyo-kortti-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--t-border);}
/* Nimi samaan display-leikkaukseen kuin muiden nakymien otsikot — se on se
   ero joka teki pyoroovista "pelkkaa tekstia" siella missa muissa on hierarkia. */
/* Fonttiperhe kirjoitetaan auki, EI var(--serif): se muuttuja on maaritelty
   vain #etusivuUusi-scopessa, eika .lnv-pyo peri sita. Mitattu: var(--serif)
   putosi Source Sans 3:een eika muuttanut mitaan. Sama kirjoitustapa kuin
   .lnv .pagehead -saannossa. */
.lnv-pyo .pyo-nimi{font-family:'Orbitron','Source Sans 3',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:.02em;min-width:0;overflow-wrap:anywhere;}
.lnv-pyo .pyo-puolue{font-size:11px;letter-spacing:.06em;font-weight:700;
  color:color-mix(in srgb,var(--c) 78%,var(--t-text));
  border:1px solid color-mix(in srgb,var(--c) 55%,var(--t-border));
  background:color-mix(in srgb,var(--c) 12%,transparent);
  border-radius:999px;padding:.1rem .45rem;vertical-align:2px;}
.lnv-pyo .pyo-tunnus{margin-left:auto;font-size:11px;letter-spacing:.08em;color:var(--t-text-muted);
  font-variant-numeric:tabular-nums;}

.lnv-pyo .pyo-siirtyma{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;align-items:stretch;}
/* Roolit omiksi lohkoikseen: aiemmin lahto ja kohde olivat kahta vierekkaista
   tekstipalstaa ilman rajaa, jolloin lukija ei nahnyt mika kuuluu kumpaan.
   Sama kevyt lohkokuvio kuin muualla sivustolla (.pp-etiikka-puoli). */
.lnv-pyo .pyo-rooli{min-width:0;background:rgba(var(--t-sheen-ink),.035);
  border:1px solid var(--t-border);border-radius:10px;padding:10px 12px;}
.lnv-pyo .pyo-rooli-org{font-weight:700;font-size:13.5px;overflow-wrap:anywhere;color:var(--t-text);}
.lnv-pyo .pyo-rooli-nimike{font-size:12.5px;color:var(--t-text-dim);line-height:1.45;
  margin-top:.15rem;overflow-wrap:anywhere;}
.lnv-pyo .pyo-rooli-aika{font-size:11.5px;color:var(--t-text-muted);margin-top:.35rem;
  padding-top:.35rem;border-top:1px solid var(--t-border);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;}
/* Tuntematon aloitusaika on tekstia eika lukua: tabular-nums ja kirjainvali
   ovat paivamaaria varten, ja ne tekevat lauseesta harvan. Kursiivi erottaa
   sen paivasta ilman etta se nayttaa virheelta. (PAATOS V2-02 A, 30.07.2026) */
.lnv-pyo .pyo-rooli-aika.pyo-aika-tuntematon{font-variant-numeric:normal;
  letter-spacing:normal;font-style:italic;overflow-wrap:anywhere;}
/* Nuoli kertoo suunnan myos varilla, ei pelkalla merkilla. Kaksi suuntaa ovat
   sisallollisesti eri asia: ulos = julkisesta vallasta edunvalvontaan,
   sisaan = edunvalvonnasta valtaan. Vari on sivuston oma aksenttipari, ja
   suunta kerrotaan lisaksi tekstina statlohkossa — vari ei ole ainoa vihje. */
.lnv-pyo .pyo-nuoli{font-size:1.5rem;line-height:1;align-self:center;
  color:var(--t-text-muted);
  filter:drop-shadow(0 0 10px color-mix(in srgb,currentColor 45%,transparent));}
.lnv-pyo .pyo-kortti[data-suunta="ulos"] .pyo-nuoli{color:var(--t-accent-alt);}
.lnv-pyo .pyo-kortti[data-suunta="sisaan"] .pyo-nuoli{color:var(--t-accent);}
/* Siirtymaa ei tapahtunut: oma tila, ei keksitty kohdeorganisaatio.
   Aiemmin tama luki organisaationimena ("Oma yritys (ilmoitettu, ei
   toteutunut)"), jolloin kortti nayttaa toteutuneelta siirtymalta. */
.lnv-pyo .pyo-eitoteutunut{color:var(--t-text-muted);font-style:italic;font-weight:600;}

/* Ilmoitettu vs. toteutunut -kenttapari. Otsikko omalla rivillaan arvon
   ylapuolella - sama kuvio kuin .pyo-kiistetyt / .pyo-lahteet, ja valttaa
   sarakeruudukon min-content-lattian jonka CLAUDE.md dokumentoi. */
.lnv-pyo .pyo-ilmpari{margin-top:12px;display:flex;flex-direction:column;gap:.5rem;
  border-left:3px solid var(--t-border);padding-left:.75rem;}
.lnv-pyo .pyo-ip-rivi{min-width:0;}
.lnv-pyo .pyo-ip-otsikko{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-text-muted);margin-bottom:.15rem;}
.lnv-pyo .pyo-ip-arvo{display:block;font-size:12.5px;line-height:1.55;
  color:var(--t-text-dim);overflow-wrap:anywhere;}
.lnv-pyo .pyo-ip-ei{color:var(--t-text-muted);font-style:italic;}
.lnv-pyo .pyo-ip-kuvaus{display:block;color:var(--t-text-muted);}
.lnv-pyo .pyo-ip-lahde{display:block;font-size:11px;color:var(--t-text-muted);
  margin-top:.15rem;}

.lnv-pyo .pyo-vali{display:inline-block;margin-top:12px;font-size:11.5px;letter-spacing:.04em;
  color:var(--t-text-muted);border:1px solid var(--t-border);border-radius:999px;padding:.2rem .6rem;}
.lnv-pyo .pyo-vali-nolla{color:var(--risk-mid);
  border-color:color-mix(in srgb,var(--risk-mid) 45%,var(--t-border));}

.lnv-pyo .pyo-tiivis{font-size:13px;line-height:1.6;color:var(--t-text-dim);margin:12px 0 0;}

.lnv-pyo .pyo-karenssi{margin-top:12px;font-size:12px;line-height:1.5;border-radius:10px;
  padding:.55rem .75rem;border:1px solid var(--t-border);color:var(--t-text-dim);}
.lnv-pyo .pyo-kar-ok{border-color:color-mix(in srgb,var(--risk-low,#3a8) 40%,var(--t-border));
  background:color-mix(in srgb,var(--risk-low,#3a8) 7%,transparent);}
.lnv-pyo .pyo-kar-ei{background:rgba(var(--t-sheen-ink),.03);}
.lnv-pyo .pyo-kar-avoin{border-color:color-mix(in srgb,var(--risk-mid) 40%,var(--t-border));
  background:color-mix(in srgb,var(--risk-mid) 7%,transparent);}
.lnv-pyo .pyo-karenssi-huom{font-size:11.5px;line-height:1.55;color:var(--t-text-muted);
  margin:.5rem 0 0;}

.lnv-pyo .pyo-kiistetyt{margin-top:12px;font-size:12px;line-height:1.55;color:var(--t-text-dim);
  border-left:3px solid var(--risk-mid);padding-left:.75rem;}
.lnv-pyo .pyo-kiistetyt b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t-text-muted);margin-bottom:.3rem;}
.lnv-pyo .pyo-kiistetyt ul{margin:0;padding-left:1.05rem;}

.lnv-pyo .pyo-lahteet{margin-top:14px;font-size:11.5px;line-height:1.55;}
.lnv-pyo .pyo-lahteet b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-text-muted);margin-bottom:.35rem;}
.lnv-pyo .pyo-lahteet ol{margin:0;padding-left:1.15rem;color:var(--t-text-muted);}
.lnv-pyo .pyo-lahteet li{margin-bottom:.25rem;overflow-wrap:anywhere;}
.lnv-pyo .pyo-lahteet a{color:var(--t-text-dim);}
.lnv-pyo .pyo-primaari{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--t-border);border-radius:999px;padding:.05rem .35rem;margin-left:.3rem;
  white-space:nowrap;}

@media (max-width:560px){
  /* Nuoli kaantyy alaspain ja siirtyma pinoutuu - kolme saraketta ei mahdu
     375 px:iin ilman etta organisaationimet katkeavat. */
  .lnv-pyo .pyo-siirtyma{grid-template-columns:minmax(0,1fr);gap:8px;}
  .lnv-pyo .pyo-nuoli{transform:rotate(90deg);justify-self:start;margin:.1rem 0 .1rem .2rem;}
  .lnv-pyo .pyo-tunnus{margin-left:0;}
  .lnv-pyo .pyo-stat b{font-size:1.35rem;}
}


/* ── Laskurilliset välilehti-/suodatinnapit: teksti ei saa katketa (21.07.2026) ──
   Havaittu tuotannosta mobiilikierroksella: "Valtionavustus + sidos39"
   (sw 271 > cw 204) ja "Media" (sw 120 > cw 71). Aamun kierros samaa
   tuotantoa vasten antoi 0/29, eli leikkautuminen syntyi PÄIVÄN AIKANA kun
   data kasvoi ja laskuri piteni labelissa.

   Juurisyy: .ui-tab-btn on `white-space:nowrap` + `overflow:hidden` ILMAN
   ellipsiä — teksti katkeaa täysin näkymättömästi, ei edes "…" kerro siitä.
   Kiinteä leveys on siis väärä korjaus: sama vika palaisi kun laskuri kasvaa
   taas. Napin on joustettava sisällön mukaan.

   Ratkaisu: kapealla ruudulla teksti saa rivittyä ja min-width-lattia
   poistuu. overflow:hidden säilyy, koska ::before/::after-koristekerrokset
   nojaavat siihen — mutta rivityksen jälkeen ei ole mitään leikattavaa.

   TÄSMENNYS 01.08.2026: overflow-wrap:anywhere → break-word. `anywhere`
   romahduttaa min-content-leveyden ~yhteen merkkiin, jolloin flex-kontti
   puristaa napin kapeammaksi kuin sen pisin sana ja sana katkeaa keskeltä
   ("TOTEUT USINDEK SI" — havaittu 360 px:llä Toteutumisindeksin
   metodivalitsimessa videokaappauksen verifioinnissa). `break-word` rivittää
   samalla tavalla mutta pitää min-contentin sanan levyisenä, joten nappi ei
   kutistu alle pisimmän sanansa eikä ehjä sana enää katkea. */
@media (max-width: 560px) {
  .ui-tab-btn, .ui-filter-btn {
    white-space: normal;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.25;
    height: auto;
  }
  .ui-tab-btn { padding: .5rem .7rem; }
}


/* ── Profiilikortti matalilla ruuduilla (21.07.2026) ──────────────────────────
   Kayttajan havainto: kortti vaatii vierityksen, jotta alimmat painikkeet
   nakyvat. Mitattu ennen korjausta (Adlercreutz = pahin tapaus, kaksirivinen
   nimi + ministeribadge): sisalto tarvitsee 670 px.

     ruutu 600 px -> tilaa 540  -> vajaa 130 px
     ruutu 720 px -> tilaa 648  -> vajaa  22 px
     ruutu 800 px -> tilaa 720  -> MAHTUU JO

   Kortti siis mahtuu jo useimmille ruuduille; vika on kapea ja koskee matalia
   ikkunoita. Siksi EI koko kortin skaalausta pienemmaksi — se kutistaisi
   tekstin myos niilta joilla tilaa on. Tiivistetaan vain kun tila loppuu.

   MITTAUSHUOMIO joka ohjasi korjauksen: kuvan pienentaminen ei auta LAINKAAN
   (670 -> 670), koska headerin korkeuden maaraa tekstisarake .profil-info,
   ei 250 px:n kuva sen vieressa. Nappirivien korkeus on ainoa joka puree:
   3 riviä x 66 px. Tama on juuri se syy miksi kannatti mitata eika arvata.

   VALITSINHUOMIO: napit saavat JS:ssa luokat "profnav-btn pk-kat", ja
   .profnav-btn.pk-kat on tarkempi kuin pelkka .profnav-btn — pelkalla
   luokalla kirjoitettu saanto EI pure vaikka se on tiedostossa myohemmin.
   Siksi tassa kaytetaan #modalContent-etuliitetta. */
@media (max-height: 780px) {
  #modalContent .profnav-btn.pk-kat { padding: 13px 14px; gap: 7px; }
  #modalContent .profnav-grid.pk-kategoriat { gap: 8px; }
  #modalContent .profil-header { gap: 1rem; margin-bottom: 1rem; }
  #modalContent .profil-info { gap: .35rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KOSKETUSKOHTEIDEN VÄHIMMÄISKOKO (23.07.2026)
   ══════════════════════════════════════════════════════════════════════════
   Käyttäjän havainto: "mobiilissa kaikki näyttää hieman kankealta, selaimessa
   toimii hyvin". Mitattuna tuotannosta 390 px:llä, 29 näkymää: 3107 osumaa
   7191 klikattavasta oli alle 44×44 px, ja osa myös alle 24×24 px.

   MIKSI 24 px EIKÄ 44 px:
   WCAG 2.2 AA (2.5.8 Target Size Minimum) vaatii 24×24. 44×44 on Applen ja
   Materialin MUKAVUUSsuositus (2.5.5, AAA-taso). Alatunnisteen ja lähderivin
   linkit ovat pisteillä eroteltuja tekstilinkkejä samalla rivillä — 44 px:n
   osuma-alueet MENISIVÄT PÄÄLLEKKÄIN naapurilinkin kanssa, mikä tuottaa
   ohilyöntejä eli on huonompi kuin pieni kohde. 24 px on tässä sekä
   vaatimustaso että suurin turvallinen koko.

   MIKSI ::after EIKÄ padding:
   Osuma-aluetta kasvatetaan LÄPINÄKYVÄLLÄ pseudo-elementillä, jolloin
   ulkoasu ei muutu lainkaan — nolla layout-siirtymää 29 näkymässä. Padding
   olisi siirtänyt sisältöä ja vaatinut regressiokierroksen jokaiseen.
   Laajennus on VAIN pystysuuntainen; vaakasuunnassa pysytään elementin
   omissa rajoissa, joten vierekkäiset linkit eivät voi mennä päällekkäin.

   Rajaus `(hover: none), (max-width: 640px)` on sama kuvio kuin .ek-actions
   -kosketusfallbackissa (rivi ~1113), jotta leveyspohjainen mobiiliautomaatio
   voi verifioida tämän.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (max-width: 640px) {

  /* Alatunnisteen linkkirivi (Metodologia · Lähteet · Tietosuoja …) 15 px,
     lähderivin "Menetelmä"-linkki 15 px, pörssin metriikkarivi 17 px. */
  #ppCopyrightBadge a,
  .pp-lahderivi a,
  .lnv-porssi .porssi-metric {
    position: relative;
  }
  #ppCopyrightBadge a::after,
  .pp-lahderivi a::after,
  .lnv-porssi .porssi-metric::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    /* 26 eikä 24: mitattuna tasan 24 px:n alue tuotti 23 px:n osuman
       kolmella linkillä kahdeksasta, koska rivilaatikon keskipiste osuu
       puolikkaalle pikselille ja pyöristyy alaspäin. 2 px pelivaraa. */
    height: 26px;
    transform: translateY(-50%);
    /* Ei omaa taustaa eikä reunusta — pelkkä osuma-alue. */
  }
  /* Alatunnisteen rivit kietoutuvat kapealla näytöllä. Rivivälin on oltava
     SUUREMPI kuin osuma-alue, muuten päällekkäisten rivien osumat menevät
     toistensa päälle ja linkki vie väärään paikkaan. 30 > 26. */
  #ppCopyrightBadge { line-height: 30px; }

  /* Chipit ja pillerit jäivät 23 px:iin eli yhden pikselin vaatimuksesta.
     Näissä padding on turvallinen: ne ovat itsenäisiä laatikoita omalla
     taustallaan, joten kasvu ei siirrä muuta sisältöä kuin rivitystä. */
  .lnv-kyt .ed-chip,
  .lnv-mep .mep-ep-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }

  /* Sulkunapissa on tilaa mukavuuskokoon asti — se on itsenäinen nappi eikä
     naapureita ole, ja sen ohi lyöminen sulkee väärän asian tai ei mitään. */
  .ui-close-btn { min-width: 44px; min-height: 44px; }
}

/* ── Premium-nappi kapeimmilla näytöillä (23.07.2026) ──────────────────────
   Fonttilattian nosto 10 → 11 px levensi tämän napin 113 → 120 px, ja se
   työnsi yläpalkin 6 px yli 375 px:n näytöllä: dokumentin scrollWidth 381.
   Vika näkyi 30 näkymässä 32:sta, koska yläpalkki on joka näkymässä.

   MIKSI EN PALAUTTANUT FONTTIA 10 px:iin: se olisi kumonnut juuri sen
   korjauksen jonka takia nosto tehtiin. Kavennetaan sen sijaan vaakapadding
   .85rem → .55rem, mikä vapauttaa ~9,6 px eli enemmän kuin ylivuoto vaatii.
   Rajaus max-width:400px, koska leveämmillä näytöillä tilaa on eikä napin
   ulkoasua ole syytä muuttaa.

   MIKSI TÄMÄ JÄI MINULTA HUOMAAMATTA: mittasin fonttinoston
   regressiokierrokset 390 px:llä, mutta projektin mobiilistandardi on
   375 px (mobiili_kohdennettu.py VIEWPORT). 381 px:n sisältö mahtuu
   390:een muttei 375:een — koko vika oli mittausleveyden takana. */
@media (max-width: 400px) {
  .pp-topbar-prem { padding: .35rem .55rem; letter-spacing: .16em; }
}

/* ================================================================
   T3 VAIHE 4 (25.07.2026) — ULKOLINKKI ALKUPERÄISLÄHTEESEEN
   ================================================================
   Linkki näkyy siellä missä luku on peräisin ulkopuolisesta
   rekisteristä: sidonnaisuusilmoituksessa (henkilökohtainen sivu
   eduskunnan rekisterissä) ja vaalirahoituksessa (VTV:n hakusivu,
   koska oma aineisto on bulkkidataa eikä ilmoituskohtaista osoitetta
   ole olemassa).

   Kosketuskoko: min-height 24px (WCAG 2.2 AA, ks. muisti
   mobiilituntuma-vahtien-katveessa — 44 px ei ole tämän
   kriteerin vaatimus, 24 px on). Nuoli ↗ on pysyvä eikä
   hover-only: T3:n oma hyväksymiskriteeri kieltää affordanssin
   joka näkyy vain osoittimella. */
.t3-lahdelinkkirivi{margin-top:.6rem;padding-top:.5rem;
  border-top:1px solid var(--t-border);}
.t3-ulkolinkki{display:inline-flex;align-items:center;gap:.35rem;
  min-height:24px;padding:.15rem 0;
  color:var(--t-accent);text-decoration:none;
  font-size:var(--fs-sm);letter-spacing:.02em;
  border-bottom:1px solid transparent;}
.t3-ulkolinkki:hover{border-bottom-color:currentColor;}
.t3-ulkolinkki:focus-visible{outline:2px solid var(--t-accent);
  outline-offset:2px;border-radius:2px;}

/* "Mitä tämä mittaa" -nappi (29.07.2026, käyttäjän pyyntö). Sijoitetaan ajossa
   jokaisen näkymän otsikkoriville sulkunapin viereen. Neutraali tyyli
   tarkoituksella: se on apuväline, ei toimintokehotus, eikä saa kilpailla
   näkymän oman sisällön kanssa. */
/* KANONINEN OTSIKKORIVI — perussaanto, ei nakymakohtainen kopio.
   display:flex oli kirjoitettu 15 kertaan nakymaskoopeittain (.lnv-lb,
   .lnv-rah, .lnv-akt, ...) ja YKSI puuttui: .lnv-mrk (Uusimmat merkinnat),
   jossa rivi jai display:blockiksi -> "Mitä täällä näkyy" -nappi tippui
   otsikon ALLE vasempaan reunaan, kun se muualla on oikeassa ylakulmassa
   (kayttajan havainto 29.07.2026, mitattu: napin oikea reuna 1457 px vs.
   rivin 2513 px). Perussaanto tekee samasta virheesta mahdottoman uusissa
   nakymissa; skoopatut kopiot saavat jaada, ne sanovat saman asian.
   Nappi itse hakeutuu oikeaan reunaan margin-left:autolla (alla). */
.pagehead-row{display:flex;align-items:center;gap:18px;}
.mita-mittaa{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex-shrink:0;
  background:var(--t-bg-card);border:1px solid var(--t-border);border-radius:999px;
  color:var(--t-text-dim);font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:600;
  padding:8px 14px;min-height:40px;cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.mita-mittaa span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;font-weight:800;line-height:1;}
.mita-mittaa:hover{color:var(--t-text);border-color:color-mix(in srgb,var(--t-accent) 45%,var(--t-border));}
.mita-mittaa:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px;}
/* SULKUNAPPI POIS OSIOIDEN OTSIKKORIVILTA (kayttajan paatos 29.07.2026).
   Perustelu on mitattu, ei makuasia: sovelluksessa on tayssi historiakerros
   (_navPush kaikissa 24 nakymassa + popstate-kuuntelija), joten laitteen oma
   Edellinen-painike sulkee tasan yhden tason ja _ppSyvyys-lattia estaa
   putoamisen pois sivustolta. Todennettu tuotannossa neljalla nakymalla:
   nakyma sulkeutui ja osoite pysyi /dashboardissa. Puhelimessa kukaan ei etsi
   X:aa - se on tyopoytakonventio, ja tyopoydalla ESC tekee saman.
   PIILOTUS EIKA POISTO tarkoituksella: nappi on 12 nakymassa kasin kirjoitettua
   markupia ja kolmessa ajossa rakennettua, joten yhden saannon poisto palauttaa
   kaikki kerralla jos paatos joskus kaantyy. Sulkufunktiot jaavat ennalleen. */
.pp-fullview .pagehead-row .ui-close-btn,
.pp-fullview > .ui-close-btn{display:none;}

/* OTSIKKORIVIN OIKEA KULMA — kaksi nappia, YKSI joustoauto.
   Sulkunapilla on margin-left:auto INLINE-tyylissa (dashboard.html), joten
   tavallinen saanto ei sita voittanut: molemmat napit saivat auton ja jakoivat
   vapaan tilan keskenaan. Oire nakyi Rahoituksessa juuri niin kuin kayttaja
   sen kuvasi 29.07.2026 — selitenappi keskella ylalaitaa ja X irrallaan
   oikeassa reunassa, kun taas Lobbauksessa (jossa ei ole X:aa) nappi oli
   oikein. !important on tassa perusteltu: se kumoaa inline-tyylin, ja saanto
   patee vain kun selitenappi on juuri ennen sulkunappia. */
.pagehead-row .mita-mittaa + .ui-close-btn,
.pp-banneri .mita-mittaa + .ui-close-btn{margin-left:10px !important;}
/* MOBIILISSA NAPPI ON PELKKA KYSYMYSMERKKI. Mitattu 29.07.2026 (Auditbot bugAI):
   tekstillinen nappi vei 375 px:n otsikkorivilta 106 px, jolloin otsikkolohko
   puristui 99 px:iin ja eyebrow vuoti +77 px yli. Sama vika osui NELJAAN
   nakymaan kerralla (Kytkokset, Rahoitus, Aktiivisuus, Lobbaus), koska
   pagehead-row on jaettu komponentti - siksi korjaus on taalla eika yhdessa
   nakymassa. Merkitys sailyy ruudunlukijalle aria-labelissa. */
@media (max-width:560px){
  .mita-mittaa{font-size:13px;padding:0;width:44px;min-width:44px;min-height:44px;
    justify-content:center;gap:0;}
  .mita-mittaa span:not([aria-hidden]){display:none;}
  .mita-mittaa span[aria-hidden]{width:19px;height:19px;font-size:12px;}
}
/* Otsikkoteksti saa rivittya, ei vuotaa: pagehead-rowin lapsi on flex-item,
   jonka min-width on oletuksena auto = se ei suostu kutistumaan sisaltoaan
   pienemmaksi. Sama min-content-lattian ansa kuin CLAUDE.md:n grid-kohdassa. */
.pagehead-row > div{min-width:0;}
.pagehead-row .eyebrow{white-space:normal;overflow-wrap:anywhere;}

/* ── Mediapulssin siistiminen + menetelmamodaalin pinojarjestys (29.07.2026) ── */

/* MODAALI JAI DRAWERIN ALLE. .prem-modal-overlay on z-index 600, mutta #drawer
   on 5001 ja taysnakymat 5002 — eli aina kun menetelmaseloste avattiin naytosta
   joka on avattu drawerin kautta (eli normaali kayttajapolku), modaali
   renderoitui SISALLON TAAKSE. Kayttajalle se nayttaa silta ettei nappi tee
   mitaan. Vika oli olemassa jo ennen "Mita tama mittaa" -nappia: samat
   "Miten tama on laskettu?" -napit Lupausindeksissa ja Johdonmukaisuudessa
   olivat rikki samalla tavalla. Mitattu elementsFromPointilla, ei silmalla —
   DOM-tarkistus olisi sanonut etta modaali on auki. */
#metodiModaali { z-index: 5600; }

/* Lahderyhmat-nappi oli tyopoydalla koko sisaltoleveyden mittainen (width:100%),
   vaikka sen sisalto on yksi rivi tekstia. Mobiilissa taysleveys on oikein. */
@media (min-width: 561px) {
  .sig-kanava { width: auto; min-width: 300px; max-width: 460px; }
}

/* Teemarajaus on nyt pudotusvalikko (oli 9 chippia kahdella rivilla). Sama
   komponentti kuin puolue- ja edustajavalitsin sen vieressa. */
.sig-teema-select {
  background: var(--t-bg-card); border: 1px solid var(--t-border); border-radius: 11px;
  color: var(--t-text-dim); font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px; font-weight: 600; padding: 9px 13px; min-height: 40px;
  max-width: 100%; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sig-teema-select:hover { border-color: color-mix(in srgb, var(--sig) 35%, var(--t-border)); }
.sig-teema-select:focus {
  outline: none; border-color: color-mix(in srgb, var(--sig) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 18%, transparent);
}
.sig-teema-select option:disabled { color: var(--t-text-muted); }

/* Seuratuin edustaja -kortti on nappi: se avaa saman edustajan uutiskortin.
   Perii .sig-tstatin ulkoasun, joten kortti nayttaa samalta kuin naapurinsa —
   vain vihje ja osoitin kertovat etta se on klikattava. */
.sig-tstat-nappi {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: block; width: 100%;
}
.sig-tstat-nappi:hover { border-color: color-mix(in srgb, var(--sig) 50%, var(--t-border)); }
.sig-tstat-nappi:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.sig-tstat-kerrat {
  font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 700; color: var(--sig);
}
.sig-tstat-vihje {
  display: block; margin-top: 6px;
  font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--t-text-muted);
}
.sig-tstat-nappi:hover .sig-tstat-vihje { color: var(--sig); }
@media (max-width: 560px) { .sig-teema-select { width: 100%; min-height: 44px; font-size: 13px; } }