/* Your original CSS exactly as provided */
@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/Arial-Black.woff2') format('woff2'),
    url('../fonts/Arial-Black.woff') format('woff'),
    url('../fonts/arial-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}


html, body {
    height: 100%;
}
/* Kills the sideways rubber-band bounce on touch — nothing here is
   meant to scroll horizontally at the page level (the deliberate
   horizontal carousels, e.g. .feed-cards-wrapper/.uutisvirta, each set
   their own overflow-x: auto and keep scrolling fine; this only clips
   anything that accidentally runs a hair wider than the viewport).
   Vain bodylle, ei html:lle (käyttäjä 10.10.2026: Androidilla Profiilin
   alalaitaan ei päässyt ilman outoja hyppyjä). Kun molemmilla oli
   overflow-x: hidden, body muuttui omaksi vieritysalueekseen dokumentin
   sijaan, ja Androidin Chrome nytkäytti sivua osoitepalkin piiloutuessa ja
   palatessa. Pelkän bodyn arvo siirtyy selainikkunalle, jolloin dokumentti
   vierii itse ja sivuttaisheilahdus pysyy estettynä. */
body {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Arial Black', Arial, sans-serif;
    letter-spacing: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background-image: url("../img/1.jpeg");
    background-size: cover;        /* fills the whole screen */
    background-repeat: no-repeat;  /* no tiling */
    background-position: center;   /* centers the image */
    background-attachment: fixed;  /* optional: "parallax"-like effect */
}
header {
    padding: 0;
    text-align: center;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
}
.content {
    color: white;
    margin: 0;
    letter-spacing: -0.18rem;
    flex: 1;
    padding-bottom: 56px;
}

/* The negative letter-spacing above is tuned for the custom 'Arial Black'
   webfont (see @font-face). Text rendered in plain Arial — e.g. the search
   empty-state messages ("Ei julkisia projekteja", "Ei lokaatioita", …) — must
   reset to normal spacing, otherwise the glyphs render cramped/overlapping. */
[style*="font-family:Arial"] {
    letter-spacing: normal;
}

/* Lomake-elementit eivät peri kirjasinperhettä selaimen oletuksista, joten
   ne jäivät käyttöjärjestelmän omaan kirjasimeen silloinkin kun mikään
   sääntö ei antanut niille perhettä — karusellien nuolinapit piirtyivät
   paljaalla Arialilla keskellä Helvetica-sovellusta. */
button, input, select, textarea {
    font-family: inherit;
}

/* Painalluksen pitää näkyä. Joka napissa, ei vain niissä, jotka joku on
 * muistanut tyylitellä erikseen.
 *
 * Etsi-sivulla 11 näkyvästä napista 9:llä ei ollut mitään palautetta
 * painalluksesta: nappi näytti samalta ennen ja jälkeen, eikä verkon yli
 * tapahtuvan toiminnon alkamisesta ollut mitään merkkiä. Puhelimella se
 * luetaan rikkinäiseksi napiksi ja painetaan uudelleen.
 *
 * Perussääntö kaikille, koska uusi nappi ei muuten saa tätä mukanaan.
 * Yksittäiset napit, joilla on oma :active-sääntönsä, kumoavat tämän
 * tarkempana valitsimena — mitään ei tarvitse poistaa.
 *
 * Kutistus + himmennys näkyy millä tahansa taustalla eikä keksi omaa
 * väriä. :disabled jätetään rauhaan: himmeä nappi, joka vielä reagoi,
 * lupaisi toiminnon jota ei tapahdu. */
/* Erillinen scale-ominaisuus eikä transform: transform korvaisi napin oman
 * siirron (esim. translateX(-50%) keskitykseen), jolloin keskitetty nappi
 * hyppäsi painalluksen ajaksi sivuun ja napautus meni ohi — Stormi
 * Assistant -palkin vasen puoli ei reagoinut lainkaan (5.10.2026). scale
 * yhdistyy olemassa olevaan transformiin. */
button:active:not(:disabled),
[role="button"]:active:not([aria-disabled="true"]) {
    scale: 0.97;
    opacity: 0.68;
}
@media (prefers-reduced-motion: reduce) {
    button:active:not(:disabled),
    [role="button"]:active:not([aria-disabled="true"]) {
        scale: none;
    }
}


.nav-link {
    position: relative;
    font-size: 1.25rem;
    font-weight: bold;
    color: black;
    background-color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
/* top and bottom lines, slightly inset */
.nav-link::before,
.nav-link::after {
    content: "";
    position: absolute;
    left: 10%;   /* inset from edges */
    width: 80%;  /* shorter than full width */
    height: 1px; /* thinner lines */
    background: white;
}

.nav-link::before { top: 0; }
.nav-link::after { bottom: 0; }

/* spacing between links */
.nav-link + .nav-link {
    margin-top: 0.6rem;
}



.topbar-pic {
    max-width: 100vw;
    max-height: 50vh;
    width: auto;
    height: auto;
    cursor: pointer;
}


.profile-container {
    text-align: center;
    margin:0;
    letter-spacing: -0.18rem;

}
.profile-container h1 {
    color: white;
    margin: 0;
    font-size: 2.5rem;
    margin-top: -11rem;
}
.profile-container h2 {
    margin:0;
    font-weight: normal;
    color: #efc239;
    font-size: 1rem;
    letter-spacing: -0.05rem;
}
.profile-container h3 {
    margin: 1.5rem 0;
    font-weight: normal;
    color: white;
    font-size: 0.8rem;
    letter-spacing: 0;
}
.menu {
    margin-top: 1.6rem;
    font-size: 1rem;
}
.menu span {
    display: block;
    color: white;
    font-family: var(--st-font-body);
    font-weight: 700;
    padding: 0 1rem;
    letter-spacing: normal;
    font-size: 0.82rem;
    margin-left: 2rem;
    margin-bottom: 1.1rem;
}
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1.4rem;
    margin-bottom: 1.1rem;
}
.menu-header span {
    margin-bottom: 0;
}
.menu-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item {
    display:block;
    margin-top: 1rem;
    background: transparent;       /* button itself is transparent */
    color: white;                  /* text color */
    border-top: 0.12rem solid white;   /* top border white */
    border-left: 0.12rem solid white;  /* left border white */
    border-bottom: 0.12rem solid transparent; /* bottom border invisible */
    border-right: 0.12rem solid transparent;  /* right border invisible */
    padding: 0.1rem 0.1rem;
    max-width:16rem;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    height:2rem;
}
.menu-item:hover { background: #f2f2f2; }
.menu-item i { font-size: 1.6rem; margin-right: 1rem; }
.menu-item span { font-size: 1.6rem; letter-spacing: -0.1rem;}
.feed.uutisvirta {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0 1.2rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* Kaksi arvoa: yksi arvo oli virheellinen ja jäi pois, ja tietokoneella
       näkyi vaakavierityspalkki (testaaja 12.10.2026). */
    scrollbar-color: transparent transparent;
    /* Vaakapyyhkäisy pysyy karusellissa eikä ketjuunnu sivulle. Ilman tätä
       rivin päähän osunut pyyhkäisy jatkui sivun heilahduksena tai laukaisi
       selaimen oman takaisin-eleen kesken selaamisen. */
    overscroll-behavior-x: contain;
    /* Kortit asettuvat reunaan pyyhkäisyn jälkeen. proximity eikä mandatory:
       lähelle osunut pyyhkäisy siistiytyy, mutta pitkä heitto saa jatkua. */
    scroll-snap-type: x proximity;
    /* Napsahduksen kohta = sama sisennys kuin paddingissa. Ilman tätä snap
       kohdistaa ensimmäisen kortin vierityslaatikon reunaan, rivi vierii
       latautuessaan 1,2rem ja kortti jää kiinni ruudun reunaan (mitattu
       3.10.2026: scrollLeft 19 px heti kun rivi on ruutua leveämpi). */
    scroll-padding-inline: 1.2rem;
}
/* Kortit ovat .feed-cards-wrapperin sisällä, eivät karusellin suoria lapsia:
   suoralle lapselle asetettuna kohdistus olisi osunut koko riviin. */
.feed.uutisvirta .feed-card,
.feed.uutisvirta .feed-card-poster,
.feed.uutisvirta .feed-card-wide { scroll-snap-align: start; }

.menu-input {
    display: block;
    margin-top: 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.1rem 1rem;
    max-width: 38rem;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    height: 2.3rem;
    font: inherit; /* make sure it matches text style */
    font-family: var(--st-font-body);
    box-sizing: border-box;

}

/* Make inputs match exactly */
input.menu-input,
textarea.menu-input,
select.menu-input {
    -webkit-appearance: none; /* remove default input style on Safari */
    -moz-appearance: none;    /* remove default input style on Firefox */
    appearance: none;
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.1rem 1rem;
    max-width: 38rem;
    height: 2.3rem;
    cursor: text;
    margin: 0.55rem auto 0 auto;
    display: block;
    font: inherit;
    font-family: var(--st-font-body);
    box-sizing: border-box;
}

input.menu-input::placeholder {
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    transform: translateY(0);
    transition: all 0.25s ease; /* smooth animation for both position & size */
    opacity: 1;
}

input.menu-input:focus::placeholder {
    color: #7e7e7e; /* optional accent color */
    transform: translateY(-0.9em); /* lift it upwards */
    font-size: 0.75rem; /* shrink it */
    opacity: 0.8; /* subtle fade */
}

.feed-card {
    border-radius: 12px;
    padding: 0;
    flex-shrink: 0;
    height: 5.3rem;
    width: 7.6rem;
    overflow: hidden;
}

.feed-card-poster {
    border-radius: 10px;
    padding: 0;
    flex-shrink: 0;
    margin-left:0.3rem;
    height: 11rem;
    width: 8rem;
    overflow: hidden;
}

.feed-card-wide {
    border-radius: 10px;
    padding: 0;
    flex-shrink: 0;
    margin-left:0.3rem;
    height: 7rem;
    width: 20rem;
    overflow: hidden;
}


.feed-card img, .feed-card-poster img, .feed-card-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* <-- this is the magic */
}

/* Headshots are usually tall portraits cropped into a wide card — bias the
   crop toward the top so faces survive instead of landing on the chin/chest.
   No real face detection here, just a sane default for portrait photos. */
#userFeed .feed-card img,
.feed-card-profiili .feed-card-media img {
    /* The second selector is the one that matters now: Etusivu's block
       carousels render into lohko<N>Feed, not #userFeed, so the old rule
       never reached them and portraits were cropped through the forehead. */
    object-position: center 20%;
}

/* Movie poster feed ("Elokuvateatteri ensi-illat", reusing the poster reel
   data) uses a 2:3 portrait card instead of the standard wide one. The #id
   selector outranks the .feed-card class rules. */
#elokuvaEnsiiltaFeed .feed-card {
    width: 6.4rem;
    min-width: 6.4rem;
    height: 9.6rem;        /* 6.4rem × 3/2 = 9.6rem → 2:3 */
    aspect-ratio: 2 / 3;
}
/* Posters get a title + production company caption below the image, same as
   locations/profiles — the outer card must go back to auto height for that,
   overriding the fixed 2:3 height above (equal ID+class specificity, wins by
   source order). Only the inner media box keeps the 2:3 portrait shape. */
