/* Suunnasta riippumattomat mitat: vasen ja oikea korvattu alku- ja
   loppureunalla, jotta heprea ja arabia kaantyvat peilikuvaksi ilman erillista
   tyylitiedostoa. Selain hoitaa kaannon, kun html-elementilla on dir="rtl". */
/* KotoNavi. Teeman ydin: merkit, tyyli ja komponentit.
   Majakka on brandin sydan: tumma yon meri, yksi kultainen valonsade.
   Kulta varataan vain brandille ja toiminnoille, muu pysyy hiljaisena. */

/* --- Merkit: varit, mitat, tyyli ------------------------------------- */
:root {
  /* Varit. Perustana on vaalea, koska laite ilman mitaan asetusta pitaa
     tarjota tuttu ja turvallinen oletus. Tumma tulee vain pyydettaessa. */
  --ink: #f5f7f9;
  --hull: #ffffff;
  --deck: #ffffff;
  --rope: #d8e0e7;
  --fog: #5b6b78;
  --snow: #101820;
  --beam: #b98218;
  --beam-deep: #8f6210;
  --alert: #b3402f;

  /* Kirjasin: yksi perhe, kolme roolia painon ja valistyksen kautta. */
  --face: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem);
  --t-h1: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t-h2: 1.375rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.6875rem;

  /* Valit: nelosen kerrannaiset. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;
  --s24: 6rem;

  /* Muodot: mittalaitteen pyoristys, ei pilleria eika teravaa kulmaa. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --line: 1px solid var(--rope);
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  --measure: 1120px;
}

/* Vaalea teema: samat merkit, kaannetyt arvot. Sama sade, paivan valossa.
   Ilman nimenomaista valintaa seurataan laitteen omaa asetusta: ensikertalainen
   nakee sen mihin on tottunut, ei sita mita me arvaamme hanen puolestaan. */
/* Tumma teema: laitteen oma pyynto tai nimenomainen valinta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ink: #0e1216;
  --hull: #151a20;
  --deck: #1b222a;
  --rope: #28323c;
  --fog: #94a3b1;
  --snow: #e9eef3;
  --beam: #f4c45c;
  --beam-deep: #c99a34;
  --alert: #e2705f;
    --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

[data-theme="dark"] {
  --ink: #0e1216;
  --hull: #151a20;
  --deck: #1b222a;
  --rope: #28323c;
  --fog: #94a3b1;
  --snow: #e9eef3;
  --beam: #f4c45c;
  --beam-deep: #c99a34;
  --alert: #e2705f;
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--snow);
  font: 400 var(--t-body)/1.6 var(--face);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 var(--s4); }

h1, h2, h3 { margin: 0 0 var(--s4); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }

/* Utiliteettirooli: pienet tunnisteet isoin valein. */
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.muted { color: var(--fog); }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--s6); }

main { min-height: 60vh; padding-block: var(--s12) var(--s24); }

/* Saavutettavuus: nakyva kohdistus ja hyppylinkki nappaimistolle. */
:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; border-radius: var(--r-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-inline-start: var(--s4); top: -3rem; z-index: 20;
  background: var(--beam); color: #1a1207; font-weight: 600;
  padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s4); }

/* --- Ylapalkki ja majakka -------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--hull) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--line);
}

/* Horisonttiviiva: valo vuotaa vasemmalta, kuten majakasta merelle. */
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--beam) 55%, transparent) 16%,
    color-mix(in srgb, var(--beam) 12%, transparent) 58%, transparent);
}

.site-header .wrap {
  display: flex; align-items: center; gap: var(--s6);
  min-height: 112px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 800; letter-spacing: -0.02em; }
.brand .mark {
  width: 88px; height: 88px; flex: none;
  background: url('/assets/img/logo-light.png') center / contain no-repeat;
}
[data-theme="dark"] .brand .mark { background-image: url('/assets/img/logo-dark.png'); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .mark,
  :root:not([data-theme="light"]) .card .shot.empty .mark,
  :root:not([data-theme="light"]) .fault .mark {
    background-image: url('/assets/img/logo-dark.png');
  }
}

.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s6); font-size: var(--t-small); }
.site-nav a { color: var(--fog); font-weight: 600; }
.site-nav a:hover { color: var(--snow); }

