/* public/css/sceny/polaczenia.css — scena „Treść spraw nie wychodzi na zewnątrz” (/bezpieczenstwo, sekcja #instalacja;
   silnik public/js/sceny.js, spec §7.8). HTML+CSS = stan końcowy sceny 5: rama instalacji (wariant „U Was”) z czterema kaflami
   i kopią zapasową, cztery połączenia wychodzące z TLS, trzy kierunki bez połączenia (przekreślone, z zaporą), lista połączeń.
   Elementy przejściowe (pakiety na liniach, fale odbicia, blaski węzłów, wariant ramy „Wynajęty serwer w UE”) są tu ukryte —
   pokazuje je dopiero oś (autoAlpha). Dwa układy: plac 4/3 (domyślnie) i 4/5 do 720 px; linie w dwóch SVG o viewBox w jednostkach
   placu (1 j.u. = 1cqi), więc współrzędne w HTML i CSS są te same. Rozmiary w cqi, czytelność max(…px, …cqi). */

/* Zjazd mapy w scenach 1–4 (yPercent osi): mapa stoi pośrodku placu, w scenie 5 wjeżdża do góry i robi miejsce liście. */
.sc-polaczenia { --sc-polaczenia-zjazd: 17.9; }
.sc-polaczenia-mapa { inset: 0; z-index: 1; }
.sc-polaczenia-mapa > * { position: absolute; }

/* ——— linie (SVG) ——— */
.sc-polaczenia-svg { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.sc-polaczenia-svg-m { display: none; }
.sc-polaczenia-obrys {
  fill: none; stroke: var(--accent); stroke-width: 0.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px var(--n-blask));
}
.sc-polaczenia-linia {
  fill: none; stroke: var(--n-ok); stroke-width: 0.32; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.55));
}
.sc-polaczenia-grot { fill: none; stroke: var(--n-ok); stroke-width: 0.32; stroke-linecap: round; stroke-linejoin: round; }
/* pakiet = krótka kreska wzoru (0,12 długości ścieżki) przesuwana stroke-dashoffset; poza przelotem stoi przed początkiem linii */
.sc-polaczenia-pakiet {
  fill: none; stroke: #dcffe8; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.12 2; stroke-dashoffset: 0.16;
  filter: drop-shadow(0 0 3px var(--n-ok)); visibility: hidden; opacity: 0;
}
.sc-polaczenia-proba { fill: none; stroke: var(--n-uwaga); stroke-width: 0.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.45; }

/* ——— rama instalacji, etykieta z wariantami (jeden element: warianty w tej samej komórce siatki) ——— */
.sc-polaczenia-rama {
  left: 27cqi; top: 4cqi; width: 37cqi; height: 42cqi; z-index: 0; border-radius: 2.4cqi;
  background: radial-gradient(80% 70% at 50% 40%, rgba(255, 154, 60, 0.09), rgba(255, 255, 255, 0.02) 70%);
  box-shadow: 0 0 40px rgba(244, 122, 32, 0.22), inset 0 0 30px rgba(244, 122, 32, 0.12);
}
.sc-polaczenia-rama-etykieta { left: 29.5cqi; top: 6cqi; z-index: 3; display: grid; transform-origin: left center; }
.sc-polaczenia-wariant { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5cqi; }
.sc-polaczenia-wariant b {
  white-space: nowrap; font-family: var(--fm); font-weight: 500; font-size: max(10px, 1.4cqi); letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.2; color: var(--n-tlo); background: var(--accent); border-radius: 1.2cqi; padding: 0.5cqi 1.2cqi; box-shadow: 0 0 18px var(--n-blask);
}
.sc-polaczenia-wariant small { white-space: nowrap; font-size: max(12px, 1.55cqi); line-height: 1.2; color: var(--n-szary); }
.sc-polaczenia-wariant-ue { visibility: hidden; opacity: 0; }