#elokuvaEnsiiltaFeed .feed-card-caption-below {
    height: auto;
    aspect-ratio: auto;
}
#elokuvaEnsiiltaFeed .feed-card-media {
    width: 6.4rem;
    height: 9.6rem;
}
#elokuvaEnsiiltaFeed .feed-card-caption {
    width: 6.4rem;
}


.feed-cards-wrapper {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.feed-card {
    position: relative;
    box-shadow: var(--st-varjo-matala);
    padding: 0;
    flex-shrink: 0;
    text-align:left;

}

/* Location cards ("Viikon lokaatiot") — Airbnb-style: image on top, plain
   caption text in normal flow underneath, no gradient scrim. */
.feed-card-caption-below {
    height: auto;
    box-shadow: none;
    /* The base .feed-card rule's overflow:hidden + border-radius:12px was
       sized for the old fixed 5.3rem image-only card; here the box grows
       taller to fit the caption below the image, so that same rounding
       clips into the caption text at the bottom corners. .feed-card-media
       already has its own border-radius for the photo, so the outer box
       doesn't need to clip anything. */
    overflow: visible;
    border-radius: 0;
}
.feed-card-media {
    position: relative;
    width: 7.6rem;
    height: 5.3rem;
    border-radius: 12px;
    overflow: hidden;
}
.feed-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Artikkeli card's "Lue juttu" label, centered over the top of the image
   (2026-09 feedback batch item #10). */
.feed-card-artikkeli-label {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Public like button + "who liked this" count, top-right of the card image. */
.feed-card-fav-wrap {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 3px;
}
.feed-card-fav {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.feed-card-fav svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}
.feed-card-fav.active svg {
    fill: #ff4d67;
    stroke: #ff4d67;
}
.feed-card-fav-count {
    min-width: 15px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-align: center;
    cursor: pointer;
}
.feed-card-fav-count:empty {
    display: none;
}

/* "Who liked this" bottom sheet — tumma 12.10.2026 alkaen, ks. .likers-panel. */
/* "Tykänneet" used to be a full-width dark bottom sheet; per the 2026-09
   feedback batch's item #7, it's now a centered white card — same look as
   Etsi's .result-card, just as a standalone floating panel instead of one
   row in a results list — so it reads as a small popover, not a takeover. */
.likers-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}
.likers-panel {
    width: 100%;
    max-width: 360px;
    max-height: 70vh;
    /* Tumma kuten muut ikkunat (Teemu 12.10.2026); tietokoneen vaalea
       teema kääntää sen vaaleaksi koko sivun mukana. */
    background: #1b2130;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color-scheme: dark;
    border-radius: 16px;
    box-shadow: var(--st-varjo-nostettu);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.likers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.likers-header span {
    color: #fff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1rem;
}
.likers-close {
    background: none;
    border: none;
    color: #8a8f9a;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.likers-list {
    overflow-y: auto;
    padding: 0.4rem 0;
}
.likers-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1.1rem;
}
.likers-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    object-fit: cover;
    flex-shrink: 0;
}
.likers-name {
    color: #fff;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    letter-spacing: normal;
}
.likers-empty {
    color: #8a8f9a;
    font-family: var(--st-font-body);
    letter-spacing: normal;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.82rem;
}
.feed-card-caption {
    width: 7.6rem;
    padding: 0.45rem 0.1rem 0;
}
.feed-card-caption-name {
    color: #fff;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: -0.02em;
    line-height: 1.22;
}
.feed-card-caption-cat {
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    letter-spacing: normal;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Single gradient scrim across the bottom of the card, behind the labels,
   so multiple stacked spans don't each draw their own background. */
.feed-card:not(.feed-card-all):not(.feed-card-promo):not(.feed-card-caption-below)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    border-radius: 0 0 10px 10px;

    background: linear-gradient(to top,
            rgba(0,0,0,0.7) 0%,
            rgba(0,0,0,0.3) 50%,
            rgba(0,0,0,0) 100%);
}

.feed-card span {
    position: absolute;
    left: 12px;
    right: 14px;
    bottom: -20px;
    z-index: 1;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.06em;
    line-height: 1.2;

    /* Soft shadow instead of a hard outline */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Pause animation on hover */
.feed.uutisvirta:hover .feed-cards-wrapper,
.feed.uutisvirta:focus .feed-cards-wrapper,
.feed.uutisvirta.scrolling .feed-cards-wrapper {
    animation-play-state: paused;
}


.profile-container {
    position: relative;
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically if needed */
}


.profile-container  .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.85;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.profile-container .left-btn {
    left: 0.75rem;
}

.profile-container .right-btn {
    right: 0.75rem;
}

.profile-container .nav-btn:hover {
    background-color: rgba(0,0,0,0.6);
    opacity: 1;
}

.notification-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}
.notification-icon .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: red;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    pointer-events: none;
}
/* Gallery modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
}
.modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 1rem;
    border-radius: 10px;
    max-width: 500px;
    position: relative;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}
.gallery img, .gallery .add-photo {
    width: 100px; height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    background: #f2f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}
/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-btn:hover {
    background: #cc0000;
}
/* Contacts modal */
.contacts-list {
    max-height: 300px;
    overflow-y: auto;
}
.contact-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}
.contact-item img {
    width: 40px; height: 40px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(8, 11, 28);
    padding: 0 40px;
    z-index: 10000;
    height: 76px;
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    touch-action: manipulation;
}