/* --- Painikkeet ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 600 var(--t-small)/1 var(--face);
  padding: var(--s3) var(--s6); min-height: 44px;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--beam); color: #1a1207; }
.btn-primary:hover { background: var(--beam-deep); }
.btn-ghost { background: transparent; color: var(--snow); border-color: var(--rope); }
.btn-ghost:hover { border-color: var(--beam); color: var(--beam); }

/* --- Etusivun sade: teeman ainoa liike ------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--s16) var(--s12); }

.hero::before {
  content: ""; position: absolute; top: -14%; inset-inline-start: -6%; width: 78%; height: 150%;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--beam) 17%, transparent),
    color-mix(in srgb, var(--beam) 0%, transparent) 64%);
  clip-path: polygon(0 0, 100% 27%, 100% 46%, 0 9%);
  transform-origin: 0 9%;
  animation: sweep 16s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes sweep {
  from { transform: rotate(-7deg); }
  to { transform: rotate(9deg); }
}

.hero > * { position: relative; }

.hero h1 { font-size: var(--t-display); max-width: 16ch; }
.hero .lede { font-size: 1.125rem; color: var(--fog); max-width: 46ch; margin-bottom: var(--s8); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- Kortit ja hakutulokset ------------------------------------------- */
.results {
  display: grid; gap: var(--s6); list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.card {
  display: flex; flex-direction: column;
  background: var(--deck); border: var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--beam) 45%, var(--rope)); transform: translateY(-2px); }

/* Kortin kuvaruutu pitaa ristikon suorassa, mutta kuvaa ei rajata: myyja
   valitsi kuvan, ja puolikas kuva valehtelee kohteesta. Tayttovari on kortin
   oma pinta, jotta kuvan viereen ei jaa vierasta laattaa. */
.card .shot { aspect-ratio: 4 / 3; background: var(--deck); position: relative; }
.card .shot img { width: 100%; height: 100%; object-fit: contain; }

/* Kuvaton kortti: majakan siluetti tyhjan laatikon sijaan. */
.card .shot.empty {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--hull), var(--ink));
  color: color-mix(in srgb, var(--fog) 40%, transparent);
}
/* Paikanpitaja pysyy vaiteliaana: himmea merkki, ei kirkasta brandia joka kortissa. */
.card .shot.empty .mark {
  width: 46%; height: 46%;
  background: url('/assets/img/logo-light.png') center / contain no-repeat;
  opacity: .22; filter: grayscale(1);
}
[data-theme="dark"] .card .shot.empty .mark { background-image: url('/assets/img/logo-dark.png'); }

.card .body { padding: var(--s4) var(--s4) var(--s6); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card .title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.card .price { margin-top: auto; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.price .cur { font-size: .8em; font-weight: 600; color: var(--fog); margin-inline-start: 2px; }

.empty-state {
  border: 1px dashed var(--rope); border-radius: var(--r-lg);
  padding: var(--s12) var(--s6); text-align: center; color: var(--fog);
}

/* --- Kohdesivu -------------------------------------------------------- */
.listing { max-width: 860px; }
/* Vanhan kohdesivun .shot-saannot poistettu: galleria hoitaa kuvat nyt itse,
   eivatka ne saa rajata kuvaa cover-arvolla. */
.listing .price { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--s2); }
/* Tietolohko oli ennen yksi vaakarivi. Nyt siina on otsikko, vaihtaja ja
   parilista allekkain, joten vaakalinjaus poistettiin: se olisi tyontanyt
   otsikon ja listan vierekkain. */
.listing .facts b { font-weight: 600; }
.listing .description { color: color-mix(in srgb, var(--snow) 88%, var(--fog)); }

/* --- Lomakkeet -------------------------------------------------------- */
.form { max-width: 420px; display: flex; flex-direction: column; gap: var(--s4); }
.form label { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-small); font-weight: 600; }

.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
  font: 400 var(--t-body)/1.4 var(--face);
  color: var(--snow); background: var(--hull);
  border: var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-height: 44px;
  transition: border-color .15s ease;
}
.form input:focus { border-color: var(--beam); }

