/* Spokes loading screen + spinner (loaded in <head>, before the app CSS) */
.spk-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#F4F4F2;color:#0B1F26;contain:strict;transition:opacity .32s ease,visibility 0s linear .32s}
html[data-theme="dark"] .spk-splash{background:#252B2D;color:#EDF7F9}
.spk-splash.is-out{opacity:0;visibility:hidden;pointer-events:none}
.spk-splash__in{display:grid;justify-items:center;gap:28px;transform:translateY(-4vh)}
.spk-splash__logo{display:block;width:min(46vw,200px);height:auto;color:inherit}
.spk-splash__logo svg{display:block;width:100%;height:auto;fill:currentColor}
.spk-splash__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* spinner: thin ring, teal gradient tail #0d4a57 → #a5e8fd → transparent */
/* rotating wrapper (plain transform – reliable on iOS Safari) + masked gradient ring inside (never animated itself) */
.spk-spin{--s:44px;--w:3px;position:relative;display:inline-block;width:var(--s);height:var(--s);flex:none;vertical-align:middle;
  transform-origin:50% 50%;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0);
  -webkit-animation:spk-rot .9s linear infinite;animation:spk-rot .9s linear infinite}
.spk-spin__r{position:absolute;inset:0;display:block;border-radius:50%;box-sizing:border-box;border:var(--w) solid rgba(165,232,253,.45);border-top-color:#0D4A57}
html[data-theme="dark"] .spk-spin__r{border-color:rgba(165,232,253,.18);border-top-color:#A5E8FD}
.spk-spin--sm{--s:18px;--w:2px}.spk-spin--md{--s:28px;--w:2.5px}
@-webkit-keyframes spk-rot{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@keyframes spk-rot{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* reduced motion: a loading indicator is essential motion – keep rotating, just slower */
@media (prefers-reduced-motion:reduce){.spk-spin{-webkit-animation-duration:2.4s;animation-duration:2.4s}.spk-splash{transition:none}}
.spk-busy{display:inline-flex;align-items:center;gap:8px}
/* Nav-puls (logo option 4). Intro plays once (~1 s, tiny SVG); the looping "still loading" pulse is two
   plain HTML rings animated with transform+opacity only, so it runs on the compositor even while the app JS is busy. */
.spk-np{position:relative;display:block;width:220px;max-width:56vw;aspect-ratio:90/32;color:inherit}
.spk-np__svg{display:block;width:100%;height:100%;overflow:visible}
.spk-np .lt{fill:currentColor}
.spk-np .rim{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:34.3}
.spk-np .spk line{stroke:#0D4A57;stroke-width:.6;stroke-linecap:round}
.spk-np .hub{fill:#0D4A57}
.spk-np .wave{fill:none;stroke:#0D4A57;stroke-width:.8;opacity:0}
.spk-np .o,.spk-np .o *{transform-box:view-box;transform-origin:39.03px 15.4px}
.spk-np .hub{animation:spkNpHub .6s cubic-bezier(.3,1.6,.5,1) both}
.spk-np .wave{animation:spkNpWave .9s ease-out .2s both}
.spk-np .spk line{animation:spkNpSpk .35s cubic-bezier(.2,.8,.2,1) .35s both}
.spk-np .rim{animation:spkNpRim .45s ease-out .6s both}
@keyframes spkNpHub{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes spkNpWave{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
@keyframes spkNpSpk{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes spkNpRim{from{stroke-dashoffset:34.3;opacity:.3}to{stroke-dashoffset:0;opacity:1}}
/* loop: rings centred on the hub (39.03,15.4 in viewBox -2 -2 90 32) */
.spk-np__p{position:absolute;left:45.59%;top:54.38%;width:12%;aspect-ratio:1;margin:-6% 0 0 -6%;border-radius:50%;
  border:2px solid #0D4A57;opacity:0;pointer-events:none;will-change:transform,opacity;
  -webkit-animation:spkNpLoop 1.8s cubic-bezier(.2,.6,.3,1) 1s infinite;animation:spkNpLoop 1.8s cubic-bezier(.2,.6,.3,1) 1s infinite}
.spk-np__p--2{-webkit-animation-delay:1.9s;animation-delay:1.9s}
@-webkit-keyframes spkNpLoop{0%{opacity:.7;-webkit-transform:scale(.35)}100%{opacity:0;-webkit-transform:scale(2.6)}}
@keyframes spkNpLoop{0%{opacity:.7;transform:scale(.35)}100%{opacity:0;transform:scale(2.6)}}
html[data-theme="dark"] .spk-np .spk line,html[data-theme="dark"] .spk-np .wave{stroke:#A5E8FD}
html[data-theme="dark"] .spk-np .hub{fill:#A5E8FD}
html[data-theme="dark"] .spk-np__p{border-color:#A5E8FD}
@media (prefers-reduced-motion:reduce){
  .spk-np .hub,.spk-np .wave,.spk-np .spk line,.spk-np .rim{animation:none}
  .spk-np .rim{stroke-dashoffset:0}
  /* loading is still signalled, but with a slow fade only (no scaling movement) */
  .spk-np__p{-webkit-animation:spkNpFade 2.4s ease-in-out .3s infinite alternate;animation:spkNpFade 2.4s ease-in-out .3s infinite alternate;-webkit-transform:scale(1.4);transform:scale(1.4)}
  .spk-np__p--2{display:none}
}
@-webkit-keyframes spkNpFade{from{opacity:0}to{opacity:.5}}@keyframes spkNpFade{from{opacity:0}to{opacity:.5}}

/* ===== 2026-10-10 Blueprint logo replaces Nav-puls ===== */
/* Spokes Blueprint loader (bp-*), stacked. v3 spin: rim fades in, spokes gather inward (spiral), hub pops, then the wheel spins until loaded. transform/opacity only (compositor). */
.bp-l,.bpw{display:block;width:clamp(170px,62vw,270px);height:auto;overflow:visible;color:#FFFFFF;margin:0 auto}
.spk-np .bp-l,.spk-np .bpw{width:100%}
.bpw{position:relative;aspect-ratio:1;will-change:transform;-webkit-animation:bpR 2.6s linear infinite;animation:bpR 2.6s linear infinite}
.bpw>svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;will-change:transform,opacity}
.bpw-r{-webkit-animation:bpIn 1.1s cubic-bezier(.2,.8,.2,1) both;animation:bpIn 1.1s cubic-bezier(.2,.8,.2,1) both}
.bpw-s{-webkit-animation:bpS 1.7s cubic-bezier(.16,.84,.3,1) .25s both;animation:bpS 1.7s cubic-bezier(.16,.84,.3,1) .25s both}
.bpw-h{-webkit-animation:bpH .45s cubic-bezier(.3,1.5,.5,1) 1.6s both;animation:bpH .45s cubic-bezier(.3,1.5,.5,1) 1.6s both}
.bpw-g{opacity:0;-webkit-animation:bpG 1.8s ease-in-out 1.8s infinite;animation:bpG 1.8s ease-in-out 1.8s infinite}
.bp-l .bp-nm{opacity:0;animation:bpN .6s ease-out 1.9s forwards}
@keyframes bpR{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes bpR{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
@keyframes bpIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}@-webkit-keyframes bpIn{from{opacity:0;-webkit-transform:scale(.86)}to{opacity:1;-webkit-transform:none}}
@keyframes bpS{from{opacity:0;transform:scale(1.9) rotate(-120deg)}to{opacity:1;transform:none}}@-webkit-keyframes bpS{from{opacity:0;-webkit-transform:scale(1.9) rotate(-120deg)}to{opacity:1;-webkit-transform:none}}
@keyframes bpH{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}@-webkit-keyframes bpH{from{opacity:0;-webkit-transform:scale(0)}to{opacity:1;-webkit-transform:none}}
@keyframes bpG{0%,100%{opacity:.25}50%{opacity:.65}}@-webkit-keyframes bpG{0%,100%{opacity:.25}50%{opacity:.65}}
@keyframes bpN{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.spk-spin{-webkit-animation-duration:1.6s!important;animation-duration:1.6s!important}.spk-spin__r{border:0!important;border-radius:0!important;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%230D4A57' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='7'/><line stroke-width='3.5' x1='50.0' y1='44.0' x2='20.2' y2='23.3'/><line stroke-width='3.5' x1='52.3' y1='44.5' x2='87.7' y2='36.7'/><line stroke-width='3.5' x1='54.2' y1='45.8' x2='47.8' y2='10.1'/><line stroke-width='3.5' x1='55.5' y1='47.7' x2='86.1' y2='67.3'/><line stroke-width='3.5' x1='56.0' y1='50.0' x2='76.7' y2='20.2'/><line stroke-width='3.5' x1='55.5' y1='52.3' x2='63.3' y2='87.7'/><line stroke-width='3.5' x1='54.2' y1='54.2' x2='89.9' y2='47.8'/><line stroke-width='3.5' x1='52.3' y1='55.5' x2='32.7' y2='86.1'/><line stroke-width='3.5' x1='50.0' y1='56.0' x2='79.8' y2='76.7'/><line stroke-width='3.5' x1='47.7' y1='55.5' x2='12.3' y2='63.3'/><line stroke-width='3.5' x1='45.8' y1='54.2' x2='52.2' y2='89.9'/><line stroke-width='3.5' x1='44.5' y1='52.3' x2='13.9' y2='32.7'/><line stroke-width='3.5' x1='44.0' y1='50.0' x2='23.3' y2='79.8'/><line stroke-width='3.5' x1='44.5' y1='47.7' x2='36.7' y2='12.3'/><line stroke-width='3.5' x1='45.8' y1='45.8' x2='10.1' y2='52.2'/><line stroke-width='3.5' x1='47.7' y1='44.5' x2='67.3' y2='13.9'/></g><circle cx='50' cy='50' r='9' fill='%230E7490'/></svg>") center/contain no-repeat}html[data-theme="dark"] .spk-spin__r{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23A5E8FD' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke-width='7'/><line stroke-width='3.5' x1='50.0' y1='44.0' x2='20.2' y2='23.3'/><line stroke-width='3.5' x1='52.3' y1='44.5' x2='87.7' y2='36.7'/><line stroke-width='3.5' x1='54.2' y1='45.8' x2='47.8' y2='10.1'/><line stroke-width='3.5' x1='55.5' y1='47.7' x2='86.1' y2='67.3'/><line stroke-width='3.5' x1='56.0' y1='50.0' x2='76.7' y2='20.2'/><line stroke-width='3.5' x1='55.5' y1='52.3' x2='63.3' y2='87.7'/><line stroke-width='3.5' x1='54.2' y1='54.2' x2='89.9' y2='47.8'/><line stroke-width='3.5' x1='52.3' y1='55.5' x2='32.7' y2='86.1'/><line stroke-width='3.5' x1='50.0' y1='56.0' x2='79.8' y2='76.7'/><line stroke-width='3.5' x1='47.7' y1='55.5' x2='12.3' y2='63.3'/><line stroke-width='3.5' x1='45.8' y1='54.2' x2='52.2' y2='89.9'/><line stroke-width='3.5' x1='44.5' y1='52.3' x2='13.9' y2='32.7'/><line stroke-width='3.5' x1='44.0' y1='50.0' x2='23.3' y2='79.8'/><line stroke-width='3.5' x1='44.5' y1='47.7' x2='36.7' y2='12.3'/><line stroke-width='3.5' x1='45.8' y1='45.8' x2='10.1' y2='52.2'/><line stroke-width='3.5' x1='47.7' y1='44.5' x2='67.3' y2='13.9'/></g><circle cx='50' cy='50' r='9' fill='%230E7490'/></svg>")}
.spk-splash,.np-load{transition:opacity .5s ease,visibility 0s linear .5s!important}
@media (prefers-reduced-motion:reduce){.bp-l *{animation:none!important}.bpw>svg{animation:none!important;opacity:1}.bpw-g{opacity:.5}.bp-l .bp-nm{opacity:1}.bpw{animation-duration:6s}}
.spk-splash,html[data-theme="dark"] .spk-splash{background:#363636;color:#FFFFFF}
.spk-np{aspect-ratio:100/132;width:clamp(170px,62vw,270px);max-width:none}.spk-np .bp-l{width:100%}.spk-np__p{display:none!important}
/* Blueprint login visual: spokes gather into the hub, then the hub breathes. */
.bp-login{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;overflow:hidden}
.bp-login .bpg{width:min(118vmin,880px);height:auto;opacity:.16;color:#FFFFFF}
html:not([data-theme="dark"]) .bp-login .bpg{color:#155E75;opacity:.13}
main.sp{position:relative;z-index:1}main.sp>.sp-card,main.sp>*:not(.bp-login){position:relative;z-index:1}
.bpg-r{fill:none;stroke:currentColor;stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;animation:bpgD 1.6s cubic-bezier(.4,0,.2,1) forwards}
.bpg-r2{stroke-width:.2;animation-delay:.15s}
.bpg-s{fill:none;stroke:currentColor;stroke-width:.22;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bpgD 1.4s cubic-bezier(.4,0,.2,1) calc(.5s + var(--i)*.06s) forwards}
.bpg-hub{fill:#A5DDE6;opacity:0;animation:bpgF .5s ease-out 2.2s forwards}
.bpg-glow{fill:#0E7490;opacity:0;filter:blur(3px);animation:bpgB 5s ease-in-out 2.3s infinite}
@keyframes bpgD{to{stroke-dashoffset:0}}@keyframes bpgF{to{opacity:1}}@keyframes bpgB{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.bp-login *{animation:none!important}.bpg-r,.bpg-s{stroke-dashoffset:0}.bpg-hub{opacity:1}.bpg-glow{opacity:.6}}


/* Blueprint login v2 */
html body main.sp{flex-direction:column;align-items:center}html body main.sp>.sp-card{margin-left:auto;margin-right:auto}
.bp-login{position:static!important;inset:auto!important;display:flex!important;justify-content:center;margin:4px auto 18px;overflow:visible!important;z-index:auto!important;pointer-events:none}
.bp-login .bpg,html:not([data-theme="dark"]) .bp-login .bpg{width:clamp(120px,34vw,180px);height:auto;opacity:1;color:#1C1C1C}
html[data-theme="dark"] .bp-login .bpg{color:#FFFFFF}
.bp-login .bpg-r{stroke-width:1.3}.bp-login .bpg-r2{stroke-width:.7}.bp-login .bpg-s{stroke-width:.6}
.bp-login .bpg-r{animation-duration:1s}.bp-login .bpg-s{animation-duration:.9s;animation-delay:calc(.25s + var(--i)*.04s)}
.bp-login .bpg-hub{fill:#0E7490;opacity:0;animation:bpgF .3s ease-out 1.5s forwards,bpgK 1.3s ease-in-out 1.8s infinite}
.bp-login .bpg-glow{fill:#1FA3C4;opacity:0;filter:blur(2.5px);animation:bpgK2 1.3s ease-in-out 1.8s infinite}
@keyframes bpgK{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes bpgK2{0%,100%{opacity:.75}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bp-login *{animation:none!important}.bp-login .bpg-r,.bp-login .bpg-s{stroke-dashoffset:0}.bp-login .bpg-hub{opacity:1}.bp-login .bpg-glow{opacity:.5}}

/* plain-x close (2026-10-10): brand-colour hover on × / close buttons */
:is(button,[role="button"])[aria-label="Lukk"]:hover,:is(button,[role="button"])[aria-label="Close"]:hover,:is(button,[role="button"])[aria-label="Lukk"]:focus-visible,:is(button,[role="button"])[aria-label="Close"]:focus-visible{color:var(--brand,var(--accent,#0f6b8a))!important}

/*FOUC2*/ #spk-splash .spk-splash__in{visibility:hidden}