.footer-item.active {
    opacity: 1;
}

.footer-item:hover {
    transform: translateY(-2px);
}


.footer p {
    font-size: 1rem;
    letter-spacing: 0;
    color: white;
    margin: 0;
}

.footer-icon {
    width: 24px;
    height: 24px;
    fill: white;
}




:root{
    --radio-size: 1.1rem;
    --radio-gap: 0.75rem;
    --label-font: 1rem;
    --accent: #efc239; /* change to your accent */
    --text-color: #fff;
    --muted: rgba(255,255,255,0.75);

    /* ── New visual system (2026 redesign) — rolled out page by page ──
       Do not remove the tokens above; older views still depend on them
       until they get redesigned too. */
    --st-bg: #05070d;
    --st-bg-soft: radial-gradient(ellipse 120% 70% at 50% 0%, #171d31 0%, #05070d 55%, #030409 100%);
    --st-surface: #141a2b;
    --st-surface-2: #1c2338;
    --st-accent: #5b7fe0;
    --st-accent-strong: #4a67c2;
    /* Jäsenyyden kulta. Ainoa korostussinistä muu väri, ja se on varattu
       yhteen asiaan: maksavan jäsenyyden merkitsemiseen. Oli jo jäsenkortin
       --tier-arvona; nostettu tokeniksi, jotta profiilin merkki ja kortti
       eivät eriydy eri kullaksi. RGB-osina, koska sitä käytetään läpi
       näkyvissä sävyissä. */
    --st-kulta-rgb: 227, 179, 65;
    --st-text: #ffffff;
    --st-radius-lg: 20px;
    --st-radius-pill: 999px;
    --st-font-display: 'Arial Black', Arial, sans-serif;
    /* Yksi leipäkirjasin koko sovellukseen (1.10.2026).
       Pinoja oli neljä, ja iPhonessa kaksi niistä oli eri kirjasimia:
       -apple-system on SF Pro ja Helvetica on Helvetica, ja molempia
       käytettiin samoissa näkymissä. Helvetica siksi, että se on
       sovelluksen kirjoitettu sääntö (Arial Black otsikoihin, Helvetica
       muuhun) — järjestelmäkirjasin olisi vaihtanut koko sovelluksen
       ilmeen iOS:ssä. Androidilla tämä osuu Robotoon; se on oikea
       lopputulos eikä vika. */
    --st-font-body: Helvetica, Arial, sans-serif;

    /* ── Harmaat ──────────────────────────────────────────────────────
       Kaksi kolmen portaan sarjaa. Ennen 1.10.2026 harmaita oli 14, ja
       erot olivat alle havaintokynnyksen: kahdeksan vaaleaa (#d8dade …
       #f2f2f5) ja kuusi keskiharmaata. Ne eivät olleet hierarkiaa vaan
       eri päivinä tehtyjä valintoja.

       Vaaleat ovat niitä valkoisia pintoja varten, joita sovelluksessa
       on yhä kolme: hakupalkki, Rajaa hakua -arkki ja chatin
       kirjoituspalkki. Keskiharmaat ovat toissijaista tekstiä. */
    --st-light-1: #d8dade;   /* viivat ja reunat vaalealla */
    --st-light-2: #e5e7ea;   /* täyttö vaalealla */
    --st-light-3: #f2f2f5;   /* vaalein pinta */
    --st-grey-1: #a8acb5;    /* vihjeteksti */
    --st-grey-2: #8a8f9a;    /* toissijainen teksti */
    --st-grey-3: #6b7280;    /* heikoin luettava */
    --st-text-muted: var(--st-grey-2);

    /* ── Pinnan kerrokset tummalla ────────────────────────────────────
       Nämä olivat ennen vain .ok-tumma-lohkon --ok-*-muuttujia, eli
       olemassa yhdellä sivutyypillä mutta eivät sovelluksessa. Arvot
       ovat entiset; nyt niillä on yksi koti. */
    /* ── Korkeus ──────────────────────────────────────────────────────
       Kolme tasoa. Varjo on pinnan korkeus, ja kun arvoja oli 38, korkeus
       ei tarkoittanut mitään: kaksi vierekkäistä korttia saattoivat leijua
       eri korkeuksilla ilman että kumpikaan oli tärkeämpi.

       Nämä koskevat vain korkeutta. Kohdistusrenkaat, väriset hehkut,
       hiusviivat ja inset-korostukset eivät ole korkeutta eivätkä kulje
       näiden kautta. */
    /* ── Lomakekenttien värit ─────────────────────────────────────────
       Oletus on TUMMA. Ennen 1.10.2026 se oli vaalea, koska kentät
       rakennettiin aikanaan vaaleaan sovellukseen, ja jokainen tumma pinta
       joutui kumoamaan ne omalla säännöllään — ja se sääntö kirjoitettiin
       vasta kun joku huomasi mustan tekstin mustalla. Nyt tumma ei vaadi
       mitään, ja vaalea on se, joka sanoo itsensä (.np-view-light, joka ei
       ole ok-tumma).

       Sovelluksessa on yhä kahdeksan aidosti vaaleaa näkymää: Credits,
       Tilaus, Kutsu, Elokuvakrediitit, Avoin haku, Miehitys, Castinglista
       ja Avoimen haun hakemukset. Niiden kääntäminen tummiksi on oma
       päätöksensä, ei tämän muuttujan asia. */
    --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);

    --st-varjo-matala: 0 1px 3px rgba(0, 0, 0, 0.25);
    --st-varjo-nostettu: 0 8px 24px rgba(0, 0, 0, 0.35);
    --st-varjo-kelluva: 0 18px 50px rgba(0, 0, 0, 0.55);

    --st-line: rgba(255, 255, 255, 0.12);
    --st-line-strong: rgba(255, 255, 255, 0.24);
    --st-glass: rgba(255, 255, 255, 0.045);
    --st-text-dim: rgba(255, 255, 255, 0.55);
    --st-text-faint: rgba(255, 255, 255, 0.5); /* 0.35 jäi 3:1:een (kontrastikierros 5.10.2026) */
    --st-error: #ff8a7a;

    /* Tila jonka alapalkki vie vierivän sivun alta. Palkki on `position:
       fixed` eikä varaa itselleen tilaa, joten jokaisen vierivän sivun on
       varattava se itse. Luku on palkin korkeus (58px) + sen etäisyys
       alareunasta (0.9rem) + hengitysvara, ettei viimeinen nappi lepää
       palkkia vasten — juuri niin kävi ammattikortin poistonapille.

       Käytä tätä, älä kirjoita omaa lukua: aiemmin sama 5.5rem oli
       kirjoitettu 17 kertaan spa.html:n inline-tyyleihin, jolloin palkin
       korkeuden muutos olisi pitänyt muistaa 17 paikassa. */
    --st-alapalkki-tila: calc(6.6rem + env(safe-area-inset-bottom));
    /* Sovellus on tumma kaikkialla eikä sillä ole vaaleaa teemaa. Ilman tätä
       selain piirtää omat osansa — kalenteri- ja kellokuvakkeet, valitsimien
       pudotuslistat, vierityspalkit, lomakkeiden automaattitäytön taustan ja
       tekstin valinnan — käyttöjärjestelmän asetuksen mukaan, eli vaaleina
       tummalla pinnalla. Sitä paikattiin neljässä kohdassa erikseen
       (css/spa.css: saatavuuskenttä, kutsulomakkeen kello, kalustoarkki,
       ohjatun lomakkeen juuri) sen jälkeen kun joku huomasi mustan kuvakkeen
       mustalla. Tässä se sanotaan kerran. Tarkoituksella vaaleat pinnat
       kumoavat sen itse (ks. .sfm-panel). */
    color-scheme: dark;
}