/* Ruudut: rivi luetaan lauseena, ei lomakekenttana. */
.form .check {
  flex-direction: row; align-items: flex-start; gap: var(--s3);
  font-weight: 400; line-height: 1.5; color: var(--fog);
  padding: var(--s3); border-radius: var(--r-md);
}
.form .check input { accent-color: var(--beam); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.form .check a { color: var(--snow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--beam); }
.form .check .muted { white-space: nowrap; }
.form .btn { align-self: flex-start; margin-top: var(--s2); }

.error {
  border-inline-start: 2px solid var(--alert); background: color-mix(in srgb, var(--alert) 9%, transparent);
  padding: var(--s3) var(--s4); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--snow);
}

.notice {
  border-inline-start: 2px solid var(--beam); background: color-mix(in srgb, var(--beam) 8%, transparent);
  padding: var(--s4) var(--s6); border-radius: 0 var(--r-md) var(--r-md) 0; max-width: 52ch;
}

.aside-link { font-size: var(--t-small); color: var(--fog); }
.aside-link a { color: var(--snow); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rope); }
.aside-link a:hover { text-decoration-color: var(--beam); }

/* --- Juridiset sivut -------------------------------------------------- */
.legal { max-width: 68ch; }
.legal h1 { margin-bottom: var(--s6); }
.legal div { color: var(--fog); }

/* --- Alapalkki -------------------------------------------------------- */
.site-footer { border-top: var(--line); padding-block: var(--s8); color: var(--fog); font-size: var(--t-small); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: center; }
.site-footer nav { display: flex; gap: var(--s6); margin-inline-start: auto; }
.site-footer a:hover { color: var(--snow); }

/* --- Liikkeen kunnioitus ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero::before { transform: rotate(2deg); }
}

@media (max-width: 560px) {
  /* Puhelimessa merkki pienenee: 88 pikselia veisi kolmanneksen ruudun leveydesta. */
  .brand .mark { width: 52px; height: 52px; }
  .site-header .wrap { gap: var(--s4); min-height: 76px; }
  .site-nav { gap: var(--s4); }
  .hero { padding-block: var(--s12) var(--s8); }
  main { padding-block: var(--s8) var(--s16); }
}

/* --- Kartta: suodatinpalkki, laatat, tapit ja pisteen paneeli ---------- */
.map-shell { position: relative; }

.map-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3);
  padding: var(--s4) 0 var(--s6);
}
.map-filters label { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.map-filters select,
.map-filters input {
  font: 400 var(--t-small)/1.2 var(--face); color: var(--snow);
  background: var(--hull); border: var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-height: 42px; text-transform: none; letter-spacing: 0;
}
.map-filters input[type="number"] { width: 8.5rem; }
.map-filters input[type="search"] { min-width: 12rem; }
.map-filters select:focus, .map-filters input:focus { border-color: var(--beam); }
.map-filters .count { margin-inline-start: auto; align-self: center; font-size: var(--t-small); font-weight: 600; color: var(--snow); }
.map-filters .count.is-empty { color: var(--fog); }

.map-canvas {
  height: clamp(420px, 68vh, 780px);
  border: var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--hull);
}

/* Leafletin oma kuori sovitetaan teemaan: vaaleat laatikot eivat kuulu yohon. */
.leaflet-container { background: var(--hull); font: 400 var(--t-small)/1.4 var(--face); }
.leaflet-bar a, .leaflet-control-attribution {
  background: var(--deck); color: var(--fog); border-color: var(--rope);
}
.leaflet-bar a { color: var(--snow); }
.leaflet-bar a:hover { background: var(--hull); }
.leaflet-control-attribution a { color: var(--fog); }

/* Klusteri: kultainen rengas, luku keskella. Koko kertoo tiheyden. */
.kn-cluster { display: grid; place-items: center; }
.kn-cluster span {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; font-weight: 800; font-size: .8125rem; letter-spacing: -0.02em;
  color: #1a1207; background: var(--beam);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--beam) 22%, transparent), var(--lift);
}

/* Yksittainen kohde: hintalappu, ei nuppineula. Hinta on se mita etsitaan.
   Lappu on aina laatan vastavari: tummalla kartalla vaalea, vaalealla tumma.
   Sama sisus ei toimisi molemmilla, mitattu kontrasti ratkaisee luettavuuden. */
