/* ============================================================
   kompas-mapa.css - mapa gotowosci na AI (os X ludzie, os Y system)

   Wspolna dla kompas.html (hero, zakladki, wynik) i strony glownej
   (zaproszenie do diagnozy). Wydzielona 2026-10-07 z kompas.css bez zmian
   w regulach; ladowana PRZED kompas.css, wiec kaskada na Kompasie jest ta sama.

   Kolor: skala semantyczna (czerwien, bursztyn, zielen) tylko dla wartosci
   pomiaru i strefy ryzyka, nigdy dekoracyjnie (regula 35).
   ============================================================ */
:root{
  --grid-line:rgba(255,255,255,.04);
  --scale-red:#e5484d; --scale-amber:#f5a623; --scale-green:#3ddc7a;
  --risk-tint:rgba(229,72,77,.07); --risk-line:rgba(229,72,77,.45);
  --kfield:rgba(255,255,255,.02);
}
[data-theme="light"]{
  --grid-line:rgba(0,0,0,.05);
  --kfield:rgba(0,0,0,.02);
  /* skala jest tez kolorem tekstu (etykiety na mapie, wyniki): na jasnym tle
     ciemniejsze odcienie, zeby trzymac kontrast min. 4.5:1 */
  --scale-red:#c42b30; --scale-amber:#9a5b00; --scale-green:#14743a;
  --risk-tint:rgba(196,43,48,.06); --risk-line:rgba(196,43,48,.4);
}

/* ============================================================
   MAPA - jeden rysunek uzywany w hero, w zakladkach i w wyniku
   ============================================================ */
.kmapf{position:relative;aspect-ratio:1;border:1px solid var(--ink-80);border-radius:var(--r);
  background-color:var(--kfield);
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:25% 25%;}
.kmapf::before,.kmapf::after{content:"";position:absolute;pointer-events:none;}
.kmapf::before{left:50%;top:0;bottom:0;border-left:1px dashed var(--ink-70);}
.kmapf::after{top:50%;left:0;right:0;border-top:1px dashed var(--ink-70);}

.kmapf-risk{position:absolute;right:0;bottom:0;width:38%;height:34%;
  background:var(--risk-tint);border-left:1px dashed var(--risk-line);border-top:1px dashed var(--risk-line);
  border-bottom-right-radius:var(--r);}
.kmapf-risk span{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.1em;color:var(--scale-red);}

.kp{position:absolute;left:var(--x);bottom:var(--y);width:0;height:0;z-index:1;}
.kp i{position:absolute;left:0;top:0;width:var(--d,14px);height:var(--d,14px);transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid var(--grey-50);background:var(--black);
  transition:background 240ms var(--ease),border-color 240ms var(--ease),opacity 240ms var(--ease);}
.kp b{position:absolute;top:0;left:calc(var(--d,14px) / 2 + 8px);transform:translateY(-50%);
  font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:400;letter-spacing:.04em;
  color:var(--grey-30);white-space:nowrap;}
.kp.is-flip b{left:auto;right:calc(var(--d,14px) / 2 + 8px);}
.kp.is-risk i{border-color:var(--scale-red);}
.kp.is-risk b{color:var(--scale-red);}
.kp.is-good i{border-color:var(--scale-green);}
.kp.is-good b{color:var(--scale-green);}

/* Wersja mini: bez podpisow, wyrozniony tylko jeden uklad */
.kmapf.is-mini .kp b{display:none;}
.kmapf.is-mini .kp i{width:calc(var(--d,14px) * .75);height:calc(var(--d,14px) * .75);}
.kmapf.is-mini .kp.is-faint i{opacity:.35;}
.kmapf.is-mini .kp.is-yours i{background:var(--white);border-color:var(--white);opacity:1;}
.kmapf.is-mini .kp.is-yours.is-risk i{background:var(--scale-red);border-color:var(--scale-red);}
.kmapf.is-mini .kp.is-yours.is-good i{background:var(--scale-green);border-color:var(--scale-green);}

/* Znacznik "Wy?" - w hero wedruje po mapie, w wyniku stoi w miejscu */
/* --d ustawione jawnie: psai.js nadaje blokom .reveal zmienna --d (opoznienie wejscia),
   ktora inaczej dziedziczylaby sie tu jako srednica i znacznik mial 0 px. */
.kp-you{--d:18px;position:absolute;left:28%;bottom:26%;width:0;height:0;z-index:2;
  animation:kroam 16s var(--ease) infinite;}
.kp-you i{position:absolute;left:0;top:0;width:var(--d,18px);height:var(--d,18px);transform:translate(-50%,-50%);
  border-radius:50%;background:var(--white);box-shadow:0 0 0 6px var(--ink-80);}
.kp-you i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--white);
  animation:livepulse 2.2s var(--ease) infinite;}
.kp-you b{position:absolute;bottom:calc(var(--d,18px) / 2 + 10px);left:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;color:var(--white);white-space:nowrap;}
.kp-you.is-static{left:var(--x);bottom:var(--y);animation:none;}
.kmapf.is-mini .kp-you b{font-size:var(--fs-micro);}
@keyframes kroam{
  0%,14%{left:28%;bottom:26%;}
  25%,39%{left:62%;bottom:46%;}
  50%,64%{left:72%;bottom:22%;}
  75%,89%{left:36%;bottom:72%;}
  100%{left:28%;bottom:26%;}
}

/* Podpisy osi pod i obok pola */
.kmap-wrap{position:relative;padding:0 0 38px 38px;}
.kmap-ax{position:absolute;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;
  letter-spacing:.08em;color:var(--white);}
.kmap-ax em{font-style:normal;color:var(--grey-50);text-transform:none;letter-spacing:.02em;margin:0 6px;}
.kmap-ax-x{left:38px;bottom:8px;}
.kmap-ax-y{left:6px;bottom:38px;writing-mode:vertical-rl;transform:rotate(180deg);}

/* Ograniczony ruch: znacznik "Wy?" stoi na srodku mapy */
@media(prefers-reduced-motion:reduce){
  .kp-you{animation:none;left:50%;bottom:50%;}
  .kp-you i::after{animation:none;}
}