.radio-menu {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    max-width: 24rem;
}

/* hide real radio but keep it accessible */
.radio-menu input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* label layout */
.radio-menu label {
    display: inline-flex;
    align-items: center;
    gap: var(--radio-gap);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    user-select: none;
    border-radius: 0.375rem;
    transition: background 0.12s ease, color 0.12s ease;
    color: var(--text-color);
    font-size: var(--label-font);
}

/* hover / focus look */
.radio-menu label:hover {
    background: rgba(255,255,255,0.04);
}

/* custom circle */
.radio-circle {
    width: var(--radio-size);
    height: var(--radio-size);
    min-width: var(--radio-size);
    border-radius: 50%;
    border: 0.12rem solid var(--text-color);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.12s ease, background 0.12s ease;
}

/* inner dot that appears when checked */
.radio-circle::after {
    content: "";
    width: calc(var(--radio-size) * 0.55);
    height: calc(var(--radio-size) * 0.55);
    border-radius: 50%;
    background: transparent;
    transform: scale(0);
    transition: transform 0.14s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

.radio-menu {
    margin-top:3rem;
}

/* checked state: scale the inner dot and optionally change border/background */
.radio-menu input[type="radio"]:checked + label .radio-circle {
    background: transparent;
}
.radio-menu input[type="radio"]:checked + label .radio-circle::after {
    background: white;      /* white filled circle */
    transform: scale(1.6);
}

/* keyboard focus ring on label when the radio has focus */
.radio-menu input[type="radio"]:focus + label {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.47);
    outline: none;
}