.kn-pin span {
  display: inline-block; padding: 4px var(--s3); border-radius: var(--r-sm);
  background: #101820; color: #f5f7f9; border: 1px solid rgba(255, 255, 255, .2);
  font-weight: 700; font-size: .75rem; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35);
}
.kn-pin:hover span, .kn-pin.is-active span {
  background: var(--beam); color: #1a1207; border-color: rgba(0, 0, 0, .3);
}
/* Tapin sisus on aina laatan vastavari. Vaalealla kartalla tumma lappu,
   tummalla kartalla vaalea, jotta luettavuus sailyy molemmissa. */
[data-theme="dark"] .kn-pin span {
  background: var(--snow); color: #101820; border-color: rgba(0, 0, 0, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kn-pin span {
    background: var(--snow); color: #101820; border-color: rgba(0, 0, 0, .25);
  }
}

.point-panel {
  position: absolute; inset-inline-start: var(--s4); bottom: var(--s4); z-index: 500;
  display: flex; gap: var(--s4); max-width: min(420px, calc(100% - 2 * var(--s4)));
  background: var(--deck); border: var(--line); border-radius: var(--r-lg);
  padding: var(--s3); box-shadow: var(--lift);
}
.point-panel[hidden] { display: none; }
.point-panel img {
  width: 120px; height: 90px; object-fit: contain; background: var(--deck);
  border-radius: var(--r-md); flex: none;
}
.point-panel .body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.point-panel .title { font-weight: 600; line-height: 1.3; }
.point-panel .price { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; }
.point-panel .btn { margin-top: var(--s2); align-self: flex-start; min-height: 36px; padding: var(--s2) var(--s4); }
.point-panel .close {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px;
  background: transparent; border: 0; color: var(--fog); font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: var(--r-sm);
}
.point-panel .close:hover { color: var(--snow); background: var(--hull); }

@media (max-width: 560px) {
  .map-filters { gap: var(--s2); }
  .map-filters input[type="number"] { width: 6.5rem; }
  .map-filters .count { margin-inline-start: 0; width: 100%; }
  .map-canvas { height: 62vh; }
  .point-panel { inset-inline: var(--s2); bottom: var(--s2); max-width: none; }
}

/* --- Kielivalitsin: pelkka details, toimii ilman skriptia ------------- */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .1em;
  color: var(--fog); padding: var(--s2) var(--s3);
  border: var(--line); border-radius: var(--r-sm);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--snow); border-color: var(--beam); }
.lang[open] summary { color: var(--snow); border-color: var(--beam); }

.lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--s2)); z-index: 30;
  margin: 0; padding: var(--s2); list-style: none; min-width: 11rem;
  background: var(--deck); border: var(--line); border-radius: var(--r-md);
  box-shadow: var(--lift);
}
.lang li a {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 500; color: var(--fog);
}
.lang li a:hover { background: var(--hull); color: var(--snow); }
/* Nykyinen kieli merkitaan sateella, ei pelkalla varilla. */
.lang li a[aria-current] { color: var(--snow); font-weight: 600; }
.lang li a[aria-current]::before { content: "› "; color: var(--beam); }

@media (max-width: 560px) {
  .lang ul { inset-inline-end: auto; inset-inline-start: 0; }
}

/* --- Kohdesivu: otsikko, galleria, tiedot ---------------------------- */
.listing-head { margin-bottom: var(--s8); }
.listing-head h1 { margin-bottom: var(--s3); }
.listing .price { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--s2); }

/* Katseluluku kuuluu vain omistajalle, siksi se on hillitty eika korostus. */
.listing .views { font-size: var(--t-small); color: var(--fog); margin: 0; }
.listing .views::before { content: "◍ "; color: var(--beam); }

/* Galleria toimii ilman skriptia. Piilotetut valitsimet pitavat kirjaa siita,
   mika kuva on nakyvissa, ja pikkukuva on valitsimen nimilappu. Napautus
   vaihtaa kuvan heti: ei sivunlatausta, ei hyppya ankkuriin, ei skriptia.
   Vierii vain pikkukuvanauha, iso kuva pysyy paikallaan. */
