/* =========================================================
   Uudet-tyopaikat.com
   Järjestelmäfontit tarkoituksella: webfontti maksaisi n. 100 kt
   ja viivästyttäisi tekstin näkymistä. Ei myöskään ulkoisia
   CSS-tiedostoja, jotta latausketju pysyy yhtenä pyyntönä.
   ========================================================= */

:root {
  --brand:        #0b5cab;
  --brand-dark:   #08447f;
  --brand-tint:   #eaf2fb;
  --accent:       #007a51;   /* 5,0:1 vaalealla taustalla */
  --accent-tint:  #e6f4ef;

  /* Logon värit. Sininen = tieto ja data, oranssi = toiminta ja tuoreus,
     vihreä = sisältö ja uutuus (työpaikkakortit). */
  --logo-blue:    #024fa2;
  --orange:       #f28214;
  --orange-dark:  #a85408;   /* 4,9:1 vaalealla taustalla */
  --orange-tint:  #fff3e6;
  --orange-line:  #f6d3ae;
  --korostus:     #fcd9ae;   /* laskurin korostus; tekstin kontrasti 12,3:1 */

  --ink:          #16202b;
  --ink-soft:     #3d4d5c;
  --muted:        #5b6776;   /* 5,1:1 myös sinertävällä sävytaustalla */
  --line:         #e3e8ef;
  --line-soft:    #eef2f6;
  --bg:           #f4f6f9;
  --card:         #ffffff;

  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(16,32,48,.06), 0 2px 8px rgba(16,32,48,.04);
  --shadow-lift:  0 2px 6px rgba(16,32,48,.09), 0 8px 24px rgba(16,32,48,.07);

  --wrap:         1180px;
  color-scheme:   light;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }

.small { font-size: .82rem; color: var(--muted); }

/* =========================================================
   Rakenne
   ========================================================= */

#pagewrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px 48px; }

#header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
  margin: 0 0 20px;
  padding: 25px 0;
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 20px;
}
#header .logo { margin: 0; line-height: 0; }
#header img { display: block; max-width: 240px; height: auto; }

.mainnav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.mainnav a {
  padding: 7px 12px; border-radius: 999px; font-size: .9rem;
  font-weight: 550; color: var(--ink-soft);
}
.mainnav a:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }

.vain-kapea { display: none; }

#contentwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
#middle { min-width: 0; }
#right { position: sticky; top: 76px; }
#left { display: none; }   /* vasen palsta korvattu listan sisäisellä mainoksella */

/* =========================================================
   Murupolku
   ========================================================= */

.murupolku {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 14px; font-size: .82rem; color: var(--muted);
}
.murupolku a { color: var(--muted); }
.murupolku a:hover { color: var(--brand); }
.murupolku span { color: var(--ink-soft); font-weight: 550; }

/* =========================================================
   Sivun kärki
   ========================================================= */

.hero { margin: 0 0 20px; }
.hero h1 { margin-bottom: 10px; }
/* Karjen rivi on kaksi lausetta, ei otsikko ja alaotsikko. Siksi ne ovat
   samankokoisia: eri koko teki paivitysajasta "subin", vaikka se on yhta
   tarkea tieto kuin maara. Kapealla naytolla ne kaareytyvat omille
   riveilleen itsestaan - siella kahden lauseen erottelu on hyva. */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  font-size: .9rem; color: var(--muted);
}

/* Listasivun karki on oma valkoinen osionsa, joka jatkuu saumatta
   hakukenttaan. Aiemmin otsikko, laskuri ja haku leijuivat irrallaan
   harmaalla taustalla: kolme palaa, joilla on yksi tehtava.

   Oma luokka eika .hero, koska .hero on kaytossa myos ilmoitus-,
   palkka- ja UKK-sivuilla, joilla hakukenttaa ei tule perasta. */
.hero-paneeli {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding: 20px 20px 16px;
  /* Sama varjo kuin hakulohkolla, muuten sauma nakyisi varjon reunana. */
  box-shadow: var(--shadow);
}
.hero-paneeli h1 { margin-top: 0; }
/* Suodatinlohko jaa pois pienilta sivuilta. Silloin paneeli sulkeutuu
   itse, muuten sen alareuna jaisi auki. */
