/* Shared styles from source files */

/* --- Profile Page (profile.html) — redesigned (2026), see --st-* tokens --- */
/* Clears the fixed Stormi Assistant bar, which now occupies the space the
   wordmark used to. Same value on Etsi (#search-view .content) so both pages
   start their content at an identical height. */
#profile-view .content { padding-top: 4.6rem; }

/* Stormi Assistant entry point — the app's top mark, on every page. */
.stormi-assistant-bar {
    /* Fixed at the top so it is in the same place on every page — the spot the
       "stormi" wordmark used to hold on Etusivu and Etsi, which is why those
       two are gone. The views that have their own headers (Projektit, Viestit)
       already start below this; Profiili's hero runs under it, which reads as
       a control over the photo rather than a collision. */
    position: fixed;
    top: calc(1.25rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 1.1rem;
    background: rgba(20, 21, 26, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    width: fit-content;
    /* Yhdelle riville: left 50 % rajasi leveyden puoleen ruudusta, ja puhelimessa
       teksti meni kahdelle riville (testaaja 12.10.2026). */
    white-space: nowrap;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Puhelimessa pilleri väistyy alas vieritettäessä ja palaa ylös vieritettäessä:
   se peitti otsikoita ja kenttiä (stormiAssistantVierityksella, js/spa.js). */
@media (max-width: 1023px) {
    .stormi-assistant-bar.stormi-assistant-bar-piilossa {
        transform: translate(-50%, calc(-100% - 2rem));
        opacity: 0;
        pointer-events: none;
    }
}
.stormi-assistant-bar:hover { border-color: rgba(255,255,255,0.4); }
.stormi-assistant-chevron { width: 14px; height: 14px; }
/* Chat hides the footer for its own composer; the bar goes with it. */
body.chat-open .stormi-assistant-bar { display: none !important; }
/* Lomakesivuilla (Luo/Muokkaa kortti, projekti, lokaatio, omat tiedot,
   lisäkysymykset) oma otsikkorivi on samassa kohdassa — palkki peittäisi sen. */
body:has(.spa-view.ok-tumma.active) .stormi-assistant-bar { display: none !important; }
/* Profiili vieritettynä heron ohi: tausta palkin alle (svYlareunaHaivytys). */
body.sv-vieritetty::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(4.6rem + env(safe-area-inset-top));
    background: linear-gradient(var(--st-bg, #05070d) 62%, transparent);
    z-index: 9999;
    pointer-events: none;
}

.profile-container {
    position: relative;
    overflow: hidden;
    width: 88%;
    margin: 0 auto 1.8rem;
    border-radius: var(--st-radius-lg);
    aspect-ratio: 1 / 1;
    background: var(--st-surface);
}
#carousel2-wrap, #carousel3-wrap, #carousel4-wrap, #carousel5-wrap {
    margin-top: 2.4rem;
}

/* --- Karuselliryhmä: centered heading + priority-order picker, grouping
   several .menu carousels together on the home feed. --- */
.ryhma-slot {
    /* Pure DOM anchor point for applyRyhmaOrder() — never rendered. */
    display: none;
}
.ryhma {
    margin-top: 2.4rem;
}
.ryhma-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0 1rem;
}
.ryhma-title {
    color: var(--st-text);
    font-family: var(--st-font-display);
    font-size: 1rem;
    letter-spacing: -0.02rem;
    text-align: center;
}
/* Väliotsikko — a plain text divider inside a ryhma (e.g. "Avoimia hakuja"
   inside "Uutta"), lighter than .ryhma-title since it's grouping a few
   rows within an existing group, not starting a whole new karuselliryhmä. */
.ryhma-subheader {
    color: var(--st-text);
    font-family: var(--st-font-display);
    font-size: 0.92rem;
    letter-spacing: -0.01rem;
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
    opacity: 0.75;
}
.ryhma-order-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--st-text-muted);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ryhma-order-menu {
    position: absolute;
    top: 100%;
    right: calc(50% - 4.2rem);
    margin-top: 0.4rem;
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--st-surface-2);
    border-radius: var(--st-radius-lg);
    padding: 0.35rem;
    box-shadow: var(--st-varjo-nostettu);
    z-index: 10;
}
.ryhma-order-menu.open {
    display: flex;
}
.ryhma-order-item {
    min-width: 2rem;
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: var(--st-radius-pill);
    background: transparent;
    color: var(--st-text);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
}
.ryhma-order-item:hover {
    background: rgba(255,255,255,0.08);
}
.ryhma-order-item.active {
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
}
.topbar-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    position: relative;
    display: block;
}
.carousel-scrim {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.carousel-caption {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 2.1rem;
    color: #fff;
    font-family: var(--st-font-display);
    font-size: 1.25rem;
    letter-spacing: -0.03rem;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    pointer-events: none;
}
.carousel-caption-top {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    top: 1.1rem;
    text-align: center;
    color: rgba(255,255,255,0.92);
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    pointer-events: none;
    z-index: 6;
}
.carousel-dots {
    position: absolute;
    left: 0; right: 0; bottom: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    z-index: 6;
}
.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}
.carousel-dot.active {
    background: #fff;
    width: 16px;
    border-radius: 3px;
}
#profile-view .nav-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    background: transparent;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}
#profile-view .left-btn { left: 0; }
#profile-view .right-btn { right: 0; }

/* --- Search Page --- */
#search-view.active {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
}
#search-view .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Sisältö alkaa ylhäältä. Pystykeskitys (28.9.2026) täytti alle jääneen
       tyhjän, mutta siirsi hakupalkin eri kohtaan eri näkymissä: etusivulla
       se valui ruutujen päälle, valitussa kategoriassa se oli ylhäällä.
       Hakupalkki on sivun kiintopiste eikä saa liikkua (käyttäjä
       30.9.2026). Alle jäävä tyhjä täytetään isommilla kuvaruuduilla
       (11.10.2026; esittelyteksti poistettiin), ei siirtämällä sisältöä. */
    justify-content: flex-start;
    padding-top: 4.6rem;
    padding-bottom: var(--st-alapalkki-tila);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    width: 100%;
}
.view-logo {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.6rem;
    letter-spacing: -0.09rem;
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}
/* Same top offset and gap below as Etusivu's .home-logo, so the wordmark
   sits at an identical position/size on both views. */
#search-view .view-logo { margin-bottom: 1.3rem; }
.search-bar-wrap {
    width: 88%;
    margin-bottom: 0.85rem;
}
.search-bar-row {
    display: flex;
    align-items: center;
    /* Valkoinen hakupalkki tummassa sovelluksessa, joten se kumoaa juuren
       color-scheme: darkin — muuten kirjoituskohdistin, tekstin valinta ja
       selaimen automaattitäyttö piirtyisivät tummina valkoisella. */
    color-scheme: light;
    background: #fff;
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    gap: 0.5rem;
    /* Sijaintinappi näkyy vain valitussa kategoriassa ja kasvatti palkin
       korkeutta 38 → 46 px, jolloin sen alla oleva sisältö nytkähti aina
       kategoriaa vaihdettaessa. Korkeus varataan valmiiksi, niin palkki on
       joka näkymässä samanlainen. Luku on napin oma korkeus eikä palkin:
       tämä elementti on content-box, joten pehmuste tulee sen päälle. */
    min-height: 1.8rem;
}
.search-bar-input {
    flex: 1;
    border: none;
    outline: none;
    /* Leipätekstin fontti: kenttä peri muuten Arial Blackin, jota käytetään
       vain sivun yläotsikossa (käyttäjä 3.10.2026: "ei tuollainen paksu"). */
    font-family: var(--st-font-body);
    font-weight: 400;
    letter-spacing: normal;
    font-size: 1rem;
    background: transparent;
    color: #222;
}
.search-bar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: #14161c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
}
/* Opens Rajaa hakua with no category preselected — Maa/Lääni/Kaupunki-only
   browse across the active tab's whole dataset (see openSearchModal(''),
   performSearch's empty-category branches). */
.search-geo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #14161c;
    border: none;
    cursor: pointer;
}
.search-geo-btn svg { width: 15px; height: 15px; color: #fff; }
/* Categories as full-width bars, one per row, behind the chevron under the
   search field. Replaced three-across pills with a second row hidden behind
   a tap: too small to hit, and most categories were out of sight. */
/* Etsin kategoriat neliöruudukkona, sama muoto kuin projektin
   kategoriavalinnassa (.ok-kategoriat). Aiemmin nämä olivat kymmenen koko
   leveyden palkkia, jotka täyttivät ruudun kokonaan — kahdessa sarakkeessa
   sama sisältö vie puolet korkeudesta ja sivulle jää tilaa muullekin.

   Tyhjä kategoria näkyy himmeänä eikä avaudu: piilottaminen veisi
   käyttäjältä tiedon siitä, mitä Stormissa ylipäätään on, mutta tyhjään
   listaan ei myöskään kannata päästää. Ruudut järjestetään niin, että
   täydet tulevat ensin (etsiLataaMaarat) — ruutu nousee ylös täsmälleen
   kerran, kun kategoria saa ensimmäisen sisältönsä. */
.etsi-kategoriat {
    width: 88%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Hitusen väljemmät välit kuin 0.55rem: ruudut lukivat yhtenä laatikkona
       kun ne olivat lähes kiinni toisissaan. Enempää ei voi antaa ilman että
       kahdesta sarakkeesta tulee kapeita. */
    gap: 0.7rem;
    /* Ilmaa hakupalkin alle: ruudukko alkoi kiinni kentästä, jolloin haku ja
       kategoriat näyttivät yhdeltä möykyltä. */
    margin-top: 0.9rem;
    margin-bottom: 1rem;
}
.search-cat-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 4.9rem;
    box-sizing: border-box;
    padding: 0.8rem 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    font: 400 0.92rem/1.2 var(--st-font-body);
    text-align: left;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s ease;
}
/* Ikoni ylös ja nimi alas, sama kuin projektin kategoriaruuduissa. */
.search-cat-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}
.search-cat-nimi { overflow-wrap: anywhere; }
/* Luku pienenä merkkinä oikeaan yläkulmaan (vrt. .ok-kategoria-merkki): se
   kertoo miksi ruudut ovat tässä järjestyksessä ja auttaa valitsemaan, mutta
   ruudun pääasia on ikoni ja nimi — iso numero mainostaisi nuoressa
   palvelussa lähinnä sitä, miten vähän jotain vielä on. */
.search-cat-maara {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    font: 400 0.8rem/1 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
}
.search-cat-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.search-cat-btn:active { transform: scale(0.97); }
.search-cat-btn.active {
    background: #fff;
    border-color: #fff;
    color: #14161c;
    font-weight: 500;
}
.search-cat-btn.active .search-cat-maara { color: rgba(20, 22, 28, 0.55); }
/* Tyhjä kategoria: himmeä, ja napautus kertoo miksi (QA 5.10.2026). */
/* Tietokoneen "Tulossa pian" -merkki (css/tyopoyta.css). */
.search-cat-tulossa { display: none; }
.search-cat-btn.search-cat-tyhja {
    opacity: 0.4;
    cursor: default;
}

/* Ruutujen kuvat (img/etsi/pieni = 900 px versiot ruutuihin; isot
   tietokoneen kuvitukselle). Puhelimella ja ≥768 samat kuvat — ≥768:n
   ruutuasettelu on css/tyopoyta.css:ssä. */
#search-view .search-cat-btn[data-filter="users"]       { --etsi-kuva: url("../img/etsi/pieni/tekijat.jpg"); }
#search-view .search-cat-btn[data-filter="groups"]      { --etsi-kuva: url("../img/etsi/pieni/ryhmat.jpg"); }
#search-view .search-cat-btn[data-filter="companies"]   { --etsi-kuva: url("../img/etsi/pieni/yritykset.jpg"); }
#search-view .search-cat-btn[data-filter="services"]    { --etsi-kuva: url("../img/etsi/pieni/projektit.jpg"); }
#search-view .search-cat-btn[data-filter="locations"]   { --etsi-kuva: url("../img/landing/loc_majakka.jpg"); }
#search-view .search-cat-btn[data-filter="kalusto"]     { --etsi-kuva: url("../img/landing/bg_lens.jpg"); }
#search-view .search-cat-btn[data-filter="cities"]      { --etsi-kuva: url("../img/etsi/pieni/kaupungit.jpg"); }
#search-view .search-cat-btn[data-filter="schools"]     { --etsi-kuva: url("../img/landing/role_editoija.jpg"); }
#search-view .search-cat-btn[data-filter="jarjestot"]   { --etsi-kuva: url("../img/etsi/pieni/jarjestot.jpg"); }
#search-view .search-cat-btn[data-filter="avoimethaut"] { --etsi-kuva: url("../img/landing/role_juontaja.jpg"); }

/* Puhelimella kuva ruudun sisällä himmennettynä ja ruudut isompina
   (käyttäjä 11.10.2026): sivun alaosan esittelyteksti poistettiin, ja
   tila annettiin ruuduille. Kuva on tunnelmaa, ei sisältöä — nimi ja
   ikoni pysyvät pääasiana alhaalta tummenevan liukuvärin päällä. */
@media (max-width: 767px) {
    #search-view .etsi-kategoriat { gap: 0.75rem; margin-top: 1.1rem; }
    #search-view .search-cat-btn {
        isolation: isolate;
        overflow: hidden;
        min-height: 7.6rem;
        padding: 0.9rem 0.95rem;
        background: #0b0e16;
        border-color: rgba(255, 255, 255, 0.14);
        color: #fff;
    }
    #search-view .search-cat-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background: var(--etsi-kuva, none) center / cover no-repeat;
        opacity: 0.42;
        filter: saturate(0.85);
        transition: opacity 0.25s ease;
    }
    #search-view .search-cat-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(to top, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.35) 60%, rgba(5, 7, 13, 0.2) 100%);
    }
    #search-view .search-cat-nimi { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
    #search-view .search-cat-btn svg { opacity: 1; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
    #search-view .search-cat-maara { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
    #search-view .search-cat-btn:hover { background: #0b0e16; border-color: rgba(255, 255, 255, 0.3); }
    /* Valittu (ruudukko avattu uudelleen palkista): kuva kirkkaampana ja
       valkoinen reunus — valkoinen tausta peittäisi kuvan. */
    #search-view .search-cat-btn.active { background: #0b0e16; color: #fff; border: 1px solid #fff; box-shadow: inset 0 0 0 1px #fff; }
    #search-view .search-cat-btn.active::before { opacity: 0.6; }
    #search-view .search-cat-btn.active .search-cat-maara { color: rgba(255, 255, 255, 0.85); }
}

/* The chosen category, standing in for the list. Tapping the bar reopens
   the list to switch; × goes back to searching every category. */
/* Valittu kategoria. Oli valkoinen palkki hakukentän alla ja vei saman tilan
   kuin hakukenttä itse — kahdesta palkista päällekkäin toinen oli pelkkä
   toisto siitä, mitä käyttäjä juuri painoi (käyttäjä 29.9.2026). Nyt Stormin
   oma pieni yläotsikko: sama kohtelu kuin Profiilin osio-otsikoilla. Ruksi
   jää, koska se on ainoa tapa palata kategorialistaan. */
.etsi-valittu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 88%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0 0.1rem;
    background: none;
    color: #8a8f9a;
    cursor: pointer;
    font: 700 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.etsi-valittu-nimi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etsi-valittu-pois {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8a8f9a;
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
}
.etsi-valittu-pois:hover { background: rgba(255,255,255,0.1); color: #fff; }


/* Etsi across every category: kinds of thing first (Tanssija, Tanssiryhmä,
   Tanssistudio), each a row that opens that kind within its category, then
   the name matches below in the ordinary result cards. */
.search-inline-results.etsi-yleishaku { width: 88%; }
.etsi-osumat { display: flex; flex-direction: column; gap: 0.4rem; }
.etsi-osuma {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
    border: none;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    color: #fff;
    cursor: pointer;
    text-align: left;
    font-family: var(--st-font-body);
    letter-spacing: normal;
}
.etsi-osuma:hover { background: rgba(255,255,255,0.11); }
.etsi-osuma-kuva {
    width: 2.7rem;
    height: 2.7rem;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b3350, #161b2c);
    background-size: cover;
    background-position: center;
}
.etsi-osuma-nimi { flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 600; }
.etsi-osuma-maara { flex-shrink: 0; font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.etsi-osuma-nuoli {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: rgba(255,255,255,0.4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-all-categories-link {
    background: #fff;
    border: none;
    color: #14161c;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    letter-spacing: 0;
    cursor: pointer;
    padding: 0.55rem 1.2rem;
    border-radius: 20px;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
    flex-shrink: 0;
}
.search-all-categories-link:hover { background: #f2f2f5; }

.cities-country-browse-btn {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}
.cities-country-browse-btn:hover { background: #f2f2f5; }
.cities-country-browse-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #6b7280;
    stroke-width: 1.6;
}
.cities-country-input {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    background: #fff;
    color: #14161c;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    letter-spacing: 0;
    border: none;
    outline: none;
    padding: 0 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.8rem;
    box-sizing: border-box;
}

.tag-tiles-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 6rem;
    flex: 1;
    overflow-y: auto;
    /* Kun lista on tyhjä, se ei saa kasvaa: flex: 1 söi kaiken vapaan tilan,
       jolloin ruudukko jäi kiinni ylälaitaan eikä sivun keskitys tehnyt
       mitään (käyttäjä 28.9.2026). Tyhjänä myös pehmuste pois — muuten se
       jättäisi 6rem:n kolon ruudukon alle. */
    min-height: 0;
}
.tag-tile {
    width: 88%;
    height: calc(100vh / 7);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    /* Paikkaväri kuvan latautuessa: tasainen #1a1a2e näytti mustalta
       ruudulta (QA 5.10.2026). Kuva peittää tämän latauduttuaan. */
    background: linear-gradient(135deg, #1d2232, #2a3042);
}
.tag-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tag-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(225deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.85) 100%);
}
.tag-tile-label {
    position: absolute;
    bottom: 0.65rem;
    left: 0.85rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    letter-spacing: 0;
}

/* Inline name-search results shown beneath the category tiles in the Etsi view */
.search-inline-results {
    width: 80%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.4rem;
    /* .content applies letter-spacing:-0.18rem for the Arial Black display font;
       reset it here (inherits to the cards) so the result text isn't cramped. */
    letter-spacing: normal;
}
.search-inline-results-header {
    color: #cfd6e6;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    padding-left: 0.1rem;
}
.search-inline-results-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.search-inline-results-body .result-card {
    width: 100%;
}
/* Näkymän vaihto hakusivun omien tulosten otsikkorivillä. Otsikko on
   tekstiriv, joten napille tehdään tilaa rivittämällä se oikeaan laitaan. */
.search-inline-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tulos-nakyma-inline { flex-shrink: 0; }

.search-inline-empty {
    color: #aaa;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    padding: 0.4rem 0.1rem;
}

.search-inline-kaikista {
    margin-top: 0.6rem;
    min-height: 32px;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #fff;
    font: 600 0.82rem/1.2 var(--st-font-body);
    letter-spacing: 0;
    cursor: pointer;
}

/* Filters modal */
.sfm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8.5rem;
}
.sfm-panel {
    /* Tarkoituksella vaalea arkki tummassa sovelluksessa, joten se kumoaa
       juuren color-scheme: darkin: muuten Lääni-valitsimen pudotuslista ja
       liukusäätimien osat piirtyisivät tummina valkoisella paneelilla. */
    color-scheme: light;
    background: #fff;
    border-radius: 20px;
    width: 88%;
    max-width: 420px;
    padding: 1.4rem 1.3rem 1.6rem;
    position: relative;
    box-shadow: var(--st-varjo-kelluva);
    max-height: 80vh;
    overflow-y: auto;
}
.sfm-close {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1rem;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0.15rem 0.35rem;
}
.sfm-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    font-weight: 700;
    font-family: var(--st-font-body);
    text-align: center;
    margin-bottom: 1.4rem;
}
.sfm-group {
    margin-bottom: 1.1rem;
}
.sfm-label {
    font-size: 0.8rem;
    color: #14161c;
    font-weight: 400;
    margin-bottom: 0.45rem;
    font-family: var(--st-font-body);
}
.sfm-toggles {
    display: flex;
    gap: 0.5rem;
}
.sfm-toggle {
    flex: 1;
    padding: 0.5rem 0;
    border-radius: 10px;
    border: 1px solid #d8dade;
    background: #fff;
    color: #14161c;
    font-size: 0.82rem;
    font-weight: 300;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.sfm-toggle.active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}
.sfm-select {
    width: 100%;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 300;
    font-family: var(--st-font-body);
    color: #14161c;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.sfm-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
    cursor: pointer;
}
.sfm-toggle-row-label {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.35;
    color: #14161c;
    font-family: var(--st-font-body);
}
.sfm-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.3rem;
    background: #fff;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
    box-shadow: var(--st-varjo-nostettu);
    max-height: 10rem;
    overflow-y: auto;
    z-index: 5100;
}
.sfm-suggestion {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    letter-spacing: normal;
    color: #14161c;
    cursor: pointer;
}
.sfm-suggestion:hover { background: #f2f2f5; }
.sfm-search-btn {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.85rem 0;
    background: #14161c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--st-font-body);
    letter-spacing: 0;
}
.sfm-text {
    width: 100%;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 300;
    font-family: var(--st-font-body);
    color: #14161c;
    outline: none;
    box-sizing: border-box;
}

/* Notification dot on a footer nav icon (Projektit/Viestit/Profiili) — sized
   and positioned relative to .footer-icon-wrap, not the whole footer-item,
   so it always sits right at the icon's own corner regardless of how wide
   the flex column around it is. */
.footer-icon-wrap {
    position: relative;
    display: inline-flex;
}
/* Says how many, not just that there is something. A white 8px dot on a
   near-black bar was the quietest mark in the app for the one thing that is
   supposed to pull you back into it — and it read as a rendering artefact as
   easily as a notification. Red because nothing else here is: gold belongs to
   Kultainen kutsu and white is simply "current".

   The ring is the bar's own surface rather than the page's, since the nav is
   a lifted panel now and the badge sits on that, not on the background. */
.nav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 1.10.2026: #ff453a antoi valkoiselle tekstille 3,41:1. Merkin luku on
       pieni ja lihava, eli pientä tekstiä — tämä punainen antaa 4,84:1 ja on
       yhä selvästi punainen. Hehku jää entiselleen. */
    background: #dd2419;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(23, 25, 33, 1), 0 1px 4px rgba(255, 69, 58, 0.5);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

/* Offer response modal body */
.op-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.op-section-label {
    font-size: 0.75rem;
    color: #bbb;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--st-font-body);
    margin-bottom: 0.2rem;
}
.op-bubble {
    background: #f5f8fc;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    color: #1a1a2e;
    font-family: var(--st-font-body);
    line-height: 1.45;
    border: 1px solid #dce8f5;
}
.op-role-chip {
    display: inline-block;
    background: #a8c8f0;
    color: #1a3a6e;
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
}
.op-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.op-deny-btn {
    flex: 1;
    padding: 0.6rem 0;
    border-radius: 9px;
    border: 1.5px solid #f5c6c6;
    background: #fff5f5;
    color: #c0392b;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.op-accept-btn {
    flex: 2;
    padding: 0.6rem 0;
    border-radius: 9px;
    border: none;
    background: #4a6fa5;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.op-accept-btn:disabled, .op-deny-btn:disabled { opacity: 0.5; }

/* ── Received offer sheet (#offerModal) ─────────────────────────────────
   The recipient's side of "Tarjoa projektia". Same dark language as the
   app's other sheets — near-black surface, thin white edge, centred
   small-caps labels — instead of a white form dropped onto a dark app.
   Scoped to #offerModal: .tp-panel is shared with the sender's modal. */
#offerModal,
#tarjoaModal {
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#offerModal .tp-panel,
#tarjoaModal .tp-panel {
    /* The project's picture behind the whole sheet, sized to its width and
       anchored to the top, fading to solid dark under the text. It says what
       the offer is about at a glance without spending a block of height on
       its own, which is what kept the sheet from fitting one screen.
       --of-photo is set per offer by openOfferModal. */
    --of-shade: linear-gradient(180deg,
        rgba(17, 19, 25, 0.25) 0%,
        rgba(17, 19, 25, 0.72) 24%,
        rgba(17, 19, 25, 0.94) 44%,
        #111319 64%);
    background-color: #111319;
    background-image: var(--of-shade), var(--of-photo, none);
    background-size: 100% 100%, 100% auto;
    background-position: center, center top;
    background-repeat: no-repeat;
    background-attachment: local, local;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    padding: 0;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: var(--st-varjo-kelluva);
    color: #f2f2f5;
}
#offerModal .tp-close,
#tarjoaModal .tp-close {
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.of-head {
    padding: 2.6rem 1.25rem 0;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
/* A band of the project picture shows above the heading — only when there is
   one; without it (choosing a project, a Cast & Crew invite) it was just a
   blank strip. JS sets .of-has-photo alongside --of-photo. */
.of-has-photo .of-head { padding-top: 4.6rem; }
#tarjoaModal .tp-panel.of-has-photo .of-head { padding-top: 3.6rem; }
.of-eyebrow {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
#offerModal .tp-title,
#tarjoaModal .tp-title {
    margin: 0.3rem 0 0.7rem;
    font-family: var(--st-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
    line-height: 1.2;
}
/* Who is asking — a face and a profession, not just a name string. */
.of-sender {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    padding: 0.28rem 0.85rem 0.28rem 0.28rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.of-sender-photo {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #2a2f3d center / cover no-repeat;
}
#offerModal .tp-target,
#tarjoaModal .tp-target {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #f2f2f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.of-sender-ammatti { font-weight: 400; color: rgba(255, 255, 255, 0.55); }
/* The project name opens the project page. The ring with an arrow beside it
   is what says so — a heading on its own gives no hint it can be pressed. */
.of-title-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
    cursor: pointer;
}
.of-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-title-go {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.of-title-go svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.of-title-link:hover .of-title-go { background: rgba(255, 255, 255, 0.16); }

#offerModal .op-body { padding: 1rem 1.25rem 1.2rem; gap: 0.8rem; }
#offerModal .op-section-label {
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.55rem;
}
/* The facts, two to a row, label over value — read in one pass rather than
   down a list. The 1px gap over a light ground draws the dividers. */
.of-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}
.of-fact {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    background: rgba(17, 19, 25, 0.94);
    font-family: var(--st-font-body);
}
.of-fact span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
.of-fact strong {
    /* Regular weight, a size under body text: the label above already says
       what each cell is, so the value doesn't need to shout — at 600 the grid
       read as a block of bold. Still fits "Kehittelyvaiheessa" in a
       half-width cell; the ellipsis is only a fallback. */
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* An odd one out takes the whole last row rather than leaving a hole. */
.of-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
#offerModal .op-role-chip {
    background: #fff;
    color: #0b0c10;
    font-size: 0.8rem;
    padding: 0.22rem 0.7rem;
}
.of-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
}
/* The sender's own words. Marked as a quote by its edge rather than a
   heading above it, which saves a line and reads as speech. */
.of-quote {
    margin: 0;
    padding: 0.7rem 0.95rem;
    border-left: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #f2f2f5;
    white-space: pre-wrap;
}
/* Brief: mitä tältä roolilta toivotaan.
   Oma laatikkonsa eikä faktaruudukon jatke, koska nämä ovat toiveita eivätkä
   projektin faktoja — ja koska juuri näistä syntyy väärinymmärrys, jos ne
   jäävät sanomatta. Vasen reuna erottaa sen ympäröivästä tekstistä.

   Väri oli korostussininen, mutta sininen pinta luki omana teemanaan eikä
   Stormina (käyttäjä 30.9.2026) — sama päätös kuin napeissa. Erottelu
   tehdään nyt vaalealla reunalla ja läpikuultavalla pohjalla. */
.of-brief {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.95rem;
    border-left: 2px solid rgba(255, 255, 255, 0.38);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, 0.05);
}
.of-brief-otsikko {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
.of-brief-kuvaus {
    margin: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #f2f2f5;
    white-space: pre-wrap;
}
/* Väljyys riviväliin eikä pelkkään riviin: monirivinen vastaus ("Some ·
   Mainonta · Painotuote") tarttui edelliseen riviin kiinni, ja sarake luki
   yhtenä tekstimassana (käyttäjä 30.9.2026). Ohut viiva rivien väliin
   erottaa parit toisistaan ilman lisätilaa. */
.of-brief-rivit { display: flex; flex-direction: column; gap: 0.62rem; }
.of-brief-rivi + .of-brief-rivi {
    padding-top: 0.62rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Nimi vasemmalla, vastaus oikealla. Vastaus saa katketa usealle riville:
   "Some · Mainonta · Painotuote" on tavallinen vastaus eikä sitä saa
   kolmella pisteellä piilottaa juuri siltä jolle se on kirjoitettu. */
.of-brief-rivi {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.9rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.55;
}
.of-brief-rivi span   { flex: 0 0 auto; color: rgba(255, 255, 255, 0.55); }
.of-brief-rivi strong { text-align: right; font-weight: 400; color: rgba(255, 255, 255, 0.95); }

/* Sanottu ääneen juuri ennen Hyväksy-nappia, koska siinä kohtaa ihminen
   epäröi. Tämä oli aiemmin vain koodikommentti. */
.of-ei-sopimus {
    margin: 0;
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
}

/* Lähettäjän esikatselu samasta briefistä. */
.tp-brief {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    /* Sama neutraali pohja kuin .of-brief:llä — ks. sen perustelu. */
    background: rgba(255, 255, 255, 0.06);
}
.tp-brief-ylin { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tp-brief-otsikko {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
.tp-brief-pois {
    border: 0;
    background: none;
    padding: 0.1rem 0.2rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: #9db3ee;
    cursor: pointer;
}
.tp-brief-ohje {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
/* Pois jätetty brief jää näkyviin himmeänä: se kertoo että vastaukset ovat
   yhä olemassa ja yhdellä painalluksella takaisin. */
.tp-brief-pois-paalla .of-brief-rivit,
.tp-brief-pois-paalla .tp-brief-ohje { opacity: 0.35; }

.of-deadline {
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.of-deadline strong { color: #fff; font-weight: 600; }
.of-status {
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}
/* One line until it is used — the reply is optional, and a four-line box
   was the single biggest thing pushing the buttons off screen. */
#offerModal .tp-textarea,
#tarjoaModal .tp-textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #f2f2f5;
    /* 16px, not less: iOS Safari zooms the page on focus below that. The
       lighter, smaller look comes from the placeholder rule instead. */
    font-size: 1rem;
    min-height: 0;
    height: 2.9rem;
    padding: 0.7rem 0.95rem;
    resize: none;
    overflow-y: hidden;
    transition: height 0.2s ease;
}
#offerModal .tp-textarea:focus,
#offerModal .tp-textarea:not(:placeholder-shown),
#tarjoaModal .tp-textarea:focus,
#tarjoaModal .tp-textarea:not(:placeholder-shown) { height: 5.2rem; overflow-y: auto; }
#offerModal .tp-textarea::placeholder,
#tarjoaModal .tp-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
#offerModal .tp-textarea:focus,
#tarjoaModal .tp-textarea:focus { border-color: rgba(255, 255, 255, 0.45); }
#offerModal .op-actions { gap: 0.6rem; margin-top: 0.1rem; }
/* Decline stays available but quiet; accept is the one filled control. */
#offerModal .op-deny-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 999px;
    padding: 0.82rem 0;
    font-weight: 500;
    font-family: var(--st-font-body);
}
#offerModal .op-accept-btn {
    background: #fff;
    color: #0b0c10;
    border-radius: 999px;
    padding: 0.82rem 0;
    font-weight: 700;
    font-family: var(--st-font-body);
}
.of-primary, .of-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
}
.of-primary { background: #fff; color: #0b0c10; border: none; font-weight: 700; }
.of-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 500;
}

/* After accepting. Stays on screen until the recipient moves on — it used to
   vanish after 1.8 s, before anyone could read what it said. */
.of-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}
.of-success-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.of-success-mark svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.of-success-title {
    font-family: var(--st-font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.of-success-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
}
.of-success-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}
.of-success-row strong { color: #fff; font-weight: 600; }
.of-success-row svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.05rem;
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Sender's sheet (#tarjoaModal) ────────────────────────────────────
   Shares the recipient's sheet rules above; only what the sender does that
   the recipient doesn't — pick a project, fill in the offer — lives here. */
#tarjoaModal .tp-list {
    flex: none;
    overflow: visible;
    /* Lohkot olivat kiinni toisissaan ja lomake luki yhtenä palkkipinona
       (käyttäjä 30.9.2026). Väljyys on nyt mahdollista, koska brief ja pitkä
       vastaanottajalista ovat avattavien palkkien takana. */
    gap: 1.05rem;
    padding: 1rem 1.25rem 1.2rem;
}
/* Lomakkeen asetusosa (voimassaolo, palaamme) erottuu siitä mitä tarjotaan:
   hieman isompi väli ja ohut viiva kertovat että ylhäällä on sisältö ja
   alhaalla sen ehdot. */
#tarjoaModal .tp-asetukset-alku {
    margin-top: 0.5rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tf-note {
    text-align: center;
    padding: 1.2rem 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}
/* Step 1: the sender's own projects. */
.tf-project {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.6rem 0.75rem 0.6rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #f2f2f5;
    text-align: left;
    font-family: var(--st-font-body);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tf-project:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.24); }
.tf-project-photo {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: #2a2f3d center / cover no-repeat;
}
.tf-project-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.tf-project-info strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tf-project-info span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tf-project svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Step 2: the offer itself. Labels only where a placeholder can't carry the
   meaning — that, and one-line text boxes, is what keeps Lähetä on screen. */
.tf-group { display: flex; flex-direction: column; gap: 0.5rem; }
.tf-row { display: flex; align-items: center; gap: 0.6rem; }
.tf-label {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
#tarjoaModal .tp-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #f2f2f5;
    padding: 0.65rem 0.95rem;
}
/* Placeholder text set smaller, lighter and a touch tighter than what gets
   typed. The typed text itself stays at 16px on purpose: iOS Safari zooms the
   whole page on focus for any field under that (see .tp-input). A placeholder
   doesn't trigger it, so that is where the size can come down. */
#tarjoaModal .tp-input::placeholder,
#tarjoaModal .tp-textarea::placeholder,
#offerModal .tp-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.01em;
}
#tarjoaModal .tp-input:focus { border-color: rgba(255, 255, 255, 0.45); }
/* The browser's up/down arrows sat inside the right edge and pushed the
   number off centre; the field is typed into or stepped by keyboard. */
#tarjoaModal .tp-days-input {
    width: 4rem;
    flex: none;
    text-align: center;
    padding: 0.45rem 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
#tarjoaModal .tp-days-input::-webkit-outer-spin-button,
#tarjoaModal .tp-days-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#tarjoaModal .tp-days-suffix { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }
#tarjoaModal .tp-role-pills { margin: 0; gap: 0.3rem; }
/* Sized so the three Palaamme choices share one row on a phone — at the
   first size "Kuukauden sisään" wrapped to a row of its own, which was the
   difference between step 2 fitting the screen and not. */
#tarjoaModal .tp-role-pill-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    padding: 0.28rem 0.55rem;
    white-space: nowrap;
}
#tarjoaModal .tp-role-pill-btn:hover { background: rgba(255, 255, 255, 0.08); }
#tarjoaModal .tp-role-pill-btn.active { background: #fff; border-color: #fff; color: #0b0c10; }
#tarjoaModal .tp-footer { margin-top: 0.2rem; gap: 0.6rem; }
#tarjoaModal .tp-back-btn {
    width: 2.9rem;
    height: 2.9rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
#tarjoaModal .tp-back-btn svg { stroke: #fff; }
#tarjoaModal .tp-send-btn {
    background: #fff;
    color: #0b0c10;
    border-radius: 999px;
    padding: 0.85rem 0;
    font-size: 0.82rem;
    font-weight: 700;
}
.tf-error {
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: #ff8a80;
}

/* Custom confirm dialog — see stormiConfirm() in js/spa.js. Replaces native
   window.confirm() for destructive actions (poista-napit): some mobile
   browser/PWA contexts silently no-op or suppress confirm()/alert(), which
   makes a "Haluatko varmasti poistaa..." gate look like the button simply
   does nothing when pressed. This is in-page DOM instead, so it always
   renders and always resolves on a real tap. */
.sc-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.sc-confirm-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    padding: 1.4rem 1.3rem 1.2rem;
    box-shadow: var(--st-varjo-kelluva);
}
.sc-confirm-text {
    font-size: 0.92rem;
    color: #14161c;
    font-family: var(--st-font-body);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}
.sc-confirm-actions {
    display: flex;
    gap: 0.6rem;
}
.sc-confirm-cancel, .sc-confirm-ok {
    flex: 1;
    border-radius: 12px;
    padding: 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    cursor: pointer;
    border: 1px solid #e5e7ea;
}
.sc-confirm-cancel { background: #fff; color: #14161c; }
.sc-confirm-ok { background: #d32f2f; color: #fff; border-color: #d32f2f; }
/* Plain info popups (stormiInfo()) aren't destructive — no red. */
.sc-confirm-ok.sc-confirm-ok-neutral { background: #14161c; border-color: #14161c; }

/* Global loading overlay — see showLoading()/hideLoading() in js/spa.js.
   A submit button being disabled is invisible on its own (see the
   :disabled rule below), which read as "the button didn't do anything" —
   this gives an unmistakable "something is happening" signal for any
   commit action that takes more than an instant, and blocks taps
   underneath so a slow request can't be double-submitted. Higher z-index
   than .sc-confirm-overlay (10990) so it can appear on top of a confirm
   dialog too (e.g. confirm delete -> then the delete request itself). */
.stormi-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 11000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.stormi-loading-ball {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: stormi-spin 0.7s linear infinite;
}
@keyframes stormi-spin {
    to { transform: rotate(360deg); }
}
.stormi-loading-text {
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}

/* Onnistumisen kuittaus — showLoading-pallon pari, ks. naytaOnnistui().
   Sama peite ja sama keskitys kuin pallolla, jotta vaihto pallosta
   kuittaukseen näyttää samalta kerrokselta eikä uudelta ikkunalta. */
.stormi-ok-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
    animation: stormi-ok-saapuu 0.16s ease-out;
}
@keyframes stormi-ok-saapuu { from { opacity: 0; } }
.stormi-ok-laatikko {
    max-width: 19rem;
    padding: 1.6rem 1.4rem 1.5rem;
    border-radius: var(--st-radius-lg);
    border: 1px solid var(--st-line);
    background: var(--st-surface);
    box-shadow: var(--st-varjo-kelluva);
    text-align: center;
}
.stormi-ok-merkki {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto 0.85rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 127, 224, 0.16);
    border: 1px solid rgba(91, 127, 224, 0.5);
    animation: stormi-ok-merkki 0.26s ease-out;
}
@keyframes stormi-ok-merkki { from { transform: scale(0.6); opacity: 0; } }
.stormi-ok-merkki svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: var(--st-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stormi-ok-otsikko {
    color: var(--st-text);
    font: 600 0.96rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.stormi-ok-rivi {
    margin-top: 0.5rem;
    color: var(--st-text-dim);
    font: 0.8rem/1.45 var(--st-font-body);
    letter-spacing: normal;
}

/* Stormi Assistant — app-wide dropdown panel built dynamically by
   openStormiAssistant() in js/spa.js (same "create/append/remove on
   document.body" idiom as .stormi-loading-overlay/.sc-confirm-overlay
   above), not tied to any one view. Drops down from the top bar over the
   current page rather than covering it — max-height caps it at half the
   viewport, no full-screen scrim, so whatever's underneath (Etusivu's feed)
   stays visible below it; a document-level click outside the panel closes
   it (see openStormiAssistant()'s listener) since there's no backdrop
   element to click. z-index sits below both of the overlays above so a
   confirm dialog or the loading spinner (shown during a search) still
   render on top of it.
   Typography/input chrome matches existing dark-view conventions rather
   than inventing new ones: body text sizing/family follows .sv-info-value
   (Kerro itsestäsi/Haluaisin's own display text on the dark Profiili view),
   the textarea follows .sv-about-textarea (the editable field right next to
   that same text) — both in this file. */
.stormi-assistant-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10900;
    max-height: 78vh;
    background: #14151a;
    /* Outlined so the panel reads as a sheet lying over the page rather than
       part of it — its own background is close enough to the app's that the
       edge was only visible where the shadow fell. No top border: that edge
       is off-screen, the sheet having come from above. */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: var(--st-varjo-kelluva);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Rolls down from the top and back up again, rather than appearing and
       vanishing. The page underneath never moves — nothing about opening the
       assistant is a navigation.

       The resting state is in place, with the entrance as a keyframe from
       above, rather than the other way round: an animation that never runs
       (throttled tab, reduced motion, an old engine) then just means no
       animation, instead of a panel parked permanently off-screen.

       Decelerating on the way in and accelerating on the way out, rather than
       ease at both ends: the sheet should arrive settling into place and leave
       like it is being pulled, which is what makes the movement read as weight
       instead of as a slide. Out is quicker than in — waiting on something you
       have already dismissed is what makes an animation feel slow. */
    transform: translateY(0);
    animation: stormi-assistant-alas 0.42s cubic-bezier(0.16, 0.84, 0.32, 1);
}
@keyframes stormi-assistant-alas {
    from { transform: translateY(-100%); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
}
.stormi-assistant-ylos { animation: stormi-assistant-ylos-kf 0.3s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
@keyframes stormi-assistant-ylos-kf {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .stormi-assistant-overlay,
    .stormi-assistant-ylos { animation: none; }
}
/* Three columns — spacer, title, control — so the title is optically centred
   whatever is beside it, the same treatment the app's other sheet headers
   use (cf. .sv-kutsu-header). */
.stormi-assistant-header {
    display: grid;
    grid-template-columns: 2.05rem 1fr 2.05rem;
    align-items: center;
    padding: 1.5rem 1.2rem 0.2rem;
    flex-shrink: 0;
}
/* Set like the app's other section headings — small, uppercase, letterspaced
   (cf. .np-section-label) — rather than the display face it had, which made a
   panel that drops over the page read like a product banner. */
.stormi-assistant-title {
    grid-column: 2;
    text-align: center;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transform: scaleX(0.94);
}
/* Rolls the panel back up. Not a close X: you are not leaving anything. */
.stormi-assistant-close {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    width: 2.05rem;
    height: 2.05rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
}
.stormi-assistant-close svg { width: 18px; height: 18px; }
.stormi-assistant-close:hover { color: #fff; }
.stormi-assistant-body {
    /* Tilaa alareunaan, ettei viimeinen tulos jää välilehtirivin alle. */
    padding: 0.9rem 1.2rem 2.4rem;
    max-width: 32rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
/* Centred and quieter than the field below it: it is an explanation you read
   once, not the content of the panel. */
.stormi-assistant-intro {
    color: rgba(242, 242, 245, 0.62);
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    line-height: 1.6;
    text-align: center;
    max-width: 21rem;
    margin: 0.6rem auto 1.2rem;
}
/* Same box as .sv-about-textarea (the editable field beside that text). */
.stormi-assistant-textarea {
    display: block;
    width: 100%;
    /* Deliberately roomy — the useful questions here are sentences, and a
       three-line box invited three-word ones. */
    min-height: 8.5rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    color: #f2f2f5;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    line-height: 1.55;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    resize: vertical;
}
.stormi-assistant-textarea::placeholder { color: #8a8f9a; }
.stormi-assistant-textarea:focus { outline: none; border-color: rgba(255,255,255,0.4); }
/* Outlined rather than solid white: the field above it is also an outlined
   box on the same dark ground, and a filled pill made the button shout over
   the question it belongs to. */
.stormi-assistant-submit {
    display: block;
    margin: 1rem auto 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 999px;
    color: #fff;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    font-family: var(--st-font-body);
    padding: 0.7rem 1.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.stormi-assistant-submit:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.6); }
.stormi-assistant-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.stormi-assistant-usage {
    color: #8a8f9a;
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    text-align: center;
    margin-top: 0.7rem;
}
.stormi-assistant-error { color: #ff8a8a; font-size: 0.82rem; font-family: var(--st-font-body); margin-top: 0.6rem; }
.stormi-assistant-answer {
    margin-top: 1.2rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    color: #f2f2f5;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    line-height: 1.55;
}
.stormi-assistant-results { margin-top: 1rem; }

/* Stormi Chat + tilan vaihto (openStormiAssistant, js/spa.js). Only the
   current side's body is shown; the switch sits at the panel's bottom edge. */
.stormi-assistant-overlay[data-tila="chat"] [data-osa="assistant"],
.stormi-assistant-overlay[data-tila="assistant"] [data-osa="chat"],
.stormi-assistant-overlay:not([data-tila="ukk"]) [data-osa="ukk"],
.stormi-assistant-overlay[data-tila="ukk"] [data-osa="assistant"],
.stormi-assistant-overlay[data-tila="ukk"] [data-osa="chat"] { display: none; }

/* UKK: pieni välilehti vaihtimen päässä ja avattavat kysymykset
   (piirraUkk, js/spa.js). */
.stormi-assistant-vaihto .stormi-assistant-ukk-tab { flex: 0 0 auto; padding-left: 0.85rem; padding-right: 0.85rem; }
.stormi-ukk { padding-top: 0.4rem; }
.stormi-ukk-lista { display: flex; flex-direction: column; }
.stormi-ukk-kohta { border-bottom: 1px solid rgba(255,255,255,0.1); }
.stormi-ukk-kohta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 44px;
    padding: 0.7rem 0.1rem;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}
.stormi-ukk-kohta summary::-webkit-details-marker { display: none; }
.stormi-ukk-kohta summary::after {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid #8a8f9a;
    border-bottom: 2px solid #8a8f9a;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.stormi-ukk-kohta[open] summary::after { transform: rotate(-135deg); }
.stormi-ukk-vastaus { padding: 0 0.1rem 1rem; }
.stormi-ukk-vastaus p {
    margin: 0 0 0.6rem;
    color: rgba(242,242,245,0.8);
    font-family: var(--st-font-body);
    font-size: 0.85rem;
    letter-spacing: normal;
    line-height: 1.6;
}
.stormi-ukk-linkki,
.stormi-ukk-chat {
    min-height: 32px;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    letter-spacing: normal;
    cursor: pointer;
}
.stormi-ukk-linkki:hover,
.stormi-ukk-chat:hover { border-color: #5b7fe0; }
.stormi-ukk-loppu { padding: 1.2rem 0 0.4rem; text-align: center; }
.stormi-ukk-loppu p {
    margin: 0 0 0.7rem;
    color: #8a8f9a;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    letter-spacing: normal;
}
.stormi-assistant-bar .nav-badge { top: -6px; right: -6px; }
.stormi-assistant-vaihto {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Paneelin värinen kehys ja häivytys yläpuolelle: rivi kellui vastauksen
       päällä ja tulokset näkyivät sen läpi ja ympäriltä (testaaja 12.10.2026). */
    box-shadow: 0 0 0 0.7rem #14151a, 0 -1.6rem 1.4rem 0.4rem #14151a;
    display: flex;
    gap: 0.3rem;
    width: calc(100% - 2.4rem);
    max-width: 22rem;
    margin: 0 auto;
    padding: 0.3rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #1d1f26;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
}
.stormi-assistant-vaihto button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.62);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.stormi-assistant-vaihto button.on { background: #fff; color: #14151a; }
.stormi-assistant-vaihto button.lukittu { color: rgba(255,255,255,0.55); }
.stormi-assistant-lukko {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stormi-assistant-lukittu {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    padding: 0 1.2rem 1.1rem;
    color: rgba(242,242,245,0.7);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    text-align: center;
}
.stormi-assistant-lukittu-nappi,
.stormi-assistant-ehdotus-nappi {
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    cursor: pointer;
}
.stormi-assistant-ehdotus {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    text-align: center;
}
.stormi-assistant-ehdotus p {
    margin: 0 0 0.65rem;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
}
.stormi-chat .stormi-assistant-intro { margin-bottom: 0.9rem; }
.stormi-chat-viestit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.stormi-chat-kupla {
    align-self: flex-start;
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255,255,255,0.08);
    color: #f2f2f5;
    font-family: var(--st-font-body);
}
.stormi-chat-kupla.oma {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
}
.stormi-chat-lahettaja { font-size: 0.8rem; color: rgba(242,242,245,0.55); margin-bottom: 0.15rem; }
.stormi-chat-teksti { font-size: 0.82rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.stormi-chat-linkki {
    display: inline-block;
    margin-top: 0.45rem;
    min-height: 32px;
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
    font: 600 0.8rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.stormi-chat-aika { margin-top: 0.2rem; font-size: 0.75rem; opacity: 0.6; text-align: right; }
.stormi-chat-kirjoitus { display: flex; align-items: flex-end; gap: 0.5rem; }
.stormi-chat-kentta {
    flex: 1;
    min-height: 2.8rem;
    max-height: 9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: transparent;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
}
.stormi-chat-kentta::placeholder { color: #8a8f9a; }
.stormi-chat-kentta:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.stormi-chat-laheta {
    flex-shrink: 0;
    padding: 0.7rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #14151a;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
}
.stormi-chat-laheta:disabled { opacity: 0.5; cursor: default; }
.stormi-assistant-section-heading {
    color: #8a8f9a;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    margin: 1.1rem 0 0.4rem;
}
.stormi-assistant-role-block { margin-top: 0.8rem; }
.stormi-assistant-role-heading { color: #fff; font-size: 0.82rem; font-weight: 600; font-family: var(--st-font-body); }
.stormi-assistant-role-reason { color: #9aa0ad; font-size: 0.8rem; font-family: var(--st-font-body); margin-top: 0.1rem; }
.stormi-assistant-empty { color: #8a8f9a; font-size: 0.8rem; font-family: var(--st-font-body); margin-top: 0.35rem; }
.stormi-assistant-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    cursor: pointer;
}
.stormi-assistant-card img,
.stormi-assistant-card-noimg {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.stormi-assistant-card-info { flex: 1; min-width: 0; }
.stormi-assistant-card-name { color: #fff; font-size: 0.82rem; font-weight: 500; font-family: var(--st-font-body); }
.stormi-assistant-card-meta { color: #9aa0ad; font-size: 0.8rem; font-family: var(--st-font-body); }

/* .np-submit-btn/.sv-member-btn had no :disabled rule at all, so setting
   .disabled = true on them was invisible — the button looked 100% the same
   before and during the request, which is exactly what read as "nothing
   happened, is this broken?" and prompted a re-click. */
.np-submit-btn:disabled, .sv-member-btn:disabled, .spm-like-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tarjoa Projekti Modal */
/* "Tarjoa projektia" avataan ammattikortin näkymästä (searchProfileModal
   10960): 10700:lla projektilista latautui kortin taakse ja tuli näkyviin
   vasta, kun kortin sulki paluunuolella (käyttäjä 5.10.2026). Kortin päälle,
   kuvakatselimen (10980) ja vahvistusten/latauspallon (11000) alle. */
#tarjoaModal { z-index: 10970; }

/* Tarjoa Projekti Modal */
.tp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.tp-panel {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    padding: 1.2rem 1.2rem 1.4rem;
    position: relative;
    box-shadow: var(--st-varjo-kelluva);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.tp-close {
    position: absolute;
    top: 0.7rem;
    right: 0.85rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #777;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    line-height: 1;
}
.tp-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    font-weight: 700;
    font-family: var(--st-font-body);
    margin-bottom: 0.3rem;
}
.tp-target {
    font-size: 0.92rem;
    font-weight: 700;
    color: #14161c;
    font-family: var(--st-font-body);
    margin-bottom: 1rem;
}
.tp-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scrollbar-width: none;
}
.tp-list::-webkit-scrollbar { display: none; }
.tp-project-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem;
    border-radius: 12px;
    background: #f2f2f5;
    cursor: pointer;
    border: 1px solid #e5e7ea;
    transition: background 0.12s;
}
.tp-project-row:hover { background: #f0f1f3; }
.tp-project-photo {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(160deg, #dfe2e7, #c7cbd2);
}
.tp-project-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-project-info { min-width: 0; }
.tp-project-name {
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    color: #14161c;
}
.tp-project-date {
    font-size: 0.75rem;
    color: #a8acb5;
    margin-top: 0.15rem;
    font-family: var(--st-font-body);
    font-weight: 400;
}
.tp-field-group {
    margin-bottom: 0.85rem;
}
.tp-days-row { display: flex; align-items: center; gap: 0.6rem; }
.tp-days-row .tp-days-input { width: 4.2rem; flex: none; text-align: center; }
.tp-days-suffix { font-size: 0.82rem; color: #a8acb5; font-family: var(--st-font-body); }
.tp-field-label {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--st-font-body);
    margin-bottom: 0.3rem;
}
.tp-input {
    width: 100%;
    border: 1px solid #e5e7ea;
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    /* Font-size stays at 16px (not smaller) on purpose — iOS Safari
       auto-zooms the page on focus for any input under that. */
    font-size: 1rem;
    color: #14161c;
    outline: none;
    box-sizing: border-box;
    font-family: var(--st-font-body);
    font-weight: 300;
}
.tp-textarea {
    width: 100%;
    border: 1px solid #e5e7ea;
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    color: #14161c;
    outline: none;
    box-sizing: border-box;
    font-family: var(--st-font-body);
    font-weight: 300;
    resize: vertical;
    min-height: 80px;
    line-height: 1.45;
}
.tp-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.tp-back-btn {
    flex-shrink: 0;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    border: 1px solid #e5e7ea;
    background: #f2f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.tp-back-btn svg { width: 14px; height: 14px; fill: none; stroke: #14161c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-send-btn {
    flex: 1;
    padding: 0.6rem 0;
    border-radius: 9px;
    border: none;
    background: #14161c;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--st-font-body);
    letter-spacing: 0.02em;
    cursor: pointer;
}
.tp-send-btn:disabled { opacity: 0.5; }

.tp-role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.tp-role-pill-btn {
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    border-radius: 20px;
    color: #14161c;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--st-font-body);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.tp-role-pill-btn:hover { background: #e9eaec; }
.tp-role-pill-btn.active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}

/* Search Profile Modal */
.spm-overlay {
    position: fixed;
    inset: 0;
    background: var(--st-bg, #05070d);
    /* Arkkien yläpuolella (.sv-cards-sheet 10900, .sv-gear-sheet 10950):
       kortti- ja projektisivu avataan myös arkin sisältä — Tehdyt työt
       -listasta — ja 10500:lla se avautui arkin taakse, eli näkymättömiin.
       Tämä on koko ruudun peittävä sivu eikä kelluva ikkuna, joten sen
       kuuluu olla päällimmäisenä. Vahvistusikkuna (10990), latausikkuna
       (11000) ja ilmoituspalkki (12100) jäävät yhä ylemmäs. */
    z-index: 10960;
    flex-direction: column;
}
/* Avautuu lyhyellä häivytyksellä eikä kerralla (animaatio käynnistyy aina,
   kun display vaihtuu nonesta). Iso kuva näkyy vasta ladattuna. */
.spm-overlay { animation: spm-sisaan 0.22s ease-out both; }
@keyframes spm-sisaan { from { opacity: 0; } to { opacity: 1; } }
#spmHeroPhoto { opacity: 0; transition: opacity 0.28s ease; }
#spmHeroPhoto.spm-kuva-valmis { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .spm-overlay { animation: none; }
    #spmHeroPhoto { transition: none; }
}
.spm-close,
.spm-share,
.spm-report {
    position: absolute;
    top: 1rem;
    z-index: 6001;
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 1rem;
    border-radius: 50%;
    width: 2.05rem;
    height: 2.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.spm-close { left: 1rem; }
.spm-share { right: 1rem; }
/* Sits left of Jaa, same size/glass style but deliberately quieter (lower
   opacity, dot-menu icon instead of an action icon) — this is a report
   affordance, not a primary action. */
.spm-report {
    right: 3.35rem;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
}
.spm-share svg,
.spm-report svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
}
.spm-report svg { fill: rgba(255,255,255,0.75); stroke: none; }
/* Kortti kuvana. Sama lasipinta kuin jakonapilla, mutta pilleri eikä ympyrä:
   kuvake yksin ei kerro että kortista saa kuvan ja että sen ulkoasun voi
   valita, ja juuri sitä ei tiedetty olevan olemassa. */
.spm-korttikuva {
    position: absolute;
    top: 1rem;
    right: 3.35rem;
    z-index: 6001;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.05rem;
    padding: 0 0.7rem 0 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font: 600 0.8rem/1 var(--st-font-body);
    letter-spacing: 0;
    cursor: pointer;
}
.spm-korttikuva svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linejoin: round;
}
/* Vain hyvin kapealla ruudulla pelkkä kuvake. Tavallisella puhelimella (375 px)
   nimilappu pidetään: juuri se kertoo että tällainen mahdollisuus on. */
@media (max-width: 330px) {
    .spm-korttikuva span { display: none; }
    .spm-korttikuva { padding: 0; width: 2.05rem; justify-content: center; }
}
.spm-share-toast {
    position: absolute;
    top: 3.6rem;
    right: 1rem;
    z-index: 6001;
    background: rgba(20,20,20,0.92);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.spm-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}
.spm-scroll::-webkit-scrollbar { display: none; }
.spm-hero {
    position: relative;
    width: 100%;
    height: 52vh;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    transition: height 0.25s ease;
}
/* Videolle enemmän tilaa kuin valokuvalle.
   Kumpikin näytetään kokonaan (object-fit: contain), joten pystyvideo jäisi
   52vh:n laatikossa kapeaksi juovaksi — 15 sekunnin näyte on kortin tärkein
   sisältö silloin kun se on olemassa, ja sen pitää näkyä. Ei kuitenkaan koko
   ruudun mitalta: nimen ja toimintojen on näyttävä ilman vierittämistä. */
.spm-hero-video { height: 68vh; }
@media (prefers-reduced-motion: reduce) {
    .spm-hero { transition: none; }
}
.spm-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.spm-hero img { transition: opacity 0.2s ease; }
/* Kuvan latautuessa (openSearchProfile): paikkaväri ja hidas aalto. */
.spm-hero.spm-hero-lataa {
    background: linear-gradient(100deg, #12151c 30%, #1c2029 50%, #12151c 70%) 0 0 / 220% 100%;
    animation: spm-hero-aalto 1.3s ease-in-out infinite;
}
@keyframes spm-hero-aalto { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .spm-hero.spm-hero-lataa { animation: none; } }
.spm-hero-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.spm-hero-counter {
    position: absolute;
    bottom: 0.9rem;
    right: 0.9rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}
.spm-season-toggle {
    position: absolute;
    bottom: 0.9rem;
    left: 0.9rem;
    display: flex;
    background: rgba(0,0,0,0.55);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.1rem;
}
.spm-season-btn {
    border: none;
    background: none;
    color: rgba(255,255,255,0.7);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}
.spm-season-btn.active {
    background: rgba(255,255,255,0.92);
    color: #14161c;
}
.spm-carousel {
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    overflow-x: auto;
    background: var(--st-bg, #05070d);
    scrollbar-width: none;
    min-height: 5.2rem;
    align-items: center;
}
.spm-carousel::-webkit-scrollbar { display: none; }
.spm-thumb {
    height: 64px;
    width: 64px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.spm-thumb.active { border-color: var(--st-accent, #5b7fe0); }

/* Kaupunkiprofiili linked-entity strips (Käyttäjiä/Yritykset/Lokaatiot) —
   sits inside a .spm-info-row, same card language as .spm-thumb but with
   a name label underneath. */
.spm-link-strip {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.1rem;
}
.spm-link-strip::-webkit-scrollbar { display: none; }
.spm-link-card {
    flex-shrink: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.spm-link-card-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #1a1a2e;
    flex-shrink: 0;
}
.spm-link-card-name {
    font-size: 0.8rem;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.spm-empty-note {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
}

/* Title block — name, compact stats line, like row */
.spm-titleblock {
    background: var(--st-bg, #05070d);
    padding: 0.9rem 1.2rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spm-name-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.spm-title-name {
    color: #fff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
/* Small text link next to the hero name that opens #publicprofile, same
   destination as tapping the name itself (see openSearchProfile) — the tap
   alone had no visual affordance, so this makes it discoverable. */
.spm-profile-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    /* Isompi osuma-alue ilman että teksti siirtyy. */
    padding: 8px 10px;
    margin: -8px -10px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.spm-profile-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}
.spm-profile-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}
.spm-title-stats {
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    letter-spacing: normal;
    margin-top: 0.35rem;
}
.spm-employment {
    color: rgba(255,255,255,0.7);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    letter-spacing: normal;
    margin-top: 0.3rem;
}
.spm-like-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
}
.spm-like-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    padding: 0;
}
/* Täytetty sydän (käyttäjä 10.10.2026): valkoinen, tykättynä punainen.
   Ääriviivasydämen oikea puolisko oli piirretty vinoon, ja se näytti
   keskeneräiseltä. */
.spm-like-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    stroke: none;
}
/* No stroke once filled — a 2px outline in the same color as the fill, on
   an 18px icon, was visibly overshooting/gapping at the heart's sharper
   corners (top-right lobe) instead of just reading as a clean solid heart. */
.spm-like-btn.active svg { fill: #ff4d67; stroke: none; }
.spm-like-count {
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    /* Ei alleviivausta (Teemu 12.10.2026); lihavointi kertoo, että teksti
       avaa tykkääjät. */
    font-weight: 800;
    letter-spacing: normal;
    cursor: pointer;
}

/* Info sections — sectioned like a listing page, generous room for free text */
.spm-info {
    background: var(--st-bg, #05070d);
    padding: 0.2rem 0 1rem;
}
.spm-info-row {
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Projektin tarpeet — vain omistajan omassa näkymässä (ptTarveLaatikko). */
.pt-laatikko {
    margin: 0.9rem 1.2rem 0.4rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    font-family: var(--st-font-body);
    color: #f2f2f5;
}
.pt-otsikko { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.pt-otsikko > span:first-child { font-size: 0.92rem; font-weight: 700; }
.pt-yksityinen { font-size: 0.8rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
.pt-teksti { margin: 0 0 0.75rem; font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.75); }
.pt-ensisijainen {
    width: 100%; padding: 0.7rem 1rem; border: none; border-radius: 999px;
    background: #fff; color: #05070d; font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.pt-apu-lista { display: flex; flex-direction: column; }
/* Rivi kääntyi pystyyn, kun jokainen tarve sai oman nappinsa: vaakarivillä
   kolme sirua puristui kolmen sanan levyisiksi tolpiksi. */
.pt-apu { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; padding: 0.6rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.pt-tarve-sirut { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* Siru on toiminto eikä merkki: korostussininen reuna erottaa sen
   pelkästä tiedosta, mutta täyttö jää navin LUO-napille. */
.pt-tarve-siru {
    border: 1px solid rgba(109, 142, 230, 0.55);
    border-radius: 999px;
    background: rgba(109, 142, 230, 0.12);
    padding: 0.32rem 0.7rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: #e8ecf8;
    cursor: pointer;
    white-space: nowrap;
}
.pt-tarve-siru:hover { background: rgba(109, 142, 230, 0.26); }
/* Stormin ehdotus: kolme ihmistä perusteineen. Tiivis rivi, ei kortteja —
   tämä on vihje eikä hakutulos, ja laatikon on mahduttava projektisivulle. */
.pt-ehdokkaat-otsikko {
    margin-top: 0.15rem;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
.pt-ehdokkaat { display: flex; flex-direction: column; gap: 0.3rem; }
.pt-ehdokas {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.32rem 0.4rem;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pt-ehdokas:hover { background: rgba(255, 255, 255, 0.09); }
.pt-ehdokas-kuva {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08) center/cover no-repeat;
}
.pt-ehdokas-teksti { display: flex; flex-direction: column; min-width: 0; }
.pt-ehdokas-teksti strong { font-family: var(--st-font-body); font-size: 0.82rem; font-weight: 600; }
.pt-ehdokas-teksti span  { font-family: var(--st-font-body); font-size: 0.8rem; color: rgba(255,255,255,0.55); }

.pt-apu-muut { display: flex; align-items: center; gap: 0.6rem; }
.pt-apu-muut span { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.4; color: rgba(255,255,255,0.6); }
.pt-apu:first-child { border-top: none; padding-top: 0.2rem; }
.pt-apu-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pt-apu-teksti strong { font-size: 0.82rem; }
.pt-apu-teksti span { font-size: 0.8rem; line-height: 1.4; color: rgba(255,255,255,0.6); }
.pt-apu-nappi {
    flex-shrink: 0; padding: 0.45rem 0.8rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.3); background: none; color: #fff;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pt-ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.pt-linkki { padding: 0; border: none; background: none; color: #fff; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.spm-info-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--st-font-body);
    margin-bottom: 0.45rem;
}
.spm-info-value {
    font-size: 0.82rem;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    letter-spacing: normal;
    line-height: 1.55;
    white-space: pre-line;
}
.spm-info-value.spm-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spm-company-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Pending (not-yet-accepted) role offers on a project's own owner-facing
   info sheet — see #spmPendingOffers in spa.html and openProjectInfo() /
   server/get_sent_offers.php / server/withdraw_offer.php. */
.spm-pending-offers {
    background: var(--st-bg, #05070d);
    padding: 0 1.2rem 0.4rem;
}
.spm-pending-offers-title {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--st-font-body);
    padding: 0.9rem 0 0.7rem;
}
.spm-pending-offer-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spm-pending-offer-photo {
    display: block; /* kuvaton henkilö: span samalla pohjalla, ei rikkinäistä img:tä */
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,0.08); object-fit: cover;
}
.spm-pending-offer-body { flex: 1; min-width: 0; }
.spm-pending-offer-name {
    font-size: 0.82rem; font-weight: 600; color: #f2f2f5;
    font-family: var(--st-font-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spm-pending-offer-role {
    font-size: 0.8rem; color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body); margin-top: 2px;
}
.spm-pending-offer-withdraw {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #f2f2f5;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--st-font-body);
}
.spm-pending-offer-withdraw:active { background: rgba(255,255,255,0.1); }
.spm-info-more {
    display: inline-block;
    margin-top: 0.6rem;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Small-triangle expand for a long info-row value (Pidempi tarinankuvaus) —
   same rotate+toggle idiom as .sv-cards-heading-chevron, recolored for this
   modal's dark background instead of that one's light settings page. */
/* Projektikortin osioiden järjestys (pjJarjestaOsiot, js/spa.js) — in
   reorder mode each section collapses to one compact row: handle, name,
   up/down arrows. Normal case Arial, no caps (feedback_typografia). */
.spm-jarjestetaan .spm-osio > :not(.spm-osio-ohjain) { display: none; }
/* Hidden from others by the owner: gone from the card, dimmed in reorder mode. */
.spm-osio-piilossa { display: none; }
.spm-jarjestetaan .spm-osio-piilossa { display: block; }
.spm-jarjestetaan .spm-osio-piilossa .spm-osio-nimi { color: rgba(242,242,245,0.45); text-decoration: line-through; }
.spm-jarjestys-ohje {
    padding: 1rem 1.2rem 0.6rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.6);
}
.spm-jarjestys-ohje.spm-jarjestys-virhe { color: #ff8a8a; }
.spm-osio-ohjain {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Hiirellä vedettäessä painallus kahvasta alkoi maalata viereistä
       osion nimeä, ja tekstivalinta söi vedon. Kosketuksella tätä ei
       huomannut, koska touch-action: none hoitaa saman siellä. */
    user-select: none;
    -webkit-user-select: none;
    margin: 0 1.2rem 0.4rem;
    padding: 0.3rem 0.3rem 0.3rem 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    transition: background 0.15s, border-color 0.15s;
}
.spm-osio-raahataan .spm-osio-ohjain {
    background: rgba(91,127,224,0.16);
    border-color: var(--st-accent, #5b7fe0);
}
.spm-osio-kahva {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    align-self: stretch;
    cursor: grab;
    touch-action: none;
    color: rgba(255,255,255,0.55);
}
.spm-osio-raahataan .spm-osio-kahva { cursor: grabbing; }
.spm-osio-kahva svg,
.spm-osio-ohjain button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.spm-osio-nimi {
    flex: 1;
    min-width: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: #f2f2f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spm-osio-ohjain button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
}
.spm-osio-ohjain button:active { background: rgba(255,255,255,0.08); }
.spm-osio-ohjain button:disabled { opacity: 0.25; cursor: default; }

.spm-info-clamp-toggle {
    display: flex;
    width: 100%;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.4rem 0 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.spm-info-clamp-toggle svg {
    width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,0.55);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.spm-info-clamp-toggle.spm-info-clamp-toggle-open { transform: rotate(180deg); }

/* Kaupunkiprofiili — an ordered mix of full-bleed image+text sections,
   plain text sections, and live-content carousels (openSearchProfile's
   tyyppi==='kaupunki' branch, desc.kaupunki_osiot) — all appended into one
   .spm-kaupunki-osiot wrapper so a single rule spaces every combination of
   neighbors, instead of enumerating each type-pair. Full-bleed within
   .spm-info since that container carries no horizontal padding of its own
   (only .spm-info-row adds it per-row). */
.spm-kaupunki-osiot > * + * { margin-top: 0.6rem; }
/* 16/9 rather than 4/3: at 4/3 a section was ~280px tall on a phone against
   a 108px content tile below it, so the decorative photo outweighed the
   actual cards 2.6:1 and seven of them made the page a very long scroll.
   16/9 is also the default when an osio names no `suhde` — the ratio
   modifiers below let one page mix shapes instead of running seven
   identical bands (KAUPUNKI_OSIO_SUHTEET, includes/kaupunkiprofiili_helpers.php).
   9/16 is capped by height so a portrait band can't run past one screen on
   a tall phone or turn into a monolith on desktop. */
.spm-kaupunki-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.spm-kaupunki-section-1-1  { aspect-ratio: 1 / 1; }
.spm-kaupunki-section-9-16 {
    aspect-ratio: 9 / 16;
    max-height: 78vh;
}
/* Three stops, starting at 25%: the old two-stop scrim was still near
   transparent where the eyebrow line sits, so light photos (a bright sky
   behind "YRITYKSET") washed it out. Ramping to 0.45 by 60% covers the whole
   text block without flattening the top of the image. */
.spm-kaupunki-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0.45) 60%,
        rgba(0,0,0,0.9) 100%);
}
.spm-kaupunki-section-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.2rem 1.4rem;
}
/* The scrim alone can't guarantee contrast: where the text block starts is
   only ~40% down the section, and behind a pale photo (a white building or
   bright sky) the eyebrow washed out even after the ramp above. A shadow
   holds up over any image without darkening it further. Scoped to the
   image variant — .spm-kaupunki-section-plain is a separate class token and
   sits on a flat background, so it doesn't inherit this. */
.spm-kaupunki-section .spm-kaupunki-section-eyebrow,
.spm-kaupunki-section .spm-kaupunki-section-title,
.spm-kaupunki-section .spm-kaupunki-section-text {
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
.spm-kaupunki-section .spm-kaupunki-section-eyebrow { color: rgba(255,255,255,0.92); }
.spm-kaupunki-section-eyebrow {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255,255,255,0.75);
    font-family: var(--st-font-body);
    margin-bottom: 0.35rem;
}
.spm-kaupunki-section-title {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 0.4rem;
}
.spm-kaupunki-section-text {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9);
    font-family: var(--st-font-body);
    line-height: 1.45;
    max-width: 30rem;
}
/* Plain-text kaupunki osio — same eyebrow/title/text typography as the
   image variant above, just flat-padded on the page background instead of
   overlaid on a full-bleed photo. */
.spm-kaupunki-section-plain {
    padding: 1.4rem 1.2rem;
    background: var(--st-bg, #05070d);
}
.spm-kaupunki-section-plain .spm-kaupunki-section-title,
.spm-kaupunki-section-plain .spm-kaupunki-section-text { color: #f2f2f5; }
.spm-kaupunki-section-plain .spm-kaupunki-section-eyebrow { color: rgba(255,255,255,0.55); }

/* Referenssit — dimmed-image-with-overlaid-title/text look, used by every
   "Kuva ja teksti" content block (renderContentBlocks in js/spa.js): Yritys/
   Ryhmä's "Lisää", Elokuva/TV-sarja's story section, Artikkeli's body. Used
   to be a single swipeable bar cycling through every image with dot
   indicators below — replaced (2026-09, per user feedback) with one of
   these per block, stacked in normal page flow, so no swipe/click-to-cycle
   or dots are needed any more. */
.spm-referenssit {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1a1e2b;
    /* Title/text stack in normal flow, bottom-aligned as a column — avoids
       the overlap risk of independently bottom-anchored absolute elements
       when the text wraps to two lines. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.spm-referenssit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.82) 100%);
}
.spm-referenssit-title {
    position: relative;
    z-index: 1;
    padding: 0 1.2rem;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.spm-referenssit-text {
    position: relative;
    z-index: 1;
    padding: 0.35rem 1.2rem 1.1rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Sisältölohkot — the same {kuva, otsikko, teksti} shape as Referenssit
   above, rendered as a stacked sequence rather than one swipeable bar
   (Elokuva/TV-sarja's own story section, Yritys/Ryhmä's "Lisää", Artikkeli's
   body — see renderContentBlocks()/wireContentBlockEditor() in js/spa.js).
   Per user feedback a 'text' block reuses .spm-info-row/.spm-info-value
   directly (reads as a normal section, not a floating paragraph) and an
   'image' block reuses .spm-referenssit/-title/-text (title+text overlaid
   on the image, not a plain photo with a caption below) — no separate
   classes of their own needed any more. */

/* Sisältölohko-editori — add-text/add-image buttons, each block a small
   card with a remove button and (for image blocks) an upload tile; drag to
   reorder uses the same press-260ms-then-drag idea as wirePosterGridReorder
   (see js/spa.js), just for a vertical list instead of a grid. */
.cb-editor-list { display: flex; flex-direction: column; gap: 0.6rem; max-width: 19rem; margin: 0 auto; }
.cb-editor-block {
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.6rem;
    position: relative;
    background: #fff;
}
.cb-editor-block.cb-editor-dragging { opacity: 0.6; box-shadow: var(--st-varjo-nostettu); }
.cb-editor-block-remove {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: none;
    border: none;
    color: #a8acb5;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}
.cb-editor-block-remove:hover { color: #14161c; }
.cb-editor-block textarea.np-field-textarea { min-height: 4rem; }
.cb-editor-block-img-upload {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px dashed #d8dade;
    background: #f2f2f5 center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a8f9a;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    cursor: pointer;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.cb-editor-add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 19rem; margin: 0.6rem auto 0; }
.cb-editor-add-row .np-add-row-btn { margin-top: 0; flex: 1 1 auto; }
/* Linkki-lohkon kuva pyöreänä, kuten se näkyy kortilla. */
.cb-editor-block-linkki .cb-editor-block-img-upload { width: 7.5rem; aspect-ratio: 1; border-radius: 50%; margin: 0 auto 0.6rem; text-align: center; }

/* Linkki-lohko kortilla (renderContentBlocks): pyöreä kuva keskellä,
   otsikko ja verkkotunnus alla, koko lohko on linkki. */
.spm-linkki { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.6rem 0 0.2rem; text-decoration: none; color: inherit; }
.spm-linkki-kuva {
    position: relative; width: 7.5rem; height: 7.5rem; border-radius: 50%;
    background: #1a1e2b center/cover no-repeat;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.14), 0 10px 28px rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease;
}
.spm-linkki:active .spm-linkki-kuva { transform: scale(0.96); }
.spm-linkki-kuva svg { width: 2.4rem; height: 2.4rem; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); opacity: 0.92; }
.spm-linkki-otsikko { font-family: var(--st-font-body); font-weight: 700; font-size: 0.95rem; text-align: center; color: #f2f2f5; }
.spm-linkki-osoite { font-size: 0.78rem; color: rgba(242,242,245,0.6); }

/* Horizontal carousel of real cards under a kaupunki-section (paikallisia
   tekijöitä/yrityksiä/oppilaitoksia/järjestöjä, lokaatioita, tapahtumia). */
/* Card size intentionally matches Etusivu's .feed-card-media (7.6rem x
   5.3rem, 0.6rem gap, 12px radius — css/filkka.css), so a card row reads the
   same wherever it appears in the app. */
.spm-kaupunki-carousel {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    background: var(--st-bg, #05070d);
    scrollbar-width: none;
}
.spm-kaupunki-carousel::-webkit-scrollbar { display: none; }
.spm-kaupunki-carousel-item {
    flex-shrink: 0;
    width: 7.6rem;
    cursor: pointer;
}
.spm-kaupunki-carousel-photo {
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #1a1e2b;
}
.spm-kaupunki-carousel-name {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.spm-kaupunki-carousel-empty {
    padding: 0 1.2rem 1.2rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-family: var(--st-font-body);
}

/* Yhteystiedot — contact persons for a card. Used by kaupunkiprofiilit
   (kuvauslupa-asiat ym., desc.kaupunki_yhteystiedot) and by Yritys/Ryhmä
   cards (desc.yhteyshenkilot) alike — same list-of-people visual either way. */
.spm-contact {
    /* Vertical-only override — the horizontal 1.2rem stays inherited from
       .spm-info-row so the "Yhteystiedot" label lines up with every other
       section label instead of sitting flush against the edge. */
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.spm-contact-person {
    /* Horizontal padding comes from .spm-info-row above, not repeated here —
       see .spm-contact's comment. */
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spm-contact-person:last-child { border-bottom: none; }
.spm-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.spm-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #1a1e2b;
    flex-shrink: 0;
    cursor: pointer;
}
/* Name/role/detail share this column so they line up under each other
   (and under the name specifically, not the avatar) whether or not a
   photo is present. */
.spm-contact-text {
    flex: 1;
    min-width: 0;
}
.spm-contact-name-line {
    margin-bottom: 0.3rem;
}
.spm-contact-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--st-font-body);
}
.spm-contact-name.spm-contact-name-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.spm-contact-role {
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
}
.spm-contact-detail {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    font-family: var(--st-font-body);
    line-height: 1.5;
}
.spm-contact-detail a { color: inherit; text-decoration: underline; }

.spm-book-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.spm-book-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.spm-book-title {
    color: #f2f2f5;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.spm-book-year {
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    flex-shrink: 0;
}
.spm-book-publisher {
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spm-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}
.spm-skill-tag {
    background: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: normal;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
}

.spm-info-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.spm-info-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0;
}
.spm-info-link-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--st-accent, #5b7fe0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spm-info-link-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
}
.spm-social-youtube  { background: #ff0033; }
.spm-social-tiktok   { background: #1a1a1a; }
.spm-social-instagram{ background: linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); }
.spm-social-facebook { background: #1877f2; }
.spm-info-link-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.spm-info-link-label {
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: normal;
}
.spm-info-link-domain {
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    letter-spacing: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spm-info-link-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-accent, #5b7fe0);
}
.spm-info-link-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
/* "Katso lisää tietoja" lokaatiokortin alalaidassa: sama rivi kuin
   kotisivulinkillä, mutta nappina — se avaa lisätietonäkymän. */
.spm-loc-more {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Sticky bottom action bar */
.spm-action-bar {
    flex-shrink: 0;
    display: flex;
    gap: 0.7rem;
    padding: 0.8rem 1.2rem calc(0.8rem + env(safe-area-inset-bottom));
    background: var(--st-bg, #05070d);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.spm-message-btn,
.spm-offer-btn {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 0.68rem 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: normal;
    cursor: pointer;
}
.spm-message-btn {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.25);
}
.spm-offer-btn {
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
}

/* Results bottom sheet */
.results-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Melkein Stormi Assistant -palkkiin asti: tuloslista on se, mitä
       käyttäjä tuli katsomaan, eikä sen alle jää mitään mitä hän tarvitsisi
       samaan aikaan (käyttäjä 29.9.2026). Palkki jää näkyviin, jotta tietää
       yhä olevansa Stormissa. */
    height: 89vh;
    /* Tumma kuten muu sovellus. Tuloslista oli ainoa vaalea saareke, ja juuri
       se sai kortit näyttämään minkä tahansa listasovelluksen korteilta eikä
       Stormin omilta (käyttäjän linjaus 2026-09-25). */
    background: var(--st-bg, #05070d);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.35);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.results-sheet.open {
    transform: translateY(0);
}
.results-sheet-drag-zone {
    background: var(--st-bg, #05070d);
    border-radius: 22px 22px 0 0;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
}
.results-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0.55rem auto 0;
}
.results-sheet-header {
    padding: 0.6rem 1rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.results-sheet-title-row { display: flex; align-items: center; gap: 0.5rem; }
.results-sheet-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    font-family: var(--st-font-body);
}
.results-refine-btn {
    display: flex; align-items: center; justify-content: center;
    /* Oli 24 × 24 px. Ympyrä pidetään pienenä, mutta kosketusalue
       venytetään marginaalilla ulos niin, ettei rivin korkeus muutu. */
    width: 2.2rem; height: 2.2rem;
    margin: -0.35rem 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.results-refine-btn svg { width: 12px; height: 12px; fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 2; stroke-linecap: round; }
.results-sheet-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    /* Ristin oma pinta-ala on pieni, joten osuma-alue tulee täytteestä. */
    padding: 0.45rem 0.7rem;
    margin: -0.35rem -0.4rem;
}
.results-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.7rem 0.75rem var(--st-alapalkki-tila);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.result-card {
    /* Läpinäkyvä eikä valkoinen: kortti on kuva ja teksti, ei laatikko. Hento
       reuna erottaa kortit toisistaan ilman että ne muuttuvat lapuiksi. */
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    min-height: 122px;
    position: relative;
}
.result-card-photo {
    width: 96px;
    flex-shrink: 0;
    overflow: hidden;
}

/* ── Iso korttinäkymä ──────────────────────────────────────────────────
   Sama kortti, toinen asettelu: kuva koko leveydeltä ja tiedot sen alla,
   niin että yksi kortti mahtuu kerralla ruudulle ja seuraavasta näkyy
   reuna. Teema on sama läpinäkyvä tumma — vaihtuu vain mittasuhde, ei
   ulkoasu, jottei sivu näytä kahdelta eri sovellukselta.

   Luokka on listalla eikä kortilla: kortteja rakentaa kuusi eri funktiota
   (tekijä, lokaatio, projekti, kalusto, ryhmä, yritys), eikä yhdenkään
   niistä tarvitse tietää missä näkymässä ollaan. */
.tulos-iso .result-card {
    flex-direction: column;
    min-height: 0;
    /* Tuloslista on pystysuora flex-säiliö, joten kortti kutistuu oletuksena
       mahtuakseen näkyvään korkeuteen — rivinäkymässä se ei haittaa, mutta
       isossa kortissa kuva litistyi ja tekstit jäivät kokonaan näkymättä
       (mitattu: kortti 156 px, sisältö 509 px). */
    flex-shrink: 0;
}
.tulos-iso .result-card-photo {
    width: 100%;
    /* 4:5 on pystykuva joka jättää tiedoille tilaa saman ruudun alalaitaan.
       Neliö olisi turvallisempi, mutta ihmisen kuva on useimmiten pysty. */
    aspect-ratio: 4 / 5;
    /* Korkeus rajattu: isolla ruudulla yksi kortti oli ~760 px ja listalle
       jäi pelkät kasvot ja nimi (testaaja 12.10.2026). */
    max-height: min(52vh, 420px);
}
/* Tietokoneella isot kortit ruudukkoon, 2–3 rinnakkain. */
@media (min-width: 1024px) {
    .tulos-iso:is(#resultsList) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        align-items: start;
        gap: 14px;
    }
    .tulos-iso:is(#resultsList) > :not(.result-card) { grid-column: 1 / -1; }
    .tulos-iso .result-card-photo { max-height: 340px; }
}
.tulos-iso .result-card-photo img,
.tulos-iso .result-card-photo-placeholder {
    min-height: 0;
    height: 100%;
}
.tulos-iso .result-card-body {
    padding: 0.85rem 0.95rem 0.9rem;
}
.tulos-iso .result-card-name  { font-size: 1.25rem; }
.tulos-iso .result-card-age   { font-size: 0.82rem; }
.tulos-iso .result-card-meta  { font-size: 0.82rem; margin-bottom: 0.45rem; }
.tulos-iso .result-card-desc  { font-size: 0.82rem; max-height: 4.5em; }
.tulos-iso .result-card-gear-owner { font-size: 0.82rem; }
/* Toimintonapit kortin oikeaan yläkulmaan kuvan päälle: oletuspaikassa
   (alalaidassa) ne osuisivat tekstin päälle nyt kun teksti on kuvan alla. */
.tulos-iso .result-card-actions {
    top: 0.6rem;
    bottom: auto;
}
.result-card-photo img,
.result-card-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 122px;
}
.result-card-body {
    flex: 1;
    padding: 0.7rem 0.75rem 0.7rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.result-card-name-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.result-card-name {
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    letter-spacing: normal;
    color: #fff;
}
.result-card-age {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-family: var(--st-font-body);
}
.result-card-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--st-font-body);
    font-weight: 400;
    margin-bottom: 0.35rem;
}
.result-card-desc {
    font-size: 0.75rem;
    /* Kortti on läpinäkyvä tumma (2026-09-25), joten vanha harmaa jäi
       lukukelvottomaksi. Sama valkoinen alfa kuin .result-card-metalla,
       hitusen himmeämpi jotta nimi pysyy ensimmäisenä. */
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    font-family: var(--st-font-body);
    font-weight: 300;
    flex: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* No links row after it (no showreel/linkit) — leave clearance so the fading
   text doesn't sit right under the corner icons. */
.result-card-desc:last-child { padding-bottom: 1.4rem; }
/* Ääninäyte Showreelin vierelle samannäköisenä pillerinä: se on kortin
   toinen "tästä pääsee eteenpäin" -vihje, ja nimen perässä pelkkänä ikonina
   se jäi huomaamatta. */
.result-card-aani {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font: 400 0.75rem var(--st-font-body);
}
.result-card-aani svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.result-card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.4rem;
    padding-right: 4.1rem;
}
.result-card-link {
    font-size: 0.75rem;
    padding: 0.22rem 0.6rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    font-family: var(--st-font-body);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.result-card-footer { display: none; }

/* Follower-count row (svSocialIcons/svAbbrevNum, shared with the Settings
   card list) — only rendered when the person has added at least one. */
.result-card-social {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.result-card-social-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: #a8acb5;
    font-family: var(--st-font-body);
    font-weight: 400;
}
.result-card-social-item svg { width: 11px; height: 11px; fill: none; stroke: #a8acb5; stroke-width: 1.6; }

/* Small round icons in the card's bottom-right corner instead of a full-width
   button — the card stays quiet/informational, these are the only accent. */
.result-card-actions {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: flex;
    gap: 0.4rem;
}
/* Kosketusalue mitattiin puhelimen leveydellä: nämä olivat 27 × 27 px,
   eli reilusti alle sen 44 px:n, jota sormella osuminen vaatii. Ympyrä
   kasvoi 35 px:iin ja kosketusalue 45 px:iin pystysuunnassa — leveyteen
   ei koskettu, koska napit ovat vierekkäin ja levennys veisi osumia
   naapurilta: väärä toiminto on pahempi kuin pieni nappi. */
.result-card-msg,
.result-card-accept {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    background: #14161c;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.result-card-msg::after,
.result-card-accept::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    bottom: -5px;
}
.result-card-msg svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.result-card-accept svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.result-card-accept.result-card-tarjoa {
    width: auto;
    gap: 0.28rem;
    padding: 0 0.8rem 0 0.65rem;
    border-radius: 999px;
}
.result-card-tarjoa span { color: #fff; font: 600 0.8rem var(--st-font-body); letter-spacing: normal; white-space: nowrap; }

/* Tarjouskori (js/spa.js aloitaTarjousKori): one role to many people. The
   bar floats above the bottom nav and the results sheet; a picked result's
   "+" turns into a check. */
.tarjous-kori {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    bottom: calc(5.6rem + env(safe-area-inset-bottom));
    z-index: 4500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.55rem 0.55rem 0.95rem;
    background: rgba(23, 25, 33, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    box-shadow: var(--st-varjo-nostettu);
    color: #fff;
}
.tarjous-kori-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tarjous-kori-teksti strong { font: 600 0.82rem/1.2 var(--st-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjous-kori-teksti span { font: 0.8rem/1.2 var(--st-font-body); color: rgba(255,255,255,0.62); }
.tarjous-kori-peru,
.tarjous-kori-jatka {
    flex-shrink: 0;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font: 0.82rem var(--st-font-body);
    cursor: pointer;
}
.tarjous-kori-peru { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; }
.tarjous-kori-jatka { background: #fff; border: 0; color: #14151a; font-weight: 600; }
.tarjous-kori-jatka:disabled { opacity: 0.4; cursor: default; }
.result-card-accept.valittu { background: var(--st-accent, #5b7fe0); }
/* Room for the tarjouskori bar under the last result. */
body:has(#tarjousKoriPalkki) #resultsList,
body:has(#tarjousKoriPalkki) .search-inline-results-body { padding-bottom: var(--st-alapalkki-tila); }
.result-card-accept.valittu svg { stroke-width: 2.6; }

.tp-yksikot { display: inline-flex; gap: 0.2rem; padding: 0.15rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; }
.tp-yksikko { padding: 0.35rem 0.7rem; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.65); font: 0.82rem var(--st-font-body); cursor: pointer; }
.tp-yksikko.active { background: #fff; color: #14151a; }
#tarjoaModal .tp-vastaanottajat { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tp-vastaanottaja {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.2rem 0.2rem 0.25rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #f2f2f5;
    font: 0.8rem var(--st-font-body);
}
.tp-vastaanottaja-kuva { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255,255,255,0.12) center / cover no-repeat; }
.tp-vastaanottaja-pois {
    width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: rgba(255,255,255,0.6); font-size: 0.92rem; line-height: 1; cursor: pointer;
}
.tp-useammalle {
    display: block;
    margin: 0.2rem auto 0;
    padding: 0.45rem 0.9rem;
    border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 999px;
    background: transparent;
    color: #f2f2f5;
    font: 0.82rem var(--st-font-body);
    cursor: pointer;
}

.chat-poista-muilta {
    display: block;
    margin: -0.4rem 0 0.9rem auto;
    padding: 0.4rem 0.85rem;
    border: 1px solid #e5e7ea;
    border-radius: 999px;
    background: #fff;
    color: #b42318;
    font: 0.8rem var(--st-font-body);
    cursor: pointer;
}
.ok-vahvistus-kentta {
    width: 100%;
    box-sizing: border-box;
    margin: 0.2rem 0 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: #f2f2f5;
    font: 0.82rem/1.45 var(--st-font-body);
    resize: vertical;
}
.ok-vahvistus-kentta:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.chat-poista-muilta-valmis { margin: -0.4rem 0 0.9rem; text-align: right; color: #6b7280; font: 0.8rem var(--st-font-body); }

.spm-pending-role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0 0.3rem;
}
.spm-pending-role-name { color: #f2f2f5; font: 600 0.82rem var(--st-font-body); }
.spm-pending-role-withdraw {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(255, 120, 110, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #ff8a80;
    font: 0.8rem var(--st-font-body);
    cursor: pointer;
}

/* Gear-match result card ("kamera" search finding a "Minulta löytyy" item) —
   badge + owner line slot into the same .result-card layout as a person match. */
.result-card-gear-badge {
    /* Musta pilleri katosi tummalle kortille kokonaan — vaalea läpikuultava
       samaan tapaan kuin .result-card-aani. */
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--st-font-body);
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
}
.result-card-gear-owner {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    margin-top: 0.3rem;
    font-family: var(--st-font-body);
}

/* --- Double Slider --- */
.double-slider {
    position: relative;
    width: 100%;
    height: 32px;
}
.track {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    width: 100%;
    background: #aaa;
    transform: translateY(-50%);
    border-radius: 2px;
    z-index: 1;
}
.range-highlight {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #14161c;
    transform: translateY(-50%);
    border-radius: 2px;
    z-index: 2;
}
.double-slider input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 18px;
    margin: 0;
    transform: translateY(-50%);
    background: none;
    pointer-events: none;
    z-index: 3;
}
.double-slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}
.double-slider input[type="range"]::-moz-range-track {
    background: transparent;
}
.double-slider input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.double-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    position: relative;
    cursor: pointer;
}
.double-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
}
.double-slider input[type="range"]::-ms-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
}

/* --- Swipe View Styles --- */
#swipeContainer {
    flex-grow: 1;
    position: relative;
    margin: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    border-radius: 55px;
    touch-action: none;
    background-color:transparent;
    max-height:70%;
}
#columnContainer {
    overflow-y: auto;
    padding-bottom: 100px;
}
.card {
    position: relative;
    overflow:hidden;
    width: 90%;
    max-width: 25rem;
    height: 100%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    will-change: transform;
    transition: box-shadow 0.2s ease;
    cursor: grab;
    background: rgba(8, 11, 28);
}
.card:active {
    cursor: grabbing;
}
.card img {
    width: 100%;
    min-height: 100%;
    border-radius: 15px;
    object-fit: cover;
    margin-bottom: 1rem;
}
.info {
    margin-top: -8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info, .info-tab {
    flex-grow: 1;
    width: 100%;
    font-size: 1.6rem;
    color:white;
    overflow-y: auto;
    text-shadow:
            -0.06rem 0 black,
            0.06rem 0 black,
            0 -0.06rem black,
            0  0.06rem black,
            -0.06rem -0.06rem black,
            0.06rem -0.06rem black,
            -0.06rem  0.06rem black,
            0.06rem  0.06rem black;
}
.info-tab {
    display:none;
    position:absolute;
    background: rgba(11, 12, 31, 0.95);
    pointer-events: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0.8rem;
    font-size: 0.92rem;
    line-height: 1.3;
    z-index:999;
    height:100%;
    padding-left: 5rem;
    padding-top: 7rem;
    box-sizing: border-box;
}
.info-tab.visible {
    display: block;
    pointer-events: auto;
}
button.info-toggle, button.showreel-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    color: white;
    margin-top: 0.6rem;
    background: transparent;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    user-select: none;
    transition: background-color 0.3s ease;
}
button.nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 2.2rem;
    cursor: pointer;
    user-select: none;
    z-index: 20;
    transition: background-color 0.3s ease;
}
button.nav-btn:hover {
    background: rgba(0,0,0,0.5);
}
.button-row {
    display: flex;
    gap: 1rem;
}
#prevBtn { left: 1rem; }
#nextBtn { right: 1rem; }
.no-more {
    color: white;
    font-size: 1.25rem;
    text-align: center;
}

/* --- Projects Page (projects.html) --- */

/* Normal document-flow page (no fixed-height flex wrapper like Luo
   ammattikortti has) — needs its own bottom clearance so the last project
   card isn't covered by the fixed footer nav, or — on Omat once a project
   exists — by the fixed "+ Luo uusi projekti" bar sitting just above it.
   Sized for that larger case always; harmless extra space under the picker
   in the empty-list case since the picker sits near the top anyway. */
#projects-view { padding-bottom: 10.5rem; box-sizing: border-box; }

/* Fades to the page background behind the fixed add-bar, so it reads clearly
   over whichever card scrolls underneath instead of sitting flush on it.
   pointer-events:none so it never blocks a tap on a card peeking out above it. */

/* Full-width bar under the heading rather than a pill floating over the
   list. Creating a project is the page's primary action, and it was
   previously a small centred pill pinned above the bottom nav, where it
   competed with the nav for the same corner of the screen and looked like a
   secondary control. */
/* Outlined rather than solid white: the project cards below are white, so a
   filled bar read as one more card instead of the action that makes them.
   On the dark ground an outline separates action from content and still
   carries the page. */
.pjs-create-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Without border-box the padding is added to the width, which made the
       bar exactly full-bleed and cancelled the side margins. */
    box-sizing: border-box;
    width: calc(100% - 2rem);
    margin: 0.9rem auto 1.3rem;
    padding: 0.95rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 14px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: var(--st-font-body);
    /* It is an <a>, so the browser underlines it by default. */
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pjs-create-bar:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}
/* The plus as its own ringed mark rather than a character in the sentence —
   reads as a control, and keeps the label clean. */
.pjs-create-bar-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    font-size: 0.92rem;
    line-height: 1;
    padding-bottom: 0.08rem;
    font-weight: 400;
}

/* Header — same crisp, lowered, Helvetica-narrow treatment used across the
   rest of the app (cf. .np-header-title) rather than the old huge default
   bold <h1>. Tabs sit above it, also restyled; active state is still
   toggled via inline style.fontWeight from renderProjects() in spa.js, this
   just gives the resting state a less default-Arial-link look. */
/* Starts lower than the other views: the Stormi Assistant bar is fixed over
   the top of every page, and at 4.4rem the tabs sat barely a finger's width
   under it. */
.pjs-header {
    position: relative;
    padding: 5.3rem 1rem 0.4rem;
    text-align: center;
    color: #fff;
}
/* Sulku vasempaan ylänurkkaan, otsikon tasalle. Sama lasinen ympyrä kuin
   muidenkin sivujen paluunapeissa. */
.pjs-sulje {
    position: absolute;
    left: 1rem;
    top: 4.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 32 px oli rajalla; sulkunappi on paikka, jossa ohi osuminen
       tarkoittaa että käyttäjä jää jumiin näkymään. */
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font: 400 1.25rem/1 var(--st-font-body);
}
.pjs-sulje:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pjs-sulje:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Sivun nimi välilehtien yläpuolella. Sama kohtelu kuin muiden sivujen
   yläotsikoilla (vrt. .ok-tumma .np-header-title): sivu on nyt nimetty
   paikka, ja Profiilin palkki lupaa sen nimen — ilman otsikkoa nimi katoaisi
   heti kun sinne saapuu. */
.pjs-title {
    margin: 0 0 0.55rem;
    color: #8a8f9a;
    font: 700 0.75rem/1.2 'Arial Black', var(--st-font-body);
    letter-spacing: 0.099em;
    text-transform: uppercase;
}
/* A real segmented control. Two text links either side of a pipe read as a
   caption rather than as the page's main switch, and there was nothing to
   tell you the inactive one could be pressed. */
.pjs-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
    padding: 0.22rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}
.pjs-tab {
    display: block;
    padding: 0.42rem 1.15rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.pjs-tab:hover { color: rgba(255, 255, 255, 0.85); }
.pjs-tab { position: relative; display: flex; align-items: center; justify-content: center; }
.pjs-tab .pjs-tab-merkki { position: static; display: inline-flex; margin-left: 0.35rem; vertical-align: 1px; box-shadow: none; }
.pjs-tab-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 600;
}
.project-list {
    padding: 1rem 1rem 0.5rem;
}
.project-card {
    color: rgba(255,255,255,0.55);
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    padding: 1.5rem 1rem;
    cursor: default;
}

/* First-visit empty state — see pjsEmptyState's markup comment in spa.html.
   Hidden by default; renderProjects() toggles it (display:none inline ↔
   nothing) in lockstep with .pjs-picker-row right below it. */
.pjs-empty-state {
    display: none;
    width: 88%;
    max-width: 22rem;
    margin: 2.4rem auto 0;
    text-align: center;
    /* .content applies letter-spacing:-0.18rem for the Arial Black display font
       (css/filkka.css); reset it here (inherits to the title/desc/hint below)
       so this empty state isn't cramped when reused inside a .content view
       (e.g. Etsi's Avoimet haut tab) that the original Projektit view doesn't. */
    letter-spacing: normal;
}
.pjs-empty-title {
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.7rem;
}
.pjs-empty-desc {
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 1rem;
}
/* Tiivistetty esittely listan yllä (#pjsIntro). Sama sävy ja paino kuin
   tyhjän tilan .pjs-empty-hintillä, mutta oma sääntö: tämä elää sivun
   yläreunassa välilehtien alla eikä paneelin sisällä, joten marginaalit
   ovat eri. */
.pjs-intro {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.4;
    margin: 0 1rem 0.8rem;
}
.pjs-empty-hint {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
}
/* Confirm-style CTA — same white-bar footprint as .pjs-picker-row right
   below it, so revealing the picker in its place doesn't jump the layout. */
.pjs-empty-cta {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 1.6rem auto 0;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.95rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #14161c;
    text-align: center;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.pjs-empty-cta:hover { opacity: 0.9; }

/* .np-type-tab/.np-type-tab-active (defined further below) is otherwise only
   used on light (.np-view-light) form backgrounds, where the dark active
   fill reads clearly. Etsi's Avoimet haut tab is the one dark-background
   user of this shared toggle, so it needs its own inverted colors — bright
   fill for the active tab, same white/dark language as .pjs-empty-cta above
   — instead of a dark-on-dark active state that barely stood out. */
#avoinHakuJobsToggle .np-type-tab {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
}
#avoinHakuJobsToggle .np-type-tab-active {
    background: #fff;
    border-color: #fff;
    color: #14161c;
}

/* Shared first-visit empty state for the profile stat-card sheets (Lokaatiot
   svLocList, Kalusto svGearList, ...) — reuses .pjs-empty-* above (same
   dark-background look), but renders inside the sheet's own flex:1 list
   area so this wrapper can center it there instead of trailing it below an
   empty list. See renderLocSheet()/renderGearCatalog() in js/spa.js. */
.sv-empty-wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.loc-empty-link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Create-project picker — same shape as Luo ammattikortti's profession
   picker (input + browse icon), but as a white bar floating on this view's
   dark background rather than a bordered field on a white one (matching
   the search bar elsewhere in the app). Always visible on Omat: centered
   alone when the list is empty, sitting under it once projects exist. */
.pjs-picker-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 88%;
    max-width: 22rem;
    margin: 1.6rem auto 0;
}
.pjs-category-input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    color: #14161c;
    box-sizing: border-box;
}
.pjs-category-input::placeholder { color: #9aa0ab; }
.pjs-category-input:focus { outline: none; }
.pjs-browse-btn {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pjs-browse-btn svg { width: 16px; height: 16px; fill: none; stroke: #6b7280; stroke-width: 1.6; }
.pjs-browse-btn:hover { opacity: 0.85; }
.pjs-category-suggestions {
    width: 88%;
    max-width: 22rem;
    margin: 0.5rem auto 0;
    border-radius: 10px;
    overflow: hidden;
}
.pjs-category-suggestion {
    background: #fff;
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 300;
    color: #14161c;
    font-family: var(--st-font-body);
    border-bottom: 1px solid #e5e7ea;
    cursor: pointer;
}
.pjs-category-suggestion:last-child { border-bottom: none; }
.pjs-category-suggestion:hover { background: #f2f2f5; }
/* --- New Project Form extras --- */
.np-section-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.np-roles-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.5rem;
}
.np-role-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 1rem;
    padding: 0.25rem 0.1rem;
    outline: none;
    width: 130px;
}
.np-role-input::placeholder { color: rgba(255,255,255,0.5); }
.np-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
}
.np-pill-label {
    color: white;
    font-size: 0.8rem;
}
.np-pill-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.np-pill-remove:hover { color: #ff6b6b; }
.np-add-role-btn {
    margin-top: 0.6rem;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
}
.np-add-role-btn:hover { border-color: white; color: white; }

/* Tiimi's "+ Lisää rooli" mini-form — name input + "Tarjoa roolia" icon
   button on one row (reuses .np-picker-row/.np-browse-btn), description
   textarea below. */
.np-role-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.4rem;
}
.np-role-add-form .np-picker-row { max-width: none; }
.np-role-add-form .np-role-input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    width: auto;
}
.np-role-desc-input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    color: white;
    font-size: 0.82rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    resize: vertical;
    min-height: 3rem;
}
.np-role-desc-input::placeholder { color: rgba(255,255,255,0.5); }
.np-role-desc-input:focus { outline: none; border-color: rgba(255,255,255,0.7); }

/* Roolit — .np-role-pill/.np-add-role-btn are shared with the (still
   dark-themed) location form, so override rather than edit the shared rule.
   Only Tiimi's own pills reopen for editing on click (Tuotantoyhtiö/
   Levitysyhtiö/Kausi pills elsewhere reuse the same class but aren't
   editable), so the pointer cursor is scoped to #rolesContainer. */
#rolesContainer .np-role-pill { cursor: pointer; }
.np-view-light .np-roles-pills { max-width: 19rem; margin: 0 auto; }
.np-view-light .np-role-add-form { max-width: 19rem; margin: 0.4rem auto 0; }
.np-view-light .np-role-add-form .np-role-input,
.np-view-light .np-role-desc-input {
    border-color: #d8dade;
    color: #14161c;
}
.np-view-light .np-role-desc-input::placeholder { color: #a8acb5; }
/* Projektilomake on nykyään tumma (ok-tumma): vaalean teeman tumma teksti
   (#14161c) voitti tarkemmalla valitsimella, ja roolikenttään kirjoitettu
   teksti oli mustaa tummalla (palaute 10.10.2026). */
.ok-tumma .np-role-add-form .np-role-input,
.ok-tumma.np-view-light .np-role-desc-input {
    border-color: var(--ok-viiva);
    color: var(--ok-teksti);
}
.ok-tumma .np-role-add-form .np-role-input::placeholder,
.ok-tumma.np-view-light .np-role-desc-input::placeholder { color: #8a8f9a; }
.np-role-tarjoa {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0 0.9rem;
    font: 600 0.85rem/1 var(--st-font-body);
    letter-spacing: normal;
}
.np-view-light .np-role-add-form .np-role-input:focus,
.np-view-light .np-role-desc-input:focus { border-color: #8a8f9a; }
.np-view-light .np-role-input {
    border-bottom-color: #d8dade;
    color: #14161c;
}
.np-view-light .np-role-input::placeholder { color: #a8acb5; }
.np-view-light .np-role-pill {
    background: #f2f2f5;
    border-color: #e5e7ea;
}
.np-view-light .np-pill-label { color: #14161c; }
.np-view-light .np-pill-remove { color: #a8acb5; }
.np-view-light .np-pill-remove:hover { color: #b04545; }
.np-view-light .np-add-role-btn {
    display: block;
    max-width: 19rem;
    margin: 0.6rem auto 0;
    border-color: #d8dade;
    color: #6b7280;
}
.np-view-light .np-add-role-btn:hover { border-color: #a8acb5; color: #14161c; }

/* --- Location tunnisteet (use-case tags) --- */
/* Toggle chips: suggestions in the create/edit form and the Lokaatioita filter row. */
.loc-tunniste-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.loc-tunniste-chip {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}
.loc-tunniste-chip:hover { border-color: white; color: white; }
.loc-tunniste-chip.active {
    background: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
    color: #1a1a2e;
    font-weight: 700;
}
.np-view-light .loc-tunniste-suggestions { max-width: 19rem; margin-left: auto; margin-right: auto; margin-bottom: 0.6rem; }

/* Kategoriat's fully-collapsed-by-default state (see
   #kategoriaSuggestionsWrap/#kategoriaExpandBtn/#kategoriaMuuBtn in
   spa.html) — max-height:0 hides the whole chip grid (plus the Muu bar and
   its custom-input row) until the chevron is tapped. */
.loc-kategoria-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.loc-kategoria-wrap.loc-kategoria-expanded {
    /* Was 40rem — too small for the real ~60-chip vocabulary plus the Muu
       bar/input, which silently clipped the last several rows with no way
       to reach them (overflow:hidden hides them, it doesn't scroll them).
       This has to stay comfortably larger than that real content, not just
       "look big enough" in a spot check. */
    max-height: 100rem;
}
.loc-kategoria-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 19rem;
    margin: 0.3rem auto 0.3rem;
    padding: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #8a8f9a;
}
.loc-kategoria-expand-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}
.loc-kategoria-expand-btn.loc-kategoria-expand-btn-open svg {
    transform: rotate(180deg);
}
/* "Muu" — the widest bar, spanning the full row below the chip grid rather
   than sitting inline as another small pill (see .loc-tunniste-chip above). */
.loc-kategoria-muu-btn {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0.5rem auto 0;
    background: none;
    border: 1px dashed #c7cbd2;
    border-radius: 12px;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.6rem;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.loc-kategoria-muu-btn:hover { border-color: #a8acb5; color: #14161c; }
.loc-kategoria-custom-row {
    max-width: 19rem;
    margin: 0.5rem auto 0;
}
.np-view-light .loc-tunniste-chip {
    border-color: #d8dade;
    color: #6b7280;
}
.np-view-light .loc-tunniste-chip:hover { border-color: #a8acb5; color: #14161c; }
.np-view-light .loc-tunniste-chip.active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}
/* Search filter row: horizontally scrollable chip strip. */
/* Read-only display tags on result cards and the info modal. */
.loc-tunniste-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.loc-tunniste-tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    /* Vaaleansininen tarra hyppäsi tummalta kortilta silmille kovemmin kuin
       lokaation nimi. Hillitty läpikuultava pilleri pitää järjestyksen:
       nimi ensin, tunnisteet tukena. */
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.16);
    white-space: nowrap;
}
/* Step 1 — an empty, centered black screen: just the picker bar + a browse
   icon that opens the category-grouped panel. */
/* "Luo ammattikortti" — white theme, thin/light type, generous air.
   Deliberately breaks from the app's dark theme for this one flow. */
/* flex-shrink: 0 (käyttäjä 11.10.2026): body on ruudun korkuinen
   flex-sarake, ja sivu kutistui ruudun korkuiseksi sisällön valuessa sen
   yli — pitkällä sivulla (avoimen haun kuvaus) sivun tausta loppui kesken
   ja alta näkyi eri sävy. Tietokoneella sama tehtiin jo osalle näkymistä
   (css/tyopoyta.css). */
.np-view-light { background: #fff; min-height: 100vh; flex-shrink: 0; }
.np-view-light main { background: #fff; }

.np-header {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    padding: 3.4rem 1rem 1rem;
    box-shadow: 0 1px 0 #e5e7ea;
    display: grid;
    grid-template-columns: 2.05rem 1fr 2.05rem;
    align-items: center;
    column-gap: 0.6rem;
}
.np-back-btn {
    grid-column: 1;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.np-back-btn svg { width: 14px; height: 14px; fill: none; stroke: #14161c; stroke-width: 2; }

/* Direct "Avaa chat" action on a hakemus row (initAvoinHakuHakemuksetView /
   initJobApplicantsView, js/spa.js) — same light circular icon-button look
   as .np-back-btn, not .conv-star (that one's stroke is near-white, meant
   for the dark #messages-view background, invisible on this light card row). */
.ahh-chat-btn {
    align-self: center;
    flex-shrink: 0;
    width: 2.05rem;
    height: 2.05rem;
    margin-right: 0.8rem;
    border-radius: 50%;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ahh-chat-btn svg { width: 16px; height: 16px; stroke: #14161c; }
.ahh-valitse { align-self: center; flex-shrink: 0; width: 2.05rem; height: 2.05rem; margin-right: 0.45rem; }
.ahh-valitse svg { width: 14px; height: 14px; }
.ahh-tarjoa-ohje { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0 0 0.8rem; color: #4b5260; font: 0.82rem/1.35 var(--st-font-body); }
.ahh-valitse-kaikki { flex-shrink: 0; padding: 0.4rem 0.85rem; border: 1px solid #d8dade; border-radius: 999px; background: #fff; color: #14161c; font: 0.82rem var(--st-font-body); cursor: pointer; }
/* Tarjouskori bar stays out of the way of the chat composer. */
body.chat-open .tarjous-kori { display: none; }
body:has(#tarjousKoriPalkki) #avoinhakuhakemukset-view .np-main { padding-bottom: 10rem !important; }
.np-header-title {
    grid-column: 2;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    color: #6b7280; /* vaalea lomakepohja: #8a8f9a jäi 3,2:1:een */
    margin: 0;
}

.np-picker-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
}
.np-type-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}
.np-type-tab {
    background: none;
    border: 1px solid #d8dade;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    color: #8a8f9a;
    cursor: pointer;
}
.np-type-tab-active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}
.np-picker-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 19rem;
}
.np-browse-btn {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: none;
    border: 1px solid #d8dade;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.np-browse-btn:hover { border-color: #a8acb5; }
.np-browse-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #6b7280;
    stroke-width: 1.6;
}

/* Profession picker — thin-bordered input + typeahead suggestions from the
   controlled vocabulary (profiili_tyypit); once picked, shown "locked". */
.np-profession-input {
    display: block;
    width: 100%;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid var(--np-kentta-reuna);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: var(--np-kentta-teksti);
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
}
.np-profession-input::placeholder { color: #a8acb5; }
.np-profession-input:focus { outline: none; border-color: #8a8f9a; }
.np-profession-suggestions {
    max-width: 19rem;
    width: 100%;
    margin: 0.5rem auto 0;
}
.np-profession-suggestion {
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 300;
    color: #14161c;
    font-family: var(--st-font-body);
    border: 1px solid #e5e7ea;
    border-top: none;
    cursor: pointer;
}
.np-profession-suggestion:first-child { border-top: 1px solid #e5e7ea; border-radius: 10px 10px 0 0; }
.np-profession-suggestion:last-child { border-radius: 0 0 10px 10px; }
.np-profession-suggestion:hover,
.np-profession-suggestion.np-ehdotus-valittu { background: #f2f2f5; }
.np-profession-chosen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    max-width: 19rem;
    margin: 1.6rem auto 0;
}
.np-profession-chosen-name {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    color: #14161c;
}
.np-profession-change {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: #8a8f9a;
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.np-profession-change:hover { color: #14161c; }

/* Sijainti's Lääni/Kaupunki typeahead — floats over the fields below it
   instead of pushing them down like .np-profession-suggestions does, so
   picking through a few keystrokes of results doesn't reflow/bounce the
   whole page underneath it. */
.np-sijainti-suggest-wrap {
    position: relative;
    max-width: 19rem;
    margin: 0 auto;
}
.np-sijainti-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    max-height: 12rem;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(20,22,28,0.12);
    border-radius: 10px;
}
.np-sijainti-suggestions:empty { box-shadow: none; }

/* Magnifying-glass button sitting inside the Sijainti search input (Luo
   projekti), absolutely positioned at the input's right edge. */
.np-paikka-browse-btn {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.np-paikka-browse-btn:hover { background: #f0f1f3; }
.np-paikka-browse-btn svg {
    width: 16px;
    height: 16px;
    stroke: #6b7280;
}

/* Section headers inside the expanded form — narrow/condensed font, lots of
   air above each one, matching the Profiili page's own section labels. */
.np-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    color: #6b7280; /* vaalea lomakepohja: #8a8f9a oli 3,2:1 */
    text-align: center;
    margin-top: 2.6rem;
    margin-bottom: 0.8rem;
    transform: scaleX(0.92);
}
.np-section-label:first-of-type { margin-top: 1.2rem; }

/* Sits right under the header, closer than a regular first section label. */
#pjCategoryChosen.np-section-label { margin-top: 0.2rem; }
/* ...and the rest of the form starts further down from it, instead of
   moving the category label itself any closer to the header. */
#pjFormBody > .np-section-label:first-of-type { margin-top: 3.4rem; }

/* Vaaleat näkymät palauttavat kenttien vaaleat arvot. :not(.ok-tumma),
   koska yksitoista tummaa lomakenäkymää kantaa yhä np-view-light-luokkaa
   sen asetteluSääntöjen takia — luokan nimi ei enää kerro pinnan väriä. */
.np-view-light:not(.ok-tumma) {
    --np-kentta-teksti: #14161c;
    --np-kentta-reuna: #d8dade;
    --np-kentta-reuna-aktiivi: #8a8f9a;
    --np-kentta-vihje: #a8acb5;
}

.np-field-input {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
    background: transparent;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: #14161c;
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
}
.np-field-input::placeholder { color: var(--np-kentta-vihje); }
.np-field-input:focus { outline: none; border-color: var(--np-kentta-reuna-aktiivi); }

/* Cast & Crew bar (Elokuva/TV-sarja/Musiikkivideo/Tapahtuma forms) — same
   visual language as .np-field-input (border/radius/padding/font) instead of
   the profile page's .sv-stat-card, which carries the app's bold Arial Black
   display font meant for a big stat number, not a clickable sentence. */
.np-cast-crew-bar {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0.6rem auto 0;
    background: transparent;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: #14161c;
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
.np-cast-crew-bar:hover { border-color: #8a8f9a; }

/* Vaalean sivun ilmoituslohko. Luokat jäivät tänne vanhalta
   työpaikkasivulta, joka poistui 2026-09-28; nyt niitä käyttää
   #avoinhaku-view. Oma pieni sarjansa, koska .spm-* (searchProfileModal) on
   vain tummalle taustalle. */
.jp-hero {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #e5e7ea;
    background-size: cover;
    background-position: center;
}
.jp-title {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: #14161c;
    margin: 0;
}
.jp-company {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.3rem;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.jp-company:hover { color: #14161c; text-decoration: underline; }
.jp-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e5e7ea;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}
.jp-info-row:last-child { border-bottom: none; }
.jp-info-label { color: #6b7280; }
.jp-info-value { color: #14161c; font-weight: 500; }
/* The one chosen card in the job-apply sheet (see jpMyCardsChosen in
   spa.html) — deliberately more prominent than a plain .np-invite-search-item
   row (bigger photo, checkmark, accent border) since this is the one thing
   the applicant most needs to double-check before sending. */
.jp-chosen-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #fff;
    border: 2px solid #14161c;
    border-radius: 12px;
}
.jp-chosen-card-photo {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #e5e7ea center/cover no-repeat;
    flex-shrink: 0;
}
.jp-chosen-card-body { flex: 1; min-width: 0; }
.jp-chosen-card-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #14161c;
    font-family: var(--st-font-body);
}
.jp-chosen-card-sub {
    font-size: 0.8rem;
    color: #6b7280;
    font-family: var(--st-font-body);
    margin-top: 0.1rem;
}
.jp-chosen-check {
    width: 22px;
    height: 22px;
    color: #14161c;
    flex-shrink: 0;
}

.jp-kuvaus {
    font-family: var(--st-font-body);
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #14161c;
    white-space: pre-wrap;
}

/* #avoinhaku-view on 11.10.2026 alkaen tumma (.ok-tumma), kuten muut
   lomakesivut; yllä olevat värit ovat vanhan vaalean sivun. Vaalea teema
   tulee html.teema-kaannetty-kääntäjältä, joten tähän riittää tumma versio. */
#avoinhaku-view.ok-tumma .jp-hero { background-color: #1a1d26; }
#avoinhaku-view.ok-tumma .jp-title { color: var(--ok-teksti); }
#avoinhaku-view.ok-tumma .jp-company { color: var(--ok-himmea); }
#avoinhaku-view.ok-tumma .jp-company:hover { color: var(--ok-teksti); }
#avoinhaku-view.ok-tumma .jp-kuvaus { color: var(--ok-teksti); opacity: 0.88; }
#avoinhaku-view.ok-tumma .jp-info-row { border-bottom-color: var(--ok-viiva); }
#avoinhaku-view.ok-tumma .jp-info-label { color: var(--ok-himmea); }
#avoinhaku-view.ok-tumma .jp-info-value { color: var(--ok-teksti); }
#avoinhaku-view.ok-tumma .jp-chosen-card { background: var(--ok-lasi); border-color: var(--ok-teksti); }
#avoinhaku-view.ok-tumma .jp-chosen-card-photo { background-color: #1a1d26; }
#avoinhaku-view.ok-tumma .jp-chosen-card-name,
#avoinhaku-view.ok-tumma .jp-chosen-check { color: var(--ok-teksti); }
#avoinhaku-view.ok-tumma .jp-chosen-card-sub { color: var(--ok-himmea); }
.np-field-hint {
    font-size: 0.75rem;
    font-weight: 300;
    color: #6b7280; /* vaalea lomakepohja: #a8acb5 oli 2,3:1 */
    font-family: var(--st-font-body);
    margin-top: 0.4rem;
    line-height: 1.3;
}

/* Luo ammattikortti's type-picker intro — explains what an ammattikortti is
   and how Yksilö/Ryhmä/Yritys differ, above the search bar. Same two-tier
   weight as Projektit's .pjs-empty-desc/.pjs-empty-hint, recolored for this
   view's light background. */
.np-picker-intro {
    max-width: 19rem;
    margin: 0 auto 0.8rem;
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.5;
    color: #14161c;
}
.np-picker-intro-muted {
    color: #8a8f9a;
    font-size: 0.8rem;
}
/* Locked Yritys tab (see npApplyYritysLock) — dimmed, not clickable-looking. */
.np-type-tab-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Luo projekti's Ajankohta — exact dates vs. a plain day-count, same pill
   toggle language as .sfm-toggle. */
.np-ajankohta-tabs {
    display: flex;
    gap: 0.5rem;
    max-width: 19rem;
    margin: 0 auto 0.6rem;
}
.np-ajankohta-tab {
    flex: 1;
    padding: 0.5rem 0.4rem;
    border-radius: 10px;
    border: 1px solid #d8dade;
    background: #fff;
    color: #14161c;
    font-size: 0.8rem;
    font-weight: 300;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.np-ajankohta-tab-active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}

/* Free-text sections (Palkkaus, Esittely, ...) get a much taller box so
   several lines are visible at once, not a single collapsed line. */
.np-field-textarea {
    display: block;
    width: 100%;
    max-width: 19rem;
    min-height: 7rem;
    margin: 0 auto;
    background: transparent;
    border: 1px solid var(--np-kentta-reuna);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    color: var(--np-kentta-teksti);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    resize: vertical;
}
.np-field-textarea::placeholder { color: var(--np-kentta-vihje); }
.np-field-textarea:focus { outline: none; border-color: var(--np-kentta-reuna-aktiivi); }

/* Tässä oli ennen .sv-cards-sheetin oma ylikirjoitus, joka teki kentistä
   luettavia tummalla arkilla. Se ei ole enää tarpeen: kenttien oletus on
   tumma (--np-kentta-* , css/filkka.css). Juuri tällaisia ylikirjoituksia
   oli kirjoitettu yksi kerrallaan sitä mukaa kun tumma pinta löytyi. */

/* Plain <select> styled to match .np-field-input — used by edituser (Kieli,
   Syntymäaika, Sukupuoli, Lääni) where the field stays a real select since
   its option list isn't changing, just the visual theme around it. */
.np-field-select {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
    background-color: transparent;
    border: 1px solid var(--np-kentta-reuna);
    border-radius: 10px;
    padding: 0.7rem 2.1rem 0.7rem 0.9rem;
    color: var(--np-kentta-teksti);
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%238a8f9a'/%3E%3C/svg%3E");
    background-position: calc(100% - 1rem) center;
    background-size: 0.6rem 0.42rem;
    background-repeat: no-repeat;
}
.np-field-select:focus { outline: none; border-color: var(--np-kentta-reuna-aktiivi); }
.np-field-select:invalid { color: var(--np-kentta-vihje); }
/* Three selects share one row (edituser's Syntymäaika) — less padding and a
   tighter arrow so "Päivä" etc. isn't clipped in the narrowest (flex:1) one. */
.np-field-row .np-field-select {
    padding: 0.7rem 1.5rem 0.7rem 0.7rem;
    font-size: 0.92rem;
    background-position: calc(100% - 0.65rem) center;
}

/* Circular avatar upload — edituser's light-theme equivalent of the old
   dark dashed-circle picker. */
.eu-avatar-picker {
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0.2rem auto 1.8rem;
    cursor: pointer;
    position: relative;
    /* No overflow:hidden here — the edit badge is a sibling of the clipped
       circle below, not a child of it, so its own circle never gets cut off
       by the avatar's round mask (it used to, when both shared one
       overflow:hidden box). */
}
.eu-avatar-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px dashed #d8dade;
    background: #f2f2f5;
    overflow: hidden;
}
.eu-avatar-picker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eu-avatar-placeholder {
    color: #a8acb5;
    font-size: 0.75rem;
    text-align: center;
    padding: 0 0.6rem;
    font-family: var(--st-font-body);
}
.eu-avatar-edit-badge {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #14161c;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.eu-avatar-edit-badge svg { width: 13px; height: 13px; color: #fff; }

/* Required-field marker — sits just outside the bar's upper-left corner
   instead of being appended to the section heading, since a heading often
   covers optional fields too (e.g. "Kieliosaaminen" also has optional
   extra-language rows below the required Äidinkieli bar). Every .eu-req
   wraps exactly one required bar (or row of bars) and carries one star.
   The wrapper itself needs the same max-width/centering as the bar it
   holds — without it, .eu-req-star's "left" was relative to the full,
   unconstrained form width instead of the actual 19rem-wide bar, so the
   star floated in the page margin at a different offset from the bar on
   every field instead of sitting right at its corner. */
.eu-req {
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
}
.eu-req-star {
    position: absolute;
    top: -0.7rem;
    left: 0.1rem;
    color: #b04545;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    line-height: 1;
    pointer-events: none;
}

/* For a handful of sections (Perustiedot, Yhteystiedot, Syntymäaika,
   Kansalaisuus, Sijainti, Kieliosaaminen) the star sits beside the section
   heading itself instead of the field below it — same 19rem-wide centered
   column as .eu-req so it lines up with the field's own left edge, just
   vertically centered on the heading's text instead of floating above a box. */
.eu-heading-req {
    position: relative;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
}
.eu-heading-star {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #b04545;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    line-height: 1;
    pointer-events: none;
}

/* Kerro itsestäsi / Haluaisin — used to be noticeably smaller than the
   other .np-field-textarea uses, but anything under 16px makes iOS Safari
   auto-zoom on focus, so this can't go below 1rem either. */
.eu-small-textarea { font-size: 1rem !important; }

/* Small persistent label above a field — unlike a placeholder, stays
   visible once the field has real content (e.g. Kerro itsestäsi/Haluaisin,
   which used to rely on their placeholder alone as a de-facto heading). */
.eu-field-label {
    max-width: 19rem;
    margin: 0 auto 0.35rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #6b7280;
    font-family: var(--st-font-body);
}

/* Kielet — one extra-language row per known language beyond Äidinkieli,
   added one at a time via the pale "+ Lisää kieli" link below them. */
.eu-lang-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 19rem;
    margin: 0.6rem auto 0;
}
.eu-lang-row .np-field-select { max-width: none; margin: 0; flex: 1; }
.eu-lang-row .eu-lang-level-select {
    flex: 0 0 7.6rem;
    padding: 0.7rem 1.5rem 0.7rem 0.6rem;
    font-size: 0.8rem;
    background-position: calc(100% - 0.65rem) center;
}

/* valintaNapeiksi(): alkuperäinen valikko jää lomakkeeseen arvon pitäjäksi
   mutta ei näy eikä ota painalluksia — napit tekevät valinnan. */
.valinta-napit-lahde {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.valinta-napit { max-width: 26rem; margin: 0.4rem auto 0; justify-content: center; }
.valinta-napit-otsikko {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--ok-himmea, #6b7280);
}
.eu-lang-row.eu-kieli-rivi .valinta-napit-otsikko { margin-top: 0; }
.eu-lang-row.eu-kieli-rivi .valinta-napit + .valinta-napit-otsikko { margin-top: 0.7rem; }
/* Lisäkielen rivi napeilla: kieli, taso ja poisto allekkain eikä rinnakkain. */
.eu-lang-row.eu-kieli-rivi {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    max-width: 26rem;
    margin-top: 1rem;
    padding: 0.8rem 2.4rem 0.8rem 0.8rem;
    border: 1px solid var(--ok-viiva, #e5e7ea);
    border-radius: 14px;
}
.eu-lang-row.eu-kieli-rivi .valinta-napit { margin: 0.4rem 0 0; }
.eu-lang-row.eu-kieli-rivi .eu-lang-remove { position: absolute; top: 0.6rem; right: 0.6rem; }

/* Oppilaitos rows are free text (any institution can be typed, even one not
   yet in Stormi) with a suggestions dropdown for known institutions —
   reuses .sfm-suggestions/.sfm-suggestion styling from the Rajaa hakua
   typeahead fields. */
.eu-school-input-wrap { position: relative; flex: 1; min-width: 0; }
.eu-lang-row .eu-school-input-wrap .np-field-input { max-width: none; margin: 0; }
.eu-lang-remove {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid #e5e7ea;
    background: none;
    color: #a8acb5;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--st-font-body);
}
.eu-lang-remove:hover { color: #b04545; border-color: #e5b8b8; }
.eu-add-language-btn {
    display: block;
    width: fit-content;
    margin: 0.8rem auto 0;
    background: none;
    border: none;
    padding: 0;
    color: #c3c7cd;
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    cursor: pointer;
    text-align: center;
}
.eu-add-language-btn:hover { color: #8a8f9a; }

/* Freelancer/Yrittäjä — mutually exclusive pills (like the Etsi category
   pills), neither selected by default since neither is required. */
.eu-work-toggles {
    display: flex;
    gap: 0.5rem;
    max-width: 19rem;
    margin: 0.7rem auto 0;
}
/* Viisi hintahaarukkaa ei mahdu yhdelle riville: yhdellä rivillä "Alle 500 €"
   taittui kolmelle riville ja pillereistä tuli pystysuuntaisia tolppia.
   Rivitetään ja annetaan kunkin olla sisältönsä levyinen, kuten muissakin
   Stormin valintasiruissa. */
.np-valinta-haarukat {
    flex-wrap: wrap;
    justify-content: center;
}
.np-valinta-haarukat .eu-work-toggle {
    flex: 0 0 auto;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
}

.eu-work-toggle {
    flex: 1;
    background: none;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.6rem;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.eu-work-toggle:hover { border-color: #8a8f9a; }
.eu-work-toggle.active { background: #14161c; border-color: #14161c; color: #fff; }

/* Hiusten väri + its "Kalju" toggle sit on one row — ticking Kalju dims and
   disables the color field instead of clearing it silently, so re-toggling
   it off brings back whatever was typed before. */
.eu-hair-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 19rem;
    margin: 0.7rem auto 0;
}
.eu-hair-row .np-field-input { max-width: none; margin: 0; flex: 1; min-width: 0; }
.eu-hair-row .np-field-input:disabled { opacity: 0.4; }
.eu-bald-toggle {
    flex: 0 0 auto;
    background: none;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    cursor: pointer;
    white-space: nowrap;
}
.eu-bald-toggle:hover { border-color: #8a8f9a; }
.eu-bald-toggle.active { background: #14161c; border-color: #14161c; color: #fff; }

/* Sähköposti/Salasana — locked-looking bar (matches the always-disabled
   email input) with a pencil icon that reveals an inline "confirm current
   password, then set the new value" form, rather than a separate modal. */
.eu-credential-row {
    max-width: 19rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.eu-credential-row .np-field-input { max-width: none; margin: 0; flex: 1; }
.eu-credential-edit-btn {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid #d8dade;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eu-credential-edit-btn:hover { border-color: #8a8f9a; color: #14161c; }
.eu-credential-edit-btn svg { width: 15px; height: 15px; }
.eu-credential-form {
    max-width: 19rem;
    margin: 0.6rem auto 0;
    padding: 0.9rem;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    border-radius: 12px;
}
.eu-credential-form .np-field-input { max-width: none; background: #fff; }
.eu-credential-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}
.eu-credential-cancel, .eu-credential-confirm {
    flex: 1;
    border-radius: 8px;
    padding: 0.55rem;
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.eu-credential-cancel { background: none; border: 1px solid #d8dade; color: #6b7280; }
.eu-credential-confirm { background: #14161c; border: none; color: #fff; font-weight: 700; }
.eu-credential-msg { font-size: 0.8rem; color: #b04545; margin-top: 0.6rem; font-family: var(--st-font-body); }
.eu-credential-msg.success { color: #2e7d4f; }

/* This used to shrink text on #edituser-view only, but 0.92rem (14.7px) is
   under the 16px iOS Safari needs to not auto-zoom a focused field — same
   reason .np-field-input/.np-field-select stay at 1rem everywhere else. */
#edituser-view .np-field-input,
#edituser-view .np-field-select {
    font-size: 1rem;
}

/* Every section heading gets the exact same gap above and below, instead of
   each one carrying its own inline margin override (which had drifted to
   several different values — 1.4rem here, the 2.6rem base there — making
   some fields visually closer to the next heading than others). */
#edituser-view .np-section-label {
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
}

/* Erityisosaaminen — type + Enter to add a hashtag chip */
.np-skills-input { max-width: 19rem; margin: 0 auto; }
.np-skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}
.np-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #d8dade;
    border-radius: 20px;
    padding: 0.28rem 0.6rem 0.28rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 300;
    color: #14161c;
    font-family: var(--st-font-body);
}
.np-skill-chip button {
    background: none;
    border: none;
    color: #a8acb5;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.np-skill-chip button:hover { color: #14161c; }

/* Tarkenna alaasi — optional toggleable specialization chips shown right
   after picking an umbrella profession (Ohjaaja -> Elokuvaohjaaja/...).
   Filled when selected, outlined otherwise; whole section hides itself when
   the chosen profession has no listed specializations. */
.np-tarkenne-section { max-width: 19rem; margin: 0 auto 1.2rem; }
.np-tarkenne-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* "Muu, mikä?" -kenttä chippien alla (js/spa.js lkMuuKentta). Näkyy vasta
   kun chip on valittu, jottei tyhjä tekstikenttä roiku jokaisen kysymyksen
   alla. Ohje on kentän alla eikä placeholderissa: se kertoo mitä
   kirjoittamisesta seuraa, ja se pitää näkyä myös kirjoittaessa. */
.lk-muu {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem auto 0;
    max-width: 22rem;
    width: 100%;
}
.lk-muu-input { width: 100%; }
.lk-muu-ohje {
    color: var(--st-text-muted);
    font: 0.8rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    text-align: left;
}
.np-tarkenne-chip {
    border: 1px solid #d8dade;
    background: transparent;
    border-radius: 20px;
    padding: 0.32rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 300;
    color: #14161c;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.np-tarkenne-chip-active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}

/* Sosiaalinen media — repeatable platform + handle + followers rows */
.np-social-rows { max-width: 19rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.np-social-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.np-social-row select,
.np-social-row input {
    background: transparent;
    border: 1px solid #d8dade;
    border-radius: 8px;
    padding: 0.5rem 0.55rem;
    color: #14161c;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
}
.np-social-row select { flex: 0 0 6rem; }
.np-social-row input.np-social-handle { flex: 1.1; min-width: 0; }
.np-social-row input.np-social-followers { flex: 1; min-width: 0; }
.np-book-row input.np-book-nimi { flex: 1.6; min-width: 0; }
.np-book-row input.np-book-vuosi { flex: 0.6; min-width: 0; }
.np-book-row input.np-book-kustantamo { flex: 1; min-width: 0; }
.np-social-row-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a8acb5;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}
.np-social-row-remove:hover { color: #14161c; }
.np-add-row-btn {
    display: block;
    max-width: 19rem;
    margin: 0.7rem auto 0;
    background: none;
    border: 1px dashed #d8dade;
    border-radius: 10px;
    padding: 0.55rem;
    width: 100%;
    color: #8a8f9a;
    font-size: 0.8rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.np-add-row-btn:hover { border-color: #a8acb5; color: #14161c; background: #f2f2f5; }

/* Lokaatio yhteyshenkilöt — four fields per contact don't fit np-social-row's
   single line at 19rem, so each contact gets its own bordered card with a
   2-col grid and the remove button pinned top-right instead. */
.loc-contact-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    border: 1px solid #d8dade;
    border-radius: 10px;
    padding: 0.6rem 1.8rem 0.6rem 0.6rem;
}
.loc-contact-row input {
    background: transparent;
    border: 1px solid #d8dade;
    border-radius: 8px;
    padding: 0.5rem 0.55rem;
    color: #14161c;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    min-width: 0;
}
.loc-contact-row .loc-contact-nimi,
.loc-contact-row .loc-contact-rooli { grid-column: span 1; }
.loc-contact-remove {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
}

/* Hallinnoijat — co-managers on a Ryhmä/Yritys card, shown only once it
   exists (edit mode). Each row is a name + status pill + a remove/leave
   action on the right; inviting reuses the same name-search pattern as
   Etsi's inline user results. */
.np-managers-section { max-width: 19rem; margin: 0 auto; }
.np-managers-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.7rem; }
.np-manager-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
}
.np-manager-row-photo {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #e5e7ea;
    flex-shrink: 0;
    overflow: hidden;
}
.np-manager-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-manager-row-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 400;
    color: #14161c;
    font-family: var(--st-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-manager-row-status {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: #a8acb5;
}
.np-manager-row-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a8acb5;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem;
}
.np-manager-row-remove:hover { color: #b04545; }
.np-invite-search-results {
    max-height: 12rem;
    overflow-y: auto;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.np-invite-search-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    /* Explicit white, not "none" — this row's own text/border colors are
       dark-on-light, but it's used inside .sv-cards-sheet (Cast & Crew,
       job-apply "pick your own card"), which is dark. "none" let it
       inherit that dark ground and made the dark text unreadable. */
    background: #fff;
    text-align: left;
    width: 100%;
    font-family: var(--st-font-body);
}
.np-invite-search-item:hover { background: #f2f2f5; }
.np-invite-search-item.selected { border-color: #14161c; border-width: 2px; }
.np-invite-search-item-photo {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #e5e7ea;
    flex-shrink: 0;
    overflow: hidden;
}
.np-invite-search-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-invite-search-item-name { font-size: 0.82rem; color: #14161c; }
.np-invite-search-empty { font-size: 0.8rem; color: #a8acb5; padding: 0.4rem 0.2rem; }

/* Vahvistukset — reuses the app's existing toggle-switch look */
.np-consent-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 19rem;
    margin: 0 auto 1rem;
    cursor: pointer;
}
.np-consent-row .np-toggle-wrap { flex-shrink: 0; }
.np-pay-toggle-row { margin-top: 0.9rem; }
.np-consent-label {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.4;
    color: #4a4f5a;
    font-family: var(--st-font-body);
}
/* Two-line variant — a short title (e.g. "Julkinen projekti") plus a
   smaller muted caption explaining where it's shown, instead of one long
   run-on sentence. */
.np-consent-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 400;
    color: #14161c;
}
.np-consent-caption {
    display: block;
    font-size: 0.8rem;
    font-weight: 300;
    color: #a8acb5;
    margin-top: 0.2rem;
}

.np-submit-btn {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 2.6rem auto 0.8rem;
    background: #14161c;
    border: none;
    border-radius: 10px;
    padding: 0.85rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    cursor: pointer;
}
/* Tummilla asetusarkeilla tumma punainen jäi 3,4:1:een. */
.sv-gear-sheet .np-delete-btn { color: #ff8a7a; }
.np-delete-btn {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto 5rem;
    background: none;
    border: 1px solid #e5b8b8;
    border-radius: 10px;
    padding: 0.75rem;
    color: #b04545;
    font-size: 0.8rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    cursor: pointer;
}
/* In Luo ammattikortti, footer clearance comes entirely from .np-main's own
   padding-bottom (spa.html) so it stays correct whether Poista ammattikortti
   is the last visible button (edit mode) or hidden (create mode, where only
   .np-submit-btn's small 0.8rem margin would otherwise apply) — the class's
   own 5rem margin would double up with that padding here and reopen the
   "too much white space" gap. */
.np-view-light .np-delete-btn { margin-bottom: 0; }

/* Category browse panel — full-screen, opened by the icon next to the
   picker bar; grouped sections (Elokuva & TV, Teatteri), then a flat list
   with no header for everything else. */
.np-browse-panel {
    position: fixed;
    inset: 0;
    z-index: 10900;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.np-browse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.2rem 1rem;
    font-size: 0.92rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    color: #14161c;
    border-bottom: 1px solid #e5e7ea;
    letter-spacing: normal;
}
.np-browse-close {
    background: none;
    border: none;
    color: #14161c;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.np-browse-body {
    flex: 1;
    overflow-y: auto;
    padding: 2.4rem 1.2rem 6rem;
}
.np-browse-group-label {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    color: #8a8f9a;
    margin-top: 2rem;
    margin-bottom: 0.7rem;
}
.np-browse-group-label:first-child { margin-top: 1.2rem; }
.np-browse-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.np-browse-item {
    background: none;
    border: 1px solid #d8dade;
    border-radius: 20px;
    padding: 0.5rem 0.9rem;
    color: #14161c;
    font-size: 0.82rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.np-browse-item:hover { border-color: #8a8f9a; background: #f2f2f5; }
/* Multi-select browse panels (e.g. kategoriaBrowsePanel) toggle instead of
   picking-and-closing — same selected look as .loc-tunniste-chip.active. */
.np-browse-item.active {
    background: #14161c;
    border-color: #14161c;
    color: #fff;
}

/* "Muu" as its own centered bar below the category grid (project category
   browse panels) instead of just another chip in the wrapped row — bigger
   tap target and visually clearly the escape hatch, not one option among
   equals. */
.np-browse-muu-wrap { margin-top: 1.6rem; text-align: center; }
.np-browse-muu-btn {
    display: inline-block;
    background: none;
    border: 1px solid #d8dade;
    border-radius: 24px;
    padding: 0.75rem 2.4rem;
    color: #14161c;
    font-size: 0.92rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.np-browse-muu-btn:hover { border-color: #8a8f9a; background: #f2f2f5; }

/* Elokuva/TV-sarja's own centered row at the top of the category browse
   panel (see pjRenderCategoryGroups), set apart from the plain categories
   below by centering plus the same gap .np-browse-muu-wrap uses. */
.np-browse-items-featured { justify-content: center; margin-bottom: 1.6rem; }

/* Kuvat — .poster-grid/.poster-upload/.poster-delete are shared with the
   (still dark-themed) project/location forms, so override rather than edit
   the shared rule. Three square tiles per row (their right edge lining up
   with every other 19rem-wide bar on this page), a slim stroke "+" instead
   of the oversized text glyph, and a crisper delete button, all scoped to
   this view only. display/width/height are set explicitly here rather than
   left to inherit from the dark-theme rule (which mixes a fixed 100px
   height with a 100%-wide grid cell — a stray non-square tile that was
   also what made the add tile appear to jump to its own row). */
.np-view-light .poster-grid {
    display: grid;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}
.np-view-light .poster-item,
.np-view-light .poster-upload {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
.np-view-light .poster-upload {
    border: 1px dashed #d8dade;
    border-radius: 10px;
    background: #fafafb;
    color: #c7cad0;
    transition: border-color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.np-view-light .poster-upload:hover { border-color: #a8acb5; background: #f2f2f5; }
.np-view-light .poster-upload-icon {
    width: 15px;
    height: 15px;
    stroke: #a8acb5;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
}
.np-view-light .poster-item img { border-radius: 10px; }
.poster-kausi-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.poster-kausi-btn {
    flex: 1;
    border: none;
    background: rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.75);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0;
    line-height: 1.3;
    cursor: pointer;
}
.poster-kausi-btn.active {
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
}
.np-view-light .poster-delete {
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    color: #4a4f5a;
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--st-varjo-matala);
}

/* Required-field marker — Nimi, Kuvat, Esittely; every other section is
   optional and simply won't appear on the finished card if left empty. */
.np-required {
    color: #b04545;
    margin-right: 0.3em;
}

.np-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    cursor: pointer;
}
.np-toggle-label {
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
}
.np-toggle-wrap {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
}
.np-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.np-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: 24px;
    transition: background 0.2s;
}
.np-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}
.np-toggle-wrap input:checked + .np-toggle-slider { background: #4a9eff; }
.np-toggle-wrap input:checked + .np-toggle-slider::before { transform: translateX(18px); }

/* .np-toggle-* is shared with the dark-themed edituser view — override just
   the colors here so the track/knob stay visible on a white background. */
.np-view-light .np-toggle-slider { background: #e5e7ea; }
.np-view-light .np-toggle-slider::before { background: #fff; box-shadow: var(--st-varjo-matala); }
.np-view-light .np-toggle-wrap input:checked + .np-toggle-slider { background: #14161c; }

/* Filters modal panel is white too (but lives outside a .np-view-light
   ancestor), so it needs the same light-track override directly. */
.sfm-panel .np-toggle-slider { background: #e5e7ea; }
.sfm-panel .np-toggle-slider::before { background: #fff; box-shadow: var(--st-varjo-matala); }
.sfm-panel .np-toggle-wrap input:checked + .np-toggle-slider { background: #14161c; }

/* --- Settings Page (settings.html) --- */
.profile-image-wrapper {
    position: relative;
    width: 90%;
    max-width: 600px;
    cursor: pointer;
}
.profile-pic-hero {
    width: 100%;
    height: 40vh;
    min-height: 240px;
    object-fit: cover;
    border-radius: 1.5rem;
    display: block;
}
.profile-name {
    position: absolute;
    bottom: 3.2rem;
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.12rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.profile-subtitle {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    color: #fff;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing:0;
}

/* --- New Profile Page (newprofile.html) --- */
.auto-expand {
    width: 100%;
    min-height: 2.5rem;
    overflow: hidden;
    resize: none;
    padding: 0.5rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: height 0.2s ease;
    background-color: transparent;
    color: white;
    margin-top: 1rem;
}
/* .auto-expand is shared with the dark-themed signup/old edituser forms
   (color: white, font-family: inherit — which on this app's <body> means
   the bold display face 'Arial Black', above) — edituser now also carries
   .np-field-textarea for its box styling, but that class alone loses the
   cascade to .auto-expand since both are plain single classes; override it
   back here the same way .np-view-light already does for .np-toggle-slider. */
.np-view-light .auto-expand {
    color: #14161c;
    font-family: var(--st-font-body);
    font-weight: 300;
    line-height: 1.5;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
}
.auto-expand.collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poster-grid {
    color:white;
    margin-top:1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.poster-upload {
    width: 100px;
    height: 100px;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2.2rem;
}
.poster-item {
    position: relative;
    width: 100px;
    height: 100px;
}
.poster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

/* --- SPA View Control --- */
.spa-view {
    display: none;
}
.spa-view.active {
    display: block;
}
/* Näkymänvaihdon suunta: eteenpäin sisältö tulee oikealta, paluussa
   vasemmalta. Vihje eikä matka — 14 px riittää kertomaan suunnan, koko
   ruudun levyinen liuku veisi huomion sisällöltä. Luokka poistetaan
   animaation jälkeen (js/spa.js handleRoute), koska jäävä transform tekisi
   näkymästä sijoituskontekstin sen omille position: fixed -kerroksille. */
@keyframes spa-liuku-eteen {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes spa-liuku-taakse {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}
.spa-view.spa-liuku-eteen  { animation: spa-liuku-eteen 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.spa-view.spa-liuku-taakse { animation: spa-liuku-taakse 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
    .spa-view.spa-liuku-eteen,
    .spa-view.spa-liuku-taakse { animation: none; }
}
/* "Luo ammattikortti" / "Luo projekti" — flex column so the header's real
   height (it grew once it started using sticky-safe padding) never has to
   be hardcoded into a calc(100vh - Npx) on <main>, which kept drifting out
   of sync. */
#newprofile-view.active,
#tarkennus-view.active,
#luo-view.active,
#lisakysymykset-view.active,
#aloitus-view.active,
#newproject-view.active,
#edituser-view.active,
#newlocation-view.active,
#rekry-view.active,
#rekrykysymykset-view.active,
#rekryhakemukset-view.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Näkyvän alueen korkeus (muistio 10.10.2026). 100vh on Androidin
       Chromessa ja iPhonen Safarissa korkeus ilman osoitepalkkia, joten
       näkymä jatkui ruudun alle ja vierityksen viimeinen kohta jäi
       alapalkin taakse: lokaation vihje, aloitusnäytön toinen laatikko. */
    height: 100dvh;
}
.np-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden; /* its own independently-scrolling flex child, not the body — same sideways-bounce fix as html/body in filkka.css */
}

.remove-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}

.poster-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

.poster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.poster-upload {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2.2rem;
    color: #ccc;
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 1rem;
}

/* --- Footer — redesigned (2026), icon-over-label like Airbnb/hotel apps --- */
/* A lifted, detached bar rather than a strip welded to the bottom edge. It
   used to be painted in var(--st-bg) — literally the page colour — with a 1px
   line as the only thing separating the two, so it dissolved into whatever was
   behind it. Same near-black family, just a surface above the page with its
   own edge, and the same pill shape as the Stormi Assistant bar at the top, so
   the app reads as content between two floating controls. */
/* Puhelimen taustakuva kiinteänä kerroksena sisällön takana (10.10.2026).
   Kun dokumentti alkoi vierittää bodyn sijaan (css/filkka.css), bodyn oma
   taustakuva piirtyi vain bodyn ruudun korkuiseen laatikkoon (html:llä on
   oma taustavärinsä), ja Profiilin alaosaan tuli sauma. Kiinteä kerros
   pysyy paikallaan kuten ennen — background-attachment: fixed ei toimi
   iPhonen Safarissa. Tietokoneella tausta on html:llä (css/tyopoyta.css). */
@media (max-width: 1023px) {
    body { background-image: none; }
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: url("../img/1.jpeg") center / cover no-repeat;
    }
}
/* Näppäimistön ollessa auki alapalkki piiloon (js/spa.js, nappaimisto-auki):
   Androidilla se muuten nousi näppäimistön päälle keskelle ruutua.
   Tietokoneella sama palkki on yläpalkki, eikä sitä piiloteta. */
@media (max-width: 1023px) {
    body.nappaimisto-auki .footer { display: none !important; }
    /* Muut alapalkin yläpuolelle kiinnitetyt nousivat samalla tavalla
       näppäimistön päälle (koko sovelluksen läpikäynti 10.10.2026):
       luonnoksen poistolinkki, tarjouskori ja etusivun ylös-nappi piiloon
       kirjoittamisen ajaksi; verkkoyhteyden ilmoitus jää, mutta alas. */
    body.nappaimisto-auki .ok-poista-luonnos,
    body.nappaimisto-auki .tarjous-kori,
    body.nappaimisto-auki .etusivu-ylos { display: none !important; }
    body.nappaimisto-auki .stormi-verkkopalkki { bottom: 0.5rem; }
    /* Kirjoituspalkki näppäimistöä vasten: kotipalkin turvaväli kuuluu
       ruudun alareunaan, ei näppäimistön yläpuolelle, jossa se näytti
       toiselta palkilta palkin alla (10.10.2026). */
    body.nappaimisto-auki #chat-input-bar { padding-bottom: 0.7rem; }
}
.footer {
    position: fixed;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(23, 25, 33, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    box-shadow: var(--st-varjo-nostettu);
    /* Kept compact: at ~76px the bar read as a slab across the bottom of a
       phone rather than a control floating over the page. height: auto
       overrides filkka.css's fixed `.footer { height: 76px }`, which
       otherwise held the bar at that height whatever its padding. */
    height: auto;
    padding: 0.3rem 0.35rem;
    z-index: 10001;
}
/* Rides behind the current item. Transformed rather than repositioned with
   left, so the travel is composited and stays smooth across five stops. */
.footer-pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 0;
    transition: transform 0.34s cubic-bezier(0.22, 0.84, 0.36, 1),
                width 0.34s cubic-bezier(0.22, 0.84, 0.36, 1);
}
/* The first placement is a jump to wherever the user already is, not a
   journey from the left edge — js/spa.js adds this class for that one frame. */
.footer-pill-heti { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .footer-pill { transition: none; }
}
/* Chat replaces the footer entirely with its own composer bar while open —
   see #chat-view below and openChat()/closeChat() in js/spa.js. */
body.chat-open .footer { display: none; }
.footer-item {
    position: relative;   /* above .footer-pill */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    padding: 0.32rem 0;
    cursor: pointer;
    flex: 1;
    color: rgba(255, 255, 255, 0.55);
    /* Alapalkilla oli vain :hover, jota puhelimessa ei ole: napautus ei
       antanut mitään palautetta ennen kuin näkymä vaihtui. Sama lyhyt
       kuittaus kuin korteilla. */
    transition: color 0.2s ease, transform 0.12s ease;
}
/* Heavier than before at rest and heavier still when current: at 1.7 the
   icons read as hairlines next to the labels under them. */
.footer-icon {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-width 0.2s ease;
}
.footer p {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: currentColor;
    margin: 0;
}
.footer-item:active { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) {
    .footer-item { transition: color 0.2s ease; }
    .footer-item:active { transform: none; }
}
.footer-item.active {
    color: #ffffff;
}
.footer-item.active .footer-icon {
    stroke-width: 2.45;
}
.footer-item.active p {
    font-weight: 600;
}

.poster-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* Poster-grid position badge + drag-to-reorder (see wirePosterGridReorder
   in js/spa.js) — position 1 is the card's/project's/location's main photo
   everywhere it's shown, so this makes the current order visible at a
   glance instead of only implicit in upload order. Top-left, opposite
   .poster-delete's top-right corner. */
.poster-item-number {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,.65);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--st-font-body);
    pointer-events: none;
    z-index: 5;
}
/* "Kansikuvaksi" nostaa kuvan ensimmäiseksi (wirePosterGridReorder). */
.poster-kansi {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 5;
    padding: 5px 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font: 500 10px/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.poster-item:has(.poster-kausi-bar) .poster-kansi { bottom: 1.55rem; }
.poster-kansi:hover { border-color: rgba(255, 255, 255, 0.6); }
.poster-kansi:active { background: #fff; color: #000; }
.poster-item-dragging {
    opacity: 0.6;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: var(--st-varjo-nostettu);
    /* Only once a real drag is confirmed (past the hold delay in
       wirePosterGridReorder) — not on .poster-item generally, or the
       browser would suppress a plain scroll-swipe that happens to start on
       a photo before that delay ever elapses. */
    touch-action: none;
}

/* --- Messages View --- */
/* No fixed header — flows normally like Etusivu, so the whole page is one
   continuous grain background (js/filkka.js) instead of a flat-colored
   block pinned over it. */
#msg-list-view { padding-top: 0.4rem; padding-bottom: 5rem; }

#msg-list-header {
    /* Ylätila Stormi Assistant -palkille. Oli 4,3 rem, jolloin otsikon ja
       palkin väliin jäi 24 px ja otsikko näytti roikkuvan siinä kiinni.
       Palkki on kelluva eikä varaa tilaa itse, joten varaus on tässä. */
    padding: 5.8rem 1.1rem 0.9rem;
}
#msg-list-header .view-logo { margin-bottom: 1.1rem; }
/* Indented so its left edge lines up with the avatar photos below (which sit
   past the unread-badge slot), not the row's own left padding. */
#msg-list-title {
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 1.6rem;
    color: white;
    letter-spacing: -0.01em;
    text-align: left;
    margin-bottom: 0.9rem;
    padding-left: 2.2rem;
}
.msg-filter-row { display: flex; gap: 0.5rem; padding-left: 2.2rem; }
.conv-empty {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
    color: #8a8f9a;
    font-weight: 400;
    font-family: var(--st-font-body);
    text-align: center;
    padding: 3rem 1rem;
}
.msg-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    /* 30 px oli kaksi pikseliä alle sen, mihin sormi osuu luotettavasti. */
    padding: 0.58rem 1.15rem;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    letter-spacing: 0;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.msg-filter-btn.active { background: #fff; color: #14161c; font-weight: 500; }
.msg-filter-star { padding: 0.48rem 0.75rem; }
.msg-filter-star svg {
    width: 15px; height: 15px;
    fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.6; stroke-linejoin: round;
}
.msg-filter-star.active svg { fill: #14161c; stroke: #14161c; }

.conv-row {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
}
.conv-row:active { background: rgba(255,255,255,0.03); }

.conv-unread-slot { width: 22px; flex-shrink: 0; display: flex; justify-content: center; }

.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #1c2338;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--st-varjo-matala);
}
.online-dot {
    display: none; position: absolute; bottom: 1px; right: 1px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #22c55e; border: 2px solid #080b1c;
}
.online-dot.visible { display: block; }

.conv-info { flex: 1; min-width: 0; }
.conv-name {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-family: 'Arial Black', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-name.unread { color: white; }
.conv-project { color: rgba(255,255,255,0.55); font-size: 0.75rem; font-family: var(--st-font-body); font-weight: 300; }
/* 0.3 alfalla kontrasti oli 2,55:1 ja paino 300 teki 11,8 px:n tekstistä
   ohuen. 0.5 antaa 5,31:1. Lukemattoman rivin ero säilyy alfassa. */
.conv-preview { color: rgba(255,255,255,0.55); font-size: 0.8rem; font-family: var(--st-font-body); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.conv-preview.unread { color: rgba(255,255,255,0.85); font-weight: 400; }

.unread-badge {
    background: rgba(255,255,255,0.16);
    border-radius: 50%;
    width: 17px; height: 17px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; font-weight: 700;
    font-family: var(--st-font-body);
}
.conv-star {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    /* Yli 32 px kosketusalue (savutesti T8 osuu 16 px keskeltä): 18 px
       ikoni + 8 px täyte. Pystyyn negatiivinen marginaali, jottei rivi kasva;
       vaakaan ei, jotta vierekkäiset tähti ja roskakori eivät varasta
       toistensa osumia. */
    padding: 8px;
    margin: -3px 0;
    display: flex;
}
.conv-star svg {
    width: 18px; height: 18px;
    fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.5; stroke-linejoin: round;
    transition: fill 0.15s, stroke 0.15s;
}
.conv-star.starred svg { fill: #fff; stroke: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,0.35)); }
.conv-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    /* Yli 32 px kosketusalue (savutesti T8 osuu 16 px keskeltä): 18 px
       ikoni + 8 px täyte. Pystyyn negatiivinen marginaali, jottei rivi kasva;
       vaakaan ei, jotta vierekkäiset tähti ja roskakori eivät varasta
       toistensa osumia. */
    padding: 8px;
    margin: -3px 0;
    display: flex;
}
.conv-delete svg {
    width: 18px; height: 18px;
    fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.15s;
}
.conv-delete:active svg { stroke: #ff6b6b; }

/* Viestit → Hakemukset: omat lähetetyt hakemukset. Sama rivi kuin
   keskustelulla, mutta kuvana haun tai projektin kuva (neliö, ei avatar),
   ja oikealla Peru-nappi roskakorin sijaan: peruminen ei ole poisto. */
.hakemus-kuva {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
    background: rgba(255,255,255,0.06);
}
.hakemus-tila {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    letter-spacing: normal;
    margin-top: 0.15rem;
}
.hakemus-peru {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    letter-spacing: normal;
    cursor: pointer;
}
.hakemus-peru:active { background: rgba(255,255,255,0.08); }

/* Locks the messages list behind the chat panel from scrolling/bouncing
   while a conversation is open — see openChat()/closeChat() in js/spa.js. */
body.chat-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Sama lukko kuvakatselimelle (openStarViewer). Ilman tätä pystysuora
   pyyhkäisy — jota katselin ei tulkitse selaamiseksi — vierittää profiilia
   kuvan takana, ja sen huomaa vasta sulkiessa. */
body.kuvakatselin-auki {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Sama lukko koko ruudun arkeille (.sv-cards-sheet: Tähtihetket, Lokaatiot,
   Kalusto, Jäsenyys…). Käyttäjä 10.10.2026: "tähtihetket sivu pomppii
   androidilla todella oudosti". Arkki on position: fixed, mutta sivu sen
   takana (body) jäi vieritettäväksi: kun arkin oma lista ei ole täynnä,
   sormen veto vieritti takana olevaa Profiilia, ja Androidilla osoitepalkki
   ja reunan venytysefekti nytkäyttivät koko arkkia. Vain aktiivisen näkymän
   avoin arkki lukitsee, jottei piiloon jäänyt näkymä lukitse muita sivuja. */
body:has(.spa-view.active .sv-cards-sheet[style*="display: flex"]),
body:has(.spa-view.active .sv-cards-sheet[style*="display: block"]) {
    overflow: hidden;
    overscroll-behavior: none;
}
.sv-cards-sheet,
.sv-cards-list,
.sv-star-gallery-grid {
    overscroll-behavior: none;
}
/* Julkisella profiililla ruudukko on osa sivua, ei oma vieritysalueensa. */
#publicprofile-view .sv-star-gallery-grid { overscroll-behavior: auto; }

#chat-view {
    position: fixed; inset: 0;
    height: 100vh;
    height: 100dvh; /* keeps the panel matched to what's actually visible
                       instead of the browser chrome's collapsed-state
                       height — see body.page-login in filkka.css, same
                       "rocking" bug, same fix. */
    background: #fff;
    transform: translateX(100%);
    /* height/top are also transitioned — syncChatViewport() (js/spa.js)
       snaps them to the visual viewport on every resize/scroll event while
       the on-screen keyboard opens, which fires several times with
       intermediate values as the keyboard slides up rather than once at
       the end. Without a transition each snap applied instantly, reading
       as a fast multi-step jump instead of one smooth motion. */
    /* Korkeutta ja sijaintia ei enää animoida (10.10.2026): animaatio jäi
       näppäimistön ja iOS:n oman siirron jälkeen, ja kirjoituspalkki
       pomppi. syncChatViewport kirjoittaa arvon kerran ruudunpäivitystä
       kohden, joten palkki seuraa näppäimistöä suoraan. */
    transition: transform 0.3s ease;
    z-index: 10950; /* above .footer (10001) — it replaces the footer
                        entirely, not just floats above it */
    overflow: hidden;
    overscroll-behavior: none;
    display: flex; flex-direction: column;
}
#messages-view:not(.active) #chat-view { display: none; }
/* Työpöydän tyhjä keskustelupalsta. Piilossa oletuksena: puhelimessa chat
   peittää listan kokonaan eikä tyhjää palstaa ole. css/tyopoyta.css näyttää
   tämän vasta 1024 pikselistä ylöspäin. */
.tp-viesti-tyhja { display: none; }
/* Keskustelukumppanin palsta: vain tietokoneella (css/tyopoyta.css). */
.chat-kumppani { display: none; }

/* Hakemusten käsittelypaneeli (#ahhDetail, #clDetail). Piilossa oletuksena:
   puhelimessa hakemuslista on koko sivu ja hakijan tiedot avataan omalle
   sivulleen. css/tyopoyta.css näyttää tämän vasta 1200 pikselistä ylöspäin,
   jolloin lista ja hakija mahtuvat vierekkäin. */
.tp-hakemus-paneeli { display: none; }

/* ── Castinglista ──────────────────────────────────────────────────────
   Projektin ja roolin oma ehdokaslista. Toimii puhelimella yhtenä listana
   ja työpöydällä kahtena palstana (.tp-hakemus-paneeli). */
.cl-ylapalkki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    color: #6b7280;
}
.cl-tarjoa {
    padding: 0.55rem 1.05rem;
    border: none;
    border-radius: 999px;
    background: #14161c;
    color: #fff;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
}
/* "Tarjottu" kertoo, ettei samaa tarjousta kannata lähettää uudestaan. */
.cl-merkki {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #e7e9ee;
    color: #4b5160;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
}
.cl-muistiinpano {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e0e2e6;
    border-radius: 12px;
    background: #fff;
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.45;
    color: #14161c;
    resize: vertical;
}
.cl-poista { border-color: #c9ccd3; color: #6b7280; }


/* ── Saatavuus profiilissa ─────────────────────────────────────────────
   Sama kokoontaittuva osio kuin Ammattikortit ja Lokaatiot, joten pohjana
   on .sv-stat-card. Tämä kortti ei ole ruudukko vaan pystysuora lomake,
   joten grid puretaan — muuten napit menisivät kahteen sarakkeeseen.

   Kortin omat säännöt kirjoitetaan .sv-stat-card.sv-saatavuus-muodossa:
   .sv-stat-card tulee tässä tiedostossa vasta jäljempänä, joten yhtä
   tarkka .sv-saatavuus häviäisi sille ja kortti jäisi valkoiseksi
   kaksipalstaiseksi ruudukoksi.

   Värit tulevat Stormin paletista eikä tälle osiolle keksitä omaa:
   melkein musta pohja, sen päällä tummansininen laatikko (#1c2338-sukua)
   ja harmaa teksti (#a8acb5 / #8a8f9a). Korostussininen #5b7fe0 esiintyy
   vain ohuina merkkeinä — reunana, pisteenä, kohdistuksena — ei pintana,
   jotta tumma pysyy tummana. */
.sv-stat-card.sv-saatavuus {
    display: block;
    cursor: default;
    text-align: center;
    /* Pystypehmuste on sama 1rem kuin muilla osiokorteilla eikä väljempi:
       kokoontaittuva piilottaa sisällön max-height: 0:lla, joka ei poista
       pehmustetta, joten suljetunkin kortin korkeus on sen pehmuste. Isompi
       pehmuste jätti Saatavuuden ja Lokaatioiden palkkien väliin 42 px, kun
       muualla väli on 34 px. Väljyys haetaan sisältä, ei reunoilta. */
    padding: 1rem 1.15rem;
    background: linear-gradient(168deg, #0e1119, #05070d 62%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #d8dade;
    /* .sv-stat-card:n valkoinen inset-viiva on vaaleaa korttia varten;
       tummalla se piirtyisi kirkkaaksi raidaksi yläreunaan. */
    box-shadow: var(--st-varjo-nostettu);
}
.sv-stat-card.sv-saatavuus:hover { border-color: rgba(255, 255, 255, 0.18); }

/* Omassa arkissaan Saatavuus ei ole enää kortti sivun joukossa vaan koko
   sivun sisältö: laatikko reunoineen ja sinisine kehyksineen olisi kehys
   kehyksen sisällä (käyttäjä 28.9.2026). Elementit tummalle taustalle ja
   pystysuunnassa keskelle. */
#svSaatavuusSheet .sv-stat-card.sv-saatavuus,
#svSaatavuusSheet .sv-stat-card.sv-saatavuus-on {
    max-width: 26rem;
    margin: auto;
    padding: 0 1.2rem;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
}
/* Arkin runko keskittää sisältönsä. .sv-cards-sheet on pystysuuntainen
   flex, joten lapsen margin: auto riittää — ja jos sisältö kasvaa ruutua
   isommaksi, vieritys toimii silti (toisin kuin justify-content: center). */
#svSaatavuusSheet { justify-content: flex-start; }
#svSaatavuusSheet .sv-cards-sheet-header { flex-shrink: 0; }
/* Voimassa oleva merkintä värjää reunan korostussinisellä. Merkitsemättömyys
   ei ole virhetila, joten vastaavaa punaista ei ole. */
.sv-stat-card.sv-saatavuus-on { border-color: rgba(91, 127, 224, 0.42); }
.sv-stat-card.sv-saatavuus-on:hover { border-color: rgba(91, 127, 224, 0.65); }

.sv-sa-johdanto {
    /* Kapeampi mitta kuin kortti: keskitetty teksti luetaan huonosti, jos
       rivit venyvät reunasta reunaan. */
    max-width: 30ch;
    margin: 0 auto 1.1rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.55;
    color: #8a8f9a;
}

/* Napit ovat otsikkonsa kokoisia pillereitä, samaa muotoa kuin muutkin
   valintapillerit tummalla pinnalla (.sk-pohja). Valitun selite tulee
   niiden alle omalle rivilleen: kortti pysyy kevyenä, eikä kahta pitkää
   tekstipalstaa lueta rinnakkain. Valinta on yhden painalluksen päässä
   molempiin suuntiin, joten toisen vaihtoehdon seurauksen näkee
   kokeilemalla. */
.sv-sa-valinta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.sv-sa-vaihto {
    flex: 0 0 auto;
    padding: 0.55rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: #8a8f9a;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sv-sa-vaihto:hover { border-color: rgba(255, 255, 255, 0.3); color: #a8acb5; }
/* Kumpikin valinta merkitään samalla tavalla. Eri värit tarkoittaisivat,
   että toinen vastaus on oikea ja toinen väärä — tässä kysytään tilannetta,
   ei onnistumista. Tieto on se, kumpi pilleri on täytetty. */
.sv-sa-vaihto-valittu {
    background: linear-gradient(160deg, #1f2740, #141a2a);
    border-color: rgba(91, 127, 224, 0.55);
    color: #f2f2f5;
}
.sv-sa-vaihto-valittu:hover { border-color: rgba(91, 127, 224, 0.8); color: #f2f2f5; }

.sv-sa-kuvaus {
    max-width: 34ch;
    margin: 0.85rem auto 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.5;
    color: #8a8f9a;
}

/* Tuoreusrivi saa oman pisteensä samalta riviltä kuin laattojen merkki,
   jolloin kortissa on yksi pystysuora rytmi eikä irrallisia tekstirivejä. */
.sv-sa-tila {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.45;
    color: #8a8f9a;
}
.sv-sa-tila::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-0.12em);
}
.sv-saatavuus-on .sv-sa-tila { color: #7f93c9; }

/* Jaksot ovat eri kysymys kuin kytkin (tuleva vs. juuri nyt), joten viiva
   väliin — muuten ne luetaan saman asian jatkoksi. */
.sv-sa-jaksot {
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sv-sa-jaksot-otsikko {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: #d8dade;
}
.sv-sa-jaksot-selite {
    max-width: 34ch;
    margin: 0.35rem auto 0.9rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.5;
    color: #8a8f9a;
}

.sv-saatavuus-estot { display: flex; flex-direction: column; gap: 0.4rem; }
.sv-saatavuus-esto {
    display: flex;
    text-align: left;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.55rem 0.6rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: linear-gradient(160deg, #1f2740, #141a2a);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    color: #e5e7ea;
}
.sv-saatavuus-esto-vali { flex: 0 0 auto; }
/* Kesto oikealle harmaana: päivämääräväli kertoo milloin, tämä kertoo
   kuinka pitkään — eri tieto, joten eri paino ja oma paikkansa. */
.sv-saatavuus-esto-kesto {
    flex: 1 1 auto;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 300;
    color: #8a8f9a;
}
.sv-saatavuus-esto-poista {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #8a8f9a;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.25rem 0.35rem;
    border-radius: 8px;
}
.sv-saatavuus-esto-poista:hover { color: #e5e7ea; background: rgba(255, 255, 255, 0.08); }
/* Lisäysnappi on katkoviivalaatta samassa ruudukossa kuin jaksot eikä
   alleviivattu linkki: se on tyhjä paikka, joka odottaa sisältöä. */
/* Katkoviivapilleri samaa muotoa kuin valintanapit, keskitettynä: koko
   kortin napit ovat samannäköisiä ja samalla keskilinjalla. Katkoviiva
   erottaa sen valinnoista — tämä lisää jotain, ei valitse. Leveys jää
   sisällön mittaan, joten tyhjä lista ei näytä isolta tyhjältä laatikolta
   eikä tyhjyyttä tarvitse erikseen kuvailla. */
.sv-saatavuus-lisaa {
    display: block;
    margin: 0.55rem auto 0;
    padding: 0.5rem 1.15rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: transparent;
    color: #8a8f9a;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 400;
    white-space: nowrap;
}
.sv-saatavuus-lisaa:hover { border-color: rgba(91, 127, 224, 0.55); color: #a8acb5; }
.sv-saatavuus-lomake {
    margin-top: 0.4rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: linear-gradient(160deg, #1f2740, #141a2a);
}
.sv-saatavuus-kentat { display: flex; gap: 0.6rem; }
.sv-saatavuus-kentta {
    flex: 1;
    min-width: 0;
    display: flex;
    text-align: left;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: #8a8f9a;
}
/* color-scheme kertoo selaimelle, että päivämääräkentän oma kalenterikuvake
   ja valitsin piirretään tummalle — muuten kuvake on musta mustalla. */
.sv-saatavuus-kentta input {
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #e5e7ea;
    color-scheme: dark;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}
.sv-saatavuus-kentta input:focus {
    outline: none;
    border-color: var(--st-accent, #5b7fe0);
}
.sv-saatavuus-lomakenapit { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; }
.sv-saatavuus-peru, .sv-saatavuus-tallenna {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
}
.sv-saatavuus-peru { border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #a8acb5; }
.sv-saatavuus-tallenna { border: none; background: var(--st-accent-strong, #4a67c2); color: #fff; }

/* Tilauksen lisäpaketit. Säädin eikä vapaa kenttä: paketteja otetaan yksi
   tai kaksi, ei kaksikymmentäseitsemän, ja numeroa napsutellaan nopeammin
   kuin kirjoitetaan. */
.tilaus-paketit {
    margin: 1rem 0 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
}
.tilaus-paketit-rivi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tilaus-paketit-otsikko {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
}
.tilaus-paketit-teksti {
    margin-top: 0.15rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
}
.tilaus-paketit-saadin { display: flex; align-items: center; gap: 0.6rem; }
.tilaus-paketti-nappi {
    width: 2rem; height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: 500 1rem var(--st-font-body);
    line-height: 1;
    cursor: pointer;
}
.tilaus-paketti-maara {
    min-width: 1.2rem;
    text-align: center;
    font: 600 1rem var(--st-font-body);
    color: #fff;
}
.tilaus-paketit-yhteensa:not(:empty) {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
}

/* ── Projektin miehitys ────────────────────────────────────────────────
   Roolikortit. Tyhjä rooli näytetään yhtä näkyvästi kuin täytetty: se on
   koko sivun tärkein tieto, koska tyhjentyminen tapahtuu hiljaa (hylätty
   tai vanhentunut tarjous poistuu ilman ilmoitusta). */
.mh-roolit { display: flex; flex-direction: column; gap: 0.75rem; }
.mh-kortti {
    padding: 0.95rem 1.1rem 1.05rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--st-varjo-matala);
}
/* Katkoviiva eikä haalennus: tyhjä rooli on tekemätöntä työtä, ei
   toissijainen. */
.mh-kortti-tyhja {
    background: transparent;
    border: 1px dashed rgba(20, 22, 28, 0.25);
    box-shadow: none;
}
.mh-rooli {
    margin-bottom: 0.6rem;
    font-family: var(--st-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #14161c;
}
.mh-osio { margin-bottom: 0.7rem; }
/* Ei pientä lihavoitua versaalia (ks. typografialinjaus) eikä omaa
   liikennevaloväriä: vahvistettu on sovelluksen korostussininen, odottava
   harmaa. Odottaminen ei ole varoitus — se on vain vielä kesken. */
.mh-tila {
    margin-bottom: 0.35rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 500;
}
.mh-tila-vahvistettu { color: #4a67c2; }
.mh-tila-odottaa     { color: #6b7280; } /* valkoisella kortilla #8a8f9a jäi 3,2:1:een */
.mh-henkilo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0;
    cursor: pointer;
}
.mh-henkilo-kuva {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9eaee;
}
.mh-henkilo-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-henkilo-nimi {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: #14161c;
}
.mh-henkilo-lisa {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 300;
    color: #9aa0aa;
}
.mh-napit { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.mh-nappi {
    padding: 0.45rem 0.9rem;
    border: 1px solid #d7dae0;
    border-radius: 999px;
    background: #fff;
    color: #14161c;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
}
.mh-nappi-ensisijainen { border-color: #14161c; background: #14161c; color: #fff; }
.mh-tyhja-teksti {
    margin: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    color: #6b7280;
}

/* Castinglistat ovat nyt oma kokoontaittuva osionsa (.pjs-osio), joten oma
   otsikko ja pehmuste eivät kuulu tänne — osion otsikkopalkki hoitaa ne. */
.pjs-castinglistat > .cl-linkit { margin-left: 1rem; margin-right: 1rem; }

/* Linkit castinglistoihin. */
.cl-linkit { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cl-linkki {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-family: var(--st-font-body);
    text-align: left;
}
.cl-linkki-rooli { font-size: 0.82rem; font-weight: 600; color: #fff; }
.cl-linkki-maara { font-size: 0.8rem; font-weight: 300; color: rgba(255, 255, 255, 0.55); }
#chat-view.open { transform: translateX(0); }
/* Avaus kuten WhatsAppissa (käyttäjä 11.10.2026): keskustelu liukuu
   oikealta varjon kanssa, ja lista sen alla siirtyy hieman vasemmalle ja
   tummuu. Vain puhelinleveydellä — tietokoneella chat on oma palstansa. */
@media (max-width: 1023px) {
    #chat-view { box-shadow: -12px 0 32px rgba(0, 0, 0, 0); transition: transform 0.3s ease, box-shadow 0.3s ease; }
    #chat-view.open { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35); }
    /* Korkeus animoidaan vain näppäimistön noustessa ja laskiessa
       (chatNosto, js/spa.js), samalla käyrällä kuin iOS:n näppäimistö.
       Muulloin korkeus seuraa näkyvää aluetta suoraan, kuten 10.10. alkaen. */
    #chat-view.chat-nousee {
        transition: transform 0.3s ease, box-shadow 0.3s ease,
                    height 0.32s cubic-bezier(0.38, 0.7, 0.125, 1), top 0.32s cubic-bezier(0.38, 0.7, 0.125, 1);
    }
    #msg-list-view { transition: transform 0.3s ease, filter 0.3s ease; }
    body.chat-liukuu #msg-list-view { transform: translateX(-22%); filter: brightness(0.55); }
    /* Näppäimistön noustessa iOS siirtää näkymää, ja syncChatViewport
       seuraa ruudunpäivityksen viiveellä. Välissä näkyi sivun tumma
       taustakuva (body::after) ja pohjaväri mustana välähdyksenä (käyttäjä
       11.10.2026). Keskustelun ollessa auki tausta on keskustelun värinen,
       jolloin välissä ei näy mitään. Lomakkeiden tumma teema
       (html.teema-kaannetty) ei koske Viestejä; :not() varmuuden vuoksi. */
    body.chat-open::after { background: #fff; }
    html:not(.teema-kaannetty):has(body.chat-open) { background: #fff !important; }  /* voittaa spa.html:n inline-värin */
}

#chat-header {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #e5e7ea;
    flex-shrink: 0;
    background: #fff;
}
#chat-back {
    display: flex; align-items: center; justify-content: center;
    width: 2.05rem; height: 2.05rem;
    border-radius: 50%;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    cursor: pointer;
    flex-shrink: 0;
}
#chat-back svg { width: 15px; height: 15px; fill: none; stroke: #14161c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#chat-avatar-wrap { position: relative; flex-shrink: 0; }
#chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: #f2f2f5; object-fit: cover; border: 1px solid #e5e7ea; }
#chat-online-dot {
    display: none; position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e; border: 2px solid #fff;
}
#chat-online-dot.visible { display: block; }
#chat-name { color: #14161c; font-size: 0.82rem; font-weight: 700; font-family: var(--st-font-body); }
#chat-status { color: #6b7280; font-size: 0.75rem; font-family: var(--st-font-body); display: none; }
#chat-status.visible { display: block; }

#chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; background: #fff; }

.bubble-wrap { display: flex; }
.bubble-wrap.sent { justify-content: flex-end; }
.bubble-wrap.recv { justify-content: flex-start; }

.bubble { max-width: 72%; padding: 0.6rem 0.9rem; border-radius: 16px; }
.bubble-wrap.sent .bubble  { background: #14161c; border-bottom-right-radius: 4px; }
.bubble-wrap.recv .bubble  { background: #f2f2f5; border-bottom-left-radius: 4px; }
.bubble-linkki { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.bubble-text {
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    font-weight: 400;
    letter-spacing: normal;
    word-break: break-word;
}
.bubble-wrap.sent .bubble-text { color: #fff; }
.bubble-wrap.recv .bubble-text { color: #14161c; }
.bubble-meta { font-family: var(--st-font-body); font-size: 0.75rem; margin-top: 3px; text-align: right; }
.bubble-wrap.sent .bubble-meta { color: rgba(255,255,255,0.55); }
.bubble-wrap.recv .bubble-meta { color: #626873; /* #a8acb5 harmaalla kuplalla oli 2,0:1 */ text-align: left; }
.bubble-ticks { display: inline-block; margin-left: 3px; letter-spacing: -1.5px; }

/* Neutral system notice (e.g. "accepted the role") at the top of a chat */
.chat-system-banner {
  align-self: center;
  max-width: 80%;
  margin: 0.25rem 0 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: #f2f2f5;
  text-align: center;
}
.chat-system-text { color: #14161c; font-size: 0.8rem; font-family: var(--st-font-body); line-height: 1.3; }
.chat-system-date { color: #a8acb5; font-size: 0.75rem; font-family: var(--st-font-body); margin-top: 3px; }

/* Project card at the top of a chat that grew out of an accepted offer —
   tap to open the project itself. */
.chat-project-card {
    display: flex; align-items: center; gap: 0.7rem;
    margin: 0 0 0.9rem;
    padding: 0.6rem;
    border-radius: 14px;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    cursor: pointer;
}
.chat-project-card-photo {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(160deg, #dfe2e7, #c7cbd2);
    overflow: hidden;
}
.chat-project-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-project-card-body { min-width: 0; }
.chat-project-card-name {
    font-size: 0.82rem; font-weight: 700; color: #14161c;
    font-family: var(--st-font-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-project-card-meta {
    font-size: 0.75rem; color: #6b7280;
    font-family: var(--st-font-body);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Keskustelun valikko: Ilmoita keskustelusta, Estä / Poista esto. */
#chat-menu {
    margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; min-height: 32px;
    border-radius: 50%;
    border: none; background: transparent;
    cursor: pointer;
}
#chat-menu svg { width: 20px; height: 20px; fill: #6b7280; }
#chat-menu:active { background: #f2f2f5; }
/* Estetyn keskustelun alareuna kirjoituspalkin tilalla. */
#chat-estetty {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.9rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7ea;
    background: #fff;
    font-family: var(--st-font-body);
    font-size: 0.85rem; letter-spacing: normal;
    color: #4a4f5a;
    flex-shrink: 0;
}
#chat-estetty[hidden] { display: none; }
#chat-esto-pois {
    min-height: 32px;
    padding: 0.4rem 0.9rem;
    border: 1px solid #d5d9e0; border-radius: 999px;
    background: #fff; color: #14161c;
    font-family: var(--st-font-body); font-size: 0.8rem; letter-spacing: normal;
    cursor: pointer;
}
.conv-estetty {
    margin-left: 0.4rem;
    font-size: 0.8rem; font-weight: 400; letter-spacing: normal;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
}

#chat-input-bar {
    display: flex; align-items: flex-end; gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7ea;
    /* Valkoinen kirjoituspalkki: kumoaa juuren color-scheme: darkin, jotta
       kohdistin ja tekstin valinta eivät piirry tummina valkoiselle. */
    color-scheme: light;
    background: #fff;
    flex-shrink: 0;
}
/* A <textarea> now, not <input> — grows with content (see the chat-input
   'input' listener in js/spa.js) up to max-height, then scrolls internally.
   line-height*1 + padding*2 must match the JS's single-line height check. */
#chat-input {
    flex: 1; background: #f2f2f5; border: none;
    border-radius: 20px; padding: 0.65rem 1rem;
    color: #14161c; font-size: 1rem; font-family: var(--st-font-body); outline: none;
    resize: none; line-height: 1.3; max-height: 7.8rem; overflow-y: auto;
    /* scrollHeight sisältää täytteen: content-boxissa kenttä hyppäsi
       ensimmäisellä näppäilyllä 42 px:stä 63 px:iin (12.10.2026). */
    box-sizing: border-box;
}
#chat-input::placeholder { color: #a8acb5; }
#chat-send {
    background: #14161c; border: none; border-radius: 50%;
    width: 38px; height: 38px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#chat-send svg { width: 16px; height: 16px; }
#chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   Settings View (sv-*)
   ═══════════════════════════════════════════════ */

/* Hero: own avatar as full-bleed background, glass topbar + identity on top */
.sv-hero {
    position: relative;
    width: 100%;
    height: 46vh;
    min-height: 320px;
    overflow: hidden;
    flex-shrink: 0;
    background: #05070d;
}
.sv-hero-photo,
#svHeroPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sv-hero-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.94) 100%);
    pointer-events: none;
}

/* Top bar — glass icon over the photo, same style as the detail modal's close/share */
/* Korkeammalla kuin .sv-info-card (z-index 30), jotta rattaan valikko avautuu
   kehotuskortin päälle eikä sen taakse. Valikon oma z-index: 200 ei ratkaise
   tätä: tämä palkki on `position: absolute` + z-index, eli oma
   pinoutuskontekstinsa, ja valikon luku järjestää vain palkin omia lapsia.
   Ulospäin ainoa merkitsevä luku on tämä. */
.sv-topbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 40;
}
.sv-gear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    line-height: 1;
    user-select: none;
}
.sv-gear:hover { color: #fff; }
.sv-gear svg { width: 18px; height: 18px; }
.sv-gear { position: relative; }
.sv-gear-dot {
    position: absolute;
    top: 0.02rem;
    right: 0.02rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #e74c3c;
    border: 1.5px solid #05070d;
}

.sv-gear-menu {
    display: none;
    position: absolute;
    top: calc(2.05rem + 0.5rem);
    right: 0;
    background: #10151f;
    border: 1px solid #1e2a3a;
    border-radius: 14px;
    width: 190px;
    box-shadow: var(--st-varjo-kelluva);
    overflow: hidden;
    z-index: 200;
}
.sv-gear-menu.sv-open { display: block; }
.sv-gear-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    color: #aab;
    border-bottom: 1px solid #1a2230;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.sv-gear-item svg { width: 16px; height: 16px; flex-shrink: 0; color: #7a8296; }
.sv-gear-badge {
    margin-left: auto;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.sv-gear-item:last-child { border-bottom: none; }
.sv-gear-item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.sv-gear-item:hover svg { color: #fff; }
.sv-gear-danger { color: #ff8a7a; }
.sv-gear-danger svg { color: #ff8a7a; }
.sv-gear-danger:hover { color: #ffa99c; }
.sv-gear-danger:hover svg { color: #ffa99c; }

/* Info card — sits over .sv-identity (z-index 15) when present, so a
   targeted announcement visually covers the username the way "kortti
   käyttäjän nimen päälle" describes, rather than appearing beside it.
   Kokeiltiin myös nimen yläpuolella (2026-09-25): kortti mahtuu sinne vain
   heroa kasvattamalla, ja käyttäjän arvio oli että nimen päällä se sekä
   näyttää paremmalta että huomataan varmemmin. Yksi kortti kerrallaan
   riittää tekemään siitä siistin — ks. svInfoCardQueue. */
.sv-info-card {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.7rem;
    z-index: 30;
    background: rgba(8,11,18,0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 1.3rem 1.3rem 1.2rem;
    box-shadow: var(--st-varjo-kelluva);
}
.sv-info-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    color: #fff;
    text-align: center;
    margin-bottom: 0.55rem;
}
.sv-info-card-body {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.6;
    font-family: var(--st-font-body);
    color: rgba(255,255,255,0.72);
    margin: 0 0 1.1rem;
    white-space: pre-line;
}
.sv-info-card-btn {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.75rem;
    color: #14161c;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    cursor: pointer;
}

/* Identity — bottom-left over the hero photo, Strawberry-style */
.sv-identity {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 2.6rem;
    z-index: 15;
    text-align: center;
}
.sv-username {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* Pilleri oli 21 px korkea — sormelle liian ohut napiksi, joka avaa
   jäsenyysnäkymän. Korkeus tulee täytteestä eikä pseudoelementistä:
   venytetty osuma-alue, joka ei näy, saa napin tuntumaan siltä kuin se
   osuisi vähän miten sattuu. Nyt se on sen kokoinen kuin miltä näyttää. */
.sv-tier {
    display: inline-block;
    margin-top: 0.5rem;
    background: rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 0.62rem 0.9rem;
    font-size: 0.75rem;
    color: #fff;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 700;
    font-family: var(--st-font-body);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.sv-tier:hover { background: rgba(255,255,255,0.22); }

/* Nappi kertoo kahta eri asiaa, joten se näyttää kahdelta eri asialta.
 *
 * Jäsenenä se on tila: kultainen täppä ja taso. Ilman jäsenyyttä se on
 * kehotus, ja silloin se on lasia — ei kultaa, jota ei ole vielä ostettu.
 * Teksti tulee molemmissa samasta paikasta (settings.proMember /
 * settings.free), tässä päätetään vain ulkoasu. */
.sv-tier[data-taso="corporate"] {
    /* Corporate omalla värillään, sama kuin jäsenyyssivun Corporate-kortti
       (.sv-tier-card[data-taso="corporate"]). */
    --st-kulta-rgb: 155, 124, 240;
}
.sv-tier[data-taso="corporate"][data-jasen="1"] { color: #e6ddff; }
.sv-tier[data-jasen="1"] {
    background: linear-gradient(145deg,
        rgba(var(--st-kulta-rgb), 0.34) 0%,
        rgba(var(--st-kulta-rgb), 0.16) 100%);
    border-color: rgba(var(--st-kulta-rgb), 0.62);
    color: #f7e4b4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.sv-tier[data-jasen="1"]:hover {
    background: linear-gradient(145deg,
        rgba(var(--st-kulta-rgb), 0.46) 0%,
        rgba(var(--st-kulta-rgb), 0.24) 100%);
}
/* Itse täppä: pieni umpinainen piste tekstin edessä, ei tarraa. */
.sv-tier[data-jasen="1"]::before {
    content: '';
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.42rem;
    vertical-align: 0.04rem;
    border-radius: 50%;
    background: rgb(var(--st-kulta-rgb));
    box-shadow: 0 0 6px rgba(var(--st-kulta-rgb), 0.85);
}
.sv-tier[data-jasen="0"] {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
}
.sv-tier[data-jasen="0"]:hover { background: rgba(255, 255, 255, 0.18); }

/* Stormi jäsenyys sheet — reuses .sv-cards-sheet's chrome; steps below are
   plain show/one-at-a-time toggles, same pattern as npProfessionPicker vs
   npCustomProfession. */
.sv-member-step { padding-top: 0.5rem; }
.sv-member-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1.4rem 1.2rem;
    margin-bottom: 1.6rem;
    text-align: center;
}
.sv-member-card-success { border-color: rgba(120,200,150,0.35); background: rgba(120,200,150,0.08); }
.sv-member-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    color: #fff;
    margin-bottom: 0.6rem;
}
.sv-member-card-body {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.6;
    font-family: var(--st-font-body);
    color: rgba(255,255,255,0.65);
    margin: 0;
}
.sv-member-card-body strong { color: #fff; font-weight: 600; }
.sv-member-card .sv-member-input { margin-top: 1rem; }
.sv-member-price {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255,255,255,0.55);
    margin-top: 0.8rem;
}
.sv-member-current-pill {
    display: inline-block;
    margin-top: 0.8rem;
    background: rgba(120,200,150,0.15);
    border: 1px solid rgba(120,200,150,0.4);
    border-radius: 20px;
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
    color: #9be0b3;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 700;
    font-family: var(--st-font-body);
}
.sv-member-current-strip {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    margin: 0.5rem 0 1.2rem;
}
/* Kukin tieto omalle rivilleen: taso, rajat, voimassaolo. Yhtenä
   välipistelauseena tämä kiertyi kapealla näytöllä joka tapauksessa
   kolmeksi riviksi, mutta mielivaltaisista kohdista. */
.sv-member-strip-rivi {
    display: block;
    line-height: 1.55;
}
.sv-member-current-strip strong { color: #fff; font-weight: 600; }
.sv-member-success-banner {
    background: rgba(120,200,150,0.12);
    border: 1px solid rgba(120,200,150,0.35);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #fff;
    font-family: var(--st-font-body);
    margin-bottom: 1.2rem;
}
.sv-member-dpa {
    margin: 0.6rem auto 0;
    max-width: 19rem;
    text-align: center;
    font: 300 0.8rem/1.5 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255,255,255,0.55);
}
.sv-member-dpa a { color: rgba(255,255,255,0.75); }
.sv-member-code-error {
    font-size: 0.8rem;
    color: #e08a8a;
    text-align: center;
    font-family: var(--st-font-body);
    margin: 0.6rem auto 0;
    max-width: 19rem;
}
.sv-member-label {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255,255,255,0.55);
    text-align: center;
    margin-bottom: 0.8rem;
}
.sv-member-hint {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.6;
    font-family: var(--st-font-body);
    color: rgba(255,255,255,0.55);
    text-align: center;
    max-width: 19rem;
    margin: 0 auto 1.2rem;
}
.sv-member-input {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    text-align: center;
}
.sv-member-input::placeholder { color: rgba(255,255,255,0.5); }
.sv-member-input:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.sv-member-btn {
    display: block;
    width: 100%;
    max-width: 19rem;
    margin: 1.6rem auto 0;
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.85rem;
    color: #14161c;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.sv-member-back-link {
    display: block;
    margin: 1rem auto 0;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.sv-member-back-link:hover { color: rgba(255,255,255,0.7); }

/* Body — everything below the hero. Pulled up over the hero's bottom edge
   with rounded top corners, so the (dimmed) photo appears to continue
   behind it, like a bottom sheet sliding up over the header photo. */
.sv-body {
    position: relative;
    z-index: 10;
    /* Ei omaa taustaa: sovelluksen yhteinen taustakuva näkyy sellaisenaan,
       sama kuin Etsissä, Viesteissä, Luo-sivulla ja julkisessa profiilissa.
       Tässä oli ensin umpinainen #05070d ja sitten hento tummennus, mutta
       molemmat näkyivät omana välitaustanaan Työhuoneen takana ja
       katkaisivat yhtenäisyyden (käyttäjä 30.9.2026). Kortit ovat itse
       tummia, joten teksti pysyy luettavana ilman tummennusta.

       Pyöristys ja negatiivinen ylämarginaali jäävät: ne liittävät rungon
       avatariin, eivätkä näy nyt kun pintaa ei ole. */
    background: none;
    border-radius: 24px 24px 0 0;
    margin-top: -1.5rem;
    padding-top: 0.6rem;
    padding-bottom: var(--st-alapalkki-tila);
}

/* Pending "invited to co-manage a card" invites — small banners above the
   Ammattikortit row, only rendered when there are any. */
.sv-manager-invites {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.2rem 1.2rem 0;
}
/* Tyhjänä se vei silti ylätäytteensä verran tilaa, ja niitä on kaksi
   peräkkäin: 38 px sivun kalleimmasta kohdasta ilman mitään näkyvää. */
.sv-manager-invites:empty { display: none; }
.sv-sposti-valinta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.4rem 1.2rem 0.6rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
}
.sv-sposti-valinta-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sv-sposti-valinta-otsikko { color: #fff; font: 0.82rem var(--st-font-body); }
.sv-sposti-valinta-kuvaus { color: rgba(255,255,255,0.58); font: 0.8rem/1.4 var(--st-font-body); }
.sv-sposti-kytkin {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    position: relative;
    width: 2.6rem;
    height: 1.5rem;
    margin: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: background 0.18s ease;
}
.sv-sposti-kytkin::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
}
.sv-sposti-kytkin:checked { background: var(--st-accent, #5b7fe0); }
.sv-sposti-kytkin:checked::after { transform: translateX(1.1rem); }
.sv-hakemus-ilmoitukset { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.2rem 0; margin-bottom: 0.8rem; }
.sv-hakemus-ilmoitukset:empty { display: none; }
.sv-hakemus-ilmoitus {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.sv-hakemus-ilmoitus .sv-hakemus-ilmoitus-maara { position: static; flex-shrink: 0; min-width: 20px; height: 20px; font-size: 0.8rem; box-shadow: none; }
.sv-hakemus-ilmoitus-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sv-hakemus-ilmoitus-otsikko { font-family: var(--st-font-body); font-size: 0.82rem; }
.sv-hakemus-ilmoitus-kohde { font-family: var(--st-font-body); font-size: 0.8rem; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-hakemus-ilmoitus svg { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-card-row-hakemukset {
    align-self: flex-start;
    min-height: 34px;
    margin-top: 0.35rem;
    padding: 0.22rem 0.75rem;
    border: 0;
    border-radius: 999px;
    /* Tummempi punainen: valkoinen teksti #ff453a:n päällä jäi 3,4:1:een. */
    background: #c62d24;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    cursor: pointer;
}
.sv-manager-invite-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}
.sv-manager-invite-text {
    color: #fff;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    line-height: 1.4;
    margin-bottom: 0.7rem;
}
.sv-manager-invite-text b { font-weight: 700; }
.sv-manager-invite-actions { display: flex; gap: 0.6rem; }
.sv-manager-invite-accept,
.sv-manager-invite-decline {
    flex: 1;
    border-radius: 9px;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    cursor: pointer;
    border: none;
}
.sv-manager-invite-accept { background: #4a9eff; color: #fff; }
.sv-manager-invite-decline { background: rgba(255,255,255,0.1); color: #fff; }

/* Jäsenyys ja maksut — a single clickable summary row (same white-card
   language as .sv-stat-card, just one line instead of a photo stack) that
   opens the existing svMembershipSheet. */
.sv-member-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin: 0.7rem 1.2rem 1.6rem;
    background: #fff;
    border: 1px solid #e5e7ea;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 28px -10px rgba(0,0,0,0.55);
}
.sv-member-summary-row:hover { border-color: #c7cbd2; }
.sv-member-summary-main { display: flex; flex-direction: column; gap: 0.2rem; }
.sv-member-summary-taso {
    font-size: 0.92rem;
    font-weight: 700;
    color: #14161c;
    font-family: var(--st-font-body);
}
.sv-member-summary-detail {
    font-size: 0.8rem;
    color: #8a8f9a;
    font-family: var(--st-font-body);
}
.sv-member-summary-chevron { width: 18px; height: 18px; stroke: #b8bcc4; flex-shrink: 0; }

/* Corporate seat roster, inside svMembershipSheet's "active" step. */
.sv-corporate-roster { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.sv-corporate-roster-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
}
.sv-corporate-roster-name { font-size: 0.82rem; color: #fff; font-family: var(--st-font-body); }
.sv-corporate-roster-status { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 0.15rem; }
.sv-corporate-roster-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
}
.sv-corporate-roster-remove:hover { color: #ff6b6b; }

/* Ammattikortit heading — big, styled section title (Airbnb-style) */
/* Heading row — same typographic treatment as the info-section labels
   below (Kerro itsestäsi / Haluaisin), just larger. */
/* Palkki on koko se kaista, jonka käyttäjä mieltää otsikoksi — ei pelkkä
   tekstirivi. Aiemmin palkki oli 20 px ja sen yläpuolella oli 34 px
   kutistettua korttia, joka näytti tyhjältä mutta avasi klikattuna oman
   osionsa (Ammattikortit-kortti avasi ammattikorttisivun). Osioon tähtäävä
   painallus osui siis helposti väärään paikkaan. Pystypehmuste siirrettiin
   kutistetusta kortista tänne, joten osioiden väli pysyi ennallaan mutta
   koko väli kuuluu nyt palkille. */
.sv-cards-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.2rem;
    cursor: pointer;
}
.sv-cards-heading {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    color: #8a8f9a;
}

/* Collapsible stat-card sections — the heading row becomes a small tappable
   bar with a chevron; tapping it toggles its immediate next-sibling
   .sv-stat-card (see the generic wiring in initStatCardCollapsibles). All
   start collapsed (inline display:none on the .sv-stat-card in spa.html) to
   keep the profile compact. */
.sv-cards-heading-collapsible {
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* ── Tarkentava haku ─────────────────────────────────────────────────
   Palkki tuloslistan yläpuolella. Vastattuna korostussininen reunus: se
   kertoo että lista on rajattu, jottei vähäisiä tuloksia ihmettele. */
/* Tarkentava haku -nappi tuloslistan yllä.
   Oli koko ruudun levyinen hillitty palkki eikä erottunut mistään
   (käyttäjä 29.9.2026). Nyt sisällön levyinen vaalea nappi keskellä:
   pieni, mutta ainoa kirkas asia siinä kohtaa ruutua, joten sen ohi ei
   mene. Suurennuslasi vaihtui liukusäädinkuvakkeeksi — haku on jo tehty,
   tämä on sen rajaamista.

   Väri oli aiemmin sininen täyttö, mutta se luki omana teemanaan eikä
   Stormina (käyttäjä 30.9.2026). Sama valkoinen nappi kuin muuallakin
   sovelluksessa erottuu yhtä hyvin tummaa vasten. */
.tk-palkki-rivi { display: flex; justify-content: center; }
.tk-palkki {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Kattoleveys, jottei pitkä tiivistelmä venytä nappia ruudun levyiseksi
       laatikoksi: silloin se lakkaa lukemasta nappina. */
    max-width: 80%;
    /* Ilmaa yläpuolella olevaan otsikkoviivaan: nappi oli kiinni siinä. */
    margin: 0.9rem auto 0.35rem;
    padding: 0.45rem 0.95rem;
    /* Neliömäinen pyörein kulmin eikä pilleri: pilleri näytti napilta muiden
       nappien joukossa, tämä lukee omana asianaan. */
    border: 1px solid #fff;
    border-radius: 12px;
    background: #fff;
    color: #14161c;
    cursor: pointer;
    font: 600 0.8rem/1.25 var(--st-font-body);
}
.tk-palkki:hover { background: #f2f2f5; border-color: #f2f2f5; }
.tk-palkki:active { transform: scale(0.97); }
.tk-palkki:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Vastattuna sävy kääntyy: tumma pohja ja vaalea reunus kertovat että rajaus
   on päällä, eikä nappi enää kutsu vaan raportoi. Myös muoto muuttuu —
   pilleri erottaa tilan jo kaukaa, eikä eroa tarvitse lukea tekstistä. */
.tk-palkki-vastattu {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #e7e9ee;
}
.tk-palkki-vastattu:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); }
.tk-palkki-ikoni { width: 14px; height: 14px; flex-shrink: 0; }
.tk-palkki-teksti { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-palkki-tyhjenna {
    flex-shrink: 0;
    margin-left: 0.1rem;
    padding: 0 0.2rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1;
}
.tk-palkki-tyhjenna:hover { color: #fff; }
.tk-johdanto {
    margin: 0 0 1.2rem;
    font: 300 0.82rem/1.55 var(--st-font-body);
    color: #a8acb5;
    text-align: center;
}

/* ── Ilmoitukset ja kyselyt Stormi Assistantissa ─────────────────────
   Olivat ennen profiilikuvan päällä yksi kerrallaan. Assistantissa ne eivät
   peitä mitään, joten ne näytetään listana — annostelu yhdeksi kerrallaan
   olisi täällä vain tapa piilottaa loput. Häly on palkin merkki. */
.stormi-assistant-ilmoitukset {
    padding: 0.8rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sa-ilmoitus {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(91, 127, 224, 0.4);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(91, 127, 224, 0.14), rgba(255, 255, 255, 0.03));
}
.sa-ilmoitus-otsikko {
    font: 700 0.82rem/1.3 var(--st-font-body);
    color: #fff;
}
.sa-ilmoitus-teksti {
    margin: 0.35rem 0 0.8rem;
    font: 300 0.82rem/1.5 var(--st-font-body);
    color: rgba(255, 255, 255, 0.72);
    white-space: pre-line;
}
.sa-ilmoitus-napit { display: flex; align-items: center; gap: 0.6rem; }
.sa-ilmoitus-nappi {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #14161c;
    cursor: pointer;
    font: 600 0.82rem/1 var(--st-font-body);
}
.sa-ilmoitus-myohemmin {
    flex-shrink: 0;
    padding: 0.6rem 0.3rem;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font: 600 0.8rem/1 var(--st-font-body);
}
.sa-ilmoitus-myohemmin:hover { color: #fff; }

/* ── Profiilin osioruudukko ──────────────────────────────────────────
   Kolme ruutua rivissä, samalla sisennyksellä kuin muutkin kortit. Ruutu on
   koko osion sisäänkäynti: nimi, määrä ja yksi painallus perille. */
/* Kaksi ruutua rivissä.
   Kolme mahtui kun ruutuja oli kolme; neljäs jäi yksin omalle rivilleen ja
   näytti unohtuneelta. Kaksi menee tasan, ja samalla ruutu saa kaksi kertaa
   leveyttä — luku ja nimi mahtuvat ilman että ne kutistuvat. */
.sv-ruudukko {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin: 0.4rem 1.2rem 1.4rem;
}
.sv-ruutu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 7.2rem;
    padding: 0.95rem 0.95rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sv-ruutu:hover { border-color: rgba(91, 127, 224, 0.7); background: rgba(255, 255, 255, 0.07); }
.sv-ruutu:active { transform: scale(0.98); }
.sv-ruutu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sv-ruutu-ikoni { width: 23px; height: 23px; opacity: 0.75; flex-shrink: 0; }
.sv-ruutu-nimi {
    display: block;
    font: 600 0.82rem/1.25 var(--st-font-body);
    overflow-wrap: anywhere;
}
/* Määrä on ruudun pääasia, joten se on nimeä isompi. Nolla himmeänä: se on
   tieto, ei kehotus. */
.sv-ruutu-arvo {
    display: block;
    font: 700 1.25rem/1.1 var(--st-font-body);
    color: #fff;
}
/* Tyhjä osio jättää alaosan tyhjäksi (svRenderRuudukko): luku ilmestyy
   vasta ensimmäisen kohteen myötä. */
/* Saatavuuden tila on sanaa eikä lukua — pienemmällä, jottei se rivity. */
.sv-ruutu-arvo:not(:empty) { letter-spacing: normal; }
.sv-ruudukko .sv-ruutu:nth-child(2) .sv-ruutu-arvo { font-size: 0.92rem; line-height: 1.3; }

/* Kokoontaittuvat palkit jäävät DOMiin (arkit ja saatavuuden editori elävät
   niiden sisällä) mutta pois näkyvistä — ruudukko korvaa ne. Rajaus
   #settings-vieween, koska Työhuone käyttää samaa palkkia omiin osioihinsa.
   Saatavuuden palkki palautetaan näkyviin sv-rivi-nakyy-luokalla silloin kun
   sen editori on auki, jotta osiolla on otsikko ja sulkunuoli. */
#settings-view .sv-cards-heading-row.sv-cards-heading-collapsible { display: none; }
#settings-view .sv-cards-heading-row.sv-cards-heading-collapsible.sv-rivi-nakyy { display: flex; }

/* Osion sisällön määrä otsikon vieressä. Hillitty: se on tieto, ei
   kehotus — korostus kuuluu ilmoitusmerkeille. */
.sv-cards-heading-luku {
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #8a8f9a;
    font: 700 0.75rem/1.6 var(--st-font-body);
    letter-spacing: normal;
}
/* Otsikko ja luku vierekkäin, nuoli pysyy oikeassa reunassa. */
.sv-cards-heading-row { gap: 0.3rem; }
.sv-cards-heading-row > .sv-cards-heading { flex: 0 1 auto; }
.sv-cards-heading-row > .sv-cards-heading-luku { margin-right: auto; }

.sv-cards-heading-chevron {
    background: none;
    border: none;
    /* Oli 24 × 24 px. Täyte kasvaa, negatiivinen marginaali pitää
       otsikkorivin korkeuden ennallaan. */
    padding: 0.75rem;
    margin: -0.75rem -0.75rem -0.75rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.sv-cards-heading-chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #6b7280;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sv-cards-heading-collapsible.sv-cards-heading-open .sv-cards-heading-chevron {
    transform: rotate(180deg);
}

/* Ammattikortit summary card — Pääkortti photo on the left with a small
   count badge overlaid on its bottom-left corner, and a big rounded-rect
   "Lisää ammattikortti" tile filling the rest of the card on the right.
   The bell (future "cards worth updating" notifications) is hidden by
   default and only ever shown by toggling its inline display — it has no
   permanent slot in the layout, just an absolutely-positioned corner badge
   on the card itself. Tapping the photo opens the same reorder/edit sheet
   the old "Katso kaikki" link used (see svReady wiring); the add button is
   its own tap target and stops that click from bubbling. */
/* Two equal-width halves (grid, not flex) so the center divider and the
   count both land on the true midpoint — a fixed-width left half sized to
   the photo stack would push the divider off-center once combined with the
   count's own natural width on the right. */
.sv-stat-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.9rem;
    margin: 0 1.2rem 1.6rem;
    background: #fff;
    border: 1px solid #e5e7ea;
    border-radius: 18px;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 28px -10px rgba(0,0,0,0.55);
}
/* Collapsible sections — all five (Ammattikortit/Tähtihetket/Lokaatiot/
   Projektit/Minulta löytyy) toggle via .sv-cards-heading-collapsible: closed
   state has max-height:0 + overflow hidden so it truly takes zero space
   (margins included, not just clipped content), animated open by JS setting
   an inline max-height to the card's own scrollHeight — see the click
   handler in initSettingsView. The open state's extra margin-top is the gap
   requested between the heading bar and the card so it doesn't look glued
   to the heading text. */
/* Kutistettuna kortti ei vie tilaa eikä ota vastaan osumia. Kumpikin on
   tarpeen: max-height: 0 kutistaa vain sisällön, joten pehmuste jäi
   näkymättömäksi mutta klikattavaksi kaistaksi palkkien väliin — ja koska
   kortin klikkaus avaa osionsa (Ammattikortit avasi ammattikorttisivun),
   osioon tähtäävä painallus avasi väärän näkymän. */
.sv-cards-heading-collapsible + .sv-stat-card {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.32s ease, opacity 0.28s ease, margin-top 0.32s ease,
                margin-bottom 0.32s ease, padding-top 0.32s ease, padding-bottom 0.32s ease;
}
.sv-cards-heading-collapsible + .sv-stat-card.sv-stat-card-open {
    margin-top: 0.7rem;
    margin-bottom: 1.6rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top-width: 1px;
    border-bottom-width: 1px;
    opacity: 1;
    pointer-events: auto;
}
.sv-stat-card:hover { border-color: #c7cbd2; }
.sv-stat-card-photo-wrap {
    position: relative;
    justify-self: center;
    width: 5.6rem;
    height: 4.6rem;
    display: flex;
    align-items: center;
}
/* Fanned deck of up to 3 card photos — the Pääkortti sits centered and on
   top, the next two peek out rotated behind it, so the summary card reads
   as "a hand of cards" at a glance instead of one lone circle + a numeral.
   Items are generated in renderStatCard(); each gets a --i custom property
   (0 = front/Pääkortti) that drives its offset, rotation and stacking. */
.sv-stat-photo-stack {
    position: relative;
    width: 100%;
    height: 100%;
}
.sv-stat-photo-stack-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(160deg, #e7e9ed, #cfd3da) center/cover no-repeat;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #dde1e6, 0 6px 14px -6px rgba(0,0,0,0.4);
    /* --i minus the group's own midpoint ((--n - 1) / 2) centers the fan as
       a whole regardless of how many photos there are (1, 2 or 3) — using
       --i alone made the group drift right of the container it's centered
       in, worse the more cards there were. */
    transform:
        translate(-50%, -50%)
        translateX(calc((var(--i) - (var(--n, 3) - 1) / 2) * 0.9rem))
        rotate(calc(var(--i) * 11deg));
    z-index: calc(10 - var(--i));
    transition: transform 0.2s ease;
}
.sv-stat-photo-stack-item:not(:first-child) { filter: brightness(0.88); }
/* Zero-locations state — one plain circle with a "+" instead of a fanned
   photo deck (there's nothing to fan yet). Reuses the same item sizing so
   it lines up exactly where the first real photo would later appear. */
.sv-stat-photo-stack-item-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sv-stat-photo-stack-item-empty svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke: #9aa0ab;
    stroke-width: 2;
    fill: none;
}
.sv-stat-card:hover .sv-stat-photo-stack-item {
    transform:
        translate(-50%, -50%)
        translateX(calc((var(--i) - (var(--n, 3) - 1) / 2) * 1.3rem))
        rotate(calc(var(--i) * 11deg));
}
.sv-stat-bell {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    color: #14161c;
    z-index: 1;
}
.sv-stat-bell svg { width: 22px; height: 22px; }
/* Thin, deliberately not-full-height divider — pinned to the exact
   horizontal center of the card via absolute positioning (left: 50%)
   rather than wherever the flex flow happens to land it, so it stays
   centered regardless of how wide the photo stack or the count text are. */
.sv-stat-card-divider {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2.8rem;
    border-radius: 2px;
    background: #c7cbd2;
    transform: translate(-50%, -50%);
}
.sv-stat-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.sv-stat-card-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}
.sv-stat-card-count #svStatCount {
    font-family: var(--st-font-display, 'Arial Black', Arial, sans-serif);
    font-size: 1.6rem;
    letter-spacing: -0.02rem;
    color: #6b7280; /* valkoisella kortilla #b6bac2 oli 1,95:1 */
}
.sv-stat-card-count-label {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    color: #6b7280;
}

/* Small heart-count chip beneath the count — a quiet tie-in to Stormi
   Credits (every received like is worth credits), shown only once the
   owner has at least one like across their cards. */
.sv-stat-likes-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: #6b7280;
}
.sv-stat-likes-chip svg {
    width: 12px;
    height: 12px;
    fill: #e0567c;
    stroke: none;
    flex-shrink: 0;
}
.sv-stat-likes-chip #svStatLikesCount {
    font-weight: 700;
    color: #14161c;
}

/* Cast & Crew page (moviecredits-view) — see #mcCastAddInput/#mcCrewRoles
   in spa.html and initMovieCreditsView() in js/spa.js. */
.mc-add-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 19rem;
    margin: 0 auto 0.5rem;
}
.mc-add-row .np-field-input { width: 100%; box-sizing: border-box; }
/* Extra breathing room between the name and role/title fields specifically,
   on top of .mc-add-row's own gap — the button's spacing above stays as is. */
.mc-add-row .np-field-input + .np-field-input { margin-top: 0.5rem; }
.mc-add-btn {
    background: #14161c;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.6rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--st-font-body);
}
/* Plain name + × row — no photo, no card chrome (see mcRenderList in
   js/spa.js). These are typed names, not real ammattikortti profiles, so a
   profile-card look was misleading — this just reuses the same look as the
   fixed Crew role rows above it. */
.mc-simple-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    max-width: 19rem;
    margin: 0 auto 0.4rem;
    padding: 0.55rem 0.8rem;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
}
.mc-simple-name {
    font-size: 0.82rem;
    color: #14161c;
    font-family: var(--st-font-body);
}
.mc-simple-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #a8acb5;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
}
.mc-simple-remove:hover { color: #d32f2f; }
.mc-role-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 19rem;
    margin: 0 auto 0.9rem;
}
.mc-role-label {
    flex: 0 0 6.2rem;
    margin-top: 0.5rem; /* lines up with the first entry/input's text, not the whole stack */
    font-size: 0.8rem;
    font-weight: 700;
    color: #14161c;
    font-family: var(--st-font-body);
}
/* One role's already-committed names (mc-role-entry) plus the always-
   trailing empty input for the next one — see mcRenderCrewRoles(). */
.mc-role-entries {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mc-role-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    color: #14161c;
    font-family: var(--st-font-body);
}
.mc-role-input {
    width: 100%;
    box-sizing: border-box;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    color: #14161c;
    font-family: var(--st-font-body);
}
.mc-role-input::placeholder { color: #a8acb5; }
.mc-role-linked-note {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.3rem;
}

/* Add profile button */
.sv-add-btn {
    display: block;
    width: fit-content;
    margin: 0 auto 1.6rem;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 0.5rem 1.15rem;
    font-size: 0.8rem;
    color: #05070d;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.01em;
    font-weight: 700;
    text-decoration: none;
    font-family: var(--st-font-body);
    transition: opacity 0.15s ease;
}
.sv-add-btn:hover {
    opacity: 0.85;
    color: #05070d;
}

/* Personal info section (Kerro itsestäsi / Haluaisin) — flat rows, edited via the gear menu */
.sv-info-section {
    padding: 0;
    margin-top: 0;
}
/* .sv-cards-heading-row and .sv-stat-card already carry their own 1.2rem
   left/right margin/padding (see above) so they line up flush with
   Ammattikortit's, which sits outside .sv-info-section — so .sv-info-row
   needs that same 1.2rem applied directly instead of inheriting it from a
   now-zero parent padding, or it would sit flush left with nothing. */
.sv-info-row { padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sv-info-row:last-child { border-bottom: none; }
.sv-info-label {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
    /* Harmaa 3 on vaaleiden pintojen sävy: tummalla se jää 4,17:1:een. */
    color: var(--st-grey-2);
    font-weight: 700;
    margin-bottom: 0.45rem;
    font-family: var(--st-font-body);
}
.sv-info-value {
    font-size: 0.82rem;
    color: #f2f2f5;
    font-family: var(--st-font-body);
    letter-spacing: normal;
    line-height: 1.55;
    white-space: pre-line;
}
.sv-info-value.sv-info-empty { color: #556; font-style: italic; }

/* Minusta/Haluaisin inline editing — display mode shows the text with a
   small pencil to switch to edit mode; an empty field skips straight to an
   open textarea since there's nothing to display yet (see
   svRenderAboutField in js/spa.js). */
.sv-about-display { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.sv-about-display .sv-info-value { flex: 1; }
.sv-about-edit-btn {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: #9aa0ad;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 1,8rem näyttää oikealta tekstin vieressä, mutta sormelle se on alle 32 px:
   kosketusalue venytetään pseudoelementillä (savutesti T8, 8.10.2026). */
.sv-about-edit-btn { position: relative; }
.sv-about-edit-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.sv-about-edit-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.sv-about-edit-btn svg { width: 12px; height: 12px; }
.sv-about-textarea {
    display: block;
    width: 100%;
    min-height: 6rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    color: #f2f2f5;
    font-size: 0.82rem;
    line-height: 1.55;
    font-family: var(--st-font-body);
    box-sizing: border-box;
    resize: vertical;
}
.sv-about-textarea::placeholder { color: #8a8f9a; }
.sv-about-textarea:focus { outline: none; border-color: rgba(255,255,255,0.4); }

/* Card management sheet — full-screen overlay for reordering / picking the Pääkortti */
/* ===================== Kultainen kutsu ==============================
   Gold on the app's own near-black, which is where the metal reads as
   metal — a gradient with a light source top-left, a warm rim, and a soft
   outer glow, rather than a flat yellow fill. */

/* A thin gold ring at the right edge of the identity block, level with the
   name — .sv-identity is the positioning context, and the name sits on its
   first line, so top-aligning here puts the ring beside it. Restrained on
   purpose: a glossy sphere read as a game token, where the point is a mark
   of standing. */
/* Centred above the name, in normal flow so .sv-identity's text-align does
   the centring. Square box so border-radius:50% is a circle, not an oval.
   Two concentric hairlines with a gap between them — the engraved edge of a
   medal — plus a faint warm sheen from the top-left, rather than one flat
   outline. */
.sv-kutsu-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto 0.7rem;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #e9cd8c;
    border: 1px solid rgba(226, 190, 116, 0.85);
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 238, 196, 0.16) 0%, rgba(255, 238, 196, 0) 58%),
        rgba(10, 8, 5, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(212, 163, 58, 0.2);
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Inner hairline, inset to leave a ring of ground between the two lines. */
.sv-kutsu-orb::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(226, 190, 116, 0.35);
    pointer-events: none;
}
.sv-kutsu-orb svg { width: 1.05rem; height: 1.05rem; }
.sv-kutsu-orb:hover {
    color: #fdf2d2;
    border-color: #f3dca6;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 22px rgba(240, 210, 130, 0.42);
}
.sv-kutsu-orb:hover::after { border-color: rgba(243, 220, 166, 0.55); }
/* Count rather than a bare dot — how many invitations are waiting is the
   thing worth knowing. min-width + pill radius so a two-digit count widens
   the badge instead of spilling out of a fixed circle. */
/* Huomiomerkki mitalin metallista eikä punaisena pallona: punainen
   ilmoituspallo rikkoi mitalin ilmeen (käyttäjä 5.10.2026). Kultainen helmi
   ja mitalin hidas hehku kertovat saman tyylikkäämmin. */
.sv-kutsu-orb-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 0.9rem;
    height: 0.9rem;
    padding: 0 0.22rem;
    border-radius: 0.5rem;
    background: radial-gradient(circle at 35% 30%, #fff4d6 0%, #f1d58f 38%, #c9952e 100%);
    box-shadow: 0 0 8px rgba(233, 196, 110, 0.75);
    color: #1c1406;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--st-bg, #05070d);
    box-sizing: border-box;
}

.sv-kutsu-sheet {
    position: fixed;
    inset: 0;
    z-index: 10950;
    background: var(--st-bg, #05070d);
    display: flex;
    flex-direction: column;
}
/* Same proportions and typography as .sv-gear-sheet-header — this panel
   should read as part of the app, not a separate product — only in gold on
   the dark ground. Sits lower than the standard sheet so the title clears
   the close button comfortably. */
/* Three columns — close, title, matching spacer — so the title is optically
   centred and shares a row with the button. Absolute positioning would mean
   guessing a top offset that only holds at one font size. */
.sv-kutsu-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 2.05rem 1fr 2.05rem;
    align-items: center;
    /* Bottom padding keeps the divider clear of the close button without
       leaving a gap that reads as empty. */
    padding: 2.2rem 1rem 1.35rem;
    border-bottom: 1px solid rgba(255, 214, 122, 0.16);
}
.sv-kutsu-header .sv-gear-sheet-close { position: static; }
.sv-kutsu-header .sv-kutsu-title { grid-column: 2; text-align: center; }
/* Sub-pages over the panel (create form, guest list) go back rather than
   close, so they carry the app's own back chevron — .np-back-btn's shape and
   size, recoloured for the dark gold ground it sits on here. */
.sv-kutsu-back {
    grid-column: 1;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: rgba(226, 186, 100, 0.09);
    border: 1px solid rgba(226, 186, 100, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.sv-kutsu-back svg { width: 14px; height: 14px; fill: none; stroke: #edcf8c; stroke-width: 2; }
.sv-kutsu-title {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #e0bd74;
}
/* The sub-page's own name, set like the section headings inside it rather
   than like the panel's own title — it labels the page, it isn't the
   feature's masthead. */
.sv-kutsu-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    transform: scaleX(0.94);
}
.sv-kutsu-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.2rem 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}
.sv-kutsu-tabs a { color: rgba(255,255,255,0.55); cursor: pointer; }
.sv-kutsu-tabs a.active { color: #f0cf82; font-weight: 700; }
.sv-kutsu-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.8rem 1.6rem 3.5rem; }
.sv-kutsu-intro {
    color: rgba(255,255,255,0.62);
    font-size: 0.82rem;
    line-height: 1.6;
    font-family: var(--st-font-body);
    text-align: center;
    max-width: 21rem;
    margin: 0 auto 1.6rem;
}
.sv-kutsu-optout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 2rem;
    cursor: pointer;
}
.sv-kutsu-empty {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    text-align: center;
    padding: 2.5rem 0;
}

/* The invitation card. Deliberately taller than an ammattikortti — image,
   title, description, time and two actions all have to fit without the
   description being clipped to one line. */
.sv-kutsu-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2.2rem;
    background: linear-gradient(160deg, #1c1710 0%, #120f0b 60%, #0d0b08 100%);
    border: 1px solid rgba(226, 186, 100, 0.38);
    box-shadow: var(--st-varjo-nostettu);
}
.sv-kutsu-card:last-child { margin-bottom: 0; }
/* Solid gold band across the top — the card says what it is once, here, so
   the body can go straight to the event. The inset shadows give the bar
   itself a rolled metal edge: dark along the top where it turns away from
   the light, bright along the bottom. */
.sv-kutsu-card-band {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(180deg, #f0d494 0%, #d9ae55 52%, #b98c2e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 214, 0.55),
        inset 0 -1px 0 rgba(120, 84, 18, 0.4);
}
/* Engraved, not printed: the letters are cut into the metal, so they take
   the band's own dark tone and catch a highlight on the lower edge of the
   groove where the light reaches. A white fill would read as a sticker on
   top of the bar instead of part of it. */
.sv-kutsu-card-band-title {
    color: #8a6414;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: normal;
    text-indent: 0.2em;      /* balances the trailing letter-spacing */
    text-transform: none;
    font-family: 'Times New Roman', Georgia, serif;
    text-shadow:
        0 1px 0 rgba(255, 248, 224, 0.7),
        0 -1px 0 rgba(96, 66, 10, 0.35);
}
.sv-kutsu-card-photo {
    height: 11rem;
    background-size: cover;
    background-position: center;
    background-color: #241d12;
}
.sv-kutsu-card-body { padding: 1.15rem 1.15rem 1.3rem; }
.sv-kutsu-card-title {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.2;
    color: #fdf3d8;
    margin-bottom: 0.45rem;
}
.sv-kutsu-card-from {
    color: rgba(226, 190, 116, 0.75);
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    margin: -0.15rem 0 0.55rem;
}
.sv-kutsu-card-desc {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    line-height: 1.5;
    font-family: var(--st-font-body);
    margin-bottom: 0.7rem;
}
.sv-kutsu-card-meta {
    color: #cfa955;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    margin-bottom: 0.25rem;
}
/* How full the event is. Sits above the seat count rather than replacing it —
   the bar carries the pace, the numbers carry the fact. */
.sv-kutsu-mittari {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
    margin: 0.85rem 0 0.5rem;
}
.sv-kutsu-mittari-taytto {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #d9ae4c, #f7e2a4);
    /* Animated so a card that fills while it is on screen shows the movement
       rather than jumping. */
    transition: width 0.4s ease;
}
.sv-kutsu-mittari-tayttyy .sv-kutsu-mittari-taytto {
    background: linear-gradient(90deg, #e08a3c, #f4c06a);
}
.sv-kutsu-card-seats {
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    margin-bottom: 1rem;
}
.sv-kutsu-card-actions { display: flex; gap: 0.6rem; }
.sv-kutsu-accept, .sv-kutsu-decline {
    flex: 1;
    padding: 0.6rem 0;
    border-radius: 22px;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    font-weight: 600;
    cursor: pointer;
}
.sv-kutsu-accept {
    border: none;
    color: #2a1e05;
    background: linear-gradient(180deg, #f7e2a4, #d9ae4c);
}
.sv-kutsu-accept:hover { filter: brightness(1.06); }
.sv-kutsu-decline {
    background: none;
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.65);
}
.sv-kutsu-decline:hover { border-color: rgba(255,255,255,0.45); color: #fff; }
.sv-kutsu-accepted {
    text-align: center;
    color: #e6c77e;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    padding: 0.55rem 0;
}

/* Create side */
.sv-kutsu-create-btn {
    width: 100%;
    padding: 0.8rem 0;
    margin-bottom: 1.4rem;
    border: 1px solid rgba(226, 186, 100, 0.5);
    border-radius: 22px;
    background: none;
    color: #eccd85;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.sv-kutsu-create-btn:hover { background: rgba(226, 186, 100, 0.08); }
.sv-kutsu-form {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--st-bg, #05070d);
    display: flex;
    flex-direction: column;
}
/* .np-field-input is built for the light sheets (#14161c text on a pale
   border); on this panel's near-black that renders as dark-on-dark, so the
   colours are restated rather than inherited. */
.sv-kutsu-form .np-field-input,
.sv-kutsu-form .np-field-textarea {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    color: #f3ead4;
    border-color: rgba(226, 186, 100, 0.32);
    background: rgba(255, 255, 255, 0.03);
}
.sv-kutsu-form .np-field-input::placeholder,
.sv-kutsu-form .np-field-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.sv-kutsu-form .np-field-input:focus,
.sv-kutsu-form .np-field-textarea:focus { border-color: rgba(240, 207, 130, 0.75); outline: none; }
/* Date/time pickers render their own dark-on-dark glyphs otherwise. */
.sv-kutsu-form input[type="date"],
.sv-kutsu-form input[type="time"] { color-scheme: dark; }
.sv-kutsu-form .sv-gear-field-label { color: #c9a35e; }
.sv-kutsu-form .np-submit-btn {
    background: linear-gradient(180deg, #f7e2a4, #d9ae4c);
    color: #2a1e05;
    border: none;
    margin-top: 2.4rem;
}
.sv-kutsu-form .np-field-hint,
.sv-kutsu-form .np-section-label { max-width: none; margin-left: 0; margin-right: 0; }
/* One centred small-caps heading per field, generously spaced — the same
   rhythm as Muokkaa tietoja, only in gold. The air between fields is what
   makes a form this long readable; .np-section-label's own 2.6rem is a touch
   more than this narrower panel needs. */
.sv-kutsu-form .np-section-label {
    color: rgba(233, 200, 132, 0.78);
    margin-top: 2.1rem;
    margin-bottom: 0.65rem;
}
.sv-kutsu-form .np-section-label:first-of-type { margin-top: 1.9rem; }
/* Marks a change of subject (the event itself → who it goes to) rather than
   just another field, so it needs to read differently from the labels around
   it — brighter, wider, and over a hairline. */
.sv-kutsu-form .sv-kutsu-group {
    margin-top: 3.1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(226, 186, 100, 0.18);
    color: #edcf8c;
    letter-spacing: 0.16em;
}
.sv-kutsu-form .sv-kutsu-hint-center { text-align: center; }
.sv-kutsu-row { display: flex; gap: 0.6rem; }
.sv-kutsu-row .np-field-input { flex: 1; min-width: 0; }

/* Etsi's own two-handle age slider (.double-slider), which is built for the
   light search sheet — grey track, near-black fill, white handles. Only the
   colours are restated here; the geometry is shared so both pages behave
   identically. */
.sv-kutsu-ika-arvo {
    text-align: center;
    color: #edcf8c;
    font-size: 0.92rem;
    font-family: var(--st-font-body);
    margin: 0 0 0.5rem;
}
.sv-kutsu-slider { margin-bottom: 0.4rem; }
.sv-kutsu-slider .track { background: rgba(226, 186, 100, 0.2); }
.sv-kutsu-slider .range-highlight { background: linear-gradient(90deg, #d9ae4c, #f7e2a4); }
.sv-kutsu-slider input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #f9e6ae, #d3a745);
    border: 1px solid rgba(255, 243, 214, 0.9);
    box-shadow: var(--st-varjo-matala);
}
.sv-kutsu-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #f9e6ae, #d3a745);
    border: 1px solid rgba(255, 243, 214, 0.9);
    box-shadow: var(--st-varjo-matala);
}

/* Ammattikortti rows — several professions, OR'd. */
.sv-kutsu-ammatti-rivi + .sv-kutsu-ammatti-rivi { margin-top: 0.6rem; }
.sv-kutsu-ammatti-kentta { display: flex; align-items: stretch; gap: 0.5rem; }
.sv-kutsu-ammatti-kentta .np-field-input { flex: 1 1 auto; min-width: 0; }
.sv-kutsu-ammatti-poista {
    flex: 0 0 auto;
    display: none;                 /* shown by kutsuPaivitaAmmattiPoistot */
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    border: 1px solid rgba(226, 186, 100, 0.26);
    border-radius: 10px;
    background: transparent;
    color: rgba(233, 200, 132, 0.75);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.sv-kutsu-ammatti-poista:hover { background: rgba(226, 186, 100, 0.1); color: #f3ead4; }
/* Deliberately quiet: adding a second profession is an option, not the
   expected next step, so it should not compete with the fields themselves. */
.sv-kutsu-lisaa {
    display: block;
    margin: 0.55rem auto 0;
    padding: 0.35rem 0.7rem;
    background: none;
    border: none;
    color: rgba(233, 200, 132, 0.85);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.sv-kutsu-lisaa:hover { color: #edcf8c; }
/* A required field the sender skipped, marked where the field is instead of
   in a line at the foot of a form several screens long. */
.sv-kutsu-form .np-field-input.sv-kutsu-puuttuu {
    border-color: #e0705f;
    background: rgba(224, 112, 95, 0.08);
}

/* Preview summary — a definition list rather than sentences, because the
   sender is checking six values against what they meant, not reading.
   Named apart from .sv-kutsu-yhteenveto, which is the guest list's stat
   cards. */
.sv-kutsu-tarkistus {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.1rem;
    margin: 0 0 1.6rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
}
.sv-kutsu-tarkistus dt {
    color: rgba(233, 200, 132, 0.7);
    font-weight: 600;
}
.sv-kutsu-tarkistus dd {
    margin: 0;
    color: #f3ead4;
    text-align: right;
}
/* Opens the recipient review. A secondary action beside the gold Lähetä —
   looking at the list is optional, sending is the point of the screen. */
.sv-kutsu-lista-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1.1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(226, 186, 100, 0.34);
    border-radius: 12px;
    background: transparent;
    color: #edcf8c;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
}
.sv-kutsu-lista-btn:hover { background: rgba(226, 186, 100, 0.09); }
/* Taking one person off the send. Deliberately quiet and unlabelled-in-red:
   this is an edit to a guest list, not a moderation action. */
.sv-kutsu-vieras-poista {
    align-self: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid rgba(226, 186, 100, 0.26);
    background: transparent;
    color: rgba(233, 200, 132, 0.75);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.sv-kutsu-vieras-poista:hover { background: rgba(226, 186, 100, 0.12); color: #f3ead4; }
/* The targeting is too wide to send — same warning tone as the preview's. */
.sv-kutsu-reach-liikaa { color: #e0b060; }
.np-submit-btn:disabled { opacity: 0.45; cursor: default; }

/* The one line that states what pressing Lähetä actually does. */
.sv-kutsu-esikatselu-veto {
    border: 1px solid rgba(226, 186, 100, 0.28);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    background: rgba(226, 186, 100, 0.06);
    color: #edcf8c;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}
.sv-kutsu-esikatselu-maksu {
    border-color: rgba(224, 176, 96, 0.55);
    background: rgba(224, 176, 96, 0.12);
}
/* The preview's own copy of the recipient card is a picture of a control, not
   a control — the buttons are there because the recipient will see them. */
#svKutsuEsikatseluKortti .sv-kutsu-card-actions button { opacity: 0.55; cursor: default; }

/* Suggestion rows under the three targeting fields — .np-profession-suggestion
   is styled for the light forms, so it needs the panel's own palette here. */
.sv-kutsu-suggestions { max-width: none; margin-top: 0.45rem; }
.sv-kutsu-suggestions .np-profession-suggestion {
    color: #f3ead4;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(226, 186, 100, 0.26);
}
.sv-kutsu-suggestions .np-profession-suggestion:first-child { border-top-color: rgba(226, 186, 100, 0.26); }
.sv-kutsu-suggestions .np-profession-suggestion:hover { background: rgba(226, 186, 100, 0.12); }
.sv-kutsu-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px dashed rgba(226, 186, 100, 0.4);
    background: rgba(226, 186, 100, 0.05) center/cover no-repeat;
    color: rgba(236, 205, 133, 0.7);
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.sv-kutsu-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Centred with the headings and hints around them — these two report on the
   targeting above rather than labelling anything, and left-aligning them was
   the only ragged edge left on an otherwise centred column. */
.sv-kutsu-reach {
    color: #cfa955;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    text-align: center;
    margin: 1.7rem 0 0;
}
.sv-kutsu-kiintio {
    font-size: 0.82rem;
    line-height: 1.45;
    font-family: var(--st-font-body);
    text-align: center;
    max-width: 21rem;
    margin: 0.45rem auto 0;
}
.sv-kutsu-kiintio-vapaa       { color: #8fce9b; }
.sv-kutsu-kiintio-maksullinen { color: #e0b060; }
.sv-kutsu-tag {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: middle;
}
.sv-kutsu-tag-vapaa       { background: rgba(143, 206, 155, 0.16); color: #8fce9b; }
.sv-kutsu-tag-maksullinen { background: rgba(224, 176, 96, 0.16);  color: #e0b060; }

/* Sent-invitation summary on the Omat tab — a card rather than a text line,
   since after sending the host needs the fill at a glance and a way into the
   guest list. */
.sv-kutsu-omat-row {
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(226, 186, 100, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    font-family: var(--st-font-body);
}
.sv-kutsu-omat-peruttu { opacity: 0.55; }
.sv-kutsu-omat-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.sv-kutsu-omat-name { color: #f4e3ba; font-size: 0.92rem; font-weight: 600; }
.sv-kutsu-omat-meta { color: rgba(255,255,255,0.55); font-size: 0.8rem; margin-top: 0.25rem; }

.sv-kutsu-taytto { display: flex; align-items: center; gap: 0.6rem; margin: 0.7rem 0 0.5rem; }
.sv-kutsu-taytto-palkki {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.sv-kutsu-taytto-palkki span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #d9ae55, #f0d494);
}
.sv-kutsu-taytto-luku { color: #e0bd74; font-size: 0.8rem; white-space: nowrap; }

.sv-kutsu-vieraat-btn {
    margin-top: 0.8rem;
    width: 100%;
    padding: 0.55rem 0;
    border: 1px solid rgba(226, 186, 100, 0.45);
    border-radius: 20px;
    background: none;
    color: #eccd85;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.sv-kutsu-vieraat-btn:hover { background: rgba(226, 186, 100, 0.08); }

/* Guest list */
.sv-kutsu-yhteenveto {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.sv-kutsu-yhteenveto > div {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0.3rem;
    border: 1px solid rgba(226, 186, 100, 0.2);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
}
.sv-kutsu-yhteenveto strong {
    display: block;
    color: #f4e3ba;
    font-size: 1.25rem;
    font-family: var(--st-font-body);
}
.sv-kutsu-yhteenveto span {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-family: var(--st-font-body);
}
.sv-kutsu-vieraat-paikat {
    color: #e0bd74;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    text-align: center;
    margin-bottom: 0.4rem;
}
.sv-kutsu-vieras-label { margin-top: 1.6rem !important; }
.sv-kutsu-vieras {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sv-kutsu-vieras-kuva {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #1e1a13 center/cover no-repeat;
    border: 1px solid rgba(226, 186, 100, 0.3);
}
.sv-kutsu-vieras-tiedot { flex: 1; min-width: 0; }
.sv-kutsu-vieras-nimi {
    color: #f2ead7;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--st-font-body);
}
.sv-kutsu-vieras-meta {
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    margin-top: 0.1rem;
}
/* Not-yet-confirmed guests are context for the confirmed list above. */
.sv-kutsu-vieras-odottaa { opacity: 0.72; }
.sv-kutsu-vieras-viesti {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(226, 186, 100, 0.45);
    border-radius: 16px;
    background: none;
    color: #eccd85;
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.sv-kutsu-vieras-viesti:hover { background: rgba(226, 186, 100, 0.08); }
.sv-kutsu-peru-btn {
    margin-top: 2rem;
    width: 100%;
    padding: 0.7rem 0;
    border: 1px solid rgba(229, 72, 77, 0.45);
    border-radius: 22px;
    background: none;
    color: #e5848a;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.sv-kutsu-peru-btn:hover { background: rgba(229, 72, 77, 0.1); }
.sv-kutsu-tag-peruttu { background: rgba(229, 72, 77, 0.16); color: #e5848a; }

.sv-cards-sheet {
    /* Arkki on aina tumma, myös vaalean näkymän päällä (esim. Avoin haku).
       Siksi se palauttaa kenttien tummat arvot itse — pinta kertoo mitä se
       on, eikä jokainen kenttä sen sisällä tarvitse omaa sääntöään. */
    --np-kentta-teksti: var(--st-text);
    --np-kentta-reuna: rgba(255, 255, 255, 0.18);
    --np-kentta-reuna-aktiivi: rgba(255, 255, 255, 0.42);
    --np-kentta-vihje: var(--st-grey-2);
    position: fixed;
    inset: 0;
    z-index: 10900;
    background: var(--st-bg, #05070d);
    display: flex;
    flex-direction: column;
}
/* Same grid/proportions as .np-header (cf. "Muokkaa tietoja") — circular
   button in the first column, centered muted title in the second — just
   kept on this sheet's own dark background instead of switching to white,
   since the sheet's white cards already provide the contrast. */
.sv-cards-sheet-header {
    position: relative;
    flex-shrink: 0;
    padding: 1.4rem 1rem 1rem;
    display: grid;
    grid-template-columns: 2.05rem 1fr 2.05rem;
    align-items: center;
    column-gap: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sv-cards-sheet-header span {
    grid-column: 2;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    color: rgba(255,255,255,0.6);
}
.sv-cards-sheet-close {
    grid-column: 1;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.sv-cards-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.2rem 6rem;
}
/* ID-badge style: photo left in a ring, info right, subtle diagonal accent
   behind it — nodding to the credential-card reference without being literal. */
/* White, dense landscape cards — deliberately breaks from the app's dark
   theme here, matching the reference. Tap opens the full Viivi-style detail
   view (svOpenProfileDetail); press-and-hold drags to reorder (svRowDragInit).
   The top card (jarjestys 1, the Pääkortti) gets a blue ring instead of a
   text label — position alone says what it is. */
.sv-card-row {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 7.4rem;
    margin-bottom: 0.7rem;
    /* Läpinäkyvä kuten hakutuloskortitkin (2026-09-25): valkoinen laatikko
       tummassa sovelluksessa luki lapulta eikä kortilta. Hento reuna erottaa
       rivit toisistaan varjon sijaan. */
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
}
.sv-card-row-primary { box-shadow: 0 0 0 2px var(--st-accent, #5b7fe0), 0 2px 10px rgba(0,0,0,0.35); }
.sv-card-row-dragging {
    box-shadow: var(--st-varjo-nostettu);
    z-index: 50;
}
/* Järjestystila (okJarjestystila, js/spa.js) — Ammattikortit and Projektit
   lists. The three-dot button gives way to a drag handle on the right;
   long press works in both modes. */
.ok-rivi-kahva { display: none; }
.ok-jarjestystila .sv-card-row .ok-rivi-valikko { display: none; }
.ok-jarjestystila .sv-card-row { cursor: default; }
.ok-jarjestystila .ok-rivi-kahva {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    width: 2.8rem;
    cursor: grab;
    touch-action: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 45%);
}
.ok-jarjestystila .ok-rivi-kahva::before {
    content: '';
    position: absolute;
    inset: 0;
    background: no-repeat center / 1.1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161c' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h16M4 12h16M4 16h16'/%3E%3C/svg%3E");
}
.ok-jarjestystila .sv-card-row-dragging .ok-rivi-kahva { cursor: grabbing; }
.ok-jarjestys-palkki {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 0.7rem;
    padding: 0.55rem 0.55rem 0.55rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}
.ok-jarjestys-palkki-teksti {
    flex: 1;
    min-width: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.72);
}
.ok-jarjestys-valmis {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.sv-card-row-photo {
    position: relative;
    flex: 0 0 6.2rem;
    /* Tumma paikkamerkki: vaalea kuvapaikka pisti silmään tummalla sivulla
       (testaajat 11.10.2026). Kuvaton saa himmeän kuvasymbolin. */
    background: linear-gradient(160deg, #262b37, #1a1d26);
}
.sv-card-row-photo:not(:has(img))::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.28);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sv-card-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Like count on the card photo's corner — same "badge on the photo" language
   as the stat card's count badge above, so the two feel like one system. */
.sv-card-row-like-badge {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(255,255,255,0.94);
    padding: 0.18rem 0.4rem;
    border-radius: 20px;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: #14161c;
    box-shadow: var(--st-varjo-matala);
    pointer-events: none;
}
.sv-card-row-like-badge svg { width: 9px; height: 9px; fill: #e0567c; }
.sv-card-row-body {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sv-card-row-name-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.sv-card-row-name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--st-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-card-row-managed-badge {
    flex-shrink: 0;
    background: #eef3fb;
    color: #4a6fa5;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.18rem 0.45rem;
    border-radius: 20px;
    font-family: var(--st-font-body);
}
/* An owner's own unpublished project draft on the Omat list (julkaistu=0) —
   see renderProjects() and server/load_projects.php. */
.sv-card-row-draft-badge {
    flex-shrink: 0;
    background: #fdf1e3;
    /* #b5750f antoi 3,42:1 tällä taustalla; tämä antaa 5,43:1. */
    color: #8a5800;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.18rem 0.45rem;
    border-radius: 20px;
    font-family: var(--st-font-body);
}
/* Days left before a pending project offer expires (projektin_jasenet.deadline). */
.op-days-badge {
    flex-shrink: 0;
    background: #fdeceb;
    color: #d32f2f;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 20px;
    font-family: var(--st-font-body);
}
.sv-card-row-profession {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--st-font-body);
    margin-top: 0.05rem;
}
/* Sama rivi elää kahdella pohjalla: tummissa omissa laatikoissa (omat
   ammattikortit, projektit, lokaatiot) ja vaaleilla np-view-light-sivuilla
   (julkinen profiili, hakemuslistat, oma kalustolaatikko). Yllä oleva tumma
   asu on oletus; täällä palautetaan vaalean sivun värit, jotta valkoinen nimi
   ei katoa valkoiseen taustaan. */
.np-view-light .sv-card-row {
    background: #fff;
    border: none;
    box-shadow: var(--st-varjo-matala);
}
.np-view-light .sv-card-row-name { color: #14161c; }
.np-view-light .sv-card-row-profession { color: #6b7280; }
.sv-card-row-bio {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #4a4f5a;
    font-family: var(--st-font-body);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sv-card-row-social {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    /* Ei pystyviivaa eikä kiinteitä vaaleita värejä (Teemu 11.10.2026):
       rivi on tumma, joten musta somelogo ei näkynyt ja seuraajaluku
       (229) jäi ilman selitystä. Värit rivin omasta tekstiväristä. */
}
.sv-card-row-social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
    opacity: 0.85;
    font-family: var(--st-font-body);
}
.sv-card-row-social-item svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

/* Tähtihetket — personal highlight-photo carousel, not tied to any card */
.sv-star-scroll {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.5rem;
    scrollbar-width: none;
}
.sv-star-scroll::-webkit-scrollbar { display: none; }
.sv-star-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-star-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-star-add {
    flex: 0 0 auto;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sv-star-add:hover {
    border-color: rgba(255,255,255,0.3);
    background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
}
.sv-star-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
}
.sv-star-add-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}
.sv-star-add-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    font-family: var(--st-font-body);
    text-align: center;
    padding: 0 0.3rem;
}

/* Fullscreen viewer — column layout so the photo, its caption and the black
   letterbox space around the photo stay visually distinct top vs bottom,
   instead of everything centered in one flex box. */
.sv-star-viewer {
    position: fixed;
    inset: 0;
    z-index: 10950;
    background: #000;
    display: flex;
    flex-direction: column;
}
.sv-star-viewer-media {
    flex: 1;
    min-height: 0;
    /* Vaakapyyhkäisy kuuluu katselimelle (svTahtiKatselinPyyhkaisy). Ilman
       tätä Android otti eleen itselleen, pointerup jäi tulematta
       (pointercancel) ja kuva vain nytkähti vaihtumatta. */
    touch-action: pan-y pinch-zoom;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.6rem 1rem 0.6rem;
}
.sv-star-viewer-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.sv-star-viewer-caption-wrap {
    flex-shrink: 0;
    padding: 0 1.1rem calc(1.3rem + env(safe-area-inset-bottom));
}
.sv-star-viewer-caption {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 3.4rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    color: #fff;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 300;
    line-height: 1.5;
    font-family: var(--st-font-body);
}
.sv-star-viewer-caption::placeholder { color: rgba(255,255,255,0.5); }
.sv-star-viewer-caption:focus { outline: none; border-color: rgba(255,255,255,0.4); }
.sv-star-viewer-close,
.sv-star-viewer-delete {
    position: absolute;
    top: 1rem;
    z-index: 6001;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.sv-star-viewer-close { left: 1rem; font-size: 1.25rem; }
.sv-star-viewer-delete { right: 1rem; }
.sv-star-viewer-delete svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
}

/* Selausnuolet. Reunoissa eikä kuvan päällä keskellä: kuva on se, jota
   katsotaan, ja pystykuvassa keskellä oleva nuoli osuisi kasvojen päälle.
   Kosketuskohde on nappia isompi (::before), jottei sormella tarvitse
   osua 2 rem:n ympyrään. */
.sv-star-viewer-nuoli {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6001;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.sv-star-viewer-nuoli::before {
    content: '';
    position: absolute;
    inset: -0.55rem;
}
.sv-star-viewer-nuoli svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sv-star-viewer-edellinen { left: 0.7rem; }
.sv-star-viewer-seuraava  { right: 0.7rem; }

/* Kuvanvaihdon odotus. Vanha kuva jää näkyviin himmennettynä siksi aikaa
   kun seuraava latautuu — tyhjä ruutu näyttäisi siltä, että kuva on
   hukassa. Välähdystä ei tule välimuistissa olevalle kuvalle, koska
   decode() ratkeaa heti. */
.sv-star-viewer-media.lataa img {
    opacity: 0.45;
    transition: opacity 0.12s ease-out;
}

.sv-star-viewer-laskuri {
    margin: 0 0 0.55rem;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

/* Toisen ihmisen kuvateksti: luettavaa tekstiä. .content antaa koko
   sovellukselle -0.18rem kirjainvälin, joka leipätekstissä ajaa kirjaimet
   päällekkäin — siksi se nollataan tässä. */
.sv-star-viewer-teksti {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
}

/* Tähtihetket gallery — kolme neliötä rivissä.
   Oli aiemmin Airbnb-tyylinen sekaruudukko, jossa joka kolmas ruutu vei koko
   leveyden. Se näytti hyvältä mutta kahdeksan kuvaa vei 1 300 pikseliä, eli
   neljä ruutua vierittämistä. Tähtihetket ovat uran kohokohdat, ja niiden
   pointti on että ne näkee yhdellä silmäyksellä (käyttäjä 28.9.2026) —
   kolmella palstalla yhdeksän kuvaa mahtuu yhdelle ruudulle. */
.sv-star-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 0.4rem;
    padding: 1rem 1.2rem 6rem;
    flex: 1;
    overflow-y: auto;
}
/* The empty-state wrap (.sv-empty-wrap) is built for a plain block/flex
   parent like .sv-cards-list (Lokaatiot/Kalusto) — its own min-height:100%
   + internal flex centers it both ways there. Dropped into this 2-column
   grid instead, it became a single grid item confined to row height
   grid-auto-rows:min-content (no room to vertically center in) and column
   width (squeezed into the first cell, reading left-aligned). Switching the
   grid to plain block layout only while the empty state is present
   reproduces the exact same working context as .sv-cards-list. */
.sv-star-gallery-grid:has(.sv-empty-wrap) { display: block; }
/* Julkisella profiililla sama ruudukko on osio sivun seassa eikä oma
   vieritettävä arkkinsa: arkin 6rem alapehmuste alapalkkia varten jättäisi
   tähtihetkien ja seuraavan otsikon väliin tyhjän kaistaleen. */
#publicprofile-view .sv-star-gallery-grid {
    padding: 0.2rem 0 0;
    flex: none;
    overflow: visible;
}
/* Kuuden yli menevät piiloon kunnes nappia painetaan. display eikä korkeus,
   koska ruudukon solu ei kutistu nollaan ilman että rivi jää paikalleen. */
#publicprofile-view .sv-star-gallery-item.pp-star-piilossa { display: none; }
#publicprofile-view .sv-star-gallery-grid.pp-star-auki .sv-star-gallery-item.pp-star-piilossa { display: block; }
.tag-tiles-container:empty { flex: 0 0 auto; padding-bottom: 0; }
.sv-star-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-star-gallery-item:focus-visible {
    outline: 2px solid #5b7fe0;
    outline-offset: 2px;
}
.sv-star-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Jäljellä siltä varalta, että nosto halutaan joskus takaisin; kolmen
   palstan ruudukossa sitä ei käytetä. */
.sv-star-gallery-item-full {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 11;
}
.sv-star-gallery-item { border-radius: 10px; }

/* "Minulta löytyy" — gear/specialty thumbs, styled like Tähtihetket but with
   a name caption and a rentable badge. */
.sv-gear-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-gear-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-gear-thumb-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.3rem 0.4rem 0.25rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-gear-thumb-rent {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background: rgba(74,158,255,0.92);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    padding: 0.15rem 0.4rem;
    border-radius: 20px;
}

/* Projektit — public projects (created or accepted-member, yksityinen=0)
   shown to anyone viewing this profile. Same thumb shape as Tähtihetket. */
.sv-project-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-project-thumb-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.3rem 0.4rem 0.25rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--st-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-projects-empty {
    color: #556;
    font-size: 0.8rem;
    font-family: var(--st-font-body);
    padding: 0.3rem 0;
}

/* Add/edit sheet for a "Minulta löytyy" item — white theme, matching the
   Luo ammattikortti view rather than the rest of this (dark) page. */
/* Tumma kuten muutkin lomakesivut (typografialinjaus 2026-09-20: tumma on
   oletus). Oli ainoa vaalea lomake jäljellä. */
.sv-gear-sheet {
    position: fixed;
    inset: 0;
    z-index: 10950;
    background: linear-gradient(168deg, #0e1119, #05070d 62%);
    color: #d8dade;
    display: flex;
    flex-direction: column;
}
/* Kalustolomakkeen valintanapit. Vastaus syntyy painalluksella, ja
   vaihtoehdot näkyvät ilman että niitä pitää avata — alasvetovalikko
   piilottaa juuri sen tiedon, jonka takia kysymys esitetään. */
.kal-valinta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.kal-nappi {
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: #a8acb5;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.kal-nappi:hover { border-color: rgba(255, 255, 255, 0.3); color: #d8dade; }
.kal-nappi-valittu {
    background: linear-gradient(160deg, #1f2740, #141a2a);
    border-color: rgba(91, 127, 224, 0.55);
    color: #f2f2f5;
}
/* Takaisin ja "Etsi kirjoittamalla" eivät ole vastauksia vaan liikkumista,
   joten ne eivät näytä valittavilta vaihtoehdoilta. */
.kal-nappi-vaihtoehto {
    background: transparent;
    border-style: dashed;
    color: #8a8f9a;
}
.kal-kentta { margin-top: 0.2rem; }
.sv-gear-sheet .np-section-label { color: #d8dade; }
.sv-gear-sheet .np-field-hint { color: #8a8f9a; }
.sv-gear-sheet .np-field-input,
.sv-gear-sheet .np-field-textarea {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e5e7ea;
    color-scheme: dark;
}
.sv-gear-sheet .np-field-input::placeholder,
.sv-gear-sheet .np-field-textarea::placeholder { color: #5a6070; }
.sv-gear-sheet .np-field-input:focus,
.sv-gear-sheet .np-field-textarea:focus { border-color: var(--st-accent, #5b7fe0); outline: none; }
.sv-gear-sheet .sv-gear-photo {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: #8a8f9a;
}
.sv-gear-sheet .sv-gear-sheet-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sv-gear-sheet .sv-gear-sheet-title { color: #f2f2f5; }
.sv-gear-sheet .sv-gear-sheet-close,
.sv-gear-sheet .sv-gear-browse-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d8dade;
}
.sv-gear-sheet-header {
    position: relative;
    flex-shrink: 0;
    padding: 1.4rem 1rem 1rem;
    text-align: center;
    box-shadow: 0 1px 0 #e5e7ea;
}
.sv-gear-sheet-title {
    font-size: 0.92rem;
    font-weight: 400;
    color: #4a4f5a;
    font-family: var(--st-font-body);
}
.sv-gear-sheet-close {
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    background: #f2f2f5;
    border: 1px solid #e5e7ea;
    color: #4a4f5a;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.sv-gear-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.4rem 1.5rem 3rem;
}
/* --- Lisää kalustoa: one content column ------------------------------
   The sheet had grown four different left edges — .np-field-input carries a
   304px max-width with auto margins (right elsewhere, but here it sat inset
   from the body's own 16px padding), while hints, section labels and the
   availability tabs each used a different width. Everything below shares the
   body's column instead, so the left edge is straight the whole way down. */
.sv-gear-sheet-body .np-field-input,
.sv-gear-sheet-body .np-field-textarea,
.sv-gear-sheet-body .sv-gear-photo,
.sv-gear-sheet-body .np-profession-suggestions,
.sv-gear-sheet-body .np-submit-btn,
.sv-gear-sheet-body .np-delete-btn {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
.sv-gear-sheet-body .np-field-hint {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
/* Section headings stay centered — that is .np-section-label's own style
   across the app, and the Saatavuus block reads better that way. Its hint
   and the rent/sale pair follow the heading rather than the field column. */
.sv-gear-sheet-body #svGearAvailabilityTabs { justify-content: center; }
.sv-gear-sheet-body #svGearAvailabilityTabs + .np-field-hint { text-align: center; }

/* Vertical rhythm. Fields used ad-hoc inline margin-top values (0.7/0.8/1.2
   rem) that did not line up with each other or with the section labels. */
.sv-gear-required { color: #ff8a7a; font-weight: 700; }
.sv-gear-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    text-transform: none;
    letter-spacing: normal;
    color: #8a8f9a;
    margin: 1.5rem 0 0.4rem;
}
.sv-gear-sheet-body > .np-field-input,
.sv-gear-sheet-body > .np-field-textarea { margin-top: 0; }
.sv-gear-sheet-body .np-field-hint { margin: 0.4rem 0 0; line-height: 1.45; }
.sv-gear-sheet-body .np-section-label { margin: 1.8rem 0 0.5rem; }
.sv-gear-sheet-body .np-submit-btn { margin-top: 2.2rem; }
.sv-gear-sheet-body .np-delete-btn { margin-top: 0.7rem; }
/* Browse sits beside the category field as its own labelled control rather
   than an icon floating inside it — 44 categories is a real second way in,
   not a decoration on the text box. */
.sv-gear-input-wrap { display: flex; gap: 0.5rem; align-items: stretch; }
.sv-gear-sheet-body .sv-gear-input-wrap .np-field-input { flex: 1 1 auto; width: auto; min-width: 0; }
.sv-gear-browse-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.85rem;
    border: 1px solid #d8dade;
    border-radius: 10px;
    background: #f7f8f9;
    color: #4b5563;
    font-size: 0.82rem;
    font-family: var(--st-font-body);
    cursor: pointer;
    white-space: nowrap;
}
.sv-gear-browse-btn:hover { border-color: #a8acb5; background: #eef0f2; color: #14161c; }
.sv-gear-browse-btn svg { width: 15px; height: 15px; }

/* Owner-marked unavailable ranges inside the gear sheet. The add row wraps
   rather than scrolls: three date/select controls plus a button do not fit
   one phone line, and a horizontal scroller for form controls is worse than
   a second line. */
.sv-gear-varaus-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.sv-gear-varaus-add .np-field-input { flex: 1 1 8rem; min-width: 0; }
/* .np-view-light .np-add-role-btn is a centered block with a max-width,
   which is right where it normally sits but would break this row. */
.sv-gear-varaus-add .np-add-role-btn,
.np-view-light .sv-gear-varaus-add .np-add-role-btn {
    flex: 0 0 auto;
    display: inline-block;
    max-width: none;
    margin: 0;
}
.sv-gear-varaus-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 0.82rem;
}
.sv-gear-varaus-dates { font-weight: 600; }
.sv-gear-varaus-tila  { color: #8a8f9a; margin-left: auto; }
.sv-gear-varaus-del {
    background: none;
    border: none;
    color: #9aa0b0;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
}
.sv-gear-varaus-del:hover { color: #c0392b; }

.sv-gear-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 19rem;
    height: 9rem;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px dashed #d8dade;
    background: #fafafb;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.sv-gear-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-gear-photo-placeholder {
    color: #a8acb5;
    font-size: 0.82rem;
    font-weight: 300;
    font-family: var(--st-font-body);
}

/* --- Location picker (address search + map) --- */
.loc-picker {
    max-width: 21rem;
    margin: 1.25rem auto 0;
}
.loc-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--st-font-body);
    font-size: 1rem;
    font-weight: 300;
    color: #14161c;
    background: transparent;
    border: 1px solid #d8dade;
    border-radius: 0.85rem;
    padding: 0.7rem 0.9rem;
    outline: none;
    text-overflow: ellipsis;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.loc-input::placeholder { color: #a8acb5; }
.loc-input:focus {
    border-color: #8a8f9a;
    box-shadow: none;
}
/* Julkinen/Yksityinen picker — step 1 of Luo lokaatio, same np-picker-screen
   shell the ammatti/kategoria pickers use, just two big option cards instead
   of a search bar. */
.loc-visibility-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
}
.loc-visibility-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: #fff;
    border: 1px solid #d8dade;
    border-radius: 14px;
    padding: 1.1rem 1rem;
    cursor: pointer;
    text-align: center;
}
.loc-visibility-option:hover { border-color: #8a8f9a; background: #f2f2f5; }
.loc-visibility-option-title {
    font-size: 0.92rem;
    font-weight: 600;
    font-family: var(--st-font-body);
    color: #14161c;
}
.loc-visibility-option-desc {
    font-size: 0.8rem;
    font-weight: 300;
    font-family: var(--st-font-body);
    color: #6b7280;
}
.loc-duplicate-warning {
    max-width: 19rem;
    margin: 0.6rem auto 0;
    padding: 0.6rem 0.8rem;
    background: #fdf1f4;
    border: 1px solid #f3c9d5;
    border-radius: 10px;
    color: #a3384f;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: var(--st-font-body);
    line-height: 1.5;
    text-align: center;
}
.location-map {
    width: 100%;
    height: 240px;
    margin-top: 0.85rem;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--st-varjo-nostettu);
    z-index: 0;
}
/* Dark-theme Leaflet controls so the map stops looking bolted-on */
.location-map .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}
.location-map .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.7); }
/* Leaflet 1.9's own attribution control adds a small blue/yellow flag SVG
   next to the "Leaflet" credit (upstream branding, not app content) —
   hidden per product request. Attribution text itself is untouched. */
.location-map .leaflet-attribution-flag { display: none !important; }
.location-map .leaflet-bar a {
    background: #1a1a20;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.location-map .leaflet-bar a:hover { background: #26262e; }

/* Luo lokaatio — same white base as Luo ammattikortti/projekti, so the
   address search keeps its own dark card look everywhere else (still used
   nowhere yet) while getting light colors here. */
.np-view-light .loc-picker { max-width: 19rem; }
.np-view-light .loc-input {
    color: #14161c;
    background: #fff;
    border: 1px solid #d8dade;
}
.np-view-light .loc-input::placeholder { color: #a8acb5; }
.np-view-light .loc-input:focus {
    border-color: #8a8f9a;
    background: #fff;
    box-shadow: none;
}

/* --- Stormi Credits --- */
.credits-balance-label {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    color: #6b7280;
    margin-top: 1.6rem;
}
/* Stormi Credits sivun pääotsikkona ja luku heti sen alle (Teemu 12.10.2026):
   pieni leipätekstiotsikko, viiva ja väli erottivat luvun otsikostaan. */
#credits-view .np-header:not(#_) { box-shadow: none; padding-bottom: 0.2rem; }
#credits-view .np-header-title:not(#_) {
    font: 900 0.95rem/1.2 'Arial Black', var(--st-font-display, Arial), sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #14161c;
}
/* Otsikko "Stormi Credits" lähelle lukua (Teemu 11.10.2026). */
.credits-balance-label[hidden] + .credits-balance-number { margin-top: 0; }
.credits-balance-number {
    font-family: var(--st-font-display, 'Arial Black', Arial, sans-serif);
    font-size: 3rem;
    letter-spacing: -0.03rem;
    color: #14161c;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.credits-info-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto 0;
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.credits-info-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #a8acb5;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.credits-info-toggle:hover svg { stroke: #6b7280; }
.credits-info-toggle.credits-info-open { transform: rotate(180deg); }
.credits-info-panel {
    max-width: 21rem;
    margin: 0.7rem auto 0;
    text-align: left;
    border-top: 1px solid #e5e7ea;
}
.credits-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f1f3;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.25;
    color: #14161c;
}
.credits-info-row strong {
    flex-shrink: 0;
    color: #14161c;
    font-family: var(--st-font-body);
    font-weight: 400;
    font-size: 0.8rem;
}
.credits-mihin { max-width: 22rem; margin: 0.2rem auto 0.6rem; font-family: Helvetica, Arial, sans-serif; font-weight: 400; font-size: 0.85rem; line-height: 1.45; color: #6b7280; letter-spacing: 0; }
.credits-info-row.credits-info-soon { color: #a8acb5; }
.credits-info-row.credits-info-soon strong { color: #a8acb5; }

/* #publicprofile-view (js/spa.js initPublicProfileView) — read-only public
   profile reached by tapping a name on someone's card. Hero below borrows
   .sv-hero's structural skeleton (position/height/object-fit/placeholder,
   css/spa.css ~4593) but uses a flat, uniform dim overlay across the whole
   photo instead of .sv-hero-scrim's top-transparent/bottom-heavy gradient —
   the product ask was "the whole avatar a little dimmer", not a
   bottom-caption readability scrim. */
/* Julkinen profiili.
   Kuva ja teksti erikseen: teksti kuvan päällä olisi vaatinut
   tummennuskalvon, ja kalvo kääntyi tumman teeman invertissä valkoiseksi
   utuksi. Sivu on nyt natiivisti tumma eikä käännetty, joten kuva näkyy
   sellaisena kuin se on — eikä mikään pinta ole täysin musta: läpinäkyvänä
   näkyy sovelluksen yhteinen taustakuva. */
#publicprofile-view { background: transparent; }
/* Otsikkopalkki kelluu kuvan päällä: absoluuttisena se ei varaa tilaa
   .np-mainista, joten kuva alkaa itsestään ruudun yläreunasta eikä
   esittelyä tarvitse nostaa negatiivisella marginaalilla. */
#publicprofile-view .np-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: transparent;
    box-shadow: none;
}
/* Flex-sarake ja kiinteä korkeus, jotta .np-main saa oman vieritysalueensa:
   ilman tätä pitkä profiili kasvoi ruudun yli eikä loppua pystynyt
   vierittämään näkyviin. position: relative on absoluuttista otsikkopalkkia
   varten. */
#publicprofile-view.spa-view.active {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* sama syy kuin Luo-näkymillä yllä */
}
/* Otsikko "Profiili" piiloon: nimi lukee heti kuvan alla, ja palkin teksti
   osuisi kasvojen päälle. Takaisin-nappi jää. */
#publicprofile-view .np-header-title { display: none; }
#publicprofile-view .np-back-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
/* ⋯ (Estä käyttäjä) oikeaan sarakkeeseen: otsikko on piilossa, joten muuten se
   valuisi keskelle. */
#publicprofile-view .pp-lisaa { grid-column: 3; justify-self: end; }
#publicprofile-view .pp-lisaa svg { fill: currentColor; stroke: none; }
#publicprofile-view .np-back-btn svg { stroke: #fff; }
#publicprofile-view .np-section-label { color: rgba(255, 255, 255, 0.55); }
/* Kuva sivun taustaksi.
 *
 * Neliö keskellä sivua oli kortti sivun päällä; nyt kuva ON sivun yläosa.
 * Se alkaa ruudun yläreunasta — otsikkopalkin ja takaisin-napin alta, jotka
 * kelluvat sen päällä — ja häivytetään alaspäin, jolloin se sulautuu siihen
 * taustaan joka sivulla sattuu olemaan. Sama tekniikka kuin etusivun
 * videolohkolla (.lohko-video-media), jotta kaksi tärkeintä täysleveää
 * kuvaa sovelluksessa käyttäytyvät samalla tavalla.
 *
 * Nimi ja tiedot asettuvat häivytyksen päälle: siinä kohtaa kuvaa on enää
 * vähän jäljellä, joten teksti pysyy luettavana ilman omaa tummennuslevyä.
 */
.pp-esittely {
    position: relative;
    /* Ulos .pp-mainin sivupehmusteesta; ylhäällä ei nostoa, koska
       otsikkopalkki on absoluuttinen eikä varaa tilaa. */
    margin: 0 -1rem;
    text-align: center;
}
.pp-kuva {
    position: relative;
    width: 100%;
    height: 56vh;
    min-height: 320px;
    max-height: 30rem;
    overflow: hidden;
    background: #05070d;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}
.pp-kuva-img {
    width: 100%;
    height: 100%;
    /* Muotokuvat ovat pystyjä ja kasvot ylhäällä: rajaus keskeltä katkaisisi
       otsan. Sama linjaus kuin karusellien korteilla. */
    object-fit: cover;
    object-position: center 22%;
    display: block;
}
/* Kevyt tummennus: yläreunassa sen verran että kelluva otsikko ja
   takaisin-nappi erottuvat vaaleastakin kuvasta, muuten melkein olematon.
   Maskin ulkopuolella omana kerroksenaan, jotta häivytys koskee kuvaa eikä
   tummennusta. */
.pp-kuva-tummennus {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Sama pehmeä porrastus kuin omalla profiililla: tasainen tummennus
       ylälaitaan ilman näkyvää rajaa. */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.22) 17%,
        rgba(0, 0, 0, 0.11) 35%,
        rgba(0, 0, 0, 0.04) 52%,
        rgba(0, 0, 0, 0) 72%);
}
.pp-kuva-tyhja {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 2.6rem/1 'Arial Black', var(--st-font-body);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}
.pp-nimi {
    position: relative;
    z-index: 2;
    margin: -3.2rem 1rem 0;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
    text-wrap: balance;
}
.pp-tiedot {
    position: relative;
    z-index: 2;
    margin-top: 0.35rem;
    font: 400 0.82rem/1.5 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
}
.pp-tiedot:empty { display: none; }

.pp-main { padding: 0 1rem var(--st-alapalkki-tila); }

/* Ei omaa laatikkoa osioille. Rivit (.sv-card-row) ovat jo itsessään
   kortteja, joten osiokehys oli laatikko laatikon sisällä: se söi leveyttä
   molemmilta reunoilta ja jakoi sivun turhiin kerroksiin. Osiot erottuvat
   nyt otsikosta ja välistä, ja kortit saavat koko leveyden. */
.pp-section { margin-top: 1.6rem; }
.pp-section > .np-section-label:first-child { margin-top: 0; }
/* .sv-cards-list on kirjoitettu Profiili-sivun omaksi vieritysalueeksi: se
   tuo mukanaan 6rem pohjatyhjää alapalkin alle ja 1.2rem sivutäytteen.
   Täällä lista on yksi osio muiden joukossa, joten molemmat pois — pohjatyhjä
   jätti osioiden väliin sadan pikselin aukon ja sivutäyte kavensi kortteja
   turhaan. */
#publicprofile-view .sv-cards-list {
    padding: 0;
    margin: 0;
}


/* Light-theme twin of .spm-info-value/.spm-clamped (css/spa.css ~1252) —
   same -webkit-line-clamp mechanism, but that one's near-white palette is
   built for the app's dark modals, not this white page. */
.pp-text {
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); font-family: var(--st-font-body);
    line-height: 1.55; white-space: pre-line; margin: 0;
}
.pp-text-clamped {
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Shared small-triangle expand toggle used by Minusta/Haluaisin clamp and
   the Ammattikortit/Minulta löytyy "first item + expand rest" accordion
   (see ppRenderExpandableList/ppApplyClamp in js/spa.js). The rotate+
   max-height animation is the same idiom as .sv-cards-heading-chevron /
   .sv-cards-heading-collapsible + .sv-stat-card (css/spa.css ~5078-5146),
   generalized here so the toggled sibling can be a plain "extra rows"
   wrapper or the clamped text itself, not a fixed .sv-stat-card. */
/* Vain kolmio kääntyy, ei nappi: koko ruudun levyinen nappi pyöri 180°
   ja kutistui painettaessa (button:active), mikä näkyi pyöräytyksenä ja
   viiruna (käyttäjä 9.10.2026). */
.pp-expand-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 32px; background: none; border: none; padding: 0.5rem 0 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pp-expand-toggle:active { transform: none; }
.pp-expand-toggle:focus { outline: none; }
.pp-expand-toggle:focus-visible svg { outline: 2px solid #5b7fe0; outline-offset: 4px; border-radius: 50%; }
/* 22 px ja kirkkaampi: 16 px puolittain läpinäkyvä nuoli jäi huomaamatta
   (Teemu 12.10.2026). */
.pp-expand-toggle svg {
    width: 22px; height: 22px; fill: none; stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.25s ease;
}
.pp-expand-toggle.pp-expand-toggle-open svg { transform: rotate(180deg); }
/* "Näytä kaikki (5)" vain leveällä ruudulla (css/tyopoyta.css). */
.pp-expand-teksti { display: none; }

.pp-extra-rows {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.28s ease;
}
.pp-extra-rows.pp-extra-rows-open { opacity: 1; }

/* .feed-card-caption-name/-cat (css/filkka.css) are white-on-dark, built for
   the home feed's dark background — near-invisible on this page's white
   .pp-main. Override just for the Projektit carousel here. */
#ppProjectsFeed .feed-card-caption-name { color: #14161c; text-shadow: none; }
#ppProjectsFeed .feed-card-caption-cat { color: #6b7280; text-shadow: none; }

/* .sv-cards-list's own padding (css/spa.css ~5537) is sized for the
   scrollable flex:1 sheet it normally sits in on the owner's own profile —
   96px of bottom padding and its own 1.2rem side padding (doubling up with
   .pp-main's) make the expand chevron below it sit far away from the actual
   card it reveals, and misalign the cards from the rest of the page's
   horizontal margin. Zero out the padding here so the chevron sits right
   against the last visible row. */
#ppCardsList.sv-cards-list,
#ppGearList.sv-cards-list {
    padding: 0;
}

/* The nav used to be flush to the bottom edge; it now floats clear of it and
   is translucent, so content can no longer be allowed to run underneath —
   anything that did was both cut off and showing through. Each of these adds
   the bar's own offset to what the view already reserved. Kept at the end of
   the file: #projects-view and #msg-list-view set their own padding-bottom
   further up, at the same specificity. */
.content { padding-bottom: 7rem; }
.tag-tiles-container { padding-bottom: 8rem; }
#projects-view { padding-bottom: 12.5rem; }
#msg-list-view { padding-bottom: 7rem; }

/* ──────────────────────────────────────────────────────────────────────────
   Etusivun lohkot — hero + karuselli, rendered from etusivu_lohkot by
   initEtusivuLohkot() in js/spa.js. The legacy fixed page (#etusivuVanha)
   keeps its own rules above; nothing here changes them.
   ────────────────────────────────────────────────────────────────────────── */

/* Rhythm between blocks lives on the block, not on five #carouselN-wrap ids.
   Every gap is a top margin and nothing carries a bottom one — with both, the
   distance between two blocks depends on which collapse wins, and the page
   ends up with gaps nobody chose. One margin per block means the gap is a
   property of the *pair*, which is what it actually is.

   Two sizes. Two carousels in a row belong together and take the tighter one;
   anything else — a hero, an info block, a carousel after either — is a change
   of subject and takes the full gap. A hero is a full stop in the scroll, not
   another row of cards. */
#etusivuLohkot {
    --lohko-vali:        2.5rem;   /* between subjects */
    --lohko-vali-tiivis: 1.75rem;  /* between two card rows */
    padding-bottom: 1.5rem;
}
#etusivuLohkot > .lohko { margin-top: var(--lohko-vali); }
#etusivuLohkot > .lohko-karuselli + .lohko-karuselli { margin-top: var(--lohko-vali-tiivis); }
#etusivuLohkot > .lohko:first-child { margin-top: 0; }

/* .profile-container carries `margin: 0 auto 1.8rem` for the old page. The
   auto is what centres the hero and has to stay; the bottom margin would be a
   second, uncontrolled gap on top of the one above. */
#etusivuLohkot > .lohko-hero { margin: var(--lohko-vali) auto 0; }
#etusivuLohkot > .lohko-hero:first-child { margin-top: 0; }

/* .menu's own 1.6rem top margin (filkka.css) would compete with the block
   rhythm above — the block decides the gap, the row inside it does not. */
#etusivuLohkot > .lohko-karuselli { margin-bottom: 0; }

/* "Lokaatioita sinulle": miksi lukija näkee nämä paikat, otsikon alla samalla
   sisennyksellä. Leipätekstiä, ei otsikkotyyliä (typografiasääntö). */
.lohko-syy {
    margin: -0.8rem 1.4rem 1rem 3rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.35;
    /* .content antaa -0.18rem Arial Blackin näyttöfonttia varten, ja se
       periytyy tänne. 12 pikselin Helveticalla se on -2,9 px eli neljännes
       kirjaimen leveydestä: kirjaimet menivät päällekkäin. Jokainen
       .contentin sisällä oleva leipäteksti tarvitsee tämän nollauksen. */
    letter-spacing: normal;
}

/* Hero aspect ratios. 1:1 is what every hero on the page used before this and
   stays the default; the others are the new options. 9:16 is deliberately
   capped at 78svh — at a true 9:16 a hero fills the entire phone screen with
   no edge of the next block visible, which reads as a full-screen interstitial
   rather than as part of a feed, and is the fastest way to lose the reader. */
#etusivuLohkot .lohko-hero-1-1  { aspect-ratio: 1 / 1; }
#etusivuLohkot .lohko-hero-16-9 { aspect-ratio: 16 / 9; }
#etusivuLohkot .lohko-hero-2-1  { aspect-ratio: 2 / 1; }
#etusivuLohkot .lohko-hero-9-16 { aspect-ratio: 9 / 16; max-height: 78svh; }

/* The whole media layer slides, so a still and a moving slide animate
   identically and the transform never has to be re-applied per element. */
.lohko-hero-media {
    position: absolute;
    inset: 0;
    will-change: transform;
}
/* filkka.css caps .topbar-pic at 50vh with width/height:auto — written when
   every hero was 1:1 at 88% width and so always came in under the cap. A 9:16
   or 16:9 hero is taller than that, and the cap letterboxed it inside its own
   frame. The hero fills its block; the block's aspect-ratio decides the size. */
.lohko-hero-media .topbar-pic {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
    transition: none;   /* the wrapper animates, not the image */
}

@media (prefers-reduced-motion: reduce) {
    .lohko-hero-media { transition: none !important; }
}

/* Caption scale follows the ratio. 1.2rem was written for a 1:1 hero ~330px
   tall; on a 2:1 block (165px) the same size wraps to two lines and covers the
   picture it is captioning, and on a 9:16 takeover it looks undersized. The
   text is an attribution on a photograph, so it should stay in proportion to
   the photograph. */
#etusivuLohkot .lohko-hero-16-9 .carousel-caption {
    font-size: 1rem;
    line-height: 1.2;
    bottom: 1.5rem;
}
#etusivuLohkot .lohko-hero-2-1 .carousel-caption {
    font-size: 0.92rem;
    line-height: 1.2;
    bottom: 1.4rem;
}
#etusivuLohkot .lohko-hero-9-16 .carousel-caption {
    font-size: 1.6rem;
    bottom: 2.6rem;
}
/* A short block has no room for a half-height scrim plus a caption plus dots;
   the gradient has to start higher or the text sits on bare picture. */
#etusivuLohkot .lohko-hero-16-9 .carousel-scrim,
#etusivuLohkot .lohko-hero-2-1  .carousel-scrim { height: 72%; }

/* ── Info-lohko ───────────────────────────────────────────────────────────
   The page's own voice between the picture blocks. Deliberately quieter than
   a hero: no photograph behind the text, a surface that sits a step off the
   background rather than a filled card, and type at reading size instead of
   display size. It is there to be read, not looked at. */
.lohko-info {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}
.info-kortti {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
    /* .content sets letter-spacing:-0.18rem for the Arial Black display font
       (css/filkka.css). This is the one block on the page made of running
       text, and inheriting that tracking jams the words together. Reset once
       here; the heading and the eyebrow set their own below. */
    letter-spacing: normal;
}
.info-kuva {
    aspect-ratio: 2 / 1;
    background: var(--st-surface);
}
.info-kuva img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
}
.info-sisus {
    padding: 1.15rem 1.2rem 1.25rem;
}
.info-merkki {
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.09rem;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.5rem;
}
.info-otsikko {
    font-family: var(--st-font-display);
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.02rem;
    color: #fff;
    margin: 0 0 0.55rem;
}
.info-teksti {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 0.7rem;
}
.info-teksti:last-child { margin-bottom: 0; }
.info-nappi {
    margin-top: 0.85rem;
    padding: 0.52rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01rem;
    cursor: pointer;
}
.info-nappi:active { background: rgba(255, 255, 255, 0.12); }

/* Paid partnership. The difference has to be visible at a glance without
   being louder than the editorial around it — a gold hairline and the
   marking in gold, not a filled banner. The marking itself is written by the
   renderer, never by the block's copy. */
.lohko-info-kumppani .info-kortti {
    border-color: rgba(198, 163, 92, 0.5);
    background: rgba(198, 163, 92, 0.05);
}
.lohko-info-kumppani .info-merkki {
    color: rgba(214, 181, 114, 0.95);
}
.info-kumppani-nimi {
    font-family: var(--st-font-display);
    font-size: 0.82rem;
    letter-spacing: 0.01rem;
    color: rgba(255, 255, 255, 0.85);
    margin: -0.25rem 0 0.5rem;
}
.lohko-info-kumppani .info-nappi {
    border-color: rgba(214, 181, 114, 0.75);
    color: rgba(233, 208, 155, 0.98);
}

/* ── Ruudukko ─────────────────────────────────────────────────────────────
   The same cards a karuselli draws, laid out as a grid. Twenty horizontal
   rows in a row read as a catalogue; a grid breaks that, and shows more at
   once — which suits a feed where every card is worth a look rather than one
   where the first card is the point.

   .feed-card and friends are a fixed 7.6×5.3rem box built for a scroller, so
   the cell overrides the size rather than the card markup changing. */
.lohko-ruudukko-feed {
    padding: 0 1.2rem;
    overflow: visible;
}
/* The grid goes on .feed-cards-wrapper, not on .feed: renderFeed puts the
   cards inside the wrapper, so a grid on the outer element lays out exactly
   one child and nothing appears to change. */
.lohko-ruudukko-feed .feed-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.7rem;
    width: 100%;
}
.lohko-ruudukko-feed .feed-card,
.lohko-ruudukko-feed .feed-card-poster,
.lohko-ruudukko-feed .feed-card-wide {
    width: auto;
    height: auto;
    margin-left: 0;
    flex-shrink: 1;
}
/* Without a height on the box, the image inside (height:100%) collapses. The
   media keeps the card's original 7.6:5.3 proportion, whatever the column
   width turns out to be. */
.lohko-ruudukko-feed .feed-card > img,
.lohko-ruudukko-feed .feed-card-media {
    aspect-ratio: 7.6 / 5.3;
    height: auto;
    width: 100%;
}
.lohko-ruudukko-feed .feed-card-poster > img { aspect-ratio: 8 / 11; height: auto; width: 100%; }

/* ── Kysely ───────────────────────────────────────────────────────────────
   Built to be tapped, so the options are full-width targets with real height
   rather than inline links. Same surface as an info card: this is the page
   talking, not a promotion. */
.lohko-kysely {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}
.kysely-kortti {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.035);
    padding: 1.15rem 1.2rem 1.2rem;
    letter-spacing: normal;   /* .content sets -0.18rem; see .info-kortti */
}
.kysely-kysymys {
    font-family: var(--st-font-display);
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.02rem;
    color: #fff;
    margin: 0 0 0.45rem;
}
.kysely-tarkenne {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.9rem;
}
.kysely-vaihtoehdot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.kysely-vaihtoehto {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;          /* a comfortable thumb target */
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
/* The result bar grows inside the pill the option already occupies, so the
   card does not change height when the numbers arrive and the eye does not
   lose its place. */
.kysely-palkki {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: rgba(91, 127, 224, 0.32);
    transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}
.kysely-nimi  { position: relative; flex: 1; }
.kysely-osuus {
    position: relative;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
}
.kysely-oma {
    border-color: rgba(255, 255, 255, 0.75);
}
.kysely-oma .kysely-palkki { background: rgba(91, 127, 224, 0.55); }
/* Once voted the pills are a chart, not a menu — they still accept a tap to
   change the answer, but they should stop inviting one. */
.kysely-aanestetty .kysely-vaihtoehto { cursor: default; font-weight: 500; }
.kysely-aanestetty .kysely-oma        { font-weight: 700; }
.kysely-jalki {
    margin-top: 0.8rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}

/* Kysymyskortti karusellien välissä (etusivuKysymyskortit, js/spa.js): sama
   pinta kuin gallupilla, lisäksi Ohita / Tallenna / Seuraava kysymys. */
.lohko-kysymyskortti.kk-tyhja { display: none; }
.kk-alarivi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.9rem;
}
.kk-nappi {
    background: none;
    border: 0;
    /* Korkeus sormelle riittäväksi (oli 26 px). Negatiivinen marginaali
       pitää rivin omassa korkeudessaan, jottei kortti kasva. */
    padding: 0.62rem 0;
    margin: -0.27rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    cursor: pointer;
}
.kk-seuraava { color: #fff; font-weight: 700; margin-left: auto; }
.kk-tallenna {
    min-height: 2.4rem;
    padding: 0 1.3rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.kk-tallenna:disabled { opacity: 0.35; cursor: default; }

/* ── Nosto ────────────────────────────────────────────────────────────────
   One subject, a whole block. Bigger than a card and quieter than a hero:
   a hero is a photograph with a caption over it, a nosto is a photograph
   with a proper name and subtitle under it, because the point is who this is
   rather than how it looks. */
.lohko-nosto {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}
.nosto-kortti {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
    cursor: pointer;
    letter-spacing: normal;   /* .content sets -0.18rem; see .info-kortti */
}
.nosto-kortti:active { background: rgba(255, 255, 255, 0.06); }
.nosto-kuva {
    aspect-ratio: 4 / 3;
    background: var(--st-surface);
}
.nosto-kuva img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    /* Portraits are the common case here and a centred crop lands on the
       chest; bias upward so faces survive. Same reasoning as #userFeed. */
    object-position: center 25%;
    display: block;
}
.nosto-kuva-puuttuu img { display: none; }
.nosto-sisus {
    padding: 1.05rem 1.2rem 1.2rem;
}
.nosto-nimi {
    font-family: var(--st-font-display);
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.03rem;
    color: #fff;
    margin: 0 0 0.3rem;
}
.nosto-ala {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}
.nosto-nappi {
    margin-top: 0.95rem;
    padding: 0.52rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.nosto-nappi:active { background: rgba(255, 255, 255, 0.12); }

/* Kooste: noston pinta, sisällä vaakasuunnassa pyyhkäistävät kohteet. */
.lohko-kooste {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}
.kooste-kortti {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.035);
    overflow: hidden;
    letter-spacing: normal;   /* .content sets -0.18rem; see .info-kortti */
}
.kooste-paa { padding: 1.05rem 1.2rem 0.85rem; }
.kooste-otsikko {
    font-family: var(--st-font-display);
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
    margin: 0;
}
.kooste-rata {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.kooste-rata::-webkit-scrollbar { display: none; }
.kooste-sivu {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
}
.kooste-sivu .nosto-kuva { cursor: pointer; }
.kooste-sivu .nosto-nimi { font-size: 1.1rem; }
.kooste-sivu .nosto-teksti {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0 0;
}
.kooste-pisteet {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    padding: 0 0 0.6rem;
}
/* Näkyvä piste on pieni, painettava ala 32 px (savutesti T8). */
.kooste-piste {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: pointer;
}
.kooste-piste::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    margin: -0.225rem 0 0 -0.225rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}
.kooste-piste.on::before { background: var(--st-accent); }

/* Lokaatiovinkki: kyselykortin pinta, vastaus kirjoitetaan. */
.vinkki-lomake {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.vinkki-kentta {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 1rem;   /* iOS Safari zoomaa alle 16 px kenttään */
    letter-spacing: normal;
}
.vinkki-kentta::placeholder { color: rgba(255, 255, 255, 0.5); }
/* Paikkakunnan ehdotukset (lohkoVinkki): napautettavat rivit kentän alla. */
.vinkki-kunta { position: relative; }
.vinkki-ehdotukset {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    padding: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.8rem;
    background: #10141d;
}
.vinkki-ehdotukset[hidden] { display: none; }
.vinkki-ehdotus {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.6rem;
    background: none;
    color: #fff;
    font: 400 0.95rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-align: left;
    cursor: pointer;
}
.vinkki-ehdotus:hover,
.vinkki-ehdotus:focus-visible { background: rgba(91, 127, 224, 0.2); }
.vinkki-laheta { justify-content: center; }
.vinkki-laheta:disabled { opacity: 0.6; }
.vinkki-viesti {
    margin: 0.2rem 0 0;
    min-height: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}
.vinkki-viesti:empty { display: none; }
.vinkki-viesti.virhe { color: #ff8a7a; }
.vinkki-olemassa {
    padding: 0.3rem 0;
    border: 0;
    background: none;
    color: var(--st-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Back to top. Sits above the floating footer, on the side the thumb is not
   already using for navigation, and only appears once there is somewhere to
   go back to — a control that is always there is a control always in the way. */
.etusivu-ylos {
    position: fixed;
    right: 1rem;
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(20, 26, 43, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.etusivu-ylos-nakyy { opacity: 1; transform: translateY(0); pointer-events: auto; }
.etusivu-ylos svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Only on Etusivu: the other views have their own headers and a back arrow. */
body:not(.etusivu-active) .etusivu-ylos { display: none; }

/* ── Kielivalitsin ────────────────────────────────────────────────────────
   A sheet, not a cycle. With two languages a cycling button behaves like a
   toggle and gets away with it; with three, reaching the last one means
   pressing through the others, and nothing ever shows what the options are. */
/* The resting state is the visible one, and the slide-in is a keyframe on top
   of it — never a transition from an invisible starting state.
   A transition only advances when frames run, and in a throttled or
   backgrounded tab they may not: the sheet then sits at opacity 0, translated
   off-screen, technically open and impossible to see. Built this way the worst
   case is that the animation is skipped and the sheet is simply there, which
   is the failure you want. Same reasoning as the Stormi Assistant panel. */
.sv-lang-overlay {
    position: fixed;
    inset: 0;
    /* Samassa pinossa kuin muut arkit (ikkunatPinoon): 11000 jätti
       Kielen jälkeen avatun Yksityisyyden sen taakse (testaajat 11.10.2026). */
    z-index: 10960;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}
/* The `hidden` attribute hides via the UA stylesheet's `display: none`, which
   any class rule with `display` outranks — so `display: flex` above quietly
   won and left a full-screen layer at z-index 11000 over the whole app,
   swallowing every tap. Anything that sets `display` on an element it also
   hides with `hidden` has to say this too. */
.sv-lang-overlay[hidden] { display: none; }
.sv-lang-sheet {
    width: 100%;
    max-width: 32rem;
    background: var(--st-surface);
    border-radius: var(--st-radius-lg) var(--st-radius-lg) 0 0;
    padding: 1.1rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
    letter-spacing: normal;   /* .content sets -0.18rem; see .info-kortti */
    animation: sv-lang-ylos 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes sv-lang-ylos {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .sv-lang-sheet { animation: none; }
}

.sv-lang-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}
.sv-lang-head h3 {
    margin: 0;
    font-family: var(--st-font-display);
    font-size: 1rem;
    color: #fff;
}
.sv-lang-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.sv-lang-list { display: flex; flex-direction: column; gap: 0.45rem; }
.sv-lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}
.sv-lang-item:active { background: rgba(255, 255, 255, 0.08); }
.sv-lang-item-valittu {
    border-color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.sv-lang-item svg {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Said before the switch, not discovered after it: someone who picks Svenska
   and still meets Finnish should have been told, not left wondering whether
   something is broken. */
.sv-lang-note {
    margin: 1rem 0 0;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* ── Esittely-kutsu ────────────────────────────────────────────────────────
   The identity marks sit in one centred row. The row carries no margin of
   its own — each mark brings its own below it — so an account with neither
   sees the name exactly where it always was. */
.sv-orbs { display: flex; justify-content: center; gap: 0.7rem; }
.sv-orbs .sv-kutsu-orb { margin: 0 0 0.7rem; }
/* Odottava kutsu tai haastattelu: mitali hehkuu hitaasti. */
.sv-kutsu-orb:has(.sv-kutsu-orb-dot:not([style*="none"])) {
    animation: sv-orb-hehku 2.8s ease-in-out infinite;
}
@keyframes sv-orb-hehku {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 14px rgba(212, 163, 58, 0.22); }
    50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(240, 205, 120, 0.55); }
}
.sv-esittely-orb:has(.sv-kutsu-orb-dot:not([style*="none"])) { animation-name: sv-orb-hehku-hopea; }
@keyframes sv-orb-hehku-hopea {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 14px rgba(170, 196, 235, 0.22); }
    50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(205, 222, 250, 0.55); }
}
.sv-esittely-orb .sv-kutsu-orb-dot {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #dfe6f2 40%, #8e9bb2 100%);
    box-shadow: 0 0 8px rgba(200, 214, 240, 0.75);
    color: #10141c;
}
@media (prefers-reduced-motion: reduce) {
    .sv-kutsu-orb:has(.sv-kutsu-orb-dot:not([style*="none"])) { animation: none; }
}

/* The same medal as Kultainen kutsu in silver, with a star: close enough to
   read as a mark of standing, different enough that nobody opens one
   expecting the other. */
.sv-esittely-orb {
    color: #dfe6f2;
    border-color: rgba(200, 212, 230, 0.85);
    background:
        radial-gradient(circle at 34% 26%, rgba(235, 242, 255, 0.18) 0%, rgba(235, 242, 255, 0) 58%),
        rgba(6, 8, 12, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(170, 196, 235, 0.22);
}
.sv-esittely-orb::after { border-color: rgba(200, 212, 230, 0.35); }
.sv-esittely-orb:hover {
    color: #fff;
    border-color: #eef3fb;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 22px rgba(190, 214, 250, 0.45);
}
.sv-esittely-orb:hover::after { border-color: rgba(238, 243, 251, 0.55); }

/* Below .spm-overlay (10500) on purpose, still above the footer (10001):
   tapping the preview opens the card over the panel and closing it lands
   back here, rather than the card opening invisibly underneath. */
.sv-esittely-sheet { z-index: 10400; }
.sv-esittely-sheet .sv-kutsu-header { border-bottom-color: rgba(200, 212, 230, 0.16); }
.sv-esittely-sheet .sv-kutsu-title { color: #d5deeb; }
.sv-esittely-sheet .sv-kutsu-accept {
    color: #10141c;
    background: linear-gradient(180deg, #f4f7fc, #b9c6d9);
}

.sv-esittely-kortti {
    max-width: 26rem;
    margin: 0 auto 3rem;
    font-family: var(--st-font-body);
}
.sv-esittely-kortti:last-child { margin-bottom: 0; }
.sv-esittely-paiva {
    text-align: center;
    color: #dfe6f2;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 1.1rem;
}
.sv-esittely-saate {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.82rem;
    line-height: 1.55;
    border-left: 2px solid rgba(200, 212, 230, 0.4);
    padding: 0.15rem 0 0.15rem 0.85rem;
    margin: 0 0 1.3rem;
    white-space: pre-line;
}
.sv-esittely-saate span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0.25rem;
}
.sv-esittely-esikatselu { margin: 0 0 1.5rem; }
.sv-esittely-label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0.45rem;
}
.sv-esittely-teksti {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.5rem;
    resize: vertical;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0.7rem 0.8rem;
}
.sv-esittely-teksti:focus { outline: none; border-color: rgba(200, 212, 230, 0.6); }
.sv-esittely-tekstirivi {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.4rem 0 0.2rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}
.sv-esittely-laskuri { flex: 0 0 auto; }
.sv-esittely-palauta {
    background: none;
    border: none;
    padding: 0;
    margin: 0.3rem 0 0;
    color: #c9d6ea;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.sv-esittely-kierto { margin: 0.6rem 0 0.2rem; font: 400 0.8rem/1.45 var(--st-font-body); color: rgba(255,255,255,0.7); letter-spacing: normal; }
.sv-esittely-hyvaksytty {
    text-align: center;
    color: #a9dcc0;
    font-size: 0.82rem;
    margin: 1.2rem 0 0;
}
.sv-esittely-kortti .sv-kutsu-card-actions { margin-top: 1.1rem; }
.sv-esittely-ilmoitus {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    min-height: 1.1em;
    margin-top: 0.7rem;
}

/* The words an esittely carries on the home page, under the name. */
.nosto-teksti {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    margin: 0.6rem 0 0;
    white-space: pre-line;
}
.nosto-teksti:empty { display: none; }

/* ── Julisteet ─────────────────────────────────────────────────────────────
   Posters in their own shape, one at a time. The slide is two thirds of the
   screen and the rest is padding, so scroll-snap centres a poster with a strip of each
   neighbour at the edges — enough to say "there are more", not enough to
   compete with the one in the middle. */
#etusivuLohkot > .lohko-juliste { margin-bottom: 0; }
.lohko-juliste .menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.juliste-rulla {
    /* One width for the slide and the padding that centres it. A percentage
       flex-basis would be taken of the box *inside* the padding, and the
       posters came out at 40% of the screen instead of two thirds. */
    --juliste-leveys: min(66vw, 18rem);
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.3rem calc((100% - var(--juliste-leveys)) / 2) 0.5rem;
    position: relative;   /* offsetLeft of each poster is measured from here */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.juliste-rulla::-webkit-scrollbar { display: none; }
/* Grab cursor only where a mouse is the pointer; see julisteRaahaus(). */
@media (hover: hover) and (pointer: fine) {
    .juliste-rulla { cursor: grab; }
}
.juliste-rulla.juliste-rulla-vedetaan { cursor: grabbing; scroll-snap-type: none; }
.juliste {
    flex: 0 0 var(--juliste-leveys);
    scroll-snap-align: center;
    letter-spacing: normal;   /* .content sets -0.18rem; see .info-kortti */
}
.juliste-kuva {
    aspect-ratio: 2 / 3;
    border-radius: var(--st-radius-lg);
    overflow: hidden;
    background: var(--st-surface);
    box-shadow: var(--st-varjo-nostettu);
}
.juliste-kuva img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.juliste-kuva-puuttuu img { display: none; }
.juliste-nimi {
    font-family: var(--st-font-display);
    font-size: 1rem;
    line-height: 1.2;
    color: #fff;
    margin: 0.85rem 0 0.2rem;
}
.juliste-pvm {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.35rem;
}
.juliste-kuvaus {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── Tapahtumakortti ───────────────────────────────────────────────────────
   An info block that is an event: pictures that swipe inside the image area,
   when and where, a seat meter with the sign-up, and who organises it. The
   card stays one card high however many pictures come with it. */
.info-kuva.info-galleria { position: relative; aspect-ratio: 16 / 9; }
.info-galleria-rulla {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    position: relative;   /* offsetLeft of each slide is measured from here */
    -webkit-overflow-scrolling: touch;
}
.info-galleria-rulla::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
    .info-galleria-rulla { cursor: grab; }
}
.info-galleria-rulla.info-galleria-vedetaan { cursor: grabbing; scroll-snap-type: none; }
.info-galleria-kuva { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.info-galleria-kuva img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}
.info-galleria-pisteet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    display: flex;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}
/* Piste on 32 px painettava nappi (nappien alaraja), näkyvä täplä ::before. */
.info-galleria-piste {
    pointer-events: auto;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.info-galleria-piste:active { transform: none; }
.info-galleria-piste::before {
    content: '';
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, transform 0.2s ease;
}
.info-galleria-piste.aktiivinen::before { background: #fff; transform: scale(1.25); }
/* Nuolet vain hiirelle: kosketusnäytöllä vedetään. */
.info-galleria-nuoli { display: none; }
@media (hover: hover) and (pointer: fine) {
    .info-galleria-nuoli:not([hidden]) {
        position: absolute; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(20, 21, 26, 0.7); color: #fff; cursor: pointer;
    }
    .info-galleria-nuoli:hover { border-color: #5b7fe0; }
    .info-galleria-nuoli:active { transform: translateY(-50%) scale(0.94); }
    .info-galleria-nuoli.vasen { left: 0.6rem; }
    .info-galleria-nuoli.oikea { right: 0.6rem; }
    .info-galleria-nuoli svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

.info-tapahtuma { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.9rem; }
.info-tapahtuma-rivi {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
.info-tapahtuma-rivi svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: none;
    stroke: rgba(143, 211, 232, 0.9);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-ilmo { margin-top: 1.1rem; }
.info-ilmo-mittari {
    height: 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.info-ilmo-mittari span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8fd3e8, #4fb3cf);
    transition: width 0.35s ease;
}
.info-ilmo-mittari.tayttyy span { background: linear-gradient(90deg, #f3c77a, #e59a5c); }
.info-ilmo-luku {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0.45rem 0 0.85rem;
}
.info-ilmo-napit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.info-ilmo-osallistu {
    padding: 0.66rem 1.5rem;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #14161c;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.info-ilmo-osallistu:active { transform: scale(0.98); }
.info-ilmo-napit button:disabled { opacity: 0.5; cursor: default; }
.info-ilmo-mukana {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.58rem 1.05rem;
    border-radius: 999px;
    background: rgba(120, 210, 160, 0.14);
    color: #a9e8c4;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
}
.info-ilmo-linkki {
    background: none;
    border: none;
    padding: 0.5rem 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}
.info-ilmo-taynna {
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}
.ilmo-rivi { cursor: pointer; }
.info-ilmo-osallistujat {
    padding: 0.58rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.info-jarjestaja {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin-top: 1.1rem;
    padding: 0.9rem 0 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: none;
    color: inherit;
    text-align: left;
    letter-spacing: normal;
    cursor: pointer;
}
.info-jarjestaja-kuva {
    width: 2.3rem;
    height: 2.3rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--st-surface);
    background-size: cover;
    background-position: center 25%;
}
.info-jarjestaja-teksti { display: flex; flex-direction: column; min-width: 0; }
.info-jarjestaja-label {
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09rem;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}
.info-jarjestaja-nimi {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
}
.ilmo-yhteenveto {
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    margin: 0 0 1.4rem;
}

/* ── Tapahtuma syötteessä: tiivis kortti ──────────────────────────────────
   Almost square (4:5 grows if the text needs it). The main picture whole on
   a blurred, darkened copy of itself, so the tile reads as one image with the
   words on it; the full card opens in .tapahtuma-sheet. */
.tapahtuma-tiivis {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    text-align: left;
}
.tapahtuma-tiivis:focus-visible { outline: 2px solid rgba(143, 211, 232, 0.8); outline-offset: 2px; }
.tapahtuma-tiivis-tausta {
    position: absolute;
    inset: -24px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.42) saturate(1.25);
}
/* min-height: 0 ja overflow: hidden, koska sarakesuuntaisen flexin kohteella
   on min-height: auto: pystykuva kasvatti kuvalaatikon yli 16:9:n, ja koska
   kortin oma korkeus on lukittu (aspect-ratio 4/5, overflow hidden), teksti
   jäi kortin alareunan alle leikkautuen kesken sanan. Kuvasuhde ratkaisee
   nyt laatikon koon riippumatta siitä, minkä muotoisen kuvan joku lataa. */
.tapahtuma-tiivis-kuva {
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}
.tapahtuma-tiivis-kuva img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    display: block;
}
.tapahtuma-tiivis-sisus {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.15rem 1.1rem;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.1) 0%, rgba(5, 7, 13, 0.55) 100%);
}
.tapahtuma-tiivis .info-otsikko { margin-bottom: 0.4rem; }
.tapahtuma-tiivis .info-tapahtuma { gap: 0.25rem; margin-bottom: 0.55rem; }
.tapahtuma-tiivis-teksti {
    margin: 0;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tapahtuma-tiivis-ala {
    margin-top: auto;
    padding-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
}
.tapahtuma-tiivis-paikat { color: rgba(255, 255, 255, 0.72); }
.tapahtuma-tiivis-paikat.mukana { color: #a9e8c4; font-weight: 700; }
.tapahtuma-tiivis-avaa { margin-left: auto; color: #fff; font-weight: 700; white-space: nowrap; }

/* The opened event. Below .spm-overlay (10500) so the organiser's card and
   the attendee list open over it, above the footer (10001). */
.tapahtuma-sheet {
    position: fixed;
    inset: 0;
    z-index: 10400;
    display: flex;
    flex-direction: column;
    background: var(--st-bg, #05070d);
}
.tapahtuma-sheet-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 1rem 0.6rem;
}
.tapahtuma-sheet .sv-gear-sheet-close { position: static; }
.tapahtuma-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 3rem;
    letter-spacing: normal;
}
.tapahtuma-sheet-body .lohko-info { width: 92%; margin: 0 auto; }

/* Section heading above an event tile ("Lähelläsi"), placed and set exactly
   like a carousel's title so the page keeps one left edge for headings. The
   block spans the page for that; the tile itself keeps the info card's 88%.
   The title rules are repeated rather than borrowed from .menu, because
   .menu span would restyle every span inside the tile as well. */
.lohko-info.lohko-tapahtuma { width: 100%; }
.tapahtuma-tiivis-runko { width: 88%; margin: 0 auto; }
.tapahtuma-tiivis-otsikko span {
    display: block;
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: normal;
    padding: 0 1rem;
    margin-left: 2rem;
}

/* ── Avattu tapahtuma: yksi näyttö ────────────────────────────────────────
   Set like a Kultainen kutsu. The header is a faded photo of people under a
   gradient that runs out into the page's own dark, so the title sits on the
   picture and the text below sits on the ground with no seam between. Sizes
   are chosen so a phone shows the whole event without scrolling; the body
   still scrolls if a long text or a small screen needs it. */
.tapahtuma-sheet-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}
.tapahtuma-sheet-body { padding-bottom: 1rem; }
.tapahtuma-taysi { letter-spacing: normal; }
.tapahtuma-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Tall enough that the faded photo reads as people, not as texture. */
    padding: calc(env(safe-area-inset-top, 0px) + 5.6rem) 1.4rem 1rem;
}
.tapahtuma-hero-kuva {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 30%;
    opacity: 0.5;
    filter: saturate(0.9);
}
.tapahtuma-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(5, 7, 13, 0.25) 0%,
        rgba(5, 7, 13, 0.55) 55%,
        var(--st-bg, #05070d) 100%);
}
.tapahtuma-hero .info-merkki { color: rgba(143, 211, 232, 0.95); margin-bottom: 0.35rem; }
.tapahtuma-hero-otsikko {
    font-family: var(--st-font-display);
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -0.03rem;
    color: #fff;
    margin: 0 0 0.65rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.tapahtuma-hero .info-tapahtuma { margin: 0; gap: 0.3rem; }
.tapahtuma-hero .info-tapahtuma-rivi { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.tapahtuma-peukalot { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.9rem; }
.tapahtuma-peukalo {
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    border-radius: 0.55rem;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.06);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.tapahtuma-peukalo:hover { border-color: rgba(255, 255, 255, 0.7); }
.tapahtuma-peukalo:active { transform: scale(0.96); }
.tapahtuma-runko { padding: 0.15rem 1.4rem 0.5rem; }
.tapahtuma-runko .info-teksti {
    font-size: 0.82rem;
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.74);
    margin: 0 0 0.45rem;
}
.tapahtuma-runko .info-ilmo { margin-top: 0.8rem; }
.tapahtuma-runko .info-ilmo-luku { margin: 0.35rem 0 0.6rem; }
.tapahtuma-runko .info-jarjestaja { margin-top: 0.85rem; padding-top: 0.7rem; }

/* Sign-up in the opened event, centred: the count, the bar under it, and
   the button in the middle of the screen — the one thing to do here. */
.tapahtuma-runko .info-ilmo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
}
.tapahtuma-runko .info-ilmo-luku { order: 1; margin: 0 0 0.5rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }
.tapahtuma-runko .info-ilmo-mittari { order: 2; width: 100%; height: 0.4rem; }
.tapahtuma-runko .info-ilmo-napit { order: 3; width: 100%; justify-content: center; margin-top: 0.9rem; }
.tapahtuma-runko .info-ilmo-osallistu { min-width: 62%; padding: 0.8rem 1.6rem; font-size: 0.92rem; }

/* The organiser: face and name on a faint band of the event's main picture. */
.tapahtuma-jarjestaja {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    text-align: left;
    letter-spacing: normal;
    cursor: pointer;
}
/* The event's title graphic, cropped to its KARMA MEDIA logo (bottom centre of
   the picture) and set to the right of the name, fading in from the left. */
.tapahtuma-jarjestaja-tausta {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    z-index: -1;
    background-size: 280% auto;
    background-position: 45% 100%;
    background-repeat: no-repeat;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
}
.tapahtuma-jarjestaja::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(5, 7, 13, 0.78) 0%, rgba(5, 7, 13, 0.3) 100%);
}
.tapahtuma-jarjestaja-kuva {
    width: 3.3rem;
    height: 3.3rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background-color: var(--st-surface);
    background-size: cover;
    background-position: center 25%;
}
.tapahtuma-jarjestaja-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tapahtuma-jarjestaja .info-jarjestaja-nimi { font-size: 1rem; }
.tapahtuma-jarjestaja-avaa { font-size: 1.6rem; line-height: 1; color: rgba(255, 255, 255, 0.7); }

/* The pictures opened large. Above the event sheet (10400) and the card modal
   (10500): it is opened from inside them and has to cover them. */
.tapahtuma-kuvat {
    position: fixed;
    inset: 0;
    z-index: 10700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(3, 4, 8, 0.94);
    letter-spacing: normal;
}
.tapahtuma-kuvat-rulla {
    position: relative;   /* offsetLeft of each slide is measured from here */
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tapahtuma-kuvat-rulla::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
    .tapahtuma-kuvat-rulla { cursor: grab; }
}
.tapahtuma-kuvat-rulla.tapahtuma-kuvat-vedetaan { cursor: grabbing; scroll-snap-type: none; }
.tapahtuma-kuvat-dia {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    scroll-snap-align: center;
}
.tapahtuma-kuvat-dia img {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 10px;
    -webkit-user-select: none;
    user-select: none;
}
.tapahtuma-kuvat-laskuri {
    margin-top: 1rem;
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    letter-spacing: 0.08rem;
    color: rgba(255, 255, 255, 0.7);
}
.tapahtuma-kuvat-sulje {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    right: 1rem;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #14161c;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.tapahtuma-kuvat-nuoli {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.tapahtuma-kuvat-nuoli.edellinen { left: 0.6rem; }
.tapahtuma-kuvat-nuoli.seuraava { right: 0.6rem; }
/* A finger swipes; arrow buttons would only cover the picture. */
@media (hover: none) {
    .tapahtuma-kuvat-nuoli { display: none; }
}

/* ── Kaupunkisivu ──────────────────────────────────────────────────────────
   A city's own page (kaupunkiSivuAvaa). Below the profile modal (10500) and
   the event sheet (10400), because cards, locations, projects and event
   cards open from this page and must land on top of it. */
.kaupunki-sivu {
    position: fixed;
    inset: 0;
    z-index: 10300;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--st-bg, #05070d);
    color: #fff;
    letter-spacing: normal;
}
.kaupunki-sivu .kaupunki-sivu-sulje {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    right: 1rem;
    left: auto;
    z-index: 2;
}
.kaupunki-sivu-runko { padding-bottom: var(--st-alapalkki-tila); }
.kaupunki-virhe {
    padding: 2rem 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* Hero: almost the whole screen, with the name in the middle of it. The
   picture fades into the page below. */
.kaupunki-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 82vh;
    height: 82svh;
    min-height: 24rem;
    overflow: hidden;
}
.kaupunki-hero-kuva {
    position: absolute;
    inset: 0;
    background-color: #10131c;
    background-size: cover;
    background-position: center;
    filter: brightness(0.62) saturate(0.92);
    animation: kaupunki-hero-lahenee 38s ease-out both;
}
/* A very slow push-in, like the opening shot of a film. Once. */
@keyframes kaupunki-hero-lahenee {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
    .kaupunki-hero-kuva { animation: none; }
}
.kaupunki-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(5, 7, 13, 0.4) 0%,
        rgba(5, 7, 13, 0) 28%,
        rgba(5, 7, 13, 0.2) 55%,
        var(--st-bg, #05070d) 100%);
}
/* Kaupungin vaakuna hero-kuvan ylälaidassa, keskellä. Hero on 82vh ja sen
   sisältö pystysuunnassa keskitetty, joten yläpuolelle jää tyhjää — vaakuna
   täyttää sen. Oma absoluuttinen asemointinsa, koska .kaupunki-hero-sisus on
   keskitetty eikä vaakuna saa työntää nimeä alaspäin. */
.kaupunki-hero-vaakuna {
    position: absolute;
    z-index: 1;
    top: calc(2.4rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    height: 4.6rem;
    width: auto;
    /* Vaakunat ovat läpinäkyviä PNG:itä, ja hero-kuva niiden takana voi olla
       vaalea — pehmeä varjo pitää ne luettavina kummallakin taustalla. */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}
@media (max-height: 640px) {
    .kaupunki-hero-vaakuna { top: calc(1.4rem + env(safe-area-inset-top, 0px)); height: 3.4rem; }
}

.kaupunki-hero-sisus {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 0 1.5rem;
    text-align: center;
}
.kaupunki-hero-merkki {
    margin-bottom: 0.4rem;
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    text-transform: none;
    color: rgba(255, 255, 255, 0.78);
}
.kaupunki-hero-nimi {
    margin: 0;
    font-family: var(--st-font-body);
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.kaupunki-hero-esittely {
    max-width: 34rem;
    margin: 0.8rem auto 0;
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
}
.kaupunki-hero-luvut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.1rem;
}
.kaupunki-hero-luvut:empty { display: none; }
.kaupunki-hero-luku {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 0.3rem;
    border: none;
    border-radius: 0.5rem;
    background: none;
    color: inherit;
    font-family: var(--st-font-body);
    cursor: pointer;
}
.kaupunki-hero-luku:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.kaupunki-hero-luku strong { font-size: 1.25rem; line-height: 1.1; color: #fff; }
.kaupunki-hero-luku span {
    font-size: 0.75rem;
    letter-spacing: 0.06rem;
    text-transform: none;
    color: rgba(255, 255, 255, 0.62);
}

/* The stream: the city's sections with their carousels, and its info cards
   and polls between them. A section sits close to the carousel it introduces;
   the wider gap is between one thing and the next. */
.kaupunki-virta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    /* The first card rises into the hero's faded lower part, so the picture
       stays behind it instead of ending in a band of empty dark. */
    margin-top: -7rem;
}
.kaupunki-pari {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.kaupunki-pari > .spm-kaupunki-section,
.kaupunki-pari > .spm-kaupunki-section-plain { width: 92%; margin: 0 auto; box-sizing: border-box; }
.kaupunki-virta .lohko-info,
.kaupunki-virta .lohko-kysely,
.kaupunki-virta .lohko-nosto { width: 92%; margin-left: auto; margin-right: auto; }
/* An event tile spans the page like on Etusivu, with its heading on the same
   left edge as this page's other section headings. */
.kaupunki-virta .lohko-info.lohko-tapahtuma { width: 100%; }
.kaupunki-virta .tapahtuma-tiivis-runko { width: 92%; }
.kaupunki-virta .tapahtuma-tiivis-otsikko span {
    margin: 0 0 0.75rem;
    padding: 0 4%;
    font-family: var(--st-font-body);
    font-size: 1rem;
}
.kaupunki-osio-otsikko {
    margin: 0 0 0.75rem;
    padding: 0 4%;
    font-family: var(--st-font-body);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.kaupunki-rulla {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    padding: 0 4%;
    scroll-padding: 0 4%;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.kaupunki-rulla::-webkit-scrollbar { display: none; }
.kaupunki-rulla.kaupunki-rulla-vedetaan { scroll-snap-type: none; cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
    .kaupunki-rulla { cursor: grab; }
}
.kaupunki-laatta {
    flex: 0 0 auto;
    width: 9.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}
.kaupunki-laatta-kuva {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 0.8rem;
    background-color: rgba(255, 255, 255, 0.06);
    background-size: cover;
    background-position: center;
}
/* People are portraits, and a face sits in the upper part of the picture. */
.kaupunki-osio-tekijat .kaupunki-laatta { width: 8rem; }
.kaupunki-osio-tekijat .kaupunki-laatta-kuva { aspect-ratio: 3 / 4; background-position: center 20%; }
.kaupunki-laatta-kuva { position: relative; }
.kaupunki-laatta-merkki,
.kaupunki-laatta-sinulle-merkki {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    background: rgba(5, 7, 13, 0.72);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
}
/* Work that fits the reader's own card. */
.kaupunki-laatta-sinulle-merkki {
    top: auto;
    bottom: 0.45rem;
    background: #fff;
    color: #11141c;
}
.kaupunki-laatta-sinulle .kaupunki-laatta-kuva { box-shadow: 0 0 0 2px #fff; }
.kaupunki-laatta-ala {
    display: block;
    margin-top: 0.1rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kaupunki-laatta-nimi {
    display: block;
    margin-top: 0.45rem;
    overflow: hidden;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaupunki-ruudukko {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0 4%;
}
.kaupunki-tapahtuma {
    position: relative;
    aspect-ratio: 4 / 5;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 0.9rem;
    background: #11141c;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.kaupunki-tapahtuma:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.kaupunki-tapahtuma-kuva {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.kaupunki-tapahtuma::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.78) 100%);
}
/* The day as a small tag: weekday above, date below. */
.kaupunki-tapahtuma-pvm {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.7rem;
    padding: 0.3rem 0.45rem 0.35rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.94);
    color: #11141c;
    font-family: var(--st-font-body);
    line-height: 1.05;
}
.kaupunki-tapahtuma-pvm small {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06rem;
    text-transform: none;
    opacity: 0.7;
}
.kaupunki-tapahtuma-pvm strong { font-size: 0.82rem; font-weight: 800; }
.kaupunki-tapahtuma-nimi {
    position: absolute;
    right: 0.75rem;
    bottom: 0.7rem;
    left: 0.75rem;
    z-index: 1;
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}
.kaupunki-tapahtuma:first-child .kaupunki-tapahtuma-nimi { font-size: 1rem; }
.kaupunki-tapahtuma-mennyt .kaupunki-tapahtuma-kuva { filter: grayscale(0.7) brightness(0.72); }
.kaupunki-tapahtuma-mennyt .kaupunki-tapahtuma-pvm { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.82); }
.kaupunki-ruudukko-menneet .kaupunki-tapahtuma:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
.kaupunki-ruudukko-menneet .kaupunki-tapahtuma:first-child .kaupunki-tapahtuma-nimi { font-size: 0.92rem; }
.kaupunki-ruudukko + .kaupunki-menneet-nappi,
.kaupunki-menneet-nappi + .kaupunki-ruudukko-menneet { margin-top: 0.8rem; }
.kaupunki-menneet-nappi {
    display: block;
    margin: 0 auto;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

/* Section bar: slides down from the top once the hero has scrolled away.
   Leaves room on the right for the close button, which stays on top. */
.kaupunki-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 4rem 0.7rem 0;
    background: rgba(5, 7, 13, 0.84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-110%);
    transition: transform 0.25s ease;
}
.kaupunki-nav.kaupunki-nav-nakyvissa { transform: translateY(0); }
.kaupunki-nav-rulla {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0 0 0 1rem;
    scrollbar-width: none;
}
.kaupunki-nav-rulla::-webkit-scrollbar { display: none; }
.kaupunki-nav-linkki {
    flex: 0 0 auto;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kaupunki-nav-linkki.aktiivinen { background: #fff; border-color: #fff; color: #11141c; }

.kaupunki-loppu { width: 92%; margin: 2.6rem auto 0; }

/* City accent colour (profiili_tieto.kaupunki_vari → --kaupunki-vari). Only
   applied when the city has one, so a city without keeps the white page. */
.kaupunki-osio-otsikko::after {
    content: '';
    display: block;
    width: 1.6rem;
    height: 2px;
    margin-top: 0.4rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
}
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-osio-otsikko::after,
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-virta .tapahtuma-tiivis-otsikko span::after { background: var(--kaupunki-vari); }
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-virta .tapahtuma-tiivis-otsikko span::after {
    content: '';
    display: block;
    width: 1.6rem;
    height: 2px;
    margin-top: 0.4rem;
    border-radius: 2px;
}
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-hero-merkki,
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-virta .info-merkki,
.kaupunki-sivu[style*="--kaupunki-vari"] .spm-kaupunki-section-eyebrow { color: var(--kaupunki-vari); }
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-nav-linkki.aktiivinen {
    background: var(--kaupunki-vari);
    border-color: var(--kaupunki-vari);
}
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-laatta-sinulle-merkki { background: var(--kaupunki-vari); }
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-laatta-sinulle .kaupunki-laatta-kuva { box-shadow: 0 0 0 2px var(--kaupunki-vari); }

/* Tuotannolle: the production toolkit card on a city page. */
.kaupunki-tyokalut-rivit { margin-top: 0.7rem; }
.kaupunki-tyokalu {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.72rem 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.kaupunki-tyokalu[hidden] { display: none; }
.kaupunki-tyokalu-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: var(--st-font-body); }
.kaupunki-tyokalu-teksti strong { font-size: 0.92rem; font-weight: 700; }
.kaupunki-tyokalu-teksti small { margin-top: 0.1rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.58); }
.kaupunki-tyokalu-nuoli { font-size: 1.25rem; line-height: 1; color: rgba(255, 255, 255, 0.55); }
.kaupunki-sivu[style*="--kaupunki-vari"] .kaupunki-tyokalu-nuoli { color: var(--kaupunki-vari); }

.kaupunki-apurahat { display: flex; flex-direction: column; gap: 0.6rem; }
.kaupunki-apuraha {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    color: #fff;
    text-decoration: none;
}
.kaupunki-apuraha-kuva {
    flex: 0 0 3.6rem;
    height: 3.6rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.06) center / cover no-repeat;
}
.kaupunki-apuraha-teksti { display: flex; flex-direction: column; min-width: 0; font-family: var(--st-font-body); }
.kaupunki-apuraha-teksti strong { font-size: 0.92rem; }
.kaupunki-apuraha-teksti small { margin-top: 0.1rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

/* Tykkää kaupungista, under the city's name. Reuses .spm-like-row from the
   card modal so the heart looks identical everywhere; only the centering and
   the spacing are the hero's own. */
.kaupunki-tykkays {
    justify-content: center;
    margin-top: 1.1rem;
}
.kaupunki-tykkays .spm-like-btn { background: rgba(5, 7, 13, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kaupunki-tykkays .spm-like-count { color: rgba(255, 255, 255, 0.86); }

/* ═══ Ohjattu lomake — yksi kysymys kerrallaan (js/spa.js ohjattuLomake) ═══
   Lomakesivut (.ok-tumma: Luo ammattikortti / lokaatio / projekti, Muokkaa
   tietoja) ovat mustavalkoisia: yhtenäinen musta tausta hennolla rakeella, kentät ja
   palkit valkoisen ja harmaan sävyissä, ei korostusväriä (käyttäjän toive:
   sininen teema tuntui levottomalta). Otsikot isoin kirjaimin keskellä,
   otsikot ja napit sovelluksen omalla Arial Blackilla. */
/* Kirjasintokenit kuuluvat jokaiselle ohjatulle lomakkeelle, eivät vain
   tummalle teemalle.
   
   Ennen 3.10.2026 --ok-kapea ja --ok-leipa määriteltiin vain .ok-tummassa.
   Tehdyt työt (.ok-tila .ok-luo) ei saa sitä luokkaa, joten
   `font-family: var(--ok-leipa)` oli siellä kelvoton arvo ja kenttä peri
   esivanhemmaltaan Arial Blackin. Käyttäjä näki sen paksuna kirjasimena
   syöttökentässä — eli juuri siinä paikassa, jossa näyttökirjasinta ei
   sovelluksen oman säännön mukaan saa olla.
   
   Nyt tokenit ovat .ok-tilassa, joka on kaikkien ohjattujen lomakkeiden
   yhteinen runko; .ok-tumma perii ne ja määrittää vain värinsä. */
.ok-tila {
    --ok-kapea: var(--st-font-body);
    --ok-leipa: var(--st-font-body);
}

.ok-tumma {
    /* Otsikot ja napit Stormin omalla Arial Blackilla (fonts/, filkka.css),
       tekstit Arialilla — sama pari kuin muualla sovelluksessa. */
    /* --ok-* on lomakesivujen oma nimistö, mutta arvot tulevat nyt
       sovelluksen tokeneista (css/filkka.css). Ennen 1.10.2026 nämä olivat
       itsenäisiä arvoja, eivätkä ne olleet samaa mieltä rungon kanssa:
       himmeä teksti oli täällä rgba(255,255,255,0.55) ja siellä #8a8f9a.
       Kumpikaan ei muuttunut tässä — ne vain osoittavat samaan paikkaan. */
    --ok-kapea: var(--st-font-body);
    --ok-leipa: var(--st-font-body);
    --ok-leveys: 21rem;
    /* Otsikoiden paino: ohut kapea kirjain isoin kirjaimin. */
    --ok-ohut: 600;
    --ok-teksti: var(--st-text);
    --ok-himmea: var(--st-text-dim);
    --ok-haalea: var(--st-text-faint);
    --ok-viiva: var(--st-line);
    --ok-viiva-vahva: var(--st-line-strong);
    --ok-lasi: var(--st-glass);
    /* EI --st-accent: lomakesivut ovat tarkoituksella mustavalkoisia
       (käyttäjän toive — sininen teema tuntui levottomalta). */
    --ok-korostus: var(--st-text);
    --ok-virhe: var(--st-error);
    color-scheme: dark;
    color: var(--ok-teksti);
    background-color: #000;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ok-tumma main { background: transparent; }

/* Luo-sivu näyttää sovelluksen yhteisen taustakuvan, sama kuin Etsissä,
   Viesteissä ja julkisessa profiilissa. .ok-tumma maalaa lomakesivuille
   täysin mustan pohjan, mikä on oikein silloin kun sivu on pitkä lomake ja
   tausta veisi huomiota — mutta Luo on valikko, ja musta katkaisi
   yhtenäisyyden juuri siinä kohdassa, jossa käyttäjä liikkuu näkymien
   välillä. Rajattu tähän yhteen näkymään: muut lomakesivut pitävät
   mustansa, kunnes niistä päätetään erikseen. */
#luo-view.ok-tumma {
    background-color: transparent;
    background-image: none;
}

/* ── Sivun runko tummaksi ─────────────────────────────────────────────── */
/* Yläpalkki samaa taustaa kuin sivu: ei omaa sävyä eikä erottavaa viivaa. */
.ok-tumma .np-header {
    background: transparent;
    box-shadow: none;
}
.ok-tumma .np-back-btn { background: var(--ok-lasi); border-color: var(--ok-viiva); }
.ok-tumma .np-back-btn svg { stroke: #fff; }
.ok-tumma .np-header-title {
    color: var(--ok-himmea);
    font: 700 0.75rem/1.2 'Arial Black', var(--st-font-body);
    letter-spacing: 0.099em;
    text-transform: uppercase;
}
.ok-tumma .np-section-label {
    transform: none;
    color: var(--ok-himmea);
    font: 500 0.82rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-field-hint,
.ok-tumma .np-picker-intro-muted,
.ok-tumma .np-consent-caption { color: var(--ok-haalea); }
.ok-tumma .np-picker-intro { color: rgba(255, 255, 255, 0.8); }
.ok-tumma .np-required,
.ok-tumma .eu-heading-star,
.ok-tumma .eu-req-star,
.ok-tumma .eu-credential-msg { color: var(--ok-virhe); }

/* Kentät */
.ok-tumma .np-field-input,
.ok-tumma .np-field-textarea,
.ok-tumma .np-field-select,
.ok-tumma .np-profession-input,
.ok-tumma .loc-input,
.ok-tumma .np-role-input,
.ok-tumma .np-role-desc-input,
.ok-tumma .np-social-row select,
.ok-tumma .np-social-row input,
.ok-tumma .loc-contact-row input,
.ok-tumma .auto-expand {
    border: 1px solid var(--ok-viiva);
    border-radius: 14px;
    background-color: var(--ok-lasi);
    color: var(--ok-teksti);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ok-tumma .np-field-input:focus,
.ok-tumma .np-field-textarea:focus,
.ok-tumma .np-field-select:focus,
.ok-tumma .np-profession-input:focus,
.ok-tumma .loc-input:focus,
.ok-tumma .np-role-input:focus,
.ok-tumma .np-role-desc-input:focus,
.ok-tumma .np-social-row select:focus,
.ok-tumma .np-social-row input:focus,
.ok-tumma .loc-contact-row input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.07);
}
.ok-tumma .np-field-input::placeholder,
.ok-tumma .np-field-textarea::placeholder,
.ok-tumma .np-profession-input::placeholder,
.ok-tumma .loc-input::placeholder,
.ok-tumma .np-role-input::placeholder,
.ok-tumma .np-role-desc-input::placeholder,
.ok-tumma .np-social-row input::placeholder,
.ok-tumma .loc-contact-row input::placeholder { color: var(--ok-haalea); }
.ok-tumma .np-field-select:invalid { color: var(--ok-haalea); }
.ok-tumma .np-field-input:disabled { opacity: 0.55; }

/* Ehdotuslistat ja selauspaneeli */
.ok-tumma .np-profession-suggestion {
    background: #111;
    border-color: var(--ok-viiva);
    color: #fff;
}
.ok-tumma .np-profession-suggestion:hover,
.ok-tumma .np-profession-suggestion.np-ehdotus-valittu { background: #1a1a1a; }
.ok-tumma .np-sijainti-suggestions { background: #111; box-shadow: var(--st-varjo-nostettu); }
.ok-tumma .np-browse-panel { background: #000; color: #fff; }
.ok-tumma .np-browse-header { color: #fff; border-bottom-color: var(--ok-viiva);
    font-family: var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-browse-close { color: #fff; }
.ok-tumma .np-browse-group-label { color: var(--ok-himmea);
    font: 500 0.82rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-browse-item,
.ok-tumma .np-browse-muu-btn { background: var(--ok-lasi); border-color: var(--ok-viiva); color: #fff; }
.ok-tumma .np-browse-item:hover,
.ok-tumma .np-browse-muu-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ok-viiva-vahva); }
.ok-tumma .np-browse-item.active { background: #fff; border-color: #fff; color: #000; }
.ok-tumma .np-browse-btn,
.ok-tumma .np-paikka-browse-btn { background: var(--ok-lasi); border-color: var(--ok-viiva); }
.ok-tumma .np-browse-btn svg,
.ok-tumma .np-paikka-browse-btn svg { stroke: rgba(255, 255, 255, 0.7); }

/* Sama tumma valintapaneeli Etsi-sivulle ja Profiilin arkeille (muistio
   10.10.2026: "Kaikki kategoriat" aukesi valkoisena, vaikka muu sovellus
   on tumma). --ok-* on vain .ok-tumman sisällä, joten tässä suoraan
   sovelluksen tokenit; tausta sovelluksen oma tumma pinta. */
:is(#search-view, .sv-cards-sheet) .np-browse-panel { background: var(--st-bg, #05070d); color: #fff; }
:is(#search-view, .sv-cards-sheet) .np-browse-header {
    color: #fff;
    border-bottom-color: var(--st-line);
    font-family: var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
:is(#search-view, .sv-cards-sheet) .np-browse-close { color: #fff; }
:is(#search-view, .sv-cards-sheet) .np-browse-group-label {
    color: var(--st-text-dim);
    font: 500 0.82rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
:is(#search-view, .sv-cards-sheet) .np-browse-item,
:is(#search-view, .sv-cards-sheet) .np-browse-muu-btn { background: var(--st-glass); border-color: var(--st-line); color: #fff; }
:is(#search-view, .sv-cards-sheet) .np-browse-item:hover,
:is(#search-view, .sv-cards-sheet) .np-browse-muu-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--st-line-strong); }
:is(#search-view, .sv-cards-sheet) .np-browse-item.active { background: #fff; border-color: #fff; color: #000; }

/* Valinnat: tägit, välilehdet ja kytkinparit lasisina pillereinä,
   valittu valkoinen. */
.ok-tumma .np-type-tab,
.ok-tumma .np-ajankohta-tab,
.ok-tumma .eu-work-toggle,
.ok-tumma .eu-bald-toggle,
.ok-tumma .np-tarkenne-chip,
.ok-tumma .loc-tunniste-chip {
    border: 1px solid var(--ok-viiva-vahva);
    border-radius: 999px;
    background: var(--ok-lasi);
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-type-tab-active,
.ok-tumma .np-ajankohta-tab-active,
.ok-tumma .eu-work-toggle.active,
.ok-tumma .eu-bald-toggle.active,
.ok-tumma .np-tarkenne-chip-active,
.ok-tumma .loc-tunniste-chip.active {
    background: #fff;
    border-color: #fff;
    color: #000;
}
.ok-tumma .np-skill-chip,
.ok-tumma .np-role-pill {
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.ok-tumma .np-pill-label { color: #fff; }
.ok-tumma .np-skill-chip button,
.ok-tumma .np-pill-remove { color: var(--ok-himmea); }
.ok-tumma .np-add-row-btn,
.ok-tumma .np-add-role-btn,
.ok-tumma .loc-kategoria-muu-btn {
    border: 1px dashed var(--ok-viiva-vahva);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--st-font-body);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-add-row-btn:hover,
.ok-tumma .np-add-role-btn:hover { border-color: #fff; color: #fff; background: var(--ok-lasi); }
.ok-tumma .eu-add-language-btn { color: var(--ok-himmea);
    font-family: var(--st-font-body);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .eu-field-label {
    color: var(--ok-himmea);
    font: 500 0.82rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}

/* Kytkimet */
/* Pois-tila ontoksi ja himmeäksi, päällä täysi valkoinen: ennen molemmissa
   tiloissa oli valkoinen nuppi, eikä tilaa erottanut (QA 5.10.2026).
   Mustavalkoinen kuten muukin .ok-tumma — ei korostusväriä. */
.ok-tumma .np-toggle-slider { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38); }
.ok-tumma .np-toggle-slider::before { background: rgba(255, 255, 255, 0.4); box-shadow: none; }
.ok-tumma .np-toggle-wrap input:checked + .np-toggle-slider { background: #fff; }
.ok-tumma .np-toggle-wrap input:checked + .np-toggle-slider::before { background: #000; }
.ok-tumma .np-consent-label { color: rgba(255, 255, 255, 0.82); }
.ok-tumma .np-consent-title { color: #fff; }

/* Kuvat */
.ok-tumma .poster-upload {
    border: 1px dashed var(--ok-viiva-vahva);
    background: var(--ok-lasi);
    color: var(--ok-himmea);
}
.ok-tumma .poster-upload:hover { border-color: #fff; background: rgba(255, 255, 255, 0.07); }
.ok-tumma .poster-upload-icon { stroke: rgba(255, 255, 255, 0.6); }

/* Kortit lomakkeen sisällä */
.ok-tumma .cb-editor-block,
.ok-tumma .loc-contact-row,
.ok-tumma .np-manager-row,
.ok-tumma .np-invite-search-item { background: var(--ok-lasi); border-color: var(--ok-viiva); }
.ok-tumma .cb-editor-block-img-upload { background-color: rgba(255, 255, 255, 0.05); border-color: var(--ok-viiva-vahva); color: var(--ok-himmea); }
.ok-tumma .cb-editor-block-remove,
.ok-tumma .np-social-row-remove,
.ok-tumma .np-manager-row-remove,
.ok-tumma .eu-lang-remove { color: var(--ok-himmea); border-color: var(--ok-viiva); }
.ok-tumma .np-manager-row-name,
.ok-tumma .np-invite-search-item-name { color: #fff; }
.ok-tumma .np-manager-row-photo,
.ok-tumma .np-invite-search-item-photo { background: #1a1a1a; }
.ok-tumma .np-cast-crew-bar {
    border: 1px solid var(--ok-viiva-vahva);
    border-radius: 999px;
    background: var(--ok-lasi);
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .loc-duplicate-warning { background: rgba(255, 138, 122, 0.1); border-color: rgba(255, 138, 122, 0.35); color: #ffc2b8; }

/* Lokaation tyyppivalinta */
.ok-tumma .loc-visibility-option { background: var(--ok-lasi); border-color: var(--ok-viiva); border-radius: 18px; }
.ok-tumma .loc-visibility-option:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--ok-viiva-vahva); }
.ok-tumma .loc-visibility-option-title { color: #fff;
    font-family: var(--st-font-body);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .loc-visibility-option-desc { color: var(--ok-himmea); }

/* Omat tiedot: profiilikuva ja tunnukset */
.ok-tumma .eu-avatar-circle { border-color: var(--ok-viiva-vahva); background: var(--ok-lasi); }
.ok-tumma .eu-avatar-placeholder { color: var(--ok-himmea); }
.ok-tumma .eu-avatar-edit-badge { background: #fff; border-color: #000; }
.ok-tumma .eu-avatar-edit-badge svg { color: #000; }
.ok-tumma .eu-credential-edit-btn { background: var(--ok-lasi); border-color: var(--ok-viiva); color: rgba(255, 255, 255, 0.75); }
.ok-tumma .eu-credential-form { background: rgba(255, 255, 255, 0.03); border-color: var(--ok-viiva); }
.ok-tumma .eu-credential-form .np-field-input { background-color: var(--ok-lasi); }
.ok-tumma .eu-credential-cancel { border-color: var(--ok-viiva-vahva); color: #fff; }
.ok-tumma .eu-credential-confirm { background: #fff; color: #000; }
.ok-tumma .eu-credential-msg.success { color: #7fd6a0; }

/* Päänapit */
.ok-tumma .np-submit-btn {
    border-radius: 999px;
    background: #fff;
    color: #000;
    padding: 0.8rem;
    font: 600 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-delete-btn {
    border: 1px solid rgba(255, 138, 122, 0.4);
    border-radius: 999px;
    background: transparent;
    color: var(--ok-virhe);
    padding: 0.72rem;
    font: 500 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}

/* Valitun ammatin / kategorian rivi */
.ok-tumma .np-profession-chosen-name {
    color: #fff;
    font-family: var(--st-font-body);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
.ok-tumma .np-profession-change { color: var(--ok-himmea); }
.ok-tumma .np-profession-change:hover { color: #fff; }
#newProfileForm:has(.ok-tila) .np-profession-chosen,
#newLocationForm:has(.ok-tila) .np-profession-chosen {
    gap: 0.9rem;
    margin: 0 auto 0.9rem;
}
#newProfileForm:has(.ok-tila) .np-profession-chosen-name,
#newLocationForm:has(.ok-tila) .np-profession-chosen-name {
    font-size: 0.82rem;
    letter-spacing: normal;
    color: var(--ok-himmea);
}
#newProfileForm:has(.ok-tila) .np-profession-change,
#newLocationForm:has(.ok-tila) .np-profession-change { font-size: 0.82rem; }

/* ── Kysymysnäkymä ────────────────────────────────────────────────────── */
.ok-piilo,
.ok-otsikko-piilo,
.ok-ohje-siirretty { display: none !important; }

.ok-yla {
    max-width: var(--ok-leveys);
    margin: 0 auto;
}
.ok-yla-rivi {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.ok-edistyminen {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}
.ok-edistyminen span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ok-vaihe {
    color: var(--ok-himmea);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font: 400 0.82rem/1 var(--st-font-body);
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}

/* Luonnoksen automaattitallennus. Tyhjänä ei vie tilaa. */
.ok-tallennus {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    color: var(--ok-himmea);
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
    font: 400 0.8rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-tallennus:empty { display: none; }
.ok-tallennus-tallentaa { opacity: 0.55; }
.ok-tallennus-tallennettu::before { content: '✓ '; }
.ok-tallennus-esto {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.ok-tallennus-virhe {
    cursor: pointer;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Kysymykseen siirrytään ohjelmallisesti (tabindex -1): ei kehystä. */
.ok-kysymys-teksti:focus { outline: none; }

/* Esikatselu: kortti sellaisena kuin muut sen näkevät. */
.ok-esikatselu-napautettava { cursor: pointer; }
.ok-esikatselu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(28, 28, 28, 0.95), rgba(10, 10, 10, 0.95));
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ok-esikatselu-kuva {
    flex-shrink: 0;
    width: 2.5rem;
    height: 3.1rem;
    border-radius: 9px;
    background: #1a1a1a center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ok-esikatselu-teksti { flex: 1; min-width: 0; }
.ok-esikatselu-nimi {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 600 0.92rem/1.15 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-esikatselu-nimi.ok-esikatselu-tyhja { color: rgba(255, 255, 255, 0.55); }
.ok-esikatselu-ala {
    margin-top: 0.22rem;
    color: var(--ok-himmea);
    font: 400 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-esikatselu-ala:empty { display: none; }
.ok-esikatselu-kuvaus {
    margin-top: 0.25rem;
    font: 400 0.8rem/1.3 var(--ok-leipa);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ok-esikatselu-kuvaus:empty { display: none; }

/* Kysymys: keskellä, kapea ja isoin kirjaimin — kuin julisteessa. */
.ok-kysymys {
    max-width: var(--ok-leveys);
    margin: 1.9rem auto 1.1rem;
    text-align: center;
}
.ok-yksi .ok-kysymys { margin-top: 1.6rem; }
.ok-kysymys-merkki {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
    color: var(--ok-himmea);
    font: 400 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-kysymys-merkki::before,
.ok-kysymys-merkki::after {
    content: '';
    width: 1.4rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}
.ok-kysymys-teksti {
    margin: 0;
    line-height: 1.2;
    color: #fff;
    text-wrap: balance;
    font-family: var(--st-font-body);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-transform: none;
}

/* Kentät kysymyksen alla: sarakkeessa, yksiriviset keskitetyllä tekstillä. */
.ok-tila .np-section-label {
    max-width: var(--ok-leveys);
    margin: 1.05rem auto 0.5rem !important;
    text-align: center;
}
.ok-tila .ok-kysymys + .np-section-label { margin-top: 1.4rem !important; }
.ok-tila .np-field-input,
.ok-tila .np-field-textarea,
.ok-tila .np-field-select,
.ok-tila .np-profession-input,
.ok-tila .loc-input {
    max-width: var(--ok-leveys);
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
    /* 16px: iOS zoomaa pienempään kenttään kohdistettaessa. */
    font-family: var(--ok-leipa);
    font-size: 1rem;
    font-weight: 400;
}
.ok-tila .np-field-input,
.ok-tila .loc-input,
.ok-tila .np-profession-input { text-align: center; }
.ok-tila .np-field-select { text-align-last: center; }
.ok-luo textarea.np-field-textarea,
.ok-yksi textarea.np-field-textarea { min-height: 6rem; line-height: 1.45; }
.ok-monta .np-field-input,
.ok-monta .np-field-select { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.ok-monta .np-section-label { margin-top: 0.9rem !important; }
.ok-tila div[style*="max-width:19rem"],
.ok-tila div[style*="max-width: 19rem"],
.ok-tila div[style*="max-width:24rem"],
.ok-tila div[style*="max-width: 24rem"] { max-width: var(--ok-leveys) !important; }
.ok-tila .loc-picker,
.ok-tila .np-roles-pills,
.ok-tila .np-skills-input,
.ok-tila .poster-grid,
.ok-tila .np-social-rows,
.ok-tila .cb-editor-list,
.ok-tila .cb-editor-add-row,
.ok-tila .np-consent-row,
.ok-tila .eu-work-toggles,
.ok-tila .eu-hair-row,
.ok-tila .np-ajankohta-tabs,
.ok-tila .np-type-tabs,
.ok-tila .np-cast-crew-bar,
.ok-tila .np-add-row-btn,
.ok-tila .np-add-role-btn,
.ok-tila .np-submit-btn,
.ok-tila .np-delete-btn { max-width: var(--ok-leveys); }
.ok-tila .np-tarkenne-section { max-width: none; margin: 0; }
.ok-tila .np-tarkenne-chips {
    justify-content: center !important;
    gap: 0.5rem;
    max-width: var(--ok-leveys);
    margin-left: auto;
    margin-right: auto;
}
.ok-tila .np-skills-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.ok-tila .np-tarkenne-chip,
.ok-tila .loc-tunniste-chip { padding: 0.45rem 0.85rem; font-size: 0.82rem; letter-spacing: normal; }
.ok-tila .np-skill-chip,
.ok-tila .np-role-pill { padding: 0.42rem 0.85rem; font: 500 0.82rem/1.2 var(--ok-leipa); }
.ok-tila .eu-work-toggles,
.ok-tila .np-ajankohta-tabs,
.ok-tila .np-type-tabs { gap: 0.5rem; }
.ok-tila .eu-work-toggle,
.ok-tila .eu-bald-toggle,
.ok-tila .np-ajankohta-tab,
.ok-tila .np-type-tab { min-height: 2.35rem; padding: 0.38rem 0.85rem; font-size: 0.82rem; letter-spacing: normal; }
.ok-tila .eu-field-label { text-align: center; max-width: var(--ok-leveys); margin-left: auto; margin-right: auto; }
.ok-tila .np-consent-row {
    gap: 0.9rem;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--ok-viiva);
    border-radius: 12px;
    background: var(--ok-lasi);
}
.ok-tila .np-consent-label { font: 400 0.82rem/1.4 var(--ok-leipa); }
.ok-tila .np-add-row-btn,
.ok-tila .np-add-role-btn { padding: 0.55rem; font-size: 0.82rem; letter-spacing: normal; }
.ok-tila .np-cast-crew-bar { padding: 0.7rem; font-size: 0.82rem; letter-spacing: normal; }
.ok-tila .poster-upload { border-radius: 14px; }
.ok-tila .poster-item img { border-radius: 14px; }
.ok-tila .np-submit-btn { margin-top: 1.5rem; }

/* Ohje: lasinen palkki kentän alla, keskitetty. */
.ok-ala {
    max-width: var(--ok-leveys);
    margin: 0.85rem auto 0;
}
.ok-ohje {
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    font: 400 0.8rem/1.5 var(--ok-leipa);
    color: rgba(255, 255, 255, 0.76);
    text-align: center;
}
/* Omien tietojen vienti Yksityisyys-paneelin pohjalla. */
.sv-vienti {
    margin: 1.1rem 1rem 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}
.sv-vienti-nappi {
    padding: 0.55rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 500 0.92rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.sv-vienti-nappi:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.sv-vienti-nappi:disabled { opacity: 0.6; cursor: default; }
/* Estetyt käyttäjät (Yksityisyys, 12.10.2026). */
.sv-estot { text-align: left; }
.sv-estot-otsikko { font: 600 0.95rem/1.3 var(--st-font-body); color: #fff; margin-bottom: 0.4rem; }
.sv-estot-lista { margin: 0.6rem 0 0.8rem; }
.sv-estot-rivi { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sv-estot-nimi:not(#_) { color: #fff; font: 400 0.92rem/1.3 var(--st-font-body); text-transform: none; letter-spacing: normal; min-width: 0; overflow-wrap: anywhere; }
.sv-estot .sv-yksityisyys-ohje { margin-left: 0; margin-right: 0; }
.sv-estot-poista { flex-shrink: 0; min-height: 32px; padding: 0.35rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: transparent; color: #fff; font: 500 0.82rem/1.2 var(--st-font-body); cursor: pointer; }
.sv-estot-poista:active { transform: scale(0.96); }
.sv-estot-tyhja { color: #8a8f9a; font-size: 0.85rem; margin: 0.3rem 0; }
.sv-estot-lisaa { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.sv-estot-lisaa .np-field-input { flex: 1; min-width: 0; max-width: none; margin: 0; }
.sv-estot-tila { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.82rem; color: #8a8f9a; }

/* "Mitä tämä avaa" — ohje kertoo mitä kenttään kirjoitetaan, tämä kertoo
   minkä vastaus tekee mahdolliseksi. Eri sävy kuin ohjeella, ettei se luetakin
   toisena ohjeena; korostusväri on sama sininen kuin muuallakin, ei omaa. */
.ok-avaa {
    margin: 0.5rem 0 0;
    padding: 0.45rem 0.85rem 0.45rem 2rem;
    position: relative;
    border-radius: 12px;
    background: rgba(91, 127, 224, 0.12);
    font: 400 0.8rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255, 255, 255, 0.84);
    text-align: left;
}
.ok-avaa::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 0.72rem;
    width: 0.62rem;
    height: 0.5rem;
    border: 1.5px solid #8ba4ea;
    border-radius: 2px;
}

/* Elävä vastaus kysymykseen: mitä alueella on, heti kun sijainti kerrottiin. */
.ok-elava {
    margin: 0.6rem 0 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(91, 127, 224, 0.35);
    border-radius: 14px;
    background: rgba(91, 127, 224, 0.1);
    text-align: center;
}
.ok-elava:empty { display: none; }
.ok-elava-otsikko {
    font: 600 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: #8ba4ea;
}
.ok-elava-teksti {
    margin-top: 0.3rem;
    font: 400 0.82rem/1.4 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: #fff;
}
.ok-elava-nappi {
    margin-top: 0.55rem;
    padding: 0.35rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 500 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.ok-elava-nappi:hover { background: rgba(255, 255, 255, 0.1); }

/* Elävä vastaus voi olla myös lista (tarpeen ehdokkaat) — silloin ilman
   omaa laatikkoa, koska listan rivit ovat jo kortteja. */
.ok-elava-lista {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}

.ok-virhe {
    margin: 0.65rem 0 0;
    color: var(--ok-virhe);
    text-align: center;
    font: 500 0.82rem/1.4 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-virhe:empty { display: none; }

/* Napit */
.ok-napit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
}
.ok-napit button { cursor: pointer; }
.ok-napit .ok-seuraava,
.ok-napit .ok-toissijainen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 2.65rem;
    padding: 0 1rem;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: #000;
    transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font: 600 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-napit .ok-seuraava svg,
.ok-napit .ok-takaisin svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ok-napit .ok-seuraava svg { transition: transform 0.15s ease; }
.ok-napit .ok-seuraava:hover svg { transform: translateX(3px); }
.ok-napit .ok-seuraava:active,
.ok-napit .ok-toissijainen:active,
.ok-napit .ok-vaihtoehto:active { transform: scale(0.97); }
.ok-napit .ok-seuraava.ok-ohita,
.ok-napit .ok-toissijainen {
    background: transparent;
    color: #fff;
    border-color: var(--ok-viiva-vahva);
}
.ok-napit .ok-seuraava.ok-ohita svg { opacity: 0.5; }
.ok-napit .ok-takaisin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid var(--ok-viiva-vahva);
    border-radius: 50%;
    background: var(--ok-lasi);
    color: #fff;
}
.ok-napit-pysty { flex-direction: column; align-items: stretch; }

/* Kyllä / Ei: kaksi isoa laattaa rinnakkain. */
.ok-napit-kyllaei { gap: 0.65rem; margin-top: 0.6rem; }
.ok-napit .ok-vaihtoehto {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0 1rem;
    border: 1px solid var(--ok-viiva-vahva);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    font: 500 1rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-napit .ok-vaihtoehto:hover { border-color: #fff; }
.ok-napit .ok-vaihtoehto.ok-kylla:hover { background: #fff; color: #000; }
.ok-vaihtoehto-merkki { display: none; }
.ok-takaisin-linkki {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.2rem 0 0;
    padding: 0.4rem 0;
    background: none;
    border: none;
    color: var(--ok-himmea);
    cursor: pointer;
    font: 500 0.82rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-takaisin-linkki::before { content: '←'; margin-right: 0.5rem; letter-spacing: 0; }
/* Lisäkysymysten ketju: lopettaa eikä palaa edelliseen, joten ei nuolta. */
.ok-lopeta-linkki::before { content: none; }

/* Pakolliset valmiina */
.ok-valmis {
    max-width: var(--ok-leveys);
    margin: 3rem auto 0;
    text-align: center;
}
.ok-valmis-merkki {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 1.25rem;
    font-weight: 400;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 0 32px rgba(255, 255, 255, 0.22);
    animation: ok-pomppu 0.5s ease;
}
.ok-valmis .ok-kysymys-teksti { font-size: 1.25rem; }
.ok-valmis-teksti {
    margin: 0.85rem 0 0;
    font: 300 0.82rem/1.6 var(--ok-leipa);
    color: rgba(255, 255, 255, 0.68);
}
.ok-valmis .ok-napit { margin-top: 1.8rem; }
@keyframes ok-pomppu {
    0% { transform: scale(0.4); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ok-valmis-merkki { animation: none; }
    .ok-edistyminen span,
    .ok-napit .ok-seuraava,
    .ok-napit .ok-seuraava svg,
    .ok-napit .ok-vaihtoehto { transition: none; }
}

/* Muokkaus: yhteenvetolista kuin infokortti. */
.ok-lista {
    max-width: 22rem;
    margin: 0.6rem auto 0.4rem;
    border: 1px solid var(--ok-viiva);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: var(--st-varjo-kelluva);
}
.ok-rivi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.62rem 0.95rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.ok-rivi:last-child { border-bottom: none; }
.ok-rivi:hover,
.ok-rivi:active { background: rgba(255, 255, 255, 0.05); }
.ok-rivi-teksti { flex: 1; min-width: 0; }
.ok-rivi-nimi {
    display: block;
    color: var(--ok-himmea);
    font: 400 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-rivi-arvo {
    display: block;
    margin-top: 0.22rem;
    font: 400 0.82rem/1.3 var(--ok-leipa);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ok-rivi-tyhja .ok-rivi-arvo { font-weight: 400; color: var(--ok-haalea); }
.ok-rivi-puuttuu .ok-rivi-arvo { color: var(--ok-virhe); }
.ok-rivi-puuttuu .ok-rivi-nimi::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 0.45rem;
    border-radius: 50%;
    background: var(--ok-virhe);
    box-shadow: 0 0 8px var(--ok-virhe);
    vertical-align: 1px;
}
.ok-rivi svg { flex-shrink: 0; width: 13px; height: 13px; fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; stroke-linecap: round; }
.ok-muokkaa:not(.ok-yksi) [data-ok-loppu].np-section-label { margin-top: 1.9rem !important; text-align: center; }
.ok-tila div:has(> .eu-bald-toggle:only-of-type) { text-align: center; }
/* Valintaruutujen oma kysymys (lokaation tyyppi, oma nimike) samalla
   julistetyylillä kuin ohjatun lomakkeen kysymykset. */
.ok-tumma .np-picker-screen > .np-section-label:first-child {
    max-width: 21rem;
    margin: 1.4rem auto 1.3rem;
    text-align: center;
    color: #fff;
    text-wrap: balance;
    font: 600 1.25rem/1.25 var(--st-font-body);
    letter-spacing: -0.015em;
    text-transform: none;
}
.ok-tumma .loc-visibility-options { margin-bottom: 1.6rem; gap: 0.7rem; }

/* ── Liike: kysymys liukuu sisään, napit joustavat, valinnat ponnahtavat ── */
@keyframes ok-sisaan-eteen {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: none; }
}
@keyframes ok-sisaan-taakse {
    from { opacity: 0; transform: translateX(-22px); }
    to { opacity: 1; transform: none; }
}
@keyframes ok-ponnahdus {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.ok-eteen .ok-kysymys,
.ok-eteen .ok-nakyva,
.ok-eteen .ok-ala,
.ok-eteen .ok-valmis,
.ok-eteen .ok-lista { animation: ok-sisaan-eteen 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ok-taakse .ok-kysymys,
.ok-taakse .ok-nakyva,
.ok-taakse .ok-ala,
.ok-taakse .ok-lista { animation: ok-sisaan-taakse 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ok-eteen .ok-nakyva,
.ok-taakse .ok-nakyva { animation-delay: 0.05s; }
.ok-eteen .ok-ala,
.ok-taakse .ok-ala { animation-delay: 0.1s; }

/* Painallus: nappi painuu ja palaa joustaen. */
.ok-napit .ok-seuraava,
.ok-napit .ok-toissijainen,
.ok-napit .ok-takaisin,
.ok-napit .ok-vaihtoehto,
.ok-tila .np-tarkenne-chip,
.ok-tila .loc-tunniste-chip,
.ok-tila .eu-work-toggle,
.ok-tila .np-type-tab,
.ok-tila .np-ajankohta-tab,
.ok-rivi {
    transition: transform 0.38s cubic-bezier(0.3, 1.7, 0.5, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ok-napit .ok-seuraava:active,
.ok-napit .ok-toissijainen:active,
.ok-napit .ok-takaisin:active,
.ok-tila .np-tarkenne-chip:active,
.ok-tila .loc-tunniste-chip:active,
.ok-tila .eu-work-toggle:active,
.ok-tila .np-type-tab:active,
.ok-tila .np-ajankohta-tab:active {
    transform: scale(0.93);
    transition-duration: 0.08s;
}
.ok-napit .ok-vaihtoehto:active { transform: scale(0.95); transition-duration: 0.08s; }
.ok-rivi:active { transform: scale(0.985); transition-duration: 0.08s; }
.ok-tila .np-tarkenne-chip-active,
.ok-tila .loc-tunniste-chip.active,
.ok-tila .eu-work-toggle.active { animation: ok-ponnahdus 0.3s ease; }
.ok-eteen .ok-edistyminen span { box-shadow: 0 0 18px rgba(255, 255, 255, 0.5); }

@media (prefers-reduced-motion: reduce) {
    .ok-eteen .ok-kysymys, .ok-eteen .ok-nakyva, .ok-eteen .ok-ala, .ok-eteen .ok-valmis, .ok-eteen .ok-lista,
    .ok-taakse .ok-kysymys, .ok-taakse .ok-nakyva, .ok-taakse .ok-ala, .ok-taakse .ok-lista,
    .ok-tila .np-tarkenne-chip-active, .ok-tila .loc-tunniste-chip.active, .ok-tila .eu-work-toggle.active { animation: none; }
}

/* Projektin sijainnin ehdotukset: nimi vasemmalla, tyyppi (Lokaatio ·
   Rantasalmi, Kaupunki · Pohjois-Savo, Maakunta, Maa) oikealla. */
.pj-sijainti-ehdotukset { max-width: 21rem; margin: 0.4rem auto 0; }
.pj-sijainti-ehdotus {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    text-align: left;
    cursor: pointer;
}
.pj-sijainti-nimi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-sijainti-tyyppi {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #8a8f9a;
    white-space: nowrap;
}
.ok-tumma .pj-sijainti-tyyppi { color: rgba(255, 255, 255, 0.55); }

/* ── Valmis-ruutu (okValmisRuutu) ────────────────────────────────────────
   Korvaa tallennusten alert-ikkunat: musta koko ruudun hetki, jossa valmis
   kortti liukuu esiin, otsikko ja napit. Sama ilme kuin lomakesivuilla. */
.ok-valmisruutu {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    animation: ok-ruutu-esiin 0.25s ease both;
}
.ok-valmisruutu-poistuu { animation: ok-ruutu-pois 0.18s ease both; }
@keyframes ok-ruutu-esiin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ok-ruutu-pois { to { opacity: 0; } }
.ok-valmisruutu-sisus {
    width: 100%;
    max-width: 19rem;
    text-align: center;
}
.ok-valmisruutu-kortti {
    position: relative;
    width: 11rem;
    margin: 0 auto 1.6rem;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: ok-kortti-esiin 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) 0.08s both;
}
@keyframes ok-kortti-esiin {
    0% { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(0.9); }
    60% { opacity: 1; transform: translateY(-6px) rotate(1.5deg) scale(1.02); }
    100% { transform: none; }
}
.ok-valmisruutu-kuva {
    aspect-ratio: 4 / 5;
    background: #1a1a1a center / cover no-repeat;
}
.ok-valmisruutu-tiedot {
    padding: 0.65rem 0.8rem 0.75rem;
    text-align: left;
    background: linear-gradient(180deg, #151515, #0b0b0b);
}
.ok-valmisruutu-nimi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 600 0.92rem/1.15 var(--st-font-body);
    text-transform: none;
}
.ok-valmisruutu-ala {
    margin-top: 0.22rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 400 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-valmisruutu-leima {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 0.92rem;
    box-shadow: var(--st-varjo-nostettu);
    animation: ok-pomppu 0.45s ease 0.55s both;
}
.ok-valmisruutu-merkki {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 0 32px rgba(255, 255, 255, 0.2);
    animation: ok-pomppu 0.5s ease both;
}
.ok-valmisruutu-varoitus {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: none;
    font: 600 1rem/1 var(--st-font-body);
}
.ok-valmisruutu-otsikko {
    margin: 0;
    text-wrap: balance;
    font: 600 1.25rem/1.2 var(--st-font-body);
    letter-spacing: -0.015em;
    text-transform: none;
}
.ok-valmisruutu-teksti {
    margin: 0.75rem 0 0;
    font: 400 0.82rem/1.55 var(--st-font-body);
    color: rgba(255, 255, 255, 0.68);
}
.ok-valmisruutu-napit {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1.6rem;
}
.ok-valmisruutu-nappi {
    min-height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: transform 0.38s cubic-bezier(0.3, 1.7, 0.5, 1), background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font: 600 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-valmisruutu-nappi:active { transform: scale(0.95); transition-duration: 0.08s; }
.ok-valmisruutu-ensisijainen { background: #fff; color: #000; border-color: #fff; }

/* "Käyttöehdot on päivitetty" (ehdotPaivitysTarkista): sama ruutu kuin
   okValmisRuutu, mutta pidempi sisältö saa vierittyä pienellä näytöllä. */
.ehdot-paivitys { align-items: flex-start; overflow-y: auto; }
.ehdot-paivitys .ok-valmisruutu-sisus { margin: auto 0; padding: 1rem 0; }
.ehdot-paivitys-linkit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
}
.ehdot-paivitys-linkki {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(91, 127, 224, 0.6);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font: 600 0.8rem/1 var(--st-font-body);
}
.ehdot-paivitys-rasti {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.3rem;
    text-align: left;
    cursor: pointer;
    font: 400 0.85rem/1.45 var(--st-font-body);
    color: #fff;
}
.ehdot-paivitys-rasti input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.1rem 0 0;
    accent-color: #5b7fe0;
}
.ehdot-paivitys-virhe:empty { display: none; }
.ehdot-paivitys-virhe {
    margin: 0.75rem 0 0;
    font: 400 0.8rem/1.4 var(--st-font-body);
    color: #ff8a8a;
}
.ehdot-paivitys .ok-valmisruutu-nappi:disabled { opacity: 0.45; cursor: default; }
.ehdot-paivitys-poisto { margin-top: 1.1rem; }
.ehdot-paivitys-pieni-nappi {
    min-height: 2rem;
    padding: 0 0.6rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font: 400 0.78rem/1.4 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ehdot-paivitys-syy {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    resize: vertical;
    font: 400 0.85rem/1.45 var(--st-font-body);
    letter-spacing: normal;
}
.ehdot-paivitys-syy::placeholder { color: rgba(255, 255, 255, 0.55); }
.ehdot-paivitys-poistonapit {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
}
.ehdot-paivitys-kuittaus {
    margin: 0.3rem 0 0;
    font: 400 0.82rem/1.5 var(--st-font-body);
    color: #fff;
}
.ehdot-paivitys-pieni {
    margin: 0;
    font: 400 0.75rem/1.5 var(--st-font-body);
    color: rgba(255, 255, 255, 0.58);
}

/* Ilmoitusrivi ruudun yläreunassa (okIlmoitusPalkki). */
.ok-ilmoituspalkki {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    left: 50%;
    z-index: 12100;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    white-space: nowrap;
    box-shadow: var(--st-varjo-nostettu);
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
    font: 500 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-ilmoituspalkki-nakyy { opacity: 1; transform: translate(-50%, 0); }
.ok-ilmoituspalkki-toiminto {
    /* Below the Stormi Assistant bar, which holds the same top spot. */
    top: calc(env(safe-area-inset-top, 0px) + 4.1rem);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    pointer-events: auto;
    cursor: pointer;
    padding-right: 0.45rem;
}
.ok-ilmoituspalkki-toiminto:not(.ok-ilmoituspalkki-nakyy) { pointer-events: none; }
.ok-ilmoituspalkki-toiminto {
    white-space: normal;
    width: max-content;
    max-width: calc(100vw - 1.6rem);
    border-radius: 18px;
    text-align: left;
    line-height: 1.3;
}
.ok-ilmoituspalkki-teksti { min-width: 0; }
.ok-ilmoituspalkki-nappi {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    color: #14151a;
    font-size: 0.82rem;
}
@media (prefers-reduced-motion: reduce) {
    .ok-valmisruutu, .ok-valmisruutu-kortti, .ok-valmisruutu-leima, .ok-valmisruutu-merkki { animation: none; }
    .ok-ilmoituspalkki { transition: none;
    font: 500 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
}

/* Pääkortin valmiusaste Profiili-sivulla (svRenderValmiusaste). */
.sv-valmiusaste {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: calc(100% - 2.4rem);
    margin: -0.6rem 1.2rem 1.6rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.38s cubic-bezier(0.3, 1.7, 0.5, 1), background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.sv-valmiusaste:active { transform: scale(0.98); transition-duration: 0.08s; }
.sv-valmiusaste-rengas {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: conic-gradient(#fff calc(var(--pros) * 1%), rgba(255, 255, 255, 0.14) 0);
}
.sv-valmiusaste-rengas span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #0b0b0b;
    font: 600 0.8rem/1 var(--st-font-body);
}
.sv-valmiusaste-teksti { flex: 1; min-width: 0; }
.sv-valmiusaste-otsikko {
    display: block;
    font: 600 0.82rem/1.25 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.sv-valmiusaste-kohta {
    display: block;
    margin-top: 0.2rem;
    font: 400 0.82rem/1.3 var(--st-font-body);
    color: rgba(255, 255, 255, 0.62);
}
.sv-valmiusaste svg { flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; stroke-linecap: round; }

/* Käytetyt paikat rajaa vasten (okNaytaPaikat). */
.ok-paikat {
    margin: -0.7rem 1rem 1.1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    font: 400 0.8rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.ok-paikat.ok-paikat-taynna { color: rgba(255, 255, 255, 0.85); }
.sv-cards-paikat { margin: -1.1rem 1rem 1.2rem; }

/* Jäsenyyden kehotus (jkKehotus) ja linkki (jkLinkki), js/spa.js.
   Jäsenyyden oma kulta, sama pinta kuin Profiilin jäsenyyskortilla
   (.sv-tier-card[data-taso="jasen"]): kehotus tunnistetaan jäsenyydestä
   kertovaksi eikä se sekoitu sovelluksen omiin sinisiin ilmoituksiin
   (käyttäjä 10.10.2026). Corporate-kehotus omalla violetillaan kuten
   tasokortti. Sulkunapin painettava ala 32 px (savutesti T8). */
.jk-kehotus {
    --tier: var(--st-kulta-rgb);
    position: relative;
    margin: -0.4rem 1rem 1.2rem;
    /* Tiivis palkki (käyttäjä 10.10.2026): rasti nurkassa absoluuttisena,
       jolloin teksti saa koko leveyden ja Katso jäsenyys -linkki
       keskittyy palkin keskelle eikä rastin vasemmalle puolelle. */
    padding: 0.45rem 1.9rem 0.4rem;
    border: 1px solid rgba(var(--tier), 0.45);
    border-radius: 0.7rem;
    background: linear-gradient(165deg, rgba(var(--tier), 0.16) 0%, rgba(var(--tier), 0.05) 60%, rgba(255, 255, 255, 0.03) 100%);
    color: rgba(255, 255, 255, 0.85);
    font: 400 0.78rem/1.4 var(--st-font-body);
    letter-spacing: normal;
    text-align: center;
}
.jk-teksti { display: block; }
.jk-kehotus .jk-linkki { display: inline-block; margin-top: 0.1rem; }
.jk-kehotus[data-taso="corporate"] { --tier: 155, 124, 240; }
.jk-linkki {
    --tier: var(--st-kulta-rgb);
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--tier));
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}
.jk-kehotus > .jk-sulje {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
}
.jk-sulje {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.ok-valmisruutu .jk-kehotus { margin: 0.2rem 0 1rem; }
/* Työhuoneen osion alussa negatiivinen ylämarginaali nosti palkin otsikon
   päälle, ja rastin yläreuna osui otsikkoon, joka avaa ja sulkee osion. */
.pjs-osio > .jk-kehotus:first-child { margin-top: 0.4rem; }
.jk-linkki[data-taso="corporate"] { --tier: 155, 124, 240; }
/* Kosketusala vähintään 32 px (savutesti T8) ilman, että rivi kasvaa:
   tekstilinkki ja rasti venyttävät alaansa näkymättömällä reunuksella. */
.jk-linkki { position: relative; }
.jk-linkki::after { content: ''; position: absolute; inset: -10px -6px; }
.jk-sulje::after { content: ''; position: absolute; inset: -6px; }
.np-view-light .jk-kehotus { color: inherit; }
/* Vaalealla pinnalla kirkas kulta jäisi alle kontrastirajan: tummempi sävy. */
.np-view-light .jk-linkki { color: #8a6410; }
.np-view-light .jk-linkki[data-taso="corporate"] { color: #5b3fc4; }
.np-view-light .jk-sulje { color: inherit; opacity: 0.6; }

/* Esikatselu ennen julkaisua (okAvaaEsikatselu). */
.ok-esikatsele {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.65rem;
    margin: 0 0 0.9rem;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    font: 500 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-esikatsele:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.5); }
.ok-esikatsele:active { transform: scale(0.98); }
.ok-esikatsele svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ok-esikatselu-merkki {
    /* Paluunapin (.spm-close: top 1rem, korkeus 2.05rem) kanssa samalla
       korkeudella keskellä, eikä leveämpi kuin nappien väliin mahtuu. */
    position: absolute;
    top: 1.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    box-sizing: border-box;
    max-width: calc(100% - 8rem);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 500 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}

.pjs-valmiusaste { width: calc(100% - 2rem); margin: -0.4rem 1rem 1.2rem; }

/* Stormi Assistantin kirjoitusapu kentän alla (npEsittelyApu). */
.ok-apu {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    margin: 0.6rem auto 0;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    font: 500 0.82rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-apu svg { width: 14px; height: 14px; fill: currentColor; }
.ok-apu:hover { border-color: #fff; }
.ok-apu:disabled { opacity: 0.6; cursor: progress; }
.ok-apu.ok-apu-kaynnissa svg { animation: ok-apu-pyori 1s linear infinite; }
@keyframes ok-apu-pyori { to { transform: rotate(360deg); } }

/* Paikat täynnä: luontinappi kertoo sen (okNaytaPaikat). */
.pjs-create-bar.ok-luonti-taynna,
.sv-add-btn.ok-luonti-taynna { opacity: 0.72; }
.pjs-create-bar.ok-luonti-taynna .pjs-create-bar-plus { display: none; }

/* ── Luonnoksen poisto ohjatussa lomakkeessa (poistoLinkki) ── */
.ok-poista-luonnos {
    position: fixed;
    left: 50%;
    /* Alapalkin mitatusta tilasta (alapalkinTilaMittaa): kiinteä 5.5rem jäi
       Androidilla korkeamman palkin taakse. */
    bottom: calc(var(--st-alapalkki-tila) - 1.1rem);
    z-index: 20;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-sizing: border-box;
    width: auto;
    /* Selvästi painettava, mutta Seuraava-nappia kevyempi: ääriviiva eikä
       täyttöä, matalampi ja kapeampi. Korkeus riittää sormelle (44 px). */
    min-height: 2.75rem;
    margin: 0;
    padding: 0 1.3rem;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(255, 107, 107, 0.55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    color: #ff6b6b;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font: 500 0.82rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-poista-luonnos:hover,
.ok-poista-luonnos:focus-visible { background: rgba(255, 107, 107, 0.12); border-color: #ff6b6b; }
.ok-poista-luonnos:active { transform: translateX(-50%) scale(0.97); }
.ok-poista-luonnos svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Luodessa lomakkeen oma poistonappi korvautuu yllä olevalla linkillä. */
.ok-luo .np-delete-btn { display: none !important; }
/* Tilaa alalaitaan, jottei kiinteä poistolinkki peitä viimeisiä nappeja. */
.ok-luo:has(> .ok-poista-luonnos) { padding-bottom: 4rem; }
/* Pitkällä sivulla linkki sisällön perässä (sijoitaPoisto). */
.ok-poista-luonnos.ok-poista-virrassa {
    position: static;
    transform: none;
    width: fit-content;
    margin: 2.2rem auto 0;
}
.ok-poista-luonnos.ok-poista-virrassa:active { transform: scale(0.97); }
.ok-luo:has(> .ok-poista-virrassa) { padding-bottom: 6.5rem; }

/* ── Korttirivin kolmen pisteen valikko ── */
.ok-rivi-valikko {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Yli 32 px:n alarajan (savutesti T8): 1.9rem jäi 30 pikseliin, ja
       tasan 2rem putosi, koska reunapikseli kuuluu jo kortin runkoon. */
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    /* Vaalea harmaa, sovelluksen oma sävy. Kortit ovat läpinäkyviä tummalla
       pinnalla (ks. .sv-card-row), ja aiemmin väri oli kovakoodattu tummaksi
       — pisteet katosivat kokonaan taustaan.

       Ei color: inherit, vaikka se olisi houkutteleva: rivi perii mustan,
       eivät sen valkoiset otsikot, joten periytyvä väri olisi yhtä
       näkymätön. Vaalea teema syntyy koko sivun käännöllä
       (html.teema-kaannetty), joten tämä näkyy siellä tummana ilman omaa
       sääntöä. */
    color: #a8acb5;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.ok-rivi-valikko:hover,
.ok-rivi-valikko:focus-visible,
.ok-rivi-valikko.ok-rivi-valikko-auki {
    color: #fff;
    /* Neutraali harmaa näkyy kummankin teeman pinnalla, joten erillistä
       sääntöä ei tarvita. */
    background: rgba(128, 128, 128, 0.22);
}
.ok-rivi-valikko:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ok-rivi-valikko svg { width: 15px; height: 15px; fill: currentColor; }
.sv-card-row:has(.ok-rivi-valikko) .sv-card-row-body { padding-right: 2.2rem; }
.sv-card-row:has(.ok-rivi-valikko) .sv-card-row-social { padding-top: 2.2rem; }

/* Ponnahdusvalikko napin vierellä. Tausta on näkymätön, vain ohi-napautusta varten. */
/* Kortin näkymän (searchProfileModal 10960) ja kuvakatselimen (10980)
   yläpuolella, vahvistusten (11000) alla: alempana valikko jäi kortin taakse
   ja näytti läpikuultavalta, tekstit kortin nimen päällä (QA 5.10.2026). */
.ok-valikko {
    position: fixed;
    inset: 0;
    z-index: 10990;
    background: transparent;
}
.ok-valikko-paneeli {
    position: fixed;
    box-sizing: border-box;
    min-width: 11.5rem;
    max-width: calc(100vw - 20px);
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: #0b0b0d;
    box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ok-valikko-paneeli.ok-valikko-ylos { transform-origin: bottom right; transform: translateY(4px) scale(0.97); }
.ok-valikko-auki .ok-valikko-paneeli { opacity: 1; transform: none; }
.ok-valikko-rivi {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    font: 500 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-valikko-rivi svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}
.ok-valikko-rivi:hover,
.ok-valikko-rivi:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.ok-valikko-rivi:active { background: rgba(255, 255, 255, 0.14); }
.ok-valikko-nimi { flex: 1; }
.ok-valikko-merkki {
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    font: 400 0.8rem/1 var(--st-font-body);
    letter-spacing: normal;
}
.ok-valikko-erotin { height: 1px; margin: 0.25rem 0.4rem; background: rgba(255, 255, 255, 0.1); }
.ok-valikko-vaara { color: #ff5a5a; }
.ok-valikko-vaara:hover,
.ok-valikko-vaara:focus-visible { background: rgba(255, 90, 90, 0.12); }

/* Poiston vahvistus (okVahvista). */
.ok-vahvistus {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0);
    transition: background-color 0.14s ease;
}
.ok-vahvistus.ok-vahvistus-auki { background: rgba(0, 0, 0, 0.6); }
.ok-vahvistus-laatikko {
    box-sizing: border-box;
    width: 100%;
    max-width: 19rem;
    padding: 1.4rem 1.2rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #0b0b0d;
    box-shadow: var(--st-varjo-kelluva);
    text-align: center;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ok-vahvistus-auki .ok-vahvistus-laatikko { opacity: 1; transform: none; }
.ok-vahvistus-ikoni {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    margin: 0 auto 0.85rem;
    border: 1px solid rgba(255, 90, 90, 0.4);
    border-radius: 50%;
    color: #ff5a5a;
}
.ok-vahvistus-ikoni svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ok-vahvistus-teksti {
    margin: 0 0 1.15rem;
    color: rgba(255, 255, 255, 0.88);
    font: 400 0.82rem/1.45 var(--st-font-body);
}
.ok-vahvistus-napit { display: flex; gap: 0.5rem; }
.ok-vahvistus-peru,
.ok-vahvistus-ok {
    flex: 1;
    min-height: 2.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.12s ease;
    font: 600 0.92rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-vahvistus-peru { border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #fff; }
.ok-vahvistus-ok { border: 1px solid #ff5a5a; background: #ff5a5a; color: #0b0b0d; }
.ok-vahvistus-ok.ok-vahvistus-ok-neutraali { border-color: #fff; background: #fff; color: #0b0b0d; }
.ok-vahvistus-otsikko { margin: 0 0 0.5rem; font: 700 1rem/1.35 var(--st-font-body); letter-spacing: normal; color: #fff; text-align: center; }
.ok-vahvistus-peru:active,
.ok-vahvistus-ok:active { transform: scale(0.97); }
.ok-vahvistus-peru:focus-visible,
.ok-vahvistus-ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Projektin valmistuminen (pjValmistumisKysely) ──────────────────────
   Kolme vaihtoehtoa allekkain eikä kahta vierekkäin: tämä ei ole kyllä/ei
   vaan valinta kolmesta lopputulemasta, ja rinnakkain aseteltuina niiden
   tekstit eivät mahtuisi puhelimen riville luettavina. */
/* Valmistuminen ei ole tuhoava teko, joten se ei saa punaista kehystä —
   .ok-vahvistus-ikoni on oletuksena poiston väreissä. */
.ok-vahvistus-ikoni-myonteinen { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.ok-vahvistus-otsikko {
    margin: 0 0 0.45rem;
    color: #fff;
    font: 700 1rem/1.3 var(--st-font-body);
}
.ok-vahvistus-valinnat {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}
.ok-vahvistus-valinta {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.12s ease;
    font: 600 0.92rem/1.25 var(--st-font-body);
}
.ok-vahvistus-valinta-ensisijainen { border-color: #fff; background: #fff; color: #14161c; }
.ok-vahvistus-valinta-vaara { border-color: rgba(255, 90, 90, 0.55); color: #ff8080; }
.ok-vahvistus-valinta:active { transform: scale(0.97); }
.ok-vahvistus-valinta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Peruuta jää yksin riville, joten se ei enää tarvitse flex: 1:tä. */
.ok-vahvistus-valinnat ~ .ok-vahvistus-napit .ok-vahvistus-peru { flex: 1; }

/* ── Työhuoneen osiot ────────────────────────────────────────────────
   Sama kokoontaittuva ele kuin Profiilissa, mutta sisältö on lista eikä
   tilastokortti: tausta ja reunat pois, jotta projektikortit näyttävät
   samalta kuin ennenkin. Pehmusteet tulevat .sv-stat-card-openista, joten
   niitä ei nollata — muuten liuku hyppäisi. */
.pjs-osio {
    /* .sv-stat-card on kaksipalstainen ruudukko tilastokorttia varten.
       Täällä sisältö on pystylista, joten ruudukko puretaan — muuten
       projektikortit valuvat ulos oikeasta reunasta. */
    display: block;
    margin-left: 0;
    margin-right: 0;
    background: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    cursor: default;
    padding-left: 0;
    padding-right: 0;
}
.pjs-osio:hover { border-color: rgba(255, 255, 255, 0.08); }
/* Avattuna osion oma yläviiva piirtyi otsikkorivin viivan alapuolelle, ja
   näkyviin jäi kaksi ohutta viivaa päällekkäin (käyttäjä 30.9.2026).
   Profiilissa sama yläreuna on osa kortin kehystä ja kuuluu sinne; täällä
   sivureunat on poistettu, joten siitä jäi jäljelle pelkkä irrallinen viiva.
   Otsikon viiva riittää — se on jo se kohta, jossa osio alkaa. */
.sv-cards-heading-collapsible + .sv-stat-card.pjs-osio.sv-stat-card-open {
    border-top-width: 0;
    /* Myös alaviiva pois: jokaisella otsikkorivillä on jo omansa, joten
       avatun osion oma alaviiva oli kolmas viiva samalla ruudulla. Nyt
       viivoja on täsmälleen yksi otsikkoa kohti, ja osion avaaminen vain
       työntää seuraavan viivan alemmas (käyttäjä 30.9.2026). */
    border-bottom-width: 0;
}
.pjs-osio-otsikko { padding-left: 1rem; padding-right: 1rem; }
/* Osion sisällä olevat listat pitävät oman sivupehmusteensa, joka oli ennen
   sivun tasolla. */
.pjs-osio > .pjs-haku-lista,
.pjs-osio > .pjs-nosto-teksti,
.pjs-osio > .pjs-nosto-nappi,
.pjs-osio > .tk-ruudukko,
.pjs-osio > .tk-tyhja { margin-left: 1rem; margin-right: 1rem; }
/* Napin alla oleva ohje ei ulotu napin reunoihin asti (käyttäjä 11.10.2026). */
.pjs-osio > .tk-tyhja { padding: 0 1.2rem; }

.pjs-haku-lista { display: flex; flex-direction: column; gap: 0.4rem; }
/* Rivi ja sen toiminnot samalla radalla (hakuLiuku): liu'utus vasemmalle
   tuo Piilota- ja Poista-napit esiin rivin oikealta puolelta. Vierekkäin
   eikä päällekkäin, koska rivin tausta on läpikuultava — alla olevat napit
   kuultaisivat läpi. pan-y jättää pystysuunnan sivun vieritykselle. */
.pjs-haku-kehys { position: relative; overflow: hidden; border-radius: 14px; }
.pjs-haku-rata {
    display: flex;
    transition: transform 0.22s ease;
    touch-action: pan-y;
}
.pjs-haku-rata > .pjs-haku-rivi { flex: 0 0 100%; box-sizing: border-box; touch-action: pan-y; }
.pjs-haku-toiminnot { display: flex; gap: 0.4rem; flex: 0 0 auto; padding-left: 0.4rem; }
.pjs-haku-toiminto {
    min-width: 4.8rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(91, 127, 224, 0.22);
    color: #fff;
    font: 600 0.85rem/1 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.pjs-haku-toiminto-poista { border-color: #ff5a5a; background: #ff5a5a; color: #0b0b0d; }

/* Avatun haun alareunan napit (hakuToiminnotPiirra). Vaalea lomakepohja:
   tumma teema syntyy koko sivun käännöllä, joten värit ovat vaalealle. */
.haku-toiminnot { margin-top: 2rem; }
.haku-toiminnot:empty { display: none; }
.haku-toiminnot-tila {
    margin: 0 0 0.8rem;
    text-align: center;
    font: 400 0.85rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    color: #6b7280;
}
.haku-toiminnot-napit { display: flex; gap: 0.6rem; }
.haku-toiminto {
    flex: 1;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    border: 1px solid #c9ccd2;
    border-radius: 999px;
    background: transparent;
    color: #111;
    font: 600 0.88rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.haku-toiminto-poista { border-color: rgba(217, 54, 54, 0.6); color: #d93636; }
.haku-toiminto:hover, .haku-toiminto:focus-visible { background: rgba(0, 0, 0, 0.04); }
.pjs-haku-rivi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.pjs-haku-rivi:hover { border-color: rgba(91, 127, 224, 0.7); }
.pjs-haku-teksti { flex: 1; min-width: 0; }
.pjs-haku-nimi {
    display: block;
    font: 600 0.92rem/1.25 var(--st-font-body);
    overflow-wrap: anywhere;
}
.pjs-haku-alla {
    display: block;
    margin-top: 0.12rem;
    font: 300 0.8rem/1.35 var(--st-font-body);
    color: #a8acb5;
}
/* Luku on hakemusten määrä. Korostus vain kun joukossa on lukemattomia —
   muuten se on pelkkä tieto eikä kehotus. */
.pjs-haku-maara {
    flex-shrink: 0;
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #a8acb5;
    text-align: center;
    font: 700 0.8rem/1.5 var(--st-font-body);
}
.pjs-haku-maara-uusi { background: var(--st-accent-strong, #4a67c2); color: #fff; }
.pjs-haku-nuoli { flex-shrink: 0; color: var(--st-grey-2); font-size: 1.25rem; line-height: 1; }

.pjs-nosto-teksti {
    margin: 0 0 0.9rem;
    padding: 0 0.2rem;
    font: 300 0.82rem/1.5 var(--st-font-body);
    color: #a8acb5;
}
.pjs-nosto-nappi {
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(91, 127, 224, 0.55);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: 600 0.82rem/1 var(--st-font-body);
}
.pjs-nosto-nappi:hover { border-color: rgba(91, 127, 224, 0.9); }

/* ── Valmiit projektit Työhuoneen alalaidassa ───────────────────────── */
.pjs-valmiit-otsikko {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1.1rem;
    padding: 0.7rem 0.2rem;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #8a8f9a;
    cursor: pointer;
    font: 600 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.pjs-valmiit-nuoli { font-size: 0.92rem; }
/* Vuosiluku on tieto, ei varoitus: oma hillitty merkkinsä eikä
   .op-days-badge, joka on meripihkan värinen huomiomerkki. */
.pjs-valmis-vuosi {
    flex-shrink: 0;
    padding: 0.08rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #a8acb5;
    font: 600 0.75rem/1.5 var(--st-font-body);
}
/* Valmis projekti on historiaa, ei työn alla: hillitympi kuin aktiiviset. */
.pjs-valmis-rivi { opacity: 0.72; }
.pjs-valmis-rivi:hover { opacity: 1; }

/* ── Henkilöt: ryhmän/yrityksen kortilla (spmNaytaHenkilot) ── */
.spm-henkilot-lista { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 -0.5rem; }
.spm-henkilo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #f2f2f5;
    text-align: left;
    cursor: pointer;
}
.spm-henkilo:hover,
.spm-henkilo:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.spm-henkilo-kuva,
.np-henkilo-kuva {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: 600 1rem/1 var(--st-font-body);
}
.spm-henkilo-kuva img,
.np-henkilo-kuva img { width: 100%; height: 100%; object-fit: cover; }
.spm-henkilo-tiedot,
.np-henkilo-tiedot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.spm-henkilo-nimi,
.np-henkilo-nimi {
    font: 700 0.82rem/1.2 var(--st-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spm-henkilo-rooli,
.np-henkilo-ammatti {
    font: 400 0.8rem/1.2 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spm-henkilo svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Lomakkeen Henkilöt-editori. */
.np-henkilot-lista { display: flex; flex-direction: column; gap: 0.6rem; max-width: 21rem; margin: 0.6rem auto 0.8rem; }
.np-henkilo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.55rem;
    padding: 0.6rem;
    border: 1px solid rgba(20, 22, 28, 0.12);
    border-radius: 14px;
}
.ok-tumma .np-henkilo { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
.np-henkilo-kuva { background: #e8eaee; color: #14161c; }
.ok-tumma .np-henkilo-kuva { background: rgba(255, 255, 255, 0.1); color: #fff; }
.np-henkilo-nimi { color: inherit; }
.np-henkilo-rooli { grid-column: 1 / -1; max-width: none; margin: 0 !important; }
.np-henkilo-poista {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}
.np-henkilo-poista:hover { opacity: 1; background: rgba(255, 90, 90, 0.12); color: #ff5a5a; }

/* ── Lisäkysymykset ── */
.sv-info-card-later {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.55rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font: 600 0.8rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.sv-info-card-later:hover { color: #fff; }

/* Kortin muokkaussivun yläreunan palkki (npLisakysymyksetPalkki). */
.ok-lk-palkki {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ok-leveys, 21rem);
    margin: 0 auto 1.2rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ok-viiva, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    background: var(--ok-lasi, rgba(255, 255, 255, 0.045));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ok-lk-palkki:hover { border-color: var(--ok-viiva-vahva, rgba(255, 255, 255, 0.24)); }
.ok-lk-palkki-rengas {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background:
        radial-gradient(circle, #000 55%, transparent 56%),
        conic-gradient(#fff calc(var(--pros) * 1%), rgba(255, 255, 255, 0.16) 0);
}
.ok-lk-palkki-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ok-lk-palkki-otsikko {
    font: 600 0.92rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.ok-lk-palkki-ala {
    font: 400 0.8rem/1.3 var(--ok-leipa, Arial, sans-serif);
    color: var(--ok-himmea, rgba(255, 255, 255, 0.55));
}
.ok-lk-palkki svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ok-lk-tyhja {
    margin: 3rem auto;
    max-width: 18rem;
    text-align: center;
    color: var(--ok-himmea, rgba(255, 255, 255, 0.55));
    font: 400 0.82rem/1.5 var(--st-font-body);
}
#lkLomake .np-submit-btn { display: block; max-width: var(--ok-leveys, 21rem); margin: 1rem auto 0; }

/* Lisäkysymysten yhteenvetolistassa Valmis-nappi riittää ilman omaa otsikkoaan. */
#lkLomake.ok-muokkaa > .np-section-label[data-ok-loppu] { display: none; }

/* ── Projektin kategoria ohjatun lomakkeen ensimmäisenä kysymyksenä ── */
.ok-kategoriasivu { max-width: var(--ok-leveys, 21rem); margin: 0 auto; }
.ok-kategoria-haku { width: 100%; box-sizing: border-box; margin: 0 0 0.9rem !important; max-width: none !important; }
.ok-kategoriat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.ok-kategoria {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 5.2rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--ok-viiva-vahva, rgba(255, 255, 255, 0.24));
    border-radius: 16px;
    background: var(--ok-lasi, rgba(255, 255, 255, 0.045));
    color: #fff;
    font: 500 0.92rem/1.2 var(--st-font-body);
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ok-kategoria svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}
.ok-kategoria:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); }
.ok-kategoria:active { transform: scale(0.97); }
.ok-kategoria:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ok-kategoria-nimi { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; } /* tavutus pjKategoriaNakyvaNimi() */
.ok-kategoria-merkki {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    font: 400 0.8rem/1 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
}
.ok-kategoria-valittu,
.ok-kategoria-valittu:hover { background: #fff; border-color: #fff; color: #000; }
.ok-kategoria-valittu .ok-kategoria-merkki { color: rgba(0, 0, 0, 0.5); }
.ok-kategoria-muu { border-style: dashed; }
.ok-kategoria-oma .np-picker-row { max-width: none; }

/* ── Isot pohjat (pjRenderIsotPohjat) ─────────────────────────────────────
   Koko riviin levittyvä nappi, ikoni vasemmalla ja nimi + kuvaus oikealla.
   Erottuu ruudukon laatoista koolla ja korostusreunalla, ei omalla värillä:
   sävy on sama korostussininen kuin muualla sovelluksessa. */
.pj-isot-pohjat {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}
.pj-iso-pohja {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 0.95rem;
    border: 1px solid rgba(91, 127, 224, 0.55);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(91, 127, 224, 0.16), rgba(255, 255, 255, 0.03));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.pj-iso-pohja svg {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 0.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}
/* min-width: 0, koska flex-kohteen oletusleveys on sisältö: ilman tätä pitkä
   kuvaus levittäisi napin yli rivin eikä rivittyisi. */
.pj-iso-pohja-teksti { display: block; min-width: 0; }
.pj-iso-pohja-nimi {
    display: block;
    font: 700 1rem/1.25 var(--st-font-body);
    overflow-wrap: anywhere;
}
/* Tilavaraus Corporate-merkille vain kun merkki on: ilman ehtoa nimi
   rivittyisi turhaan myös niiltä, joille pohja on auki. */
.pj-iso-pohja-lukittu .pj-iso-pohja-nimi { padding-right: 4.6rem; }
.pj-iso-pohja-kuvaus {
    display: block;
    margin-top: 0.3rem;
    font: 300 0.82rem/1.45 var(--st-font-body);
    color: rgba(255, 255, 255, 0.62);
}
.pj-iso-pohja:hover {
    border-color: rgba(91, 127, 224, 0.9);
    background: linear-gradient(160deg, rgba(91, 127, 224, 0.24), rgba(255, 255, 255, 0.05));
}
.pj-iso-pohja:active { transform: scale(0.985); }
.pj-iso-pohja:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Luo-sivulla on vain nämä napit, joten ne kuuluvat ruudun keskelle eivätkä
   otsikon alle nojaamaan. Keskitys tehdään lapsen margin-blockilla eikä
   justify-content: centerillä: jos napit joskus kasvavat ruutua korkeammiksi,
   center leikkaisi ylimmän napin pois vieritysalueen yläpuolelle. */
.luo-main {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1rem var(--st-alapalkki-tila);
}
/* Ylös eikä keskelle. `margin-block: auto` keskitti paletin pystysuunnassa,
   mikä näytti oikealta kolmella napilla mutta väärältä viidellä: rivistö
   ajautui irti otsikosta ja leijui keskellä sivua. Nyt se alkaa otsikon
   alta, hengitysvara väliin. */
.luo-main > .pj-isot-pohjat {
    margin-block: 0;
    /* Ylätila otsikon alle. Pelkkä keskitys (margin-block: auto) ajoi
       rivistön irti otsikosta, ja pelkkä kiinni otsikossa taas tiivisti sen
       sivun yläreunaan — tämä on se väli, jossa paletti istuu otsikon alla
       mutta ei siinä kiinni. 3.2rem näytti viidellä napilla isolta tyhjältä
       aukolta (QA 5.10.2026). */
    padding-top: 1.6rem;
    width: 100%;
    /* Keskitetty palsta: leveällä ruudulla reunasta reunaan venyvä nappirivi
       hajoaa, ja silmä joutuu kulkemaan koko leveyden jokaisella rivillä. */
    max-width: 26rem;
    margin-inline: auto;
}
/* Luo-sivun napit ovat matalampia kuin projektisivun isot pohjat: siellä ne
   ovat kolme nostoa listan päällä, täällä ne ovat koko sivun sisältö ja niitä
   on viisi. Kun kaikki viisi mahtuvat kerralla silmään, valinta on yksi
   silmäys eikä vieritys. */
.luo-main > .pj-isot-pohjat { gap: 0.45rem; }
.luo-main .pj-iso-pohja { padding: 0.72rem 0.85rem; gap: 0.7rem; border-radius: 14px; }
.luo-main .pj-iso-pohja svg { width: 22px; height: 22px; }
.luo-main .pj-iso-pohja-nimi { font-size: 0.92rem; }
.luo-main .pj-iso-pohja-kuvaus { margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.4; }

/* Kolme tai vähemmän: napit saavat tilan, joka viidellä menee itse nappeihin
   (ks. luoNapit js/spa.js:ssä). Sama sivu, eri määrä — ei toista asettelua. */
.luo-main > .pj-isot-pohjat[data-vahan="1"] { gap: 0.7rem; padding-top: 1.4rem; }
.luo-main > .pj-isot-pohjat[data-vahan="1"] .pj-iso-pohja { padding: 1.15rem 1.1rem; gap: 0.95rem; border-radius: 18px; }
.luo-main > .pj-isot-pohjat[data-vahan="1"] .pj-iso-pohja svg { width: 26px; height: 26px; }
.luo-main > .pj-isot-pohjat[data-vahan="1"] .pj-iso-pohja-nimi { font-size: 1rem; }
.luo-main > .pj-isot-pohjat[data-vahan="1"] .pj-iso-pohja-kuvaus { font-size: 0.82rem; }

/* "Muut pohjat" -otsikko ruudukon yllä. np-section-label on keskitetty ja
   väljä; tässä se on pelkkä erotin kahden listan välissä. */
.pj-vapaat-otsikko { margin-top: 0; margin-bottom: 0.55rem; }
.pj-alavalinta .ok-takaisin-linkki { margin-top: 0.2rem; }

/* ── Tuotanto- ja levitysyhtiöt: iso kenttä ja valitut riveinä (pjWireCompanyAdd) ── */
.ok-yhtiot {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.45rem;
    max-width: var(--ok-leveys, 21rem);
    min-height: 0;
    margin: 0 auto;
}
.ok-yhtiot:not(:empty) { margin-bottom: 0.7rem; }
.ok-yhtiot .np-role-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.6rem 0.7rem 1rem;
    border-radius: 14px;
    font: 500 0.92rem/1.25 var(--st-font-body);
}
.ok-yhtiot .np-pill-remove { font-size: 1rem; padding: 0 0.35rem; }
.ok-yhtio-haku { display: flex; flex-direction: column; gap: 0.5rem; max-width: var(--ok-leveys, 21rem); margin: 0 auto; }
.ok-yhtio-haku .np-field-input { width: 100%; box-sizing: border-box; max-width: none; margin: 0; }
.ok-yhtio-haku .pj-sijainti-ehdotukset { margin: 0; max-width: none; }
.ok-yhtio-lisaa { align-self: center; }

/* Lomakkeiden teemakytkin (lisaaTeemakytkimet, js/spa.js). */
.np-teemakytkin {
    grid-column: 3;
    justify-self: end;
    position: relative;
    width: 2.6rem;
    height: 1.5rem;
    margin-right: -0.3rem;
    padding: 0;
    border: 1px solid #dfe2e7;
    border-radius: 999px;
    background: #eef0f3;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.np-teemakytkin-nuppi {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--st-varjo-matala);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.np-teemakytkin svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: #b5750f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.np-teemakytkin .np-teema-kuu { display: none; stroke: #e6e8f0; }
.np-teemakytkin.tumma { background: #1f222b; border-color: rgba(255,255,255,0.18); }
.np-teemakytkin.tumma .np-teemakytkin-nuppi { transform: translateX(1.1rem); background: #3a3f4d; }
.np-teemakytkin.tumma .np-teema-aurinko { display: none; }
.np-teemakytkin.tumma .np-teema-kuu { display: block; }

/* The other look: the whole page inverted on the root element; photos,
   video and background images inverted back so they look as they are. */
html.teema-kaannetty { filter: invert(1) hue-rotate(180deg); }
html.teema-kaannetty img,
html.teema-kaannetty video,
html.teema-kaannetty canvas,
html.teema-kaannetty [style*="background-image"],
html.teema-kaannetty .np-teemakytkin,
/* Assistant keeps its own dark look. Alapalkki pysyy samana molemmissa
   teemoissa (käyttäjä 12.10.2026): kääntyessään se muuttui tummassa teemassa
   valkoiseksi. Kuvakkeet ovat SVG:tä, joten kuvien takaisinkääntö ei osu niihin. */
html.teema-kaannetty .footer,
html.teema-kaannetty .stormi-assistant-bar { filter: invert(1) hue-rotate(180deg); }

/* Asetukset → Yksityisyys (avaaYksityisyys). */
.sv-yksityisyys-ohje { margin: 0.6rem 2.4rem 0.3rem; font: 0.82rem/1.5 var(--st-font-body); color: rgba(255,255,255,0.6); }
#svPrivacyList .sv-sposti-valinta { margin-bottom: 0.6rem; }

/* ── Sinulle ──────────────────────────────────────────────────────────────
   Same card surface as info and nosto. A partner offer carries the marking,
   the partner's name and a line saying why the reader sees it. */
.lohko-sinulle { width: 88%; margin-left: auto; margin-right: auto; }
.sinulle-kortti {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-radius-lg);
    background: rgba(255, 255, 255, 0.035);
    padding: 1.05rem 1.2rem 1.1rem;
    letter-spacing: normal;
}
.sinulle-tuotteet, .sinulle-ehdotukset {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    margin: 0.8rem -1.2rem 0;
    padding: 0 1.2rem 0.2rem;
    scrollbar-width: none;
}
.sinulle-tuotteet::-webkit-scrollbar, .sinulle-ehdotukset::-webkit-scrollbar { display: none; }
.sinulle-tuote, .sinulle-ehdotus {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-family: var(--st-font-body);
}
.sinulle-tuote-kuva, .sinulle-ehdotus-kuva {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 0.35rem;
}
.sinulle-tuote-kuva { background: #fff; }
.sinulle-tuote-kuva img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sinulle-ehdotus-kuva img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.sinulle-tuote-nimi, .sinulle-ehdotus-nimi { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.sinulle-tuote-kuvaus, .sinulle-ehdotus-ala { font-size: 0.8rem; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
.sinulle-tuote-linkki { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; margin-top: 0.1rem; }
.sinulle-syy { margin: 0.85rem 0 0; font: 0.8rem/1.45 var(--st-font-body); color: rgba(255, 255, 255, 0.55); }
.sinulle-asetukset { padding: 0; border: none; background: none; color: rgba(255, 255, 255, 0.75); font: inherit; text-decoration: underline; cursor: pointer; }

/* Hakutuloksen merkki: kortilla on kuunneltava ääninäyte. */
.result-card-aani { display: inline-flex; align-items: center; margin-left: 0.35rem; opacity: 0.8; }
.result-card-aani svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Ääninäytteet ────────────────────────────────────────────────────────
   Sama rivi julkisella kortilla (aaniKorttiOsio) ja kortin muokkauksessa
   (npAaniPiirra): toisto, nimi, edistymispalkki ja aika. */
.aani-lista { display: flex; flex-direction: column; gap: 0.55rem; }
.aani-rivi {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--st-font-body);
    letter-spacing: normal;
}
.aani-rivi.aani-soi { border-color: rgba(255, 255, 255, 0.35); }
.aani-soita {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #05070d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.aani-soita svg { width: 18px; height: 18px; fill: currentColor; }
.aani-tiedot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.aani-nimi { font-size: 0.82rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aani-palkki { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); cursor: pointer; position: relative; }
.aani-palkki::before { content: ''; position: absolute; inset: -8px 0; }   /* osuma-alue sormelle */
.aani-edistys { height: 100%; width: 0; border-radius: 2px; background: #fff; }
.aani-aika { flex-shrink: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }
.aani-ilmoita { flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: none; background: none; color: rgba(255, 255, 255, 0.55); cursor: pointer; }
.aani-ilmoita svg { width: 18px; height: 18px; fill: currentColor; }

.aani-muokkaus { width: 100%; max-width: var(--ok-leveys, 21rem); margin: 0 auto; }
.aani-muokattava { flex-wrap: wrap; }
.aani-nimi-kentta {
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font: 0.82rem var(--st-font-body);
}
.aani-huom { font-size: 0.8rem; line-height: 1.4; color: #e3c088; }
.aani-toiminnot { display: flex; gap: 0.3rem; margin-left: auto; }
.aani-toiminnot button {
    width: 30px; height: 30px; padding: 0; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18); background: none; color: #fff; font-size: 0.8rem; cursor: pointer;
}
.aani-toiminnot button:disabled { opacity: 0.3; cursor: default; }
.aani-lisaa { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.aani-lisaa-nappi:disabled { opacity: 0.45; }
.aani-ohje { margin: 0; font: 0.8rem/1.45 var(--st-font-body); color: rgba(255, 255, 255, 0.55); text-align: center; }


/* ── Aloituskysely ja aloituspolku (#aloitus-view, akProfiiliPalkki) ──────
   Tumma kuten muutkin ohjatut lomakkeet (ok-tumma). Otsikko on leipätekstin
   fonttia, ei sivun yläotsikon tyyliä (typografiasääntö). */
.ak-palkki { margin: 0 1.2rem 1.4rem; }
.ak-alku, .ak-polku { max-width: 26rem; margin: 1.2rem auto 0; text-align: center; color: #fff; }
.ak-merkki { font-size: 1.6rem; margin-bottom: 0.6rem; }
.ak-otsikko {
    font: 700 1.25rem/1.25 var(--st-font-body);
    letter-spacing: normal;
    margin: 0 0 0.7rem;
    color: #fff;
}
.ak-teksti {
    font: 400 0.92rem/1.5 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 1rem;
}
.ak-himmea { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }
.ak-krediitit {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 200, 80, 0.14);
    color: #ffd27a;
    font: 700 0.82rem/1.2 var(--st-font-body);
}
.ak-alku .ak-myohemmin, .ak-polku .ak-saldo { display: block; margin: 0.8rem auto 0; }
.ak-edistyminen {
    margin: 1.2rem 0 0.6rem;
    font: 600 0.82rem/1.2 var(--st-font-body);
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}
.ak-askeleet { list-style: none; margin: 0 0 1.4rem; padding: 0; text-align: left; }
.ak-askel {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}
.ak-avattava { cursor: pointer; }
.ak-avattava:active { transform: scale(0.985); }
.ak-seuraava { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); }
.ak-tehty { opacity: 0.55; }
.ak-askel-merkki {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    font: 700 0.8rem/1 var(--st-font-body);
    color: #fff;
}
.ak-tehty .ak-askel-merkki { background: #fff; color: #111; border-color: #fff; }
.ak-askel-teksti { flex: 1; min-width: 0; }
.ak-askel-otsikko {
    display: block;
    font: 700 0.92rem/1.3 var(--st-font-body);
    color: #fff;
}
.ak-askel-hyoty {
    display: block;
    margin-top: 0.2rem;
    font: 400 0.82rem/1.45 var(--st-font-body);
    color: rgba(255, 255, 255, 0.65);
}
.ak-askel-krediitit {
    margin-left: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: #ffd27a;
    white-space: nowrap;
}


/* ── Stormi-kortti kuvana (korttiKuvaksi, js/spa.js) ──────────────────────
   Esikatselu koko ruudulle ennen tallennusta: kuva mahtuu näytölle, napit alla. */
.sk-esikatselu {
    position: fixed;
    inset: 0;
    /* Kaikkien paneelien (enintään 10950) yläpuolella: esikatselu avataan
       myös "Muokkaa kortteja" -paneelin (10900) kolmen pisteen valikosta, ja
       10050:llä se syntyi paneelin taakse — käyttäjä ei nähnyt esikatselua
       eikä päässyt tallentamaan. Virheilmoitusten (10990), latausikkunan
       (11000) ja ilmoituspalkin (12100) alapuolella, jotta jakovirhe ja
       "Kortti tallennettu" näkyvät esikatselun päällä. */
    z-index: 10980;
    background: #0b0b0d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}
.sk-kuvakehys {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sk-kuva {
    /* Pitkä painallus → Tallenna kuva: varavaihtoehto, jos jakovalikkoa ei ole. */
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    user-select: auto;
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 290px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: var(--st-varjo-kelluva);
    -webkit-touch-callout: default;
}
/* Teemarivi esikatselun alla: neljä pohjaa, valinta vaihtaa kuvan paikalla.
   Kuvalle jää vähemmän korkeutta, kun rivi on näkyvissä (.sk-kuva alla). */
/* Kortin valinnat: tietotaso (1–5) ja pohja. Kaksi eri asiaa, siksi kaksi
   riviä — yhtenä kymmenen napin rivinä kumpikaan valinta ei näkyisi. */
.sk-valinnat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 22rem;
}
.sk-tasot {
    display: flex;
    justify-content: center;
    gap: 10px;
}
/* Numeroina napit ovat yhtä leveitä pyöreitä nappuloita: eri mittaiset
   sanat tekivät rivistä levottoman, numerot mahtuvat samaan ruutuun.
   Sanat kerrotaan rivin alla olevassa selitteessä. */
.sk-taso {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: 700 0.92rem var(--st-font-body);
    line-height: 1;
    cursor: pointer;
}
/* Selite kertoo mitä valittu numero tarkoittaa. Kiinteä korkeus, jottei
   rivi hyppää sanan vaihtuessa. */
.sk-tasoteksti {
    min-height: 1.1rem;
    font: 300 0.82rem var(--st-font-body);
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}
.sk-pohjat { display: flex; gap: 8px; }
.sk-pohja {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: 500 0.82rem var(--st-font-body);
    cursor: pointer;
}
.sk-taso.sk-valittu,
.sk-pohja.sk-valittu {
    background: #fff;
    border-color: #fff;
    color: #111;
}
/* Piirron ajan kuva himmenee: vaihto on nopea, mutta ilman merkkiä
   peräkkäiset napautukset tuntuvat siltä ettei mitään tapahdu. */
.sk-vaihtaa .sk-kuva { opacity: 0.45; transition: opacity 0.12s ease; }
.sk-vaihtaa .sk-taso,
.sk-vaihtaa .sk-pohja { pointer-events: none; }

.sk-napit { display: flex; gap: 10px; width: 100%; max-width: 22rem; }
.sk-napit button {
    flex: 1;
    min-height: 3rem;
    border-radius: 999px;
    font: 700 0.92rem var(--st-font-body);
    cursor: pointer;
}
.sk-tallenna { background: #fff; color: #111; border: 0; }
.sk-sulje, .sk-jaa { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }

/* Lokaation luonti: kamera suoraan auki ja "Olen nyt paikan päällä". */
.loc-kamera-nappi {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 22rem;
    margin: 0.9rem auto 0;
    min-height: 3rem;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 700 0.92rem var(--st-font-body);
    cursor: pointer;
}
.loc-kamera-nappi svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.loc-paikalla {
    max-width: 22rem;
    margin: 1.1rem auto 0;
    text-align: center;
}
.loc-paikalla-kysymys { margin: 0 0 0.5rem; font: 400 0.92rem var(--st-font-body); opacity: 0.75; }
.loc-paikalla-nappi {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: 600 0.92rem var(--st-font-body);
    cursor: pointer;
}
.loc-paikalla-nappi:disabled { opacity: 0.5; }
.loc-paikalla-nappi svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.loc-paikalla-pieni { margin-top: 0.7rem; }
.loc-paikalla-tulos { margin-top: 0.6rem; font: 400 0.82rem/1.45 var(--st-font-body); opacity: 0.85; }
.loc-paikalla-tulos:empty { display: none; }
.loc-paikalla-virhe { color: #d9534f; opacity: 1; }

/* Päärooli-merkintä Cast-listalla (mcRenderList): ratkaisee, ketkä näkyvät
   projektin jaettavalla korttikuvalla. */
.mc-paarooli {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: transparent;
    color: inherit;
    font: 600 0.8rem var(--st-font-body);
    cursor: pointer;
}
.mc-paarooli-on { background: #fff; color: #111; border-color: #fff; }
.mc-paarooli:disabled { opacity: 0.5; }

/* Tasavertainen toinen valinta (esim. "Jonkun toisen puolesta" kortin
   ensimmäisellä ruudulla): sama muoto kuin ensisijaisella, kevyempi pinta. */
.np-nappi-toissijainen,
.ok-tumma .np-nappi-toissijainen,
.np-view-light .np-nappi-toissijainen {
    background: transparent;
    color: var(--ok-teksti, #fff);
    border: 1px solid currentColor;
}

/* Muokkaustilan esikatselu: sama kortti kuin kyselyssä, mutta ilman
   edistymispalkkia — kertoo heti, minkä kohteen tietoja täydennetään. */
.ok-yla-muokkaa { padding-bottom: 0.4rem; }

/* ── Etusivun videolohko ──────────────────────────────────────────────────
   Vaihtoehto Pääpalkille sivun ylimmäisenä: video täyttää leveyden ja noin
   kaksi kolmasosaa ruudusta (--lohko-video-korkeus), ja sen alareuna liukuu
   etusivun taustaan, jolloin sisältö jatkuu saumatta. */
.lohko-video {
    position: relative;
    width: 100%;
    margin: 0 0 0.6rem;
    overflow: hidden;
}
/* Sivun ylimmäinen video alkaa ruudun yläreunasta. Etusivun sisällöllä on
   yläreunassa tyhjä tila (#profile-view .content, 4.6rem) kelluvaa Stormi
   Assistant -palkkia varten; ilman tätä video alkoi vasta sen alta ja väliin
   jäi musta kaistale. Palkki kelluu nyt videon päällä, samaan tapaan kuin
   profiilin kansikuvan päällä. */
#etusivuLohkot > .lohko-video:first-child { margin-top: -4.6rem; }
.lohko-video-media {
    position: relative;
    width: 100%;
    height: var(--lohko-video-korkeus, 66vh);
    background: #0b0b0d;
    /* Video häivytetään läpinäkyväksi alareunaa kohti, jolloin se sulautuu
       siihen taustaan, joka etusivulla sattuu olemaan — ei maalattuun väriin. */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.55) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0.55) 85%, transparent 100%);
}
.lohko-video-elementti,
.lohko-video-kuva {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Alareunan häive: sama tausta kuin etusivulla, jotta video "sulaa" sivuun. */
/* Tummennus tekstien alle: alareuna jää läpinäkyväksi, jottei häivytyksen
   päälle jää reunaa. */
.lohko-video-haive {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 55%,
        rgba(0, 0, 0, 0.35) 82%,
        rgba(0, 0, 0, 0) 100%);
}
.lohko-video-sisalto {
    position: absolute;
    left: 0;
    right: 0;
    /* Puhelimessa ylempänä (käyttäjä 10.10.2026): 12 % jätti tekstin
       häivytyksen alaosaan lähes seuraavan lohkon kohdalle. */
    bottom: 24%;
    padding: 0 1.2rem;
    text-align: center;
    color: #fff;
}
.lohko-video-merkki {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font: 600 0.8rem/1 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
}
/* Kirjainväli erikseen: etusivun lohkot perivät tiiviin välistyksen, joka
   puuroutti videon päällä olevan tekstin. */
.lohko-video-otsikko {
    margin: 0 0 0.35rem;
    font: 700 1.6rem/1.15 var(--st-font-body);
    letter-spacing: -0.01em;
    text-wrap: balance;
    /* Dashboardin otsikkokentän rivinvaihto näkyy (10.10.2026: "Luo
       projekteja ja" / "löydä tekijät"). */
    white-space: pre-line;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
/* Stormi-logo videon keskelle (video_logo, käyttäjä 10.10.2026: otsikko
   pois, "vain stormi logo keskelle ruutua"). Sama tekstilogo kuin
   tietokoneen yläpalkissa (.footer-logo), Arial Black pienillä kirjaimilla. */
.lohko-video-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font: 900 clamp(3.2rem, 17vw, 7rem)/1 var(--st-font-display);
    letter-spacing: -0.045em;
    text-transform: none;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
/* "Stormi – Lue lisää" videon keskellä (lohkoVideo, käyttäjä 11.10.2026).
   Logon kanssa logon alla, ilman logoa aivan keskellä. */
.lohko-video-artikkeli {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.6rem;
    padding: 0 1.1rem 0 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(10, 12, 18, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 600 0.95rem/1 var(--st-font-body);
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lohko-video-artikkeli svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lohko-video-artikkeli:hover { background: rgba(10, 12, 18, 0.55); border-color: rgba(255, 255, 255, 0.75); }
.lohko-video-artikkeli:active { transform: translate(-50%, -50%) scale(0.97); }
.lohko-video-artikkeli.lohko-video-artikkeli-logon-alla { top: calc(50% + clamp(3.2rem, 15vw, 6rem)); }
/* Puhelimessa tekstien alla, omalla rivillään napin jälkeen. */
.lohko-video-artikkeli.lohko-video-artikkeli-virrassa:not(#_) {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0.9rem auto 0;
    display: flex;
    width: max-content;
}
.lohko-video-artikkeli.lohko-video-artikkeli-virrassa:active { transform: scale(0.97); }
.lohko-video-teksti {
    margin: 0 auto 0.8rem;
    max-width: 22rem;
    font: 400 0.92rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.lohko-video-nappi {
    letter-spacing: normal;
    min-height: 2.7rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 700 0.92rem var(--st-font-body);
    cursor: pointer;
}
.lohko-video-napattava .lohko-video-media { cursor: pointer; }

/* Viikon tehtävä (etusivu, .lohko-viikkotehtava). Käyttää kysymyskortin
   runkoa, jotta etusivulla on yksi korttikieli eikä kahta — ero tehdään
   merkillä ja palkkiorivillä, ei uudella ulkoasulla. */
.vt-palkkio {
    margin: 0.6rem 0 0;
    font: 400 0.8rem var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
}
/* Tehty: ei painikkeita, joten kortti kutistuu itsestään. Hento vihreä
   reuna erottaa sen tekemättömästä ilman merkkiä tai emojia. */
.vt-kortti.vt-tehty {
    border: 1px solid rgba(120, 220, 150, 0.35);
}

/* ── Jäsenyystasot (svMembershipSheet) ─────────────────────────────────
   Kolme tasoa, kolme korttia. Pienellä kortilla vain pääasiat, loput
   napauttamalla auki. Ennen tässä oli kolme samannäköistä tekstipalstaa,
   joissa koko sisältö oli yhtenä kappaleena ja koodikenttä aina auki —
   sivu oli pitkä eikä tasoja erottanut toisistaan mikään.

   Väri tulee data-tasosta: teräs, kulta, violetti. Tumma teema säilyy, eli
   väri on hennossa taustaliu'ussa ja reunassa, ei täytenä pintana. */
.sv-tier-card {
    --tier: 150, 160, 178;
    background:
        linear-gradient(165deg, rgba(var(--tier), 0.14) 0%, rgba(var(--tier), 0.04) 45%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(var(--tier), 0.32);
    border-radius: 18px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.sv-tier-card[data-taso="jasen"]     { --tier: var(--st-kulta-rgb); }
.sv-tier-card[data-taso="corporate"] { --tier: 155, 124, 240; }

.sv-tier-head {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 1.3rem 1.2rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
/* Nimi vasemmalle, hinta oikeaan yläkulmaan. Hinta on kortin toinen
   katsottava asia heti tason nimen jälkeen, ja kulmassa se löytyy
   vertailtaessa ilman että korttia tarvitsee lukea. */
.sv-tier-ylarivi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}
.sv-tier-nimi {
    display: block;
    font: 700 0.8rem var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--tier));
    padding-top: 0.35rem;
}
.sv-tier-hintanurkka {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-top: -0.25rem;
}
/* Ohut ja iso: numero saa erottua ilman lihavointia, joka veisi huomion
   tason nimeltä ja korttimääriltä. */
.sv-tier-hinta-luku {
    font: 200 1.6rem/1 var(--st-font-body);
    color: #fff;
    white-space: nowrap;
}
.sv-tier-hinta-jakso {
    font: 300 0.8rem var(--st-font-body);
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
/* Pääasiat isolla: numero on se, mitä kortilta katsotaan. */
.sv-tier-paaasiat {
    display: block;
    margin-top: 0.7rem;
}
.sv-tier-luku {
    display: block;
    font: 300 1rem var(--st-font-body);
    color: #fff;
    line-height: 1.45;
}
/* Alarivillä on enää merkki ja nuoli (hinta siirtyi yläkulmaan), joten
   se saa olla tiiviimpi. */
.sv-tier-alarivi {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
    min-height: 1.2rem;
}
/* Nykyisen tason merkki on alarivillä nuolen vieressä, ei omana
   lohkonaan kuten ennen — kortin pitää pysyä matalana. Väri tason omasta
   sävystä eikä vihreästä: vihreä pilleri violetilla kortilla näytti toisen
   komponentin eksyneen paikalle. */
.sv-tier-card .sv-tier-current-pill {
    margin-top: 0;
    background: rgba(var(--tier), 0.16);
    border-color: rgba(var(--tier), 0.5);
    color: #e7e9ee; /* tason väri omalla sävytetyllä pohjallaan jäi 4,3:1:een */
}
/* Nuoli työntää itsensä oikeaan reunaan ja kääntyy auetessa. */
.sv-tier-nuoli {
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid rgba(var(--tier), 0.9);
    border-bottom: 1.5px solid rgba(var(--tier), 0.9);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}
.sv-tier-card.auki .sv-tier-nuoli { transform: rotate(-135deg) translate(-2px, -2px); }

.sv-tier-body { padding: 0 1.2rem 1.3rem; }
.sv-tier-lista {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0 0;
    border-top: 1px solid rgba(var(--tier), 0.2);
}
.sv-tier-lista li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.5rem;
    font: 300 0.82rem var(--st-font-body);
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
}
/* Merkit piirretään pseudoelementteinä, jottei jokaiseen riviin tarvita
   omaa ikonia — ja jotta "ei sisälly" erottuu ilman punaista, joka
   näyttäisi virheeltä. */
.sv-tier-lista li.on::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 0.85rem;
    width: 0.42rem;
    height: 0.22rem;
    border-left: 1.5px solid rgb(var(--tier));
    border-bottom: 1.5px solid rgb(var(--tier));
    transform: rotate(-45deg);
}
.sv-tier-lista li.ei {
    color: rgba(255,255,255,0.55);
}
.sv-tier-lista li.ei::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 1.02rem;
    width: 0.5rem;
    border-top: 1.5px solid rgba(255,255,255,0.28);
}
.sv-tier-huomio {
    margin: 0.9rem 0 0;
    font: 300 0.8rem var(--st-font-body);
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}
.sv-tier-body .sv-member-input { margin-top: 1rem; }

/* ── Kutsusivun tekstit (#invite-view) ────────────────────────────────
   Body on sovelluksessa Arial Black, ja kaikki mikä ei aseta omaa fonttia
   perii sen. Tällä sivulla leipäteksti ja lista olivat ilman omaa fonttia,
   joten kolme riviä ohjetta tuli näytönlevyisenä lihavointina. Arial Black
   kuuluu vain sivun yläotsikkoon (käyttäjän linjaus); leipäteksti on
   Helveticaa kevyenä, jolloin sama teksti vie vähemmän tilaa ja on
   luettavampi. */
.np-main-ohje {
    font: 300 0.82rem/1.65 var(--st-font-body);
    color: #6b7280;
    margin: 0 0 1.4rem;
}
/* Tyhjän listan huomio: sulkeissa, pienellä ja keskitettynä, jottei se
   näytä otsikolta eikä virheeltä vaan siltä mitä se on — tieto siitä
   ettei täällä ole vielä mitään. */
.np-tyhja-huomio {
    font: 300 0.8rem var(--st-font-body);
    color: #6b7280;
    text-align: center;
    margin: 1.1rem 0 0;
}
/* Kutsurivit: sama Helvetica kuin muukin leipäteksti. */
.np-kutsu-rivi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #e5e7ea;
    font: 300 0.82rem var(--st-font-body);
    color: #2e3238;
}
.np-kutsu-rivi span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-kutsu-tila { white-space: nowrap; color: #8a8f9a; }
.np-kutsu-tila.on { color: #3a9a5c; }

.sv-tier-vuosihinta {
    margin: 1rem 0 0;
    font: 300 0.8rem/1.5 var(--st-font-body);
    color: rgba(255,255,255,0.55);
}
/* Kokeilunappi tason omalla värillä: se on kortin varsinainen toiminto,
   koodikenttä on toissijainen (useimmilla ei ole koodia). */
.sv-tier-kokeilu {
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 24px;
    border: 1px solid rgba(var(--tier), 0.55);
    background: rgba(var(--tier), 0.16);
    color: color-mix(in srgb, rgb(var(--tier)) 65%, #fff); /* puhdas tason väri jäi 4,3:1:een */
    font: 700 0.82rem var(--st-font-body);
    cursor: pointer;
}
.sv-tier-kokeilu:disabled { opacity: 0.5; cursor: default; }
.sv-tier-koodi-otsikko {
    margin-top: 1.3rem;
    font: 600 0.75rem var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255,255,255,0.55);
}

/* Tilausnappi kokeilunapin alla: se on toinen tie samaan tasoon, ei
   vaihtoehto kokeilulle, joten se on hillitympi — ääriviiva ilman täyttöä. */
.sv-tier-tilaa {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.22);
    background: none;
    color: rgba(255,255,255,0.85);
    font: 600 0.82rem var(--st-font-body);
    cursor: pointer;
}
/* Tilauksen tila napin tilalla: kun lasku on matkalla, painikkeelle ei ole
   käyttöä ja tilalle kuuluu tieto siitä mitä tapahtuu seuraavaksi. */
.sv-tier-tilaus-tila {
    margin: 0.9rem 0 0;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    background: rgba(var(--tier), 0.1);
    border: 1px solid rgba(var(--tier), 0.3);
    font: 300 0.8rem/1.55 var(--st-font-body);
    color: rgba(255,255,255,0.8);
}

/* ── Tilauslomake (#tilaus-view) ──────────────────────────────────────── */
.tilaus-yhteenveto {
    text-align: center;
    padding: 0 0 1.2rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 1.2rem;
}
.tilaus-taso {
    font: 700 0.8rem var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: #6b7280;
}
/* Sama ohut ja iso kuin tasokortin kulmassa: hinta on se, mitä lomakkeella
   ollessa halutaan pitää näkyvissä. */
.tilaus-hinta {
    font: 200 2.2rem/1.2 var(--st-font-body);
    color: inherit;
    margin-top: 0.4rem;
}
.tilaus-jakso {
    font: 300 0.8rem var(--st-font-body);
    color: #6b7280;
    margin-top: 0.3rem;
}
.tilaus-heti {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.4rem;
    font: 300 0.82rem/1.5 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.tilaus-heti input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: #5b7fe0; }
.tilaus-valmis { text-align: center; padding: 1rem 0; }
.tilaus-valmis-otsikko {
    font: 700 1rem var(--st-font-body);
    margin: 0 0 0.6rem;
}
.tilaus-valmis-teksti {
    font: 300 0.82rem/1.6 var(--st-font-body);
    color: #6b7280;
    margin: 0 0 1.4rem;
}

/* Projektin tarina kortilla (tarinaLaatikko, js/spa.js). Vastaukset
   pilleriparina "nimi: arvo", jotta kolme riviä luetaan yhdellä
   silmäyksellä — pitkä lauselista olisi sama kuin ei mitään. */
.spm-tarina-lista { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.3rem; }
.spm-tarina-rivi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.spm-tarina-nimi {
    font: 600 0.75rem var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255,255,255,0.55);
    margin-right: 0.15rem;
}
.spm-tarina-arvo {
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    font: 300 0.8rem var(--st-font-body);
    color: rgba(255,255,255,0.85);
}
.spm-tarina-ohje {
    margin: 0.4rem 0 0.7rem;
    font: 300 0.8rem/1.55 var(--st-font-body);
    color: rgba(255,255,255,0.55);
}

/* ── Projektikortin lisätiedot ──────────────────────────────────────────
   Julkisella kortilla esittely ensin, muutama info sen jälkeen, ja loput
   yhden napin taakse. Kaikki 17 riviä kortilla teki siitä lomakkeen
   näköisen (käyttäjän linjaus 2026-09-27). Nappi kertoo montako riviä
   siellä on: "Lisätiedot (6)" on eri lupaus kuin "Lisätiedot", eikä avaa
   tyhjää. */
.spm-lisatiedot { margin-top: 1.4rem; }
.spm-lisatiedot-nappi {
    /* border-box: leveys 100 % + reunus ja täyte valuivat yli, ja
       pyöristetyt kulmat leikkautuivat (testaajat 11.10.2026). */
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: #a8acb5;
    cursor: pointer;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
}
.spm-lisatiedot-nappi:hover { border-color: rgba(255, 255, 255, 0.3); color: #d8dade; }
.spm-lisatiedot-auki { background: rgba(255, 255, 255, 0.06); color: #f2f2f5; }
.spm-lisatiedot-sisus { margin-top: 0.8rem; }
.np-view-light .spm-lisatiedot-nappi {
    border-color: #d7dae0;
    background: #f2f2f5;
    color: #4b5160;
}

/* ── Rekrytoinnin kysymysportaat (#rekrykysymykset) ──────────────────────
   Yksi kortti per kysymys. Painoarvon liukusäädin on sovelluksen ensimmäinen
   yksipäinen säädin; värit ovat samat tunnukset kuin muualla eikä
   ominaisuudelle ole omaa sävyä. */
.rkk-ohje,
.rkk-muistutus {
    color: rgba(255, 255, 255, 0.55);
    font: 300 0.82rem/1.5 var(--st-font-body);
    margin: 0 0 0.8rem;
}
/* Yhdenvertaisuusmuistutus on muistutus eikä varoitus: se erottuu viivalla,
   ei värillä — vastuu kysymyksistä on työnantajalla, eikä Stormi estä
   mitään. */
.rkk-muistutus {
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    padding-left: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}
.rkk-lukko {
    border: 1px solid rgba(91, 127, 224, 0.5);
    border-radius: 12px;
    background: rgba(91, 127, 224, 0.12);
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.78);
    font: 400 0.82rem/1.45 var(--st-font-body);
}
.rkk-kortti {
    position: relative;
    border: 1px solid var(--ok-viiva-vahva, rgba(255, 255, 255, 0.24));
    border-radius: 16px;
    background: var(--ok-lasi, rgba(255, 255, 255, 0.045));
    padding: 2rem 0.9rem 0.9rem;
    margin-bottom: 0.8rem;
}
.rkk-kortti-virhe { border-color: rgba(229, 72, 77, 0.65); }
.rkk-kortti-lukittu { opacity: 0.72; }
/* Numero kertoo, monesko kysymys tämä on hakijan pelissä. */
.rkk-numero {
    position: absolute;
    top: 0.7rem;
    left: 0.9rem;
    font: 700 0.82rem/1 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
}
.rkk-kortti .np-field-input { max-width: none; width: 100%; box-sizing: border-box; margin: 0 0 0.5rem; }
.rkk-ohje-kentta { font-size: 0.82rem; }
.rkk-vaihtoehdot { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 0.4rem; }
.rkk-vaihtoehto { display: flex; align-items: center; gap: 0.5rem; }
/* min-width: 0, koska flex-kohteen oletusleveys on sisältö: ilman tätä
   pitkä vaihtoehto työntäisi rastin ja poistonapin rivin ulkopuolelle. */
.rkk-vaihtoehto-nimi { flex: 1; min-width: 0; margin: 0 !important; }
.rkk-piste,
.rkk-monta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    font: 300 0.8rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.rkk-monta { margin: 0.6rem 0 0.9rem; }
.rkk-piste input,
.rkk-monta input { accent-color: #5b7fe0; }
.rkk-vaihtoehto-poista { flex-shrink: 0; }
.rkk-paino { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.rkk-paino-nimi {
    color: rgba(255, 255, 255, 0.6);
    font: 300 0.82rem/1.2 var(--st-font-body);
    flex-shrink: 0;
}
.rkk-liuku { flex: 1; min-width: 0; accent-color: #5b7fe0; }
.rkk-paino-luku {
    flex-shrink: 0;
    min-width: 1.4rem;
    text-align: right;
    color: #fff;
    font: 700 0.92rem/1.2 var(--st-font-body);
}
/* Poisto on tekstilinkki eikä nappi: se on harvinainen ja peruuttamaton,
   eikä sen pidä kilpailla huomiosta kysymyksen sisällön kanssa. */
.rkk-poista {
    background: none;
    border: none;
    padding: 0;
    color: rgba(229, 72, 77, 0.85);
    font: 300 0.8rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.rkk-poista:hover { color: #e5484d; }

/* ── Avoin työpaikka hakijalle (#rekry) ──────────────────────────────────
   Ilmoitus ennen hakemusta: kuva, yritys, tehtävä. Sama tyyli kuin muilla
   korttisivuilla, ei omaa ilmettä. */
.rky-kuva { border-radius: 16px; overflow: hidden; margin-bottom: 0.9rem; }
.rky-kuva:empty { display: none; }
.rky-kuva img { display: block; width: 100%; height: auto; }
.rky-yritys {
    color: #5b7fe0;
    font: 600 0.82rem/1.3 var(--st-font-body);
    margin-bottom: 0.25rem;
}
.rky-yritys:empty { display: none; }
.rky-tehtava {
    color: #fff;
    font: 700 1.25rem/1.25 var(--st-font-body);
    margin: 0 0 0.6rem;
}
.rky-kuvaus {
    color: #d8dade;
    font: 300 0.92rem/1.55 var(--st-font-body);
    margin: 0 0 0.7rem;
    white-space: pre-line;
}
.rky-meta {
    color: #a8acb5;
    font: 300 0.82rem/1.4 var(--st-font-body);
    margin: 0 0 1.4rem;
}
.rky-meta:empty { display: none; }

/* ── Rekrytoinnin hakemukset (#rekryhakemukset) ──────────────────────────
   Paras ylimpänä, palkki kertoo osuuden maksimipisteistä. */
.rh-kortti {
    border: 1px solid var(--ok-viiva-vahva, rgba(255, 255, 255, 0.24));
    border-radius: 16px;
    background: var(--ok-lasi, rgba(255, 255, 255, 0.045));
    padding: 0.9rem;
    margin-bottom: 0.7rem;
}
/* Lukematon erottuu korostusreunalla, ei omalla värillä. */
.rh-kortti-uusi { border-color: rgba(91, 127, 224, 0.7); }
.rh-ylin { display: flex; align-items: center; gap: 0.7rem; }
.rh-kuva {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.rh-kuva img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* min-width: 0, jotta pitkä nimi katkeaa eikä työnnä korttia leveämmäksi. */
.rh-tiedot { min-width: 0; }
.rh-nimi {
    color: #fff;
    font: 700 0.92rem/1.25 var(--st-font-body);
    overflow-wrap: anywhere;
}
.rh-ala {
    color: #a8acb5;
    font: 300 0.82rem/1.3 var(--st-font-body);
    margin-top: 0.1rem;
    overflow-wrap: anywhere;
}
.rh-palkki {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin: 0.8rem 0 0.35rem;
}
/* Pituus kertoo pisteet; väri vahvistaa vasta kärjessä. Sävyt ovat
   sovelluksen omat — harmaa, korostussininen ja vihreä vain ylimmässä
   kolmanneksessa. */
.rh-palkki-tayte { display: block; height: 100%; background: #6b7280; border-radius: 3px; }
.rh-palkki-keski { background: #5b7fe0; }
.rh-palkki-karki { background: linear-gradient(90deg, #5b7fe0, #3fa06a); }
.rh-pisteet {
    color: #a8acb5;
    font: 300 0.8rem/1.3 var(--st-font-body);
    margin-bottom: 0.7rem;
}
.rh-napit { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rh-nappi {
    border: 1px solid var(--ok-viiva, rgba(255, 255, 255, 0.18));
    border-radius: 999px;
    background: transparent;
    padding: 0.4rem 0.85rem;
    color: #d8dade;
    font: 400 0.82rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.rh-nappi:hover { border-color: rgba(255, 255, 255, 0.45); }
.rh-nappi-ensisijainen { background: #fff; border-color: #fff; color: #000; font-weight: 600; }
.rh-vastaukset { margin-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 0.7rem; }
.rh-vastaus { display: flex; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.45rem; }
.rh-vastaus-kysymys {
    color: #a8acb5;
    font: 300 0.8rem/1.35 var(--st-font-body);
    min-width: 0;
}
.rh-vastaus-arvo {
    flex-shrink: 0;
    color: #d8dade;
    font: 400 0.8rem/1.35 var(--st-font-body);
    text-align: right;
}
.rh-vastaus-piste { color: #fff; font-weight: 600; }

/* ── LUO-nappi navissa ───────────────────────────────────────────────────
   Muut navikohteet ovat paikkoja, tämä on teko. Se on pallo palkin sisällä
   ja sana on pallon sisällä — ei ikonia eikä erillistä nimikettä alla.

   Aiemmin pallo oli kohotettu palkin yli ja "Luo" luki sen alla, mutta
   sana jäi puristuksiin pallon ja palkin reunan väliin. Sana pallon sisällä
   ratkaisee ahtauden sen sijaan että kiertäisi sen, ja palkki saa pitää
   oman muotonsa ilman mitään sen yläpuolella leijuvaa. */
.footer-luo {
    /* Ei himmene muiden tavoin: toiminto on aina tarjolla, oli käyttäjä
       millä sivulla tahansa. */
    opacity: 1;
    justify-content: center;
    /* Sama korkeus kuin muilla kohteilla (24 px ikoni + nimike), jotta palkki
       pysyy entisen korkuisena. Nappi itse on tätä isompi ja saa tulla yli:
       overflow on tarkoituksellinen, ei vahinko. Negatiiviset marginaalit
       eivät riittäneet — flex-kohteen korkeus ei kutistunut niillä.

       box-sizing: border-box, koska navikohteella on oma pystypaddinginsa ja
       oletus on content-box: ilman tätä annettu 46 px paisui 56:een ja palkki
       sen mukana. min-height: 0 pitää flex-kohteen oletuksen (auto) pois
       tieltä. */
    box-sizing: border-box;
    height: 46px;
    min-height: 0;
}
/* Tietokoneen yläpalkin osat (css/tyopoyta.css ≥1024px): puhelimessa piilossa. */
.footer-logo,
.footer-luo-tp { display: none; }
.footer-luo:hover { transform: none; }
/* Kohotettu LUO-nappi painuu itse, ei koko kohta — muuten se hyppäisi
   paikaltaan, koska se on nostettu palkin yläpuolelle. */
.footer-luo:active { transform: none; }
.footer-luo-nappi { transition: transform 0.12s ease; }
.footer-luo:active .footer-luo-nappi { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
    .footer-luo-nappi { transition: none; }
    .footer-luo:active .footer-luo-nappi { transform: none; }
}
.footer-luo-nappi {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Ympyrä suomeksi ("Luo"), hieman soikea pidemmillä kielillä ("Create").
       min-width pitää muodon pyöreänä lyhyellä sanalla, padding antaa
       pidemmälle tilaa venyä ilman että teksti osuu reunaan. */
    min-width: 54px;
    height: 54px;
    padding: 0 0.85rem;
    /* Ei kutistu kohteen 46 pikseliin vaan tulee sen yli ylhäältä ja alhaalta
       — juuri se tekee siitä rivin päänapin. */
    flex-shrink: 0;
    border-radius: 999px;
    /* Läpikuultava kuten palkki itse — ei umpinaista väriläiskää rivin
       keskellä. Erottuu päänappina muodolla ja reunuksella: se on rivin
       ainoa sävytetty ja reunustettu elementti, ja sanalla on ympärillään
       oma tilansa. Sävy on sovelluksen korostussininen, ei uusi väri. */
    background: rgba(91, 127, 224, 0.2);
    border: 1px solid rgba(91, 127, 224, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(91, 127, 224, 0.22);
    color: #fff;
    font: 700 0.92rem/1 var(--st-font-body);
    white-space: nowrap;
    transition: transform 0.14s cubic-bezier(0.22, 0.84, 0.36, 1),
                background-color 0.15s ease, border-color 0.15s ease;
}
.footer-luo:hover .footer-luo-nappi {
    background: rgba(91, 127, 224, 0.3);
    border-color: #5b7fe0;
}
/* Navipilleri ei kulje tämän taakse (paivitaFooterPilleri), joten oma sivu
   näytetään tiiviimmällä täytöllä. */
.footer-luo.active .footer-luo-nappi {
    background: rgba(91, 127, 224, 0.34);
    border-color: #5b7fe0;
}
.footer-luo:active .footer-luo-nappi { transform: scale(0.93); }

/* ── Omat projektit Profiilissa ──────────────────────────────────────────
   Projektit olivat ennen oma navikohtansa. Palkki on leveä ja aikainen,
   koska se on sivun tärkein reitti eteenpäin — ei yksi rivi muiden joukossa. */
.sv-omat-projektit {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-sizing: border-box;
    /* Sama sisennys kuin .sv-stat-cardilla (19 px): palkki oli ainoa
       reunasta reunaan yltävä laatikko osioiden joukossa, ja se luki
       taustapalkkina eikä korttina. */
    margin: 0 1.2rem 1rem;
    width: calc(100% - 2.4rem);
    padding: 0.95rem 1rem;
    border: 1px solid rgba(91, 127, 224, 0.45);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(91, 127, 224, 0.14), rgba(255, 255, 255, 0.03));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sv-omat-projektit:hover { border-color: rgba(91, 127, 224, 0.85); }
.sv-omat-projektit-ikoni { flex-shrink: 0; display: flex; }
.sv-omat-projektit-ikoni svg { width: 24px; height: 24px; opacity: 0.9; }
/* min-width: 0, jotta pitkä alateksti rivittyy eikä työnnä nuolta ulos. */
.sv-omat-projektit-teksti { flex: 1; min-width: 0; }
.sv-omat-projektit-otsikko {
    display: block;
    font: 600 0.92rem/1.25 var(--st-font-body);
}
.sv-omat-projektit-ala {
    display: block;
    margin-top: 0.15rem;
    font: 300 0.8rem/1.35 var(--st-font-body);
    color: #a8acb5;
}
/* Luvut otsikon alle. Hillitty: ne kertovat tilanteen, eivät vaadi mitään —
   kehotus on merkkipallo sen vieressä. */
.sv-omat-projektit-alla {
    display: block;
    margin-top: 0.15rem;
    font: 300 0.8rem/1.35 var(--st-font-body);
    color: #a8acb5;
}
.sv-omat-projektit-merkki { position: static; flex-shrink: 0; }
/* Sama palkki avoimen haun sivulla: sisällöllä on jo oma sisennys. */
.ah-projekti-palkki { margin: 1.2rem 0 0; width: 100%; }
.sv-omat-projektit-nuoli {
    flex-shrink: 0;
    color: var(--st-grey-2);
    font-size: 1.25rem;
    line-height: 1;
}

/* ── Ammattikortin video ─────────────────────────────────────────────────
   Hero-videolla on sama paikka kuin kortin kuvalla: se on kortin ensimmäinen
   media, ei päälle liimattu soitin. Ohjaimet (12.10.2026, Teemu): kevyt
   rivi alareunassa — toisto/tauko, kelauspalkki 15 sekunnille ja ääni
   (spmVideoOhjaimet, js/spa.js). */
#spmHeroVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain eikä cover — tässä video eroaa kuvasta. Video on sommiteltu, ja
       tekijä on päättänyt rajauksen: vaakavideo asettuu pystykortin keskelle
       niin, että ylle ja alle jää tyhjää mutta koko kuva näkyy. Valokuvan
       rajaaminen on tavallista, videolla se leikkaisi työstä reunat pois. */
    object-fit: contain;
    background: #05070d;
}
/* Videon pikkukuva karusellissa: kortin ensimmäinen valokuva ja sen päällä
   toistomerkki. Palvelimella ei ole ffmpegiä, joten videosta itsestään ei voi
   tehdä esikatselukuvaa. */
.spm-thumb-video {
    position: relative;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
    overflow: hidden;
}
.spm-thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spm-thumb-video-merkki {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}
/* Kolmio puhtaana CSS:nä: yksi ikoni vähemmän ladattavaa, ja se skaalautuu
   pikkukuvan mukana. */
.spm-thumb-video-merkki::after {
    content: '';
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}

/* Lomakkeen esikatselu: 16:9, samalla reunalla kuin muutkin lomakkeen laatikot. */
.np-video-esikatselu {
    display: block;
    width: 100%;
    max-width: var(--ok-leveys, 21rem);
    margin: 0 auto 0.6rem;
    aspect-ratio: 16 / 9;
    /* Sama sääntö kuin kortilla: esikatselu näyttää sen mitä katsoja näkee,
       eikä saa rajata pystyvideota vaakalaatikkoon. */
    object-fit: contain;
    border-radius: 14px;
    background: #05070d;
}
/* Poisto on tekstilinkki eikä nappi: harvinainen ja peruuttamaton, eikä sen
   pidä kilpailla huomiosta lisäämisen kanssa. */
.np-poista-linkki {
    display: block;
    margin: 0.5rem auto 0;
    background: none;
    border: none;
    padding: 0;
    color: rgba(229, 72, 77, 0.85);
    font: 300 0.82rem/1.2 var(--st-font-body);
    cursor: pointer;
}
.np-poista-linkki:hover { color: #e5484d; }

/* Kehittäjän esikatselunappi (spa.html #okEsikatseluNappi). Vasen yläkulma
   takanapin yläpuolella: takanuoli on noin 60 px:n korkeudella, tämä 6:ssa.
   Tarkoituksella pieni ja himmeä — se on työkalu eikä sovelluksen osa, eikä
   se saa viedä huomiota siltä mitä ollaan katsomassa. */
.ok-esikatselu-nappi {
    position: fixed;
    top: 6px;
    left: 8px;
    z-index: 11000;
    padding: 0.16rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(11, 12, 16, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    opacity: 0.55;
}
.ok-esikatselu-nappi:hover { opacity: 1; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   Kysyntä: tyhjä hakutulos ja toivekortti (js/spa.js, kyTyhjaTulos)
   ───────────────────────────────────────────────────────────────────────────
   Tyhjä tulos oli yksi harmaa rivi keskellä arkkia. Uudessa sovelluksessa se
   on tavallisin näkymä, joten se saa saman muodon kuin muutkin kortit:
   tummansininen laatikko, harmaa leipäteksti ja korostussininen vain ohuena
   merkkinä. Omia värejä ei keksitä.

   Leipätekstille nollataan kirjainväli: .content antaa -0.18rem kaikelle,
   ja pienessä tekstissä kirjaimet menevät päällekkäin. */
.ky-tyhja {
    padding: 1.6rem 1.2rem 1.2rem;
    text-align: center;
    letter-spacing: normal;
}
.ky-tyhja-otsikko {
    font: 700 0.92rem/1.3 var(--st-font-body);
    color: #e7e9ee;
    letter-spacing: normal;
}
.ky-tyhja-teksti {
    margin: 0.5rem auto 0;
    max-width: 30rem;
    font: 400 0.82rem/1.5 var(--st-font-body);
    color: #a8acb5;
    letter-spacing: normal;
}
/* Luku on se kohta, jossa käyttäjä näkee oman hakunsa summan. Korostus
   tehdään lihavoinnilla ja kirkkaammalla harmaalla eikä värillä: sininen
   pintana ja tekstivärinä alkoi näyttää omalta teemaltaan, ja Stormissa
   korostussininen on ohut merkki eikä huomioväri (käyttäjä 30.9.2026). */
.ky-tyhja-luku {
    margin: 0.3rem auto 0;
    font: 600 0.82rem/1.4 var(--st-font-body);
    color: #e7e9ee;
    letter-spacing: normal;
}
.ky-lohko-otsikko {
    margin: 1.3rem 0 0.5rem;
    font: 600 0.8rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: #8a8f9a;
}
.ky-sirut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}
.ky-siru {
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #d8dade;
    cursor: pointer;
    font: 500 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
}
.ky-siru:hover { border-color: var(--st-accent, #5b7fe0); color: #fff; }
.ky-siru:active { transform: scale(0.97); }

/* Toivekysymys on tyhjässä tuloksessa osa samaa keskitettyä pinoa eikä oma
   laatikkonsa: laatikko toi toisen kehyksen ja toisen otsikkotason samaan
   näkymään, ja sivusta tuli täyteen kirjoitettu (käyttäjä 30.9.2026).
   Ruutulistan pohjalla laatikko on tarpeen — siellä se erottuu ruuduista. */
.ky-toive {
    margin: 1.5rem auto 0;
    max-width: 30rem;
    text-align: center;
    letter-spacing: normal;
}
.ky-toive-otsikko {
    margin-bottom: 0.7rem;
    font: 700 0.82rem/1.35 var(--st-font-body);
    color: #e7e9ee;
    letter-spacing: normal;
}
/* Sama valkoinen pilleri kuin Etsin omissa napeissa ("Katso kaikki
   kategoriat", .search-all-categories-link), jonka vieressä tämä usein
   seisoo. Sininen täyttö luki omana teemanaan eikä Stormina. */
.ky-toive-nappi {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #14161c;
    cursor: pointer;
    font: 400 0.8rem/1.25 var(--st-font-body);
    letter-spacing: 0;
}
.ky-toive-nappi:hover { background: #f2f2f5; }
.ky-toive-nappi:active { transform: scale(0.97); }
.ky-toive-nappi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ruutulistan pohjalla kortti on osa vieritettävää listaa, ei arkin
   keskitetty loppu — laatikko erottaa sen ruuduista ja alle jää tilaa
   alapalkille. */
#tagTiles > .ky-toive {
    margin-bottom: 1.4rem;
    padding: 1.1rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    /* Sama läpikuultava tumma kuin hakutuloskorteilla (.result-card):
       musta täyttö luki omana laatikkonaan keskellä läpinäkyvää sivua
       (käyttäjä 30.9.2026). */
    background: rgba(255, 255, 255, 0.045);
}

/* Tyhjän kaupunkisivun huomio. Käyttää tyhjän hakutuloksen tyylejä
   (.ky-tyhja), joten tässä vain sijainti: hero-kuvan alle, samaan leveyteen
   kuin muu sivu. */
.kaupunki-tyhja {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem 1.2rem 0.5rem;
}

/* Etsin lyhyt esittely kategoriaruudukon alla. Sama keskitetty, lyhyt muoto
   kuin muissakin selittävissä teksteissä (.ky-tyhja) — kirjainväli
   nollattuna, koska .content antaa -0.18rem kaikelle. */
/* Tehdyt työt (CV). Kuvaruudukko lomakkeessa ja tyhjän listan teksti;
   rivit itsessään ovat samoja .sv-card-row -rivejä kuin muutkin listat. */
.sv-cv-kuvat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.sv-cv-kuva {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, #1c2338, #05070d);
}
.sv-cv-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-cv-kuva-poista {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.sv-cv-tyhja {
    margin: 1.4rem 1.1rem;
    text-align: center;
    font: 300 0.82rem/1.55 var(--st-font-body);
    color: #8a8f9a;
    letter-spacing: normal;
}

/* Etusivun syötteen loppu (etusivuPaate). Hillitty: se on päätös, ei
   uusi lohko — yksi rivi ja yksi nappi. */
.etusivu-paate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.2rem 1.2rem 2.6rem;
    text-align: center;
}
.etusivu-paate-teksti {
    margin: 0;
    font: 300 0.82rem/1.5 var(--st-font-body);
    color: #8a8f9a;
    letter-spacing: normal;
}
.etusivu-paate-nappi {
    padding: 0.6rem 1.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font: 600 0.82rem/1 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}

/* ── Tarjouslomakkeen avattavat lohkot ───────────────────────────────────
   Vastaanottajalista ja tarkentavan haun brief ovat tarkistettavaa tietoa
   eivätkä täytettäviä kenttiä. Auki ne veivät lomakkeelta koko ruudun
   korkeuden, eikä lähettäjä nähnyt kerralla mitä on lähettämässä. Palkki
   kertoo mitä siellä on ja kuinka monta; napautus avaa.

   <details> eikä oma tilamuuttuja: selain hoitaa avaamisen, näppäimistön ja
   ruudunlukijan, eikä tila voi eksyä uudelleenpiirrossa. */
.tp-avattava {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.tp-avattava-ylin {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    list-style: none;
}
.tp-avattava-ylin::-webkit-details-marker { display: none; }
.tp-avattava-ylin > :first-child { flex: 1; min-width: 0; }
.tp-avattava-maara {
    flex: 0 0 auto;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    font: 600 0.8rem/1.5 var(--st-font-body);
    letter-spacing: 0;
}
.tp-avattava-nuoli {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}
.tp-avattava[open] .tp-avattava-nuoli { transform: rotate(180deg); }
.tp-avattava-sisus {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0 0.85rem 0.85rem;
}
/* Brief on avattava kuten muutkin: oma pohja ja reuna tulevat .tp-avattavalta,
   joten .tp-brief ei enää maalaa omaansa niiden päälle. */
#tarjoaModal .tp-brief.tp-avattava { padding: 0; background: rgba(255, 255, 255, 0.06); }
#tarjoaModal .tp-brief .tp-brief-pois { align-self: flex-start; }

/* Lähetetyt roolitarjoukset projektilomakkeella (#npPendingOffers).
   Lista on sama kuin projektisivulla, mutta täällä se on osa lomaketta eikä
   oma kaistansa: oma tausta ja sivupehmuste pois, muu tyyli kelpaa
   sellaisenaan koska lomake on yhtä tumma kuin projektisivu. */
#newproject-view .spm-pending-offers {
    background: none;
    padding: 0;
    margin-top: 1.6rem;
}

/* Omistajan projektikortin hakunapit (#spmProjektiHaku). Kaksi vierekkäistä
   nappia nimen alla: haku on projektin tekemistä eikä sen muokkaamista,
   joten se kuuluu kortille eikä lomakkeen sisään. Sama valkoinen pilleri
   kuin muuallakin sovelluksessa. */
.pj-hae {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.pj-hae-nappi {
    flex: 1 1 8rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 20px;
    background: #fff;
    color: #14161c;
    cursor: pointer;
    font: 400 0.8rem/1.25 var(--st-font-body);
    letter-spacing: 0;
}
.pj-hae-nappi:hover { background: #f2f2f5; }
.pj-hae-nappi:active { transform: scale(0.97); }
.pj-hae-nappi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Projektin ylläpitäjät projektilomakkeella (#pjManagersSection). Käyttää
   korttien hallinnoijalistan tyylejä (.np-manager-*, .np-invite-*), joten
   tässä vain osion oma sijainti ja ohjeteksti. */
/* Keskellä ja samanlevyinen kuin Tallenna-nappi (käyttäjä 11.10.2026):
   sivumarginaali kumosi .np-managers-sectionin automaattisen
   keskityksen, ja osio jäi kapeampana oikealle. */
.pj-managers {
    width: 100%;
    max-width: 21rem;
    margin: 1.6rem auto 0;
}
.pj-managers #pjInviteManagerBtn { width: 100%; max-width: none; }
.pj-managers-ohje {
    margin: 0.35rem 0 0.8rem;
    text-align: center;
    font: 400 0.8rem/1.5 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: normal;
}

/* Ylläpitäjäkortit projektilomakkeella (pjYllapitajat). */
#pjManagersList { max-width: none; }
.pj-yllapitaja {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}
.pj-yllapitaja-kuva {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    overflow: hidden;
    background: #2a2f3a;
    color: #fff;
    font: 600 0.9rem/1 var(--st-font-body);
}
.pj-yllapitaja-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-yllapitaja-tiedot { flex: 1; min-width: 0; }
.pj-yllapitaja-nimi {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font: 600 0.92rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.pj-yllapitaja-tieto {
    margin-top: 0.15rem;
    color: #8a8f9a;
    font: 400 0.78rem/1.35 var(--st-font-body);
    letter-spacing: normal;
}
.pj-yllapitaja-kutsuttu { border-style: dashed; }
.pj-yllapitaja-poista {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: transparent;
    color: #8a8f9a;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.pj-yllapitaja-poista:hover { color: #ff8a8a; }

/* Hakemukset-nappi projektikortilla (pjHakemuksetNappi). */
.pj-hakemukset-nappi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.6rem;
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-align: left;
    cursor: pointer;
    letter-spacing: normal;
}
.pj-hakemukset-nappi:active { transform: scale(0.98); }
.pj-hakemukset-nappi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pj-hakemukset-uusia { border-color: #5b7fe0; background: rgba(91, 127, 224, 0.16); }
.pj-hakemukset-merkki {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #5b7fe0;
    color: #fff;
    font: 700 0.8rem/1 var(--st-font-body);
}
.pj-hakemukset-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pj-hakemukset-otsikko { font: 600 1rem/1.2 var(--st-font-body); }
.pj-hakemukset-tiedot { color: rgba(255, 255, 255, 0.7); font: 400 0.8rem/1.3 var(--st-font-body); }
.pj-hakemukset-nuoli svg,
.ahh-rooli-nuoli svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; display: block; }
.pj-hakemukset-nuoli { flex: none; color: rgba(255, 255, 255, 0.7); }

/* Projektin hakemukset rooleittain (ahhProjektiYhteenveto). */
.ahh-projekti-nimi {
    margin: 0 0 0.9rem;
    color: #6b7280;
    font: 400 0.85rem/1.4 var(--st-font-body);
    letter-spacing: normal;
}
.ahh-rooli { margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ahh-rooli-otsikko {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.2rem;
    border: 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    letter-spacing: normal;
}
.ahh-rooli-teksti { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ahh-rooli-nimi { font: 600 0.98rem/1.25 var(--st-font-body); }
.ahh-rooli-tiedot { color: #6b7280; font: 400 0.78rem/1.3 var(--st-font-body); }
.ahh-rooli-nuoli { flex: none; color: #6b7280; }
.ahh-rooli-tyhja { margin: 0.2rem 0.2rem 0; color: #6b7280; font: 400 0.8rem/1.4 var(--st-font-body); }
.ahh-rooli-hakija { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ahh-uusi {
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #5b7fe0;
    color: #fff;
    font: 600 0.72rem/1.3 var(--st-font-body);
    vertical-align: middle;
}

/* "Hae projektiin" julkisella projektikortilla. Sama nappi kuin omistajan
   omilla hakunapeilla, mutta rooli sen vieressä: hakija haluaa tietää mihin
   rooliin hän on hakemassa ennen kuin painaa. */
.pj-hae-projektiin { flex-direction: column; align-items: stretch; gap: 0.45rem; }
.pj-hae-rivi { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pj-hae-rivi .pj-hae-nappi { flex: 0 0 auto; min-height: 32px; }
.pj-hae-rooli {
    font: 400 0.85rem/1.3 var(--st-font-body);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: normal;
}
/* Muokkauslomakkeen roolilista (ahPiirraRoolilista). */
.ah-roolilista { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0 auto 0.8rem; max-width: 22rem; }
.ah-roolilista:empty { display: none; }
.ah-rooli-chip {
    min-height: 32px; padding: 0.35rem 0.85rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25); background: transparent; color: inherit;
    font: 400 0.8rem/1.2 var(--st-font-body); cursor: pointer;
}
.ah-rooli-chip.valittu { background: var(--st-accent-strong, #4a67c2); border-color: transparent; color: #fff; }

/* Avoimen haun roolikohtaiset kysymykset.
   Omistajan lomakkeella rivi on kenttä + poistonappi; hakemuslistalla
   vastaus näytetään kysymyksen kanssa, koska "Kyllä" ei kerro mitään ilman
   kysymystä kun listaa luetaan viikkojen päästä. */
.ah-kysymysrivi {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.ah-kysymysrivi .ah-kysymys-kentta { flex: 1; min-width: 0; margin: 0; }
.ah-kysymys-pois {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.ah-kysymys-pois:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.ahh-vastaukset {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ahh-vastaus { display: flex; flex-direction: column; gap: 0.1rem; letter-spacing: normal; }
.ahh-vastaus-kysymys {
    font: 600 0.8rem/1.35 var(--st-font-body);
    color: rgba(255, 255, 255, 0.55);
}
.ahh-vastaus-teksti {
    font: 400 0.82rem/1.45 var(--st-font-body);
    color: #d8dade;
}

/* ── Oman profiilin avatar: sama pieni neliö kuin toisten profiileissa ──
   Oma profiili avautui koko ruudun levyisellä hero-kuvalla ja nimellä sen
   päällä, kun taas toisen profiili näyttää keskitetyn neliön ja nimen sen
   alla. Sama sivu näytti eri sivulta riippuen siitä kenen se on (käyttäjä
   30.9.2026), joten oma seuraa nyt toisten muotoa (.pp-kuva, .pp-nimi).

   Rakennetta ei pureta vaan hero muuttuu pinoksi: kuva ensin, nimi perään.
   Ratas jää absoluuttiseksi oikeaan ylänurkkaan, koska se kuuluu sivulle
   eikä kuvalle. */
/* Oma profiili: kuva sivun taustaksi, kuten julkisella profiililla.
 *
 * Neliö keskellä sivua oli kortti sivun päällä. Nyt kuva alkaa ruudun
 * yläreunasta — Stormi Assistant -palkin ja rattaan alta, jotka kelluvat
 * sen päällä — ja häivytetään alaspäin, jolloin se sulautuu sivuun. Sama
 * tekniikka kuin etusivun videolohkolla ja julkisella profiililla.
 *
 * Kuvan päällä ei ole omaa tummennuslevyä koko alalta: nimi asettuu
 * häivytyksen kohdalle, jossa kuvaa on enää vähän jäljellä. Yläreunan
 * kevyt tummennus on vain sitä varten, että palkki ja ratas erottuvat
 * vaaleastakin kuvasta. */
#settings-view .sv-hero {
    position: relative;
    display: block;
    width: 100%;
    /* Korkeus mitoitetaan siitä, mitä sen alle pitää jäädä, eikä pelkästä
       vh-osuudesta: Työhuone-palkki ja osioruudukko ovat sivun tilannekuva,
       ja niiden on näyttävä kokonaan alapalkin yläpuolella ilman vieritystä.
       Pelkkä 56vh vei ne palkin alle lyhyillä ruuduilla — ja 320 px:n
       alaraja teki siitä mahdotonta korjata. 25rem on palkin alle jäävän
       pinon korkeus (palkki + Työhuone + ruudukko + hengitysvara), 15rem
       se, mitä kuvasta on vielä mieltä näyttää. Alle 600 px:n ruudulla
       kumpikaan ei enää mahdu, ja silloin sivu vierii — kuvaa ei kutisteta
       postimerkiksi sen välttämiseksi. */
    height: 56vh;
    height: min(48vh, max(15rem, 100dvh - 27rem));
    /* .sv-hero'n oma 320px:n alaraja kumotaan tässä: se oli juuri se, mikä
       työnsi ruudukon palkin alle lyhyillä ruuduilla. */
    min-height: 15rem;
    max-height: 26rem;
    padding: 0;
    background: none;
    /* overflow näkyviin: nimi ja ratas ovat heron lapsia, eikä niitä saa
       leikata. Kuva rajataan omalla kerroksellaan. */
    overflow: visible;
}
/* Häivytys on kuvakerroksella eikä herolla: maski vaikuttaa kaikkiin
   lapsiin, ja herolle asetettuna se haalistaisi myös nimen ja rattaan. */
#settings-view #svHeroPhoto,
#settings-view .sv-hero-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}
#settings-view #svHeroPhoto {
    /* Kasvot ylhäällä, sama linjaus kuin julkisella profiililla. */
    object-fit: cover;
    object-position: center 22%;
}
#settings-view .sv-hero-placeholder {
    background: linear-gradient(160deg, #1c2338, #05070d);
}
/* Yläreunan tummennus vain sitä varten, että palkki ja ratas erottuvat
   vaaleastakin kuvasta. Oma kerroksensa kuvan päällä, maskin ulkopuolella. */
#settings-view .sv-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 72%;
    pointer-events: none;
    /* Monta pysäkkiä, jotta tumma kuva ei saa näkyvää vaakaraitaa siihen
       kohtaan, jossa tummennus loppuu. */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.22) 24%,
        rgba(0, 0, 0, 0.11) 48%,
        rgba(0, 0, 0, 0.04) 72%,
        rgba(0, 0, 0, 0) 100%);
}
/* Ratas ja valikko kuvan päälle. */
#settings-view .sv-topbar { z-index: 20; }
/* Kehotus tyhjän kuvapaikan päällä (svKuvaKehotus). Koko laatikko on nappi,
   jottei tyhjä kuva ole pelkkä laatikko ilman tarkoitusta. */
.sv-kuva-kehotus {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.2rem;
    box-sizing: border-box;
    background: none;
    border: none;
    color: #aab2c4;
    cursor: pointer;
    text-align: center;
}
/* Mitali (kutsu, esittely, haastattelu) nimen yläpuolella vie tilaa, ja
   keskitetty kehotus osui sen päälle (5.10.2026). Silloin kehotus keskitetään
   vain nimen ja mitalin yläpuolelle jäävään tilaan. */
#settings-view .sv-hero:has(.sv-kutsu-orb:not([style*="none"])) .sv-kuva-kehotus {
    bottom: 9.6rem;
    padding-top: 6.5rem;
}
.sv-kuva-kehotus-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
    color: #fff;
}
.sv-kuva-kehotus svg { width: 22px; height: 22px; }
/* Nimen yläpuolella pillerinä (svKuvaKehotus): samassa pinossa nimen
   kanssa, joten se ei voi mennä sen päälle millään ruudun korkeudella. */
.sv-kuva-kehotus.sv-kuva-kehotus-rivi {
    position: static;
    inset: auto;
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 auto 0.7rem;
    padding: 0.4rem 0.95rem 0.4rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.sv-kuva-kehotus-rivi .sv-kuva-kehotus-plus { width: 1.9rem; height: 1.9rem; }
.sv-kuva-kehotus-rivi svg { width: 18px; height: 18px; }
.sv-identity > .sv-kuva-kehotus-rivi + .sv-username { margin-top: 0; }
.sv-kuva-kehotus-teksti {
    font: 600 0.92rem/1.3 var(--st-font-body);
    color: #fff;
    letter-spacing: normal;
}

/* Tummennus oli kuvan päällä olevaa nimeä varten; nimi on nyt kuvan alla. */
#settings-view .sv-hero-scrim { display: none; }
/* Nimi ja jäsenyysmerkki häivytyksen päälle: kuva loppuu niiden kohdalla,
   joten teksti on luettavaa ilman omaa tummennustaan. Nosto ylös kuvan
   alareunan sisään, jotta sivu alkaa yhtenä kokonaisuutena eikä kuvana ja
   sen jälkeisenä listana. */
/* Nimi ja jäsenyysmerkki heron alareunaan, häivytyksen kohdalle: kuvaa on
   siinä enää vähän jäljellä, joten teksti on luettavaa ilman omaa
   tummennustaan. */
#settings-view .sv-identity {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    /* Nimi istui 1 px sisältölevyn yläreunan alapuolella, eli käytännössä
       kiinni Työhuone-palkissa. Nostettu niin, että väliin jää näkyvä rako. */
    bottom: 3.2rem;
    z-index: 15;
}

/* Hakijan oma saate hakemuslistalla ja hakemuksen esikatselu ennen lähetystä. */
.rh-saate {
    margin: 0.55rem 0 0;
    font: 400 0.82rem/1.5 var(--st-font-body);
    color: #d8dade;
    letter-spacing: normal;
    white-space: pre-wrap;
}
.rky-esikatselu {
    margin: 0.9rem 0 0.2rem;
    text-align: left;
}

/* Käyttöehdot ja tietosuojakäytäntö Yksityisyys-arkissa. Rekisteröitymisen
   rasti on ainoa muu paikka, ja sen näkee vain kerran. */
.sv-yksityisyys-linkit {
    margin: 0.2rem 1.2rem 0.9rem;
    text-align: center;
    font: 400 0.82rem/1.5 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
}
.sv-yksityisyys-linkit a { color: #d8dade; text-decoration: underline; }
.sv-yksityisyys-linkit a:hover { color: #fff; }

/* ── Verkon tila (js/filkka.js: verkkoPalkkiPaivita) ───────────────────────
   Palkki työntää sisältöä alaspäin eikä peitä sitä: offline-tilassa käyttäjä
   yrittää yhä käyttää sovellusta, eikä hänen pidä joutua sulkemaan
   ilmoitusta nähdäkseen mitä sen alla on. */
.stormi-verkkopalkki {
    /* Alareunaan eikä ylös: ruudun yläreunassa on jo Stormi Assistant,
       ratas ja näkymien omat palkit, kaikki position: fixed — ylös tuleva
       palkki menisi niiden päälle tai joutuisi työntämään jokaista niistä
       erikseen alaspäin. Alapalkin yläpuolella ei ole mitään, ja --st-alapalkki-tila
       tietää jo navin korkeuden (css/filkka.css). */
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: var(--st-alapalkki-tila);
    z-index: 12500;
    padding: 0.55rem 1rem;
    background: #3a2326;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #f3d9dc;
    font: 600 0.82rem/1.4 var(--st-font-body);
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
}

/* Lataus ei onnistunut. Eri asia kuin tyhjä tulos, ja näyttää siltä. */
.stormi-latausvirhe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 2rem 1.2rem;
    text-align: center;
}
.stormi-latausvirhe-teksti {
    margin: 0;
    max-width: 22rem;
    color: rgba(255, 255, 255, 0.62);
    font: 400 0.92rem/1.5 var(--st-font-body);
    letter-spacing: 0;
}
.stormi-latausvirhe-nappi {
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: 600 0.82rem/1 var(--st-font-body);
    letter-spacing: 0;
    cursor: pointer;
}


/* ── Huoltajan muistutukset alaikäisen kortilla ─────────────────────────
   Oma arkkinsa eikä rivi lomakkeen seassa: nämä eivät ole kenttiä vaan
   tekstiä, joka pitää oikeasti lukea, ja niiden pitää erottua siitä mitä
   kortille täytetään. Korostusväri on sama kuin muuallakin — lapsiturva ei
   saa omaa väriään, koska silloin se luettaisiin varoituksena jostain
   menneestä eikä ohjeena siitä, miten toimitaan. */
.ok-huoltaja-palkki { margin-top: 0.6rem; }
.huoltaja-sheet {
    position: fixed;
    inset: 0;
    z-index: 11200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}
.huoltaja-paneeli {
    width: 100%;
    max-width: 34rem;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.2rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
    border-radius: var(--st-radius-lg) var(--st-radius-lg) 0 0;
    border: 1px solid var(--st-line);
    border-bottom: none;
    background: var(--st-surface);
    box-shadow: var(--st-varjo-kelluva);
}
.huoltaja-ylapalkki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.huoltaja-ylapalkki h2 {
    margin: 0;
    color: var(--st-text);
    font: 700 1.05rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.huoltaja-sulje {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: var(--st-glass);
    color: var(--st-text-dim);
    font-size: 1rem;
    cursor: pointer;
}
.huoltaja-ohje {
    margin: 0 0 1rem;
    color: var(--st-text-dim);
    font: 0.82rem/1.5 var(--st-font-body);
    letter-spacing: normal;
}
.huoltaja-lista { display: flex; flex-direction: column; gap: 0.7rem; }
.huoltaja-kortti {
    padding: 0.95rem 1rem 0.9rem;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    background: var(--st-glass);
}
.huoltaja-kortti-luettu { border-color: rgba(91, 127, 224, 0.42); }
.huoltaja-otsikko {
    margin: 0 0 0.35rem;
    color: var(--st-text);
    font: 600 0.92rem/1.35 var(--st-font-body);
    letter-spacing: normal;
}
.huoltaja-teksti {
    margin: 0 0 0.8rem;
    color: var(--st-text-dim);
    font: 0.82rem/1.55 var(--st-font-body);
    letter-spacing: normal;
}
.huoltaja-kuittaa {
    min-height: 2.3rem;
    padding: 0 1.1rem;
    border: 1px solid rgba(91, 127, 224, 0.5);
    border-radius: var(--st-radius-pill);
    background: rgba(91, 127, 224, 0.16);
    color: var(--st-text);
    font: 600 0.8rem var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.huoltaja-kuittaa:disabled {
    border-color: var(--st-line);
    background: transparent;
    color: var(--st-text-faint);
    cursor: default;
}


/* Luo-sivun valitsin: kenelle avoin haku tehdään. Sama sivu eikä uusi
   näkymä, koska kyse on yhdestä valinnasta eikä lomakkeesta. */
.luo-valitsin-takaisin {
    align-self: flex-start;
    min-height: 2.4rem;
    padding: 0 0.9rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-pill);
    background: transparent;
    color: var(--st-text-dim);
    font: 0.8rem var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.luo-valitsin-otsikko {
    color: var(--st-text);
    font: 700 1.05rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.luo-valitsin-ohje {
    margin: -0.2rem 0 0.4rem;
    color: var(--st-text-dim);
    font: 0.82rem/1.5 var(--st-font-body);
    letter-spacing: normal;
}


/* ── Kortti taustakuvana ohjatulla lomakkeella ──────────────────────────
   Avointa hakua tehdessä täytetään aina jonkin projektin tai kortin tietoja,
   ja sen pitää näkyä: kuva kertoo yhdellä silmäyksellä minkä päälle
   kirjoitetaan. Sama käsittely kuin tarjouspaneelissa (--of-photo) — kuva
   ylös, häivytys tummaan tekstin alla — jotta kaksi paikkaa, joissa
   katsotaan samaa korttia, näyttävät samalta.

   Luku on omassa muuttujassaan, koska sama lomake palvelee montaa vaihetta:
   kuva asetetaan vain siksi ajaksi kun kohde on valittuna. */
.ok-kohdekuva {
    /* Häivytys aikaisemmin (testaajat 11.10.2026): kuvan teksti näkyi
       kenttien ja listan rivien läpi. */
    --okk-haivytys: linear-gradient(180deg,
        rgba(5, 7, 13, 0.30) 0%,
        rgba(5, 7, 13, 0.82) 18%,
        rgba(5, 7, 13, 0.96) 34%,
        var(--st-bg) 46%);
    background-color: var(--st-bg);
    background-image: var(--okk-haivytys), var(--okk-kuva, none);
    background-size: 100% 100%, 100% auto;
    background-position: center, center top;
    background-repeat: no-repeat;
    background-attachment: local, local;
}
/* Ylätilaa kuvalle: ilman tätä ensimmäinen kysymys istuu keskellä kuvaa
   eikä kuvasta näy kuin kaistale. */
.ok-kohdekuva .ok-tila { padding-top: 7rem; }

/* Valitsin keskitettynä: yksi valinta, ei lomaketta — se saa olla sivun
   keskellä kuten ohjatun lomakkeen kysymyksetkin. */
.luo-valitsin { display: flex; flex-direction: column; align-items: center; text-align: center; }
.luo-valitsin .luo-valitsin-ohje { max-width: 26rem; }
.luo-valitsin .pj-iso-pohja { width: 100%; max-width: 26rem; }

/* Tehdyn työn kategoriat: loput 27 ovat "Katso lisää" -napin takana.
   display:contents auki, jotta napit asettuvat samaan ruudukkoon neljän
   yleisimmän kanssa eivätkä omaksi riviryhmäkseen. */
.cv-kategoria-lisaa { display: none; }
.cv-kategoria-lisaa-auki { display: contents; }
.cv-kategoria-avaa {
    opacity: 0.75;
    font-style: italic;
}

/* ── Artikkelihaastattelu ───────────────────────────────────────────── */
.sv-haast-kysymys { display: block; margin-bottom: 1.3rem; }
.sv-haast-kysymys-teksti {
    display: block;
    /* Väri on sanottava: .sv-kutsu-sheet ei aseta omaa tekstiväriä, joten
       ilman tätä kysymys peri mustan lähes mustalla pohjalla (mitattu
       rgb(0,0,0) taustalla rgb(5,7,13)) eikä sitä voinut lukea. */
    color: var(--st-text);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.sv-haast-kysymys-ohje {
    display: block;
    font-size: 0.8rem;
    color: var(--st-text-dim);
    margin-bottom: 0.45rem;
}
.sv-haast-kysymys .sv-haast-vastaus { width: 100%; color: var(--st-text); }

.sv-haast-tila {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    color: var(--st-text-dim);
    min-height: 1.1em;
}
.sv-haast-napit { display: flex; gap: 0.6rem; }
.sv-haast-napit > * { flex: 1; }

/* Kieltäytyminen on oma, hillitty rivinsä: vastaaminen on vapaaehtoista,
   mutta kieltäytymisen ei kuulu olla yhtä näkyvä valinta kuin lähettämisen. */
.sv-haast-kieltaydy {
    display: block;
    width: 100%;
    margin-top: 1.1rem;
    background: none;
    border: 0;
    color: var(--st-text-faint);
    font: 400 0.82rem/1.3 var(--st-font-body);
    text-decoration: underline;
    cursor: pointer;
    padding: 0.6rem;
    min-height: 32px;
}


/* ── Työkuvat (js/spa.js tkAvaaLisays, pjsRenderTyokuvat, tkKorttiOsio) ──
   Tavallinen keikka kuvana: kortilla 90 päivää, sitten arkistossa. Samat
   pinnat kuin tähtihetkillä ja valmisruudulla, ei omaa väriä. */
.tk-lomake { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; margin: 0.2rem 0 1rem; }
.tk-otsake { font: 600 0.8rem/1.3 var(--st-font-body); color: rgba(255, 255, 255, 0.7); letter-spacing: normal; }
.tk-kortit { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tk-kortti-valinta {
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 600 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.tk-kortti-valinta.on { border-color: var(--st-accent); background: rgba(91, 127, 224, 0.2); }
.tk-valitse {
    height: 9rem;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04) center / cover no-repeat;
    color: rgba(255, 255, 255, 0.8);
    font: 600 0.85rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.tk-valitse.tk-valittu { border-style: solid; }
.tk-kuvateksti {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font: 400 1rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.tk-oikeudet {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font: 400 0.8rem/1.45 var(--st-font-body);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: normal;
    cursor: pointer;
}
.tk-oikeudet input { margin-top: 0.15rem; flex-shrink: 0; }
.tk-viesti { margin: 0; color: #ff8a7a; font: 400 0.8rem/1.4 var(--st-font-body); letter-spacing: normal; }
.tk-viesti:empty { display: none; }
.tk-ohje { margin: 0; color: rgba(255, 255, 255, 0.55); font: 400 0.8rem/1.45 var(--st-font-body); letter-spacing: normal; }

.tk-lisaa-nappi { margin-bottom: 0.8rem; }
.tk-tyhja { margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.6); font: 400 0.8rem/1.45 var(--st-font-body); letter-spacing: normal; text-align: center; }
.tk-ruudukko { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.tk-ruutu {
    position: relative;
    aspect-ratio: 1;
    border: 0;
    border-radius: 0.5rem;
    background: var(--st-surface) center / cover no-repeat;
    cursor: pointer;
}
/* Arkistossa oleva kuva himmeämpänä: se ei enää näy kortilla. */
.tk-ruutu.tk-arkistossa { opacity: 0.55; }
.tk-merkki {
    position: absolute;
    right: 0.3rem;
    top: 0.25rem;
    color: #fff;
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tk-nauha {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
}
.tk-nauha::-webkit-scrollbar { display: none; }
.tk-nauha-kuva {
    flex: 0 0 6.5rem;
    height: 6.5rem;
    border: 0;
    border-radius: 0.6rem;
    background: var(--st-surface) center / cover no-repeat;
    scroll-snap-align: start;
    cursor: pointer;
}

.tk-katselin {
    position: fixed;
    inset: 0;
    /* Ammattikortin päälle (10960), mutta poistovahvistuksen (ok-vahvistus
       11000) ja valmisruudun (12000) alle. */
    z-index: 10980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.88);
}
.tk-katselin-sisus { width: 100%; max-width: 32rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tk-katselin-sisus img {
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 0.6rem;
    background: #000;
}
.tk-katselin-teksti { margin: 0; color: #fff; font: 400 0.85rem/1.45 var(--st-font-body); letter-spacing: normal; }
.tk-katselin-tila { margin: 0; color: rgba(255, 255, 255, 0.6); font: 400 0.8rem/1.4 var(--st-font-body); letter-spacing: normal; }
.tk-katselin-napit { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.3rem; }
.tk-katselin-nappi {
    min-height: 2.4rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 600 0.8rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.tk-katselin-nappi.tk-ensisijainen { background: #fff; color: #000; border-color: #fff; margin-left: auto; }
.tk-katselin-nappi.tk-vaarallinen { color: #ff8a7a; border-color: rgba(255, 138, 122, 0.5); }


/* ── Kuvaajan nimi kuvan oikeassa alakulmassa (kuvaajaMerkki, js/spa.js) ──
   Tekstinä kuvan päällä, ei kuvaan poltettuna. Pieni ja hillitty, mutta
   luettava sekä vaalealla että tummalla kuvalla: tumma pohja puoliksi
   läpinäkyvänä. */
.info-kuva,
.info-galleria-kuva,
.nosto-kuva { position: relative; }
.kuvaaja-merkki {
    position: absolute;
    right: 0.5rem;
    bottom: 0.45rem;
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0.12rem 0.45rem;
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.92);
    font: 500 0.75rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    pointer-events: none;
}
/* Ammattikortin/lokaation pääkuvassa kuvalaskuri on jo oikeassa
   alakulmassa, joten nimi sen yläpuolelle. */
.spm-hero-kuvaaja { bottom: 2.75rem; right: 0.9rem; z-index: 2; }
/* Galleriassa pisteet ovat alareunan keskellä: nimi pysyy oikeassa
   kulmassa, mutta kapeampana, jottei pitkä nimi peitä pisteitä. */
.info-galleria-kuva .kuvaaja-merkki { max-width: 40%; }

/* ── Testiryhmä (Jäsenyys-sivu, trPiirraLaatikko/trAvaa js/spa.js) ──
   Yksi korostussininen kuten muuallakin; leipäteksti nollaa .contentin
   kirjainvälin, muuten kirjaimet menevät päällekkäin. */
.tr-laatikko {
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(91, 127, 224, 0.45);
    background: rgba(91, 127, 224, 0.1);
    font-family: var(--st-font-body);
    letter-spacing: normal;
    color: #fff;
}
.tr-otsikko { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.35rem; }
.tr-teksti { margin: 0 0 0.6rem; font-size: 0.84rem; line-height: 1.5; color: rgba(255,255,255,0.82); letter-spacing: normal; }
.tr-tila { color: #fff; }
.tr-pieni { margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.55); letter-spacing: normal; }
.tr-nappi {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.85rem 1rem;
    border-radius: 24px;
    border: none;
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
    font: 700 0.86rem var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.tr-nappi:disabled { opacity: 0.45; cursor: default; }
.tr-linkki {
    display: block;
    margin: 0.5rem auto 0;
    min-height: 32px;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    color: #a9bdf2;
    font: 600 0.82rem var(--st-font-body);
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}
.tr-arkki .tr-sisalto {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.2rem calc(var(--st-alapalkki-tila, 6rem) + 1rem);
    font-family: var(--st-font-body);
    letter-spacing: normal;
    color: #fff;
}
.tr-iso { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 700; letter-spacing: normal; }
.tr-kohdat { margin: 0.4rem 0 0.9rem; padding-left: 1.1rem; }
.tr-kohdat li { margin-bottom: 0.55rem; font-size: 0.84rem; line-height: 1.5; color: rgba(255,255,255,0.85); }
.tr-kohdat a { color: #a9bdf2; }
.tr-kentta { display: block; margin: 0 0 0.8rem; }
.tr-kentta > span { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.tr-kentta .sv-member-input { max-width: none; font-family: var(--st-font-body); }
.tr-rasti { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0 0.8rem; font-size: 0.86rem; line-height: 1.45; cursor: pointer; }
.tr-rasti input { width: 20px; height: 20px; flex-shrink: 0; margin: 0.1rem 0 0; accent-color: #5b7fe0; }
.tr-virhe { margin: 0 0 0.7rem; font-size: 0.82rem; color: #ff8a8a; }

/* Arkin yhden lauseen selite otsikon alla (Tähtihetket, Tehdyt työt). */
.sv-sheet-selite {
    margin: 0.7rem 1.2rem 0.2rem;
    font: 400 0.8rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* Työhuoneen osion selite (Tehdyt työt). */
.pjs-osio-selite {
    margin: 0 0 0.8rem;
    font: 400 0.8rem/1.45 var(--st-font-body);
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.6);
}
.pjs-tyot-lista { margin-top: 0.6rem; }

/* Rikkinäinen kuva piiloon, kehys jää (js/spa.js, error-kuuntelija). */
img.kuva-rikki { visibility: hidden; }

/* Kontrastikierros 5.10.2026: luokat, jotka ovat sekä vaalealla lomakkeella
   että tummalla arkilla. Perussääntö on vaalealle (#6b7280), tumma saa omansa. */
.sv-cards-sheet .np-section-label { color: #8a8f9a; }
#moviecredits-view .np-type-tab { color: #6b7280; }
.sv-cards-sheet .np-field-hint,
#svKutsuSheet .np-field-hint { color: #8a8f9a; }
/* Punaisella poistonapilla musta teksti (ok-tumma) jäi 3,8:1:een. */
#euDeleteConfirmBtn { color: #fff; }

/* Aiemmin etusivulla (etusivuHaeAiemmin, 7.10.2026). */
.etusivu-aiemmin-otsikko { margin-top: 2.2rem; }

/* Omat tiedot -kortti on vain tietokoneen profiilissa (css/tyopoyta.css).
   Puhelimessa samat tiedot ovat rattaan takana: Muokkaa tietoja. */
.sv-omat-tiedot { display: none; }

/* Iso esikatselu lomakkeen vieressä on vain tietokoneella (css/tyopoyta.css,
   ohjattuLomake luoIsoEsikatselu). Puhelimessa riittää ohut kaistale. */
.ok-iso { display: none; }

/* Profiilin osioruutujen taustakuvat ovat vain tietokoneella
   (css/tyopoyta.css, svRuudunKuvat). */
.sv-ruutu-kuvat { display: none; }

/* Työhuone yläpalkissa ja osioruutujen lisätieto ovat vain tietokoneella
   (css/tyopoyta.css). */
.footer-tp-vain,
.sv-ruutu-lisa { display: none; }

/* Hakemuspaneelin tyhjä tila on vain tietokoneella, jossa paneeli näkyy. */
.tp-hp-tyhja { display: none; }
/* Etusivun osio-otsikoiden lisät ja Avoimet haut -lista ovat vain tietokoneella (css/tyopoyta.css). */
.tp-osio-pieni, .tp-osio-oikea, .tp-haut { display: none; }
.etsi-kuvitus { display: none; }
/* Yläpalkin Asetukset vain tietokoneella; puhelimessa ratas on Profiilissa. */
.tp-asetukset { display: none; }

/* Tietokoneen elävä tausta on vain ≥1024 px (css/tyopoyta.css). */
.tp-tausta { display: none; }

/* Tietokoneen numeroidut nostot (tpNostotPaivita) ovat vain ≥1024 px. */
.tp-nostot { display: none; }

/* Oman ryhmä- tai yrityskortin ylläpitäjäkutsu kortin alussa (9.10.2026). */
.spm-yllapito-kehotus {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(91, 127, 224, 0.45);
    border-radius: 14px;
    background: rgba(91, 127, 224, 0.12);
    color: #fff;
    text-align: left;
    cursor: pointer;
    font: 600 0.92rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.spm-yllapito-ikoni { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.spm-yllapito-ikoni svg { width: 18px; height: 18px; }
.spm-yllapito-teksti { flex: 1; }
.spm-yllapito-nuoli { font-size: 1.3rem; color: rgba(255, 255, 255, 0.6); }

/* Cast- ja Crew-listan Stormi-käyttäjän nimi linkkinä julkiseen profiiliin. */
.spm-nimilinkki {
    display: inline;
    /* Osuma-alue 32 px:iin rivikorkeutta muuttamatta. */
    padding: 6px 0;
    margin: -6px 0;
    border: 0;
    background: none;
    color: #8ba4ea;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(139, 164, 234, 0.45);
    text-underline-offset: 3px;
    cursor: pointer;
}
.spm-nimilinkki:hover { color: #fff; text-decoration-color: #fff; }
.spm-nimilinkki:active { transform: none; }

/* Kuvien raahaus (wirePosterGridReorder): kelluva kopio seuraa sormea,
   alkuperäisen paikalla himmeä paikkamerkki. */
.poster-item-paikka { opacity: 0.25; outline: 2px dashed rgba(139, 164, 234, 0.7); outline-offset: -2px; }
.poster-item-haamu { transition: transform 0.18s ease, box-shadow 0.18s ease; border-radius: 12px; overflow: hidden; }
.poster-item-haamu-irti { transform: scale(1.06) rotate(-1.5deg); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.poster-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.poster-item img { -webkit-user-drag: none; }

/* Assistant-pillerin piilotus puhelimessa (assistantPiilotusPaivita). Rasti
   pillerin vasemmassa reunassa; piilotettu pilleri tulee esiin, kun
   ylläpidolta on jotain (.assistant-ilmoittaa). Tietokoneella ei piilotusta
   (css/tyopoyta.css). */
.stormi-assistant-piilota {
    display: grid;
    place-items: center;
    /* Painettava alue yli 32 px:n alarajan, näkyvä ympyrä 26 px. */
    width: 36px;
    height: 36px;
    margin: -5px -0.15rem -5px -0.8rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 12.5px, transparent 13.5px);
    color: rgba(255, 255, 255, 0.75);
    flex: none;
}
.stormi-assistant-piilota svg { width: 12px; height: 12px; }
.stormi-assistant-piilota:active { background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 12.5px, transparent 13.5px); }
.stormi-assistant-bar.assistant-ilmoittaa .stormi-assistant-piilota { display: none; }
body.assistant-piilossa .stormi-assistant-bar:not(.assistant-ilmoittaa) { display: none !important; }

/* Ohjatun lomakkeen käydyt kohdat siruina edistymispalkin alla
   (vaiheLista, js/spa.js): painamalla pääsee suoraan korjaamaan. */
.ok-vaiheet { margin-top: 0.6rem; }
.ok-vaiheet-rivi {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.ok-vaiheet-rivi::-webkit-scrollbar { display: none; }
.ok-vaihe-siru {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    min-height: 32px;
    max-width: 11rem;
    padding: 0 0.7rem 0 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font: 500 0.78rem/1 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}
.ok-vaihe-siru:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.ok-vaihe-siru-nro {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font: 700 0.7rem/1 var(--st-font-body);
}
.ok-vaihe-siru-nimi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-vaihe-siru.ok-vaihe-siru-nyt { border-color: #5b7fe0; background: rgba(91, 127, 224, 0.18); color: #fff; cursor: default; }
.ok-vaihe-siru.ok-vaihe-siru-nyt .ok-vaihe-siru-nro { background: #5b7fe0; }
.ok-vaiheet-jatka {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 0.45rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--st-accent-strong, #4a67c2);
    color: #fff;
    font: 600 0.8rem/1 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}

/* Oikotie julkaisuun ohjatun lomakkeen yläosassa lisätietojen aikana
   (10.10.2026). Toissijainen nappi: julkaisu on mahdollinen, mutta
   lisätietojen täyttäminen on yhä se, mitä kysymys pyytää. */
.ok-julkaise-oikotie {
    display: block;
    margin: 0.55rem auto 0;
    min-height: 32px;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 600 0.85rem/1.2 var(--st-font-body);
    letter-spacing: normal;
    cursor: pointer;
}

/* ── Luo-sivu puhelimella (luoPuhelin, js/spa.js; käyttäjä 11.10.2026) ────
 * Koko ruudun valokuva tummennettuna taustalla, valittu vaihtoehto isona
 * ylimpänä ja muut kahdessa palstassa sen alla, selitys keskellä ja iso
 * "Lisää uusi …" -nappi alalaidassa alapalkin yläpuolella. Tietokoneen
 * ruudukko (css/tyopoyta.css) ei käytä tätä. */
@media (max-width: 1023px) {
    #luo-view .np-header { position: relative; z-index: 2; }
    #luo-view .luo-main { position: relative; z-index: 1; }
    #luoNapit.luo-p {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 0.6rem;
    }
    .luo-p-tausta {
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        background: #05070d;
    }
    .luo-p-kuva {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 50%;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity 0.7s ease, transform 6s ease-out;
    }
    .luo-p-kuva.luo-p-kuva-nakyy { opacity: 1; transform: scale(1); }
    /* Tummennus: ylhäällä laatat ja alhaalla nappi luettavina, keskellä
       kuva näkyy enemmän. */
    .luo-p-tausta::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to bottom, rgba(5, 7, 13, 0.7) 0%, rgba(5, 7, 13, 0.2) 34%, rgba(5, 7, 13, 0.3) 62%, rgba(5, 7, 13, 0.88) 100%);
    }

    .luo-p-laatat {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .luo-p-laatta {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 2.9rem;
        padding: 0.55rem 0.8rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #fff;
        text-align: left;
        font: 600 0.88rem/1.2 var(--st-font-body);
        letter-spacing: normal;
        cursor: pointer;
        transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
    }
    .luo-p-laatta svg {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .luo-p-nimi { min-width: 0; overflow-wrap: anywhere; }
    /* Lukittu (rekrytointi ilman Corporatea): himmeä ja lukko oikealla. */
    .luo-p-laatta.luo-p-lukittu { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.04); }
    .luo-p-lukko { width: 16px !important; height: 16px !important; margin-left: auto; opacity: 0.8; }
    .luo-p-huomio {
        display: none;
        margin: 0.7rem auto 0;
        max-width: 22rem;
        padding: 0.65rem 0.9rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 14px;
        background: rgba(12, 14, 22, 0.88);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        font: 400 0.85rem/1.45 var(--st-font-body);
        letter-spacing: normal;
    }
    .luo-p-huomio.luo-p-huomio-nakyy { display: block; animation: luo-p-huomio-esiin 0.25s ease; }
    @keyframes luo-p-huomio-esiin { from { opacity: 0; transform: translateY(-4px); } }
    .luo-p-huomio-linkki {
        padding: 0;
        border: 0;
        background: none;
        color: #8fa8ee;
        font: 600 0.85rem/1.45 var(--st-font-body);
        letter-spacing: normal;
        text-decoration: underline;
        cursor: pointer;
    }
    .luo-p-laatta > * { transition: opacity 0.18s ease; }
    .luo-p-laatta.luo-p-liikkuu > * { opacity: 0; transition: none; }
    /* Valittu korostuu paikallaan, samankokoisena kuin muut. */
    .luo-p-laatta.luo-p-iso {
        border-color: rgba(91, 127, 224, 0.85);
        background: linear-gradient(135deg, rgba(91, 127, 224, 0.42), rgba(91, 127, 224, 0.14));
        font-weight: 700;
    }

    .luo-p-selite {
        margin: auto 0;
        padding: 2rem 0.6rem;
        text-align: center;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .luo-p-selite.luo-p-selite-nakyy { opacity: 1; transform: none; }
    .luo-p-selite-otsikko {
        margin-bottom: 0.6rem;
        font: 700 1.5rem/1.2 var(--st-font-body);
        letter-spacing: normal;
        color: #fff;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    }
    .luo-p-selite-teksti {
        max-width: 22rem;
        margin: 0 auto;
        font: 400 0.95rem/1.5 var(--st-font-body);
        letter-spacing: normal;
        color: rgba(255, 255, 255, 0.86);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
    }
    .luo-p-cta {
        width: 100%;
        min-height: 3.4rem;
        margin-bottom: 0.8rem;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: #0b0b0d;
        font: 700 1rem/1.2 var(--st-font-body);
        letter-spacing: normal;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .luo-p-kuva, .luo-p-laatta, .luo-p-selite { transition: opacity 0.2s ease; transform: none; }
}

/* Lähetä hakemus -ikkunan teemakytkin otsikkorivin oikeaan reunaan
   (lisaaTeemakytkimet; käyttäjä 11.10.2026). */
#ahContactSheet .sv-cards-sheet-header .np-teemakytkin {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin: 0;
    transform: translateY(-50%);
}

/* Rekrytointiprojektissa ei avointa hakua (pjChooseCategory, käyttäjä
   11.10.2026): rekryllä on oma hakemuksensa, ja sen sisällä tehty avoin haku
   näkyi Etsissä avoimena hakuna eikä rekrytointina. */
#newProjectForm.pj-rekry #pjAvoinHakuSection,
#newProjectForm.pj-rekry #pjAvoinHakuHint { display: none !important; }

/* Yrityskortin avoimen haun vinkki rekrytointiin (npAhRekryVinkki). */
.np-ah-rekry-vinkki { max-width: 21rem; margin: 0 auto 0.8rem; text-align: center; }
.np-ah-rekry-linkki {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}

/* Kortin oikean yläkulman napit yhdessä rivissä myös puhelimessa:
   erikseen sijoitettuina Kortti kuvana -pilleri peitti lokaation
   ilmoitusnapin (⋯). Järjestys oikealta: jako, ilmoitus, Kortti kuvana. */
.spm-yla-oikea {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 6001;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.45rem;
}
.spm-yla-oikea > :is(.spm-share, .spm-report, .spm-korttikuva):not(#_) {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
}

/* Artikkelin väliotsikko (renderContentBlocks valiotsikot; käyttäjä
   11.10.2026): tekstilohkon ensimmäinen rivi. Ei Arial Blackia eikä isoja
   kirjaimia — ne kuuluvat vain sivun yläotsikolle. */
.artikkeli-valiotsikko {
    margin: 0 0 0.45rem;
    font: 700 1.1rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    color: #fff;
}
.np-view-light .artikkeli-valiotsikko { color: #14161c; }

/* Ohjatussa lomakkeessa avoin haku tallentuu Valmis-napista
   (ahTallennaValmiissa); erillinen Tallenna avoin haku -nappi hämmensi. */
.ok-tila #pjAvoinHakuSaveBtn,
.ok-tila #npAvoinHakuSaveBtn { display: none; }

/* Kehotukset (aloituspolku, kortin valmius) vain Chat-välilehden yllä,
   ei UKK:ssa eikä Assistantissa (Teemu 11.10.2026: "ei tartte kolmessa
   paikkaa näkyä"). */
.stormi-assistant-overlay:not([data-tila="chat"]) .stormi-assistant-ilmoitukset { display: none !important; }

/* Puhelimellakin Profiili-linkki tietorivin jälkeen eikä nimen vieressä
   (Teemu 11.10.2026: pitkä nimi meni linkin alle). Sama järjestys kuin
   tietokoneella (css/tyopoyta.css). */
@media (max-width: 1023px) {
    .spm-overlay:has(.spm-hero) .spm-titleblock {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.75rem;
    }
    .spm-overlay:has(.spm-hero) .spm-titleblock > * { order: 4; flex-basis: 100%; }
    .spm-overlay:has(.spm-hero) .spm-titleblock > .spm-name-row { display: contents; }
    .spm-overlay:has(.spm-hero) .spm-titleblock .spm-title-name { order: 1; flex-basis: 100%; }
    .spm-overlay:has(.spm-hero) .spm-titleblock > .spm-title-stats { order: 2; flex-basis: auto; }
    .spm-overlay:has(.spm-hero) .spm-titleblock .spm-profile-btn { order: 3; flex-basis: auto; margin: 0; padding: 0; line-height: normal; align-self: baseline; }
    .spm-overlay:has(.spm-hero) .spm-titleblock .spm-profile-link { order: 3; flex-basis: auto; align-self: center; }
}

/* Artikkelin loppuun toimintanappi (openArtikkeli). */
.artikkeli-cta { display: block; width: 100%; max-width: 22rem; margin: 2rem auto 1rem; }
/* Sama valkoinen pääpainike kuin muualla tummalla pohjalla: tumma #14161c
   hukkui artikkelin taustaan (Teemu 12.10.2026). */
.artikkeli-cta:not(#_) { background: #fff; color: #0b0f17; border-radius: 999px; padding: 0.85rem 1.2rem; font-size: 0.95rem; font-weight: 600; }

/* Ammatin valinnan "Teen kortin jonkun toisen puolesta" (npAsetaKenelle). */
.np-kenelle-linkki {
    display: block;
    margin: -0.2rem auto 0.9rem;
    min-height: 32px;
    padding: 0.3rem 0.8rem;
    border: 0;
    background: none;
    color: var(--ok-himmea, rgba(255, 255, 255, 0.6));
    font: 500 0.82rem/1.3 var(--st-font-body);
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.np-kenelle-linkki[aria-pressed="true"] { color: #fff; }

/* Hakutulosten napit tekstillä (Näkymä, Suodata): pelkkä kuvake jäi
   nimettömäksi puhelimella (testaajat 11.10.2026). */
.results-sheet-title-row .results-refine-btn {
    width: auto;
    min-width: 2.4rem;
    min-height: 2.4rem;
    height: auto;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}
.results-nappi-teksti { font: 600 0.78rem/1 var(--st-font-body); color: rgba(255, 255, 255, 0.82); letter-spacing: normal; }

/* Puhelimen Profiilin ratas pysyy näkyvissä vieritettäessä ja on isompi
   (testaajat 11.10.2026: asetukset ja uloskirjautuminen ovat vain tämän
   takana, se katosi rullatessa, ja napautus osui viereiseen Assistant-
   pilleriin). Samalla korkeudella kuin pilleri, oikeassa reunassa. */
@media (max-width: 1023px) {
    #settings-view.active .sv-topbar {
        position: fixed;
        top: calc(1.25rem + env(safe-area-inset-top));
        right: 0.75rem;
        z-index: 10000;
    }
    #settings-view .sv-gear { width: 2.6rem; height: 2.6rem; background: rgba(20, 21, 26, 0.72); }
    #settings-view .sv-gear svg { width: 20px; height: 20px; }
    #settings-view .sv-gear-menu { top: calc(2.6rem + 0.5rem); }
}

/* Keskustelulista (renderConvList, testaajat 11.10.2026): aika nimen
   rinnalla, projekti omalla rivillään, poisto kolmen pisteen valikossa. */
.conv-name-rivi { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.conv-name-rivi .conv-name { flex: 1 1 auto; min-width: 0; }
.conv-aika { flex: none; margin-left: auto; color: rgba(255, 255, 255, 0.55); font: 400 0.75rem/1 var(--st-font-body); letter-spacing: normal; }
.results-sheet-close { flex-shrink: 0; min-width: 2.4rem; min-height: 2.4rem; }
.conv-info > .conv-project { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-row .conv-valikko { position: static; flex: none; margin-left: 0.15rem; }

.sv-tier-hinta-luku.sv-tier-maksuton { font-size: 0.95rem; }
/* Jäsenyyslistan oma vierityspalkki näkyi puhelimella irrallisena viivana
   tasojen välissä (testaajat 11.10.2026); arkki vierii joka tapauksessa. */
#svMembershipSheet .sv-cards-list { scrollbar-width: none; }
#svMembershipSheet .sv-cards-list::-webkit-scrollbar { display: none; }
/* Otsikko lyhenee, jotta tekstinapit ja sulkurasti mahtuvat puhelimella. */
.results-sheet-title-row { flex: 1 1 auto; min-width: 0; }
.results-sheet-title-row .results-sheet-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-sheet-title-row .results-refine-btn { margin: 0; }
/* Suljettu tulosarkki ei saa pilkistää eikä olla painettavissa näkymän
   alareunassa (tekstinapit tekivät otsikkorivistä korkeamman). */
.results-sheet:not(.open) { visibility: hidden; pointer-events: none; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
.results-sheet.open { visibility: visible; transition: transform 0.3s ease; }

/* Kutsutun Corporate-jäsenen "Poistu jäsenyydestä" (loadCorporateBox). */
.sv-member-btn.sv-member-btn-toissijainen { background: transparent; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); margin-top: 1rem; }

/* Lokakuun kampanja (lkKampanjaAktivoi): selkeä ilmoitus, isompi teksti. */
.tr-kampanja .tr-otsikko { font-size: 1.12rem; }
.tr-kampanja .tr-teksti { font-size: 0.95rem; color: #fff; }

/* Androidin Chrome suurentaa tekstiä itse ("font boosting"), jolloin
   alapalkki kasvoi ja peitti sivun alimmat napit (11.10.2026). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Kuvamäärä ruudukon alla (testaaja 12.10.2026, KUVIA_MAX js/spa.js). */
.kuva-laskuri {
    margin: 0.4rem 0 0;
    /* Lomake voi olla vaalea tai tumma: väri pinnalta. */
    color: inherit;
    opacity: 0.7;
    font: 400 0.8rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.kuva-laskuri.kuva-laskuri-taynna { opacity: 1; font-weight: 600; }

/* Merkkilaskuri tekstikentän alla (merkkiraja() js/spa.js). */
.merkkilaskuri {
    margin: 0.25rem 0 0;
    text-align: right;
    color: inherit;
    opacity: 0.65;
    font: 400 0.75rem/1.2 var(--st-font-body);
    letter-spacing: normal;
}
.merkkilaskuri.merkkilaskuri-taynna { opacity: 1; font-weight: 600; }

/* Minusta/Haluaisin-tallennuksen tila (svRenderAboutField). */
.sv-about-tila {
    min-height: 1rem;
    margin: 0.3rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font: 400 0.75rem/1.3 var(--st-font-body);
    letter-spacing: normal;
}
.sv-about-tila.sv-about-tila-ok { color: rgba(255, 255, 255, 0.85); }
.sv-about-tila.sv-about-tila-virhe { color: #ff8a8a; }

/* Käyttäjän kirjoittama teksti rivittyy aina (testaaja 12.10.2026): yksi
   pitkä sana ilman välilyöntejä levitti profiilisivun yli 400 000 px
   leveäksi. min-width: 0 antaa flex-lapsen kutistua, letter-spacing kumoaa
   .contentin -0.18rem (kirjaimet päällekkäin leipätekstissä). Uusi
   käyttäjätekstin luokka lisätään tähän listaan. */
:is(.sv-info-value, .pp-text, .spm-info-value, .jp-kuvaus, .sv-card-row-bio,
    .result-card-desc, .of-brief-kuvaus, .sv-kutsu-card-desc, .sinulle-tuote-kuvaus,
    .pj-iso-pohja-kuvaus, .bubble-text, .stormi-chat-teksti, .sv-about-textarea) {
    overflow-wrap: anywhere;
    min-width: 0;
}
:is(.pp-text, .jp-kuvaus) { letter-spacing: normal; }
.bubble-linkki { word-break: normal; overflow-wrap: anywhere; }

/* Keskustelu tummana puhelimessa (testaaja 12.10.2026: "keskustelunäkymä on
   valkoinen, vaikka muu sovellus on tumma"). Vain alle 1024 px: tietokoneella
   valkoinen pohja käännetään tummaksi filtterillä (css/tyopoyta.css), ja
   tumma pohja kääntyisi siellä valkoiseksi. Alapalkki pysyy keskustelun
   ajan piilossa kuten viestisovelluksissa. */
@media (max-width: 1023px) {
    #chat-view, #chat-messages, #chat-header, #chat-input-bar, #chat-estetty { background: #14151a; }
    #chat-header, #chat-input-bar, #chat-estetty { border-color: rgba(255, 255, 255, 0.08); }
    #chat-input-bar { color-scheme: dark; }
    #chat-input { background: #22252d; color: #fff; }
    #chat-input::placeholder { color: #8a8f9a; }
    #chat-send { background: #5b7fe0; }
    #chat-back { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
    #chat-back svg { stroke: #fff; }
    #chat-avatar { background: #22252d; border-color: rgba(255, 255, 255, 0.12); }
    #chat-online-dot { border-color: #14151a; }
    #chat-name { color: #fff; }
    #chat-status { color: #8a8f9a; }
    #chat-menu svg { fill: #8a8f9a; }
    #chat-menu:active { background: rgba(255, 255, 255, 0.08); }
    .bubble-wrap.sent .bubble { background: #5b7fe0; }
    .bubble-wrap.sent .bubble-meta { color: rgba(255, 255, 255, 0.72); }
    .bubble-wrap.recv .bubble { background: #22252d; }
    .bubble-wrap.recv .bubble-text { color: #fff; }
    .bubble-wrap.recv .bubble-meta { color: #8a8f9a; }
    .chat-system-banner, .chat-project-card { background: #22252d; border-color: rgba(255, 255, 255, 0.08); }
    .chat-system-text, .chat-project-card-name { color: #fff; }
    .chat-system-date, .chat-project-card-meta { color: #8a8f9a; }
    #chat-estetty { color: rgba(255, 255, 255, 0.75); }
    #chat-esto-pois { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.25); }
    body.chat-open::after { background: #14151a; }
    html:not(.teema-kaannetty):has(body.chat-open) { background: #14151a !important; }
}

/* Etsin aktiiviset rajaukset tulosten yllä (etsiPiirraRajaukset). */
.tulos-rajaukset {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0 1.1rem 0.7rem;
}
.tulos-rajaukset[hidden] { display: none; }
.tulos-rajaus, .tulos-rajaus-tyhjenna {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 32px; padding: 0.3rem 0.75rem;
    border-radius: 999px; cursor: pointer;
    font: 500 0.8rem/1.2 var(--st-font-body); letter-spacing: normal;
}
.tulos-rajaus { border: 1px solid rgba(91, 127, 224, 0.6); background: rgba(91, 127, 224, 0.15); color: #fff; }
.tulos-rajaus-pois { opacity: 0.75; font-size: 0.75rem; }
.tulos-rajaus-tyhjenna { border: 0; background: none; color: rgba(255, 255, 255, 0.7); text-decoration: underline; text-underline-offset: 3px; }
.search-lyhyt-vihje {
    margin: 0.6rem 0; color: #8a8f9a;
    font: 400 0.8rem/1.3 var(--st-font-body); letter-spacing: normal;
}

/* Rajaa haku -ikkuna tummaksi kuten muu sovellus (testaaja 12.10.2026).
   Tietokoneen sivupalkissa sama paneeli oli jo tumma (css/tyopoyta.css,
   .etsi-sivupalkki), ja sen säännöt voittavat nämä siellä. */
.sfm-panel { color-scheme: dark; background: #1b2130; border: 1px solid rgba(255, 255, 255, 0.1); }
/* Hae-nappi ei saa jäädä alapalkin taakse: paneeli loppuu palkin yläpuolelle. */
@media (max-width: 1023px) {
    .sfm-overlay .sfm-panel { max-height: calc(100dvh - 8.5rem - var(--st-alapalkki-tila, 6.6rem) - 0.5rem); }
}
.sfm-close, .sfm-title { color: #8a8f9a; }
.sfm-label, .sfm-toggle-row-label { color: rgba(255, 255, 255, 0.8); }
.sfm-toggle { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); }
.sfm-toggle.active { background: #fff; border-color: #fff; color: #14161c; }
.sfm-select, .sfm-text { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.sfm-text::placeholder { color: #8a8f9a; }
.sfm-suggestions { background: #1b1f2a; border-color: rgba(255, 255, 255, 0.14); }
.sfm-suggestion { color: #fff; }
.sfm-suggestion:hover { background: rgba(255, 255, 255, 0.08); }
.sfm-search-btn { background: #fff; color: #14161c; font-weight: 600; }
.sfm-panel .track { background: rgba(255, 255, 255, 0.2); }
.sfm-panel .range-highlight { background: #5b7fe0; }
.sfm-panel .np-toggle-slider { background: rgba(255, 255, 255, 0.2); }
.sfm-panel .np-toggle-wrap input:checked + .np-toggle-slider { background: #5b7fe0; }

/* Muokkauslistan ryhmärivi ja sen alakohdat (sp.ryhma, ohjattuLomake). */
.ok-rivi-ryhma svg { transition: transform 0.2s ease; }
.ok-rivi-ryhma.ok-rivi-ryhma-auki svg { transform: rotate(180deg); }
.ok-rivi.ok-rivi-ryhmassa { margin-left: 1rem; width: calc(100% - 1rem); }

/* Värien pikavalinnat tekstikentän alla (variValinnat, js/spa.js). */
.vari-valinnat { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.vari-valinta {
    min-height: 32px; padding: 0.3rem 0.7rem;
    border-radius: 999px; border: 1px solid currentColor;
    background: transparent; color: inherit; cursor: pointer;
    font: 400 0.8rem/1.2 var(--st-font-body); letter-spacing: normal;
}
/* Tummassa Rajaa haku -ikkunassa periytyvä väri oli tumma (savutesti 1,3:1). */
.sfm-panel .vari-valinta { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.vari-valinta.active { background: #5b7fe0; border-color: #5b7fe0; color: #fff; }
.sfm-ulkonako-btn {
    display: block; width: 100%; min-height: 40px; margin: 0.4rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer;
    font: 500 0.85rem/1.2 var(--st-font-body); letter-spacing: normal;
}
.etsi-sivupalkki .sfm-ulkonako-btn { display: none !important; }

/* Tähtihetkien "Lisää kuva" ruudukon ensimmäisenä ruutuna (renderStarGallery,
   Teemu 12.10.2026) ja oma roskakori kuvan kulmassa. */
.sv-star-gallery-item.sv-star-lisaa {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0;
    border: 1.5px dashed rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font: 600 0.85rem/1.2 var(--st-font-body); letter-spacing: normal;
}
.sv-star-gallery-item.sv-star-lisaa:hover { border-color: rgba(255, 255, 255, 0.6); }
.sv-star-lisaa-plus {
    display: flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    font: 400 1.4rem/1 var(--st-font-body);
}
.sv-star-poista {
    position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(5, 7, 13, 0.65); color: #fff; cursor: pointer;
}
.sv-star-poista svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Hiirellä roskakori vasta osoitettaessa, ettei ruudukko näytä levottomalta. */
@media (hover: hover) and (pointer: fine) {
    .sv-star-poista { opacity: 0; transition: opacity 0.15s ease; }
    .sv-star-gallery-item:hover .sv-star-poista,
    .sv-star-gallery-item:focus-within .sv-star-poista,
    .sv-star-poista:focus-visible { opacity: 1; }
}

/* Kortin videon ohjainrivi alareunassa, vain kun video on näkyvissä. */
.spm-video-ohjaimet { display: none; }
.spm-hero.spm-hero-video .spm-video-ohjaimet {
    position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 3;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    background: rgba(5, 7, 13, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.spm-video-nappi {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #fff; cursor: pointer;
}
.spm-video-nappi svg { width: 20px; height: 20px; fill: currentColor; }
.spm-video-nappi svg .viiva { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spm-video-palkki { flex: 1; min-width: 0; accent-color: #5b7fe0; cursor: pointer; height: 24px; }
/* Kuvalaskuri ohjainrivin yläpuolelle, kun video on näkyvissä. */
.spm-hero.spm-hero-video .spm-hero-counter { bottom: 4.2rem; }

/* Kuvaajan nimi järjestö- ja kaupunkisivun kuvaosiossa yläkulmaan: alakulmassa
   se osui tekstin päälle (kaupunkiOsioElementti). */
.spm-kaupunki-section .spm-kaupunki-kuvaaja { top: 0.6rem; bottom: auto; z-index: 2; }
/* Pidempi tekstiosio luettavaksi: väljempi rivi ja hieman isompi teksti. */
.spm-kaupunki-section-plain .spm-kaupunki-section-text { font-size: 0.95rem; line-height: 1.65; max-width: 38rem; white-space: pre-line; }
.spm-kaupunki-section-plain .spm-kaupunki-section-title { font-size: 1.35rem; margin-bottom: 0.7rem; }
.spm-kaupunki-section-plain { padding: 2rem 1.3rem; }

/* Agentuuri: lisäkentät lomakkeessa ja kortin rivi (palaute 12.10.2026). */
#npAgentuuriSection .np-agentuuri-lisa { margin-top: 0.6rem; }
#npAgentuuriSection .np-agentuuri-lisa-otsikko { margin-top: 1rem; }
.spm-agentuuri-linkki {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.spm-agentuuri-tapa {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #8a8f9a;
    font-family: var(--st-font-body);
    letter-spacing: normal;
}

/* Työskentelyalueet Omissa tiedoissa (palaute 12.10.2026). */
.eu-tyoalueet { max-width: 22rem; margin: 0 auto; }
.eu-tyoalueet .eu-work-toggles { max-width: none; }
.eu-tyoalue-otsikko {
    margin: 1rem auto 0;
    text-align: center;
    font-size: 0.78rem;
    color: #6b7280;
    font-family: var(--st-font-body);
    letter-spacing: normal;
}
.eu-tyoalueet .eu-tyoalue-lisaa { margin-top: 0.7rem; }
.eu-tyoalue-ohje { max-width: 19rem; margin: 0 auto 0.4rem; text-align: center; }

/* Hakutulos löytyi työskentelyalueen kautta (palaute 12.10.2026). */
.result-card-tyoalue {
    margin-top: 0.15rem;
    font: 400 0.75rem var(--st-font-body);
    letter-spacing: normal;
    color: #8a8f9a;
}
.paikka-lahde { margin: 0.35rem auto 0; text-align: center; font: 400 0.75rem var(--st-font-body); letter-spacing: normal; color: #8a8f9a; }
.paikka-lahde a { color: inherit; }

/* Työn alla -rivit kortin lomakkeessa (palaute 12.10.2026). */
.np-tyon-alla-rivi {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem;
    border: 1px solid rgba(138, 143, 154, 0.35);
    border-radius: 12px;
}
.np-tyon-alla-rivi .np-field-input { margin: 0; max-width: none; }
.np-tyon-alla-rivi .np-tyon-alla-tilat { margin: 0.2rem 0 0; max-width: none; }
.np-tyon-alla-toiminnot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.np-tyon-alla-valmis {
    min-height: 32px;
    background: none;
    border: none;
    padding: 0.3rem 0;
    color: #5b7fe0;
    font: 400 0.82rem var(--st-font-body);
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.np-tyon-alla-toiminnot .np-social-row-remove { margin-left: auto; min-width: 32px; min-height: 32px; }

/* Järjestö- ja kaupunkisivu: pelkkä tunnelmakuva ilman tummennusta ja
   lihavointi esittelyssä (Teemu 12.10.2026). */
.spm-kaupunki-section-pelkka::before { content: none; }
.kaupunki-hero-esittely strong { font-weight: 700; color: #fff; }

/* Liu'utettava kuvakaruselli kaupunki- ja järjestösivulla (käyttäjä
   12.10.2026): samankokoiset kuvat vierekkäin, natiivi pyyhkäisy ja
   valkoiset pisteet alla. */
.kaupunki-galleria { width: 92%; margin: 0 auto; }
.kaupunki-galleria-rata {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.kaupunki-galleria-rata::-webkit-scrollbar { display: none; }
.kaupunki-galleria-rata > .spm-kaupunki-section { flex: 0 0 100%; scroll-snap-align: start; }
.kaupunki-galleria-pisteet { display: flex; justify-content: center; gap: 0; margin-top: 0.3rem; }
.kaupunki-galleria-piste {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kaupunki-galleria-piste::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: background 0.2s, transform 0.2s;
}
.kaupunki-galleria-piste.aktiivinen::before { background: #fff; transform: scale(1.15); }
.kaupunki-galleria-rata { cursor: grab; }
.kaupunki-galleria-rata.kaupunki-galleria-vedetaan { cursor: grabbing; user-select: none; }