@font-face {
  font-family: 'Lastik';
  src: url('/fonts/lastik/LastikFreeFont-Free.woff2') format('woff2'),
       url('/fonts/lastik/LastikFreeFont-Free.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

:root {
  /* Light (primary) — warm off-white paper, deep forest ink, forest-green accent */
  --bg: #f6f8f6;
  --side-bg: #eef2ee;
  --card: #ffffff;
  /* Tekstivärit annettu komponenttispeksissä: #333333 default, #777777 subtle.
     --ink-2 (välitaso, ei speksissä) asetettu näiden puoliväliin. Vihertävä ink
     jäi siis pois vaaleasta teemasta; tumma teema pitää omat arvonsa. */
  --ink: #333333;
  --ink-2: #555555;
  --muted: #777777;
  --line: rgba(16, 35, 26, 0.12);
  --line-soft: rgba(16, 35, 26, 0.07);
  --hover: rgba(16, 35, 26, 0.05);
  --accent: #1c4a31;
  --accent-2: #2a6b45;
  --accent-soft: rgba(28, 74, 49, 0.12);
  --accent-ink: #ffffff;
  /* Painikkeiden ja footer-laatan väri. Oli hetken Luminous Blue (Coloro
     125-28-38), palautettu tummaan vihreään 2026-08-03 – sama forest-perhe kuin
     accentilla, mutta omana tokeninaan, koska footer-laatan hehkut johdetaan
     tästä color-mixillä. Tummassa teemassa vaaleampi askel, kuten accentilla. */
  --btn: #1c4a31;
  --btn-2: #2a6b45;
  --btn-ink: #ffffff;
  --good: #1c4a31;
  --good-bg: rgba(28, 74, 49, 0.10);
  --warn: #c2791e;
  --warn-bg: rgba(194, 121, 30, 0.10);
  --bad: #c4453d;
  --bad-bg: rgba(196, 69, 61, 0.09);
  --tarjous: #8b5cf6;
  --tarjous-bg: rgba(139, 92, 246, 0.10);
  --tag-bg: rgba(16, 35, 26, 0.06);
  /* Kaavioiden järjestysasteikko (ordinal ramp): neljä askelta accent-sävyn ympärillä,
     vaaleasta turkoosinvihreästä syvään metsänvihreään. Käytössä pinotuissa
     myyntimääräpylväissä, joissa huoneistotyypit ovat kokojärjestyksessä
     (yksiö → rivitalo) – järjestys kuuluu näkyä värissä, siksi asteikko eikä neljä
     irrallista väriä. Askel liikkuu sekä kirkkaudessa (ΔL ≈ 0,14) että sävyssä
     (182° → 149°, yhteensä 34° = saman perheen sävyjä): pelkkä kirkkausero jätti
     keskimmäiset askeleet liian samankaltaisiksi. Vierekkäisten erotus on nyt
     ΔE 13,8–14,9 (aiemmin 9,0–10,2) ja vaalein askel yltää 2,05:1 korttia vasten.
     Validoitu; jos asteikkoa muuttaa, muuta koko asteikko kerralla. */
  --ramp-1: #5ec6b6;
  --ramp-2: #00a07b;
  --ramp-3: #00753f;
  --ramp-4: #004710;
  --shadow: rgba(16, 35, 26, 0.12);
  --shadow-sm: 0 1px 2px rgba(16, 35, 26, 0.05), 0 1px 1px rgba(16, 35, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 35, 26, 0.08), 0 2px 6px rgba(16, 35, 26, 0.05);
  --shadow-lg: 0 24px 56px rgba(16, 35, 26, 0.14), 0 4px 12px rgba(16, 35, 26, 0.06);
  --r-sm: 10px;
  --r-md: 14px;
  /* Komponenttispeksi: painike 32 px / 10 px kulma, pilli (badge) 20 px / 6 px,
     tietorivi 40 px. Yhdet arvot molemmille teemoille. */
  --h-btn: 32px;
  --r-btn: 10px;
  --h-badge: 20px;
  --r-badge: 6px;
  --h-row: 40px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Vain logon sanamerkille ("Arvio") - käsinkirjoitettu, leikkisä ilme. */
  --font-logo: 'Lastik', 'Fredoka', var(--font-display);
  /* Liquid-glass surfaces: translucent + blurred, with a soft top highlight rim */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --glass-blur: blur(22px) saturate(180%);
  --ambient: radial-gradient(1000px 480px at 12% -8%, rgba(28, 74, 49, 0.09), transparent 60%),
             radial-gradient(900px 460px at 100% 0%, rgba(42, 107, 69, 0.06), transparent 55%);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark (secondary/derived) — plain neutral charcoal/grey; green appears only as a highlight
       (buttons, links, active states, positive numbers), never tinting the base surfaces. */
    --bg: #0c0c0d;
    --side-bg: #101011;
    --card: #19191b;
    --ink: #ededee;
    --ink-2: rgba(237, 237, 238, 0.76);
    --muted: rgba(237, 237, 238, 0.48);
    --line: rgba(237, 237, 238, 0.11);
    --line-soft: rgba(237, 237, 238, 0.06);
    --hover: rgba(237, 237, 238, 0.06);
    /* Sama forest-sävy kuin vaaleassa, mutta vaaleampi askel: forest sellaisenaan
       (#1c4a31) jää lähes näkymättömäksi #0c0c0d-taustaa vasten (kontrasti ~1,6:1),
       eikä kelpaisi linkki-/lukutekstin väriksi. Sävy ja vaimennus säilyvät. */
    --accent: #4f8a64;
    --accent-2: #63a079;
    --accent-soft: rgba(79, 138, 100, 0.18);
    --accent-ink: #f4faf6;
    /* Sama vihreä vaaleampana askeleena tummalle pinnalle. */
    --btn: #2a6b45;
    --btn-2: #38855a;
    --btn-ink: #f4faf6;
    --good: #4f8a64;
    --good-bg: rgba(79, 138, 100, 0.16);
    --warn: #c98f4e;
    --warn-bg: rgba(201, 143, 78, 0.16);
    --bad: #c96b64;
    --bad-bg: rgba(201, 107, 100, 0.15);
    --tarjous: #9c85e0;
    --tarjous-bg: rgba(156, 133, 224, 0.15);
    --tag-bg: rgba(237, 237, 238, 0.07);
    /* Sama asteikko tummalle pinnalle omina askeleinaan (ei automaattinen käännös):
       sävyjärjestys säilyy askel askeleelta (yksiöt turkoosin puolella, rivitalot
       vihreän), mutta kirkkaussuunta kääntyy – pienin huoneistotyyppi jää
       vaimeimmaksi ja suurin kirkkaimmaksi, kuten vaaleassakin. Vierekkäisten
       erotus ΔE 13,3–14,4, vaimein askel 2,55:1 korttia vasten. */
    --ramp-1: #006659;
    --ramp-2: #009471;
    --ramp-3: #38c085;
    --ramp-4: #9ae6a8;
    --shadow: rgba(0, 0, 0, 0.55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
    --glass-bg: rgba(28, 28, 30, 0.55);
    --glass-bg-strong: rgba(28, 28, 30, 0.74);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    --glass-blur: blur(26px) saturate(140%);
    --ambient: radial-gradient(1000px 480px at 12% -8%, rgba(255, 255, 255, 0.028), transparent 60%),
               radial-gradient(900px 460px at 100% 0%, rgba(255, 255, 255, 0.018), transparent 55%);
  }
}

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  font: 14px/1.55 var(--font-body);
  background: var(--ambient), var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); }

