/* Logowanie i loader startowy, 07.11.2026 (decyzja właściciela: spójnie z panelem klienta).
   Kolory wyłącznie z tokenów --cr-* oraz wspólnych tokenów stanów w theme.css. Bricolage Grotesque jest zadeklarowany w client-report.css.
   Animacje wejścia i mapy działają raz po wyświetleniu; przy ograniczonym ruchu ekran od razu pokazuje stan końcowy. */

/* ---------- Loader startowy ---------- */
.boot{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:var(--cr-bg);animation:boot-in .4s ease .12s both}
.boot-mark{width:128px;height:128px;overflow:visible}
.boot-dot{fill:var(--cr-rk0);transform-box:fill-box;transform-origin:center;animation:boot-dot 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * 100ms)}
.boot-d0{--i:0}.boot-d1{--i:1}.boot-d2{--i:2}.boot-d3{--i:3}.boot-d4{--i:4}.boot-d5{--i:5}.boot-d6{--i:6}.boot-d7{--i:7}.boot-d8{--i:8}.boot-d9{--i:9}.boot-d10{--i:10}.boot-d11{--i:11}
.boot-pin{transform-box:fill-box;transform-origin:50% 100%;animation:boot-bounce 1.2s cubic-bezier(.45,0,.4,1) infinite}
.boot-pin path{fill:var(--cr-ink)}
.boot-pin circle{fill:var(--cr-bg)}
.boot-shadow{fill:var(--cr-ink);opacity:.16;transform-box:fill-box;transform-origin:center;animation:boot-shadow 1.2s cubic-bezier(.45,0,.4,1) infinite}
.boot-wave{fill:none;stroke:var(--cr-brand-ink);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:boot-wave 2.4s cubic-bezier(.2,.6,.35,1) infinite}
.boot-wave2{animation-delay:1.2s}
@keyframes boot-in{from{opacity:0}}
@keyframes boot-dot{0%,45%,100%{fill:var(--cr-rk0);transform:scale(1)}12%{fill:var(--cr-rk1);transform:scale(1.28)}28%{fill:var(--cr-seg2);transform:scale(1.08)}}
@keyframes boot-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes boot-shadow{0%,100%{transform:scale(1);opacity:.16}50%{transform:scale(.62);opacity:.08}}
@keyframes boot-wave{0%{transform:scale(.6);opacity:.55}100%{transform:scale(4.4);opacity:0}}

/* ---------- Ekran logowania ---------- */
.lg{display:flex;flex-direction:column;min-height:100dvh;overflow-x:clip}
.lg .lg-header .cp-header-inner{min-height:64px}
.lg .lg-brand .brand-logo{width:112px;height:auto}
.lg-main{flex:1;width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;padding:clamp(32px,5vw,72px) clamp(16px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"intro card" "preview card";column-gap:clamp(32px,6vw,88px);row-gap:36px}

.lg-intro{grid-area:intro;align-self:end;display:flex;flex-direction:column;gap:20px;min-width:0}
.lg-intro p{margin:0}
.lg .lg-title{margin:0;font-family:'Bricolage Grotesque',Poppins,sans-serif;font-optical-sizing:auto;font-size:clamp(38px,4.2vw,58px);line-height:1.03;letter-spacing:-.028em;font-weight:800;max-width:16ch;color:var(--cr-ink);overflow-wrap:break-word;text-wrap:balance}
.lg .lg-lead{font-size:17px;line-height:1.65;color:var(--cr-muted);max-width:34em}

.lg-preview{grid-area:preview;align-self:start;margin:0;display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);padding:14px clamp(14px,2vw,28px) 14px 14px;background:var(--cr-paper);border-radius:28px;box-shadow:0 0 0 1px var(--cr-line),0 30px 60px -44px var(--cr-shadow);min-width:0}
.lg-map-frame{flex:0 0 clamp(180px,20vw,248px);min-width:0}
.lg-map{border-radius:18px}
.lg-preview figcaption{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.lg-preview-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.lg-preview-head strong{font-size:21px;font-weight:700;line-height:1.2;color:var(--cr-ink)}
.lg-sample{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--cr-line);font-size:12px;color:var(--cr-muted)}
.lg .lg-preview p{margin:0;font-size:14px;line-height:1.55;color:var(--cr-muted)}
.lg-preview .cr-legend{font-size:12px;gap:6px 14px}