.gallery { margin-bottom: var(--s8); }
.gallery .shot-pick { position: absolute; opacity: 0; pointer-events: none; }
.gallery .frames { position: relative; }
.gallery .frame {
  margin: 0; position: relative; display: none;
}
.gallery .frame img {
  margin-inline: auto; border-radius: var(--r-lg);
  /* Kuvaa ei rajata eika sen muotoa maarata: leveys venyy palstan levyiseksi
     ja korkeus seuraa omia mittasuhteita, jotka selain lukee width- ja
     height-arvoista. Katto estaa pystykuvaa tyontamasta tekstia pois.
     Selain kutistaa myos leveyden, kun katto puree, joten suhde sailyy eika
     tyhjaa jaa lainkaan. Siksi tayttovaria ei enaa tarvita kummassakaan
     teemassa: ennen tahan jai vaalealla valkoinen ja tummalla musta kaista. */
  display: block; width: 100%; height: auto;
  max-height: min(72vh, 760px); object-fit: contain;
}

/* Nakyviin paasee se kehys, jonka valitsin on valittuna. Jarjestys on sama
   molemmissa listoissa, joten n:nnen valitsimen pari on n:s kehys. */
.gallery .shot-pick:nth-of-type(1):checked ~ .frames .frame:nth-of-type(1),
.gallery .shot-pick:nth-of-type(2):checked ~ .frames .frame:nth-of-type(2),
.gallery .shot-pick:nth-of-type(3):checked ~ .frames .frame:nth-of-type(3),
.gallery .shot-pick:nth-of-type(4):checked ~ .frames .frame:nth-of-type(4),
.gallery .shot-pick:nth-of-type(5):checked ~ .frames .frame:nth-of-type(5),
.gallery .shot-pick:nth-of-type(6):checked ~ .frames .frame:nth-of-type(6),
.gallery .shot-pick:nth-of-type(7):checked ~ .frames .frame:nth-of-type(7),
.gallery .shot-pick:nth-of-type(8):checked ~ .frames .frame:nth-of-type(8),
.gallery .shot-pick:nth-of-type(9):checked ~ .frames .frame:nth-of-type(9),
.gallery .shot-pick:nth-of-type(10):checked ~ .frames .frame:nth-of-type(10) {
  display: block;
}

/* Pohjapiirros ei ole valokuva: se sovitetaan kokonaan ja saa oman selitteen. */
.gallery .frame figcaption {
  position: absolute; inset-inline-start: var(--s3); bottom: var(--s3);
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--snow);
  padding: var(--s1) var(--s3); border-radius: var(--r-sm);
}

.gallery .thumbs {
  display: flex; gap: var(--s2); overflow-x: auto; margin-top: var(--s3);
  padding-bottom: var(--s2);
  scrollbar-width: thin; scrollbar-color: var(--rope) transparent;
}
.gallery .thumbs label {
  flex: 0 0 auto; border: var(--line); border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; transition: border-color .15s ease;
}
.gallery .thumbs label:hover { border-color: var(--beam); }
.gallery .thumbs img {
  width: 96px; height: 72px; object-fit: contain; display: block; background: var(--deck);
}

/* Valittu pikkukuva erottuu, ja nappaimiston kohdistus nakyy yhta selvasti. */
.gallery .shot-pick:nth-of-type(1):checked ~ .thumbs label:nth-of-type(1),
.gallery .shot-pick:nth-of-type(2):checked ~ .thumbs label:nth-of-type(2),
.gallery .shot-pick:nth-of-type(3):checked ~ .thumbs label:nth-of-type(3),
.gallery .shot-pick:nth-of-type(4):checked ~ .thumbs label:nth-of-type(4),
.gallery .shot-pick:nth-of-type(5):checked ~ .thumbs label:nth-of-type(5),
.gallery .shot-pick:nth-of-type(6):checked ~ .thumbs label:nth-of-type(6),
.gallery .shot-pick:nth-of-type(7):checked ~ .thumbs label:nth-of-type(7),
.gallery .shot-pick:nth-of-type(8):checked ~ .thumbs label:nth-of-type(8),
.gallery .shot-pick:nth-of-type(9):checked ~ .thumbs label:nth-of-type(9),
.gallery .shot-pick:nth-of-type(10):checked ~ .thumbs label:nth-of-type(10) {
  border-color: var(--beam); box-shadow: 0 0 0 1px var(--beam) inset;
}
.gallery .shot-pick:focus-visible ~ .thumbs label { outline-offset: 2px; }
.gallery .shot-pick:nth-of-type(1):focus-visible ~ .thumbs label:nth-of-type(1),
.gallery .shot-pick:nth-of-type(2):focus-visible ~ .thumbs label:nth-of-type(2),
.gallery .shot-pick:nth-of-type(3):focus-visible ~ .thumbs label:nth-of-type(3),
.gallery .shot-pick:nth-of-type(4):focus-visible ~ .thumbs label:nth-of-type(4),
.gallery .shot-pick:nth-of-type(5):focus-visible ~ .thumbs label:nth-of-type(5),
.gallery .shot-pick:nth-of-type(6):focus-visible ~ .thumbs label:nth-of-type(6),
.gallery .shot-pick:nth-of-type(7):focus-visible ~ .thumbs label:nth-of-type(7),
.gallery .shot-pick:nth-of-type(8):focus-visible ~ .thumbs label:nth-of-type(8),
.gallery .shot-pick:nth-of-type(9):focus-visible ~ .thumbs label:nth-of-type(9),
.gallery .shot-pick:nth-of-type(10):focus-visible ~ .thumbs label:nth-of-type(10) {
  outline: 2px solid var(--beam);
}