/* ---------- Liquid glass: translucent, blurred chrome for floating surfaces ---------- */
/* Applied selectively to nav chrome, overlays and the two signature cards — data-dense
   tables/forms stay opaque so nothing behind them fights for legibility. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .sidebar, .modal-card, .listmenu, .tooltip, .banner, .home-search, .share-banner {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .modal { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* ---------- Sivupalkki ---------- */
.sidebar {
  width: 258px;
  flex-shrink: 0;
  background: var(--glass-bg-strong);
  border-right: 1px solid var(--line-soft);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100vh;
  position: sticky;
  top: 0;
}
/* Logo + "Uusi analyysi" pysyvät kiinni yläreunassa; loput navista vierii omana alueenaan. */
.side-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.side-app { display: flex; align-items: center; padding: 4px 8px 14px; color: inherit; text-decoration: none; cursor: pointer; }
/* "Analyysi"-logotyyppi (Figma-tekstistä vektoroitu polku, ei rasterikuva).
   Sivupalkissa ja topbarin murupolun juuressa vain sanamerkki, ei avainikonia.
   fill="currentColor" seuraa väriä automaattisesti valo-/tummassa tilassa. */
.logo-wordmark { display: block; flex-shrink: 0; width: auto; }
.side-app .logo-wordmark { height: 20px; }
.side-new {
  display: flex; align-items: center;
  margin: 0 2px 14px;
  min-height: var(--h-btn);
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.side-new:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.side-item:hover { background: var(--hover); }
.side-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.side-item.active span:first-of-type { color: var(--accent); }
.side-item[hidden] { display: none; } /* .side-item:n oma display:flex muuten kumoaisi hidden-attribuutin */
.side-item span:first-of-type { color: var(--ink-2); }
.side-count { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Viimeisimmät-listan arvio: sama väriluokitus kuin "Ero arvioon" -pilleissä
   (ks. diffTagCls app.js:ssä), mutta pelkkänä tekstivärinä – ei omaa pilliä
   jokaiselle riville, ettei sivupalkki muutu kirjavaksi. */
.side-count.red { color: var(--bad); }
.side-count.green { color: var(--good); }
.side-count.blue { color: var(--accent); }
.side-section { margin-top: 16px; }
.side-section.grow { flex: 1; }
/* Sentence case, ei versaaleja: otsikot ovat "Listat"/"Viimeisimmät" sellaisenaan
   HTML:ssä. Versaalien kanssa käytetty 11px + harvennus näyttäisi pienaakkosilla
   kutistuneelta, siksi hieman isompi kirjasin ja normaali kirjainväli. */
.side-heading {
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.recent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
/* Nimi kutistuu ja tavutuu "…":lla; hinta/arvio ja poistonappi pysyvät kiinteinä
   oikealla – ennen tätä koko rivin ellipsis leikkasi tekstin ilman "…":ia heti kun
   toinen elementti (side-count, arvio) alkoi viedä tilaa. */
.recent-item > span:first-child {
  min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-item:hover { background: var(--hover); }
.recent-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.recent-item .del {
  margin-left: auto; visibility: hidden;
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px;
}
.recent-item:hover .del { visibility: visible; }
.side-footer { flex-shrink: 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.side-empty { padding: 4px 10px; color: var(--muted); font-size: 13px; }

/* ---------- Listat-teaser (kirjautumaton, sivupalkki) ---------- */
.list-teaser { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.list-teaser-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--hover);
  opacity: 0.55;
  font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-teaser-pitch { display: flex; align-items: flex-start; gap: 7px; padding: 2px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.list-teaser-lock { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--muted); }

/* ---------- Päänäkymä ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  position: sticky; top: 0;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--line-soft);
  z-index: 5;
}
/* Ei murupolkua eikä nappeja (koti, lomake, staattiset infosivut) -> ei myöskään
   näkyvää palkkia työpöydällä. Mobiilissa palkki palautetaan @media 800px, koska
   #menuBtn (☰) tarvitsee taustan pysyäkseen luettavana vieritettävän sisällön päällä. */
.topbar.is-bare { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* min-width:0 antaa murupolun kutistua CTA-napin ("Laske asunnon arvo →")
   tieltä kapealla mobiilinäytöllä – ilman tätä pitkä murupolku (esim.
   "Tietolähde & menetelmä") tavutui kolmelle riville ja työnsi napin osittain
   näytön ulkopuolelle, mikä vieritti koko sivun vaakasuuntaan. */
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 14px; min-width: 0; flex: 1; }
.crumb-page { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-share {
  font: inherit; font-weight: 700;
  height: var(--h-btn); padding: 0 18px;
  display: inline-flex; align-items: center;
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-2), var(--btn));
  border: none; border-radius: var(--r-btn);
  cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.btn-share[hidden] { display: none; } /* kuten .btn[hidden]: inline-flex kumoaisi muuten hidden-attribuutin */
.btn-share:hover { filter: brightness(1.06); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1px); }

.page { flex: 1; max-width: 780px; width: 100%; margin: 0 auto; padding: 24px 32px 96px; }
.page-title { font-family: var(--font-display); margin: 10px 0 4px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.page-sub { margin: 0 0 24px; color: var(--muted); }
.muted { color: var(--muted); font-weight: 400; font-size: 0.92em; }

/* ---------- Lomake ---------- */
.form-block { margin: 22px 0; }
.block-label { font-weight: 700; margin-bottom: 10px; }
.block-note { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: -4px 0 12px; max-width: 68ch; }
.block-note a { color: var(--accent); }
.url-row { display: flex; gap: 8px; }
.url-row input { flex: 1; }
input, select, button { font: inherit; color: inherit; }
input, select {
  width: 100%;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
/* Painikkeen mitat tulevat komponenttispeksistä: 32 px korkeus, 10 px kulma
   (--r-btn). Pilliäbutton-muoto poistui siis kaikkialta; --r-pill jää käyttöön
   pilleille (.tag ei, ks. alla) ja kelluvalle kromille. */
.btn {
  height: var(--h-btn);
  padding: 0 16px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn[hidden] { display: none; } /* .btn:n oma display:inline-flex muuten kumoaisi hidden-attribuutin */
.btn:hover { background: var(--hover); box-shadow: var(--shadow-sm); }
.btn.primary {
  background: linear-gradient(180deg, var(--btn-2), var(--btn));
  border-color: transparent; color: var(--btn-ink); font-weight: 700; padding: 0 22px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid label { display: block; font-size: 13px; color: var(--muted); }
.grid label input, .grid label select { margin-top: 4px; color: var(--ink); }
.grid .check { display: flex; align-items: center; gap: 8px; color: var(--ink); padding-top: 20px; }
/* Switch komponenttispeksistä: 24×14 px rata, 10 px nuppi, #0077E6 päällä.
   Sovelluksen ainoat boolean-kentät (hissi, sauna) olivat natiiveja
   valintaruutuja; ne on tyylitelty switchiksi, semantiikka säilyy
   (input[type=checkbox], sama fokus- ja näppäimistökäyttö). */
.grid .check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex-shrink: 0;
  width: 24px; height: 14px; margin: 0;
  padding: 0; border: none; border-radius: 7px;
  background: #c9ced6;
  cursor: pointer;
  transition: background .15s ease;
}
.grid .check input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform .15s ease;
}
.grid .check input[type="checkbox"]:checked { background: #0077E6; }
.grid .check input[type="checkbox"]:checked::after { transform: translateX(10px); }
.grid .check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.span2 { grid-column: span 2; }
.status { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.status.error { color: var(--bad); }
.status.ok { color: var(--good); }

/* ---------- Analyysi: ominaisuusrivit ---------- */
.props { margin: 18px 0 8px; }
/* Tietorivin korkeus komponenttispeksistä (40 px). Speksin toinen rivikorkeus
   ("44px stores") jäi käyttämättä: sovelluksessa ei ole vastaavaa riviä. */
.prop {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0;
  min-height: var(--h-row);
}
.prop-k { width: 160px; flex-shrink: 0; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
/* min-width:0 + overflow-wrap: pitkä katkeamaton teksti (esim. Ilmoitus-rivin
   lyhennetty URL) ei muuten mahdu kapealla mobiilinäytöllä ja työntää koko
   sivun vaakasuuntaan vierittyväksi – flex-lapsen automaattinen minimileveys
   perustuu sanan täyteen leveyteen, ellei min-width:0 ohita sitä. */
.prop-v { color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.prop-v a { color: var(--accent); text-decoration: none; }
.prop-v a:hover { text-decoration: underline; }
/* Badge = .tag. Speksistä otettiin vain mitat (20 px korkeus, 6 px kulma).
   Värit tulevat tokeneista kaikissa varianteissa: speksin väripari
   #CAFACE/#15B042 oli käytössä hetken .tag.green:issä, mutta se jäi liian
   heikoksi luettavaksi (kontrasti 2,5:1) – erityisesti tummassa teemassa, jossa
   vaalea täyttö loisti irti pinnasta. Älä palauta sitä. */
.tag {
  display: inline-flex; align-items: center;
  height: var(--h-badge);
  padding: 0 10px;
  border-radius: var(--r-badge);
  background: var(--tag-bg);
  font-size: 13px;
  margin-right: 6px;
  white-space: nowrap;
}
.tag.blue { background: var(--accent-soft); color: var(--accent); }
.tag.red { background: var(--bad-bg); color: var(--bad); }
.tag.green { background: var(--good-bg); color: var(--good); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.tarjous { background: var(--tarjous-bg); color: var(--tarjous); font-weight: 600; }
/* Ominaisuusrivien (.prop-v) pillit voivat sisältää pitkän kuvaustekstin (esim.
   "Putkiremontti tehty 2010 · ikääntyvä") – .tag:n muualla tarkoituksellinen
   white-space:nowrap työnsi tämän leveyden yli näytön kapealla mobiilinäytöllä,
   mikä vieritti koko sivun vaakasuunnassa. Sallitaan rivitys vain täällä. */
/* Kiinteä 20 px:n badge-korkeus ei päde täällä: monirivinen teksti leikkautuisi.
   Väljempi padding kuin tiiviissä badgessa – nämä pillit ovat pitkiä lauseita,
   eivät lukuja, ja rivittyvät useammalle riville (siksi myös margin-bottom). */
.prop-v .tag {
  display: inline-block;
  white-space: normal;
  height: auto; min-height: var(--h-badge);
  padding: 5px 12px;
  margin-bottom: 5px;
}
.divider { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0; }

/* ---------- Verdict-banneri (signature: löytö-kortti) ---------- */
.banner {
  position: relative;
  border-radius: var(--r-xl);
  padding: 24px 26px;
  margin: 24px 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}
.banner-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.banner.bad .banner-title { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.banner.warn .banner-title { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.banner.good .banner-title { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.banner.ok .banner-title { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.banner.tarjous .banner-title { background: var(--tarjous-bg); color: var(--tarjous); border-color: color-mix(in srgb, var(--tarjous) 30%, transparent); }
.banner-body { color: var(--ink-2); font-size: 13.5px; }
.banner-dismiss {
  position: absolute; top: 14px; right: 14px;
  border: none; background: none; color: var(--muted); cursor: pointer; padding: 4px; font-size: 13px;
}
.banner-dismiss:hover { color: var(--ink); }
.list-nudge { padding: 18px 44px 18px 22px; margin: 0 0 20px; }
/* Pyyntihinta vs. laskennallinen arvio -sankarivertailu verdict-bannerissa.
   Kaksi kokonaishintaa vierekkäin: luvut ovat pidempiä kuin aiemmat €/m²-luvut
   (esim. "1 245 000 €"), joten koko on 34 px eikä 42, ja kapealla näytöllä
   nuoli katoaa ja luvut kutistuvat 24 px:iin – muuten vertailu jakautuisi
   kahdelle riville eikä pari enää lukisi parina. */
.deal-hero { display: flex; align-items: flex-start; gap: 26px; margin: 4px 0 14px; flex-wrap: wrap; }
.deal-col { text-align: center; }
.deal-big { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.deal-big.lo { color: var(--good); }
.deal-big.hi { color: var(--bad); }
.deal-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.deal-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.deal-arrow { font-size: 18px; color: var(--line); margin-top: 9px; }
.deal-gap { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.deal-gap strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.deal-gap.lo strong { color: var(--good); }
.deal-gap.hi strong { color: var(--bad); }
.deal-detail { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 620px) {
  .deal-hero { gap: 14px; }
  .deal-big { font-size: 24px; }
  .deal-col { text-align: left; }
  .deal-arrow { display: none; }
}

.gauge { margin-top: 18px; }
.gauge-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--good) 0%, color-mix(in srgb, var(--good) 25%, transparent) 30%, var(--tag-bg) 50%, color-mix(in srgb, var(--bad) 25%, transparent) 70%, var(--bad) 100%);
  opacity: 0.9;
}
.gauge-range {
  position: absolute; top: -3px; bottom: -3px;
  border: 1.5px solid var(--ink-2);
  border-radius: var(--r-pill);
  opacity: 0.7;
}
.gauge-marker {
  position: absolute; top: -6px; bottom: -6px;
  width: 4px; border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--card);
}
.gauge-labels {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px; color: var(--muted);
}

/* ---------- Tilastokortit ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.stats.stats-wrap { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
/* Pitkät yhdyssanat katkaistaan sanarajalta: labeleissa on pehmeä tavuviiva
   (­, esim. "Korkea­koulutettuja"), jonka selain valitsee ennen
   break-wordin mielivaltaista katkoa ("KORKEAKOUL / UTETTUJA"). break-word jää
   siis vain hätävaraksi – jos lisäät uuden pitkän labelin, lisää sille ­. */
.stat-k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); overflow-wrap: break-word; hyphens: manual; }
.stat-v { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.01em; margin: 5px 0 2px; font-variant-numeric: tabular-nums; }
.stat-s { font-size: 12px; color: var(--muted); }
.stat-cmp { margin-top: 6px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: help; }
.stat-cmp.up { color: var(--good); }
.stat-cmp.down { color: var(--bad); }
.stat-cmp.even { color: var(--muted); }
.stat-cmp.warn { color: var(--warn); }
/* Yksikkö ison luvun perässä (esim. "42 pv") – pienempi ja vaimeampi kuin luku. */
.stat-unit { font-size: 0.52em; font-weight: 700; color: var(--muted); margin-left: 4px; letter-spacing: 0; }

/* ---------- Erittely ---------- */
h2.section { font-size: 20px; margin: 34px 0 10px; }
.brk { width: 100%; border-collapse: collapse; }
.brk td { height: var(--h-row); padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.brk td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.brk .sub { color: var(--muted); font-size: 12.5px; }
.brk .up td:last-child { color: var(--good); }
.brk .down td:last-child { color: var(--bad); }
.brk .warnrow td:first-child { color: var(--warn); }
.brk .total td { border-bottom: none; border-top: 2px solid var(--line); font-weight: 700; padding-top: 12px; }
/* Erittelyn ℹ-nappi: pieni, huomaamaton, mutta klikattava (myös mobiilissa). */
.brk-i {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  width: 18px; height: 18px; border-radius: 50%; padding: 0; margin-left: 2px;
  font-size: 11px; line-height: 1; font-weight: 700; cursor: pointer;
  vertical-align: middle; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.brk-i:hover { border-color: var(--accent); color: var(--accent); }
.brk-i.open { background: var(--accent); border-color: var(--accent); color: #fff; }
.brk-i-inline { border: 1px solid var(--line); border-radius: 50%; padding: 0 4px; font-size: 11px; font-weight: 700; }
.brk .brk-info td {
  padding: 2px 0 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: normal; text-align: left;
}
.brk-chart-btn { font-size: 12px; }
/* Kosketuslaitteilla 18 px:n nappi on liian pieni osua. Suurennetaan itse nappi
   (ei läpinäkyvää ::after-osumakenttää): vierekkäiset ℹ️ ja 📊 ovat vain parin
   pikselin päässä toisistaan, joten laajennettu osuma-alue menisi päällekkäin
   ja klikkaus osuisi väärään nappiin. Väli kasvatetaan samalla. */
@media (max-width: 800px), (pointer: coarse) {
  .brk-i { width: 32px; height: 32px; font-size: 15px; margin-left: 8px; }
  .brk-chart-btn { font-size: 15px; }
}
.row-chart-box { margin: 6px 0 8px; }
.reno-cap { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.brk-note { margin-top: 10px; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Kaavio ---------- */
.chart-wrap { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); padding: 18px 18px 10px; margin-top: 12px; }
.chart-svg { width: 100%; height: auto; display: block; }
/* Kuvaajien kaksi kokoluokkaa (ks. app.js: dualChart). Sama kuvaaja piirretään
   sekä 700 että 380 yksikön viewBoxiin ja vain toinen näytetään: kiinteä viewBox
   kutistuisi puhelimessa ~0,46×, jolloin akselitekstistä tulisi ~5 px. Valinta on
   CSS:ssä eikä JS:ssä, koska samat kuvaajat renderöidään palvelimella JS-vapaille
   aluesivuille – ja koska näin näkymä seuraa ikkunan kokoa ilman uudelleenpiirtoa. */
.chart-narrow { display: none; }
@media (max-width: 620px) {
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .chart-wrap { padding: 12px 10px 6px; }
}
.chart-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 22px; }
.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md), var(--glass-highlight);
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.tooltip .t-k { color: var(--muted); }

/* ---------- Kaikki analyysit -lista ---------- */
.analysis-list { margin-top: 16px; }
.analysis-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.analysis-row:hover { background: var(--hover); }
/* Pitkä nimi kutistuu kolmella pisteellä eikä työnnä päivämäärää tai
   poistopainiketta rivin ulkopuolelle kapealla näytöllä. */
.analysis-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-row .sub { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
/* Jakolinkin poisto rivillä: vaimea kunnes rivi on aktiivinen, jottei hallinta
   kilpaile sisällön kanssa. Kosketuslaitteilla aina näkyvissä (ei hoveria). */
.row-share-del {
  flex: none; padding: 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  opacity: 0.55; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.analysis-row:hover .row-share-del, .row-share-del:focus-visible { opacity: 1; }
.row-share-del:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.row-share-del.confirm { opacity: 1; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad-bg); }
.row-share-del[disabled] { opacity: 0.4; cursor: default; }
@media (hover: none) { .row-share-del { opacity: 1; } }

.prose p { color: var(--ink-2); }
.prose ul { color: var(--ink-2); margin: 8px 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 4px 16px;
}
.faq-item summary {
  padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 20px; font-weight: 400; color: var(--muted); flex: none;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 14px; color: var(--ink-2); }

/* ---------- Talous: kuukausikustannus & vuokratuotto graafit ---------- */
.money-head { display: flex; flex-direction: column; margin: 6px 0 14px; }
.money-big { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.money-unit { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.money-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.money-block-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }

/* Korkosäädin */
.rate-control {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 4px 0 14px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.rate-control label { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rate-control input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.rate-num { display: flex; align-items: center; gap: 4px; }
.rate-num input { width: 58px; padding: 6px 8px; text-align: right; border-radius: var(--r-sm); }
.rate-num span { color: var(--muted); font-size: 13px; }

.hbar {
  display: flex; width: 100%; height: 26px;
  border-radius: var(--r-pill); overflow: hidden;
  background: var(--tag-bg);
  gap: 2px;
}
.hbar-seg { min-width: 3px; transition: flex-grow 0.2s; }
.hbar-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.hbar-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.hbar-legend .lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.hbar-legend .lg b { font-variant-numeric: tabular-nums; }

.cmp2 { display: flex; flex-direction: column; gap: 8px; }
.cmp2-row { display: flex; align-items: center; gap: 10px; }
.cmp2-lbl { width: 74px; flex-shrink: 0; font-size: 13px; color: var(--ink-2); }
.cmp2-track { flex: 1; height: 20px; background: var(--tag-bg); border-radius: var(--r-pill); overflow: hidden; }
.cmp2-fill { height: 100%; border-radius: var(--r-pill); min-width: 2px; transition: width 0.25s; }
.cmp2-val { width: 96px; flex-shrink: 0; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.yield-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.yield-big { display: flex; align-items: baseline; gap: 10px; }
.yield-big .tag { font-family: var(--font-display); font-size: 26px; font-weight: 800; height: auto; padding: 3px 14px; border-radius: var(--r-pill); }
.yield-lbl { color: var(--muted); font-size: 13px; }
.yield-side { color: var(--ink-2); font-size: 13px; }
.brk-note.neg { color: var(--bad); }

/* ---------- Rakennusajan riskilista ---------- */
.era-list { list-style: none; margin: 8px 0 0; padding: 0; }
.era-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 14px; margin-bottom: 6px;
  border-radius: var(--r-md);
  font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.era-item.warn { background: var(--warn-bg); border-color: transparent; }
.era-item.info { background: var(--card); }
.era-ic { flex-shrink: 0; }
@media (max-width: 480px) {
  .cmp2-lbl { width: 60px; }
  .cmp2-val { width: 80px; }
}

/* ---------- Listavalikko (+ Listaan) ---------- */
.top-actions { display: flex; gap: 8px; align-items: center; }
.listmenu-wrap { position: relative; }
.listmenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg), var(--glass-highlight);
  padding: 6px;
  z-index: 20;
}
.listmenu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none; background: none;
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.listmenu-item:hover { background: var(--hover); }
.listmenu-item .tick { margin-left: auto; color: var(--good); }
.listmenu-sep { border: none; border-top: 1px solid var(--line-soft); margin: 6px 0; }

/* ---------- Vertailutaulukko (listasivu) ---------- */
/* Läpinäkymätön data-pinta tarkoituksella (ks. CLAUDE.md liquid-glass-sääntö) —
   kelluvat ainekset ympärillä (.listmenu, list-luonti .modal-card, .topbar) ovat lasia,
   itse rivit eivät. .cmp-wrap vierittää vaakasuunnassa sen sijaan että solut/otsikot
   tavuttuisivat kahdelle riville kapealla näytöllä tai pitkällä osoitteella. */
.cmp-wrap { width: 100%; overflow-x: auto; margin-top: 16px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.cmp th {
  text-align: left;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.cmp td { height: var(--h-row); padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.cmp .num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp th.num { text-align: right; }
.cmp tbody tr { cursor: pointer; }
.cmp tbody tr:hover { background: var(--hover); }
.cmp .name { font-weight: 600; }
.cmp .sub { color: var(--muted); font-size: 12px; }
.cmp .del {
  border: none; background: none; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.cmp .del:hover { background: var(--hover); color: var(--bad); }
.cmp-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* ---------- Kartta + auringon kulku ---------- */
.map-wrap {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.map-wrap iframe { display: block; width: 100%; height: 340px; border: 0; }
.map-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.map-precision {
  position: absolute; left: 8px; bottom: 8px;
  background: var(--card); color: var(--muted);
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
}
.map-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 22px; }
.map-note a { color: var(--accent); }

/* ---------- Galleria / pohjapiirros ---------- */
.gallery { margin-top: 12px; }
.gallery-main {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 100%; max-height: 460px; object-fit: contain; display: block; }
.gallery-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 8px 0 2px;
}
.gthumb {
  height: 56px; width: 74px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
}
.gthumb:hover { opacity: 1; }
.gthumb.active { border-color: var(--accent); opacity: 1; }

/* ---------- Etusivu: haku + viimeisimmät ---------- */
.home-hero { max-width: 600px; margin: 0 auto; padding: 96px 0 40px; text-align: center; }
.home-logo { display: flex; align-items: center; justify-content: center; }
/* Avainnippu-ikoni + "Analyysi"-logotyyppi yhtenä PNG-lukkona (ei vektori —
   sisältää rasteroidun ikonin). Valo-/tummatila vaihdetaan kahdella kuvalla, ei
   suodattimella, jotta molemmat pysyvät terävinä. */
.home-logo .logo-full { display: block; height: 64px; width: auto; }
.home-logo .logo-full-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .home-logo .logo-full-light { display: none; }
  .home-logo .logo-full-dark { display: block; }
}
.home-tag { margin: 16px 0 34px; color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }
.home-search {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 18px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md), var(--glass-highlight);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.home-search:focus-within { box-shadow: var(--shadow-md), var(--glass-highlight); }
.home-search input {
  flex: 1; min-width: 0; border: none; background: none; padding: 9px 8px 9px 0; border-radius: 0; font-size: 15.5px;
}
.home-search input:focus { outline: none; border-color: transparent; box-shadow: none; }
/* Etusivun hakukenttä on signature-elementti ja pysyy pillinä. Lähetysnappi on
   ChatGPT:n tapaan pyöreä ikoninappi (ylöspäin osoittava nuoli), ei tekstinappi –
   se on myös ainoa poikkeus painikespeksin 10 px:n kulmaan, koska ympyrä on
   nimenomaan haettu muoto. Mitta pidetään kentän sisäkorkeutta pienempänä. */
.home-search .btn.primary.home-search-btn {
  width: 36px; height: 36px; flex-shrink: 0; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-search-btn svg { display: block; }
.home-manual { margin: 20px 0 0; }
.home-manual a { color: var(--accent); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.home-manual a:hover { text-decoration: underline; }

.home-recent { max-width: 900px; margin: 16px auto 0; }
/* Sentence case, sama linja kuin sivupalkin .side-heading:llä. */
.home-recent-heading {
  font-size: 13.5px; font-weight: 700;
  color: var(--muted); margin: 0 0 14px;
}
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.home-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.home-card-img {
  aspect-ratio: 16 / 10; background-color: var(--hover); background-position: center; background-size: cover; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--muted);
}
.home-card-body { padding: 14px 16px 16px; }
.home-card-addr {
  font-size: 12.5px; color: var(--muted); margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-card-price {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-card-est {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin: 5px 0 0;
}
.home-card-est strong { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.home-card-est .tag { margin: 0; }
.home-card-meta {
  font-size: 12.5px; color: var(--muted); margin: 3px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-empty { color: var(--muted); font-size: 13.5px; }

/* ---------- Latausnäkymä ---------- */
.loading-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 120px 0; text-align: center;
}
.loading-logo { display: flex; align-items: center; justify-content: center; }
.loading-logo .logo-full { display: block; height: 40px; width: auto; }
.loading-logo .logo-full-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .loading-logo .logo-full-light { display: none; }
  .loading-logo .logo-full-dark { display: block; }
}
.loading-msg { color: var(--muted); font-size: 15px; max-width: 420px; transition: opacity 0.2s ease; }

@media (max-width: 800px) {
  /* Sivupalkki muuttuu vedettäväksi laatikoksi (menuBtn avaa). */
  .sidebar {
    display: flex; position: fixed; z-index: 60; top: 0; left: 0; height: 100%;
    transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 40px var(--shadow);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 55;
    background: rgba(16, 35, 26, 0.32);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  /* Aluesivut (area-pages.js): sama avaus/sulkeutuminen ilman JS:ää, checkbox-hackilla. */
  .nav-toggle-cb:checked ~ .sidebar { transform: translateX(0); }
  .nav-toggle-cb:checked ~ .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(16, 35, 26, 0.32);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .topbar #menuBtn { display: inline-flex; }
  .topbar.is-bare { background: var(--glass-bg); border-bottom-color: var(--line-soft); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  .page { padding: 16px; }
  /* HUOM: footerin mobiilisäännöt ovat tiedoston LOPUN @media-lohkossa, eivät
     tässä – footerin perussäännöt tulevat tässä kohtaa myöhemmin tiedostossa ja
     kumoaisivat nämä (media query ei nosta spesifisyyttä). */
  .stats { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .home-hero { padding: 18px 0 20px; }
  .home-logo { margin-bottom: 24px; }
  .home-logo .logo-full { height: 40px; }
  .home-tag { display: none; }
  .home-search { padding: 5px 5px 5px 16px; }
  /* Valitsin on tarkoituksella yhtä spesifinen kuin työpöydän sääntö, jotta
     mobiilin oma kosketuskokoinen nappi voittaa sen. */
  .home-search .btn.primary.home-search-btn { width: 38px; height: 38px; }
  .home-manual { margin: 14px 0 0; }
  .home-recent { margin-top: 22px; }
  .home-cards { grid-template-columns: 1fr; gap: 14px; }
  .home-card-img { aspect-ratio: 4 / 3; }
}

/* ---------- Tililaatikko (sivupalkin alaosa) ---------- */
.auth-box { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 8px; }
.auth-email { display: flex; align-items: center; gap: 6px; padding: 2px 6px; font-size: 13px; color: var(--ink-2); }
.auth-email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-btn { display: flex; align-items: center; width: 100%; min-height: var(--h-btn); box-sizing: border-box; font: inherit; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); cursor: pointer; }
.as-btn:hover { background: var(--hover); }
.as-btn.primary { background: linear-gradient(180deg, var(--btn-2), var(--btn)); border-color: transparent; color: var(--btn-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.as-btn.primary:hover { filter: brightness(1.06); }
.auth-hint { padding: 0 6px; font-size: 11.5px; color: var(--muted); }

/* ---------- Modaali ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 35, 26, 0.35); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 380px; padding: 28px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--glass-highlight); }
.modal-card h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.modal-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.modal-card form { display: flex; flex-direction: column; gap: 12px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.modal-card input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink); }
.modal-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-card .btn.primary { width: 100%; margin-top: 4px; }
.modal-close { position: absolute; top: 14px; right: 14px; padding: 4px; font-size: 16px; color: var(--muted); background: none; border: none; cursor: pointer; }
.modal-close:hover { color: var(--ink); }
.modal-toggle { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.modal-toggle a { color: var(--accent); text-decoration: none; font-weight: 600; }
.status.err { color: var(--bad); }

/* ---------- Kirjautumismodaali (toistaiseksi pois käytöstä) ----------
   Modaali näyttää tunnistautumistavat vain esikatseluna: kaikki napit ovat
   disabled ja neutraalin harmaita. Näkymässä ei käytetä accent-vihreää
   lainkaan (myös taustaverho on neutraali) – vihreä lupaisi toimivan
   toiminnon. Jos kirjautuminen otetaan takaisin käyttöön, palauta samalla
   accent-värit ja poista .auth-note. */
#authModal { background: rgba(10, 10, 11, 0.4); }
/* Keskitetty pystysuora asettelu: iso kaksirivinen otsikko, alaotsikko ja
   allekkaiset pillinapit. Sähköpostikenttää + erillistä lähetysnappia ei ole,
   vaikka esikuvassa on – tyhjä kenttä lupaisi toiminnon jota ei ole; sama asia
   hoituu "Jatka sähköpostilla" -napilla muiden tunnistautumistapojen rinnalla. */
.auth-card { max-width: 400px; padding: 40px 32px 30px; border-radius: 24px; text-align: center; }
.auth-card h2 { margin: 0 0 14px; font-size: 27px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
.auth-card .modal-sub { max-width: 30ch; margin: 0 auto 26px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.auth-card .modal-close { top: 18px; right: 18px; font-size: 18px; }
.sso-list { display: flex; flex-direction: column; gap: 12px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: none; color: var(--muted);
}
.sso-btn[disabled] { cursor: default; opacity: 0.72; }
/* Ikonit ovat tarkoituksella harmaita (currentColor), ei brändivärejä: napit
   ovat disabled, ja värillinen Google-logo lupaisi toimivan kirjautumisen.
   fill/stroke tulee kunkin ikonin omasta attribuutista (Google/Apple täyttö,
   kirjekuori viivapiirros) – älä pakota fill:iä täältä, se ylikirjoittaisi ne. */
.sso-ic { flex: none; width: 19px; height: 19px; opacity: 0.85; }
/* Lukkoikoni virtaa tekstin mukana (ei flex-riviä): kapealla näytöllä teksti
   katkeaa kahdelle riville, jolloin flex jättäisi ikonin irralleen vasempaan
   reunaan keskitetyn tekstin viereen. */
.auth-note { margin: 24px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.auth-note-ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }

/* ---------- Jaettu näkymä (/s/<slug>) ---------- */
#menuBtn { display: none; background: none; border: none; font-size: 18px; color: var(--ink); cursor: pointer; padding: 4px 8px; margin-right: 4px; }
.nav-toggle-cb { display: none; }
.nav-overlay { display: none; }
.share-banner { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px; position: sticky; top: 0; z-index: 6; background: var(--glass-bg); border-bottom: 1px solid var(--line-soft); }
.share-banner[hidden] { display: none; }
body.share-mode .top-actions { display: none; }
/* Sivun lopun kehotus: jaetun arvion lukijasta uusi käyttäjä. */
.share-cta { margin: 36px 0 8px; padding: 30px; text-align: center; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.share-cta-t { font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.share-cta-s { max-width: 440px; margin: 6px auto 18px; font-size: 13.5px; color: var(--muted); }

.btn.sm { height: 26px; padding: 0 13px; font-size: 13px; }
.btn.danger { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
/* Tilin poisto sivupalkissa: löydyttävä, mutta ei kilpailla uloskirjautumisen kanssa. */
.as-btn.quiet { margin-top: 6px; border-color: transparent; background: transparent; color: var(--muted); font-weight: 500; }
.as-btn.quiet:hover { background: var(--bad-bg); color: var(--bad); }

/* ---------- Footer ---------- */
/* Tumma, pyöristetty laatta sivun lopussa (linkkisarakkeet + katkoviivainen
   alarivi). Laatta on tumma MOLEMMISSA teemoissa, joten sen sisällä käytetään
   kiinteitä vaaleita tekstivärejä eikä --ink/--muted-tokeneita – ne kääntyisivät
   vaaleassa teemassa lukukelvottomiksi tummaa taustaa vasten. Sininen tulee
   yhdestä lähteestä: hehkut on johdettu --btn:stä color-mixillä.
   Logo on tästä syystä myös aina tumman taustan versio (logo-full-dark.png,
   nimestään huolimatta vaalea kuva); vanha harmaa footer-logo jäi käyttämättä. */
.site-footer { margin-top: 56px; padding: 0 32px 32px; }
.footer-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 46px 46px 22px;
  color: #eaeefb;
  background:
    radial-gradient(85% 115% at 0% 108%, color-mix(in srgb, var(--btn-2) 72%, #ffffff) 0%, transparent 60%),
    radial-gradient(70% 125% at 104% 52%, color-mix(in srgb, var(--btn-2) 80%, #ffffff) 0%, transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--btn) 38%, #040a07) 0%, #050c08 52%, color-mix(in srgb, var(--btn) 28%, #040a07) 100%);
}
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.footer-brand { display: inline-flex; text-decoration: none; }
.footer-brand .footer-logo { display: block; height: 26px; width: auto; }
.footer-tag { margin: 18px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.6; color: rgba(234, 238, 251, 0.8); }
.footer-col-h { margin: 0 0 16px; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.footer-col a { display: block; margin-bottom: 12px; font-size: 14px; color: rgba(234, 238, 251, 0.7); text-decoration: none; transition: color .15s ease; }
.footer-col a:last-child { margin-bottom: 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px dashed rgba(234, 238, 251, 0.2);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
}
.footer-note { margin: 0; max-width: 62ch; font-size: 12px; line-height: 1.55; color: rgba(234, 238, 251, 0.46); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-legal a { font-size: 12.5px; color: rgba(234, 238, 251, 0.62); text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ---------- Aluesivut (/alue/…) ---------- */
/* Palvelimella renderöity sisältö samassa sivupalkki-kuoressa kuin muu sovellus
   (ks. shell() area-pages.js:ssä) – vain sisältö on staattista, ei JS-riippuvuutta. */
.doc-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.doc-crumbs a { color: var(--muted); text-decoration: none; }
.doc-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.doc-h1 { font-family: var(--font-display); margin: 0 0 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.doc-h1-pc { color: var(--muted); font-weight: 400; font-size: 0.62em; letter-spacing: 0; }
.doc-p { margin: 0 0 12px; color: var(--ink-2); }
.doc-p a, .doc-list a { color: var(--accent); }
.doc-list { margin: 12px 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
.doc-list li { margin-bottom: 8px; }

.doc-table-wrap { overflow-x: auto; margin-top: 12px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th, .doc-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.doc-table thead th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.doc-table tbody th { font-weight: 600; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-table td.pos { color: var(--good); }
.doc-table td.neg { color: var(--bad); }
.doc-table tbody tr:hover { background: var(--hover); }

.doc-faq h3 { margin: 20px 0 4px; font-size: 15.5px; }
.doc-faq p { margin: 0; color: var(--ink-2); }

.doc-toc { margin: 18px 0 26px; font-size: 13px; line-height: 2; color: var(--muted); }
.doc-toc a { color: var(--accent); text-decoration: none; }
.doc-toc a:hover { text-decoration: underline; }
.doc-city { margin-bottom: 8px; }

/* Aluelinkkiruudukko (lähialueet + hub-sivu). */
.area-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 4px; }
.area-links a {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border-radius: 6px; text-decoration: none; color: var(--ink);
}
.area-links a:hover { background: var(--hover); }
.al-pc { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.al-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.al-price { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tyyppiasteikko (komponenttispeksi) ----------
   Otsikot 16/20 px Medium, labelit 13/16 px Medium, leipäteksti 14 px Regular
   (body:n `font: 14px/1.55`). Lohko on tarkoituksella tiedoston lopussa: samat
   valitsimet asetetaan aiemmin omissa säännöissään, ja myöhempi voittaa.
   Speksi koskee komponenttitason otsikoita ja labeleita; sivun display-kokoiset
   otsikot (.page-title, .stat-v, verdict-kortin luvut) on jätetty ennalleen –
   16 px romahduttaisi sivuhierarkian. */
.block-label, .share-cta-t, .footer-col-h, .modal-card h2 {
  font-size: 16px; line-height: 20px; font-weight: 500;
}
.side-heading, .stat-k, .cmp th, .prop-k, .grid label {
  font-size: 13px; line-height: 16px; font-weight: 500;
}

@media (max-width: 800px) {
  .doc-h1 { font-size: 27px; }
  /* Footerin mobiiliasettelu on tässä (tiedoston lopussa) eikä ylemmässä
     800px-lohkossa, koska footerin perussäännöt tulevat sen jälkeen. */
  .site-footer { margin-top: 32px; padding: 0 12px 16px; }
  .footer-card { padding: 30px 22px 18px; border-radius: var(--r-lg); }
  /* Kaksi linkkisaraketta rinnakkain 390 px:llä; brändilohko omalle riville. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-tag { font-size: 13.5px; }
  .footer-bottom { margin-top: 28px; }
}