/* Käyttöliittymä 7: yhtenäinen hankepalkki ja siivotut sivut (vain *-7.html) */


.s7hide{display:none!important}


.s7bar{position:sticky;top:var(--s7top,64px);z-index:70;background:#fff;border-bottom:1px solid rgba(20,26,43,.12);box-shadow:0 2px 10px rgba(20,26,43,.04);font-family:inherit}


.s7in{max-width:1400px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:14px}


.s7p{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}


.s7lbl{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7A8090}


.s7ver{display:flex;align-items:center;min-width:0}


.s7ver [data-rk-versions]{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin:0!important}


.s7ver [data-rk-versions] > *:not(:first-child){display:none} /* uuden hankkeen napit ovat hankevalikossa ja Oma hanke -sivulla */


.s7steps{list-style:none;margin:0 auto;padding:3px;display:flex;gap:2px;background:#F5F2EC;border-radius:999px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}


.s7steps a{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;text-decoration:none;color:#4B5263;font-weight:600;font-size:.84rem;white-space:nowrap}


.s7steps a i{font-style:normal;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#ECE7DE;font-size:.68rem;color:#4B5263}


.s7steps a:hover{color:#141A2B}


.s7steps a[aria-current="page"]{background:#fff;color:#141A2B;box-shadow:0 1px 3px rgba(0,0,0,.12)}


.s7steps a[aria-current="page"] i{background:#E2662A;color:#fff}


.s7r{display:flex;align-items:center;gap:8px;flex:none}


.s7beta{border:0;background:#F5C21B;color:#1D2A35;font:inherit;font-size:.66rem;font-weight:800;letter-spacing:.08em;border-radius:4px;padding:3px 7px;cursor:pointer}


.s7pop{max-width:1400px;margin:0 auto 8px;padding:10px 18px;font-size:.84rem;line-height:1.45;color:#3d3a30;background:#FFF8E1;border:1px solid #E9C46A;border-radius:10px}


.s7cloud{display:flex;align-items:center;gap:6px}.s7cloud .rkc-hint{display:none!important}


.s7cloud .btn,.s7cloud button{padding:6px 11px!important;font-size:.8rem!important}


.s7next{background:#1F6B4E;color:#fff!important;text-decoration:none;font-weight:700;font-size:.84rem;border-radius:999px;padding:7px 14px;white-space:nowrap}


.s7next:hover{background:#18573f}


.s7orig{font-size:.75rem;color:#7A8090!important;text-decoration:underline;white-space:nowrap}


/* laskurin tulosteet yhteen valikkoon */


.s7out{position:relative;display:inline-block}


.s7out>summary{list-style:none;cursor:pointer}.s7out>summary::-webkit-details-marker{display:none}


.s7menu{position:absolute;right:0;top:calc(100% + 6px);z-index:80;background:#fff;border:1px solid rgba(20,26,43,.14);border-radius:12px;box-shadow:0 14px 36px rgba(20,26,43,.16);padding:6px;display:grid;gap:2px;min-width:300px}


.s7menu .btn{width:100%;justify-content:flex-start;border:0!important;background:none!important;box-shadow:none!important;border-radius:8px!important}


.s7menu .btn:hover{background:#F5F2EC!important}


.s7menu .rfqdd{position:relative}


/* Oma hanke: esittely tiiviimmäksi */


.s7compact h1{font-size:clamp(2rem,4vw,3.2rem)!important}


.s7compact{padding-top:24px!important;padding-bottom:12px!important}


@media (max-width:1180px){.s7steps a{padding:6px 9px}.s7lbl,.s7orig{display:none}}


@media (max-width:900px){.s7in{flex-wrap:wrap;gap:8px}.s7steps{order:3;width:100%;margin:0}.s7cloud{display:none}}


/* palkissa vain tallennus ja jako; kirjautuminen on ylävalikossa */


.s7cloud [data-rkc-in],.s7cloud .rkc-txt,.s7cloud .rkc-user,.s7cloud .rkc-msg{display:none!important}


.s7steps{flex:1 1 auto;justify-content:center;min-width:0}


.s7p{flex:0 0 auto}.s7ver select{max-width:220px}


@media (max-width:1400px){.s7orig{display:none}}


/* vaiheet mahtuvat kokonaan: tiiviimmät painikkeet */


.s7steps a{padding:5px 9px;font-size:.8rem;gap:5px}.s7steps a i{width:17px;height:17px;font-size:.64rem}


.s7in{gap:10px}


@media (max-width:1500px){.s7lbl{display:none}.s7ver select{max-width:180px}}


/* vaiheet eivät koskaan leikkaudu: ne pysyvät kokonaisina ja siirtyvät tarvittaessa omalle rivilleen */


.s7in{flex-wrap:wrap;row-gap:6px}


.s7lbl{display:none!important}


.s7p{flex:1 1 200px;min-width:0;max-width:340px}


.s7ver,.s7ver [data-rk-versions]{min-width:0;max-width:100%}


.s7ver select,.s7ver button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.s7steps{flex:0 0 auto!important;overflow:visible!important;margin:0 auto}


.s7r{flex:0 0 auto;margin-left:auto}


.s7cloud .btn,.s7cloud button,.s7next,.s7beta{height:34px;display:inline-flex;align-items:center;box-sizing:border-box;line-height:1}


.s7beta{height:24px}


/* koko leveys yhdelle riville tietokoneella; ylävalikon päälinkit aina näkyvissä (puhelimella avautuva valikko ennallaan) */


.s7in{max-width:none}


@media (min-width:901px){html.s7 .nav.hide,html.s7 .rk-nav.hide{transform:none!important}}


@media (max-width:1560px){.s7cloud .btn,.s7cloud button{padding:5px 9px!important;font-size:.76rem!important}.s7next{padding:7px 11px;font-size:.8rem}.s7p{max-width:260px}}


/* tietokoneella yksi rivi (vaiheet keskellä); kapeammalla vaiheet omalle rivilleen, puhelimella vieritettävä */


@media (max-width:1399px){.s7steps{order:3;flex:1 0 100%!important;justify-content:center;margin:0!important;border-radius:12px}.s7r{order:2}}


@media (max-width:900px){.s7steps{justify-content:flex-start;overflow-x:auto!important;-webkit-overflow-scrolling:touch}}


/* otsikko säilyy ruudunlukijoille ja hakukoneille */


.s7sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}


.s7home{font-weight:700;color:#1D2A35;text-decoration:none;font-size:.88rem;border:1px solid rgba(20,26,43,.18);border-radius:8px;padding:7px 12px;white-space:nowrap}


/* tietokoneella hankkeen sivujen linkit ovat hankepalkissa: ylävalikkoon jää muu sisältö (puhelimen avautuva valikko ennallaan) */


@media (min-width:901px){


  html.s7 .nav .prime,html.s7 .rk-nav .rk-prime{display:none!important}


  html.s7 .nav .links a[href*="pohjaratkaisu"],html.s7 .nav .links a[href*="kustannuslaskuri"],html.s7 .nav .links a[href*="rakennushanke"],


  html.s7 .rk-nav .rk-links a[href*="pohjaratkaisu"],html.s7 .rk-nav .rk-links a[href*="kustannuslaskuri"],html.s7 .rk-nav .rk-links a[href*="rakennushanke"]{display:none!important}


}


/* puhelin: kaksi tiivistä riviä (hanke + seuraava, vaiheet vieritettävinä); palkki pysyy ylhäällä ylävalikon alla */


@media (max-width:900px){


  .s7bar{position:sticky;top:var(--s7top,50px)} /* hanke ja vaiheet aina näkyvissä myös vieritettäessä */


  .s7in{flex-wrap:wrap;padding:6px 10px;gap:6px}


  .s7p{flex:1 1 0;max-width:none;min-width:0}


  .s7r{order:2;margin-left:0}


  .s7beta,.s7cloud{display:none!important}


  .s7next{padding:6px 11px;font-size:.78rem;height:32px}


  .s7steps{order:3;flex:1 0 100%!important;justify-content:flex-start;overflow-x:auto!important;border-radius:10px;padding:2px}


  .s7steps a{padding:5px 8px;font-size:.76rem}


}


.s7home{display:inline-flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.s7home span{font-weight:500;color:#5b6670}.s7home em{font-style:normal;font-weight:500;color:#7A8090;font-size:.8rem}


/* Google-tallennus aina näkyvissä: kirjautumatta "Kirjaudu Googlella", kirjautuneena "Tallenna" (myös puhelimella, tiiviinä) */


.s7cloud [data-rkc-in]{display:inline-flex!important}


@media (max-width:900px){


  .s7cloud{display:flex!important}


  .s7cloud .rkc-hint,.s7cloud [data-rk-share],.s7cloud .rkc-txt,.s7cloud .rkc-user{display:none!important}


  .s7cloud .btn,.s7cloud button{padding:5px 9px!important;font-size:.74rem!important;height:32px}


  .s7r{max-width:100%;min-width:0}.s7cloud{flex:0 1 auto;min-width:0;overflow:hidden}


  .s7cloud .btn,.s7cloud button{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s7next{flex:none;white-space:nowrap}


}


/* vaiheet houkuttelevammiksi: valkoiset pillerit vihreällä numerolla, vaiheiden välissä yhdysviiva, nykyinen vaihe täytettynä */


.s7steps{background:none;padding:2px 0;gap:0;align-items:center}


.s7steps li{display:flex;align-items:center}


.s7steps li+li::before{content:'';flex:none;width:12px;height:2px;margin:0 2px;border-radius:2px;background:#C9DDD2}


.s7steps a{background:#fff;border:1px solid #D8E3DC;color:#1D2A35;font-weight:700;padding:5px 11px 5px 5px;box-shadow:0 1px 2px rgba(20,26,43,.06);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}


.s7steps a i{width:21px;height:21px;background:#E6F2EB;color:#1F6B4E;font-weight:800;font-size:.68rem}


.s7steps a:hover{border-color:#1F6B4E;color:#141A2B;transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(31,107,78,.35)}


.s7steps a:hover i{background:#1F6B4E;color:#fff}


.s7steps a[aria-current="page"]{background:#1F6B4E;border-color:#1F6B4E;color:#fff;box-shadow:0 4px 14px -4px rgba(31,107,78,.55)}


.s7steps a[aria-current="page"] i{background:#fff;color:#1F6B4E}


@media (max-width:900px){.s7steps li+li::before{width:6px;margin:0 1px}.s7steps a{padding:4px 9px 4px 4px}}


/* jos vaiheet eivät mahdu samalle riville hankkeen ja painikkeiden kanssa: omalle rivilleen keskelle (seiska.js lisää luokan s7two) */


.s7bar.s7two .s7steps{order:3;flex:1 0 100%!important;justify-content:center;margin:0!important}


.s7bar.s7two .s7r{order:2}


/* tiiviimmät vaihepainikkeet */


.s7steps li+li::before{width:8px;margin:0 2px}


.s7steps a{padding:4px 10px 4px 4px}


/* tiivis vaihepalkki: lyhyet väliviivat ja matalammat painikkeet */


.s7steps li+li::before{width:5px;margin:0 2px}


.s7steps a{padding:3px 9px 3px 3px;gap:5px}


.s7steps a i{width:19px;height:19px}


/* tietokoneella vaiheet samalla rivillä aina kun mahtuvat (seiska.js tiivistää tarvittaessa: s7c1 → s7c2 → s7two) */


@media (min-width:901px){


  .s7bar:not(.s7two) .s7steps{order:0!important;flex:0 0 auto!important;margin:0 auto!important;justify-content:center}


  .s7bar:not(.s7two) .s7r{order:0!important}


}


.s7bar.s7c1 .s7in{gap:8px;padding-left:12px;padding-right:12px}


.s7bar.s7c1 .s7p{max-width:210px}


.s7bar.s7c1 .s7steps a{font-size:.78rem;padding:3px 8px 3px 3px}


.s7bar.s7c1 .s7steps li+li::before{width:4px;margin:0 1px}


.s7bar.s7c1 .s7cloud .rks-btn,.s7bar.s7c1 .s7cloud .rkc-btn{font-size:0!important;gap:0}


.s7bar.s7c1 .s7cloud .rks-btn::after{content:'Jaa';font-size:.76rem}


.s7bar.s7c1 .s7cloud .rkc-btn::after{content:'Kirjaudu';font-size:.76rem;margin-left:6px}


.s7bar.s7c1 .s7cloud .rkc-btn svg{width:16px;height:16px;flex:none}


.s7bar.s7c2 .s7next{display:none}


/* BETA-merkki hankevalikon alle (jokaisella hankkeen sivulla); muut Beta-merkinnät pois */


.s7p{position:relative}


.s7p .s7beta{position:absolute;left:12px;top:calc(100% + 5px);z-index:3;height:auto!important;padding:2px 8px;font-size:.6rem;box-shadow:0 1px 4px rgba(20,26,43,.18)}


.s7bar.s7two .s7p .s7beta{position:static;margin-left:6px}


@media (max-width:900px){.s7p .s7beta{position:static;display:inline-flex!important;margin-left:6px;flex:none}}


html.s7 .bbeta,html.s7 .bb,html.s7 .genbeta,html.s7 .twbeta,html.s7 .pbeta,html.s7 h1 .beta,html.s7 .hhead .beta{display:none!important}


/* BETA-merkki selvästi palkin alle harmaalle taustalle (vain hankkeen sivuilla) */


.s7p .s7beta{top:calc(100% + 17px);left:10px}


/* BETA aina palkin alle harmaalle: kun vaiheet ovat omalla rivillään tai puhelimella, merkki sijoitetaan koko palkin alle */


.s7bar.s7two .s7p,.s7bar.s7two .s7in{position:static}


.s7bar.s7two .s7p .s7beta{position:absolute;top:calc(100% + 7px);left:14px}


@media (max-width:900px){.s7bar .s7p,.s7bar .s7in{position:static}.s7p .s7beta{position:absolute!important;top:calc(100% + 6px);left:10px;margin-left:0}}


@media (max-width:900px){html.s7 .nav.hide,html.s7 .rk-nav.hide{transform:none!important}}


@media (max-width:900px){html .rk-nav .rk-in{height:50px;padding:0 12px}html .rk-nav .rk-logo svg{width:28px;height:28px}html .rk-nav .rk-burger{width:38px;height:38px;border-radius:10px}} /* ohuempi ylin rivi puhelimella (voittaa sivun oman tyylin) */


/* pitkä hankenimi lyhenee kolmella pisteellä eikä koskaan mene vaiheiden päälle (koko nimi vihjeenä ja hankevalikossa) */


.s7ver [data-rk-versions]>.rkv-menu{flex:0 1 auto;min-width:0;max-width:100%}


.s7ver .rkv-btn{display:flex;max-width:100%;min-width:0;overflow:hidden}


.s7ver .rkv-btn small{flex:none}


.s7ver .rkv-btn span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


@media (max-width:900px){.s7p{flex:1 1 150px;min-width:130px}} /* puhelin: hankevalitsin ei puristu olemattomaksi; painikkeet siirtyvät tarvittaessa omalle rivilleen */


/* etusivun hankelinkki samannäköiseksi kuin hankesivujen hankevalikko (versiot.js .rkv-btn); pitkä nimi lyhenee, ▾ aina näkyvissä */


.s7home{display:flex;align-items:center;gap:8px;border:1px solid #cfd4da;background:#fff;color:#1D2A35;font:inherit;font-size:14px;line-height:1.3;font-weight:600;padding:8px 12px;border-radius:8px;max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;box-sizing:border-box}


.s7home small{color:#4A5560;font-weight:500;flex:none}


.s7home span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:inherit}





/* työkalusivut piilossa, kunnes hankepalkki on järjestänyt sivun (ei välähdä vanhaa näkymää); varalla näkyviin 1,5 s:ssa */


html.s7wait:not(.s7) body{visibility:hidden;animation:s7show 0s 1.5s forwards}@keyframes s7show{to{visibility:visible}}





/* puhelin: Seuraava-painike hankevalinnan viereen ensimmäiselle riville, kirjautuminen ja tallennus omalle rivilleen, vaiheet alimpana */


@media (max-width:900px){.s7r{display:contents}.s7p{order:0;flex:1 1 0;min-width:0}.s7next{order:1;margin-left:auto;flex:none}.s7cloud{order:2;flex:1 0 100%;justify-content:flex-start;overflow:visible}.s7cloud .btn,.s7cloud button{flex:0 1 auto}.s7steps{order:3}}





@media (max-width:900px){.s7menu{left:0;right:auto;min-width:0;width:min(300px,calc(100vw - 32px))}}


/* BETA ja Ohjeet kirjautumisrivillä (seiska.js siirtää), eivät roiku palkin alla sivun päällä */


.s7cloud .s7beta,.s7cloud .s7help{position:static!important;flex:none;margin-left:0!important;height:26px!important;align-self:center}


/* puhelin: valikon viivat ja sulkurasti näkyvän kokoisina 38 px painikkeessa */

@media (max-width:900px){html .nav .burger i{left:9px;right:9px;height:2px}html .nav .burger i:first-child{top:14px}html .nav .burger i:last-child{top:22px}html.menu-open .nav .burger i:first-child,html.menu-open .nav .burger i:last-child{top:18px}}

/* kirjautuneena hankepalkissa näkyy Google-tili (kuva ja nimi), puhelimella kuva ja "Kirjautunut" */
.s7bar .s7cloud .rkc-user{display:inline-flex!important;height:34px;box-sizing:border-box;padding:3px 8px 3px 4px;gap:7px}.s7bar .s7cloud .rkc-av{width:26px;height:26px}
.s7bar .s7cloud .rkc-txt{display:grid!important;min-width:0}.s7bar .s7cloud .rkc-txt small{display:none}.s7bar .s7cloud .rkc-txt b{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}.s7bar .s7cloud .rkc-txt b::before{content:"¹3  ";color:#1F6B4E}
.s7bar .s7cloud .rkc-out{padding:2px 2px;font-size:11.5px}
@media (max-width:900px){.s7bar .s7cloud .rkc-txt b{font-size:0;max-width:none}.s7bar .s7cloud .rkc-txt b::before{content:"¹3  Kirjautunut";font-size:12px}.s7bar .s7cloud .rkc-out{display:none}}
.s7cloud .s7beta{display:inline-flex!important}.s7cloud{flex-wrap:wrap}
/* alapalkki: vain hankkeen luvut, siirtymät yläpalkissa (pysyvästi, myös kun palkki piirtyy uudelleen) */
html.s7 .hpb .hpb-sw,html.s7 .hpb a.hpb-go,html.s7 .totalbar .tb-sw{display:none!important}