/* Etaisyyksien otsikkorivi: nimi vasemmalle, yksikkojen vaihtaja oikealle. */
.facts-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2);
}
.facts-head h2 { margin-bottom: 0; }
.unit-switch {
  font-size: var(--t-small); font-weight: 600; color: var(--fog);
  border-bottom: 1px solid transparent;
}
.unit-switch:hover { color: var(--beam); border-bottom-color: var(--beam); }

.listing .description { font-size: 1.0625rem; color: color-mix(in srgb, var(--snow) 90%, var(--fog)); margin-bottom: var(--s12); }

/* Tiedot parilistana: nimi haaleana, arvo kirkkaana, koska arvoa etsitaan. */
.facts { margin-bottom: var(--s12); }
.facts h2 { margin-bottom: var(--s2); }
.facts .note { font-size: var(--t-small); margin-bottom: var(--s4); }
.facts dl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0; margin: 0;
}
.facts dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: var(--line);
}
.facts dt { color: var(--fog); font-size: var(--t-small); }
.facts dd { margin: 0; font-weight: 600; white-space: nowrap; }

.map-canvas.is-small { height: clamp(240px, 34vh, 380px); }

@media (min-width: 720px) {
  .gallery .frame { flex-basis: calc(100% - var(--s12)); }
}

/* Kohdesivun nuppineula: pisara kultaisella sisuksella, ei hintaa. */
.kn-marker span {
  display: block; width: 22px; height: 22px;
  background: var(--beam); border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.kn-marker span::after {
  content: ""; display: block; width: 7px; height: 7px; margin: 5px auto;
  background: var(--ink); border-radius: 50%;
}

/* --- Kabinetti -------------------------------------------------------- */
.cab-head { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s4); }
.cab-head h1 { margin: 0; }
.cab-head .btn { margin-inline-start: auto; }

.cab-list { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.cab-item {
  display: grid; align-items: center; gap: var(--s4);
  grid-template-columns: 7.5rem 1fr auto auto auto;
  background: var(--deck); border: var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); transition: border-color .15s ease;
}
.cab-item:hover { border-color: color-mix(in srgb, var(--beam) 45%, var(--rope)); }
.cab-item .title { font-weight: 600; }
.cab-item .price { font-weight: 700; white-space: nowrap; }
.cab-item .views { font-size: var(--t-small); color: var(--fog); white-space: nowrap; }

/* Tila varilla ja sanalla: pelkka vari ei riita saavutettavuudelle. */
.state {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s1) var(--s2); border-radius: var(--r-sm); border: 1px solid var(--rope);
  color: var(--fog); white-space: nowrap; text-align: center;
}
.state.is-active { color: var(--beam); border-color: color-mix(in srgb, var(--beam) 50%, transparent); }
.state.is-draft { color: var(--snow); }
.state.is-hidden, .state.is-archived { opacity: .7; }

.form.is-wide { max-width: 640px; }
.form textarea {
  font: 400 var(--t-body)/1.55 var(--face); color: var(--snow); background: var(--hull);
  border: var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); resize: vertical;
}
.form textarea:focus { border-color: var(--beam); }
.form select {
  font: 400 var(--t-body)/1.4 var(--face); color: var(--snow); background: var(--hull);
  border: var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); min-height: 44px;
}
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form .note { margin: calc(-1 * var(--s2)) 0 0; font-size: var(--t-small); }

