/* Moskeijoiden hallintapaneeli – ulkoasu */
:root {
  --paa: #1f3a2c; --paa-t: #14281e; --paa-v: #2c5040;
  --k: #c9a46a; --kv: #f6efe1; --k-t: #8a6a2f;
  --tausta: #f5f3ee; --pinta: #fff; --pinta-2: #fbfaf7; --raja: #e7e1d6; --raja-2: #d9d1c2;
  --teksti: #1d1b17; --hieno: #6b6458; --ok: #1e7a45; --ok-v: #e3f4e8; --vaara: #b3261e; --vaara-v: #fdecea;
  --r: 16px; --r-s: 12px; --varjo: 0 1px 2px rgb(20 18 14 / .04), 0 6px 20px -10px rgb(20 18 14 / .14);
  --sivupalkki: 264px; --alanav: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15.5px/1.55 Manrope, system-ui, sans-serif; color: var(--teksti); background: var(--tausta); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: Sora, sans-serif; color: var(--paa); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(22px, 4.4vw, 28px); } h2 { font-size: 18px; } h3 { font-size: 15.5px; }
a { color: var(--paa); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ik-svg { flex: none; display: block; }
.lataa { color: var(--hieno); padding: 40px 0; text-align: center; }
.ohje { color: var(--hieno); font-size: 13.5px; margin: 4px 0 0; }
.virhe { color: var(--vaara); font-weight: 600; }
.u-nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- kehys: sivupalkki + sisältö ---------------- */
.sovellus { min-height: 100vh; }
.kehys { max-width: 1240px; margin: 0 auto; padding: 24px 20px 110px; }
.sivupalkki { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sivupalkki); display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 14px; background: var(--paa-t); color: #e9efe9; overflow-y: auto; }
body.kirjautunut .paaosa { margin-left: var(--sivupalkki); }
.brandi { display: flex; gap: 12px; align-items: center; padding: 4px 8px 14px; }
.brandi__merkki { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--v, var(--paa-v)); color: var(--k); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.brandi__teksti { min-width: 0; display: grid; gap: 3px; }
.brandi__teksti b { font-family: Sora, sans-serif; font-size: 15px; color: #fff; line-height: 1.25; overflow-wrap: anywhere; }
.brandi__teksti small { color: #b9c7bd; font-size: 12.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sivunav { display: grid; gap: 2px; flex: 1; align-content: start; }
.nav-otsikko { margin: 14px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fa596; }
.nav-linkki { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #dde6df; text-decoration: none; font-weight: 600; font-size: 14.5px; text-align: start; cursor: pointer; width: 100%; }
.nav-linkki:hover { background: rgb(255 255 255 / .07); color: #fff; }
.nav-linkki[aria-current="page"] { background: rgb(201 164 106 / .16); color: #fff; box-shadow: inset 3px 0 0 var(--k); }
.nav-linkki[aria-current="page"] .ik-svg { color: var(--k); }
.nav-takaisin { color: #b9c7bd; font-size: 13.5px; min-height: 36px; margin-bottom: 4px; }
.avaa-sivu { margin: 10px 4px 6px; }
.kayttajalaatikko { border-top: 1px solid rgb(255 255 255 / .1); padding-top: 10px; display: grid; gap: 2px; }
.kayttajalaatikko__nimi { display: grid; min-width: 0; } .kayttajalaatikko__nimi b { color: #fff; font-size: 14px; } .kayttajalaatikko__nimi small { color: #9fb3a6; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ylapalkki { display: none; }
.alanav { display: none; }
.verho { display: none; }

@media (max-width: 899px) {
  body.kirjautunut .paaosa { margin-left: 0; }
  .sivupalkki { transform: translateX(-102%); transition: transform .22s ease; width: min(86vw, 320px); box-shadow: 0 0 40px rgb(0 0 0 / .35); }
  body.valikko-auki .sivupalkki { transform: none; }
  body.valikko-auki .verho { display: block; position: fixed; inset: 0; z-index: 35; background: rgb(10 12 10 / .45); }
  .ylapalkki:not([hidden]) { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--paa-t); color: #fff; }
  .ylapalkki .ikoninappi { color: #fff; border-color: transparent; background: rgb(255 255 255 / .06); }
  .ylapalkki__nimi { flex: 1; min-width: 0; font-family: Sora, sans-serif; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .alanav:not([hidden]) { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--alanav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--raja); box-shadow: 0 -6px 20px -12px rgb(0 0 0 / .2); }
  .alanav .nav-linkki { flex-direction: column; justify-content: center; gap: 3px; min-height: 0; padding: 6px 2px; border-radius: 0; color: var(--hieno); font-size: 11.5px; font-weight: 700; }
  .alanav .nav-linkki:hover { background: none; color: var(--paa); }
  .alanav .nav-linkki[aria-current="page"] { background: none; box-shadow: none; color: var(--paa); }
  .alanav .nav-linkki[aria-current="page"] .ik-svg { color: var(--paa); }
  .kehys { padding: 18px 14px calc(var(--alanav) + 90px); }
}

/* ---------------- yleiset osat ---------------- */
.otsake { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.otsake__teksti { min-width: 0; flex: 1 1 320px; }
.otsake h1 { display: flex; align-items: center; gap: 10px; }
.otsake__ik { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--kv); color: var(--k-t); }
.otsake p { margin: 6px 0 0; color: var(--hieno); max-width: 70ch; }
.otsake__toiminnot { display: flex; gap: 8px; flex-wrap: wrap; }
.otsikkorivi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.otsikkorivi p { margin: 4px 0 0; color: var(--hieno); }
.valiotsikko { margin: 26px 0 10px; font-size: 16px; }
.valiotsikko-rivi { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.valiotsikko-rivi .valiotsikko { margin-bottom: 4px; }
.takaisin { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--hieno); font-weight: 700; font-size: 14px; text-decoration: none; }
.takaisin:hover { color: var(--paa); }
.linkki { color: var(--k-t); font-weight: 700; text-decoration: none; font-size: 14px; } .linkki:hover { text-decoration: underline; }

.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 999px; background: var(--paa); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.nappi:hover { background: var(--paa-v); } .nappi:active { transform: translateY(1px); }
.nappi:disabled { opacity: .55; cursor: progress; }
.nappi.toissijainen { background: var(--pinta); color: var(--paa); border-color: var(--raja-2); }
.nappi.toissijainen:hover { border-color: var(--k); background: var(--kv); }
.nappi.pieni { min-height: 36px; padding: 6px 13px; font-size: 13.5px; }
.nappi.vaara { background: var(--pinta); color: var(--vaara); border-color: #f1c9c6; } .nappi.vaara:hover { background: var(--vaara-v); }
.nappi.kulta { background: var(--k); color: var(--paa-t); } .nappi.kulta:hover { background: #d6b57d; }
.nappi.leveä { width: 100%; }
.ikoninappi { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1.5px solid var(--raja); border-radius: 10px; background: var(--pinta); color: var(--paa); cursor: pointer; text-decoration: none; }
.ikoninappi:hover { border-color: var(--k); background: var(--kv); }
.linkkinappi { padding: 0; border: 0; background: none; color: var(--paa); font-weight: 700; text-decoration: underline; cursor: pointer; }
.napit-rivi { display: flex; flex-wrap: wrap; gap: 8px; }
.kortti { background: var(--pinta); border: 1px solid var(--raja); border-radius: var(--r); padding: 18px; box-shadow: var(--varjo); }
.kortti + .kortti { margin-top: 14px; }
.kortti__yla { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.siru { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #efebe4; color: var(--hieno); }
.siru.luonnos { background: #fff4d6; color: #6b4e00; } .siru.ehdotus { background: #eee8f8; color: #4b3684; } .siru.julkaistu { background: var(--ok-v); color: var(--ok); } .siru.luodaan, .siru.poistetaan { background: #e7f0fa; color: #12305a; }
.tyhja { display: grid; justify-items: center; gap: 10px; padding: 28px 10px; color: var(--hieno); text-align: center; }
.tyhja p { margin: 0; }

/* ---------------- lomakkeet ---------------- */
.lomakekortti { padding: 22px; }
.kentta { display: grid; gap: 6px; margin-bottom: 18px; scroll-margin: 90px; border-radius: 12px; transition: box-shadow .3s, background .3s; }
.kentta.korostus { box-shadow: 0 0 0 4px var(--kv), 0 0 0 6px var(--k); background: var(--kv); padding: 8px; }
.kentta > .nimi { font-weight: 800; color: var(--paa); font-size: 14.5px; }
.kentta > .nimi .pakollinen { color: var(--vaara); }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=number], input[type=search], textarea, select {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--raja-2); border-radius: var(--r-s); background: #fff; color: var(--teksti); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #a39c90; }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
textarea.pitka { min-height: 220px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 25%, transparent); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--k) 70%, transparent); outline-offset: 2px; }
[dir=rtl] { text-align: right; }
.valinnat { display: flex; flex-wrap: wrap; gap: 6px; }
.valinta { min-height: 38px; padding: 6px 14px; border: 1.5px solid var(--raja-2); border-radius: 999px; background: var(--pinta); color: var(--paa); font-weight: 700; font-size: 14px; cursor: pointer; }
.valinta:hover { border-color: var(--k); }
.valinta[aria-pressed="true"] { background: var(--paa); color: #fff; border-color: var(--paa); }
.valinta:disabled { opacity: .7; cursor: default; }
.valinta.uusi { border-style: dashed; }
.valinnan-ohje { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--kv); color: var(--paa); font-size: 13.5px; }
.kytkin { display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
.kytkin input { appearance: none; width: 50px; height: 30px; border-radius: 999px; background: #d8d2c7; position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.kytkin input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s; }
.kytkin input:checked { background: var(--ok); } .kytkin input:checked::after { transform: translateX(20px); }
details.kielet { margin-top: 2px; } details.kielet summary { cursor: pointer; color: var(--k-t); font-size: 13.5px; font-weight: 800; padding: 4px 0; }
details.kielet .kentta { margin: 10px 0 0; } details.kielet .kentta > .nimi { font-weight: 700; font-size: 13.5px; }
.ryhma { border: 1px solid var(--raja); border-radius: 14px; padding: 16px; margin: 0; background: var(--pinta-2); }
.ryhma > legend { font-weight: 800; color: var(--paa); padding: 0 6px; }
.listarivi { border: 1px solid var(--raja); border-radius: 14px; background: var(--pinta-2); margin-bottom: 10px; }
.listarivi > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--paa); list-style: none; }
.listarivi > summary::-webkit-details-marker { display: none; }
.listarivi > summary::before { content: '▸'; color: var(--hieno); transition: transform .15s; } .listarivi[open] > summary::before { transform: rotate(90deg); }
.listarivi > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listarivi .sisus { padding: 4px 14px 14px; }
.toiminnot { display: flex; flex-wrap: wrap; gap: 6px; }
.tyokalut { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tyokalut button { min-width: 36px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--raja-2); border-radius: 8px; background: #fff; color: var(--paa); font-weight: 700; font-size: 13px; cursor: pointer; }
.tyokalut button:hover { border-color: var(--k); background: var(--kv); }
.tyokalut button:last-child { margin-inline-start: auto; }
.md-esikatselu { min-height: 120px; padding: 12px 14px; border: 1.5px dashed var(--raja-2); border-radius: var(--r-s); background: var(--pinta-2); }
.md-esikatselu > * + * { margin-top: .8em; } .md-esikatselu p, .md-esikatselu ul, .md-esikatselu h3 { margin: 0; }
.md-esikatselu blockquote { margin: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--k); color: var(--hieno); }
.kuvakentta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kuvakentta img, .kuvaruutu img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--raja); background: #eee; }
.varikentta { display: flex; gap: 10px; align-items: center; }
.varikentta input[type=color] { width: 56px; height: 46px; padding: 4px; border: 1.5px solid var(--raja-2); border-radius: 12px; background: #fff; cursor: pointer; }
.sijaintikentta { display: grid; gap: 8px; } .sijaintikentta .kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* tallennuspalkki: aina näkyvissä lomakkeen alla */
.tallennuspalkki, .alapalkki { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; padding: 12px 14px; background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); border: 1px solid var(--raja); border-radius: var(--r); box-shadow: 0 -8px 30px -18px rgb(0 0 0 / .35); }
.tallennuspalkki__tila { margin-inline-end: auto; color: var(--k-t); font-weight: 800; font-size: 13.5px; }
.alapalkki .vasen { margin-inline-end: auto; }
@media (max-width: 899px) { .tallennuspalkki, .alapalkki { bottom: calc(var(--alanav) + env(safe-area-inset-bottom) + 8px); } }

/* ---------------- yleiskatsaus ---------------- */
.tilapalkki { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); margin-bottom: 16px; border: 1px solid; }
.tilapalkki.luonnos { background: #fff8e6; border-color: #f0d58a; color: #6b4e00; } .tilapalkki.ehdotus { background: #f4f0fb; border-color: #d9cdf0; color: #4b3684; } .tilapalkki.julkaistu { background: #eef8f1; border-color: #c6e7d1; color: var(--ok); }
.tilapalkki p { margin: 0; flex: 1 1 260px; color: var(--teksti); }
.pikatoiminnot { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pikanappi { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--raja); border-radius: 14px; background: var(--pinta); color: var(--paa); font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: var(--varjo); transition: transform .12s, border-color .12s; }
.pikanappi:hover { transform: translateY(-2px); border-color: var(--k); }
.pikanappi__ik { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--kv); color: var(--k-t); }
.koti-ruudukko { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .koti-ruudukko { grid-template-columns: 1.15fr 1fr; } }
.koti-sarake { display: grid; gap: 16px; align-content: start; }
.koti-ruudukko .kortti + .kortti, .koti-sarake .kortti + .kortti { margin-top: 0; }
.valmius__yla { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.valmius__yla h2 { margin-bottom: 2px; }
.rengas { --p: 0; flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--k) calc(var(--p) * 1%), #eee7da 0); }
.rengas span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; font: 700 17px Sora, sans-serif; color: var(--paa); }
.tehtavat { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tehtavat a { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; text-decoration: none; color: inherit; }
.tehtavat a:hover { background: var(--pinta-2); }
.tehtavat a > span:nth-child(2) { flex: 1; display: grid; } .tehtavat b { color: var(--paa); font-size: 14.5px; } .tehtavat small { color: var(--hieno); font-size: 13px; }
.tehtavat__merkki { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--raja-2); }
.tehtavat li.tehty .tehtavat__merkki { background: var(--ok); border-color: var(--ok); color: #fff; }
.tehtavat li.tehty b { color: var(--hieno); text-decoration: line-through; text-decoration-thickness: 1px; }
.tapahtumarivi { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.tapahtumarivi time, .paivalaatta { display: grid; place-items: center; width: 52px; height: 56px; flex: none; border-radius: 12px; background: var(--kv); color: var(--paa); font: 800 18px/1.05 Sora, sans-serif; }
.tapahtumarivi time small, .paivalaatta small { font: 700 11.5px Manrope, sans-serif; color: var(--k-t); }
.tapahtumarivi > span { display: grid; } .tapahtumarivi small { color: var(--hieno); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--raja); }
.lista > li:first-child { border-top: 0; } .lista small { color: var(--hieno); }
.lista .tiedot { min-width: 0; flex: 1 1 220px; } .lista .tiedot b { display: block; overflow-wrap: anywhere; }

/* ---------------- sivut ---------------- */
.sivukortit, .asetusruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sivukortti { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--raja); border-radius: var(--r); background: var(--pinta); color: inherit; text-decoration: none; box-shadow: var(--varjo); transition: transform .12s, border-color .12s; }
.sivukortti:hover { transform: translateY(-2px); border-color: var(--k); }
.sivukortti > .ik-svg { color: var(--hieno); }
.sivukortti__ik { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--kv); color: var(--k-t); }
.sivukortti__teksti { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.sivukortti__teksti b { color: var(--paa); font-size: 15px; } .sivukortti__teksti small { color: var(--hieno); font-size: 13px; }
.muokkaus { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1180px) { .muokkaus.esik { grid-template-columns: minmax(0, 1fr) 380px; } .esikatselu { position: sticky; top: 20px; } }
.esikatselu { display: grid; gap: 8px; justify-items: center; }
.esikatselu__yla { display: flex; align-items: center; justify-content: space-between; width: min(100%, 380px); }
.esikatselu__otsake { font-size: 12px; color: var(--hieno); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.puhelin { width: min(100%, 380px); padding: 10px; border-radius: 36px; background: #161616; box-shadow: 0 20px 50px -25px rgb(0 0 0 / .5); }
.puhelin iframe { display: block; width: 100%; height: min(74vh, 720px); border: 0; border-radius: 28px; background: #fff; }
.puhelin .sisalto { border-radius: 28px; background: #f7f6f2; padding: 16px; min-height: 300px; }
@media (max-width: 1179px) { .esikatselu.piilossa-puh { display: none; } }
.esik-nappi { display: none; } @media (max-width: 1179px) { .esik-nappi { display: inline-flex; } }
.tapahtumakortti { display: flex; gap: 14px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--raja); border-radius: 16px; text-align: start; }
.tapahtumakortti time { display: grid; place-items: center; flex: none; width: 58px; height: 62px; border-radius: 12px; background: var(--kv); color: var(--paa); font-weight: 800; line-height: 1.1; }
.tapahtumakortti time small { font-weight: 600; font-size: 12px; }

/* ---------------- listat (tapahtumat, tiedotteet, tiedostot) ---------------- */
.suodatinrivi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hakukentta { position: relative; flex: 1 1 220px; max-width: 360px; }
.hakukentta .ik-svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hieno); }
.hakukentta input { padding-left: 38px; min-height: 40px; }
.kokoelmalista { display: grid; }
.kokoelmarivi { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--raja); }
.kokoelmarivi:first-child { border-top: 0; }
.kokoelmarivi__ik { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--kv); color: var(--k-t); }
.kokoelmarivi__teksti { flex: 1; min-width: 0; display: grid; text-decoration: none; color: inherit; }
.kokoelmarivi__teksti b { color: var(--paa); overflow-wrap: anywhere; } .kokoelmarivi__teksti small { color: var(--hieno); font-size: 13px; }
.kokoelmarivi__teksti:hover b { text-decoration: underline; }
.kokoelmarivi__kuva { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.kokoelmarivi__toiminnot { display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) { .kokoelmarivi__kuva { display: none; } .kokoelmarivi { flex-wrap: wrap; } .kokoelmarivi__toiminnot { margin-left: 66px; } }
.kuvaruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.kuvaruutu { position: relative; margin: 0; } .kuvaruutu img { width: 100%; height: auto; aspect-ratio: 4/3; }
.kuvaruutu button.poista, .kokoelmarivi .poista { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .62); color: #fff; cursor: pointer; }
.kuvaruutu button.poista { position: absolute; top: 6px; right: 6px; }
.kokoelmarivi .poista { background: var(--vaara-v); color: var(--vaara); }
.kuvaruutu button.valitse { all: unset; display: block; cursor: pointer; border-radius: 10px; }
.kuvaruutu button.valitse:focus-visible img, .kuvaruutu.valittu img { outline: 3px solid var(--k); outline-offset: 2px; }
.kuvaruutu figcaption { font-size: 12px; color: var(--hieno); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.pudotus { display: grid; place-items: center; gap: 6px; min-height: 130px; padding: 18px; border: 2px dashed var(--raja-2); border-radius: var(--r); background: var(--pinta); color: var(--hieno); text-align: center; cursor: pointer; margin-bottom: 14px; transition: border-color .15s, background .15s; }
.pudotus:hover, .pudotus.paalla { border-color: var(--k); background: var(--kv); }
.pudotus b { color: var(--paa); } .pudotus__ik { color: var(--k-t); }

/* ---------------- värit, osiot ---------------- */
.varit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vari { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 2px solid var(--raja); border-radius: 14px; background: #fff; font-weight: 700; font-size: 13.5px; color: var(--paa); text-align: start; cursor: pointer; }
.vari[aria-pressed="true"] { border-color: var(--paa); box-shadow: 0 0 0 3px var(--kv); }
.nayte { flex: none; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(var(--a) 0 50%, var(--b) 50% 80%, var(--c) 80% 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.osiot-lista { display: grid; gap: 10px; }
.osiorivi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--raja); border-radius: 14px; background: #fff; }
.osiorivi .ik { font-size: 24px; flex: none; width: 34px; text-align: center; }
.osiorivi .tiedot { flex: 1 1 200px; min-width: 0; display: grid; } .osiorivi .tiedot b { color: var(--paa); } .osiorivi .tiedot small { color: var(--hieno); font-size: 13px; }
.osiorivi .toiminnot { display: flex; gap: 6px; flex-wrap: wrap; }
.osiorivi.kiintea { background: var(--kv); border-style: dashed; }
details.osiorivi { display: block; padding: 0; background: var(--pinta-2); }
details.osiorivi > summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
details.osiorivi > summary::-webkit-details-marker { display: none; }
details.osiorivi > summary::after { content: '▸'; margin-inline-start: auto; color: var(--hieno); transition: transform .15s; } details.osiorivi[open] > summary::after { transform: rotate(90deg); }
details.osiorivi .sisus { padding: 4px 14px 14px; border-top: 1px solid var(--raja); }
details.osiorivi .sisus .toiminnot { margin-top: 6px; }
.osiovalinnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.osiovalinta { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--raja); border-radius: 14px; background: #fff; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.osiovalinta:hover, .osiovalinta:focus-visible { border-color: var(--k); background: var(--kv); }
.osiovalinta .ik { font-size: 24px; } .osiovalinta b { display: block; color: var(--paa); } .osiovalinta small { color: var(--hieno); font-size: 13px; }
.listaruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 10px; }
.listaruudukko .kentta { margin-bottom: 10px; } .listaruudukko .kentta > .nimi { font-size: 13px; }
.tekstirivi { padding: 10px 0; border-top: 1px solid var(--raja); } .tekstirivi > small { font-family: ui-monospace, monospace; }

/* ---------------- kirjautuminen ---------------- */
.kirjaudu { max-width: 440px; margin: 8vh auto; }
.kirjaudu .kortti { padding: 28px; display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgb(20 40 30 / .35); }
.kirjaudu .logo { display: flex; align-items: center; gap: 14px; }
.yla__koti { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--paa); flex: none; }
.merkki { width: 20px; height: 24px; background: var(--k); clip-path: path('M10 0C13 3 20 6 20 12V24H0V12C0 6 7 3 10 0Z'); }
.koodi { letter-spacing: .5em; text-align: center; font-size: 24px !important; font-weight: 800; }
body:not(.kirjautunut) { background: radial-gradient(1200px 600px at 10% -10%, #e8efe9, transparent), radial-gradient(900px 500px at 110% 110%, #f3ead8, transparent), var(--tausta); }

/* ---------------- ylläpito ---------------- */
.ruudut { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ruutu { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--raja); border-radius: var(--r); background: var(--pinta); text-decoration: none; color: inherit; box-shadow: var(--varjo); }
.ruutu:hover { border-color: var(--k); } .ruutu b { font-family: Sora, sans-serif; color: var(--paa); } .ruutu small { color: var(--hieno); }
.ruutu__ik { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--kv); color: var(--k-t); }
.taulu-kaari { overflow-x: auto; }
.taulu { width: 100%; border-collapse: collapse; font-size: 14.5px; } .taulu th, .taulu td { padding: 11px 8px; border-bottom: 1px solid var(--raja); text-align: start; vertical-align: middle; }
.taulu th { font-size: 12px; color: var(--hieno); text-transform: uppercase; letter-spacing: .06em; }
.taulu tbody tr:hover { background: var(--pinta-2); }
.tilastot { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; } .tilastot div { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--raja); box-shadow: var(--varjo); color: var(--hieno); font-size: 13.5px; } .tilastot b { display: block; font-family: Sora, sans-serif; font-size: 26px; color: var(--paa); }
.kutsurivi { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; align-items: end; }
.kutsurivi .kentta { margin: 0; }
@media (max-width: 760px) { .piilo-puh { display: none !important; } .kutsurivi { grid-template-columns: 1fr; } .kutsurivi .nappi { width: 100%; } }

/* ---------------- ikkunat ja ilmoitukset ---------------- */
dialog.ikkuna { width: min(780px, calc(100% - 24px)); max-height: calc(100% - 40px); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
dialog.ikkuna::backdrop { background: rgb(20 18 14 / .55); }
dialog.ikkuna .ikkuna__yla { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--raja); z-index: 1; }
dialog.ikkuna .ikkuna__sisus { padding: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 18px; border-radius: 14px; background: var(--paa-t); color: #fff; box-shadow: 0 12px 30px rgb(0 0 0 / .25); font-weight: 700; z-index: 60; max-width: calc(100% - 32px); }
.toast.virhe { background: var(--vaara); }
@media (max-width: 899px) { .toast { bottom: calc(var(--alanav) + 20px); } }

/* Valikkoeditori */
.valikkoeditori { display: grid; gap: 4px; }
.valikkolista { display: grid; gap: 6px; }
.valikkorivi { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--raja); border-radius: 12px; background: #fff; }
details.valikkorivi { display: block; padding: 0; } details.valikkorivi > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
details.valikkorivi > summary::-webkit-details-marker { display: none; } details.valikkorivi .sisus { padding: 4px 12px 12px; border-top: 1px solid var(--raja); }
.valikkorivi__nro { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--paa); color: #fff; font-size: 12px; font-weight: 800; }
.valikkorivi__ik { color: var(--k-t); flex: none; }
.valikkorivi__teksti { flex: 1; min-width: 0; display: grid; } .valikkorivi__teksti b { color: var(--paa); } .valikkorivi__teksti small { color: var(--hieno); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.valikkorivi .toiminnot { flex-wrap: nowrap; }
.valikkorivi .ikoninappi { width: 34px; height: 34px; } .valikkorivi .ikoninappi .ik-svg { transform: rotate(90deg); }
.valikkorivi .ikoninappi:disabled { opacity: .35; cursor: default; }
.valikko-piilossa { display: grid; gap: 6px; margin-top: 10px; } .valikko-piilossa .nav-otsikko { color: var(--hieno); margin: 4px 2px; }
.valikkorivi--pois { background: var(--pinta-2); border-style: dashed; }
.valinta.pois[aria-pressed="true"] { background: var(--vaara-v); color: var(--vaara); border-color: #f1c9c6; }
@media (max-width: 560px) { .valikkorivi { flex-wrap: wrap; } .valikkorivi .toiminnot { margin-left: auto; } }

/* Prosessien sujuvoittaminen */
.linkkikentta { display: grid; gap: 6px; justify-items: start; } .linkkikentta input { width: 100%; }
.galleria-nappi { display: block; width: 100%; margin-top: 4px; min-height: 32px; padding: 4px 8px; border: 1.5px solid var(--raja-2); border-radius: 999px; background: #fff; color: var(--paa); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.galleria-nappi:hover { border-color: var(--k); background: var(--kv); }
.galleria-nappi[aria-pressed="true"] { background: var(--ok-v); border-color: #c6e7d1; color: var(--ok); }
.kuvaruutu.galleriassa img { outline: 3px solid var(--ok); outline-offset: -3px; }
.nimikortti { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; } .nimikortti > div { flex: 1 1 220px; display: grid; } .nimikortti input { flex: 1 1 200px; width: auto; min-height: 40px; }
.tallennuspalkki__jatko { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--raja); color: var(--ok); }
.tallennuspalkki__jatko > span:first-child { display: inline-flex; gap: 6px; align-items: center; color: var(--teksti); } .tallennuspalkki__jatko > span:first-child .ik-svg { color: var(--ok); }
@media (max-width: 899px) { .toast { top: calc(64px + env(safe-area-inset-top)); bottom: auto; } }

/* ---------------- taustakuvat ja kuviot ---------------- */
.taustavalinnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.taustavalinta { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--raja); border-radius: 14px; background: #fff; text-align: start; cursor: pointer; font: inherit; }
figure.taustavalinta { cursor: default; }
.taustavalinta img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--kv); }
.taustavalinta__plus { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--pinta-2); color: var(--hieno); }
.taustavalinta__nimi { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; color: var(--paa); }
.taustavalinta[aria-pressed="true"], .kuviovalinta[aria-pressed="true"] { border-color: var(--paa); box-shadow: 0 0 0 3px var(--kv); }
.taustavalinta.oma { border-style: dashed; }
.taustavalinta.oma[aria-pressed="true"] { border-style: solid; }
.kuviot { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.kuviovalinta { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 2px solid var(--raja); border-radius: 14px; background: #fff; text-align: start; font: inherit; }
button.kuviovalinta { cursor: pointer; }
.kuviovalinta__nayte { position: relative; display: block; height: 52px; background: var(--kv); }
.kuviovalinta__nayte.tyhja { background: repeating-linear-gradient(135deg, var(--pinta-2) 0 8px, #fff 8px 16px); }
.kuviovalinta__kuvio { position: absolute; inset: 0; background: var(--k-t); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: center; mask-position: center; }
.kuviovalinta__nimi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; padding: 7px 10px; overflow-wrap: anywhere; font-weight: 700; font-size: 13px; color: var(--paa); }
.linkkinappi.vaara { color: var(--vaara); font-size: 12.5px; }

/* ---------------- liukusäädin (kulmat, varjo) ---------------- */
.saadin { display: grid; gap: 8px; max-width: 460px; }
.saadin input[type="range"] { width: 100%; accent-color: var(--paa); }
.saadin input[type="range"].oletus { opacity: .55; }
.saadin__rivi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kentta .saadin .saadin__luku, .saadin .saadin__luku { width: 96px; flex: none; }
.saadin__yksikko { color: var(--hieno); font-weight: 600; }
.saadin__tila { flex: 1; color: var(--hieno); font-size: 13.5px; }

/* ---------------- oma verkkotunnus ---------------- */
.verkkotunnus p { margin: 0 0 10px; }
.rivi-syote { display: flex; flex-wrap: wrap; gap: 8px; }
.rivi-syote input { flex: 1 1 220px; }
.dns-taulukko { overflow-x: auto; margin: 6px 0 12px; border: 1px solid var(--raja); border-radius: 12px; }
.dns-taulukko table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dns-taulukko th, .dns-taulukko td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--raja); white-space: nowrap; }
.dns-taulukko tr:last-child td { border-bottom: 0; }
.dns-taulukko th { background: var(--pinta-2); font-size: 12.5px; color: var(--hieno); }
.dns-taulukko code { font-size: 13px; user-select: all; }
.dns-tulos { margin-top: 12px; }
/* Puhelimella DNS-tietueet allekkain korteiksi, jotta kaikki sarakkeet näkyvät */
@media (max-width: 640px) {
  .dns-taulukko { border: 0; overflow: visible; }
  .dns-taulukko thead { display: none; }
  .dns-taulukko table, .dns-taulukko tbody, .dns-taulukko tr, .dns-taulukko td { display: block; width: 100%; }
  .dns-taulukko tr { margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--raja); border-radius: 12px; background: #fff; }
  .dns-taulukko td { display: flex; gap: 10px; padding: 3px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .dns-taulukko td::before { content: attr(data-o); flex: 0 0 56px; color: var(--hieno); font-size: 12.5px; font-weight: 700; }
}

/* ---------------- haku ja jakaminen ---------------- */
.jakokuva { display: grid; gap: 10px; }
.jakokuva__rajaus { width: min(100%, 420px); aspect-ratio: 1.91 / 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--raja); background: var(--pinta-2); }
.jakokuva__rajaus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jakokuva__varoitus { color: var(--vaara); font-weight: 600; }
.hakuesik { position: sticky; top: 16px; align-self: start; display: grid; gap: 10px; }
.hakuesik__otsake { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--hieno); margin-top: 4px; }
.jakokortti { overflow: hidden; border-radius: 14px; background: #e9f3ea; border: 1px solid #d3e4d5; max-width: 380px; }
.jakokortti__kuva { aspect-ratio: 1.91 / 1; background: #dfe7df; display: grid; place-items: center; color: var(--hieno); }
.jakokortti__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jakokortti__teksti { display: grid; gap: 2px; padding: 9px 12px 11px; font-size: 13.5px; }
.jakokortti__teksti small { color: #5b6b5d; text-transform: lowercase; }
.jakokortti__teksti span { color: #3d4a3f; }
.googletulos { display: grid; gap: 3px; max-width: 520px; padding: 14px 16px; border: 1px solid var(--raja); border-radius: 14px; background: #fff; font-family: Arial, sans-serif; }
.googletulos small { color: #4d5156; font-size: 13px; }
.googletulos b { color: #1a0dab; font-weight: 400; font-size: 19px; line-height: 1.3; }
.googletulos span { color: #4d5156; font-size: 14px; line-height: 1.5; }
.nakyvyys { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--raja); }
.nakyvyys h3 { margin-bottom: 10px; }
.nakyvyys__lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.nakyvyys__lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--raja); border-radius: 12px; background: #fff; }
.nakyvyys__lista li > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.nakyvyys__lista small { color: var(--hieno); font-size: 13px; overflow-wrap: anywhere; }
.nakyvyys__lista small a { font-weight: 700; }
.nakyvyys__ik { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 14px; }
.nakyvyys__lista .ok .nakyvyys__ik { background: var(--ok-v); color: var(--ok); }
.nakyvyys__lista .puuttuu .nakyvyys__ik { background: #fff3d6; color: #8a5a00; }
.nakyvyys__lista .info .nakyvyys__ik { background: var(--pinta-2); color: var(--hieno); border: 1px solid var(--raja); }

/* ---------------- valvonta ---------------- */
.valvonta__osio { margin-bottom: 18px; }
.valvonta__otsake { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.valvonta__ok { color: var(--ok); font-weight: 700; margin: 10px 0 0; }
.valvonta__virheet { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.valvonta__virheet li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #f0c9c5; background: var(--vaara-v); border-radius: 12px; }
.valvonta__virheet li > span:nth-child(2) { flex: 1; display: grid; min-width: 160px; }
.valvonta__virheet small { color: var(--hieno); }
.merkki.vaara { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vaara); color: #fff; font-weight: 800; }
.valvonta__mittarit { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 12px 0; }
.mittari { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--raja); border-radius: 14px; background: #fff; }
.mittari__yla { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mittari__osuus { font-weight: 800; font-variant-numeric: tabular-nums; }
.mittari.ok .mittari__osuus { color: var(--ok); } .mittari.varoitus .mittari__osuus { color: #8a5a00; } .mittari.vaara .mittari__osuus { color: var(--vaara); }
.mittari__palkki { display: block; height: 8px; border-radius: 999px; background: var(--pinta-2); overflow: hidden; border: 1px solid var(--raja); }
.mittari__taytto { display: block; height: 100%; border-radius: inherit; }
.mittari__taytto.ok { background: var(--ok); } .mittari__taytto.varoitus { background: #d79a1e; } .mittari__taytto.vaara { background: var(--vaara); }
.mittari small { color: var(--hieno); font-size: 13px; }
.mittari__vinkki { color: var(--teksti) !important; }
.valvonta__huomio { margin: 8px 0 0; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--pinta-2); }
.valvonta__huomio.varoitus { background: #fff3d6; }

/* Pääsyavaimet */
.kirjaudu .avainosa { display: grid; gap: 8px; }
.kirjaudu .avainosa .nappi { display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.kirjaudu .avainosa .ohje { margin: 0; text-align: center; }
.tai { display: flex; align-items: center; gap: 12px; color: var(--hieno); font-size: 13px; margin-top: 6px; }
.tai::before, .tai::after { content: ''; flex: 1; border-top: 1px solid var(--raja); }
.avainlista b { display: inline-flex; align-items: center; gap: 6px; }
.avainkehote { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 16px clamp(16px, 3vw, 32px) 0; padding: 14px 18px; border: 1px solid var(--raja); border-left: 4px solid var(--k); border-radius: var(--r); background: var(--pinta); box-shadow: var(--varjo); }
.avainkehote b { font-family: Sora, sans-serif; color: var(--paa); }
.avainkehote p { margin: 4px 0 0; color: var(--hieno); font-size: 14px; max-width: 60ch; }
.avainkehote .napit-rivi { display: flex; gap: 8px; flex-wrap: wrap; }
.avainkehote .nappi { display: inline-flex; align-items: center; gap: 6px; }

/* Haku sivupalkissa */
.navhaku { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 0 12px; border-radius: 10px; background: rgb(255 255 255 / .08); color: #b9c7bd; }
.navhaku:focus-within { background: rgb(255 255 255 / .14); box-shadow: 0 0 0 2px var(--k); }
.navhaku__kentta { flex: 1; min-width: 0; height: 40px; border: 0 !important; background: none !important; color: #fff !important; font: inherit; font-size: 14px; padding: 0 !important; box-shadow: none !important; outline: none; }
.navhaku__kentta::placeholder { color: #9fb3a6; }
.navhaku__tulokset { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--pinta); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); max-height: 60vh; overflow-y: auto; }
.navhaku__tulokset a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--teksti, #1f2a24); text-decoration: none; }
.navhaku__tulokset b { font-size: 14px; } .navhaku__tulokset small { color: var(--hieno); font-size: 12px; }
.navhaku__tulokset [aria-selected="true"] a, .navhaku__tulokset a:hover { background: var(--kv, #f3ead8); }
.navhaku__tyhja { padding: 10px; color: var(--hieno); font-size: 13.5px; }

/* Sivut-näkymä: sivut valikon järjestyksessä */
.sivulista { display: grid; gap: 10px; margin-bottom: 8px; }
.sivukortti--rivi { padding: 14px 16px; }
.sivukortti__nro { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--kv); color: var(--k-t); font-size: 13px; font-weight: 800; }
.sivukortti__merkit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.siru.pois { background: #fff4d6; color: #6b4e00; }
.siru.oma { background: var(--kv); color: var(--k-t); }
.navhaku__kentta { -webkit-appearance: none; appearance: none; background-image: none !important; }
.navhaku__kentta::-webkit-search-decoration, .navhaku__kentta::-webkit-search-results-button, .navhaku__kentta::-webkit-search-results-decoration, .navhaku__kentta::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }

/* Sivupalkki: koko valikko mahtuu näytölle väljänä – tilaa säästetään yhdistämällä rivejä, ei puristamalla */
.brandi__toiminnot { display: flex; gap: 6px; margin: -4px 0 10px; min-width: 0; }
.brandinappi { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; background: rgb(255 255 255 / .08); color: #dde6df; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brandinappi--kulta { flex: 0 0 auto; }
.brandinappi:hover { background: rgb(255 255 255 / .14); color: #fff; }
.brandinappi--kulta { background: var(--k); color: var(--paa-t); }
.brandinappi--kulta:hover { background: #d8b47c; color: var(--paa-t); }
@media (min-width: 900px) {
  .sivupalkki { gap: 4px; padding: 16px 12px 10px; }
  .navhaku { margin-bottom: 6px; }
  .navhaku__kentta { height: 38px; }
  .nav-otsikko { margin: 12px 12px 4px; }
  .nav-linkki { min-height: 38px; padding: 7px 12px; }
  .kayttajalaatikko { padding-top: 8px; margin-top: 6px; }
}
/* Matalampi näyttö (esim. 1366×768): hieman tiiviimpi, mutta sama rytmi */
@media (min-width: 900px) and (max-height: 860px) {
  .sivupalkki { padding-top: 12px; }
  .brandi { padding-bottom: 10px; }
  .nav-otsikko { margin: 9px 12px 3px; }
  .nav-linkki { min-height: 34px; padding: 5px 12px; }
  .kayttajalaatikko__nimi small { display: none; }
}
/* Kannettava selaimen kanssa (näkyvä korkeus noin 650 px) */
@media (min-width: 900px) and (max-height: 720px) {
  .sivupalkki { gap: 2px; padding: 10px 12px 6px; }
  .brandi { padding: 0 6px 8px; }
  .brandi__toiminnot { margin-bottom: 8px; }
  .brandinappi { min-height: 30px; padding: 4px 10px; }
  .navhaku__kentta { height: 34px; }
  .nav-otsikko { margin: 6px 12px 1px; }
  .nav-linkki { min-height: 30px; padding: 3px 12px; }
  .kayttajalaatikko { padding-top: 4px; margin-top: 2px; }
}
/* Oma tili ja uloskirjautuminen samalla rivillä */
.kayttajalaatikko { display: flex; align-items: center; gap: 2px; }
.kayttajalaatikko > .nav-linkki:first-child { flex: 1; min-width: 0; }
.kayttajalaatikko__ulos { width: auto; flex: none; padding: 6px 10px; }

/* ---------------- rukousajat ---------------- */
@media (min-width: 1180px) { .muokkaus.esik.rkmuokkaus { grid-template-columns: minmax(0, 1fr) 470px; } }
.rkviikko { padding: 18px; display: grid; gap: 10px; align-content: start; }
.rkviikko__yla { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rkviikko__yla h2 { font-size: 17px; }
.rkviikko__taulu { overflow-x: auto; }
.rkviikko table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rkviikko th, .rkviikko td { padding: 7px 5px; text-align: center; border-bottom: 1px solid var(--raja); vertical-align: top; }
.rkviikko thead th { font-size: 11.5px; color: var(--hieno); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.rkviikko tbody th { text-align: start; white-space: nowrap; }
.rkviikko tbody th b { display: block; font-size: 13.5px; }
.rkviikko small { display: block; color: var(--hieno); font-size: 11.5px; font-weight: 600; }
.rkviikko td b { font-size: 14px; }
.rkviikko tr.pe { background: color-mix(in srgb, var(--kv) 55%, transparent); }
.rkviikko tr.muutos th small { color: var(--k-t); }
.rkviikko td.jumua small { color: var(--k-t); }
.rkviikko__selite { margin: 0; }
.iqamah { display: grid; gap: 8px; }
.iqamah__rivi { display: grid; grid-template-columns: 80px 110px minmax(0, 1fr); gap: 8px; align-items: center; }
.iqamah__rivi input, .iqamah__rivi select { min-height: 40px; }
.rkmuutokset { display: grid; gap: 12px; }
.rkmuutos { border: 1px solid var(--raja); border-radius: var(--r-s); padding: 12px; display: grid; gap: 10px; background: var(--pinta); }
.rkmuutos__yla { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.rkmuutos__yla label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--paa); }
.rkmuutos__ajat { display: grid; grid-template-columns: 80px repeat(2, minmax(0, 1fr)); gap: 6px 8px; align-items: center; }
.rkmuutos__ajat small { color: var(--hieno); font-weight: 700; font-size: 12px; }
.rkmuutos__ajat input { min-height: 38px; padding: 6px 10px; }
.rkoma { margin-top: 18px; padding: 18px; display: grid; gap: 12px; }
.rkoma__tyokalut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rkoma__tyokalut select { width: auto; min-height: 38px; }
.rktaulukko { overflow: auto; max-height: 520px; border: 1px solid var(--raja); border-radius: var(--r-s); }
.rktaulukko table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rktaulukko thead th { position: sticky; top: 0; z-index: 1; background: var(--pinta); font-size: 11.5px; color: var(--hieno); padding: 6px 4px; white-space: nowrap; border-bottom: 1px solid var(--raja); }
.rktaulukko tbody th { position: sticky; left: 0; background: var(--pinta); padding: 2px 8px; font-size: 13px; white-space: nowrap; text-align: start; }
.rktaulukko td { padding: 2px; }
.rktaulukko input { width: 64px; min-height: 32px !important; padding: 4px 6px !important; text-align: center; font-size: 13.5px; border-width: 1px !important; }
.rktaulukko tr.pe th, .rktaulukko tr.pe td { background: color-mix(in srgb, var(--kv) 55%, var(--pinta)); }
.rkoma__ala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .rkmuutos__yla { grid-template-columns: 1fr; } .iqamah__rivi { grid-template-columns: 64px 80px minmax(0, 1fr); } }
@media (min-width: 1180px) { .rkviikko { position: sticky; top: 20px; } }
/* Minuuttikorjaukset kuuteen pieneen kenttään rinnakkain */
#kentta-rukousajat-saadot .ryhma { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px 10px; }
#kentta-rukousajat-saadot .ryhma > legend, #kentta-rukousajat-saadot .ryhma > .ohje { grid-column: 1 / -1; }
#kentta-rukousajat-saadot .ryhma .kentta { margin: 0; gap: 4px; }
#kentta-rukousajat-saadot .ryhma .kentta .nimi { font-size: 13px; }
#kentta-rukousajat-saadot .ryhma input { min-height: 38px; text-align: center; }

/* Google- ja Microsoft-kirjautuminen */
.palvelumerkki { display: inline-block; width: 18px; height: 18px; flex: none; background: center / contain no-repeat; vertical-align: -3px; }
.palvelumerkki--google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E"); }
.palvelumerkki--microsoft { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath fill='%23f25022' d='M1 1h9v9H1z'/%3E%3Cpath fill='%2300a4ef' d='M1 11h9v9H1z'/%3E%3Cpath fill='%237fba00' d='M11 1h9v9h-9z'/%3E%3Cpath fill='%23ffb900' d='M11 11h9v9h-9z'/%3E%3C/svg%3E"); }
.kirjaudu .avainosa .nappi.toissijainen { background: #fff; }
.kirjaudu__linkkiohje { text-align: center; margin: 0; }
.linkkitulos input { font-size: 13px; }