/* text styling */
.radio-label {
    color: var(--text-color);
    letter-spacing: -0.01rem;
}

/* optional: muted color for unselected labels */
.radio-menu input[type="radio"]:not(:checked) + label .radio-label {
    color: var(--muted);
}
.radio-menu input[type="radio"]:checked + label .radio-label {
    color: var(--text-color);
}


select.menu-select {
    display: block;
    width: 88%;
    max-width: 38rem;
    box-sizing: border-box;
    margin: 0.55rem auto 0;
    padding: 0.1rem 1rem;
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    cursor: pointer;
    height: 2.3rem;

    font-family: var(--st-font-body);
    letter-spacing: 0;

    /* remove ugly native arrow (for Chrome/Edge/Safari) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* optional: custom arrow using background */
    background-image: linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%);
    background-position: calc(100% - 1.2rem) center, calc(100% - 1rem) center;
    background-size: 0.4rem 0.4rem;
    background-repeat: no-repeat;
}

select.menu-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Syntymäaika: tietokoneella yksi päivämääräkenttä (createuser.html). */
.page-createuser .dob-pvm:not(#_) { display: none; }
@media (hover: hover) and (pointer: fine) {
    #dobValinnat { display: none !important; }
    .page-createuser .dob-pvm:not(#_):not(#_) { display: block; margin-top: 0 !important; color-scheme: dark; }
}

/* Vaihtoehdoille ei omaa tekstiväriä (testaaja 12.10.2026): Macin Safari
   piirtää valikon omalla vaalealla pohjallaan mutta noudatti valkoista
   tekstiä, ja syntymäajan päivät ja kuukaudet olivat näkymättömiä. Selain
   valitsee nyt itse luettavan parin (color-scheme). */
select.menu-select { color-scheme: dark; }



.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    will-change: transform, opacity;
}

/* Active panel */
.panel--left {
    transform: translateX(0);
    opacity: 1;
    z-index: 5;
}

/* Off-screen to the right */
.panel--right {
    transform: translateX(100%);
    opacity: 0;
    z-index: 4;
}

/* Moving out to the left */
.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 3;
}

/* Moving in from the right */
.slide-in {
    transform: translateX(0);
    opacity: 1;
    z-index: 6;
}

.forward-btn {
    position: fixed;
    bottom: 10rem;
    right: 1rem;
    color: white;
    font-size: 3rem;
    text-decoration: none;
    z-index: 9999; /* <— Add this line */
    pointer-events: auto;
}


/* poster grid */
.poster-grid{display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.5rem;}
.poster-upload{
    width:100px;height:140px;border:2px dashed rgba(255,255,255,0.18);
    display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:var(--fg);
    cursor:pointer;border-radius:6px;position:relative;overflow:hidden;background:transparent;
}
.poster-grid img{width:100px;height:140px;object-fit:cover;border-radius:6px;display:block;}
.poster-item{position:relative;}


.newproject {
    width: 80px;                /* change to whatever diameter you want */
    height: 80px;               /* same as width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;     /* visible border, center stays transparent */
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}


.newproject2 {
    width: 20px;                /* change to whatever diameter you want */
    height: 20px;               /* same as width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;     /* visible border, center stays transparent */
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    font-size: 1rem;
    text-align:center;
}


.newprojectfooter {
    position: absolute;       /* ← REQUIRED for bottom to work */
    bottom: 8rem;             /* now it actually applies */
    left: 50%;
    transform: translateX(-50%);  /* centers it horizontally */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: white;
    font-size: 4rem;
}

.arial {
    font-family: 'Arial Black', Arial, sans-serif !important;
    letter-spacing:0 !important;
    font-weight:normal !important;
}