.attr-block { border: var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s6) var(--s6); margin: var(--s4) 0 0; }
.attr-block legend { font-size: var(--t-small); font-weight: 600; padding: 0 var(--s2); color: var(--snow); }
.attr-row { display: grid; grid-template-columns: 1fr 7rem 6rem; gap: var(--s3); align-items: center; padding: var(--s2) 0; }
.attr-row > label { font-size: var(--t-small); color: var(--fog); }
.attr-row .wide { grid-column: 2 / -1; }
.cab-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

@media (max-width: 620px) {
  .cab-item { grid-template-columns: 1fr auto; row-gap: var(--s2); }
  .cab-item .state { grid-column: 1 / -1; justify-self: start; }
  .form .pair { grid-template-columns: 1fr; }
  .attr-row { grid-template-columns: 1fr 5.5rem 5rem; }
}

/* Neulan asettelu lomakkeella: kartta kenttien alla, ohje sen alla. */
.pin-block { margin: var(--s2) 0 var(--s4); }
.pin-block .map-canvas { margin-top: var(--s2); }
.pin-block #pin-hint:empty { display: none; }

/* --- Kuvien hallinta kabinetissa -------------------------------------- */
.photos { margin: var(--s8) 0; }
.photos h2 { margin-bottom: var(--s3); }
.photo-grid {
  display: grid; gap: var(--s3); list-style: none; margin: 0 0 var(--s6); padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
/* Tayttovari on aina se pinta, jolla kuva lepaa. Ennen tassa oli --hull,
   joka vaalealla teemalla on puhdas valkoinen ja tummalla lahes musta, joten
   sovitetun kuvan viereen jai selvasti erottuva kaista. */
.photo { position: relative; border: var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--deck); }
.photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--deck);
}
.photo.is-plan img { object-fit: contain; }

/* Merkki kertoo tilan sanoilla, ei pelkalla varilla. */
.photo .badge {
  position: absolute; top: var(--s2); inset-inline-start: var(--s2);
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--beam); color: #1a1207; padding: 2px var(--s2); border-radius: var(--r-sm);
}
.photo .badge.is-wait { background: var(--rope); color: var(--snow); inset-inline-start: auto; inset-inline-end: var(--s2); }
.photo .badge.is-bad { background: var(--alert); color: var(--snow); inset-inline-start: auto; inset-inline-end: var(--s2); }

.photo-actions { display: flex; gap: var(--s2); padding: var(--s2); }
.photo-actions .btn { flex: 1; min-height: 34px; padding: var(--s2); font-size: var(--t-eyebrow); }
.photo-upload { max-width: 520px; }
.photo-upload input[type="file"] {
  font: 400 var(--t-small)/1.4 var(--face); color: var(--fog);
  background: var(--hull); border: var(--line); border-radius: var(--r-md); padding: var(--s3);
}


/* --- Virhesivut -------------------------------------------------------
   Oma pelkistetty sivu ilman ylapalkkia. Eksynyt kayttaja ei tarvitse
   valikkoa vaan yhden selvan tien takaisin. Numero on iso, koska se on
   ainoa asia joka kertoo mita tapahtui, ja merkki on sen takana, jotta
   sivu tuntuu meidan sivultamme eika palvelimen oletusvirheelta. */
body.is-fault {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  padding: var(--s6);
}

.fault {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s4); max-width: 34rem;
}

/* Merkki ja numero paallekkain: numero lukee merkin yli, ei sen vieressa. */
.fault-art { position: relative; display: grid; place-items: center; }
.fault-art .mark {
  /* Lahdekuva on 605 pikselia, joten kahden pisteen naytolla terava yláraja
     on noin 300 kaytettya pikselia. Suurempi alkaisi pehmentya. */
  width: clamp(180px, 46vmin, 300px); aspect-ratio: 1;
  background: url('/assets/img/logo-light.png') center / contain no-repeat;
  opacity: .28;
}
[data-theme="dark"] .fault-art .mark { background-image: url('/assets/img/logo-dark.png'); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fault-art .mark {
    background-image: url('/assets/img/logo-dark.png');
  }
}

/* Numero vie neljanneksen ruudun lyhyemmasta sivusta. */
.fault .code {
  position: absolute; margin: 0;
  font-size: clamp(4rem, 25vmin, 11rem); font-weight: 800; letter-spacing: -0.06em;
  line-height: 1; color: var(--snow);
  text-shadow: 0 2px 24px var(--ink), 0 0 3px var(--ink);
}

