/* xpunkt.pl v3: przełącznik języka, wariant A „Kropka jako wskaźnik” (23.10.2026).
   Znaczniki wstawia scripts/i18n/naglowki.py. Ruch: tylko transform i opacity,
   prefers-reduced-motion wyłącza ruch. Kolory z tokenów strony (jasny i ciemny motyw). */
:root{--xp-dot:#1aa088}
html.dark{--xp-dot:#2eb39f}
@media(prefers-color-scheme:dark){html:not(.light){--xp-dot:#2eb39f}}

.nav-links a,.nav-pill{white-space:nowrap}
.lsA .lsA-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- komputer: segment PL EN DE JA ---------- */
.lsA{position:relative;display:flex;align-items:center;height:38px;padding:0 3px;border:1px solid var(--line,rgba(11,26,21,.1));border-radius:100px;background:color-mix(in srgb,var(--bg,#fff) 85%,transparent);flex-shrink:0;font-family:inherit}
.lsA ul{display:flex;list-style:none;margin:0;padding:0}
.lsA li{list-style:none}
.lsA a{position:relative;display:grid;place-items:center;width:36px;height:32px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.07em;line-height:1;color:var(--muted,#5e6f68);text-decoration:none;transition:color .25s}
/* pole dotyku 44 px wysokości (sąsiednie pola stykają się, bez nakładania) */
.lsA a::after{content:"";position:absolute;inset:-6px 0}
.lsA a:hover{color:var(--green-deep,#0e7a66)}
html.dark .lsA a:hover{color:var(--mint,#81d3bf)}
@media(prefers-color-scheme:dark){html:not(.light) .lsA a:hover{color:var(--mint,#81d3bf)}}
.lsA a[aria-current]{color:var(--ink,#0b1a15)}
.lsA a:focus-visible{outline:2px solid var(--green,#1aa088);outline-offset:-1px;border-radius:100px}
@media(pointer:coarse){.lsA a{width:44px}}

.lsA-dot{position:absolute;left:0;bottom:3px;width:5px;height:5px;pointer-events:none;transform:translateX(var(--x,0px))}
.lsA-dot i,.mA-dot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--xp-dot)}
.lsA:not(.ready) .lsA-dot,.mA:not(.ready) .mA-dot{opacity:0}
.lsA.ready .lsA-dot,.mA.ready .mA-dot{transition:transform .7s cubic-bezier(.34,1.56,.64,1);transition:transform .7s linear(0,0.026,0.091,0.184,0.294,0.413,0.533,0.649,0.755,0.85,0.93,0.997,1.049,1.087,1.113,1.128,1.134,1.132,1.125,1.113,1.099,1.083,1.067,1.051,1.037,1.024,1.012,1.003,0.995,0.99,0.986,0.983,0.982,0.982,0.983,0.984,0.986,0.988,0.99,0.993,0.995,1)}
.lsA-dot i.leci,.mA-dot i.leci{animation:xp-rozciag .5s cubic-bezier(.22,1,.36,1)}
@keyframes xp-rozciag{0%{transform:none}30%{transform:scale(2.4,.65)}65%{transform:scale(.85,1.15)}100%{transform:none}}

/* mikro-powitanie pod kodem (najechanie, fokus) */
.lsA-hud{position:absolute;left:0;top:calc(100% + 13px);z-index:2;pointer-events:none;opacity:0;white-space:nowrap;text-align:center;font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,'Hiragino Sans',monospace;transform:translateX(var(--hx,0px)) translateX(-50%) translateY(-4px);transition:opacity .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.lsA-hud.show{opacity:1;transform:translateX(var(--hx,0px)) translateX(-50%)}
.lsA-hud::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:7px;background:var(--line,rgba(11,26,21,.1));transform:translateX(-50%)}
html.dark .lsA-hud::before{background:rgba(255,255,255,.22)}
@media(prefers-color-scheme:dark){html:not(.light) .lsA-hud::before{background:rgba(255,255,255,.22)}}
.lsA-hud b{display:flex;align-items:center;gap:7px;font-family:var(--font,Poppins,system-ui,sans-serif);font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff;background:var(--xp-dot);border-radius:100px;padding:7px 14px 7px 11px;box-shadow:0 10px 24px -12px rgba(14,122,102,.55)}
.lsA-hud b::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0}
.lsA-hud small{display:block;margin-top:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#5e6f68)}
.lsA-hud.tour b{animation:xp-hej .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes xp-hej{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

/* podstrony bez menu burgera: link „Strona główna” (logo prowadzi tam samo) i na telefonie
   przycisk Kontakt ustępują miejsca segmentowi */
.nav-right>.back{white-space:nowrap}
@media(max-width:640px){.nav-right>.back{display:none}}
@media(max-width:560px){.nav-right>.nav-pill{display:none}}

/* ---------- telefon: rząd czterech pól w menu burgera ---------- */
.mobile{overflow-y:auto}
.mobile .mA{margin:26px 0 0;padding:0}
.mobile .mA-l{margin:0 0 10px;font:500 11px/1 ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,'Hiragino Sans',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5e6f68)}
.mobile .mA nav{position:relative;display:block;padding:0}
.mobile .mA ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.mobile .mA li{list-style:none}
.mobile .mA a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:70px;padding:0 0 12px;border:0;border-radius:14px;font-size:inherit;letter-spacing:0;color:var(--muted,#5e6f68);text-decoration:none;transition:background-color .2s,color .2s,transform .15s}
.mobile .mA a b{font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1}
.mobile .mA a span{font-size:12px;font-weight:600;line-height:1.2}
.mobile .mA a[aria-current] span:not(.lsA-sr){color:var(--green-deep,#0e7a66)}
html.dark .mobile .mA a[aria-current] span:not(.lsA-sr){color:var(--mint,#81d3bf)}
.mobile .mA .lsA-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mobile .mA a[aria-current]{color:var(--ink,#0b1a15);background:var(--bg-soft,#f3f9f6)}
.mobile .mA a:active{transform:scale(.97)}
.mA-dot{position:absolute;left:0;bottom:9px;width:7px;height:7px;pointer-events:none;transform:translateX(var(--x,0px))}

/* ---------- podpowiedź: strona jest też w języku przeglądarki ---------- */
.xp-hint{position:fixed;z-index:55;top:var(--hint-top,84px);left:var(--hint-left,auto);right:var(--hint-right,16px);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;background:var(--bg,#fff);color:var(--ink,#0b1a15);border:1px solid var(--line,rgba(11,26,21,.1));border-radius:100px;box-shadow:0 8px 24px -12px rgba(13,60,48,.22);font-size:13px;line-height:1.3;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility .5s}
html.dark .xp-hint{box-shadow:0 8px 24px -12px rgba(0,0,0,.65)}
@media(prefers-color-scheme:dark){html:not(.light) .xp-hint{box-shadow:0 8px 24px -12px rgba(0,0,0,.65)}}
.xp-hint.on{opacity:1;visibility:visible;transform:none}
.hud-on .xp-hint.on{opacity:0}
.xp-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--xp-dot);flex-shrink:0}
.xp-hint a{display:flex;align-items:center;gap:6px;min-height:32px;padding:4px 2px;font-weight:500;color:var(--ink,#0b1a15);text-decoration:none}
.xp-hint a:hover{color:var(--green-deep,#0e7a66)}
.xp-hint button{position:relative;display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:0;border-radius:50%;background:none;color:var(--muted,#5e6f68);cursor:pointer}
.xp-hint button::after{content:"";position:absolute;inset:-6px}
.xp-hint button:hover{color:var(--ink,#0b1a15);background:var(--bg-soft,#f3f9f6)}
.xp-hint svg{display:block}
@media(max-width:720px){.xp-hint{left:16px;right:16px;border-radius:14px}.xp-hint a{flex:1}}

@media(prefers-reduced-motion:reduce){
  .lsA.ready .lsA-dot,.mA.ready .mA-dot,.lsA-hud,.xp-hint,.mobile .mA a{transition:none}
  .lsA-dot i.leci,.mA-dot i.leci,.lsA-hud.tour b{animation:none}
}