.hero-paneeli:last-child,
.hero-paneeli:not(:has(+ .suodattimet)) {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
}
/* Karki ja haku ovat yksi valkoinen lohko: ei saumaa valiin. */
.hero-paneeli + .suodattimet {
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Laskuri oli vaaleanvihrea pilleri tummanvihrealla tekstilla. Pilleri
   on kayttoliittyman merkki - se lupaa painiketta tai tilaa - eika tama
   ole kumpaakaan vaan lause. Pelkka teksti, jossa luku on korostettu,
   nayttaa silta mita se on: tuoretta tietoa. Vihrea piste jaa, se on
   ainoa tuoreuden merkki jota tarvitaan. */
.hero-count {
  display: inline-block;
  color: var(--ink-soft);
  /* Koko peritaan .hero-metalta: lauseet ovat samanarvoisia. */
  font-weight: 500;
}
.hero-count b { font-weight: 800; color: var(--ink); }
.tuore-piste {
  display: inline-block; vertical-align: 0.1em; margin-right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* =========================================================
   Suodattimet
   ========================================================= */

.suodattimet {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin: 0 0 22px;
}
.suodatin-rivi {
  display: grid; gap: 16px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kentta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kentta > label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

.kentta select {
  appearance: none;
  width: 100%; padding: 11px 38px 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 13px center;
  font: inherit; font-size: .95rem; color: var(--ink); cursor: pointer;
}
.kentta select:hover { border-color: #cbd5e1; }

/* Segmentoitu valinta – nopeampi kuin pudotusvalikko kahdelle vaihtoehdolle */
.segmentti { display: flex; flex-wrap: wrap; gap: 6px; }
.segmentti a {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 550; color: var(--ink-soft); background: #fff;
  white-space: nowrap;
}
.segmentti a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.segmentti a[aria-current="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.lisarajaukset { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.lisarajaukset summary {
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.lisarajaukset summary::-webkit-details-marker { display: none; }
.lisarajaukset summary::before { content: "＋"; font-weight: 700; }
.lisarajaukset[open] summary::before { content: "－"; }
.lisarajaukset .suodatin-rivi { margin-top: 14px; }

/* Aktiiviset rajaukset omalla rivillään lomakkeen alla */
.rajaus-aktiivinen {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: .92rem; color: var(--ink-soft);
}
.rajaus-aktiivinen span { margin: 0 4px; color: var(--line); }


/* =========================================================
   Työpaikkakortit
   ========================================================= */

.tyopaikat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.tyopaikka {
  /* Selain saa ohittaa näkymän ulkopuoliset kortit – nopeuttaa
     renderöintiä kun sivulla on sata ilmoitusta. */
  content-visibility: auto;
  contain-intrinsic-size: auto 104px;

  position: relative;
  background: var(--card); border: 1px solid var(--line);
  /* Reuna on aina brändin sininen. Vihreä merkitsi aiemmin alle
     vuorokauden vanhaa ilmoitusta, mutta lista on järjestetty
     uusimmasta: ensimmäisellä sivulla jokainen kortti oli tuore ja
     siis vihreä, jolloin väri ei erottanut mitään mistään. Tuoreus
     kerrotaan "Uusi"-täpällä, joka näkyy vain siellä missä se on
     poikkeus. Oranssi on varattu toiminnolle (hakuvahdin nappi). */
  border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 15px 17px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.tyopaikka:hover {
  border-color: #c7d7ea;
  border-left-color: var(--brand-dark);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.tyopaikka-otsikko { font-size: 1.02rem; font-weight: 650; line-height: 1.35; margin: 0 0 6px; }
.tyopaikka-otsikko a { color: var(--ink); }
/* Koko kortti klikattavaksi ilman sisäkkäisiä linkkejä */
.tyopaikka-otsikko a::after { content: ""; position: absolute; inset: 0; }
.tyopaikka-otsikko a:hover { color: var(--brand); text-decoration: none; }

/* Metarivi ei saa rivittya. Ennen tyonantaja, sijainti ja paivays
   olivat kaikki eri mittaisia, joten jokainen kortti katkesi eri
   kohdasta ja lista nautti rauhattomalta. Nyt rivi on aina yhden
   korkuinen: paivays ja sijainti saavat tilansa, ja tyonantajan nimi
   kutistuu kolmeen pisteeseen jos se ei mahdu. Koko nimi nakyy
   title-vihjeena ja ilmoitussivulla. */
.tyopaikka-meta {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 14px;
  font-size: .84rem; color: var(--muted); min-width: 0;
}
.tyopaikka-meta .tyonantaja {
  font-weight: 550; color: var(--ink-soft);
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sijainti ja paivays eivat kutistu: ne ovat lyhyita ja silmailtavia. */
.tyopaikka-meta .paikka,
.tyopaikka-meta .pvm { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; }
.tyopaikka-meta .paikka { max-width: 45%; overflow: hidden; }
/* Sijainti kuuluu tyonantajan kylkeen, pilkulla erotettuna: ne ovat
   yhdessa vastaus kysymykseen "kuka ja missa". Kokeilin kiinteaa
   saraketta, jossa sijaintinupit olisivat samassa pystylinjassa, mutta
   silloin nimen ja sijainnin valiin jai vaihteleva tyhja alue - rivi
   luki reikana eika ryhmana. Negatiivinen marginaali kumoaa flexin
   valin juuri pilkun kohdalta, jolloin pilkku on kiinni nimessa. */
.tyopaikka-meta .paikka::before {
  content: ","; margin-right: 6px; color: var(--muted);
}
/* HUOM: siirto tehdaan .paikalle, ei sen ::before-elementille.
   .paikka on overflow: hidden, joten ::beforen negatiivinen marginaali
   tyonsi pilkun ja sijaintinupin vasemman reunan ulos elementin omasta
   laatikosta - mitattuna 5 px - ja ne leikkautuivat pois. Kun koko
   elementtia siirretaan, sisalto pysyy sen sisalla.
   Vain tyonantajan perassa: ilman nimea edella ei ole gapia kumottavana. */
.tyopaikka-meta .tyonantaja + .paikka { margin-left: -14px; }
/* Paivays oikeaan reunaan: tasainen pystylinja koko listassa. Erotinpistetta
   ei tarvita, kun valissa on jo tyhjaa. */
.tyopaikka-meta .pvm { margin-left: auto; padding-left: 10px; }

/* Tappa taytetaan kokonaan: vaalea pohja hukkui kortin valkoiseen
   taustaan, jolloin tuoreus - listan ainoa tilatieto - ei erottunut.
   Valkoinen teksti varilla #007a51 on 5,4:1, eli AA tayttyy myos
   talla koolla (vaatimus 4,5:1). */
.merkki {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--accent); color: #fff; vertical-align: middle;
}

.tyhja {
  background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--muted);
}

/* =========================================================
   Sivutus
   ========================================================= */

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 0 8px; }
.pager-link, .pager-disabled {
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-size: .9rem; font-weight: 550;
}
.pager-link:hover { border-color: var(--brand); text-decoration: none; }
.pager-disabled { color: var(--muted); background: transparent; border-color: transparent; }
.pager-tila { font-size: .85rem; color: var(--muted); }

/* =========================================================
   Linkkiryhmät (lähialue, maakunnat, kunnat)
   ========================================================= */

.linkkiryhma {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin: 26px 0 0;
}
.linkkiryhma h2 { margin-bottom: 12px; }
.linkkilista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.linkkilista li { margin: 0; }
.linkkilista a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 9px; border-radius: var(--radius-sm); font-size: .92rem;
}
.linkkilista a:hover { background: var(--brand-tint); text-decoration: none; }
.linkkilista .luku { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.linkkiryhma .kaikki { margin: 14px 0 0; font-size: .9rem; font-weight: 550; }

/* Ilmoituslistan muunnelma: kaksi tekstia paallekkain, ei nimi + luku.
   Tyonantaja on otsikon alla omalla rivillaan, jolloin eri mittaiset
   nimet eivat riko listan rytmia. */
.linkkilista-ilmoitus a {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 1px; padding: 9px 10px;
}
.linkkilista-ilmoitus .lk-otsikko { line-height: 1.35; }
.linkkilista-ilmoitus .lk-tyonantaja {
  font-size: .78rem; color: var(--muted); line-height: 1.35;
  /* Pitka nimi katkaistaan kolmella pisteella, ei rivitetä:
     yhdella rivilla lista pysyy tasaisena. */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================
   Mainokset
   Tila varataan etukäteen, jottei sisältö hyppää latautuessa (CLS).
   ========================================================= */

.mainos { margin: 0 0 24px; }
.mainos-otsake {
  font-size: .72rem;
  color: var(--muted); margin: 0 0 6px; font-weight: 600;
}
.mainos-kehys {
  background: #f8fafc; border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
}
.mainos-kehys ins { display: block; }
.mainos-sivu .mainos-kehys  { min-height: 600px; }
.mainos-lista { margin: 4px 0; }
.mainos-lista .mainos-kehys { min-height: 280px; }

/* =========================================================
   Sisältösivut (tietoa, sivukartta)
   ========================================================= */

.sisaltosivu {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.sisaltosivu h2 { margin-top: 1.6em; }
.sisaltosivu h2:first-of-type { margin-top: .6em; }
.sisaltosivu p { max-width: 68ch; color: var(--ink-soft); }
.sisaltosivu dl { margin: 0; }
.sisaltosivu dt { font-weight: 650; margin-top: 14px; }
.sisaltosivu dd { margin: 2px 0 0; color: var(--ink-soft); }

/* =========================================================
   Footer
   ========================================================= */

#footer {
  margin: 48px 0 0; padding: 36px 0 24px;
  background: #0f1c2b; color: #c3cfdb; font-size: .95rem;
}
/* Sisennys sisäosaan, jotta footer linjautuu sisällön kanssa */
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.footer-grid {
  display: grid; gap: 28px; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.09);
}
/* Logo on tummansininen läpinäkyvällä taustalla: vaalea laatta sen alle */
.footer-logo {
  display: inline-block; background: #fff; border-radius: 12px; padding: 8px 14px; margin-bottom: 14px;
}
.footer-logo-valkoinen { background: none; padding: 0; }
.footer-logo img { display: block; width: 200px; height: auto; }
/* Alatunnisteen sarakeotsikot eivat ole h-tason otsikoita: ne nimeavat
   navigaation, eivat sivun sisaltoa, ja ne toistuvat joka sivulla.
   Saavutettavuus hoidetaan nav-maamerkilla ja aria-labelilla. */
#footer h2, .footer-otsikko { color: #fff; font-size: 1.1rem; margin: 0 0 10px; font-weight: 700; line-height: 1.3; }
.footer-sarake { display: block; }
#footer p { margin: 0 0 10px; max-width: 46ch; line-height: 1.6; }
#footer a { color: #a9cdf2; }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { margin-bottom: 8px; }
.footer-alalaita {
  padding-top: 18px; text-align: center; font-size: .88rem; color: #9fb0c2;
}
/* Ylläpitäjä alalaidassa: tunnistettavissa, mutta ei pääasia. */
.footer-alalaita span { display: block; }
.footer-yllapitaja { margin-top: 6px; font-size: .78rem; color: #7f91a4; }
/* ID-valitsin #footer a voitti aiemman saannon, joten linkki jai siniseksi.
   Tama on tarpeeksi tarkka: linkin kuuluu sulautua ymparoivaan tekstiin
   ja erottua vasta osoittaessa. */
#footer .footer-yllapitaja a { color: inherit; text-decoration: none; }
#footer .footer-yllapitaja a:hover,
#footer .footer-yllapitaja a:focus-visible { color: #fff; text-decoration: underline; }

/* =========================================================
   Responsiivisuus
   ========================================================= */

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  #contentwrap { grid-template-columns: 1fr; }
  #right { position: static; }
  .mainos-sivu .mainos-kehys { min-height: 280px; }
  /* Kapealla sivupalsta putoaa sisällön alle, jolloin sen hakuvahti olisi
     sama lomake toistamiseen heti sisällön oman lomakkeen perään. */
  #right .hv-sivupalkki { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  #pagewrap { padding: 0 12px 36px; }
  #header { padding: 8px 0; }
  .header-inner { padding: 0 12px; }
  .footer-inner { padding: 0 12px; }
  #header img { max-width: 190px; }
  .mainnav a { padding: 6px 9px; font-size: .84rem; }
  .suodattimet { padding: 13px; }
  .kentta { min-width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  /* Keskitys oli jo paalla, mutta se ei nakynyt: #footer p asettaa
     max-widthiksi 46ch, mika on leveampi kuin puhelimen ruutu, joten
     rivit tayttyivat reunasta reunaan. Luokkavalitsin ei riita sita
     kumoamaan, koska #footer on ID - sama ansa kuin alatunnisteen
     linkkivarissa. Siksi tassa on ID mukana. */
  #footer .footer-brand p { margin-left: auto; margin-right: auto; max-width: 32ch; }
  .linkkilista { grid-template-columns: 1fr; }
}

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

/* =========================================================
   Evästebanneri
   ========================================================= */

.evastebanneri {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(16,32,48,.12);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.evaste-sisalto { max-width: var(--wrap); margin: 0 auto; }
.evaste-sisalto h2 { font-size: 1rem; margin-bottom: 6px; }
.evaste-sisalto p { margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); max-width: 78ch; }
.evaste-napit { display: flex; flex-wrap: wrap; gap: 10px; }

.nappi {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 11px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.nappi:hover { border-color: var(--brand); color: var(--brand); }
.nappi-ensisijainen {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.nappi-ensisijainen:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* Alalaidan mainos */
.mainos-ala { margin: 28px 0 8px; }
.mainos-ala .mainos-kehys { min-height: 100px; }

/* =========================================================
   Mobiilivalikko
   Kolme linkkiä ei ansaitse burger-valikkoa: se piilottaisi
   navigaation turhan napautuksen taakse. Sen sijaan valikko saa
   oman täysleveän rivinsä logon alle, kolmeen yhtä leveään osaan.
   ========================================================= */

@media (max-width: 640px) {
  /* Mobiilissa logo keskitetään ja saa enemmän ilmaa ympärilleen.
     Otsikkopalkki ei ole mobiilissa kiinnitetty: logo, väljyys ja
     valikkorivi veisivät kiinnitettynä noin viidenneksen näytöstä. */
  #header { position: static; padding: 16px 0 10px; }
  .header-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  #header .logo { align-self: center; }
  #header img { max-width: 205px; }

  .mainnav {
    margin-left: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    border-top: 1px solid var(--line-soft); padding-top: 6px;
  }
  .mainnav a {
    text-align: center; padding: 9px 4px; font-size: .82rem;
    background: #f7f9fb; border-radius: var(--radius-sm);
  }
  /* Kapealla näytöllä lyhyet sanamuodot */
  .vain-leveys { display: none; }
  .vain-kapea  { display: inline; }
}

/* =========================================================
   Haku
   ========================================================= */

.hakurivi,
.hakulomake { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.hakurivi input[type="search"],
.hakulomake input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  padding: 11px 13px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.hakurivi input[type="search"]:hover,
.hakulomake input[type="search"]:hover { border-color: #cbd5e1; }
.hakurivi .tyhjenna,
.hakulomake .tyhjenna { font-size: .85rem; color: var(--muted); }

/* =========================================================
   Ilmoitussivu
   ========================================================= */

.ilmoitus {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.ilmoitus .hero { margin-bottom: 16px; }
.ilmoitus-tyonantaja { font-weight: 600; color: var(--ink-soft); }

.hae-rivi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0; }
.nappi-iso { padding: 13px 24px; font-size: .98rem; }

.ilmoitus-sisalto { max-width: 68ch; color: var(--ink-soft); }
.ilmoitus-sisalto p { margin: 0 0 1em; }
.ilmoitus-sisalto ul { margin: 0 0 1em; padding-left: 1.3em; }
.ilmoitus-sisalto li { margin-bottom: .35em; }

.ilmoitus-tiedot { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 20px; margin: 0; }
.ilmoitus-tiedot dt { font-weight: 600; color: var(--ink-soft); font-size: .9rem; }
.ilmoitus-tiedot dd { margin: 0; font-size: .95rem; }

.linkkilista-leveä { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* =========================================================
   Saavutettavuus
   ========================================================= */

.piilotettu {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ohita-linkki {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.ohita-linkki:focus { left: 0; text-decoration: none; }

/* Mainosotsakkeen kontrasti riittäväksi */
.mainos-otsake { color: var(--muted); }

@media (max-width: 640px) {
  .ilmoitus { padding: 20px 18px; }
  .ilmoitus-tiedot { grid-template-columns: 1fr; gap: 2px 0; }
  .ilmoitus-tiedot dd { margin-bottom: 10px; }
  .linkkilista-leveä { grid-template-columns: 1fr; }
}

/* =========================================================
   Sivupalkin paikkakuntanostot
   ========================================================= */

.karkikunnat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 18px;
}
.karkikunnat h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; color: var(--ink); margin: 0 0 10px; letter-spacing: 0;
}
.kk-ikoni { color: var(--logo-blue); display: inline-flex; }
.karkikunnat ul { list-style: none; margin: 0; padding: 0; }
.karkikunnat li { margin: 0; }
.karkikunnat a {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 7px 8px; border-radius: 10px; font-size: .9rem;
}
.karkikunnat a:hover { background: var(--brand-tint); text-decoration: none; }
.karkikunnat .luku {
  font-size: .76rem; font-weight: 600; color: var(--logo-blue);
  background: var(--brand-tint); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; flex: none;
}
.karkikunnat .kaikki { margin: 12px 0 0; font-size: .86rem; font-weight: 550; }

@media (max-width: 1000px) {
  .karkikunnat ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* =========================================================
   Työmarkkinat nyt
   Sininen datapaneeli: isot luvut laattoina, valkoiset listakortit,
   vihreä pulssi kertoo että luvut elävät.
   ========================================================= */

.tyomarkkinat {
  background: linear-gradient(135deg, #eaf2fb 0%, #f6f9fe 100%);
  border: 1px solid #cfe0f3;
  border-radius: 20px;
  padding: 22px 24px 20px;
  margin: 28px 0 0;
}
.tyomarkkinat h2 { margin: 0 0 16px; color: var(--logo-blue); font-size: 1.35rem; }
/* Ikoni ja pulssi kulkevat tekstirivin mukana: vertical-align pitää ne
   tekstin keskilinjalla myös silloin, kun otsikko rivittyy. */
.tm-ikoni { display: inline-block; vertical-align: -4px; margin-right: 8px; color: var(--logo-blue); }
.tm-ikoni svg { display: block; }
.tm-pulssi {
  display: inline-block; position: relative; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 10px;
}
.tm-pulssi::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: tm-pulssi 1.8s ease-out infinite;
}
@keyframes tm-pulssi {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}

.tm-laatat { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 460px; }
.tm-laatta {
  background: #fff; border-radius: 16px; padding: 14px 18px;
  border: 1px solid #dbe7f5;
}
.tm-laatta b {
  display: block; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--logo-blue); font-variant-numeric: tabular-nums;
}
.tm-laatta span { font-size: .92rem; color: var(--muted); }
.tm-laatta-uusi b { color: var(--accent); }

/* 62ch on oikea mitta leipatekstille, mutta tama on kolmen lyhyen
   tilastolauseen rivi, joka katkesi sen takia kolmelle riville. */
.tm-tiivistelma { margin: 12px 0 0; color: var(--ink-soft); font-size: 1rem; max-width: 84ch; }

.tm-ryhmat {
  display: grid; gap: 14px; margin-top: 18px;
  /* Kaksi saraketta, ei auto-fit: neljä ruutua asettui aiemmin 3 + 1,
     mikä jätti riville ison tyhjän. Kaksi sarakatta pitää rivit tasaisina
     myös kun ruutuja on pariton määrä. */
  grid-template-columns: repeat(2, 1fr);
}
.tm-ryhma {
  background: #fff; border: 1px solid #dbe7f5; border-radius: 16px; padding: 14px 16px;
}
.tm-ryhma h3 {
  font-size: 1.1rem; color: var(--logo-blue); margin: 0 0 10px; font-weight: 700; line-height: 1.3;
}
.tm-lista { list-style: none; margin: 0; padding: 0; }
.tm-lista li {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line-soft);
}
.tm-lista li:last-child { border-bottom: 0; }
.tm-nimi { font-size: 1rem; }
.tm-lista .luku {
  font-size: .84rem; font-weight: 600; color: var(--logo-blue);
  background: var(--brand-tint); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; flex: none;
}
.tm-huomio { font-size: .84rem; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 640px) {
  .tyomarkkinat { padding: 18px 16px; border-radius: 16px; }
  .tm-laatat { max-width: none; }
  .tm-ryhmat { grid-template-columns: 1fr; gap: 12px; }

}
@media (prefers-reduced-motion: reduce) { .tm-pulssi::after { animation: none; } }

/* =========================================================
   Hakuvahti
   Oranssi toimintapaneeli: sivuston ainoa oranssi elementti, joten se
   erottuu ilman että sen tarvitsee olla iso. Kolme asua samalle lomakkeelle.
   ========================================================= */

.hakuvahti {
  background: linear-gradient(135deg, var(--logo-blue) 0%, #0b5cab 100%);
  border: 0;
  border-radius: 20px;
  padding: 22px 24px;
  margin: 28px 0 0;
  color: #fff;
}
.hakuvahti a { color: #fff; }
.hv-otsake { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.hv-ikoni {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,.14); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.hakuvahti h2 { margin: 2px 0 4px; font-size: 1.18rem; color: #fff; }
.hv-kuvaus { margin: 0; color: #dbe8f6; font-size: .95rem; line-height: 1.5; max-width: 62ch; }

.hv-lomake {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 14px; align-items: end;
}
.hv-lomake .kentta { min-width: 0; grid-column: 1; }
.hv-lomake .hv-nappi { grid-column: 2; grid-row: 1; }
.hv-lomake .hv-taajuus, .hv-lomake .hv-pienella { grid-column: 1 / -1; }
.hv-lomake .kentta > label { color: #dbe8f6; font-size: .86rem; }
.hv-lomake input[type="email"] {
  width: 100%; padding: 12px 14px;
  border: 1px solid transparent; border-radius: 12px;
  background: #fff; font: inherit; font-size: .95rem; color: var(--ink);
}
.hv-lomake input[type="email"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.hv-pienella { margin: 0; font-size: .9rem; color: #dbe8f6; }
.hv-pienella a { text-decoration: underline; }

.hv-taajuus { border: 0; padding: 0; margin: 0; min-width: 0; }
.hv-valinnat { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.hv-taajuus legend { font-size: .86rem; font-weight: 600; color: #dbe8f6; margin-bottom: 6px; padding: 0; }
.hv-valinta {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: .92rem; padding: 4px 0; color: #fff;
}
.hv-valinta input { margin: 4px 0 0; flex: none; accent-color: var(--orange); }
.hv-valinta small { display: block; color: #dbe8f6; font-size: .86rem; }
/* Kohdistusrengas: sivuston sininen rengas ei näy sinisellä pohjalla, joten
   paneelin sisällä rengas on valkoinen. Radiopainikkeille sama. */
.hakuvahti a:focus-visible, .hakuvahti button:focus-visible,
.hakuvahti input[type="radio"]:focus-visible, .hakuvahti select:focus-visible {
  outline: 3px solid #fff; outline-offset: 3px;
}
.hakuvahti-sivu a:focus-visible, .hakuvahti-sivu button:focus-visible,
.hakuvahti-sivu input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hv-valinta input { width: 18px; height: 18px; }

/* Oranssi nappi sinisellä: logon oma väripari. Tumma teksti oranssilla
   on luettavampi kuin valkoinen. */
.hv-nappi {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--orange); border: 0; color: #16202b; border-radius: 999px;
  padding: 13px 24px; font-size: .95rem; font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.hv-nappi:hover { background: #ff9a33; color: #16202b; }
.hv-nuoli { flex: none; transition: transform .15s; }
.hv-nappi:hover .hv-nuoli { transform: translateX(3px); }

/* Piilokenttä botteja vastaan: pois näkyvistä, ei display:none, jotta
   botit eivät päättele sitä ansaksi. */
.hv-www { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hv-virhe {
  background: #fff4f2; border: 1px solid #f5c2b8; color: #8a2a17;
  border-radius: 12px; padding: 10px 13px; margin: 0 0 12px; font-size: .92rem;
}
/* Oma sivu (/hakuvahti/) on valkoinen sisältösivu, ei sininen paneeli */
.hakuvahti-sivu, .hakuvahti-sivu a { color: var(--ink); }
.hakuvahti-sivu .hv-lomake .kentta > label, .hakuvahti-sivu .hv-taajuus legend,
.hakuvahti-sivu .hv-pienella, .hakuvahti-sivu .hv-valinta small { color: var(--ink-soft); }
.hakuvahti-sivu .hv-valinta { color: var(--ink); }
.hakuvahti-sivu .hv-lomake input[type="email"], .hakuvahti-sivu .kentta select { border-color: var(--line); }
/* Omalla sivulla on myös kuntavalikko: kaikki allekkain, nappi omalle rivilleen */
.hakuvahti-sivu .hv-lomake { grid-template-columns: 1fr; max-width: 520px; }
.hakuvahti-sivu .hv-lomake .hv-nappi { grid-column: 1; grid-row: auto; justify-self: start; }
.hv-tulos {
  background: var(--accent-tint); border: 1px solid #b9e2cf; color: #0a4d35;
  border-radius: 12px; padding: 12px 14px; font-size: .95rem;
}

/* Sivupalkki: kapea, ikoni ylhäällä, kentät pinottuina */
.hv-sivupalkki { padding: 18px 18px 16px; margin: 0 0 22px; }
.hv-sivupalkki .hv-otsake { flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hv-sivupalkki h2 { font-size: 1.02rem; line-height: 1.3; }
.hv-sivupalkki .hv-lomake { grid-template-columns: 1fr; gap: 10px; }
.hv-sivupalkki .hv-lomake .hv-nappi { grid-column: 1; grid-row: auto; justify-content: center; }
.hv-sivupalkki .hv-valinnat { flex-direction: column; gap: 2px; }

/* Ilmoitussivu: hieman tiiviimpi kuin kuntasivun paneeli */
.hv-ilmoitus { padding: 18px 20px; }
.hv-ilmoitus h2 { font-size: 1.05rem; }

/* Omat sivut: vahvistus, peruutus, asetukset */
.hakuvahti-sivu { background: transparent; border: 0; padding: 0; margin: 18px 0 0; }
.hakuvahti-sivut .hv-toiminto { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.hakuvahti-sivut .hv-toiminto .nappi { text-decoration: none; display: inline-block; }
.hakuvahti-sivut .hv-asetukset h2 { margin-top: 1.2em; }
.hv-kuntalista { list-style: none; padding: 0; margin: 0 0 8px; }
.hv-kuntalista li { margin: 0; }
.hakuvahti-sivut .hv-taajuus { margin-top: 16px; }
/* Asetus- ja peruutussivut ovat valkoisia: paneelin vaaleat tekstivärit eivät kelpaa */
.hakuvahti-sivut .hv-valinta { color: var(--ink); }
.hakuvahti-sivut .hv-valinta small, .hakuvahti-sivut .hv-taajuus legend, .hakuvahti-sivut .hv-pienella { color: var(--ink-soft); }

@media (max-width: 640px) {
  .hakuvahti { padding: 16px 15px; border-radius: 16px; }
  .hv-lomake { grid-template-columns: 1fr; }
  .hv-lomake .hv-nappi { grid-column: 1; grid-row: auto; justify-content: center; }
}

/* Etusivun laajempi tilasto-osio: neljä laattaa, kaavio, donitsi */
.tm-laatat-4 { max-width: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tm-laatta-kiire b { color: var(--orange-dark); }

.tm-kaavio {
  background: #fff; border: 1px solid #dbe7f5; border-radius: 16px;
  padding: 14px 16px 10px; margin-top: 18px;
}
.tm-kaavio h3 { font-size: 1.1rem; color: var(--logo-blue); margin: 0 0 8px; font-weight: 700; line-height: 1.3; }
/* Pylväskaavio: palkit venyvässä SVG:ssä, akselit HTML:nä. Korkeus asetetaan
   CSS:llä, jolloin kaavio on mobiilissa korkeampi ilman venyneitä tekstejä. */
/* Yläreunaan tila selitteelle, ettei se peitä otsikkoa */
.tm-pylvaat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding-top: 34px; }
.tm-y { position: relative; grid-row: 1; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.tm-y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.tm-pylvaat-alue { position: relative; grid-row: 1; height: 150px; }
.tm-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tm-osuma { cursor: pointer; outline: none; }
.tm-osuma.on, .tm-osuma:focus-visible { fill: rgba(2, 79, 162, .08); }
.tm-x { grid-column: 2; grid-row: 2; position: relative; height: 18px; font-size: 12px; color: var(--muted); }
.tm-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.tm-vihje {
  position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 2;
  background: var(--logo-blue); color: #fff; font-size: .9rem; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(2, 79, 162, .25);
}
.tm-vihje::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--logo-blue); border-bottom: 0; }
.tm-akseli { font-size: 10px; fill: #7c8a99; }

/* Muutos edelliseen viikkoon laatan alla */
.tm-muutos { display: block; margin-top: 4px; font-size: .86rem; font-weight: 600; color: var(--muted); }
.tm-muutos-plus { color: #166e41; }
.tm-muutos-miinus { color: var(--orange-dark); }

/* Donitsi täyttää kortin leveyden; selite ja työsuhdepalkki sen alla */
.tm-donitsi { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tm-donitsi svg { width: 100%; max-width: 200px; height: auto; }
.tm-donitsi .tm-selite { width: 100%; }
.tm-suhde { margin-top: 16px; }
.tm-suhde h4 { font-size: 1.02rem; color: var(--logo-blue); margin: 0 0 8px; font-weight: 700; }
.tm-suhde-palkki { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #eef2f6; margin-bottom: 8px; }
.tm-suhde-palkki i { display: block; height: 100%; }

/* Työnantajasivut */
.ty-nimet { margin: 8px 0 0; font-size: .92rem; color: var(--ink-soft); max-width: 70ch; }
.ty-huomio {
  margin: 12px 0 0; padding: 10px 14px; max-width: 70ch; font-size: .92rem;
  background: var(--orange-tint); border: 1px solid var(--orange-line);
  border-radius: 10px; color: var(--ink);
}
.ty-linkki { display: inline-block; margin-top: 4px; font-weight: 600; }
.tyopaikka-meta .tyonantaja a { color: inherit; text-decoration: none; }
.tyopaikka-meta .tyonantaja a:hover { color: var(--brand); text-decoration: underline; }

/* Maakuntakooste: kuntajakauma palkkeina */
.tm-jakauma li { display: block; padding: 7px 0; }
.tm-jakauma-rivi { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tm-jakauma-luvut { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.tm-osuus { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.tm-jakauma-palkki { height: 6px; border-radius: 999px; background: #eef2f6; margin-top: 5px; overflow: hidden; }
.tm-jakauma-palkki i { display: block; height: 100%; background: var(--logo-blue); border-radius: 999px; }
.tm-lista .tm-luku-plus { color: #166e41; background: #e6f4ec; }
.tm-maakunta { margin-bottom: 24px; }

/* Mobiili: laatat kaksi rinnakkain, kaaviot korkeampina */
@media (max-width: 640px) {
  .tm-laatat-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tm-laatat-4 .tm-laatta { padding: 12px; }
  .tm-laatat-4 .tm-laatta b { font-size: 1.5rem; }
  .tm-pylvaat-alue { height: 210px; }
  .tm-donitsi svg { max-width: 240px; }
}
.tm-donitsi-luku { font-size: 22px; font-weight: 700; fill: var(--logo-blue); }
.tm-donitsi-selite { font-size: 10px; fill: #64748b; }
.tm-selite { list-style: none; margin: 0; padding: 0; font-size: .98rem; }
.tm-selite li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.tm-selite i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.tm-selite span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 12px; }

.tm-kielet { margin: 16px 0 0; font-size: 1rem; color: var(--ink-soft); }
.tm-kielet b { color: var(--logo-blue); }

/* Ammattisivun tilastot: linkkiluvut, pillit, alaotsikko */
.tm-lista a.luku { text-decoration: none; }
.tm-lista a.luku:hover { background: var(--logo-blue); color: #fff; }
.tm-alaotsikko { font-size: 1.1rem; color: var(--logo-blue); margin: 18px 0 8px; font-weight: 700; }
.tm-pillit { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tm-pillit li { margin: 0; }
.tm-pillit a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #dbe7f5;
  font-size: .88rem; color: var(--logo-blue); font-weight: 600;
}
.tm-pillit a:hover { background: var(--logo-blue); color: #fff; text-decoration: none; }
.tm-pillit a span { font-weight: 500; opacity: .75; }
.tm-kaikki { margin: 16px 0 0; font-size: 1rem; font-weight: 550; }

/* Ammattisivun hakuvahti: paikkakuntavalikko + sähköposti allekkain, nappi omalla rivillään */
.hv-ammatti .hv-lomake { grid-template-columns: 1fr; max-width: 560px; }
.hv-ammatti .hv-lomake .hv-nappi { grid-column: 1; grid-row: auto; justify-self: start; }
.hv-ammatti .kentta select {
  width: 100%; padding: 12px 38px 12px 14px; border: 1px solid transparent; border-radius: 12px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 13px center;
  font: inherit; font-size: .95rem; color: var(--ink); appearance: none;
}

/* =========================================================
   Palkkaosio ammattisivulla
   Vaihteluväli on osion pääasia, joten jana on iso ja näkyvä:
   yksi luku teeskentelisi tarkkuutta, jota palkkajakaumassa ei ole.
   ========================================================= */

.palkkaosio {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow);
  padding: 24px 26px 22px;
  /* Sama pystyrytmi kuin työmarkkinaosiolla, joka on tämän yläpuolella */
  margin: 28px 0 0;
}
.palkkaosio h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: 1.25rem;
}
.palkka-ikoni { color: var(--brand); display: inline-flex; }

.palkka-laus {
  margin: 0 0 6px; font-size: 1.05rem; line-height: 1.6; color: var(--ink);
}
.palkka-laus b { font-weight: 700; color: var(--brand); }

/* Jana */
.palkka-jana {
  position: relative;
  margin: 22px 0 20px;
  /* Tila mediaanin lukemalle tehdaan taytteella, ei palkin marginaalilla:
     marginaali sulautuisi laatikon omaan marginaaliin, jolloin palkki
     nousisi laatikon ylareunaan ja lukema jaisi sen taakse. */
  padding: 56px 4px 0;
}
.palkka-huippu {
  position: absolute; top: 0; z-index: 1; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; text-align: center;
}
.palkka-huippu b {
  font-size: 1.5rem; font-weight: 700; color: var(--brand); line-height: 1.1;
}
.palkka-huippu span {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.palkka-viiva {
  position: relative; height: 16px; border-radius: 999px;
  background: linear-gradient(90deg, #d7e6f7 0%, var(--brand) 100%);
  box-shadow: inset 0 1px 2px rgba(16,32,48,.12);
}
.palkka-merkki {
  position: absolute; top: 50%; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%;
  background: #fff; border: 6px solid var(--brand);
  box-shadow: 0 2px 8px rgba(11,92,171,.35);
}
.palkka-paat {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px;
}
.palkka-paat span { display: flex; flex-direction: column; }
.palkka-paat b { font-size: 1rem; font-weight: 650; color: var(--ink-soft); }
.palkka-paat small { font-size: .74rem; color: var(--muted); margin-top: 1px; }
.palkka-paat .palkka-oikea { text-align: right; align-items: flex-end; }

.palkka-ryhma { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.palkka-tarkenne { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.palkka-tarkenne small { font-size: .78rem; line-height: 1.55; color: var(--muted); display: block; }

@media (max-width: 520px) {
  .palkkaosio { padding: 20px 18px 18px; }
  .palkkaosio h2 { font-size: 1.12rem; }
  .palkka-huippu b { font-size: 1.3rem; }
  .palkka-jana { padding-top: 50px; }
  .palkka-paat b { font-size: .92rem; }
}

/* Palkkataso koosteosiossa ja ilmoitussivulla */
/* Palkkaruutu on sivun ainoa kohta, jossa lukija saa yhden konkreettisen
   euromaaran, ja vertailu koko maahan tekee luvusta ymmarrettavan.
   Molemmat saavat tilaa; varaus siita mista luku on laskettu kuuluu
   alaviitteeksi eika johtoon. */
.tm-palkkataso {
  background: linear-gradient(180deg, #f8fbff 0%, #e6eff9 100%);
  border-color: #cfe1f5;
  display: flex; flex-direction: column;
  text-align: center; padding: 22px 20px 16px;
}
/* Ei versaalia: otsikko on luettava sana, ei leima. */
.tm-palkkataso h3 {
  margin: 0 0 14px; font-size: 1rem; font-weight: 650;
  color: var(--ink-soft); letter-spacing: 0; text-transform: none;
}
.tm-palkkataso .tm-palkka-luku { margin: 0; }
.tm-palkka-laatta {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: #fff; border: 1px solid #cfe1f5;
  border-radius: 16px; padding: 16px 28px;
  box-shadow: 0 1px 2px rgba(11,92,171,.08), 0 6px 18px rgba(11,92,171,.10);
}
.tm-palkka-laatta b {
  font-size: 3.1rem; font-weight: 700; color: var(--brand);
  line-height: 1; letter-spacing: -0.025em;
}
.tm-palkka-jakso { font-size: 1.15rem; font-weight: 650; color: var(--brand); opacity: .65; }

/* Vertailu on ruudun toinen puoli, ei pikkuteksti. */
.tm-palkka-vertailu {
  margin: 16px 0 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.5;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tm-palkka-ero {
  display: inline-block; font-weight: 700; font-size: 1.25rem;
  padding: 4px 14px; border-radius: 999px; letter-spacing: -0.01em;
}
.tm-ero-plus   { color: #04543a; background: #d8efe5; }
.tm-ero-miinus { color: var(--orange-dark); background: #fde7cf; }
.tm-palkka-fi  { font-size: .9rem; color: var(--muted); }

/* Alaviite: tarkea mutta ei johtoasemassa. */
.tm-palkkataso .tm-palkka-selite {
  margin: 18px auto 0; max-width: 40ch;
  padding-top: 12px; border-top: 1px solid #d3e3f4;
  font-size: .72rem; line-height: 1.5; color: var(--muted);
}

@media (max-width: 420px) {
  .tm-palkka-laatta { padding: 14px 20px; }
  .tm-palkka-laatta b { font-size: 2.5rem; }
  .tm-palkka-ero { font-size: 1.1rem; }
  .tm-palkkataso { padding: 18px 16px 14px; }
}

.ilmoitus-palkka {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin: 22px 0 0;
}
.ilmoitus-palkka h2 { margin: 0 0 10px; font-size: 1.1rem; }
.ip-luku { margin: 0 0 10px; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.ip-luku b { color: var(--brand); }
.ip-varoitus {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--brand-tint); border-radius: var(--radius-sm);
  font-size: .88rem; line-height: 1.5; color: var(--ink-soft);
}
.ip-lahde { margin: 0; }
.ip-lahde small { font-size: .76rem; color: var(--muted); }

.rajaus-selite { font-size: .82rem; color: var(--muted); }

/* Palkkanosto ammattisivun herossa. Vie ankkurilla sivun palkkaosioon. */
.hero-palkka {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 9px 14px;
  background: var(--brand-tint); border: 1px solid #cfe0f3;
  border-radius: 999px; color: var(--ink);
  font-size: .92rem; line-height: 1.3;
}
.hero-palkka:hover { border-color: var(--brand); text-decoration: none; }
.hero-palkka b { font-size: 1.05rem; font-weight: 700; color: var(--brand); }
.hero-palkka .hp-nuoli { color: var(--brand); font-weight: 700; }
@media (max-width: 420px) { .hero-palkka { font-size: .86rem; } }

/* =========================================================
   Työnantajan yritystiedot
   Lyhyt tietolaatikko ennen ilmoituslistaa. Tiedot ovat PRH:n
   avointa dataa, joten osa kentistä puuttuu usein.
   ========================================================= */

.ty-tiedot {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px;
  /* Osio on sivun viimeinen, joten marginaali ylos kuten muillakin
     sivun osioilla. */
  margin: 28px 0 0;
}
.ty-tiedot h2 { margin: 0 0 10px; font-size: 1.1rem; }
.tt-kuvaus { margin: 0 0 14px; font-size: .96rem; line-height: 1.6; color: var(--ink); }

.tt-kentat {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 18px; margin: 0; padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}
.tt-kentat dt { color: var(--muted); }
.tt-kentat dd { margin: 0; color: var(--ink); }
.tt-koodi { color: var(--muted); }

.tt-lahde { margin: 12px 0 0; }
.tt-lahde small { font-size: .76rem; color: var(--muted); }

@media (max-width: 480px) {
  .tt-kentat { grid-template-columns: 1fr; gap: 2px 0; }
  .tt-kentat dt { margin-top: 8px; font-size: .82rem; }
}

/* Heron alla oleva tarkennus, esim. etätyösivun rajaus */
.hero-selite {
  margin: 12px 0 0; max-width: 60ch;
  font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}

/* =========================================================
   CV-työkalun valeovi
   Tarkoituksella vaatimaton: ulos vievä hakupainike on sivun
   tärkein toiminto, eikä tämä saa kilpailla siitä.
   ========================================================= */

.cv-ovi { margin: 16px 0 0; }
.cv-laatikko {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg);
}
.cv-laatikko summary {
  cursor: pointer; padding: 12px 16px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  list-style: none;
}
.cv-laatikko summary::-webkit-details-marker { display: none; }
.cv-laatikko summary::before { content: "+"; font-weight: 700; color: var(--brand); }
.cv-laatikko[open] summary::before { content: "\2212"; }
.cv-otsikko { font-weight: 600; font-size: .95rem; color: var(--brand); }
.cv-vihje { font-size: .78rem; color: var(--muted); }
.cv-sisalto { padding: 0 16px 16px; }
.cv-sisalto p { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.cv-lomake { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.cv-lomake input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; background: #fff;
}
.cv-lupaus { font-size: .82rem !important; color: var(--muted) !important; }
.cv-tila { margin: 0 !important; font-size: .88rem !important; color: var(--brand) !important; }

/* =========================================================
   Virhesivut: päättynyt ilmoitus (410) ja 404
   Virhesivun tehtävä on palauttaa kävijä takaisin matkaan,
   ei pahoitella. Siksi alla on aina jatkopolku.
   ========================================================= */

.paattynyt-kortti {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px 22px; margin: 0 0 22px;
}
.pk-leima {
  display: inline-block; margin: 0 0 14px;
  padding: 5px 12px; border: 2px solid var(--muted); border-radius: 6px;
  font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  transform: rotate(-2deg);
}
.pk-leima-404 { letter-spacing: .12em; }
.paattynyt-kortti h1 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.25; }
.pk-tyo { margin: 0 0 10px; font-size: 1rem; color: var(--ink); }
.pk-selite { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }

.paattynyt-jatko {
  background: var(--brand-tint); border: 1px solid #cfe0f3;
  border-radius: var(--radius); padding: 20px 22px; margin: 0 0 22px;
}
.paattynyt-jatko h2 { margin: 0 0 12px; font-size: 1.1rem; }
.paattynyt-jatko p { margin: 0 0 10px; }
.pj-kunta, .pj-vahti { font-size: .92rem; color: var(--ink-soft); }
.pj-vahti { margin-bottom: 0 !important; }

.virhe-jatka { margin: 0; }
.vj-haku { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.vj-haku input[type="search"] {
  flex: 1 1 240px; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; background: #fff;
}
.vj-ryhma { margin: 0 0 18px; }
.vj-ryhma h2 { margin: 0 0 10px; font-size: 1rem; color: var(--ink-soft); }
.vj-linkit { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vj-linkit a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: .92rem; color: var(--ink);
}
.vj-linkit a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.vj-linkit span { font-size: .8rem; color: var(--muted); }
.vj-linkit a:hover span { color: var(--brand); }

/* =========================================================
   Kuntakortti heron oikeassa laidassa
   Kuva on sivun ylälaidassa, joten sille annetaan kiinteä tila:
   muuten sivu hyppäisi latauksen aikana.
   ========================================================= */

.hero-kortilla {
  /* Keskitetty pystysuunnassa: kortti on korkeampi kuin otsikko ja laskuri,
     joten vasemmalle jaava ilma jakautuu ylos ja alas eika kerry alareunaan. */
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.hero-kortilla .hero-teksti { flex: 1 1 auto; min-width: 0; }
.hero-kuva {
  flex: 0 0 auto; display: block;
  width: 104px; height: 104px;
}
.hero-kuva img {
  display: block; width: 104px; height: 104px;
  border-radius: 12px;
}

@media (max-width: 640px) {
  /* Mobiilissa otsikko saa koko leveyden ja kortti siirtyy laskurin viereen.
     display: contents nostaa .hero-tekstin lapset samaan ruudukkoon, jolloin
     h1 voi olla omalla rivillaan ilman erillista merkkausta. */
  .hero-kortilla {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 14px; row-gap: 10px; align-items: center;
  }
  .hero-kortilla .hero-teksti { display: contents; }
  .hero-kortilla h1 { grid-column: 1 / -1; margin-bottom: 0; }
  .hero-kortilla .hero-meta { grid-column: 1; grid-row: 2; }
  .hero-kortilla .hero-kuva { grid-column: 2; grid-row: 2; }
  .hero-kortilla .hero-selite, .hero-kortilla .hero-palkka { grid-column: 1 / -1; }
  /* Nelio tarvitsee reunaan enemman ilmaa kuin teksti: tekstilla on
     kirjainten oma optinen valjyys, tasavarisella laatalla ei mitaan,
     joten 12 px nayttaa kiinni olevalta. 12 + 4 = 16 px. */
  .hero-kortilla .hero-kuva { margin-right: 4px; }
  .hero-kuva, .hero-kuva img { width: 72px; height: 72px; }
  .hero-kuva img { border-radius: 8px; }
}

/* =========================================================
   YRITYSTILI
   Tyonantajan oma nakyma: kirjautuminen ja omat luvut.
   Ei hakukoneille eika tyonhakijalle, joten tyylit ovat
   hillityt ja nojaavat olemassa oleviin laatta- ja
   lomakeluokkiin.
   ========================================================= */

.yt-laatikko {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; margin: 0 0 20px;
}
.yt-laatikko h2 { margin: 0 0 10px; font-size: 1.15rem; }
.yt-laatikko p { margin: 0 0 12px; line-height: 1.6; }
.yt-laatikko p:last-child { margin-bottom: 0; }
.yt-ok { background: var(--accent-tint); border-color: #bfe3d4; }
.yt-ehto { color: var(--ink-soft); font-size: .94rem; }
.yt-pieni { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.yt-virhe {
  background: var(--orange-tint); border: 1px solid var(--orange-line);
  color: var(--orange-dark); border-radius: 10px; padding: 10px 14px;
}

.yt-lomake { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; max-width: 460px; }
.yt-lomake label { font-weight: 650; font-size: .9rem; }
.yt-lomake input[type="email"] {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; font-family: inherit;
}
.yt-lomake input[type="email"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.yt-lomake button { align-self: flex-start; }

.yt-luvut { margin: 0 0 22px; }
.yt-luvut h2 { font-size: 1.15rem; margin: 0 0 12px; }

.yt-taulukko { width: 100%; border-collapse: collapse; font-size: .95rem; }
.yt-taulukko th, .yt-taulukko td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft);
}
.yt-taulukko th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.yt-taulukko td + td, .yt-taulukko th + th { text-align: right; }

.yt-ulos { margin: 24px 0 0; }
.nappi-teksti {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .9rem; text-decoration: underline;
}

/* Yritystili tyonantajan omien tietojen yhteydessa. Erottuu laatikkona,
   mutta ei kilpaile tyopaikkojen kanssa: se on sivun loppupuolella ja
   puhuttelee eri lukijaa kuin muu sivu. */
/* Teksti vasemmalle, nappi oikealle omaksi pysakikseen. Pystysuunnassa
   yhta paljon ilmaa ylos ja alas: aiemmin nappi oli melkein kiinni
   laatikon alareunassa, mika sai sen nayttamaan vahingolta. */
.tt-yritystili {
  margin: 20px 0 0; padding: 22px 24px;
  background: linear-gradient(135deg, #f4f9ff 0%, var(--brand-tint) 100%);
  border: 1px solid #cfe1f5; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.tt-yt-teksti { flex: 1 1 300px; min-width: 0; }
.tt-yt-otsikko { margin: 0 0 6px; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.tt-yt-teksti p:last-child {
  margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch;
}
.tt-yt-nappi { flex: 0 0 auto; }
/* Nappi erottuu taustasta varjolla; muuten se upposi savytaustaan. */
.tt-yt-nappi .nappi { box-shadow: 0 2px 6px rgba(11,92,171,.22); white-space: nowrap; }
@media (max-width: 560px) {
  .tt-yritystili { gap: 16px; padding: 18px 18px 20px; }
  .tt-yt-nappi { width: 100%; }
  .tt-yt-nappi .nappi { display: block; text-align: center; }
}

/* =========================================================
   KOROSTUSPALKKI
   Laskurin tarkein osa - luku ja yksikko - saa alleen paksun
   palkin, joka pyyhkaistaan nakyviin kerran sivun auetessa.

   Aiemmin tassa oli kasin vedetyn naköinen SVG-mutka. Se sopii
   piirrettyyn ilmeeseen, mutta tama on tyopaikkahaku: epatasainen
   viiva luki huolimattomuutena eika persoonana. Suora ja tukeva
   palkki on sama ele kuin korostuskynalla vedetty, ja se nayttaa
   samalta joka selaimessa ja joka leveydella.

   Koristeellinen: aria-hidden, eika palkki kanna mitaan tietoa.
   ========================================================= */

.hero-count .alleviivaus {
  /* display: inline, ei inline-block. Inline-elementin tausta piirtyy
     fontin korkeudelle, inline-blockin koko riviyalille - jalkimmaisessa
     korostus valahtaisi reilusti tekstin alapuolelle. */
  display: inline;
  white-space: nowrap;   /* korostus ei saa katketa kahdelle riville */
  /* Pikkuisen ilmaa reunoihin, ettei tausta leikkaa kiinni kirjaimiin. */
  padding: 0 .22em;
  /* Tasavarinen liukuvari taustakuvana. Sama jalki kuin box-shadow: inset,
     mutta tata voi animoida leveyssuunnassa.

     Vari on himmea, koska korostus on nyt puolet tekstin korkeudesta.
     Tayteläinen oranssi olisi talla korkeudella niin voimakas, etta se
     lukisi taustalaatikkona ja veisi huomion itse luvulta. Himmea savy
     toimii kuin korostuskyna: se osoittaa kohdan mutta ei huuda. */
  background-image: linear-gradient(var(--korostus), var(--korostus));
  background-repeat: no-repeat;
  background-position: 0 100%;
  /* Puolet tekstin korkeudesta: matala viiva luki alleviivauksena,
     tama lukee korostuksena. */
  background-size: 0 .5em;
  animation: alleviivaus-pyyhkaisy .5s cubic-bezier(.22, .61, .36, 1) .3s forwards;
  /* Kahdelle riville katkeava korostus piirtyisi molempiin paihin. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@keyframes alleviivaus-pyyhkaisy { to { background-size: 100% .5em; } }

/* Liikkeen valttaminen: korostus on paikallaan heti, ei animaatiota. */
@media (prefers-reduced-motion: reduce) {
  .hero-count .alleviivaus { animation: none; background-size: 100% .5em; }
}

/* =========================================================
   PALKKASIVU
   Taulukko on sivun koko sisalto, joten se saa olla iso ja
   luettava. Kapealla naytolla kaksi vahiten tarkeaa saraketta
   piilotetaan sen sijaan etta koko taulukko kutistuisi.
   ========================================================= */

.palkat-johdanto { max-width: 68ch; line-height: 1.65; margin: 0 0 24px; }
.palkat-johdanto b { color: var(--brand); }

.palkat-taulukko-osio { margin: 0 0 32px; }
.palkat-taulukko-osio h2 { font-size: 1.25rem; margin: 0 0 12px; }

/* Vierityssailio: jos taulukko ei mahdu, se vierii eika riko sivua */
.palkat-vieritys { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.palkat-taulukko {
  width: 100%; border-collapse: collapse;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.palkat-taulukko th, .palkat-taulukko td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.palkat-taulukko thead th {
  background: var(--brand-tint); color: var(--ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  white-space: normal; line-height: 1.3;
}
.palkat-taulukko tbody tr:last-child th,
.palkat-taulukko tbody tr:last-child td { border-bottom: 0; }
.palkat-taulukko tbody tr:hover { background: #f7fafd; }
.palkat-taulukko tbody th {
  font-weight: 600; white-space: normal;
}
.palkat-taulukko .oikealle { text-align: right; }
.palkat-med { font-weight: 700; color: var(--brand); font-size: 1.05rem; }

.palkat-selite-osio { max-width: 68ch; margin: 0 0 28px; }
.palkat-selite-osio h2 { font-size: 1.15rem; margin: 0 0 10px; }
.palkat-selite-osio p { line-height: 1.65; margin: 0 0 12px; color: var(--ink-soft); }

.palkat-jatko { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Nosto /ammatit/-sivulla */
.ammatit-palkkanosto {
  background: var(--brand-tint); border: 1px solid #cfe1f5;
  border-radius: 12px; padding: 12px 16px; margin: 0 0 20px; line-height: 1.6;
}

@media (max-width: 680px) {
  /* Haarukan reunat ovat kiinnostavia mutta eivat valttamattomia:
     mediaani ja avoimet paikat riittavat kapealla naytolla. */
  .palkat-taulukko .piilota-kapea { display: none; }
  .palkat-taulukko th, .palkat-taulukko td { padding: 10px 10px; }
}

/* Sijaintinuppi ilmoituskortissa. Vain koristeellinen tarkennus: teksti
   kertoo paikan, ikoni kertoo etta kyse on paikasta. */
.paikka-ikoni { flex: none; margin-right: 3px; vertical-align: -1px; opacity: .75; }

/* =========================================================
   USEIN KYSYTYT KYSYMYKSET
   Sivulle tullaan yleensa hausta yhta vastausta varten. Siksi
   sisallysluettelo on heti alussa ja jokaisella kysymyksella on
   oma ankkuri.

   Leveysrajoja ei kayteta: sivupalsta kaventaa sisaltoa jo valmiiksi,
   ja paalle lisatty max-width teki tekstista kapean juovan keskelle
   leveaa valkoista aluetta.
   ========================================================= */

.ukk-johdanto { line-height: 1.65; margin: 10px 0 0; }

/* Sisallysluettelo: ryhmat erottuvat toisistaan omina laatikoinaan. */
.ukk-sisallys {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0 0 26px;
}
.ukk-sisallys-ryhma {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px;
}
.ukk-sisallys-otsikko {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
  font-weight: 700; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand);
}
.ukk-sisallys ul { list-style: none; margin: 0; padding: 0; }
.ukk-sisallys li { margin: 0; }
.ukk-sisallys a {
  display: block; padding: 5px 0; font-size: .91rem; line-height: 1.45;
  color: var(--ink-soft);
}
.ukk-sisallys a:hover { color: var(--brand); }

.ukk-ryhma { margin: 0 0 30px; }
.ukk-ryhma > h2 { font-size: 1.3rem; margin: 0 0 14px; }

/* Jokainen kysymys oma kortti: rajat tekevat pitkasta sivusta
   silmailtavan, ja vastaus erottuu seuraavasta kysymyksesta. */
.ukk-kohta {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin: 0 0 12px;
  scroll-margin-top: 20px;
}
.ukk-kohta h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--ink); line-height: 1.4; }
.ukk-kohta p  { margin: 0; line-height: 1.7; color: var(--ink-soft); }
/* Ankkurilla avattu kysymys korostuu hetken, jotta lukija loytaa sen. */
.ukk-kohta:target { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

.ukk-lopuksi {
  background: var(--brand-tint); border: 1px solid #cfe1f5;
  border-radius: 14px; padding: 20px 22px;
}
.ukk-lopuksi h2 { font-size: 1.1rem; margin: 0 0 8px; }
.ukk-lopuksi p { margin: 0 0 8px; line-height: 1.65; }
.ukk-lopuksi p:last-child { margin-bottom: 0; }

/* =========================================================
   JAKONAPIT
   Tavallisia linkkeja, ei kolmannen osapuolen skripteja.
   Mobiilissa nama korvautuvat yhdella Jaa-napilla.
   ========================================================= */

/* Keskitetty pino: otsikko omalla rivillaan, napit sen alla. */
.jaa {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  text-align: center;
}
.jaa-otsikko { font-size: .92rem; font-weight: 700; color: var(--ink); }
.jaa-linkit { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* display:inline-flex ohittaa hidden-attribuutin oletuksen display:none,
   joten natiivi jakonappi nakyi tyhjana nappina myos poydalla. */
.jaa-nappi[hidden] { display: none; }
.jaa-nappi {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 600; padding: 8px 14px; text-decoration: none;
  border: 1px solid transparent; color: #fff;
}
.jaa-nappi:hover { text-decoration: none; color: #fff; filter: brightness(1.08); }
.jaa-ikoni { flex: none; }

/* Palveluiden omat varit. Kontrastit mitattu, kaikki yli 4,5:1 eli
   WCAG AA tayttyy myos pienella tekstilla:
     WhatsApp  #25D366 + tumma teksti  7,42:1
     LinkedIn  #0A66C2 + valkoinen     5,69:1
     Facebook  #0C5BCB + valkoinen     6,22:1
   Facebookin virallinen #1877F2 jai 4,23:1:een valkoisella, joten se on
   tummennettu. WhatsApp kayttaa tummaa tekstia kuten palvelu itsekin. */
.jaa-whatsapp   { background: #25D366; color: #0A2E22; }
.jaa-whatsapp:hover { color: #0A2E22; }
.jaa-linkedin   { background: #0A66C2; }
.jaa-facebook   { background: #0C5BCB; }
.jaa-sahkoposti { background: #4A5568; }

/* Kopiointi ja natiivi jako eivat ole brandeja: neutraali ulkoasu. */
.jaa-kopioi, .jaa-natiivi {
  background: #fff; color: var(--ink-soft); border-color: var(--line); cursor: pointer;
}
.jaa-kopioi:hover, .jaa-natiivi:hover { color: var(--brand); border-color: var(--brand); filter: none; }
/* Kopiointi onnistui: vihrea hetkeksi, jotta klikkaus tuntuu tehonneen. */
.jaa-ok, .jaa-ok:hover { border-color: var(--accent); color: #04543a; background: var(--accent-tint); }
.jaa-natiivi { font-weight: 650; }

@media (max-width: 480px) {
  .jaa { gap: 8px; }
}

/* =========================================================
   VAAKASUUNNAN YLIVUODON ESTO
   Mitattu vika: mainosyksikko renderoityi 508 px:n levyisena
   360 px:n ruudulla ja venytti koko tyopaikkalistan, jolloin
   sivu vieri vaakasuunnassa. Dokumentin leveys oli 522 px.

   Syy: ol.tyopaikat on grid-sailio, ja grid-item saa oletuksena
   min-width:auto - se ei siis kutistu sisaltoaan pienemmaksi.
   Pelkka max-width ei auta, koska automaattinen vahimmaisleveys
   voittaa sen. Korjaus on min-width:0.

   Sama suoja annetaan kaikille sailioille, joihin tulee
   kolmannen osapuolen sisaltoa: emme hallitse sen mittoja.
   ========================================================= */

.tyopaikat > li { min-width: 0; }
#contentwrap > main,
#contentwrap > #right { min-width: 0; }

.mainos,
.mainos-kehys { min-width: 0; max-width: 100%; }
.mainos-kehys ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }