/* Omapihapiiri – "yövalvomo": talo yöllä valvomon ikkunasta. Valaistu ikkuna = tila. */

/* ---------- Fontit (omalla palvelimella, ei kolmansia osapuolia) ---------- */
@font-face { font-family: Geologica; font-weight: 400; font-display: swap; src: url(fontit/geologica-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Geologica; font-weight: 500; font-display: swap; src: url(fontit/geologica-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Geologica; font-weight: 600; font-display: swap; src: url(fontit/geologica-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Geologica; font-weight: 400; font-display: swap; src: url(fontit/geologica-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Geologica; font-weight: 500; font-display: swap; src: url(fontit/geologica-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Geologica; font-weight: 600; font-display: swap; src: url(fontit/geologica-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Geologica; font-weight: 400; font-display: swap; src: url(fontit/geologica-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Geologica; font-weight: 500; font-display: swap; src: url(fontit/geologica-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Geologica; font-weight: 600; font-display: swap; src: url(fontit/geologica-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Geologica; font-weight: 400; font-display: swap; src: url(fontit/geologica-cyrillic-ext-400-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: Geologica; font-weight: 600; font-display: swap; src: url(fontit/geologica-cyrillic-ext-600-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: Geologica; font-weight: 400; font-display: swap; src: url(fontit/geologica-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: Geologica; font-weight: 500; font-display: swap; src: url(fontit/geologica-greek-500-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: Geologica; font-weight: 600; font-display: swap; src: url(fontit/geologica-greek-600-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(fontit/vazirmatn-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: Vazirmatn; font-weight: 600; font-display: swap; src: url(fontit/vazirmatn-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: Heebo; font-weight: 400; font-display: swap; src: url(fontit/heebo-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: Heebo; font-weight: 600; font-display: swap; src: url(fontit/heebo-hebrew-600-normal.woff2) format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }

/* ---------- Tunnukset ---------- */
:root {
  --yo: #0a0f1d;            /* yötaivas, sivun tausta */
  --yo-2: #0d1426;
  --pinta: #10182b;         /* paneelit */
  --pinta-2: #16213a;       /* nostettu, hover */
  --pinta-3: #1c2948;
  --raja: #243150;          /* hiusviivat */
  --raja-2: #33456d;
  --teksti: #e6ebf5;
  --hento: #8d9aba;
  --himmea: #5d6a8a;
  --lyhty: #f4c25b;         /* valaistu ikkuna: ensisijainen toiminto, lukematon */
  --lyhty-2: #ffd77e;
  --lyhty-hehku: rgba(244, 194, 91, .35);
  --revontuli: #56d8c9;     /* revontuli: paikalla, kohdistus, aktiivinen */
  --revontuli-hento: rgba(86, 216, 201, .14);
  --ok: #5fd39b;
  --varoitus: #f2a541;
  --halytys: #ff6f6f;
  --info: #8ab4ff;
  --r: 10px;
  --r-pieni: 7px;
  --r-iso: 14px;
  --fontti: Geologica, "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
  --palkki: 60px;
  --sivupalkki: 252px;
  color-scheme: dark;
}
.fontit-arabic { --fontti: Vazirmatn, Geologica, Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }
.fontit-hebrew { --fontti: Heebo, Geologica, Arial, "Noto Sans Hebrew", system-ui, sans-serif; }
.fontit-cjk { --fontti: Geologica, "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Noto Sans JP", "Microsoft YaHei", "Yu Gothic", "Meiryo", system-ui, sans-serif; }

/* ---------- Perusta ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: var(--fontti); font-size: 15px; line-height: 1.55; color: var(--teksti);
  background: radial-gradient(1100px 420px at 12% -8%, rgba(86, 216, 201, .07), transparent 70%),
              radial-gradient(900px 380px at 88% -12%, rgba(138, 120, 255, .06), transparent 70%), var(--yo);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
h2 { font-size: 1.18rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .9em; }
a { color: var(--teksti); text-decoration-color: var(--raja-2); text-underline-offset: 3px; }
a:hover { color: var(--lyhty-2); text-decoration-color: currentColor; }
small, .meta { color: var(--hento); font-size: .86rem; }
.hento { color: var(--hento); }
.himmea { color: var(--himmea); }
hr, .erotin { border: 0; border-top: 1px solid var(--raja); margin: 18px 0; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; }
kbd { padding: 1px 6px; border: 1px solid var(--raja-2); border-radius: 5px; color: var(--hento); background: var(--yo-2); }
::selection { background: var(--lyhty); color: #1b1405; }
:focus-visible { outline: 2px solid var(--revontuli); outline-offset: 2px; border-radius: 4px; }
.piilo, .ohita:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita:focus { position: fixed; inset-inline-start: 12px; top: 12px; z-index: 99; background: var(--lyhty); color: #1b1405; padding: 8px 14px; border-radius: var(--r-pieni); }
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ik-pieni { width: 14px; height: 14px; }
[dir="rtl"] use[href$="#nuoli"], [dir="rtl"] .ik-nuoli { transform: scaleX(-1); transform-origin: center; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Merkki ja valaistu ikkuna ---------- */
.merkki { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teksti); font-weight: 600; min-width: 0; }
.merkki span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.merkki small { font-weight: 400; font-size: .78rem; color: var(--hento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merkki-svg { width: 30px; height: 30px; flex: none; color: var(--teksti); }
.merkki-ikkuna { fill: var(--lyhty); filter: drop-shadow(0 0 5px var(--lyhty-hehku)); }
.ikkuna { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--pinta-3); border: 1px solid var(--raja-2); flex: none; }
.ikkuna-palaa { background: var(--lyhty); border-color: var(--lyhty-2); box-shadow: 0 0 8px var(--lyhty-hehku); }
.paikalla { display: inline-flex; align-items: center; gap: 7px; color: var(--hento); font-size: .86rem; }
.paikalla.on { color: var(--teksti); }
.paikalla.on .ikkuna { background: var(--revontuli); border-color: #8ff0e4; box-shadow: 0 0 8px rgba(86, 216, 201, .55); }

/* ---------- Kehykset: julkinen ---------- */
.julkinen-palkki, .asukaspalkki { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--palkki); padding: 0 clamp(14px, 3vw, 28px); background: rgba(10, 15, 29, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--raja); }
.sisalto { padding: clamp(18px, 3vw, 32px); min-width: 0; }
.sisalto-julkinen { max-width: 1100px; margin: 0 auto; }
.palkki-oikea { display: flex; align-items: center; gap: 4px; }
.kuvakenappi { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); color: var(--hento); text-decoration: none; border: 1px solid transparent; background: none; cursor: pointer; }
.kuvakenappi:hover { color: var(--teksti); background: var(--pinta-2); border-color: var(--raja); }
.merkki-luku { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--lyhty); color: #1b1405; font-size: .72rem; font-weight: 600; line-height: 1; box-shadow: 0 0 10px var(--lyhty-hehku); }
.kuvakenappi .merkki-luku { position: absolute; top: 3px; inset-inline-end: 2px; }

/* Kielivalitsin */
.kielivalitsin { position: relative; }
.kielivalitsin summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: var(--r); color: var(--hento); cursor: pointer; font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.kielivalitsin summary::-webkit-details-marker { display: none; }
.kielivalitsin summary:hover, .kielivalitsin[open] summary { color: var(--teksti); background: var(--pinta-2); }
.kielilista { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50; width: min(420px, 92vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px;
  background: var(--pinta); border: 1px solid var(--raja-2); border-radius: var(--r-iso); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.kielilista a { padding: 8px 10px; border-radius: var(--r-pieni); text-decoration: none; font-size: .9rem; color: var(--teksti); }
.kielilista a:hover { background: var(--pinta-2); }
.kielilista a[aria-current] { background: var(--revontuli-hento); color: var(--revontuli); }
@media (max-width: 520px) { .kielilista { grid-template-columns: repeat(2, 1fr); position: fixed; inset-inline: 12px; width: auto; top: 64px; } }

/* ---------- Kehys: asukas ---------- */
.asukas-runko { display: grid; grid-template-columns: 232px minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
.asukasnavi { position: sticky; top: var(--palkki); align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 22px 12px; height: calc(100vh - var(--palkki)); overflow-y: auto; }
.asukasnavi a, .sivunavi a, .alanavi-paneeli a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r); color: var(--hento); text-decoration: none; position: relative; font-size: .94rem; }
.asukasnavi a:hover, .sivunavi a:hover, .alanavi-paneeli a:hover { background: var(--pinta-2); color: var(--teksti); }
.asukasnavi a[aria-current], .sivunavi a[aria-current], .alanavi-paneeli a[aria-current] { color: var(--teksti); background: linear-gradient(90deg, var(--revontuli-hento), transparent 85%); }
[dir="rtl"] .asukasnavi a[aria-current], [dir="rtl"] .sivunavi a[aria-current] { background: linear-gradient(270deg, var(--revontuli-hento), transparent 85%); }
.asukasnavi a[aria-current]::before, .sivunavi a[aria-current]::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--revontuli); box-shadow: 0 0 8px var(--revontuli); }
.asukasnavi a[aria-current] .ik, .sivunavi a[aria-current] .ik { color: var(--revontuli); }
.asukasnavi .merkki-luku, .sivunavi .merkki-luku { margin-inline-start: auto; }
.sisalto-asukas { max-width: 880px; width: 100%; }
.alanavi { display: none; }
@media (max-width: 860px) {
  .asukas-runko { display: block; }
  .asukasnavi { display: none; }
  .sisalto-asukas { padding-bottom: 96px; }
  .alanavi { position: fixed; bottom: 0; inset-inline: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(10, 15, 29, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--raja); }
  .alanavi > a, .alanavi summary { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: var(--r); color: var(--hento); text-decoration: none; font-size: .7rem; list-style: none; cursor: pointer; text-align: center; }
  .alanavi summary::-webkit-details-marker { display: none; }
  .alanavi > a[aria-current] { color: var(--revontuli); }
  .alanavi .merkki-luku { position: absolute; top: 0; inset-inline-end: 18%; }
  .alanavi-paneeli { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); inset-inline: 10px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    background: var(--pinta); border: 1px solid var(--raja-2); border-radius: var(--r-iso); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
}

/* ---------- Kehys: ylläpito ---------- */
.hallinta { display: grid; grid-template-columns: var(--sivupalkki) minmax(0, 1fr); min-height: 100vh; }
.sivupalkki { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: rgba(13, 20, 38, .92); border-inline-end: 1px solid var(--raja); z-index: 45; }
.sivupalkki > .merkki { height: var(--palkki); padding: 0 18px; border-bottom: 1px solid var(--raja); flex: none; }
.sivunavi { flex: 1; overflow-y: auto; padding: 10px 10px 18px; scrollbar-width: thin; scrollbar-color: var(--raja-2) transparent; }
.sivunavi a { padding: 7px 11px; font-size: .9rem; }
.navi-ryhma { padding: 6px 0; }
.navi-ryhma + .navi-ryhma { border-top: 1px solid rgba(36, 49, 80, .55); }
.navi-otsikko { padding: 8px 11px 4px; color: var(--himmea); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.sivupalkki-ala { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--raja); }
.sivupalkki-ala .kuka { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); text-decoration: none; min-width: 0; }
.sivupalkki-ala .kuka:hover, .sivupalkki-ala .kuka[aria-current] { background: var(--pinta-2); }
.sivupalkki-ala .kuka span:last-child { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sivupalkki-ala .kuka small { font-size: .76rem; }
.komentopalkki { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: var(--palkki); padding: 0 clamp(12px, 2.4vw, 28px);
  background: rgba(10, 15, 29, .8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--raja); }
.komentohaku-nappi { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--raja);
  background: var(--yo-2); color: var(--himmea); font: inherit; font-size: .9rem; cursor: text; text-align: start; }
.komentohaku-nappi span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.komentohaku-nappi:hover { border-color: var(--raja-2); color: var(--hento); }
.talovalitsin select { height: 40px; min-width: 0; max-width: 230px; }
.valikko-nappi, .valikko-tausta { display: none; }
@media (max-width: 1020px) {
  .hallinta { display: block; }
  .sivupalkki { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; }
  [dir="rtl"] .sivupalkki { transform: translateX(102%); }
  .valikko-tila:checked ~ .hallinta .sivupalkki { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .6); }
  .valikko-tila:checked ~ .hallinta .valikko-tausta { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(4, 7, 15, .6); }
  .valikko-nappi { display: inline-grid; }
  .komentohaku-nappi kbd, .komentohaku-nappi span { display: none; }
  .komentohaku-nappi { flex: none; width: 40px; padding: 0; justify-content: center; }
  .talovalitsin { flex: 1; }
  .talovalitsin select { width: 100%; max-width: none; }
}

/* ---------- Sivun rakenne ---------- */
.sivuotsikko { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sivuotsikko h1 { margin: 0; }
.sivuotsikko p { margin: 6px 0 0; max-width: 72ch; }
.paneeli { background: rgba(16, 24, 43, .86); border: 1px solid var(--raja); border-radius: var(--r-iso); padding: clamp(16px, 2.2vw, 22px); margin-bottom: 18px; min-width: 0; }
.paneeli > h2:first-child, .paneeli > h3:first-child { margin-top: 0; }
.paneeli-otsikko { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -2px 0 14px; }
.paneeli-otsikko h2 { margin: 0; }
.korostus { border-color: rgba(244, 194, 91, .45); box-shadow: inset 0 1px 0 rgba(244, 194, 91, .25); }
.ruudukko { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 18px; }
.ruudukko > .paneeli { margin: 0; }
.kaksi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.kolme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.jako { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .jako { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kaksi, .kolme { grid-template-columns: 1fr; } }
.napit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rivi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rivi-otsikko { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.oikealle { margin-inline-start: auto; }
.inline { display: inline; }

/* ---------- Napit ---------- */
.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--lyhty);
  background: var(--lyhty); color: #1b1405; font: inherit; font-weight: 600; font-size: .94rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.nappi:hover { background: var(--lyhty-2); color: #1b1405; box-shadow: 0 0 18px var(--lyhty-hehku); }
.nappi .ik { width: 18px; height: 18px; }
.nappi-toissijainen { background: transparent; color: var(--teksti); border-color: var(--raja-2); }
.nappi-toissijainen:hover { background: var(--pinta-2); color: var(--teksti); border-color: var(--hento); box-shadow: none; }
.nappi-vaara { background: transparent; color: var(--halytys); border-color: rgba(255, 111, 111, .5); }
.nappi-vaara:hover { background: rgba(255, 111, 111, .12); color: #ff9a9a; border-color: var(--halytys); box-shadow: none; }
.nappi-revontuli { background: transparent; color: var(--revontuli); border-color: rgba(86, 216, 201, .5); }
.nappi-revontuli:hover { background: var(--revontuli-hento); color: var(--revontuli); box-shadow: none; }
.nappi-pieni { min-height: 34px; padding: 0 12px; font-size: .86rem; border-radius: var(--r-pieni); }
.nappi-leve { width: 100%; }
.nappi:disabled, .nappi[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.linkkinappi { background: none; border: 0; padding: 0; color: var(--hento); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkkinappi:hover { color: var(--teksti); }

/* ---------- Lomakkeet ---------- */
.lomake { display: grid; gap: 16px; }
.kentta { display: grid; gap: 6px; min-width: 0; align-content: start; }
.kentta > label, .nimio { font-size: .86rem; font-weight: 500; color: var(--hento); }
.ohje { font-size: .8rem; color: var(--himmea); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="month"], input[type="search"], input[type="url"], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r); border: 1px solid var(--raja-2); background: var(--yo-2); color: var(--teksti);
  font: inherit; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-inline-end: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--hento) 50%), linear-gradient(135deg, var(--hento) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select { background-position: 17px 52%, 12px 52%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--revontuli); box-shadow: 0 0 0 3px var(--revontuli-hento); }
input::placeholder, textarea::placeholder { color: var(--himmea); }
input.pin { max-width: 220px; letter-spacing: .4em; font-size: 1.25rem; text-align: center; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.valinnat { display: flex; flex-wrap: wrap; gap: 8px; }
.valinta { position: relative; }
.valinta input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.valinta span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--raja-2); color: var(--hento); font-size: .9rem; }
.valinta input:checked + span { border-color: var(--revontuli); color: var(--teksti); background: var(--revontuli-hento); }
.valinta input:focus-visible + span { outline: 2px solid var(--revontuli); outline-offset: 2px; }
.ruksi { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .94rem; }
.ruksi input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--revontuli); flex: none; }
.ruksi small { display: block; }
fieldset { border: 1px solid var(--raja); border-radius: var(--r); padding: 12px 14px; margin: 0; }
legend { padding: 0 6px; color: var(--hento); font-size: .86rem; }

/* Liitekenttä */
.liite-pudotus { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--raja-2); border-radius: var(--r); color: var(--hento); cursor: pointer; transition: border-color .15s, background .15s; }
.liite-pudotus .ik { width: 26px; height: 26px; color: var(--revontuli); }
.liite-pudotus span { display: flex; flex-direction: column; }
.liite-pudotus strong { color: var(--teksti); font-weight: 500; }
.liite-pudotus input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.liite-pudotus:hover, .liitekentta.raahaus .liite-pudotus { border-color: var(--revontuli); background: var(--revontuli-hento); }
.liite-pudotus:focus-within { outline: 2px solid var(--revontuli); outline-offset: 2px; }
.liite-esikatselu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.liite-esikatselu:empty { display: none; }
.liite-pala { position: relative; width: 92px; height: 92px; border-radius: var(--r-pieni); overflow: hidden; border: 1px solid var(--raja-2); background: var(--yo-2); display: grid; place-items: center; text-align: center; font-size: .7rem; color: var(--hento); padding: 4px; }
.liite-pala img, .liite-pala video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.liite-pala button { position: absolute; top: 3px; inset-inline-end: 3px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(10, 15, 29, .85); color: var(--teksti); display: grid; place-items: center; cursor: pointer; padding: 0; }
.liite-pala button .ik { width: 14px; height: 14px; }

/* ---------- Taulut ---------- */
.taulu-kaari { overflow-x: auto; margin: 0 calc(-1 * clamp(16px, 2.2vw, 22px)); padding: 0 clamp(16px, 2.2vw, 22px); }
.taulu { width: 100%; border-collapse: collapse; font-size: .92rem; }
.taulu th { text-align: start; font-weight: 500; color: var(--hento); font-size: .8rem; padding: 0 12px 10px 0; border-bottom: 1px solid var(--raja); white-space: nowrap; }
[dir="rtl"] .taulu th, [dir="rtl"] .taulu td { padding-left: 12px; padding-right: 0; }
.taulu td { padding: 11px 12px 11px 0; border-bottom: 1px solid rgba(36, 49, 80, .6); vertical-align: top; }
.taulu tbody tr:hover td { background: rgba(22, 33, 58, .45); }
.taulu tr:last-child td { border-bottom: 0; }
.taulu .luku, .taulu .r { text-align: end; white-space: nowrap; }
.taulu tfoot td { font-weight: 600; border-top: 1px solid var(--raja-2); border-bottom: 0; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding: 12px 0; border-bottom: 1px solid rgba(36, 49, 80, .6); }
.lista > li:first-child { padding-top: 0; }
.lista > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Tilat, ilmoitukset, välilehdet ---------- */
.tila { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 500; white-space: nowrap; border: 1px solid; line-height: 1.6; }
.tila::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tila-uusi { color: var(--lyhty); border-color: rgba(244, 194, 91, .4); background: rgba(244, 194, 91, .08); }
.tila-kesken { color: var(--info); border-color: rgba(138, 180, 255, .4); background: rgba(138, 180, 255, .08); }
.tila-ok { color: var(--ok); border-color: rgba(95, 211, 155, .4); background: rgba(95, 211, 155, .07); }
.tila-halytys { color: var(--halytys); border-color: rgba(255, 111, 111, .45); background: rgba(255, 111, 111, .08); }
.tila-pois, .tila-neutraali { color: var(--hento); border-color: var(--raja-2); background: transparent; }
.ilmoitus { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); border: 1px solid; margin-bottom: 16px; font-size: .94rem; }
.ilmoitus-ok { border-color: rgba(95, 211, 155, .4); background: rgba(95, 211, 155, .08); }
.ilmoitus-virhe { border-color: rgba(255, 111, 111, .5); background: rgba(255, 111, 111, .09); }
.ilmoitus-info { border-color: rgba(138, 180, 255, .4); background: rgba(138, 180, 255, .08); }
.ilmoitus-varoitus { border-color: rgba(242, 165, 65, .45); background: rgba(242, 165, 65, .08); }
.valilehdet { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; padding: 4px; background: var(--yo-2); border: 1px solid var(--raja); border-radius: var(--r); width: fit-content; max-width: 100%; }
.valilehdet a { padding: 7px 14px; border-radius: var(--r-pieni); text-decoration: none; color: var(--hento); font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.valilehdet a:hover { color: var(--teksti); }
.valilehdet a[aria-current] { background: var(--pinta-3); color: var(--teksti); box-shadow: inset 0 -2px 0 var(--revontuli); }
.tyhja { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; text-align: center; color: var(--hento); }
.tyhja p { margin: 0; max-width: 46ch; }
.tyhja-ikkunat { display: flex; gap: 6px; }
.tyhja-ikkunat i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--raja-2); background: var(--pinta-3); }
.tyhja-ikkunat i:nth-child(2) { background: var(--lyhty); border-color: var(--lyhty-2); box-shadow: 0 0 10px var(--lyhty-hehku); }

/* ---------- Tunnusluvut (mittarit) ---------- */
.mittaristo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mittari { position: relative; padding: 16px 18px; border: 1px solid var(--raja); border-radius: var(--r-iso); background: linear-gradient(180deg, rgba(22, 33, 58, .7), rgba(16, 24, 43, .6)); text-decoration: none; display: block; }
.mittari::before, .mittari::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--revontuli); opacity: .55; }
.mittari::before { top: -1px; inset-inline-start: -1px; border-top: 1px solid; border-inline-start: 1px solid; border-start-start-radius: var(--r-iso); }
.mittari::after { bottom: -1px; inset-inline-end: -1px; border-bottom: 1px solid; border-inline-end: 1px solid; border-end-end-radius: var(--r-iso); }
a.mittari:hover { border-color: var(--raja-2); color: var(--teksti); }
.mittari-nimi { color: var(--hento); font-size: .84rem; }
.mittari-arvo { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 2px; }
.mittari-ala { color: var(--himmea); font-size: .8rem; }
.mittari-palkki { height: 4px; border-radius: 2px; background: var(--pinta-3); margin-top: 10px; overflow: hidden; }
.mittari-palkki i { display: block; height: 100%; border-radius: 2px; background: var(--revontuli); }
.mittari.varoitus .mittari-arvo { color: var(--varoitus); }
.mittari.halytys .mittari-arvo { color: var(--halytys); }
.mittari.ok .mittari-arvo { color: var(--ok); }

/* Hälytykset ja tehtävät */
.halytykset { list-style: none; margin: 0; padding: 0; }
.halytykset li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(36, 49, 80, .6); }
.halytykset li:last-child { border-bottom: 0; }
.halytykset .h-ikoni { width: 34px; height: 34px; border-radius: var(--r-pieni); display: grid; place-items: center; background: var(--pinta-2); color: var(--hento); }
.halytykset .h-halytys .h-ikoni { color: var(--halytys); background: rgba(255, 111, 111, .1); }
.halytykset .h-varoitus .h-ikoni { color: var(--varoitus); background: rgba(242, 165, 65, .1); }
.halytykset .h-info .h-ikoni { color: var(--revontuli); background: var(--revontuli-hento); }
.halytykset a { text-decoration: none; }
.halytykset .h-teksti small { display: block; }

/* Julkisivut: jokainen asunto on ikkuna */
.julkisivut { display: flex; flex-wrap: wrap; gap: 26px 32px; align-items: flex-end; }
.julkisivu { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; }
.julkisivu strong { font-weight: 500; }
.selite { display: flex; flex-wrap: wrap; gap: 14px; color: var(--hento); font-size: .8rem; margin-top: 14px; }
.selite span { display: inline-flex; align-items: center; gap: 6px; }
.selite .ikkuna-halytys { background: var(--lyhty); border: 2px solid var(--halytys); box-shadow: 0 0 8px rgba(255, 111, 111, .5); }

/* Talon siluetti */
.siluetti { display: block; max-width: 100%; height: auto; }
.siluetti-talo { fill: #121b31; stroke: var(--raja-2); stroke-width: 1.5; }
.siluetti .ikkuna { fill: #1a2440; stroke: #2a3a60; stroke-width: 1; }
.siluetti .ikkuna-palaa { fill: var(--lyhty); stroke: var(--lyhty-2); filter: drop-shadow(0 0 4px var(--lyhty-hehku)); }
.siluetti .ikkuna-halytys { stroke: var(--halytys); stroke-width: 3; }
.siluetti-syttyy .ikkuna-palaa { animation: syty .6s ease-out both; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes syty { from { fill: #1a2440; stroke: #2a3a60; filter: none; } 60% { fill: var(--lyhty-2); } to { fill: var(--lyhty); } }

/* ---------- Kirjautuminen ja talon valinta ---------- */
.tervetuloa { display: grid; gap: 6px; margin: 10px 0 26px; }
.tervetuloa h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin: 0; }
.piha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; padding: 26px 0 0; }
.talo-valinta { flex: 1 1 200px; display: grid; justify-items: center; gap: 10px; padding: 22px 16px 18px; border: 1px solid var(--raja); border-radius: var(--r-iso); text-decoration: none; background: rgba(16, 24, 43, .6); transition: border-color .15s, transform .15s; }
.talo-valinta:hover { border-color: var(--lyhty); transform: translateY(-2px); color: var(--teksti); }
.talo-valinta strong { font-size: 1.05rem; font-weight: 600; }
.maa { height: 1px; background: linear-gradient(90deg, transparent, var(--raja-2), transparent); margin: 0 0 30px; }
.kirjautuminen { max-width: 460px; margin: 4vh auto 0; }
.kirjautuminen-otsikko { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.kirjautuminen-otsikko .siluetti { width: 92px; height: auto; }
.sisaankaynnit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sisaankaynti { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--raja); border-radius: var(--r-iso); text-decoration: none; background: rgba(16, 24, 43, .6); }
.sisaankaynti:hover { border-color: var(--revontuli); color: var(--teksti); }
.sisaankaynti .ik { width: 26px; height: 26px; color: var(--revontuli); margin-top: 2px; }
.sisaankaynti > span { display: grid; gap: 4px; }
.sisaankaynti small { font-size: .86rem; }
.kertakoodi { font-size: 2rem; letter-spacing: .18em; font-weight: 600; color: var(--lyhty); margin: 8px 0; }
.ovikoodi { font-size: 2.4rem; letter-spacing: .3em; font-weight: 600; color: var(--lyhty); text-shadow: 0 0 18px var(--lyhty-hehku); }

/* ---------- Aikajana (tiketit) ---------- */
.aikajana { list-style: none; margin: 0; padding: 0; position: relative; }
.aikajana::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 7px; width: 1px; background: var(--raja-2); }
.aikajana > li { position: relative; padding: 0 0 18px 30px; }
[dir="rtl"] .aikajana > li { padding: 0 30px 18px 0; }
.aikajana > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 5px; width: 11px; height: 11px; border-radius: 3px; background: var(--pinta-3); border: 1px solid var(--raja-2); }
.aikajana > li.at-asukas::before { background: var(--lyhty); border-color: var(--lyhty-2); box-shadow: 0 0 8px var(--lyhty-hehku); }
.aikajana > li.at-yllapito::before { background: var(--revontuli); border-color: #8ff0e4; }
.aikajana > li.at-sisainen::before { background: transparent; border: 1px dashed var(--hento); }
.aikajana .at-otsikko { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .88rem; color: var(--hento); }
.aikajana .at-otsikko strong { color: var(--teksti); font-weight: 500; }
.aikajana .at-teksti { margin-top: 4px; white-space: pre-line; }
.aikajana .at-sisainen .at-teksti { color: var(--hento); font-style: italic; }

/* Galleria ja linkit */
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.galleria-kuva, .galleria-video { display: block; aspect-ratio: 1; border-radius: var(--r-pieni); overflow: hidden; border: 1px solid var(--raja); background: var(--yo-2); }
.galleria-kuva img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.galleria-kuva:hover img { transform: scale(1.04); }
.galleria-video { width: 100%; object-fit: cover; grid-column: span 2; aspect-ratio: 16 / 10; }
.galleria-tiedosto { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--raja); border-radius: var(--r-pieni); text-decoration: none; grid-column: span 2; }
.galleria-tiedosto span { display: grid; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.linkit { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.linkit a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--raja); border-radius: var(--r-pieni); text-decoration: none; }
.linkit a:hover { border-color: var(--revontuli); }
.linkit span { display: grid; min-width: 0; }
.linkit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100vh - var(--palkki) - 110px); min-height: 440px; border: 1px solid var(--raja); border-radius: var(--r-iso); background: rgba(13, 20, 38, .9); overflow: hidden; }
.alue-asukas .chat { height: calc(100vh - var(--palkki) - 90px); }
@media (max-width: 860px) { .alue-asukas .chat { height: calc(100dvh - var(--palkki) - 150px); } }
.chat-otsikko { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--raja); background: rgba(16, 24, 43, .9); }
.chat-otsikko strong { display: block; }
.chat-viestit { overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; }
.chat-paiva { align-self: center; margin: 12px 0 6px; padding: 2px 12px; border-radius: 999px; font-size: .74rem; color: var(--hento); border: 1px solid var(--raja); background: var(--yo-2); }
.kupla { max-width: min(78%, 560px); align-self: flex-start; padding: 9px 13px 6px; border-radius: 14px 14px 14px 4px; background: var(--pinta-2); border: 1px solid var(--raja); overflow-wrap: anywhere; }
[dir="rtl"] .kupla { border-radius: 14px 14px 4px 14px; }
.kupla.oma { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #1f2c4c, #1a2644); border-color: #2f4170; }
[dir="rtl"] .kupla.oma { border-radius: 14px 14px 14px 4px; }
/* Oikealta vasemmalle -kielissä käyttäjien kirjoittama teksti (esim. suomenkielinen tiedote) saa suunnan sisällöstään */
[dir="rtl"] :is(p, li, h1, h2, h3, td, .kupla-teksti, .meta, .rivi-otsikko a, .hento) { unicode-bidi: plaintext; }
.kupla-nimi { font-size: .76rem; color: var(--revontuli); margin-bottom: 2px; }
.kupla-teksti { white-space: pre-wrap; }
.kupla-tiedot { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 3px; font-size: .7rem; color: var(--himmea); }
.kupla .kuittaus .ik { width: 16px; height: 16px; }
.kupla .kuittaus.luettu { color: var(--revontuli); }
.kupla .galleria { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin: 4px 0; }
.kupla.lahettaa { opacity: .6; }
.kupla.virhe { border-color: var(--halytys); }
.kirjoittaa { align-self: flex-start; font-size: .8rem; color: var(--hento); padding: 4px 8px; display: flex; align-items: center; gap: 6px; }
.kirjoittaa i { width: 6px; height: 6px; border-radius: 50%; background: var(--revontuli); animation: piste 1s infinite alternate; }
.kirjoittaa i:nth-child(2) { animation-delay: .2s; } .kirjoittaa i:nth-child(3) { animation-delay: .4s; }
@keyframes piste { from { opacity: .25; } to { opacity: 1; } }
.chat-kirjoitus { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--raja); background: rgba(16, 24, 43, .95); }
.chat-kirjoitus textarea { min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: 11px 16px; }
.chat-kirjoitus .liite-esikatselu { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 12px; margin: 0; }
.chat-kirjoitus { position: relative; }
.chat-liite { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--raja-2); color: var(--hento); cursor: pointer; flex: none; }
.chat-liite:hover { color: var(--revontuli); border-color: var(--revontuli); }
.chat-liite input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat-laheta { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; min-height: 0; }
.keskustelut { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; }
.keskustelulista { border: 1px solid var(--raja); border-radius: var(--r-iso); background: rgba(13, 20, 38, .9); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - var(--palkki) - 110px); }
.keskustelulista .kl-haku { padding: 10px; border-bottom: 1px solid var(--raja); }
.keskustelulista nav { overflow-y: auto; }
.keskustelulista a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; text-decoration: none; border-bottom: 1px solid rgba(36, 49, 80, .5); }
.keskustelulista a:hover { background: var(--pinta-2); }
.keskustelulista a[aria-current] { background: var(--pinta-3); box-shadow: inset 2px 0 0 var(--revontuli); }
[dir="rtl"] .keskustelulista a[aria-current] { box-shadow: inset -2px 0 0 var(--revontuli); }
.keskustelulista .kl-teksti { min-width: 0; }
.keskustelulista .kl-teksti strong { display: block; font-weight: 500; }
.keskustelulista .kl-teksti small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keskustelulista .lukematon strong { color: var(--lyhty); }
@media (max-width: 900px) {
  .keskustelut { grid-template-columns: 1fr; }
  .keskustelut.valittu .keskustelulista { display: none; }
  .keskustelut:not(.valittu) .chat { display: none; }
}

/* ---------- Varauskalenteri ---------- */
.kalenteri { display: grid; grid-template-columns: 64px repeat(7, minmax(92px, 1fr)); gap: 4px; min-width: 720px; }
.kalenteri-kaari { overflow-x: auto; }
.kal-otsikko { text-align: center; font-size: .82rem; color: var(--hento); padding: 6px 0; }
.kal-otsikko strong { display: block; color: var(--teksti); font-weight: 500; }
.kal-otsikko.tanaan strong { color: var(--revontuli); }
.kal-aika { font-size: .78rem; color: var(--himmea); text-align: end; padding: 9px 6px 0 0; }
.kal-solu { min-height: 38px; border-radius: var(--r-pieni); border: 1px solid var(--raja); background: transparent; color: var(--hento); font: inherit; font-size: .78rem; cursor: pointer; width: 100%; }
.kal-solu:hover:not(:disabled) { border-color: var(--revontuli); color: var(--teksti); background: var(--revontuli-hento); }
.kal-solu.varattu { cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--pinta-2) 0 6px, var(--pinta) 6px 12px); color: var(--himmea); }
.kal-solu.oma { background: var(--lyhty); border-color: var(--lyhty-2); color: #1b1405; font-weight: 600; box-shadow: 0 0 10px var(--lyhty-hehku); }
.kal-solu.mennyt { opacity: .35; cursor: default; }

/* ---------- Komentohaku ---------- */
.komentohaku { width: min(640px, 94vw); padding: 0; border: 1px solid var(--raja-2); border-radius: var(--r-iso); background: var(--pinta); color: var(--teksti); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); margin-top: 10vh; }
.komentohaku::backdrop { background: rgba(4, 7, 15, .65); backdrop-filter: blur(3px); }
.komentohaku-kentta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--raja); }
.komentohaku-kentta input { border: 0; background: transparent; box-shadow: none; padding: 6px 0; font-size: 1.05rem; }
.komentohaku-kentta input:focus { box-shadow: none; }
.komentohaku-tulokset { max-height: 56vh; overflow-y: auto; padding: 6px; }
.komentohaku-tulokset .kh-ryhma { padding: 10px 10px 4px; color: var(--himmea); font-size: .74rem; font-weight: 600; letter-spacing: .03em; }
.komentohaku-tulokset a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-pieni); text-decoration: none; }
.komentohaku-tulokset a span { flex: 1; min-width: 0; }
.komentohaku-tulokset a small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komentohaku-tulokset a.valittu, .komentohaku-tulokset a:hover { background: var(--pinta-3); }
.komentohaku-tulokset a.valittu { box-shadow: inset 2px 0 0 var(--revontuli); }
.komentohaku-vinkki { padding: 10px 16px; border-top: 1px solid var(--raja); color: var(--himmea); font-size: .78rem; }

/* ---------- Toastit ---------- */
.toastit { position: fixed; z-index: 90; bottom: 20px; inset-inline-end: 20px; display: grid; gap: 10px; width: min(360px, calc(100vw - 40px)); }
@media (max-width: 860px) { .alue-asukas .toastit { bottom: 90px; } }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--pinta-2); border: 1px solid var(--raja-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); text-decoration: none; animation: toast .25s ease-out; }
.toast .ikkuna { margin-top: 5px; }
.toast strong { display: block; font-weight: 500; }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Lasku ---------- */
.laskupohja { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; padding: 16px; border: 1px solid var(--raja); border-radius: var(--r); background: var(--yo-2); }
.laskupohja dt { color: var(--hento); font-size: .8rem; }
.laskupohja dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.viivakoodi { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.viivakoodi input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.summa-iso { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Pylväät (budjetti, PTS) ---------- */
.palkit { display: grid; gap: 12px; }
.palkki-rivi { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 12px; align-items: center; font-size: .88rem; }
.palkki-ura { position: relative; height: 12px; border-radius: 6px; background: var(--pinta-3); overflow: hidden; }
.palkki-ura i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; background: var(--revontuli); }
.palkki-ura i.yli { background: var(--halytys); }
.palkki-ura b { position: absolute; inset-block: -3px; width: 2px; background: var(--teksti); opacity: .6; }
.aikajana-pts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pts-vuosi { border: 1px solid var(--raja); border-radius: var(--r); padding: 10px; min-height: 140px; background: var(--yo-2); }
.pts-vuosi.nyt { border-color: var(--revontuli); }
.pts-vuosi h3 { display: flex; justify-content: space-between; font-size: .95rem; }
.pts-hanke { display: block; padding: 7px 9px; border-radius: var(--r-pieni); background: var(--pinta-2); margin-top: 6px; font-size: .82rem; text-decoration: none; border-inline-start: 3px solid var(--raja-2); }
.pts-hanke.t-valmis { border-inline-start-color: var(--ok); }
.pts-hanke.t-kaynnissa { border-inline-start-color: var(--info); }
.pts-hanke.t-valmistelu { border-inline-start-color: var(--lyhty); }

/* ---------- Kenttänäkymä (huolto, mobiili) ---------- */
.kenttakortti { border: 1px solid var(--raja); border-radius: var(--r-iso); padding: 16px; background: rgba(16, 24, 43, .9); margin-bottom: 12px; }
.kenttakortti.kiire { border-color: rgba(255, 111, 111, .55); }
.kenttakortti .napit .nappi { flex: 1; min-height: 50px; }

/* ---------- Tulostus ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .sivupalkki, .komentopalkki, .asukaspalkki, .asukasnavi, .alanavi, .toastit, .ei-tulosteeseen, .napit .nappi { display: none !important; }
  .hallinta, .asukas-runko { display: block; }
  .paneeli { border: 1px solid #999; background: #fff; }
  a { color: #000; }
  .hento, .meta, small { color: #444; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Lisäosat ---------- */
summary { cursor: pointer; }
summary.nappi, summary.linkkinappi { list-style: none; width: fit-content; }
summary.nappi::-webkit-details-marker, summary.linkkinappi::-webkit-details-marker { display: none; }
details[open] > summary.nappi { border-color: var(--revontuli); }
tr.himmea td, li.himmea, .himmea { opacity: .55; }
pre { background: var(--yo-2); border: 1px solid var(--raja); border-radius: var(--r-pieni); padding: 12px; overflow-x: auto; }
/* Vaiheet (vikailmoituksen ja sopimuksen elinkaari) */
.vaiheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: vaihe; }
.vaiheet li { position: relative; padding: 10px 12px 10px 34px; border: 1px solid var(--raja); border-radius: var(--r-pieni); color: var(--hento); font-size: .9rem; counter-increment: vaihe; }
[dir="rtl"] .vaiheet li { padding: 10px 34px 10px 12px; }
.vaiheet li::before { content: counter(vaihe); position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--raja-2); font-size: .68rem; display: grid; place-items: center; }
.vaiheet li.tehty { color: var(--ok); border-color: rgba(95, 211, 155, .4); }
.vaiheet li.tehty::before { content: "✓"; background: rgba(95, 211, 155, .15); border-color: var(--ok); }
.vaiheet li.nyt { color: var(--teksti); border-color: var(--lyhty); background: rgba(244, 194, 91, .06); }
.vaiheet li.nyt::before { background: var(--lyhty); color: #1b1405; border-color: var(--lyhty-2); box-shadow: 0 0 8px var(--lyhty-hehku); }
/* Lomake taulukon solussa */
.taulu details > .paneeli, .taulu details > form.paneeli { position: relative; z-index: 5; }
.taulu .napit input[type="text"], .taulu .napit input[type="date"] { min-height: 34px; padding: 5px 9px; }
@media (max-width: 640px) {
  .sivuotsikko .napit { width: 100%; }
  .mittari-arvo { font-size: 1.6rem; }
  .palkki-rivi { grid-template-columns: 1fr auto; }
  .palkki-rivi .palkki-ura { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Julkinen etusivu: palvelun esittely ---------- */
html:has(.etusivu) { scroll-behavior: smooth; scroll-padding-top: 76px; }
.etusivu-palkki { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(10, 15, 29, .8); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(36, 49, 80, .7); }
.etusivu-navi { display: flex; gap: 4px; margin-inline-start: auto; }
.etusivu-navi a { padding: 8px 12px; border-radius: var(--r-pieni); color: var(--hento); text-decoration: none; font-size: .94rem; }
.etusivu-navi a:hover { color: var(--teksti); background: var(--pinta-2); }
.etusivu-palkki-oikea { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .etusivu-navi { display: none; } .etusivu-palkki-oikea { margin-inline-start: auto; } }
.etusivu { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); font-size: 16px; }
.nappi-iso { min-height: 52px; padding: 0 26px; font-size: 1rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; min-height: min(calc(100vh - 64px), 760px); padding: clamp(36px, 7vh, 72px) 0 40px; }
.hero h1 { font-size: clamp(2.35rem, 1.3rem + 3.7vw, 4.15rem); line-height: 1.03; letter-spacing: -.028em; margin: 0 0 22px; max-width: 14ch; text-wrap: balance; }
.hero-johdanto { font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem); line-height: 1.6; color: #c4cce0; max-width: 56ch; margin-bottom: 28px; }
.hero-napit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 30px; }
.hero-linkki { color: var(--teksti); font-weight: 500; }
.hero-faktat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--hento); font-size: .93rem; }
.hero-faktat li { display: flex; align-items: flex-start; gap: 10px; }
.hero-faktat li::before { content: ""; margin-top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--lyhty); box-shadow: 0 0 8px var(--lyhty-hehku); flex: none; }

.hero-kuva { position: relative; padding: 110px 0 96px; }
.katu { position: relative; }
.katu-svg { display: block; width: 100%; height: auto; overflow: visible; }
.katu-talo { fill: #111a30; stroke: var(--raja-2); stroke-width: 1.4; }
.katu-ovi { fill: #0c1324; stroke: #2a3a60; stroke-width: 1; }
.katu-svg .ikkuna { fill: #19233f; stroke: #26355a; stroke-width: 1; }
.katu-svg .ikkuna-palaa { fill: var(--lyhty); stroke: var(--lyhty-2); filter: drop-shadow(0 0 5px var(--lyhty-hehku)); animation: syty .6s ease-out both; animation-delay: calc(var(--i) * 28ms + 200ms); }
.katu-svg .ikkuna-paikalla { fill: var(--revontuli); stroke: #8ff0e4; filter: drop-shadow(0 0 6px rgba(86, 216, 201, .6)); animation: syty-revontuli .6s 1.4s ease-out both; }
.katu-svg .ikkuna-halytys { stroke: var(--halytys); stroke-width: 3; animation: syty .6s ease-out both, halytys 2.4s 1.6s ease-in-out infinite; animation-delay: .9s, 1.6s; }
@keyframes syty-revontuli { from { fill: #19233f; stroke: #26355a; filter: none; } }
@keyframes halytys { 50% { stroke: rgba(255, 111, 111, .3); } }
.hero-kortti { position: absolute; background: rgba(16, 24, 43, .94); border: 1px solid var(--raja-2); border-radius: var(--r-iso); padding: 12px 14px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); animation: kortti .55s cubic-bezier(.2, .7, .2, 1) both; font-size: .9rem; }
@keyframes kortti { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.hero-tiketti { top: 4px; inset-inline-end: -4%; width: min(272px, 46%); animation-delay: 1.05s; }
.hero-kortti-rivi { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hero-tiketti .meta { margin: 2px 0 10px; display: block; }
.mini-vaiheet { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; font-size: .72rem; }
.mini-vaiheet li { flex: 1; text-align: center; padding: 3px 4px; border: 1px solid var(--raja); border-radius: 6px; color: var(--himmea); white-space: nowrap; }
.mini-vaiheet li.tehty { color: var(--ok); border-color: rgba(95, 211, 155, .4); }
.mini-vaiheet li.nyt { color: var(--teksti); border-color: var(--lyhty); background: rgba(244, 194, 91, .08); }
.hero-chat { bottom: -34px; inset-inline-start: -7%; width: min(282px, 50%); display: grid; gap: 8px; animation-delay: 1.45s; }
.hero-chat .kupla { max-width: 92%; font-size: .88rem; justify-self: start; }
.hero-chat .kupla.oma { justify-self: end; }
.hero-chat .paikalla { justify-self: start; font-size: .78rem; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero h1 { max-width: 18ch; }
  .hero-kuva { padding: 90px 0 70px; max-width: 600px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero-kuva { padding: 0; }
  .hero-kortti { position: relative; inset: auto; width: auto; margin-top: 12px; }
  .katu { margin-bottom: 18px; }
}

.osio { padding-top: clamp(64px, 10vh, 104px); }
.osio-otsikko { font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.35rem); letter-spacing: -.02em; margin-bottom: 26px; max-width: 24ch; }
.palvelut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(28px, 5vw, 64px); }
.palvelu-ryhma { font-size: .98rem; font-weight: 500; color: var(--hento); padding-bottom: 12px; margin: 0; border-bottom: 1px solid var(--raja-2); }
.palvelulista { list-style: none; margin: 0; padding: 0; }
.palvelulista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(36, 49, 80, .65); }
.palvelulista .ik { width: 22px; height: 22px; color: var(--revontuli); margin-top: 2px; }
.palvelulista strong { font-size: 1.03rem; font-weight: 600; }
.palvelulista p { margin: 4px 0 0; color: var(--hento); line-height: 1.55; }
@media (max-width: 820px) { .palvelut { grid-template-columns: 1fr; } }

.turva { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(64px, 10vh, 104px); border-block: 1px solid var(--raja); }
.turva-kohta { display: flex; gap: 14px; padding: 26px clamp(14px, 2vw, 26px); }
.turva-kohta + .turva-kohta { border-inline-start: 1px solid var(--raja); }
.turva-kohta .ikkuna { width: 12px; height: 12px; margin-top: 6px; }
.turva-kohta p { margin: 0; color: var(--hento); }
.turva-kohta strong { color: var(--teksti); font-weight: 600; }
@media (max-width: 820px) { .turva { grid-template-columns: 1fr; } .turva-kohta + .turva-kohta { border-inline-start: 0; border-top: 1px solid var(--raja); } }

.polku { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: polku; }
.polku li { position: relative; padding-top: 50px; counter-increment: polku; }
.polku li::before { content: counter(polku); position: absolute; top: 0; inset-inline-start: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--raja-2); background: var(--pinta); color: var(--hento); font-weight: 600; font-size: .9rem; z-index: 1; }
.polku li::after { content: ""; position: absolute; top: 16px; inset-inline: 40px -16px; height: 1px; background: var(--raja-2); }
.polku li:last-child::after { display: none; }
.polku li:last-child::before { background: var(--lyhty); border-color: var(--lyhty-2); color: #1b1405; box-shadow: 0 0 12px var(--lyhty-hehku); }
.polku strong { font-size: 1.05rem; }
.polku p { margin: 6px 0 0; color: var(--hento); }
@media (max-width: 820px) {
  .polku { grid-template-columns: 1fr; gap: 0; }
  .polku li { padding: 0 0 26px 52px; }
  [dir="rtl"] .polku li { padding: 0 52px 26px 0; }
  .polku li::after { top: 36px; bottom: 4px; inset-inline: 16px auto; width: 1px; height: auto; }
}

.yhteys { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 60px); align-items: start; }
.yhteys-teksti p { max-width: 46ch; }
.tarjouslomake fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tarjouslomake legend { padding: 0; margin-bottom: 6px; }
@media (max-width: 900px) { .yhteys { grid-template-columns: 1fr; } }
.etusivu-ala { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(64px, 10vh, 104px); padding: 26px 0 40px; border-top: 1px solid var(--raja); color: var(--hento); font-size: .9rem; }
.etusivu-ala nav { display: flex; gap: 20px; }
.etusivu-ala a { color: var(--hento); }

/* Kirjautumissivun pieni julkisivu */
.kirjautuminen-ikkunat { display: grid; grid-template-columns: repeat(2, 14px); gap: 6px; padding: 12px; border: 1px solid var(--raja-2); border-radius: 10px 10px 4px 4px; background: #121b31; flex: none; }
.kirjautuminen-ikkunat .ikkuna { width: 14px; height: 14px; }
.aktivointiohje { margin: 14px 0; padding: 14px 16px; border: 1px dashed var(--raja-2); border-radius: var(--r); }
.aktivointiohje ol { margin: 0 0 12px; padding-inline-start: 20px; }
.tietolista { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 18px; margin: 0 0 16px; }
.tietolista dt { color: var(--hento); font-size: .88rem; }
.tietolista dd { margin: 0; overflow-wrap: anywhere; }