:root { /* Luotsin hyväksytty "sähkönsininen" ilme (build 144, commit 582dfb91, 22.9.2026): vaalea pohja, hillitty sininen, selkeät kortit. ok-väri hieman tummennettu tekstikontrastin vuoksi. */ --tausta:#f7f8fc; --kortti:#ffffff; --teksti:#0b1326; --himmea:#485474; --viiva:#dee2ee; --aksentti:#0a5eef; --varoitus:#7a6124; --varoitus-tausta:#fffbef; --este:#b84a3f; --este-tausta:#fbedeb; --ok:#2f7a4d; --kk-primary:var(--aksentti); --kk-primary-soft:color-mix(in srgb, var(--aksentti) 10%, #fff); --kk-green:#1e7a45; --kk-green-soft:#e4f4ea; --kk-orange:#9a5200; --kk-orange-soft:#fdf0dc; --kk-red:#b3261e; --kk-red-soft:#fbe5e5; --kk-muted:#5b6b7f; --kk-grey-soft:#eef1f5; --kk-dialogi-reuna:#dbe3eb; --kk-dialogi-teksti:#141c30; --kk-dialogi-varjo:0 4px 12px rgba(31,48,87,.12); --varjo:0 1px 2px rgba(13,21,51,.04), 0 1px 3px rgba(13,21,51,.03); }
:root[data-teema="tumma"] { --tausta:#04101e; --kortti:#0a1a2b; --teksti:#f6f8fc; --himmea:#b8c3d8; --viiva:#26384e; --aksentti:#5b9dff; --varoitus:#e0c179; --varoitus-tausta:#2a2510; --este:#d97468; --este-tausta:#3b1d1a; --ok:#5fae7d; --kk-primary:var(--aksentti); --kk-primary-soft:#10294d; --kk-green:#5fae7d; --kk-green-soft:#12301e; --kk-orange:#e0c179; --kk-orange-soft:#2a2510; --kk-red:#d97468; --kk-red-soft:#3b1d1a; --kk-muted:#b8c3d8; --kk-grey-soft:#1a2a3d; --kk-dialogi-reuna:#26384e; --kk-dialogi-teksti:#f6f8fc; --kk-dialogi-varjo:0 4px 12px rgba(0,0,0,.5); --varjo:0 1px 2px rgba(0,0,0,.4); } @media (prefers-color-scheme: dark) { :root[data-teema="jarjestelma"] { --tausta:#04101e; --kortti:#0a1a2b; --teksti:#f6f8fc; --himmea:#b8c3d8; --viiva:#26384e; --aksentti:#5b9dff; --varoitus:#e0c179; --varoitus-tausta:#2a2510; --este:#d97468; --este-tausta:#3b1d1a; --ok:#5fae7d; --kk-primary:var(--aksentti); --kk-primary-soft:#10294d; --kk-green:#5fae7d; --kk-green-soft:#12301e; --kk-orange:#e0c179; --kk-orange-soft:#2a2510; --kk-red:#d97468; --kk-red-soft:#3b1d1a; --kk-muted:#b8c3d8; --kk-grey-soft:#1a2a3d; --kk-dialogi-reuna:#26384e; --kk-dialogi-teksti:#f6f8fc; --kk-dialogi-varjo:0 4px 12px rgba(0,0,0,.5); --varjo:0 1px 2px rgba(0,0,0,.4); } }
* { box-sizing: border-box; }
body { margin:0; background:var(--tausta); color:var(--teksti); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; }
.yla { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--kortti); border-bottom:1px solid var(--viiva); }
.logo { font-weight:700; color:var(--teksti); text-decoration:none; font-size:1.15rem; }
.kehitys { font-size:.8rem; color:var(--himmea); display:flex; gap:8px; align-items:center; }
select { font:inherit; padding:4px 8px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:6px; max-width:100%; }
main { max-width:980px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; margin:.2em 0 .1em; } h2 { font-size:1.15rem; margin:0 0 8px; }
.alaotsikko { color:var(--himmea); margin:0 0 16px; }
.kortti { background:var(--kortti); border:1px solid var(--viiva); border-radius:16px; box-shadow:var(--varjo); padding:16px; margin:0 0 16px; min-width:0; }
.lista, .poistetut-lista { list-style:none; margin:0; padding:0; } .lista li, .poistetut-lista li { padding:10px 0; border-top:1px solid var(--viiva); } .lista li:first-child { border-top:0; }
.rivi { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; }
.poisto-paneeli { margin:6px 0 10px; } .nappi.vaara { border-color:var(--virhe, #b3261e); color:var(--virhe, #b3261e); } .nappi.vaara:disabled { opacity:.55; cursor:not-allowed; }
.alkuperainen { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:4px; } .alkuperainen a { display:inline-block; padding:6px 0; }
a { color:var(--aksentti); }
.suuri { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.himmea { color:var(--himmea); font-size:.9rem; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } th,td { text-align:right; padding:6px 8px; border-top:1px solid var(--viiva); } th:first-child,td:first-child { text-align:left; } th { font-weight:600; font-size:.85rem; color:var(--himmea); }
.merkki { display:inline-block; font-size:.75rem; font-weight:600; padding:1px 8px; border-radius:99px; border:1px solid currentColor; }
.merkki.huomio { color:var(--varoitus); background:var(--varoitus-tausta); } .merkki.este { color:var(--este); background:var(--este-tausta); } .merkki.ok { color:var(--ok); }
.puute { padding:8px 12px; border-radius:8px; margin:6px 0; } .puute.huomio { background:var(--varoitus-tausta); color:var(--varoitus); } .puute.este { background:var(--este-tausta); color:var(--este); }
.kaksi { display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; } @media (min-width:760px) { .kaksi { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ala { max-width:980px; margin:0 auto; padding:16px; color:var(--himmea); font-size:.8rem; }
.scroll { overflow-x:auto; }
body { overflow-x:hidden; } .rivi > * { min-width:0; overflow-wrap:anywhere; }
.pudotus { border:2px dashed var(--viiva); border-radius:10px; padding:12px; } .pudotus.yli { border-color:var(--aksentti); background:var(--tausta); }
textarea { width:100%; font:inherit; padding:8px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:6px; resize:vertical; }
.napit { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.nappi { font:inherit; padding:10px 14px; min-height:44px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; cursor:pointer; } .nappi.paa { background:var(--aksentti); color:#fff; border-color:var(--aksentti); } .nappi:disabled { opacity:.5; cursor:not-allowed; } .nappi.pieni { min-height:32px; padding:4px 10px; }
.laskurit { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:8px 0; } .laskuri { border:1px solid var(--viiva); border-radius:8px; padding:8px; }
.puute.ok { background:#eaf5ee; color:var(--ok); } :root[data-teema="tumma"] .puute.ok { background:#12301e; } @media (prefers-color-scheme: dark) { :root[data-teema="jarjestelma"] .puute.ok { background:#12301e; } }
:focus-visible { outline:3px solid var(--aksentti); outline-offset:2px; }
h3,h4 { margin:12px 0 6px; } .suodattimet { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; } .suodattimet input[type=search] { font:inherit; padding:8px; min-height:44px; flex:1 1 200px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; } .suodattimet select { min-height:44px; }

.tehtavat { display:flex; flex-wrap:wrap; gap:4px; } .tehtavat a { padding:8px 14px; min-height:44px; display:inline-flex; align-items:center; border-radius:99px; text-decoration:none; color:var(--himmea); font-weight:600; } .tehtavat a:hover { background:var(--tausta); color:var(--teksti); } .tehtavat a.aktiivinen { background:color-mix(in srgb, var(--aksentti) 16%, var(--kortti)); color:var(--teksti); font-weight:700; }
a.nappi { text-decoration:none; display:inline-flex; align-items:center; } a.nappi.paa { color:#fff; }
.vaiheet { margin:0 0 16px; padding-left:20px; } .vaiheet li { margin:4px 0; }
.lisasuodattimet { margin:0 0 12px; } .lisasuodattimet summary { cursor:pointer; padding:8px 0; color:var(--aksentti); }
.ala details.kehitys { margin-top:8px; } .ala summary { cursor:pointer; }
fieldset { border:1px solid var(--viiva); border-radius:8px; margin:8px 0; padding:8px 12px; } legend { font-weight:600; padding:0 6px; } .valinta { display:flex; align-items:center; gap:8px; min-height:44px; } .valinta input { width:22px; height:22px; }
.rivi-syote { display:flex; flex-wrap:wrap; gap:8px; } .rivi-syote input[type=text] { flex:1 1 280px; font:inherit; padding:10px; min-height:44px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; }

a.avaa { font-weight:600; font-size:1.05rem; padding:6px 0; display:inline-block; } .lista li:hover { background:var(--tausta); }

.kayttaja { display:flex; gap:8px; align-items:center; font-size:.9rem; color:var(--himmea); } .lomakekentta { display:block; margin:8px 0; } .lomakekentta input { display:block; width:100%; max-width:380px; font:inherit; padding:10px; min-height:44px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; } .koodi { font-family:ui-monospace,Consolas,monospace; word-break:break-all; margin-top:6px; }
[hidden] { display:none !important; }

.tilapalkki { position:sticky; top:0; z-index:5; padding:10px 16px; font-weight:600; border-bottom:1px solid var(--viiva); } .tilapalkki.huomio { background:var(--varoitus-tausta); color:var(--varoitus); } .tilapalkki.este { background:var(--este-tausta); color:var(--este); }
.muistiinpano-teksti { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0 8px; } li.muistiinpano .merkki { white-space:normal; }
.lomakekentta select { display:block; width:100%; max-width:380px; min-height:44px; margin-top:4px; } .lomakekentta textarea { margin-top:4px; }
.kokeilu-linkki { margin-top:16px; }
.lista li .napit { margin:4px 0 0; } .org-kutsut { margin:6px 0 0; display:grid; gap:6px; } .org-kutsut .rivi-syote input { flex:1 1 260px; font:inherit; padding:8px; min-height:40px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; }
.rivi-syote input[type=email], .rivi-syote input[type=text] { flex:1 1 240px; font:inherit; padding:10px; min-height:44px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; }

/* Yläpalkki: logo vasemmalla, tehtävät keskellä, käyttäjävalikko oikealla (kapealla näytöllä valikko jää logon viereen, tehtävät omalle riville) */
.yla { flex-wrap:wrap; } .yla .logo { order:1; } .yla .kayttaja { order:2; margin-left:auto; } .yla .tehtavat { order:3; flex:1 1 100%; } @media (min-width:960px) { .yla .tehtavat { order:2; flex:0 1 auto; margin:0 auto; } .yla .kayttaja { order:3; margin-left:0; } }
.valikko { position:relative; } .valikko > summary { list-style:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:4px 10px 4px 4px; border-radius:99px; cursor:pointer; color:var(--teksti); font-weight:600; } .valikko > summary::-webkit-details-marker { display:none; } .valikko > summary:hover, .valikko[open] > summary { background:var(--tausta); }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--aksentti); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; flex:none; }
.kayttaja-nimi { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:560px) { .kayttaja-nimi { display:none; } .valikko > summary { padding-right:4px; } }
.valikko-sisalto { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:240px; max-width:min(320px, calc(100vw - 32px)); background:var(--kortti); border:1px solid var(--viiva); border-radius:12px; box-shadow:0 8px 24px rgba(13,21,51,.12); padding:12px; display:grid; gap:10px; }
.valikko-sisalto .nappi { width:100%; }
/* Yhteenvetokortit allekkain; vajaan aineiston selitys kerran */
.yhteenveto h2 { margin:0 0 8px; } .yhteenvetokortti { margin-bottom:12px; } .yhteenvetokortti h3 { margin:0 0 4px; font-size:1rem; color:var(--himmea); font-weight:600; } .pino { display:grid; gap:0; }
:root[data-teema="tumma"] .avatar, :root[data-teema="tumma"] .nappi.paa, :root[data-teema="tumma"] a.nappi.paa { color:#04101e; } @media (prefers-color-scheme: dark) { :root[data-teema="jarjestelma"] .avatar, :root[data-teema="jarjestelma"] .nappi.paa, :root[data-teema="jarjestelma"] a.nappi.paa { color:#04101e; } }

.valilehdet { margin: 8px 0 16px; }
.lisatieto > summary { cursor:pointer; font-weight:600; padding:4px 0; } .lisatieto[open] > summary { margin-bottom:8px; }
.erittely > summary { cursor:pointer; color:var(--aksentti); padding:4px 0; }
.lisatieto > section.kortti-sisa, .lisatieto > section { border:0; box-shadow:none; padding:8px 0; margin:0; border-top:1px solid var(--viiva); }
/* Hankeseuranta ja tuontiopas (T1) */
td.luku { text-align: right; white-space: nowrap; }
td.luku .himmea { white-space: normal; max-width: 22ch; margin-left: auto; font-size: .82rem; }
tr.perusteet-rivi td { padding-top: 0; border-top: 0; }
.perusteet > summary { cursor: pointer; font-size: .9rem; }
.seuranta { margin: .5rem 0; }
.seuranta .rivi { gap: .5rem; flex-wrap: wrap; }
.kortti.tulkinta h4 { margin: 0 0 .25rem; word-break: break-all; }
.vuosivalinta { margin: .5rem 0; gap: .5rem; align-items: center; }
.vuosivalinta { justify-content: flex-start; }
/* Luotsi-ilme (T-1092, vain rakennuksen näkymä; ilmeen levitys muualle vasta hyväksynnän jälkeen). Arvot kirjoitettu uudelleen Luotsin refistä 582dfb91 (Sinipinta.tsx, tokens.ts, index.css); ks. packages/vendor-luotsi/PROVENANCE.md */
:root { --sini-a:var(--aksentti); --sini-b:color-mix(in srgb, var(--aksentti) 92%, #fff); --sini-teksti:#fff; --sini-himmea:rgba(255,255,255,.88); }
:root[data-teema="tumma"] { --sini-a:#06327f; --sini-b:#0a4cb8; } @media (prefers-color-scheme: dark) { :root[data-teema="jarjestelma"] { --sini-a:#06327f; --sini-b:#0a4cb8; } }
.sinipinta { background:linear-gradient(135deg,var(--sini-a),var(--sini-b)); color:var(--sini-teksti); border-radius:16px; padding:18px 20px 16px; margin:0 0 12px; box-shadow:0 2px 6px rgba(13,21,51,.08), 0 12px 28px rgba(13,21,51,.1); }
.sinipinta h1 { color:var(--sini-teksti); font-size:1.65rem; line-height:1.2; margin:.15em 0 .15em; overflow-wrap:anywhere; }
.sinipinta .alaotsikko { color:var(--sini-himmea); margin:0; }
.sinipinta .murupolku { color:var(--sini-himmea); margin:0 0 2px; font-size:.9rem; } .sinipinta .murupolku a { color:var(--sini-teksti); text-decoration:underline; }
.sinipinta a:focus-visible { outline-color:#fff; }
main:has(.sinipinta) .kortti h2 { font-size:.9375rem; font-weight:600; }
main:has(.sinipinta) .kortti .suuri { font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
main:has(.sinipinta) .nappi, main:has(.sinipinta) .tehtavat a { min-height:48px; }
main:has(.sinipinta) .valilehdet { margin:0 0 14px; }
main:has(.sinipinta) .tehtavat a.aktiivinen { background:color-mix(in srgb, var(--aksentti) 12%, transparent); color:var(--aksentti); }
@media (max-width:480px) { .sinipinta { padding:14px 16px 12px; border-radius:14px; } .sinipinta h1 { font-size:1.4rem; } }

/* Teemavalinta (T-1092): oletus vaalea; käyttäjä valitsee Vaalea / Tumma / Järjestelmän mukaan käyttäjävalikosta (teema.js, localStorage kk-teema). */
:root[data-teema="tumma"] { color-scheme:dark; } @media (prefers-color-scheme: dark) { :root[data-teema="jarjestelma"] { color-scheme:dark; } }
.teemavalinta { display:flex; align-items:center; gap:8px; margin:8px 0; } .teemavalinta select { font:inherit; min-height:44px; padding:6px 10px; border-radius:8px; border:1px solid var(--viiva); background:var(--kortti); color:var(--teksti); }
.versio { color:var(--himmea); font-size:.8rem; margin-left:8px; }
#tuonti-puuttuvat .nappi, #tuonti-kesken .nappi { min-height:48px; } #tuonti-puuttuvat p, #tuonti-kesken .napit { margin:6px 0; }

/* Tarkista toiminta (T-1109) */
.tarkistus-lista { list-style:none; padding:0; margin:8px 0; } .tarkistus-lista li { padding:6px 0; border-bottom:1px solid var(--reunus, rgba(127,127,127,.25)); overflow-wrap:anywhere; } #tarkistus progress { width:100%; height:14px; margin:8px 0; } #tarkistus details > summary { cursor:pointer; padding:6px 0; min-height:44px; display:flex; align-items:center; } #tarkistus .napit .nappi { min-height:44px; }
.tarkistus-valinta { display:flex; gap:12px; align-items:flex-start; margin:10px 0; min-height:44px; cursor:pointer; } .tarkistus-valinta input[type=radio] { width:22px; height:22px; flex:none; margin:2px 0 0; }

/* T-1146: kohderyhmän otsikkorivi (tuonnin rivilista ja Hankkeet-luettelo) */
tr.ryhma-otsikko th { text-align: left; font-weight: 700; padding: .6rem .5rem; background: color-mix(in srgb, currentColor 8%, transparent); border-top: 2px solid color-mix(in srgb, currentColor 25%, transparent); }
table.rivilista th:nth-child(-n+3), table.rivilista td:nth-child(-n+3) { text-align: left; }

/* T-1157: tuonnin esikatselu: hankkeet ja eurot, suora muokkaus */
.solu-muokkaus { font: inherit; width: 100%; min-width: 5.5rem; padding: 4px 6px; background: var(--kortti); color: var(--teksti); border: 1px solid var(--viiva); border-radius: 6px; }
.solu-muokkaus.korjattu { border-color: var(--varoitus); background: var(--varoitus-tausta); }
.kohde-muokkaus { width: auto; min-width: 12rem; max-width: 24rem; display: inline-block; }
table.eurotaulu td:nth-child(n+4), table.eurotaulu th:nth-child(n+4) { text-align: right; } table.eurotaulu td:last-child, table.eurotaulu th:last-child { text-align: left; }
table.eurotaulu .solu-muokkaus { text-align: inherit; } table.eurotaulu td:nth-child(n+4) .solu-muokkaus { text-align: right; }
td.negatiivinen { color: var(--este); font-weight: 600; }
details.tulkinta-kokoontuva > summary { cursor: pointer; padding: 8px 0; color: var(--aksentti); }
section.eurot > h4 { margin-top: 0; }
.historia-lista { list-style: none; margin: 0; padding: 0; } .historia-lista li { padding: 10px 0; border-top: 1px solid var(--viiva); } .historia-lista li:first-child { border-top: 0; }
table.eurotaulu td:nth-child(2) .solu-muokkaus { min-width: 7rem; } table.eurotaulu td:nth-child(3) .solu-muokkaus { min-width: 16rem; }
/* S4: aloitusnäkymä (tyhjä organisaatio): rauhallinen, ilmava, yksi pudotusalue ja yksi tekstikenttä */
.tehtavat.piilossa { display:none; }
.aloitus { max-width:640px; margin:24px auto; display:grid; gap:20px; }
.aloitus-pudotus { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 20px; background:var(--kortti); }
.aloitus-pudotus:focus-visible { outline:3px solid var(--aksentti); outline-offset:2px; }
.aloitus-iso { font-size:1.25rem; font-weight:600; margin:0 0 6px; display:block; }
.aloitus-tai { text-align:center; margin:0; }
.aloitus-kentta .rivi-syote { margin-top:8px; }
.aloitus-muut { margin-top:8px; } .aloitus-muut > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--himmea); }
@media (max-width:560px) { .aloitus { margin:12px 0; gap:14px; } .aloitus-pudotus { min-height:180px; padding:20px 14px; } .aloitus-kentta .nappi { width:100%; } }
/* S4 korjaukset (M1/M2, m4, m6): näkyvä avattava osio (▸/▾), isommat kosketuskohteet linkeille */
.aloitus-muut > summary { list-style:none; } .aloitus-muut > summary::-webkit-details-marker { display:none; }
.aloitus-muut > summary::before { content:'▸'; display:inline-block; width:1.2em; color:var(--aksentti); } .aloitus-muut[open] > summary::before { content:'▾'; }
.aloitus-muut a, .aloitus-linkki { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
.aloitus-muut .lista li { min-height:44px; display:flex; align-items:center; }
#aloitus-odottaa .nappi { margin-left:6px; }

/* S5 korjaukset (PA 4): ehdotuskortin kentät täysleveiksi 390 px:ssä, uuden rakennuksen nimi ei mene otsikon päälle, valikon painikkeet ≥ 44 px */
#ehdotus-kortti .lomakekentta label { display:block; margin:0 0 4px; }
#ehdotus-kortti .lomakekentta input[type=text], #ehdotus-kortti .lomakekentta input[type=number], #ehdotus-kortti .lomakekentta select { display:block; width:100%; max-width:420px; min-height:44px; box-sizing:border-box; font:inherit; padding:8px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; }
#ehdotus-uusi-osa { margin:8px 0; }
.valikko-sisalto .nappi, .valikko-sisalto select { min-height:44px; }
[data-testitila] { margin:8px 0; }
/* Kuntokierros: tyylit luokissa, koska palvelimen CSP (default-src 'self') estää inline-style-attribuutit. */
.kuva-pieni { max-width:8rem; max-height:6rem; margin:.2rem; }
.kierros-ulos-dialogi { position:fixed; inset:10% 5% auto 5%; max-width:40rem; margin:auto; z-index:1000; box-shadow:0 8px 40px rgba(0,0,0,.35); background:var(--kortti); }
.demoilmoitus { padding:6px 16px; font-size:14px; line-height:1.35; font-weight:600; text-align:center; background:var(--varoitus-tausta); color:var(--varoitus); border-bottom:1px solid var(--viiva); } .demoilmoitus[hidden] { display:none; }
/* Yksinkertaistus: hankeyhteenveto ja hankeluettelo (yksi rivi per hanke, ylittäjät ensin, rivi avautuu tiedoiksi). Ylitys näkyy merkkinä, tekstinä ja reunana, ei pelkkänä värinä. */
.hankeyhteenveto .laskurit { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); } .hankeyhteenveto .puute { margin:8px 0; } .hankeyhteenveto .puute.huomio .himmea { color:inherit; }
.hankesuodatin .nappi[aria-pressed=true] { background:color-mix(in srgb, var(--aksentti) 14%, var(--kortti)); border-color:var(--aksentti); font-weight:700; }
table.hankeluettelo td.luku, table.hankeluettelo td.ylitys-solu { white-space:nowrap; } table.hankeluettelo td.ylitys-solu { text-align:right; } table.hankeluettelo th:nth-child(n+2) { text-align:right; }
table.hankeluettelo td.ylitys-solu .himmea { white-space:normal; }
button.hanke-avaa { all:unset; box-sizing:border-box; display:block; cursor:pointer; min-height:44px; padding:4px 0; color:var(--aksentti); font-weight:600; width:100%; text-align:left; }
button.hanke-avaa .hanke-nimi::before { content:'▸ '; } button.hanke-avaa[aria-expanded=true] .hanke-nimi::before { content:'▾ '; } button.hanke-avaa:focus-visible { outline:3px solid var(--aksentti); outline-offset:2px; }
button.hanke-avaa .hanke-nimi, button.hanke-avaa .hanke-numero { display:block; } button.hanke-avaa .hanke-numero { font-weight:400; margin-left:1.2em; }
tr.hanke-rivi.ylittaa td:first-child { box-shadow:inset 4px 0 0 var(--este); } tr.hanke-rivi.ylittaa { background:var(--este-tausta); }
tr.hanke-tiedot > td { text-align:left; background:var(--tausta); } .hanke-tiedot-sisalto h5 { margin:10px 0 4px; } .hanke-tiedot-sisalto .laskurit { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
details.tekniset > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--aksentti); }
@media (max-width:640px) {
  table.hankeluettelo thead { position:absolute; left:-9999px; }
  table.hankeluettelo, table.hankeluettelo tbody { display:block; }
  table.hankeluettelo tr.hanke-rivi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 4px; padding:6px 0; font-size:.9rem; border-top:1px solid var(--viiva); }
  table.hankeluettelo tr.hanke-rivi td { display:flex; flex-direction:column; border:0; padding:1px 6px; text-align:left; white-space:normal; }
  table.hankeluettelo tr.hanke-rivi td:first-child { grid-column:1 / -1; } table.hankeluettelo tr.hanke-rivi td.ylitys-solu { grid-column:1 / -1; text-align:left; }
  table.hankeluettelo tr.hanke-rivi td::before { content:attr(data-otsikko); font-size:.75rem; color:var(--himmea); font-weight:600; } table.hankeluettelo tr.hanke-rivi td:first-child::before { display:none; }
  table.hankeluettelo tr.hanke-tiedot { display:block; } table.hankeluettelo tr.hanke-tiedot[hidden] { display:none; } table.hankeluettelo tr.hanke-tiedot > td { display:block; padding:8px; }
}
.puuttuva-nimi:not(:last-of-type)::after { content:", "; }
@media (max-width:640px) { table.hankeluettelo tr.hanke-rivi td.ylitys-solu { flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 8px; } table.hankeluettelo tr.hanke-rivi td.ylitys-solu::before { display:none; } }

/* Yksinkertaistus siivu 2: vasen raili (leveä näyttö), etusivu Rakennukset, huomiokortit, suodinpinnit */
.nav-ryhma { display:none; }
.etusivu-otsikko { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; justify-content:space-between; margin:4px 0 12px; }
.etusivu-otsikko h1 { margin:0; } .etusivu-otsikko .alaotsikko { margin:2px 0 0; } .etusivu-otsikko .napit { display:flex; flex-wrap:wrap; gap:8px; }
.etusivu-otsikko .nappi { text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.haku-iso input#haku { width:100%; box-sizing:border-box; min-height:56px; font-size:1.125rem; padding:12px 16px; border-radius:12px; }
.huomiokortit { margin:16px 0; } .huomiokortit h2 { font-size:1rem; margin:0 0 8px; }
.huomiokortit-ruudukko { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.huomiokortti { display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--kortti); border:1px solid var(--viiva); border-radius:12px; color:var(--teksti); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.huomiokortti:hover, .huomiokortti:focus-visible { border-color:var(--aksentti); }
.huomiokortti-ylä { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .huomiokortti-luku { font-size:1.75rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.huomiokortti-otsikko { font-weight:600; } .huomiokortti-linkki { color:var(--aksentti); font-weight:600; margin-top:auto; padding-top:4px; }
.huomiokortti.tyhja { opacity:.85; } .huomiokortti.tyhja .huomiokortti-luku { color:var(--himmea); }
.suodin-pinnit { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
.suodin-pinni { font:inherit; font-weight:600; min-height:44px; padding:8px 16px; border-radius:99px; border:1px solid var(--viiva); background:var(--kortti); color:var(--himmea); cursor:pointer; }
.suodin-pinni.aktiivinen, .suodin-pinni[aria-pressed="true"] { background:color-mix(in srgb, var(--aksentti) 14%, transparent); border-color:var(--aksentti); color:var(--aksentti); }
.etusivu-osio { margin:16px 0; } .etusivu-osio > summary { cursor:pointer; font-weight:600; padding:10px 0; min-height:24px; color:var(--himmea); }
.rakennus-hankkeet { white-space:normal; }
@media (max-width:760px) { .huomiokortit-ruudukko { grid-template-columns:minmax(0,1fr); } }
@media (min-width:960px) {
  body { display:grid; grid-template-columns:232px minmax(0,1fr); grid-template-areas:"demo demo" "yla tila" "yla sisalto" "yla ala"; grid-template-rows:auto auto 1fr auto; min-height:100vh; }
  body > .demoilmoitus { grid-area:demo; } body > .tilapalkki { grid-area:tila; } body > main { grid-area:sisalto; width:100%; box-sizing:border-box; margin:0; max-width:1100px; padding:24px 32px; } body > .ala { grid-area:ala; }
  .yla { grid-area:yla; position:sticky; top:0; align-self:start; height:100vh; box-sizing:border-box; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:12px; padding:20px 12px; border-bottom:0; border-right:1px solid var(--viiva); overflow-y:auto; }
  .yla .logo { order:1; padding:0 12px; } .yla .tehtavat { order:2; flex:1 1 auto; margin:0; flex-direction:column; flex-wrap:nowrap; gap:2px; } .yla .kayttaja { order:3; margin:0; padding:0 4px; }
  .yla .tehtavat a { border-radius:10px; width:100%; box-sizing:border-box; } .yla .tehtavat a.aktiivinen { background:color-mix(in srgb, var(--aksentti) 12%, transparent); color:var(--aksentti); }
  .yla .nav-ryhma { display:block; margin:16px 14px 4px; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--himmea); }
  .yla .tehtavat .nav-asetukset { margin-top:auto; }
  .yla .tehtavat[hidden] { display:none; }
}
@media (max-width:640px) { .etusivu-otsikko .napit { width:100%; } .etusivu-otsikko .nappi { flex:1 1 0; justify-content:center; } }
/* T2 (yksinkertaistus): Figma v3 -yhteiset komponentit (Komponentit 8:66; vertailu docs/EVIDENCE/yksinkertaistus/t2_figma_vertailu.md). Uudet luokat, vanhat .merkki/.nappi ennallaan (vanhat näkymät eivät muutu). Ei inline-tyylejä (CSP). */
.tila { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:normal; white-space:nowrap; }
.tila.sininen { background:var(--kk-primary-soft); color:var(--kk-primary); } .tila.vihrea { background:var(--kk-green-soft); color:var(--kk-green); } .tila.oranssi { background:var(--kk-orange-soft); color:var(--kk-orange); } .tila.punainen { background:var(--kk-red-soft); color:var(--kk-red); } .tila.harmaa { background:var(--kk-grey-soft); color:var(--kk-muted); }
.nappi.teksti { background:transparent; border-color:transparent; color:var(--kk-primary); font-size:14px; font-weight:600; padding:10px 20px; border-radius:8px; } .nappi.teksti:hover:not(:disabled) { text-decoration:underline; }
dialog.kk-dialogi { margin:auto; width:calc(100vw - 32px); max-width:640px; max-height:calc(100vh - 32px); overflow:auto; padding:26px 28px 24px; background:var(--kortti); color:var(--kk-dialogi-teksti); border:1px solid var(--kk-dialogi-reuna); border-radius:18px; box-shadow:var(--kk-dialogi-varjo); }
dialog.kk-dialogi[open] { display:flex; flex-direction:column; gap:16px; } dialog.kk-dialogi::backdrop { background:rgba(8,15,30,.55); }
dialog.kk-dialogi > h2 { margin:0; font-size:22px; font-weight:700; line-height:normal; } dialog.kk-dialogi .kk-dialogi-napit { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
/* T3c: Etusivun tekstilinkki samaan reunaan kuin kortit; rakennuksen välilehdet: ensisijaiset + erotettu toissijainen ryhmä; mobiilin valikot yhdelle vieritettävälle riville */
.nappi.teksti.kohdistettu { padding-left:0; padding-right:0; border-left-width:0; border-right-width:0; }
.valilehdet a.toissijainen { font-weight:500; font-size:.92rem; }
.valilehdet a:not(.toissijainen) + a.toissijainen { margin-left:10px; } .valilehdet a:not(.toissijainen) + a.toissijainen::before { content:""; display:inline-block; width:1px; height:20px; margin-right:14px; background:var(--viiva); }
@media (max-width:959px) {
  .yla .tehtavat, .valilehdet { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; min-width:0; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .yla .tehtavat::-webkit-scrollbar, .valilehdet::-webkit-scrollbar { display:none; }
  .yla .tehtavat > *, .valilehdet > * { flex:none; }
  .yla .tehtavat a:focus-visible, .valilehdet a:focus-visible { outline-offset:-3px; } /* rengas rivin sisäpuolelle: overflow-y:hidden ei leikkaa sitä */
}

/* T4: rakennuksen Yhteenveto (Figma 13:1161) */
.yht-kuva { display:flex; align-items:center; justify-content:center; height:140px; margin:0 0 16px; border:1px dashed var(--viiva); border-radius:16px; background:var(--kortti); text-align:center; padding:0 16px; }
.yht-kortit { display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; align-items:start; }
@media (min-width:960px) { .yht-kortit { grid-template-columns:repeat(3,minmax(0,1fr)); } .yht-kuva { height:160px; } }
.yht-kortti h2 { margin:0 0 8px; font-size:1.05rem; }
.yht-rivit { margin:0 0 8px; }
.yht-rivi { display:flex; justify-content:space-between; align-items:baseline; gap:4px 16px; padding:5px 0; }
.yht-rivi dt { color:var(--himmea); font-size:.92rem; }
.yht-rivi dd { margin:0; text-align:right; overflow-wrap:anywhere; min-width:0; }
.yht-kortti p { margin:4px 0; }
.yht-kortti .napit { margin-top:12px; }
.yht-hanke { padding:8px 0; overflow-wrap:anywhere; }
.yht-lisatiedot { margin:28px 0 12px; font-size:1.1rem; }
.yht-huomio { display:block; font-size:.8rem; }

/* T5: PTS ja korjaukset (Figma 10:2) */
.pts-kortit { display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; align-items:start; margin:0 0 8px; }
@media (min-width:760px) { .pts-kortit { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pts-kortti h2 { margin:0 0 6px; font-size:.95rem; color:var(--himmea); font-weight:600; }
.pts-kortti p { margin:4px 0; } .pts-lkm { font-size:1.5rem; font-weight:700; }
.pts-otsikkorivi { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin:16px 0 8px; } .pts-otsikkorivi h2 { margin:0; }
.pts-suodatin { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.pts-chip { min-height:36px; padding:4px 14px; border-radius:999px; font-size:.9rem; font-weight:600; }
.pts-chip[aria-pressed="true"] { background:var(--kk-primary-soft); color:var(--kk-primary); border-color:var(--kk-primary); }
.pts-vieritys { overflow-x:auto; max-width:100%; border:1px solid var(--viiva); border-radius:16px; background:var(--kortti); }
.pts-taulu { min-width:860px; margin:0; }
.pts-taulu th, .pts-taulu td { text-align:left; vertical-align:top; padding:10px 12px; }
.pts-taulu thead th { font-size:.8rem; color:var(--himmea); border-top:0; } .pts-taulu .luku { text-align:right; }
.pts-taulu tbody th[scope="row"] { font-weight:400; }
.pts-ryhma th { background:var(--tausta); font-size:.9rem; } .pts-ryhma-summa { float:right; font-weight:600; color:var(--kk-primary); }
.pts-ryhma[data-ryhma="rastissa"] .pts-ryhma-nimi { color:var(--kk-red); font-weight:700; }
.pts-tilat { display:flex; flex-wrap:wrap; gap:4px; } .pts-laji { font-size:.8rem; }
.pts-paatetty { opacity:.85; }
/* T6: korjausdialogit (Lisää korjaustarve, Siirrä vuotta, Kirja työ, Korjauksen historia) ja PTS-rivin toiminnot */
.kk-kentta { display:flex; flex-direction:column; gap:6px; font-size:.9rem; font-weight:600; } .kk-kentta input, .kk-kentta select, .kk-kentta textarea { width:100%; font-weight:400; box-sizing:border-box; }
.kk-kentta-rivi { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.kk-laatikko { background:var(--tausta); border:1px solid var(--viiva); border-radius:10px; padding:12px 14px; }
.kk-dlg-virhe { margin:0; } .kk-dlg-virhe[hidden] { display:none; }
.kk-historia { list-style:none; margin:0; padding:0; } .kk-historia-rivi { display:grid; grid-template-columns:92px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--viiva); } .kk-historia-pvm { color:var(--kk-primary); font-weight:600; }
.pts-toiminnot { display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .pts-toiminnot .nappi.teksti { padding-top:4px; padding-bottom:4px; text-align:right; }
.pts-siirto { font-size:.8rem; } .pts-siirto .nappi.teksti { font-size:inherit; padding:0; display:inline; }
.kk-kentta input, .kk-kentta select { font:inherit; font-weight:400; padding:8px 10px; min-height:44px; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; } .kk-kentta textarea { font-weight:400; }
dialog.kk-dialogi > p { margin:0; } dialog.kk-dialogi .kk-dialogi-napit .nappi { min-height:44px; }
.pts-toiminnot .nappi { min-height:32px; white-space:nowrap; } .pts-taulu td.luku { white-space:nowrap; }
main:has(.sinipinta) .pts-toiminnot .nappi { min-height:32px; } main:has(.sinipinta) .pts-siirto .nappi { min-height:0; } .pts-taulu td.luku .himmea { white-space:nowrap; }

/* T6 koko kanta: PTS-sivun taulukko (rakennus × jakso) mahtuu 1280 px:n sisältöalueelle; kapeammalla vieritys .pts-vieritys-laatikossa */
#pts-kanta-taulu { min-width:760px; } #pts-kanta-taulu th, #pts-kanta-taulu td { padding:10px 8px; }
#pts-kanta-taulu tfoot th, #pts-kanta-taulu tfoot td { font-weight:700; border-top:2px solid var(--viiva); }
.rakennus-pts { display:block; }
/* T8 Kunnossapitokirja (Figma 08/09): lista käyttää .pts-taulu/.pts-chip-luokkia; lomake omat .kp-* */
.kp-taulu { min-width:720px; } .kp-pvm { white-space:nowrap; } .kp-lisatiedot { overflow-wrap:anywhere; }
.kp-lomake .kentta { margin:0 0 14px; max-width:560px; } .kp-lomake label { display:block; font-weight:600; margin:0 0 4px; }
.kp-lomake input[type=text], .kp-lomake input[type=date], .kp-lomake select, .kp-lomake textarea { display:block; width:100%; max-width:560px; min-height:44px; font:inherit; padding:8px 10px; box-sizing:border-box; background:var(--kortti); color:var(--teksti); border:1px solid var(--viiva); border-radius:8px; }
.kp-lomake textarea { min-height:84px; } .kp-lomake .kentta .himmea { margin:4px 0 0; font-size:.88rem; }
#kp-viesti:empty { display:none; } #kp-viesti { margin:0 0 12px; }
.rap-tyypit { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:8px 0 16px; }
.rap-tyyppi { display:flex; flex-direction:column; gap:2px; padding:12px 16px; min-height:44px; border:1px solid var(--viiva); border-radius:12px; background:var(--kortti); color:var(--teksti); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.rap-tyyppi.valittu { border:2px solid var(--aksentti); background:color-mix(in srgb, var(--aksentti) 14%, var(--kortti)); } .rap-tyyppi.valittu::before { content:"✓ Valittu"; font-size:.85em; font-weight:600; color:var(--aksentti); }
#tuonti-mallipohja { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; } a.rap-tyyppi:hover { border-color:var(--aksentti); }
/* T-1323: Rakennukset-lista puhelimella: kaikki napautettavat vähintään 44 px (suodatinyhteenveto, arkistoidut-valinta, rakennuslinkki, arkistointipainike, Lisää rakennus -yhteenveto) */
@media (max-width:760px) { .lisasuodattimet > summary, .aloitus-muut > summary, #lisaa-rakennus > summary { display:flex; align-items:center; min-height:44px; } .lisasuodattimet label { display:flex; align-items:center; gap:8px; min-height:44px; } .lisasuodattimet label input[type=checkbox] { width:24px; height:24px; } .lista a.avaa { display:inline-flex; align-items:center; min-height:44px; padding:0; } .lista .nappi.pieni { min-height:44px; } }

/* T7 hankkeistus: Liitä hankkeeseen / Irrota hankkeesta -painikkeet; kapealla näytöllä kaikki PTS-rivin toiminnot ≥44 px kosketuskohteita */
.pts-toiminnot .pts-hankkeista, .pts-toiminnot .pts-irrota { min-height:32px; }
@media (max-width:700px) { .pts-toiminnot .nappi, main:has(.sinipinta) .pts-toiminnot .nappi { min-height:44px; } }
#hd-info, #id-info { font-size:.9rem; }
dialog.kk-dialogi > p { overflow-wrap:anywhere; }

/* T10: hankkeen tilan dialogin piilotettu kenttä (display:flex ohittaisi hidden) */
.kk-kentta[hidden] { display:none; }

/* PTS-lista kapealla näytöllä (mobiilitestaajan löydös, Android 412 px): alle 760 px rivi on kortti (2 saraketta), ei sisäistä vaakavieritystä eikä leikkautuvaa Toteuma-saraketta. Leveällä taulukko ennallaan. */
@media (max-width:759px) {
  .pts-lista-vieritys { overflow:visible; border:0; background:none; border-radius:0; }
  .pts-lista-taulu, .pts-lista-taulu tbody { display:block; min-width:0; } .pts-lista-taulu thead { display:none; }
  .pts-lista-taulu tr.pts-ryhma, .pts-lista-taulu tr.pts-ryhma > th { display:block; } .pts-lista-taulu tr.pts-ryhma > th { border-radius:8px; margin:12px 0 6px; }
  .pts-lista-taulu tr[data-korjaustarve] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 12px; padding:12px; margin:0 0 10px; border:1px solid var(--viiva); border-radius:12px; background:var(--kortti); }
  .pts-lista-taulu tr[data-korjaustarve] > th, .pts-lista-taulu tr[data-korjaustarve] > td { display:block; padding:0; border:0; min-width:0; text-align:left; overflow-wrap:anywhere; }
  .pts-lista-taulu tr[data-korjaustarve] > th.pts-nimi, .pts-lista-taulu .pts-solu-tila, .pts-lista-taulu .pts-solu-hanke, .pts-lista-taulu .pts-solu-toiminnot { grid-column:1 / -1; }
  .pts-lista-taulu td[data-otsikko]::before { content:attr(data-otsikko); display:block; font-size:.75rem; color:var(--himmea); }
  .pts-lista-taulu td.luku, .pts-lista-taulu td.luku .himmea { white-space:normal; text-align:left; }
  .pts-lista-taulu .pts-solu-tila:empty, .pts-lista-taulu .pts-solu-tila:not(:has(*)) { display:none !important; }
  .pts-lista-taulu .pts-toiminnot { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; } .pts-lista-taulu .pts-toiminnot .nappi.teksti { text-align:left; }
}