.sc-polaczenia-kafel {
  z-index: 2; width: 16cqi; height: 10.25cqi; display: flex; flex-direction: column; justify-content: center; gap: 0.5cqi;
  padding: 0 1.4cqi; border-radius: 1.6cqi; border: 1px solid var(--n-brzeg);
  background: linear-gradient(180deg, var(--n-szklo2), var(--n-szklo)); box-shadow: 0 1.2cqi 3cqi rgba(0, 0, 0, 0.3);
}
.sc-polaczenia-kafel b { font-weight: 600; font-size: max(12px, 1.75cqi); line-height: 1.15; color: #fff; }
.sc-polaczenia-kafel span { font-family: var(--fm); font-size: max(10px, 1.25cqi); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--n-szary); }
.sc-polaczenia-k1, .sc-polaczenia-k3 { left: 29cqi; }
.sc-polaczenia-k2, .sc-polaczenia-k4 { left: 46cqi; }
.sc-polaczenia-k1, .sc-polaczenia-k2 { top: 13.5cqi; }
.sc-polaczenia-k3, .sc-polaczenia-k4 { top: 24.75cqi; }
.sc-polaczenia-k3 { border-color: rgba(255, 154, 60, 0.45); }

.sc-polaczenia-kopia {
  left: 29cqi; top: 36cqi; width: 33cqi; height: 8.25cqi; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0.6cqi 1.2cqi; padding: 0 1.4cqi;
  border-radius: 1.6cqi; border: 1px solid rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.05);
}
.sc-polaczenia-kopia b { font-weight: 600; font-size: max(12px, 1.6cqi); line-height: 1.15; color: var(--n-tekst); }
.sc-polaczenia-kopia-ikona {
  flex: none; width: max(9px, 1.4cqi); aspect-ratio: 1 / 1.2; border-radius: 40% / 25%;
  border: 1.5px solid var(--n-ok); box-shadow: inset 0 -0.35cqi 0 rgba(74, 222, 128, 0.45);
}
.sc-polaczenia-pasek {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left center;
  background: var(--n-ok); box-shadow: 0 0 6px var(--n-ok);
}

/* ——— połączenia wychodzące ——— */
.sc-polaczenia-naglowek {
  top: 2.2cqi; z-index: 2; white-space: nowrap; font-family: var(--fm); font-weight: 500; font-size: max(10px, 1.2cqi); line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-szary);
}
.sc-polaczenia-naglowek-zewn { left: 2.5cqi; top: 4.2cqi; }
.sc-polaczenia-naglowek-wych { left: 79cqi; }
.sc-polaczenia-wezel {
  left: 79cqi; width: 18.5cqi; height: 8.5cqi; z-index: 2; display: flex; align-items: center; padding: 0 1.4cqi;
  border-radius: 1.6cqi; border: 1px solid rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.07);
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.3);
}
.sc-polaczenia-nazwa { position: relative; font-weight: 600; font-size: max(12px, 1.7cqi); line-height: 1.2; color: var(--n-tekst); }
.sc-polaczenia-nazwa small { font-weight: 400; font-size: 1em; color: var(--n-szary); }
.sc-polaczenia-p1 { top: 6cqi; }
.sc-polaczenia-p2 { top: 16.5cqi; }
.sc-polaczenia-p3 { top: 27cqi; }
.sc-polaczenia-p4 { top: 37.5cqi; }
.sc-polaczenia-blask {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; visibility: hidden; opacity: 0;
  box-shadow: 0 0 0 1.5px var(--n-ok), 0 0 18px rgba(74, 222, 128, 0.6), inset 0 0 12px rgba(74, 222, 128, 0.25);
}
/* zewnętrzny element trzyma położenie (translate), oś animuje tylko chip w środku */
.sc-polaczenia-tls { left: 71.5cqi; z-index: 3; translate: -50% 0; }
.sc-polaczenia-tls .sc-chip { display: block; background: var(--n-tlo2); }
.sc-polaczenia .sc-chip { line-height: 1.2; }
.sc-polaczenia-t1 { top: 6.4cqi; }
.sc-polaczenia-t2 { top: 16.9cqi; }
.sc-polaczenia-t3 { top: 27.4cqi; }
.sc-polaczenia-t4 { top: 37.9cqi; }