/* ── Create User Page ───────────────────────────────────────────────── */
body.page-createuser {
    font-family: var(--st-font-body);
    background-color: #05070d;
    background-image: none;
    min-height: 100vh;
    /* Ei pystykeskitystä. Lomake on yksitoista riviä pitkä eikä mahdu
       puhelimen ruudulle, ja keskitetty flex-asettelu työnsi sen yläreunan
       ruudun ulkopuolelle paikkaan, johon ei päässyt vierittämällä:
       "stormi" ja sivun otsikko olivat poissa, eikä mikään kertonut että
       niitä on. (`safe center` ei korjannut tätä, koska ylivuotava osuus ei
       kasvattanut vieritysaluetta.) Tavallinen lohkoasettelu vierittyy
       oikein, ja sivun hengitys tulee täytteestä. */
    display: block;
    /* Korkeus auto: jokin yleissääntö lukitsee bodyn ruudun korkuiseksi ja
       tekee siitä oman vierityssäiliönsä, jolloin sen alatäyte jää
       vieritysalueen ulkopuolelle eikä viimeinen nappi yllä ruudulle asti.
       Tällä sivulla body saa kasvaa sisältönsä mukaan. */
    height: auto;
    padding: 0;
}
/* Alatila sisältöön eikä bodyyn: bodyn oma täyte ei kasvata vieritysaluetta. */
.page-createuser #part2 { padding-bottom: 3.5rem; }
/* Lomake mahtuu 375x812-ruudulle kokonaan; alla vain nappia irrottava ilma
   (container margin-bottom), ettei tyhjää jää vieritettäväksi. */
.page-createuser #part1 { padding-bottom: 0; }
/* Luo tili has many stacked rows — the photo carousel behind them (see
   .ws-bg-slides below) reads as clutter with that much on screen, unlike the
   welcome screen's single centered block. Plain dark background instead
   (body already sets background-color: #05070d above). */
body.page-createuser .ws-bg-slides,
body.page-createuser .ws-bg-scrim {
    display: none;
}
.page-createuser .container {
    margin: 2rem auto;
}
#dobDay, #dobMonth, #dobYear {
    min-width: 0;
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    padding: 0.1rem 1.05rem 0.1rem 0.4rem !important;
    background-position: calc(100% - 0.55rem) center, calc(100% - 0.4rem) center;
    background-size: 0.32rem 0.32rem;
}
.page-createuser input[name="email"] {
    margin-top: 1.8rem !important;
}
.page-createuser header {
    color: #fff;
    padding: 0 1rem 1.6rem;
    text-align: center;
    /* Logo samalle korkeudelle kuin paluunappi (.ws-back-btn: top 1.2rem,
       korkeus 2.2rem), jotta koko lomake mahtuu puhelimen ruudulle. */
    margin-top: 1.2rem;
}
.page-createuser .cu-logo {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 2.2rem;
    letter-spacing: -0.08rem;
    color: #fff;
    margin-bottom: 0.6rem;
}
.page-createuser .container {
    margin: 0 auto 1.8rem;
    border-radius: 12px;
    box-shadow: var(--st-varjo-matala);
}

/* ── Luo tili: ilmaa riveihin ───────────────────────────────────────────
   Lomakkeessa on yksitoista riviä peräkkäin, ja ne olivat 0,55 rem päässä
   toisistaan — sivu näytti seinältä, jonka täyttäminen on urakka. Rivivälin
   kasvattaminen ei poista yhtään riviä mutta tekee niistä yksi kerrallaan
   täytettäviä.

   Erottelu on ryhmissä eikä viivoissa: kuka olet, missä olet, miten
   kirjaudut. Suurempi väli ryhmän edessä riittää, eikä sivulle tarvitse
   piirtää ruutuja. */
.page-createuser .menu-input,
.page-createuser .menu-select { margin-top: 0.85rem; }
.page-createuser input[name="country"] { margin-top: 1.5rem !important; }
.page-createuser input[name="email"] { margin-top: 1.5rem !important; }
.page-createuser .salasana-ohje { margin-top: 0.7rem; }
.page-createuser header { padding-bottom: 1.3rem; }

/* Linkit lomakkeen sisällä: sovelluksen korostussininen. Vaalea alleviivaus
   luettiin haalistuneeksi tekstiksi, eikä siitä nähnyt että sen takana on
   luettavaa. */
.page-createuser a {
    color: var(--st-accent);
    text-decoration-color: rgba(91, 127, 224, 0.5);
    text-underline-offset: 0.15em;
}
.page-createuser a:hover { text-decoration-color: var(--st-accent); }

/* Lähetysnappi irti alareunasta: se oli kiinni ruudun pohjassa, jolloin
   viimeinen täppä ja nappi olivat samassa kasassa eikä lomakkeen loppumista
   erottanut mistään. */
.page-createuser .container2 { padding: 1.3rem 1rem 0 !important; }
.page-createuser #createSubmitBtn { margin-top: 0.4rem !important; }


/* Ikärajan info-nappi: näkyvä ympyrä on pieni, mutta painettava ala 32 px
   (negatiivinen marginaali pitää rivin korkeuden ennallaan). */
.cu-info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -0.55rem -0.4rem -0.55rem 0;
    padding: 0;
    vertical-align: middle;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.8);
    font: 700 0.8rem/1 Georgia, 'Times New Roman', serif;
    font-style: italic;
    cursor: pointer;
}
.cu-info-btn::before {
    content: '';
    position: absolute;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.cu-info-btn[aria-expanded="true"] { color: #fff; }
.cu-info-btn[aria-expanded="true"]::before { border-color: var(--st-accent); background: rgba(91, 127, 224, 0.25); }
.cu-info-teksti {
    width: 88%;
    max-width: 38rem;
    margin: 0.45rem auto 0;
    padding-left: 1.55rem;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    line-height: 1.45;
}
.cu-info-teksti[hidden] { display: none; }

/* Tuntematon paikkakunta — kerrotaan kentän alla eikä lomakkeen lopussa. */
.cu-vihje {
    width: 88%;
    max-width: 38rem;
    margin: 0.4rem auto 0;
    color: #ff8a7a;
    font-size: 0.8rem;
    line-height: 1.45;
}
.page-createuser h1 {
    text-align: center;
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}
.page-createuser select,
.page-createuser input {
    width: 88%;
    max-width: 38rem !important;
    box-sizing: border-box;
    margin: 0.55rem auto 0 !important;
}
.page-createuser input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
    margin: 0.15rem 0 0 !important;
    flex-shrink: 0;
}

/* ── Login Page — redesigned (2026), see --st-* tokens above ──────────── */
body.page-login {
    height: 100vh;
    height: 100dvh; /* mobile Safari's 100vh includes the address bar's
                       collapsed state, so it can be taller than what's
                       actually visible — 100dvh tracks the real viewport
                       and is what stops the page from "rocking". */
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--st-text);
    background: var(--st-bg-soft);
    background-color: var(--st-bg);
}
#title {
    font-family: var(--st-font-display);
    font-size: 3rem;
    letter-spacing: -0.15rem;
    margin-bottom: 0.4rem;
}
#loginlable {
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--st-text-muted);
    margin-bottom: 1.6rem;
}
#titlediv {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    width: 88%;
    max-width: 38rem;
}
#loginForm {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}
.trinput {
    position: relative;
    font-family: var(--st-font-body);
    font-size: 1rem; /* iOS Safari auto-zooms a focused field under 16px */
    font-weight: 400;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    padding: 0 1.1rem;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    height: 2.3rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}