.lg-card{grid-area:card;align-self:center;justify-self:end;width:min(100%,460px);box-sizing:border-box;background:var(--cr-paper);border-radius:32px;box-shadow:0 0 0 1px var(--cr-line),0 40px 80px -48px var(--cr-shadow);padding:clamp(24px,3.4vw,44px)}
.lg-form{display:flex;flex-direction:column;gap:20px}
.lg-form-head{display:flex;flex-direction:column;gap:8px}
.lg .lg-form h2{margin:0;font-size:34px;line-height:1.05;letter-spacing:-.02em;font-weight:700;color:var(--cr-ink)}
.lg .lg-form-head p{margin:0;font-size:15px;line-height:1.6;color:var(--cr-muted)}
.lg-field{display:flex;flex-direction:column;gap:8px;margin:0}
.lg-label{font-size:14px;font-weight:600;color:var(--cr-ink)}
.lg-input{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 6px 0 16px;border:1px solid var(--cr-line);border-radius:14px;background:var(--cr-paper-2);color:var(--cr-muted);transition:border-color .18s ease,box-shadow .18s ease,color .18s ease}
.lg-input:hover{border-color:var(--cr-ring)}
.lg-input:focus-within{border-color:var(--cr-brand-ink);box-shadow:0 0 0 4px var(--cr-brand-soft);color:var(--cr-brand-ink)}
.lg-input:has(input[aria-invalid="true"]){border-color:var(--red-text);color:var(--red-text)}
.lg-input:has(input[aria-invalid="true"]):focus-within{box-shadow:0 0 0 4px var(--red-bg)}
.lg-icon{flex:none;display:block}
.lg .lg-input input{flex:1 1 auto;width:100%;min-width:0;min-height:52px;margin:0;padding:0 10px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:inherit;font-size:16px;color:var(--cr-ink)}
.lg .lg-input input:focus,.lg .lg-input input:focus-visible{outline:0;box-shadow:none;border:0}
.lg .lg-input input:-webkit-autofill{-webkit-text-fill-color:var(--cr-ink);-webkit-box-shadow:0 0 0 1000px var(--cr-paper-2) inset;caret-color:var(--cr-ink)}
.lg-eye{flex:none;display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--cr-muted);cursor:pointer;transition:background .15s ease,color .15s ease}
.lg-eye:hover{background:var(--cr-land);color:var(--cr-ink)}
.lg-eye:focus-visible{outline:2px solid var(--cr-brand-ink);outline-offset:1px}
.lg-eye [hidden]{display:none}
.lg-caps{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--amber-text)}
.lg-caps[hidden]{display:none}
.lg-error{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:var(--red-bg);border:1px solid var(--red-border);color:var(--red-text);font-size:14px;line-height:1.45;animation:lg-fade .25s ease both}
.lg-error[hidden]{display:none}
.lg-error .lg-icon{margin-top:1px}
.lg-notice{margin:0;padding:12px 14px;border-radius:14px;background:var(--notice-bg);border:1px solid var(--notice-border);color:var(--notice-text);font-size:13px;line-height:1.5}
.lg-notice.is-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red-text)}
.lg .lg-submit{width:100%;min-height:54px;margin-top:4px;font-size:16px;gap:10px;transition:background .15s ease,transform .15s ease}
.lg .lg-submit:active:not(:disabled){transform:scale(.985)}
.lg .lg-submit:disabled{cursor:not-allowed;opacity:.55}
.lg .lg-submit.is-loading:disabled{cursor:progress;opacity:1}
.lg-submit [data-submit-arrow]{transition:transform .2s ease}
.lg-submit:hover:not(:disabled) [data-submit-arrow]{transform:translateX(4px)}
.lg-submit:focus-visible{outline:2px solid var(--cr-brand-ink);outline-offset:3px}
.lg-spinner{display:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:lg-spin .7s linear infinite}
.lg-submit.is-loading .lg-spinner{display:block}
.lg-submit.is-loading [data-submit-arrow]{display:none}
.lg .lg-help{margin:0;padding-top:20px;border-top:1px solid var(--cr-line);font-size:14px;line-height:1.55;color:var(--cr-muted)}
.lg .lg-footer{max-width:1160px;width:100%;box-sizing:border-box;margin:0 auto;padding:16px clamp(16px,4vw,40px) 28px;font-size:12px;color:var(--cr-muted)}
.lg-form.is-shaking{animation:lg-shake .42s cubic-bezier(.36,.07,.19,.97)}