/* ——— kierunki bez połączenia ——— */
.sc-polaczenia-zewn {
  left: 2.5cqi; width: 15.5cqi; height: 10cqi; z-index: 2; display: flex; align-items: center; padding: 0 1.2cqi;
  border-radius: 1.6cqi; border: 1px dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025);
}
.sc-polaczenia-zewn .sc-polaczenia-nazwa { font-weight: 400; font-size: max(12px, 1.6cqi); color: var(--n-szary); }
.sc-polaczenia-zewn .sc-polaczenia-nazwa small { color: inherit; }
.sc-polaczenia-z1 { top: 7cqi; }
.sc-polaczenia-z2 { top: 20cqi; }
.sc-polaczenia-z3 { top: 33cqi; }
/* przekreślenie per wers etykiety (etykieta łamie się w 2–3 wiersze): każdy wers ma własną kreskę */
.sc-polaczenia-wers { position: relative; display: inline-block; white-space: nowrap; }
.sc-polaczenia-skreslenie {
  position: absolute; left: -4%; right: -4%; top: calc(55% - 1px); height: 2px; border-radius: 1px; transform-origin: left center;
  background: var(--n-uwaga); box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); rotate: -4deg;
}
.sc-polaczenia-zapora, .sc-polaczenia-fala {
  left: 21.6cqi; width: max(14px, 2.8cqi); aspect-ratio: 1; margin: calc(max(14px, 2.8cqi) / -2) 0 0 calc(max(14px, 2.8cqi) / -2);
  border-radius: 50%; z-index: 3;
}
.sc-polaczenia-zapora { border: 1.5px solid var(--n-uwaga); background: var(--n-tlo2); box-shadow: 0 0 10px rgba(251, 191, 36, 0.45); }
.sc-polaczenia-zapora::before, .sc-polaczenia-zapora::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: calc(50% - 1px); height: 2px; border-radius: 1px; background: var(--n-uwaga); rotate: 45deg;
}
.sc-polaczenia-zapora::after { rotate: -45deg; }
.sc-polaczenia-fala { border: 2px solid var(--n-uwaga); visibility: hidden; opacity: 0; pointer-events: none; }
.sc-polaczenia-b1 { top: 12cqi; }
.sc-polaczenia-b2 { top: 25cqi; }
.sc-polaczenia-b3 { top: 38cqi; }

/* ——— lista połączeń wychodzących ——— */
.sc-polaczenia-tabela {
  left: 2.5cqi; top: 49cqi; width: 95cqi; height: 24cqi; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  padding: 1.2cqi 2.2cqi; border-radius: 2cqi; border: 1px solid var(--n-brzeg);
  background: linear-gradient(180deg, var(--n-szklo2), var(--n-szklo)); box-shadow: 0 1.6cqi 4cqi rgba(0, 0, 0, 0.35);
}
.sc-polaczenia-tabela-tytul {
  font-family: var(--fm); font-weight: 500; font-size: max(10px, 1.25cqi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-l);
  padding-bottom: 0.5cqi;
}
.sc-polaczenia-wiersz {
  display: grid; grid-template-columns: 34fr 40fr 26fr; align-items: center; column-gap: 2cqi; padding: 0.45cqi 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: max(12px, 1.6cqi); line-height: 1.2; color: var(--n-tekst);
}
.sc-polaczenia-wiersz b { font-weight: 600; white-space: nowrap; }
.sc-polaczenia-glowka { border-top: 0; font-family: var(--fm); font-size: max(10px, 1.15cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-szary); }
.sc-polaczenia-kierunek { white-space: nowrap; color: var(--n-szary); }
.sc-polaczenia-kierunek i { font-style: normal; color: var(--n-ok); }
.sc-polaczenia-szyfr { display: flex; }
.sc-polaczenia-szyfr .sc-chip { padding: 0.25cqi 1cqi; }