.fault h1 { font-size: var(--t-h2); margin: 0; }
.fault .say { color: var(--fog); margin: 0; }
.fault .btn { margin-top: var(--s2); }


/* Osoitehaku: yksi kentta paalla, ehdotukset sen alla. Lista on tavallinen
   luettelo painikkeita, joten nappaimisto ja ruudunlukija paasevat siihen
   kasiksi ilman erikoistemppuja. */
.address-search { position: relative; }
.address-results {
  list-style: none; margin: var(--s1) 0 0; padding: 0;
  position: absolute; inset-inline: 0; z-index: 20;
  background: var(--deck); border: var(--line); border-radius: var(--r-md);
  box-shadow: var(--lift); max-height: 260px; overflow-y: auto;
}
.address-results[hidden] { display: none; }
.address-results button {
  display: block; width: 100%; text-align: start;
  padding: var(--s2) var(--s3); border: 0; background: transparent;
  font: 400 var(--t-small)/1.4 var(--face); color: var(--snow); cursor: pointer;
}
.address-results button:hover,
.address-results button:focus-visible { background: var(--hull); color: var(--beam); }

/* Numerokentat ilman nuolia. Hinnat ja etaisyydet kirjoitetaan kasin, ja
   nuolinapit vievat tilaa, osuvat vahingossa ja houkuttelevat naputtelemaan
   suurta lukua yksi kerrallaan. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Hintakentta mahtuu kahteentoista merkkiin, eli miljardeihin asti, ja
   valuutan tunnus lepaa sen vieressa lihavana. */
.price-field { display: flex; align-items: center; gap: var(--s2); }
.price-field input { width: 13ch; font-variant-numeric: tabular-nums; }
.price-field .cur { font-weight: 700; font-size: var(--t-body); }

/* Hintalohko. Nykyinen hinta on paaasia, pyyntihinta sen ylapuolella pienena,
   kursiivina ja yliviivattuna. Muunnettu luku on arvio, ei hinta, ja se
   erottuu varilla eika huuda kokoa. */
.price .now { font-weight: 700; }
.price .now .cur { font-weight: 700; margin-inline-start: .15em; }
.price .was {
  display: block; font-size: var(--t-small); font-style: italic;
  text-decoration: line-through; color: var(--fog); font-weight: 400;
}
.price .was .cur { font-weight: 400; margin-inline-start: .15em; }
.price .conv {
  font-style: italic; font-weight: 400; color: var(--beam);
  margin-inline-start: var(--s2);
}
.price .was .conv { color: var(--fog); }

/* Valuutan valitsin hinnan vieressa: pieni ja hillitty, ei kilpaile hinnan
   kanssa huomiosta. */
.cur-switch {
  font-size: var(--t-small); font-weight: 600; color: var(--fog);
  border-bottom: 1px solid transparent;
}
.cur-switch:hover { color: var(--beam); border-bottom-color: var(--beam); }

/* Hallintasivut. Tiheat ja koruttomat tarkoituksella: niita katsoo yksi
   ihminen paivittain, ja hanelle merkitsee montako paatosta minuutissa. */
.admin-nav { display: flex; gap: var(--s4); margin-bottom: var(--s6); }
.admin-nav a { font-weight: 600; color: var(--fog); }
.admin-nav a.on, .admin-nav a:hover { color: var(--beam); }
.admin-nav .badge {
  background: var(--alert); color: var(--snow); border-radius: 999px;
  padding: 0 .5em; font-size: var(--t-small);
}
.mod-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mod-item { margin: 0; background: var(--deck); border: var(--line);
  border-radius: var(--r-md); padding: var(--s3); }
.mod-item img { width: 100%; height: 200px; object-fit: contain;
  background: var(--deck); display: block; }
.mod-item figcaption { display: flex; flex-direction: column; gap: var(--s1);
  margin: var(--s2) 0; font-size: var(--t-small); }
.mod-item form { display: flex; gap: var(--s2); }
.mod-item .warn { color: var(--alert); font-weight: 600; }
.mod-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.mod-table th, .mod-table td {
  text-align: start; padding: var(--s2); border-bottom: var(--line);
}
.ok { color: var(--beam); font-weight: 600; }