/* Wejście: kolejne bloki wsuwają się od dołu. */
.lg-reveal{animation:lg-rise .7s cubic-bezier(.2,.7,.2,1) both}
.lg-r1{animation-delay:.05s}.lg-r2{animation-delay:.14s}.lg-r3{animation-delay:.24s}.lg-r4{animation-delay:.34s}
.lg-card.lg-reveal{animation-name:lg-rise-card;animation-duration:.8s}

/* Mapa: drogi się rysują, opada pinezka, punkty pojawiają się falą i „zostają zmierzone”, potem spokojna fala z pinezki. */
.lg-map .lg-road{stroke-dasharray:1;animation:lg-draw 1s cubic-bezier(.4,0,.2,1) both}
.lg-map .lg-road0{animation-delay:.45s}.lg-map .lg-road1{animation-delay:.55s}.lg-map .lg-road2{animation-delay:.65s}.lg-map .lg-road3{animation-delay:.75s}
.lg-map .lg-ring{animation:lg-fade .8s ease both}
.lg-map .lg-ring0{animation-delay:.7s}.lg-map .lg-ring1{animation-delay:.8s}.lg-map .lg-ring2{animation-delay:.9s}
.lg-w0{--w:0}.lg-w1{--w:1}.lg-w2{--w:2}.lg-w3{--w:3}.lg-w4{--w:4}.lg-w5{--w:5}.lg-w6{--w:6}
.lg-map .lg-dot{transform-box:fill-box;transform-origin:center;animation:lg-pop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(1.05s + var(--w) * 65ms)}
.lg-map .lg-dot circle{animation:lg-measure .55s ease both;animation-delay:calc(1.75s + var(--w) * 120ms)}
.lg-map .lg-dot text{animation:lg-fade .45s ease both;animation-delay:calc(1.85s + var(--w) * 120ms)}
.lg-map .lg-pin{transform-box:fill-box;transform-origin:50% 100%;animation:lg-drop .75s cubic-bezier(.34,1.5,.64,1) .9s both}
.lg-map .cr-dot text{font-size:4px}
.lg-map .lg-pin path{fill:var(--cr-rk1);stroke:var(--cr-ink);stroke-width:.7}
.lg-map .lg-pin text{font-family:Poppins,sans-serif;font-size:5px;font-weight:700;text-anchor:middle;fill:var(--cr-rk1-ink)}
.lg-ripple{fill:none;stroke:var(--cr-brand-ink);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:lg-ripple 3.6s cubic-bezier(.2,.6,.35,1) 3s infinite}
.lg-ripple2{animation-delay:4.8s}

@keyframes lg-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes lg-rise-card{from{opacity:0;transform:translateY(26px) scale(.985)}}
@keyframes lg-fade{from{opacity:0}}
@keyframes lg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-pop{from{opacity:0;transform:scale(0)}}
@keyframes lg-measure{from{fill:var(--cr-rk0)}}
@keyframes lg-drop{0%{opacity:0;transform:translateY(-22px)}60%{opacity:1}100%{transform:translateY(0)}}
@keyframes lg-ripple{0%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(4.6)}}
@keyframes lg-spin{to{transform:rotate(360deg)}}
@keyframes lg-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

@media(max-width:900px){
 .lg-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "card" "preview";row-gap:28px;padding-top:clamp(24px,5vw,40px)}
 .lg-intro{align-self:start;gap:14px}
 .lg .lg-title{font-size:clamp(32px,7.4vw,48px);max-width:16ch}
 .lg .lg-lead{font-size:16px}
 .lg-card{justify-self:stretch;width:auto}
}
@media(max-width:560px){
 .lg .lg-header .cp-header-inner{min-height:56px;flex-wrap:nowrap}
 .lg .lg-brand .brand-logo{width:92px}
 .lg-card{border-radius:26px;padding:22px 18px}
 .lg .lg-form h2{font-size:28px}
 .lg-preview{flex-direction:column;align-items:stretch;padding:12px 12px 18px;border-radius:24px}
 .lg-map-frame{flex-basis:auto;width:100%;max-width:340px;align-self:center}
 .lg-preview figcaption{padding:0 6px}
}

@media(prefers-reduced-motion:reduce){
 .lg *,.lg-reveal,.boot{animation:none!important;transition:none!important}
 .lg-ripple{display:none}
 .boot-dot,.boot-pin,.boot-shadow,.boot-wave{animation:none}
 .boot-dot{animation:boot-calm 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * 130ms)}
 @keyframes boot-calm{from{fill:var(--cr-rk0)}to{fill:var(--cr-rk1)}}
}
@media print{.boot{display:none}}