/* Vierityspalkin palsta varataan aina. Ilman tätä lyhyt sivu (esim. Tietoa)
   on ilman vierityspalkkia ja pitkä sivu sen kanssa, jolloin sivua vaihtaessa
   KOKO sisältö siirtyy vaakasuunnassa ~15 px. Juuri se näkyi nytkähdyksenä. */
html { scrollbar-gutter: stable; }

/* Vierityspalkin LEVEYS on osa sivun leveyttä, joten sen on oltava sama joka
   sivulla. style.css määrittelee 10 px palkin, mutta Tietoa-sivu ei lataa
   style.css:ää lainkaan (sillä on oma sisäinen tyylinsä) — se sai siis
   käyttöjärjestelmän oletuspalkin, 15 px.

   Selaimesta mitattuna: Tietoa-sivun sisältöleveys 1905 px, AdStudion 1910 px.
   Viiden pikselin ero siirsi joka sivunvaihdossa kaikkea oikeaan reunaan
   sidottua — juuri se oli jäljellä ollut nytkähdys.

   Arvot ovat samat kuin style.css:ssä (rivit ~925-932). Ne on toistettava
   täällä, koska osa sivuista lataa vain toisen tiedostoista; jos toista
   muutetaan, myös tämä on päivitettävä. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #131019; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b57bff, #ff6ec7);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c795ff, #ff8fd3); }
* { scrollbar-width: thin; scrollbar-color: #b57bff #131019; }

/* Yhteisen yläpalkin tyylit. Pari kuuluu pd-nav.js:n kanssa.
 *
 * KAIKKI säännöt on rajattu #pdNav-tunnisteen alle. Syy: About-sivulla on oma
 * sisäinen tyylinsä eikä style.css:ää lainkaan, ja siellä on omat .nav-,
 * .brand- ja .btn-määrittelynsä. Rajaamattomat säännöt joko rikkoisivat sivun
 * muun ulkoasun tai häviäisivät sille. Tunnisteeseen sidottu sääntö voittaa
 * luokkasäännön kaikkialla, eikä se voi vuotaa palkin ulkopuolelle.
 */

#pdNav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: auto; max-width: none; min-height: 0;
  margin: 0;
  padding: 18px clamp(20px, 5vw, 64px);
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 10, 16, 0.92);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12));
  font-family: inherit;
}

#pdNav .nav-primary {
  display: flex; align-items: center; min-width: 0;
  gap: clamp(10px, 2vw, 20px);
}
#pdNav .brand {
  display: inline-flex; align-items: center;
  font-size: 17px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent, #b57bff); text-decoration: none;
  white-space: nowrap;
}

/* Sivun nimikyltti brändin vieressä: kertoo missä ollaan, kun kaikki sivut
   muuten näyttävät samalta. Etusivulla kylttiä ei ole. */
/* Kyltin leveys on KIINTEÄ, ei sisällön mukainen.
 *
 * Syy mitattiin omistajan ruutunauhoitteesta: kyltti on brändin ja
 * Tietoa-linkin VÄLISSÄ, joten sen leveys siirtää kaikkea oikealla puolellaan.
 * Sivunvaihdossa Affiliate → Tietoa kyltti kapeni AFFILIATE → TIETOA ja
 * "Tietoa"-linkki hyppäsi 19,6 px vasemmalle yhden ruudun aikana (16,7 ms).
 * Juuri se tuntui nytkähdyksenä.
 *
 * 92 px kattaa pisimmän kyltin: AFFILIATE ja ACERCA DE (9 merkkiä) mittasivat
 * ~88 px laatikkona. Teksti keskitetään, jolloin lyhyemmätkin näyttävät
 * tasapainoisilta ja mikään ei liiku sivujen välillä.
 */
/* Kaikki mahdolliset kyltit ovat samassa ruudukkosolussa päällekkäin: näkyvä
   teksti ja näkymättömät "haamut". Solun leveys on siten aina levein niistä,
   sivusta ja kielestä riippumatta — selain laskee sen itse eikä pikselimäärää
   tarvitse arvata eikä ylläpitää. Ilman tätä kyltin leveys vaihtui sivuittain
   ja siirsi kaiken oikealla puolellaan (mitattu 19-21 px joka sivunvaihdossa). */
#pdNav .nav-page {
  display: inline-grid; align-items: center; justify-items: center;
  white-space: nowrap; box-sizing: border-box;
  font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent, #b57bff);
  border: 1px solid rgba(181, 123, 255, .35);
  padding: 4px 10px; border-radius: 999px;
}
#pdNav .nav-page > * { grid-area: 1 / 1; }
#pdNav .nav-page-ghost { visibility: hidden; pointer-events: none; }

#pdNav .nav-about {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 9px; border-radius: 10px;
  color: var(--muted, #a79fbb); font-size: 13px; font-weight: 750;
  white-space: nowrap; text-decoration: none;
}
#pdNav .nav-about:hover,
#pdNav .nav-about:focus-visible { color: var(--text, #f2eefc); background: rgba(181, 123, 255, .10); }

#pdNav .nav-right { display: flex; align-items: center; gap: 14px; }