.trinput:focus {
    border-color: var(--st-accent);
}
.trinput::placeholder {
    font-size: 0.92rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.55);
    text-align: left;
    opacity: 1;
}
#createaccountbutton.nav-link {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1e2b;
    background: #fff;
    border-radius: var(--st-radius-pill);
    padding: 0.75rem 2rem;
    margin-top: 0.6rem;
    box-shadow: none;
    width: auto;
    align-self: center;
}
#createaccountbutton.nav-link::before,
#createaccountbutton.nav-link::after {
    display: none;
}
#social-login {
    display: flex;
    flex-direction: row;
    gap: 0.7rem;
    margin-top: 0.3rem;
    margin-bottom: 2.4rem;
}
.social-icon {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--st-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
}
.social-icon svg {
    width: 70%;
    height: 70%;
}
.social-icon.instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.social-icon.facebook { background: #1877f2; }
.social-icon.google   { background: white; }

/* ── Welcome / landing screen (Vinted-inspired) ────────────────────────── */
#welcomeScreen {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}
body.page-login .ws-bg-slides,
body.page-login .ws-bg-scrim {
    position: fixed;
}
.ws-bg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.ws-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
    filter: brightness(0.5) saturate(0.9);
}
.ws-bg-slide.active { opacity: 1; }
.ws-bg-slide-1 { background-image: url('../img/landing/role_laulaja.jpg'); }
.ws-bg-slide-2 { background-image: url('../img/landing/user_tanssija.jpg'); }
.ws-bg-slide-3 { background-image: url('../img/landing/user_valokuvaaja.jpg'); }
.ws-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(3, 4, 9, 0.35) 0%, rgba(3, 4, 9, 0.15) 30%, rgba(3, 4, 9, 0.45) 50%, rgba(3, 4, 9, 0.15) 70%, rgba(3, 4, 9, 0.4) 100%);
    pointer-events: none;
}

.ws-tag {
    position: absolute;
    font-family: var(--st-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--st-text-muted);
    background: rgba(5, 7, 13, 0.72);
    padding: 0.22rem 0.55rem;
    border-radius: var(--st-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    pointer-events: none;
}
.ws-tag-users     { top: -2px; left: 2px; }
.ws-tag-locations { bottom: -2px; right: 2px; }
.ws-tag-projects  { top: -2px; right: 2px; }
.ws-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 86%;
    max-width: 320px;
}
#wsTitle {
    font-family: var(--st-font-display);
    font-size: 4.2rem;
    letter-spacing: -0.2rem;
    color: var(--st-text);
    margin-top: 0.6rem;
}
/* Saman levyinen kuin napit ja reunat tasattuna niiden kanssa (käyttäjä
   12.10.2026): ennen teksti oli nappeja leveämpi. Viimeinen rivi keskelle. */
#wsLause {
    margin: 0.5rem 0 0;
    width: 100%;
    max-width: 260px;
    text-align: justify;
    text-align-last: center;
    -webkit-hyphens: auto;
    hyphens: auto;
    font: 400 0.95rem/1.45 var(--st-font-body);
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.ws-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    max-width: 260px;
    margin-top: 1.6rem;
}
.ws-btn {
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--st-text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#wsLangBtn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    border-radius: var(--st-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--st-text);
    font-family: var(--st-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
}
#wsLangBtn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
#wsLangChevron {
    width: 11px !important;
    height: 11px !important;
    margin-left: 0.1rem;
    transition: transform 0.15s ease;
}
#wsLangBtn[aria-expanded="true"] #wsLangChevron { transform: rotate(180deg); }
.ws-lang-menu {
    display: none;
    position: fixed;
    top: 3.6rem;
    left: 1.2rem;
    min-width: 8.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    z-index: 6;
    box-shadow: var(--st-varjo-nostettu);
}
.ws-lang-menu.open { display: block; }
.ws-lang-option {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.9rem;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--st-text);
    font-family: var(--st-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.ws-lang-option:first-child { border-top: none; }
.ws-lang-option:hover,
.ws-lang-option.active { background: rgba(255, 255, 255, 0.1); }
.ws-lang-option.active { font-weight: 700; }
.ws-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--st-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}
#wsBackBtn { display: none; }

/* Etusivu alert banner ("häly") — dark panel with gold accent, matching theme */
.haly-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #141a2e;
    border-left: 4px solid #efc239;
    color: #f4f4f5;
    padding: 0.75rem 1rem;
    font-family: var(--st-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
}
.haly-banner-text { flex: 1; letter-spacing: normal; }
.haly-banner-close {
    background: none;
    border: none;
    color: #efc239;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

/* Toggle row (label + iOS-style switch). Shared by the signup form (createuser.html,
   which only loads this stylesheet) and the SPA, where spa.css mirrors these rules.
   Keeps the label white and on the same line as the switch. */
.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;
    flex-shrink: 0;
}
.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); }

/* Uuden salasanan ohje ja näytä/piilota-nappi (js/salasana.js). Nappi on
   tekstilinkki kentän alla eikä ikoni kentän sisällä: kentillä on kolmessa
   kohdassa eri tyylit, eikä kenttää kääritä. */
