/* Sivupalkki (252 px / kavennettuna 76 px), puhelimen yläpalkki, alapalkki ja Lisää-paneeli.
   Sivupalkki on tumma molemmissa teemoissa, joten värit ovat samat vaaleassa ja tummassa tilassa. */
:root{--wsb-w:252px;--wsb-mini:76px;--wsb-blue:var(--acc,#3b6fd1);--wsb-sky:var(--acc-l,#9dc0f2);--wsb-line:rgba(255,255,255,.07);--wsb-mut:#8b94a8;--wsb-pop:#171e2e}
.app-shell{grid-template-columns:auto minmax(0,1fr)}
.wsb{position:sticky;top:0;height:100vh;width:var(--wsb-w);display:flex;flex-direction:column;color:#fff;z-index:30;background:linear-gradient(180deg,#0d1119 0%,#10151f 46%,#15203a 100%);border-right:1px solid rgba(255,255,255,.05);transition:width .22s cubic-bezier(.2,.8,.2,1)}
.wsb-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wsb-fx i{position:absolute;border-radius:50%}
.wsb-g1{width:340px;height:340px;left:-150px;top:-170px;background:radial-gradient(closest-side,rgba(var(--acc-m-rgb,111,160,224),.18),transparent)}
.wsb-g2{width:320px;height:320px;right:-180px;bottom:-120px;background:radial-gradient(closest-side,rgba(var(--acc-d-rgb,47,95,168),.28),transparent)}
.wsb>*:not(.wsb-fx){position:relative}
.wsb svg{width:18px;height:18px;stroke-width:2}
.wsb-hd{display:flex;align-items:center;gap:10px;padding:22px 18px 18px;min-height:74px}
.wsb-logo{display:flex;align-items:center;gap:12px;min-width:0}
.wsb-logo img{height:28px;width:auto;display:block}
.wsb-logo .wsb-mark{display:none;filter:brightness(0) invert(1)}
.wsb-colb{position:absolute!important;right:-13px;top:27px;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:var(--wsb-pop);color:var(--wsb-sky);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .22s;box-shadow:0 6px 14px -6px rgba(0,0,0,.7);z-index:5}
.wsb-colb svg{width:14px;height:14px}
.wsb-colb:hover,.wsb-colb:focus-visible{background:var(--wsb-blue);border-color:var(--wsb-blue);color:#fff}
.wsb-nav{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.wsb-nav::-webkit-scrollbar{display:none}
.wsb-fill{flex:1}
.wsb-grp{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#7d8aa0;padding:14px 22px 6px;white-space:nowrap}
.wsb-it{position:relative;display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;margin:1px 10px;width:calc(100% - 20px);font-family:inherit;font-size:14px;font-weight:500;color:#b7c0d0;border-radius:10px;cursor:pointer;border:0;background:transparent;text-align:left;transition:background .15s,color .15s}
.wsb-it svg{color:#7c869a;flex-shrink:0;transition:color .15s}
.wsb-lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsb-it:hover,.wsb-it:focus-visible{background:rgba(255,255,255,.05);color:#fff}
.wsb-it:hover svg{color:#b7c0d0}
.wsb-it.on{background:linear-gradient(90deg,rgba(var(--acc-rgb,59,111,209),.28),rgba(var(--acc-rgb,59,111,209),.08));color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--acc-m-rgb,111,160,224),.18)}
.wsb-it.on::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--acc-m,#6fa0e0)}
.wsb-it.on svg{color:var(--wsb-sky)}
.wsb-bd{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--wsb-blue);color:#fff;box-shadow:0 4px 10px -4px rgba(var(--acc-rgb,59,111,209),.8)}
.wsb-tip{position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-4px,-50%);white-space:nowrap;background:var(--wsb-pop);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:12.5px;font-weight:600;border-radius:8px;padding:6px 10px;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;display:none;z-index:40}
.wsb-tip em{font-style:normal;color:var(--wsb-sky);margin-left:6px}
.wsb-trial{display:block;width:calc(100% - 24px);margin:14px 12px 10px;border-radius:14px;padding:14px;text-align:left;font-family:inherit;color:#fff;background:linear-gradient(135deg,rgba(var(--acc-rgb,59,111,209),.22),rgba(var(--acc-rgb,59,111,209),.06));border:1px solid rgba(var(--acc-m-rgb,111,160,224),.2);cursor:pointer;transition:border-color .15s}
.wsb-trial:hover,.wsb-trial:focus-visible{border-color:rgba(var(--acc-m-rgb,111,160,224),.4)}
.wsb-t1{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--wsb-sky)}
.wsb-t1 span{font-size:10.5px;color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:2px 8px}
.wsb-t2{display:block;font-size:13.5px;font-weight:600;margin:8px 0 10px;line-height:1.35}
.wsb-tbar{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.wsb-tbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--acc,#3b6fd1),var(--acc-l,#9dc0f2))}
.wsb-t3{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;color:var(--wsb-sky)}
.wsb-t3 svg{width:14px;height:14px}
.wsb-trial-mini{display:none}
/* Asentajan tunnus (installer.js): ei asetuksia, avustajaa eikä kalenterin muokkaus-, tarjous- tai viestitoimintoja. */
html.role-installer #wsbSettings,html.role-installer [data-nav-more],html.role-installer [data-nav-ask],html.role-installer #assistantToggle,html.role-installer #assistantPanel,html.role-installer [data-cal-connect],html.role-installer [data-cal-done],html.role-installer [data-cal-edit],html.role-installer [data-cal-msg],html.role-installer [data-cal-new],html.role-installer [data-cal-offer],html.role-installer [data-cal-of],html.role-installer [data-cal-propose],html.role-installer [data-cal-sug]{display:none!important}
.wsb-usage.full,.wsb-usage.blocked{background:linear-gradient(135deg,rgba(224,130,50,.28),rgba(224,130,50,.07));border-color:rgba(240,170,100,.4)}
.wsb-usage.full .wsb-tbar i,.wsb-usage.blocked .wsb-tbar i{background:linear-gradient(90deg,#e0823a,#f3b37a)}
.wsb-adm{border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
.wsb-wsw{position:relative;padding:6px 10px 12px}
.wsb-wsc{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--wsb-line);color:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s,border-color .15s}
.wsb-wsc:hover,.wsb-wsc:focus-visible{background:rgba(255,255,255,.07)}
.wsb-wsc.open{background:rgba(var(--acc-rgb,59,111,209),.16);border-color:rgba(var(--acc-m-rgb,111,160,224),.3)}
.wsb-wsc>svg{color:var(--wsb-mut);flex-shrink:0;width:15px;height:15px}
.wsb-wi{width:34px;height:34px;border-radius:10px;background:linear-gradient(150deg,#2f5fa8,var(--acc-m,#6fa0e0));font-family:var(--font-heading);font-weight:600;font-size:16px;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:0;padding:0}
.wsb-wt{flex:1;min-width:0}
.wsb-wt b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsb-wt small{display:block;font-size:11.5px;color:var(--wsb-mut);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* työtilavalikko */
.wsb-pop{position:absolute;left:10px;bottom:calc(100% - 2px);width:300px;max-width:calc(100vw - 20px);max-height:calc(100vh - 120px);overflow-y:auto;background:var(--wsb-pop);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);padding:8px;z-index:45;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
.wsb-pop.on{opacity:1;visibility:visible;transform:none}
.wsb-poh{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#5f6a80;padding:8px 10px 6px}
.wsb-pw{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;font-family:inherit;font-size:13px;color:#fff;border:0;background:transparent;cursor:pointer;text-align:left}
.wsb-pw:hover:not(:disabled){background:rgba(255,255,255,.05)}
.wsb-pw:disabled{cursor:default;opacity:1}
.wsb-pw .wsb-wi{width:28px;height:28px;border-radius:8px;font-size:13px}
.wsb-pw .wsb-wi.l{background:rgba(255,255,255,.08);color:var(--wsb-sky)}
.wsb-pwt{flex:1;min-width:0}
.wsb-pwt b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsb-pwt small{display:block;font-size:11px;color:var(--wsb-mut)}
.wsb-pw.cur{background:rgba(var(--acc-rgb,59,111,209),.16)}
.wsb-ck{color:var(--wsb-sky);display:flex}
.wsb-ck svg{width:15px;height:15px}
.wsb-pl{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:13px;font-family:inherit;color:#c3cad8;border:0;background:transparent;cursor:pointer;text-align:left}
.wsb-pl svg{width:15px;height:15px;color:var(--wsb-mut);flex-shrink:0}
.wsb-pl:hover,.wsb-pl:focus-visible{background:rgba(255,255,255,.05);color:#fff}
.wsb-pl.cur{background:rgba(var(--acc-rgb,59,111,209),.16);color:#fff}
.wsb-pl.add,.wsb-pl.add svg{color:var(--wsb-sky)}
.wsb-pl.out,.wsb-pl.out svg{color:#ff8a7e}
.wsb-sep{height:1px;background:var(--wsb-line);margin:6px 4px}
.wsb-me{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0}
.wsb-me>span:last-child{min-width:0}
.wsb-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:linear-gradient(150deg,#182644,#2f5fa8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.wsb-me b{display:block;font-size:13px;overflow-wrap:anywhere}
.wsb-me small{display:block;font-size:11px;color:var(--wsb-mut);overflow-wrap:anywhere}
/* kavennettu */
.wsb.mini{width:var(--wsb-mini)}
.wsb.mini .wsb-hd{justify-content:center;padding:22px 0 18px}
.wsb.mini .wsb-full{display:none}
.wsb.mini .wsb-logo .wsb-mark{display:block}
.wsb.mini .wsb-colb{transform:rotate(180deg)}
.wsb.mini .wsb-grp{font-size:0;padding:0;height:1px;margin:10px 22px;background:rgba(255,255,255,.08)}
.wsb.mini .wsb-nav{overflow:visible}
.wsb.mini .wsb-it{width:48px;height:44px;margin:2px auto;padding:0;justify-content:center}
.wsb.mini .wsb-lb{display:none}
.wsb.mini .wsb-it.on::before{left:-14px}
.wsb.mini .wsb-bd{position:absolute;top:4px;right:3px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px;box-shadow:0 0 0 2px #10151f}
.wsb.mini .wsb-tip{display:block}
.wsb.mini .wsb-it:hover .wsb-tip,.wsb.mini .wsb-it:focus-visible .wsb-tip,.wsb.mini .wsb-trial-mini:hover .wsb-tip{opacity:1;transform:translate(0,-50%)}
.wsb.mini .wsb-trial{display:none}
.wsb.mini .wsb-trial-mini{display:flex;position:relative;margin:10px auto;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:rgba(var(--acc-rgb,59,111,209),.16);border:1px solid rgba(var(--acc-m-rgb,111,160,224),.25);color:var(--wsb-sky);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.wsb.mini .wsb-wsw{padding:6px 0 14px;display:flex;justify-content:center}
.wsb.mini .wsb-wsc{width:auto;padding:6px;background:transparent;border-color:transparent}
.wsb.mini .wsb-wt,.wsb.mini .wsb-wsc>svg{display:none}
.wsb.mini .wsb-pop{left:64px;bottom:10px}
/* puhelin */
.wsb-mtop,.wsb-tabbar,.wsb-more,.wsb-scrim,.wsb-theme{display:none}
@media (max-width:880px){
 .app-shell{display:grid}
 .wsb{position:sticky;transform:none;box-shadow:none}
}
@media (max-width:760px){
 /* Puhelimessa sovellus vierittyy oman säiliön (.app-shell) sisällä, ei sivun tasolla. Safarin kelluvien
    palkkien alle jää silloin vain bodyn tumma tausta, eikä sivun sisältö kuulla niiden läpi. Alapalkki on
    tavallisessa virrassa bodyn alareunassa, joten sen paikka ei riipu siitä, miten selain käsittelee fixed-elementtejä. */
 html,body{height:100%;overflow:hidden}
 body{display:flex;flex-direction:column;height:100dvh;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px);background:#0d1119}
 .app-shell{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:var(--bg)}
 .wsb{display:none}
 /* Puhelimen turva-alueet (lovi, kotipalkki): viewport-fit=cover index.html:ssä, env() on 0 tavallisessa selainkäytössä. */
 .wsb-mtop{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;background:#0d1119}
 .wsb-mtop img{height:24px;width:auto}
 .wsb-mtop .wsb-wi{width:32px;height:32px;font-size:14px;cursor:pointer}
 /* P10: yläpalkin oma rivi (kuu-nappi) on puhelimessa pois; tumma tila vaihtuu logopalkista, etusivun muokkaus hero-alueen napista (home.css .hm-edm). */
 .topbar{display:none}
 .wsb-mtop .wsb-theme{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;margin-right:10px;padding:0;border:0;border-radius:50%;background:#fff;color:#16202e;cursor:pointer}
 .wsb-mtop .wsb-theme svg{width:16px;height:16px}
 .workspace{padding-bottom:24px}
 .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
 /* Avustajan nappi: pienempi, piiloutuu alaspäin vieritettäessä ja kun etusivun Kysy Ainiolta -kenttä näkyy (portal.js fabUpdate). */
 .chat-fab{bottom:calc(82px + env(safe-area-inset-bottom,0px));right:14px;width:46px;height:46px;transition:transform .2s ease,opacity .2s ease,background .15s ease}
 .chat-fab svg{width:22px;height:22px}
 .chat-fab.fab-hide[aria-expanded="false"],html.more-open .chat-fab{transform:translateY(140px);opacity:0;pointer-events:none}
 /* Avustaja on puhelimessa koko ruudun paneeli. Korkeus seuraa näkyvää aluetta (visualViewport, portal.js apPanelFit),
    jotta kirjoituskenttä pysyy näppäimistön yläpuolella. Kentät ovat vähintään 16 px, ettei iOS Safari zoomaa sivua. */
 .chat-panel{left:0;right:0;top:0;bottom:0;width:auto;max-width:none;max-height:none;height:100%;height:100dvh;border:0;border-radius:0;box-shadow:none}
 .chat-panel-head{padding-top:calc(14px + env(safe-area-inset-top,0px))}
 .chat-input-row{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .chat-input-row input{font-size:16px}
 html.assistant-open .wsb-tabbar,html.assistant-open .chat-fab{display:none}
 /* Kaikki tekstikentät vähintään 16 px, jotta iOS Safari ei zoomaa sivua kenttää kosketettaessa (ja jää zoomattuna
    lähetyksen jälkeen). !important tarvitaan, koska monella kentällä on tarkempi oma fontsize-sääntö. */
 input,select,textarea{font-size:16px!important}
 .wsb-tabbar{display:flex;position:relative;bottom:0;flex:none;z-index:40;height:70px;padding:10px 2px 12px;justify-content:space-around;background:#0d1119;border-top:1px solid rgba(255,255,255,.06);transition:transform .22s ease,margin-bottom .22s ease}
 /* Alapalkki väistyy, kun vieritys pysähtyy muualla kuin sivun yläreunassa, ja tulee esiin vieritettäessä (nav.js navTabbarAuto). */
 .wsb-tabbar.away{transform:translateY(100%);margin-bottom:-92px;pointer-events:none}
 .wsb-tb{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:10px;letter-spacing:-.015em;font-weight:600;color:#7c869a;border:0;background:transparent;cursor:pointer}
 .wsb-tb span:not(.wsb-bd){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .wsb-tb svg{width:25px;height:25px;stroke-width:1.9;color:#7c869a}
 .wsb-tb.on{color:#fff}.wsb-tb.on svg{color:var(--wsb-sky)}
 /* Kysy Ainiolta on puhelimella alapalkin oma kohta; kelluva pallo peitti rivien oikean reunan. */
 .wsb-tb.wsb-ask,.wsb-tb.wsb-ask svg{color:var(--wsb-sky)}
 .chat-fab{display:none}
 .wsb-tb.on::before{content:"";position:absolute;top:-10px;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--acc-m,#6fa0e0)}
 .wsb-tb .wsb-bd{position:absolute;top:-4px;left:calc(50% + 9px);margin:0;min-width:16px;height:16px;font-size:9.5px;padding:0 4px;box-shadow:0 0 0 2px #0d1119}
 .wsb-more{display:block;position:fixed;left:0;right:0;bottom:0;z-index:39;max-height:85vh;overflow-y:auto;background:#141a26;color:#fff;border-radius:20px 20px 0 0;padding:10px 12px calc(90px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 50px -10px rgba(0,0,0,.6),0 200px 0 0 #141a26;transform:translateY(100%);visibility:hidden;transition:transform .22s,visibility .22s}
 .wsb-more.on{transform:none;visibility:visible}
 .wsb-more .wsb-pl{font-size:15px;padding:12px}
 .wsb-more .wsb-pl svg{width:18px;height:18px}
 .wsb-grab{width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin:0 auto 10px}
 .wsb-grab-zone{padding:6px 0 12px;margin:-10px -12px 0;touch-action:none}
 .wsb-more.drag{transition:none}
 .wsb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:38}
 .wsb-scrim.on{display:block}
}
@media (prefers-reduced-motion:reduce){.wsb,.wsb-pop,.wsb-more,.wsb-colb{transition:none}}
/* Mukauta (appearance.js): tehostevärinen sivupalkki. --sb-accent on tehosteväri tummennettuna niin, että valkoisen
   tekstin kontrasti on vähintään 7,5:1. Merkit ja valitun sivun korostus muuttuvat valkoisiksi. */
html.sb-accent .wsb{background:var(--sb-accent);border-right-color:rgba(255,255,255,.08)}
html.sb-accent .wsb-fx{display:none}
html.sb-accent .wsb-grp,html.sb-accent .wsb-wt small{color:rgba(255,255,255,.66)}
html.sb-accent .wsb-it{color:rgba(255,255,255,.86)}
html.sb-accent .wsb-it svg,html.sb-accent .wsb-wsc>svg{color:rgba(255,255,255,.72)}
html.sb-accent .wsb-it:hover,html.sb-accent .wsb-it:focus-visible{background:rgba(255,255,255,.1)}
html.sb-accent .wsb-it.on{background:rgba(255,255,255,.16);box-shadow:none}
html.sb-accent .wsb-it.on::before{background:#fff}
html.sb-accent .wsb-it.on svg{color:#fff}
html.sb-accent .wsb-bd{background:#fff;color:var(--sb-accent);box-shadow:none}
html.sb-accent .wsb-wsc{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
html.sb-accent .wsb-wi{background:rgba(255,255,255,.2)}
html.sb-accent .wsb-trial{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
html.sb-accent .wsb-t1,html.sb-accent .wsb-t3{color:#fff}
html.sb-accent .wsb-tbar i{background:#fff}
html.sb-accent .wsb-adm{border-top-color:rgba(255,255,255,.12)}
@media (max-width:760px){html.sb-accent .wsb-mtop{background:var(--sb-accent)}}
/* Yrityksen logo työtilan tunnuksen paikalla */
.wsb-wi.has-logo,.has-logo>.wsb-wi,.has-logo.wsb-wi{background:#fff;padding:3px;overflow:hidden}
html.sb-accent .wsb-wi.has-logo{background:#fff}
.wsb-wi img.ap-logo{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px}
/* Sivupalkki malli B (6.10.2026): selitysrivi nimen alla, Nyt ajankohtaista ja Muut sivut -ryhmä (dist/nav.js). */
.wsb-nav .wsb-it.wsb-two{height:auto;min-height:52px;padding-top:7px;padding-bottom:7px;align-items:flex-start}
.wsb-two>svg{margin-top:2px}
.wsb-two .wsb-lb{display:flex;flex-direction:column;gap:2px;line-height:1.25;white-space:normal}
.wsb-two .wsb-lb small{font-size:12px;font-weight:500;color:#8d97ab}
.wsb-two.on .wsb-lb small{color:#c9d6ee}
.wsb-now{flex-shrink:0;width:8px;height:8px;margin:6px 0 0 auto;border-radius:50%;background:#f5b82e;box-shadow:0 0 0 3px rgba(245,184,46,.22)}
.wsb-nowh{color:#c9a54a}
.wsb-nowt{font-size:11px;color:#8d97ab;padding:0 22px 4px 52px;line-height:1.3}
.wsb-osep{height:1px;background:rgba(255,255,255,.08);margin:10px 22px}
.wsb-grpb{display:flex;align-items:center;gap:8px;width:calc(100% - 20px);margin:1px 10px;padding:0 12px;height:38px;border:0;background:transparent;color:#8d97ab;font:inherit;font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;text-align:left}
.wsb-grpb:hover,.wsb-grpb:focus-visible{background:rgba(255,255,255,.05);color:#c9d1df}
.wsb .wsb-grpb svg{width:16px;height:16px;transition:transform .15s}
.wsb-grpb[aria-expanded="true"] svg{transform:rotate(90deg)}
.wsb-osub .wsb-it{height:38px;padding-left:40px;font-size:13.5px}
.wsb.mini .wsb-two .wsb-lb small,.wsb.mini .wsb-nowt,.wsb.mini .wsb-grpb{display:none}
.wsb.mini .wsb-nav .wsb-it.wsb-two{min-height:44px;padding:0;align-items:center}
.wsb.mini .wsb-two>svg{margin-top:0}
.wsb.mini .wsb-now{position:absolute;top:7px;right:8px;margin:0}
.wsb.mini .wsb-nowh{color:transparent}
.wsb.mini .wsb-osub[hidden]{display:block}
.wsb.mini .wsb-osub .wsb-it{padding-left:0}
html.sb-accent .wsb-two .wsb-lb small,html.sb-accent .wsb-nowt,html.sb-accent .wsb-grpb{color:rgba(255,255,255,.72)}
html.sb-accent .wsb-nowh{color:rgba(255,255,255,.8)}
html.sb-accent .wsb-osep{background:rgba(255,255,255,.16)}
/* Kuvakkeiden hillityt liikkeet hiiren päällä (omistajan toive 6.10.2026): jokaisella sivulla oma lyhyt liike, ei toistoa.
   Työnkulun kerrokset painuvat yhteen ja ponnahtavat erilleen (8.10.2026). Uusi sivupalkin sivu tarvitsee oman rivinsä tänne.
   Ei liikettä ilman hiirtä eikä, jos käyttäjä on pyytänyt käyttöjärjestelmässä vähemmän liikettä. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 .wsb-it svg{transform-origin:50% 50%}
 .wsb-it[data-ic="grid"]:hover>svg{animation:wsb-pop .42s cubic-bezier(.3,1.6,.5,1)}
 .wsb-it[data-ic="layers"]:hover>svg{transform-origin:50% 85%;animation:wsb-stack .5s ease-out}
 .wsb-it[data-ic="mail"]:hover>svg{animation:wsb-lift .5s ease-out}
 .wsb-it[data-ic="file"]:hover>svg{animation:wsb-page .5s ease-out}
 .wsb-it[data-ic="calendar"]:hover>svg{animation:wsb-flip .55s ease-in-out}
 .wsb-it[data-ic="card"]:hover>svg{animation:wsb-swipe .5s ease-out}
 .wsb-it[data-ic="send"]:hover>svg{animation:wsb-fly .55s ease-in-out}
 .wsb-it[data-ic="cart"]:hover>svg{animation:wsb-roll .55s ease-in-out}
 .wsb-it[data-ic="clock"]:hover>svg{animation:wsb-tick .5s ease-in-out}
 .wsb-it[data-ic="users"]:hover>svg{animation:wsb-nod .5s ease-out}
 .wsb-it[data-ic="megaphone"]:hover>svg{animation:wsb-call .5s ease-out}
 .wsb-it[data-ic="box"]:hover>svg{animation:wsb-heave .5s ease-out}
 .wsb-it[data-ic="trend"]:hover>svg{animation:wsb-rise .5s ease-out}
 .wsb-it[data-ic="alert"]:hover>svg{animation:wsb-pop .42s cubic-bezier(.3,1.6,.5,1)}
 #wsbSettings:hover>svg{animation:wsb-gear .6s ease-in-out}
}
@keyframes wsb-pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes wsb-stack{0%{transform:none}30%{transform:scaleY(.8)}65%{transform:translateY(-2px) scaleY(1.06)}100%{transform:none}}
@keyframes wsb-lift{0%{transform:none}40%{transform:translateY(-3px) rotate(-6deg)}100%{transform:none}}
@keyframes wsb-page{0%{transform:none}40%{transform:rotate(-9deg) translateX(-1px)}70%{transform:rotate(3deg)}100%{transform:none}}
@keyframes wsb-flip{0%{transform:perspective(60px) rotateX(0)}50%{transform:perspective(60px) rotateX(35deg)}100%{transform:perspective(60px) rotateX(0)}}
@keyframes wsb-swipe{0%{transform:none}35%{transform:translateX(3px)}65%{transform:translateX(-1px)}100%{transform:none}}
@keyframes wsb-fly{0%{transform:none}45%{transform:translate(3px,-3px) scale(.9);opacity:.75}55%{transform:translate(-2px,2px) scale(.95);opacity:.75}100%{transform:none;opacity:1}}
@keyframes wsb-roll{0%{transform:none}40%{transform:translateX(3px) rotate(4deg)}75%{transform:translateX(-1px) rotate(-2deg)}100%{transform:none}}
@keyframes wsb-tick{0%{transform:rotate(0)}30%{transform:rotate(16deg)}60%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes wsb-nod{0%{transform:none}30%{transform:translateY(-2px)}55%{transform:translateY(0)}75%{transform:translateY(-1px)}100%{transform:none}}
/* Markkinointi ja Hiljainen jakso: kuuluttaja kallistuu ja kasvaa hetken, kuin äänen mukana. */
@keyframes wsb-call{0%{transform:none}35%{transform:rotate(-8deg) scale(1.1)}70%{transform:rotate(3deg)}100%{transform:none}}
@keyframes wsb-heave{0%{transform:none}40%{transform:translateY(-3px) rotate(-4deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:none}}
@keyframes wsb-rise{0%{transform:none}45%{transform:translate(2px,-3px)}100%{transform:none}}
@keyframes wsb-gear{0%{transform:rotate(0)}60%{transform:rotate(75deg)}100%{transform:rotate(0)}}
/* Versio valikon alareunassa (C6): pieni harmaa teksti, ei nappi. */
.wsb-ver{padding:8px 12px 2px;font-size:11px;color:var(--muted,#8a93a3);opacity:.8}