#pdNav .balance { font-size: 14px; color: var(--muted, #a79fbb); white-space: nowrap; }
#pdNav .balance b { color: var(--accent, #b57bff); font-size: 16px; }

#pdNav .btn-mini,
#pdNav .btn-affiliate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  background: var(--bg2, #16121f); color: var(--text, #f2eefc);
  font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, filter .2s, transform .15s;
}
#pdNav .btn-mini:hover { border-color: rgba(181, 123, 255, .55); }

#pdNav .btn-accent {
  border-color: transparent; color: #140a1f;
  background: linear-gradient(90deg, var(--accent, #b57bff), var(--accent2, #ff6ec7));
}
#pdNav .btn-affiliate {
  border-color: transparent; color: #140a1f; font-weight: 700;
  background: linear-gradient(90deg, var(--accent, #b57bff), var(--accent2, #ff6ec7));
}
#pdNav .btn-affiliate:hover { transform: translateY(-1px); filter: brightness(1.08); }

#pdNav .btn-adstudio {
  border-color: rgba(255, 176, 32, .45);
  background: rgba(255, 176, 32, .12); color: #ffe0a8;
}
#pdNav .btn-adstudio:hover { border-color: rgba(255, 176, 32, .8); }

#pdNav .btn-pixlook {
  border-color: rgba(181, 123, 255, .45);
  background: rgba(181, 123, 255, .12); color: #eadcff;
}
/* Merkin JOKAINEN mittaan vaikuttava ominaisuus on määriteltävä tässä, myös
   reunus. Aiemmin reunus puuttui, jolloin style.css:n `border: 1px solid`
   päätyi voimaan niillä sivuilla jotka lataavat sen — ja Tietoa-sivulla, joka
   ei lataa, merkki oli 2 px kapeampi. Selaimesta mitattuna PixLook-nappi oli
   171,1 px AdStudiossa ja 169,1 px Tietoa-sivulla, ja tuo ero siirsi koko
   nappirivin vasenta puolta 2 px joka sivunvaihdossa.
   Arvot vastaavat style.css:ää, jotta ulkoasu pysyy samana. */
#pdNav .pixlook-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07); color: #b6b0c4;
}

/* Ylärivin linkki omalle sivulle: näkyy yhä, muttei houkuttele klikkaamaan. */
#pdNav .nav-here { opacity: .5; pointer-events: none; }

#pdNav .user-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text, #f2eefc); white-space: nowrap;
}
#pdNav .user-chip b { font-weight: 700; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
#pdNav .avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
#pdNav .avatar-letter {
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(181, 123, 255, .5), rgba(255, 110, 199, .35));
  color: #fff; font-size: 13px; font-weight: 800;
}

/* Puhelin: nappirivi saa rivittyä eikä palkki saa työntää sivua vaakasuunnassa. */
@media (max-width: 720px) {
  #pdNav { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  #pdNav .nav-right { gap: 6px; row-gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  #pdNav .btn-mini,
  #pdNav .btn-affiliate { padding: 7px 10px; font-size: 12px; }
  #pdNav .bal-unit { display: none; }
  #pdNav .user-chip b { max-width: 9ch; }
}

/* --- nytkähdyksen esto sivunvaihdossa ------------------------------------
 * Palkki rakentui kolmessa vaiheessa ja jokainen vaihe muutti leveyksiä:
 * renderöinti englanniksi, käännös (+~50 px) ja tilitietojen saapuminen
 * (+~72 px). Koska oikea laita on oikeaan reunaan kiinnitetty, jokainen
 * levennys työnsi koko rivin vasemmalle. Käännös tehdään nyt heti
 * renderöinnin yhteydessä; loput hoidetaan varaamalla tila etukäteen.
 */

/* Tyhjä paikanvaraaja on saman korkuinen kuin valmis palkki, joten sivu ei
   hyppää pystysuunnassa vaikka skripti viivästyisi. */
#pdNav { min-height: 73px; box-sizing: border-box; }

/* Saldo saapuu vasta tilihaun jälkeen. Varattu leveys pitää naapurit
   paikallaan riippumatta siitä onko luku "150", "13 000" vai "∞". */
#pdNav .balance {
  display: inline-block; min-width: 116px; text-align: right;
}

/* Kirjautumisnappi ja käyttäjäsiru vaihtavat paikkaa keskenään kun tili
   selviää. Yhteinen kääre varaa tilan, joten vaihto ei liikuta muita. */
#pdNav .nav-account {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 150px;
}

@media (max-width: 720px) {
  #pdNav { min-height: 0; }
  #pdNav .balance { min-width: 0; }
  #pdNav .nav-account { min-width: 0; }
}

/* Arabia: palkki peilautuu, mutta saldon luku ja brändi eivät. Ks. style.css. */
[dir="rtl"] #pdNav .balance,
[dir="rtl"] #pdNav .brand { direction: ltr; unicode-bidi: isolate; }
/* Saldo on oikeaan tasattu LTR-asettelussa; peilatussa se tasataan vasemmalle,
   jotta luku on aina lähinnä sitä reunaa josta rivi alkaa. */
[dir="rtl"] #pdNav .balance { text-align: left; }