.salasana-ohje {
    max-width: 19rem;
    margin: 0.45rem auto 0;
    /* Ilman omaa fonttia tämä peri rungon Arial Blackin, jolloin
       salasanaohje oli lihavampi kuin kenttä jota se neuvoo. Arial Black
       kuuluu vain sivun yläotsikkoon. */
    font-family: var(--st-font-body);
    font-weight: 300;
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}
.salasana-naytto {
    display: block;
    margin: 0.45rem auto 0;
    padding: 0.2rem 0.4rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}
.salasana-naytto:hover { color: #fff; }
/* Kirjautumis- ja rekisteröitymissivut ovat tummia valkoisella tekstillä,
   mutta runko on musta, joten väri annetaan suoraan. Sovelluksen
   lomakesivuilla (.np-view-light) teksti seuraa sivun omaa väriä, jonka
   teemanvaihto kääntää. */
.np-view-light .salasana-ohje { color: inherit; opacity: 0.7; }
.np-view-light .salasana-naytto { color: inherit; opacity: 0.8; }
.np-view-light .salasana-naytto:hover { opacity: 1; }

/* Painalluksen palaute: kortti painuu hetkeksi sisään. Napautuksen ja sivun
   avautumisen väliin jää aina verkkoviive, ja ilman palautetta se tuntuu
   siltä ettei napautus mennyt perille. Kevyt ja lyhyt — tämä ei ole efekti
   vaan kuittaus. */
.feed-card,
.feed-card-poster,
.feed-card-wide {
    transition: transform 140ms ease;
}
.feed-card:active,
.feed-card-poster:active,
.feed-card-wide:active {
    transform: scale(0.965);
}

@media (prefers-reduced-motion: reduce) {
    .feed.uutisvirta { scroll-behavior: auto; scroll-snap-type: none; }
    .feed-card,
    .feed-card-poster,
    .feed-card-wide { transition: none; }
    .feed-card:active,
    .feed-card-poster:active,
    .feed-card-wide:active { transform: none; }
}

/* Karusellin porrastettu ilmestyminen (renderFeed). animation-fill-mode on
   backwards eikä both: viiveen ajan kortti on alkutilassa, mutta animaation
   jälkeen se palaa tavallisiin tyyleihinsä — muuten lopputilan
   transform: none jäisi päälle ja söisi napautuksen painallusefektin. */
@keyframes feed-ilmesty {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.feed-ilmestyy > * {
    animation: feed-ilmesty 260ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: var(--feed-viive, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .feed-ilmestyy > * { animation: none; }
}

/* ── Kirjautumissivu tietokoneella (≥1024px, 9.10.2026) ─────────────────
 * Logo, napit ja lomake pysyvät keskellä ruutua kuten puhelimessa
 * (käyttäjä 9.10.2026: "tekstit ja palkit kaikki keskellä näyttöä").
 * Vain taustakuva muuttuu: leveällä ruudulla koko ruudun kuva venyi ja
 * tummui tasaisesti. Nyt kuva on keskitetty vasemmalle puoliskolle ja
 * häivyttyy oikealle sovelluksen tummansiniseen pohjaan. Kirjautumissivu
 * ei lataa tyopoyta.css:ää, joten säännöt ovat täällä. */
@media (min-width: 1024px) {
    body.page-login { background: var(--st-bg); }
    body.page-login .ws-bg-slides {
        inset: 0 auto 0 0;
        width: 72vw;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
    }
    body.page-login .ws-bg-slide {
        background-position: center 30%;
        filter: brightness(0.62) saturate(0.95);
    }
    /* Kevyt tummennus vain ylä- ja alareunaan; oikean puolen hoitaa maski. */
    body.page-login .ws-bg-scrim {
        background: linear-gradient(180deg, rgba(3, 4, 9, 0.3) 0%, rgba(3, 4, 9, 0) 25%, rgba(3, 4, 9, 0) 75%, rgba(3, 4, 9, 0.4) 100%);
    }
    body.page-login #wsTitle { font-size: 5rem; }
    body.page-login .ws-buttons { gap: 0.8rem; margin-top: 2rem; }
    body.page-login .ws-btn { padding: 1rem 1.5rem; font-size: 1rem; border-radius: 12px; }
    body.page-login .ws-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
    body.page-login #loginForm .trinput,
    body.page-login #forgotPasswordPanel .trinput { min-height: 46px; font-size: 1rem; }
}

/* Kaupunkikenttä (js/filkka.js kaupunkiKentta, 10.10.2026): napautettavat
   ehdotukset kentän alla. Tumma pinta kuten sovelluksen lomakkeissa. */
.kaupunki-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;
    text-align: left;
}
.kaupunki-ehdotukset[hidden] { display: none; }
.kaupunki-ehdotus {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    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, Arial, sans-serif);
    letter-spacing: normal;
    text-align: left;
    cursor: pointer;
}
.kaupunki-ehdotus:hover,
.kaupunki-ehdotus.kaupunki-korostettu { background: rgba(91, 127, 224, 0.2); }
.kaupunki-ehdotus-maakunta { color: #8a8f9a; font-size: 0.8rem; }
.kaupunki-ohje {
    margin: 0.35rem 0 0;
    color: var(--st-error, #ff8a8a);
    font: 400 0.85rem/1.4 var(--st-font-body, Arial, sans-serif);
    letter-spacing: normal;
    text-align: left;
}
.kaupunki-ohje[hidden] { display: none; }
input.kaupunki-virhe { border-color: var(--st-error, #ff8a8a) !important; }
/* Rekisteröitymissivulla kentät ovat keskitettyjä ja kapeampia kuin lomake:
   ehdotukset ja ohje samaan linjaan kentän kanssa. */
.menu-input + .kaupunki-ehdotukset,
.menu-input + .kaupunki-ehdotukset + .kaupunki-ohje {
    box-sizing: border-box;
    width: 88%;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

/* GeoNames-lähdemaininta ulkomaan kaupunkikentän alla (palaute 12.10.2026). */
.paikka-lahde { margin: 0.35rem auto 0.6rem; text-align: center; font-size: 0.75rem; letter-spacing: normal; color: #8a8f9a; }
.paikka-lahde a { color: inherit; }