/* ——— telefon (plac 4/5): kierunki bez połączenia u góry, rama, lista węzłów pod ramą z pniem po lewej, lista połączeń na dole ——— */
@media (max-width: 720px) {
  .sc-polaczenia { --sc-polaczenia-zjazd: 12.8; }
  .sc-polaczenia-svg-d { display: none; }
  .sc-polaczenia-svg-m { display: block; }
  .sc-polaczenia-obrys, .sc-polaczenia-proba { stroke-width: 0.5; }
  .sc-polaczenia-linia, .sc-polaczenia-grot { stroke-width: 0.55; }
  .sc-polaczenia-pakiet { stroke-width: 1.6; stroke-dasharray: 0.07 2; stroke-dashoffset: 0.16; }

  .sc-polaczenia-rama { left: 4cqi; top: 20cqi; width: 92cqi; height: 40.5cqi; border-radius: 3.2cqi; }
  .sc-polaczenia-rama-etykieta { left: 7cqi; top: 21.5cqi; }
  .sc-polaczenia-wariant { gap: 0.5cqi; }
  .sc-polaczenia-wariant b { font-size: max(10px, 2.6cqi); border-radius: 2cqi; padding: 0.6cqi 2.2cqi; }
  .sc-polaczenia-wariant small { font-size: max(12px, 3.3cqi); }

  .sc-polaczenia-kafel { width: 42.5cqi; height: 9.25cqi; gap: 0.4cqi; padding: 0 2.6cqi; border-radius: 2.6cqi; }
  .sc-polaczenia-kafel b { font-size: max(12px, 3.5cqi); }
  .sc-polaczenia-kafel span { font-size: max(10px, 2.5cqi); }
  .sc-polaczenia-k1, .sc-polaczenia-k3 { left: 7cqi; }
  .sc-polaczenia-k2, .sc-polaczenia-k4 { left: 50.5cqi; }
  .sc-polaczenia-k1, .sc-polaczenia-k2 { top: 32.2cqi; }
  .sc-polaczenia-k3, .sc-polaczenia-k4 { top: 42.2cqi; }
  .sc-polaczenia-kopia { left: 7cqi; top: 52.3cqi; width: 86cqi; height: 6cqi; flex-wrap: nowrap; gap: 0 2.4cqi; padding: 0 2.6cqi; border-radius: 2.4cqi; }
  .sc-polaczenia-kopia b { font-size: max(12px, 3.4cqi); }
  .sc-polaczenia-kopia-ikona { width: max(9px, 2.6cqi); }

  .sc-polaczenia-naglowek { display: none; }
  .sc-polaczenia-wezel { left: 14cqi; width: 82cqi; height: 6.5cqi; padding: 0 2.6cqi; border-radius: 2.2cqi; }
  .sc-polaczenia-nazwa { font-size: max(12px, 3.4cqi); }
  .sc-polaczenia-p1, .sc-polaczenia-t1 { top: 62.5cqi; }
  .sc-polaczenia-p2, .sc-polaczenia-t2 { top: 69.8cqi; }
  .sc-polaczenia-p3, .sc-polaczenia-t3 { top: 77.1cqi; }
  .sc-polaczenia-p4, .sc-polaczenia-t4 { top: 84.4cqi; }
  /* TLS w prawej części węzła: ta sama wysokość co węzeł, chip wyśrodkowany */
  .sc-polaczenia-tls { left: auto; right: 6.5cqi; height: 6.5cqi; display: flex; align-items: center; translate: none; }

  .sc-polaczenia-zewn { top: 2cqi; width: 30.5cqi; height: 9.6cqi; padding: 0 1.4cqi; border-radius: 2.4cqi; }
  .sc-polaczenia-zewn .sc-polaczenia-nazwa { font-size: max(12px, 3.2cqi); }
  /* środkowy węzeł szerszy: „Publiczne usługi AI w chmurze” w dwóch wierszach od 360 px */
  .sc-polaczenia-z1 { left: 1.5cqi; }
  .sc-polaczenia-z2 { left: 33cqi; width: 34cqi; }
  .sc-polaczenia-z3 { left: 68cqi; }
  .sc-polaczenia-zapora, .sc-polaczenia-fala { top: 14.2cqi; width: max(14px, 4.4cqi); margin: calc(max(14px, 4.4cqi) / -2) 0 0 calc(max(14px, 4.4cqi) / -2); }
  .sc-polaczenia-b1 { left: 16.75cqi; }
  .sc-polaczenia-b2 { left: 50cqi; }
  .sc-polaczenia-b3 { left: 83.25cqi; }

  .sc-polaczenia-tabela { left: 4cqi; top: 92.8cqi; width: 92cqi; height: 31cqi; padding: 1cqi 3cqi; border-radius: 3cqi; }
  .sc-polaczenia-tabela-tytul { display: none; }
  .sc-polaczenia-wiersz { grid-template-columns: 40fr 38fr 22fr; column-gap: 2cqi; padding: 0.5cqi 0; font-size: max(12px, 3.3cqi); }
  .sc-polaczenia-glowka { font-size: max(10px, 2.4cqi); }
}