/* ==========================================================================
   YMS24 — warstwa korekt.
   NIE nadpisuje vss.css ani vss-article.css. Wczytywana jako TRZECI arkusz,
   zawsze PO nich (kolejnosc ma znaczenie — patrz sekcja 5).
   Cofniecie calosci = usuniecie <link> ze stron (skrypt, tryb --revert)
   + usuniecie tego pliku.
   SoftwareStudio Group Sp. z o.o. | stan: 2026-09-05
   ========================================================================== */

/* --- 1. Odnosnik "Przejdz do tresci" ------------------------------------
   Markup siedzi w /inc/header.html (jedno miejsce, 191 stron).
   Cel: <main id="main" tabindex="-1"> — id normalizuje skrypt, bo 8 plikow
   mialo goly <main> (patrz ZMIANY.md, znalezisko 3a).
   z-index 900 > 600 (.site-header), zeby odnosnik nie wpadl pod belke.

   Pien ma juz swoj odnosnik (ss-fixes.css sekcja 03) i zgodnie z zasada
   "wygrywa pien" probowalem przejac jego ksztalt. Nie da sie, z dwoch
   niezaleznych powodow — oba zmierzone, nie domniemane:
     1. Pien opiera go na tokenach --tap i --fs-sm, ktorych w yms24/vss.css
        NIE MA. Przepisanie 1:1 daloby dwie martwe deklaracje.
     2. Pien obrysowuje odnosnik na var(--ss-orange) #ff6a13. Na bieli strony
        to 2,87:1 — ponizej progu 3:1 dla elementow nietekstowych.
        Wariant ponizej (bialy pierscien wpuszczony do srodka granatu,
        outline-offset -6px) daje 15,46:1.
   Czyli tutaj to pien powinien przejac rozwiazanie forka, nie odwrotnie —
   pozycja do dopisania w ZMIANY.md sekcja 3 (kolumna "do pnia"). */
.skip-link {
  position: absolute; top: 0; left: -9999px; z-index: 900;
  display: inline-block; padding: 12px 22px;
  background: var(--ss-navy); color: #fff;
  font-family: var(--f-head); font-size: .95rem; font-weight: 600; line-height: 1;
  border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
.skip-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
/* Cel odnosnika nie potrzebuje pierscienia — fokus zostal wlasnie przeniesiony,
   a obrys calego <main> jest wizualnym szumem, nie informacja. */
main:focus { outline: none; }

/* --- 2. Zaprojektowany stan skupienia ----------------------------------
   W obu arkuszach witryny nie ma dzis ani jednej reguly :focus / :focus-visible.
   Trzy warianty, bo tlo pod elementem interaktywnym jest trojakie.

   Pogodzenie z pniem (etap 2.0): 5 trafien ":focus-visible" w vss.css pnia
   to NIE jest system fokusu — to kolory najechania ikon spolecznosciowych
   w stopce (vss.css:306-310). System fokusu pnia stoi w ss-fixes.css,
   jego wlasnym trzecim arkuszu, i ma 11 trafien. Reguly bazowej nie ruszam:
   selektor ponizej jest znak w znak taki sam jak ss-fixes.css:37, podobnie
   main:focus{outline:none} wyzej. Rozni sie tylko token koloru, bo pien
   nazywa go --ss-orange-ink (#c2410c) - yms24 uzywa juz tej samej nazwy -
   ta sama rola, niemal ta sama barwa, dwie nazwy. To rozjazd do zalatwienia
   w pniu (jedna nazwa), nie do naprawy przez dopisanie drugiego tokenu tutaj.

   a) Jasne tlo (domyslne). Zmierzone: #c1451a na bieli = 5,08:1. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ss-orange-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/*  b) Granat i ciemne sekcje. Zmierzone: #ff9a5c na --ss-navy = 7,38:1,
       na --ss-ink = 8,88:1. #c1451a na granacie dawalby 3,04:1 — ledwo
       nad progiem, stad osobny wariant.

       Konwencja selektora przejeta z pnia (ss-fixes.css:42-48): goly
       potomny :focus-visible, bez zawezania do :where(a, button, [tabindex]).
       Lista kontekstow jest inna, bo inne sa sekcje: pien ma tu .ai-band,
       .roi-promo, .contact-card, .industry-card--cta i header; yms24 ma
       .art-hero i .art-cta, a naglowka NIE ma na liscie, bo .site-header
       jest tu bialy (vss.css:171), nie ciemny jak w pniu.

       Kolor zostaje tokenem. Pien wpisuje w tym miejscu #ffd9bd na sztywno,
       choc sam ma --ss-orange-300 o tej samej wartosci co yms24 (#ff9a5c).
       Token jest wlasciwszy niz liczba, a 7,38:1 to zapas ponad prog 3:1.
       Gdyby jednak wygrywac zgodnosc co do piksela — to jedna linia nizej. */
.hero :focus-visible,
.art-hero :focus-visible,
.art-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--ss-orange-300);
}

/*  c) Pomaranczowe wypelnienie (przyciski primary, DEMO, pas .trust).
       Zmierzone: bialy pierscien na #c1451a = 5,08:1. Granatowa obwodka
       z box-shadow, zeby czytal sie jednoczesnie na przycisku i na bialej
       stronie. Wariantu na pomaranczu pien nie ma — to jest ta pozycja,
       ktora dokladamy, a nie przejmujemy. */
.btn--primary:focus-visible,
.main-nav .btn--demo:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--ss-navy), var(--sh-orange);
}
.trust :where(a, button):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- 3. Tresc widoczna bez JavaScriptu ---------------------------------
   vss.css:389 ustawia .reveal{opacity:0}, a klase .in dokłada dopiero
   IntersectionObserver w vss.js. Skrypt ma gałąź awaryjna na brak
   IntersectionObserver, ale nie na brak dzialajacego JavaScriptu.

   Mechanizm: flaga .js na <html>, dopisywana przez /assets/js-flag.js
   wczytywany w <head> bez defer. Rozwiazanie przejete z pnia
   (ss-fixes.css sekcja 02) — te same nazwy, ta sama logika.

   Dlaczego nie @media (scripting: enabled), co bylo tu wczesniej:
   ta cecha mowi, czy skrypty SA MOZLIWE, a nie czy skrypt SIE WYKONAL.
   Przy blokerze skryptow (NoScript, restrykcyjne CSP) zglasza "enabled",
   a skrypt nie rusza — .reveal zostawalo zgaszone. Zmierzone przy
   Content-Security-Policy: script-src 'none': ukrytej tresci
   100% na /platforma-yms/, 92% na /galeria/, 87% na stronie glownej.
   Flaga jest sygnalem faktycznego wykonania, wiec kryje oba przypadki.

   Specyficznosc, dlatego trzy reguly a nie jedna:
     vss.css     .reveal          (0,1,0) opacity 0
     tutaj       .reveal          (0,1,0) opacity 1  — pozniejszy arkusz wygrywa
     tutaj       html.js .reveal  (0,2,1) opacity 0  — gasi tylko gdy skrypt dziala
     vss.css     .reveal.in       (0,2,0) opacity 1  — PRZEGRYWA z (0,2,1)
     tutaj       html.js .reveal.in (0,3,1) opacity 1 — dlatego musi byc
   transition i will-change zostaja z vss.css:389, nie powielamy ich.
   Blok prefers-reduced-motion w vss.css:392 uzywa !important, wiec bije
   wszystkie powyzsze — redukcja ruchu dziala bez zmian. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.in { opacity: 1; transform: none; }

/* --- 4. Redukcja ruchu obejmuje takze przewijanie -----------------------
   vss.css:122 ustawia html{scroll-behavior:smooth} globalnie, a blok
   prefers-reduced-motion (392) dotyczy tylko .reveal i animacji. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 5. Lightbox galerii — regulami przeniesione z vss.js ---------------
   vss.js tworzy <style> i wklada go do <head>. To jedyne miejsce na witrynie,
   ktore wymagaloby 'unsafe-inline' w style-src. Regulami sa tu 1:1, wiec
   po ich wlaczeniu usuniecie wstrzykiwania z vss.js jest zmiana bez skutku
   wizualnego (etap 4b).

   UWAGA na kolejnosc: vss-article.css:158 ustawia #lbImgWrap{aspect-ratio:16/10},
   a blok z vss.js nadpisuje to sztywnym 960x640. Zachowujemy stan faktyczny —
   dlatego ten arkusz MUSI byc wczytywany po vss-article.css. */
#lb { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(7,12,20,.94); align-items: center; justify-content: center; flex-direction: column; padding: 20px; }
#lb.open { display: flex; }
#lbClose { position: fixed; top: 14px; right: 18px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: 8px; padding: 2px 12px; }
#lbClose:focus-visible { outline: 3px solid var(--ss-orange-300); outline-offset: 2px; }
#lbInner { display: flex; flex-direction: column; align-items: center; max-width: 92vw; }
#lbImgWrap { width: 960px; height: 640px; max-width: 92vw; max-height: 78vh; background: #0b1421; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#lbImgWrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
#lbMeta { color: #fff; text-align: center; margin-top: 14px; max-width: 760px; }
#lbTitle { font-weight: 700; font-size: 1rem; }
#lbDesc { font-size: .85rem; opacity: .72; margin-top: 4px; line-height: 1.55; }

/* --- 6. Trybu ciemnego tu NIE MA ---------------------------------------
   Zgodnie z priorytetem 6: dopiero na koncu i tylko jesli obejmie oba arkusze
   naraz. Trafi do osobnego /assets/vss-dark.css, zeby dalo sie go wycofac
   niezaleznie od tego pliku. */


/* --- Quicksand nie ma kursywy ------------------------------------------------
   Krój nagłówkowy Quicksand nie zawiera odmiany pochyłej, więc <em> w nagłówku
   dostałby od przeglądarki pochylenie syntetyczne - rozjeżdża litery i psuje
   kerning. Zamiast pochylenia wyróżniamy akcentem kolorystycznym.
   Na ciemnym tle hero pomarańcz musi być jaśniejszy, żeby utrzymać kontrast. */
:is(h1, h2, h3, h4, h5, h6) :is(em, i) {
  font-style: normal;
  color: var(--ss-orange-text, #b04304);
}
.hero :is(h1, h2, h3) :is(em, i),
.art-hero :is(h1, h2, h3) :is(em, i) {
  color: var(--ss-orange-300, #ff9a5c);
}


/* --- Okruszki na stronach bez ciemnego hero ---------------------------------
   .art-crumbs sa bialym tekstem na granacie i na jasnej sekcji bylyby niewidoczne.
   Ten wariant jest odpowiednikiem dla /kontakt/, /demo/ i /cennik/.
   Kolejnosc pozycji musi odpowiadac BreadcrumbList w JSON-LD tej samej strony. */
.ss-breadcrumb { margin-bottom: var(--sp-5, 24px); }
.ss-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  padding: 0;
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  color: var(--ss-faint);
}
.ss-breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2, 8px); opacity: .6; }
.ss-breadcrumb a { color: var(--ss-faint); }
.ss-breadcrumb a:hover { color: var(--ss-orange-text); }
.ss-breadcrumb [aria-current="page"] { color: var(--ss-text); }


/* --- Hub /baza-wiedzy/ -------------------------------------------------------
   Lista klastrow: odnosnik + meta description strony jako zapowiedz. Opis jest
   <span> w tym samym <li>, zeby nie mnozyc elementow - siatka ustawia go pod
   linkiem. Wysokosc pozycji nie jest ustalana na sztywno, bo opisy maja od 90
   do 160 znakow i przy stalej wysokosci albo sie ucinaja, albo zostawiaja dziure. */
.bw-spis ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2, 8px);
  padding: 0;
  margin: var(--sp-5, 24px) 0 0;
}
.bw-spis a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ss-muted);
  background: var(--ss-white);
}
.bw-spis a:hover { border-color: var(--ss-orange-ink); color: var(--ss-orange-text); }

.bw-list { margin: var(--sp-5, 24px) 0 var(--sp-8, 72px); }
.bw-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4, 16px);
}
.bw-list li {
  border: 1px solid var(--ss-border);
  border-radius: var(--r);
  padding: var(--sp-4, 16px);
  background: var(--ss-white);
}
.bw-list li:hover { border-color: var(--ss-orange-ink); }
.bw-list a {
  display: block;
  font-weight: 600;
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ss-text);
}
.bw-list li:hover a { color: var(--ss-orange-text); }
.bw-list span {
  display: block;
  margin-top: var(--sp-2, 8px);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ss-muted);
}


/* --- Strona autora: lista publikacji ----------------------------------------
   Klastry obok siebie, w kazdym zwykla lista tytulow. Bez kart - to spis
   tekstow, a nie katalog produktow, wiec 154 obramowan byloby szumem. */
.autor-publikacje {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-6, 40px);
  margin: var(--sp-5, 24px) 0 var(--sp-8, 72px);
}
.autor-klaster h3 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-3, 12px);
  padding-bottom: var(--sp-2, 8px);
  border-bottom: 1px solid var(--ss-border);
}
.autor-klaster h3 span { color: var(--ss-faint); font-family: var(--f-mono); font-size: var(--fs-label); }
.autor-klaster ul { list-style: none; padding: 0; margin: 0; }
.autor-klaster li { margin-bottom: var(--sp-2, 8px); font-size: var(--fs-sm); line-height: 1.5; }
.autor-klaster a { color: var(--ss-muted); }
.autor-klaster a:hover { color: var(--ss-orange-text); }


/* --- Odnosnik kontekstowy pod przyciskami CTA --------------------------------
   Trzeci przycisk oslabilby dwa pozostale, wiec to zwykly wiersz tekstu.
   Blok .art-cta stoi na ciemnym tle, stad jasny kolor. */
.cta-wiecej {
  margin: var(--sp-4, 16px) 0 0;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.62);
}
.cta-wiecej a { color: var(--ss-orange-300); text-decoration: underline; text-underline-offset: 3px; }
.cta-wiecej a:hover { color: #fff; }


/* --- Strony decyzyjne z bazy wiedzy -------------------------------------------
   Uklad jednokolumnowy o ograniczonej szerokosci: to dlugie teksty czytane
   od gory do dolu, a nie katalogi. Miara szerokosci jest dlugosc wiersza,
   nie szerokosc ekranu - stad ch zamiast px. */
.container--waski { max-width: 76ch; }
.tekst { font-size: var(--fs-base); line-height: 1.72; color: var(--ss-text); }
.tekst h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  margin: var(--sp-7, 56px) 0 var(--sp-3, 12px);
  scroll-margin-top: 90px;          /* naglowek strony jest przyklejony */
}
.tekst p { margin: 0 0 var(--sp-4, 16px); }
.tekst a { color: var(--ss-orange-text); text-decoration: underline; text-underline-offset: 3px; }
.tekst a:hover { color: var(--ss-ink); }

/* zastrzezenie nad trescia - wyroznione, ale bez alarmowego czerwonego */
.tekst .uwaga {
  border-left: 3px solid var(--ss-border);
  background: var(--ss-bg-alt);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  font-size: var(--fs-sm);
  color: var(--ss-muted);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* tabela musi przewijac sie WEWNATRZ swojego pudelka - strona nigdy w poziomie */
.tabela-wrap { overflow-x: auto; margin: var(--sp-5, 24px) 0; }
.tabela-wrap table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: var(--fs-sm); }
.tabela-wrap caption { text-align: left; padding-bottom: var(--sp-2, 8px); color: var(--ss-faint); font-size: var(--fs-label); }
.tabela-wrap th, .tabela-wrap td { border: 1px solid var(--ss-border); padding: var(--sp-3, 12px); text-align: left; vertical-align: top; }
.tabela-wrap thead th { background: var(--ss-bg-alt); font-family: var(--f-head); }
.tabela-wrap tbody th, .tabela-wrap tbody td:first-child { font-weight: 600; }

/* .def-box i .art-byline sa w vss-article.css zawezone do .art-content, a strony
   decyzyjne nie wczytuja tego arkusza. Tu wariant samodzielny o tym samym wygladzie. */
.tekst-strona .def-box {
  position: relative;
  border: 1px solid rgba(255,106,19,.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,106,19,.07), rgba(255,106,19,0) 60%), var(--ss-bg-alt);
  padding: 1.35rem 1.5rem;
  margin: 0 0 1.8rem;
  overflow: hidden;
}
.tekst-strona .def-box::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #ff8a3d, #ff6a13);
}
.tekst-strona .def-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 var(--fs-label)/1 var(--f-head);
  letter-spacing: .1em; text-transform: uppercase;
  color: #c64b00; background: rgba(255,106,19,.13);
  border-radius: 999px; padding: .42rem .85rem; margin-bottom: .7rem;
}
.tekst-strona .def-box p { margin: 0; font-size: var(--fs-lead); line-height: 1.62; color: var(--ss-text); }
.tekst-strona .art-byline {
  font-size: var(--fs-sm); color: var(--ss-muted);
  margin: var(--sp-6, 40px) 0 0; padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--ss-border);
}
.tekst-strona .art-byline strong { color: var(--ss-navy-600); }


/* --- Klasy zamiast atrybutow style= -------------------------------------------
   Ostatnie 31 atrybutow style= trzymalo w CSP wyjatek style-src-attr
   'unsafe-inline'. Po przeniesieniu ich tutaj wyjatek zniknal z naglowka.
   Nazwy opisuja zastosowanie, nie wartosc. */
.wide-section--zwarta { padding-top: 48px; }   /* sekcja zaczynajaca sie od okruszkow */
.art-cta--blok { display: block; }             /* ramka .art-cta uzyta jako pojemnik trescowy */
.sekcja-404 { padding-top: 80px; padding-bottom: 80px; text-align: center; }

.akapit-srodek { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.blok-srodek { max-width: 820px; margin-left: auto; margin-right: auto; }
.srodek-gora { margin: 18px auto 0; }
.srodek-tekst { text-align: center; }
.product-link--srodek { justify-content: center; }
.podpis-drobny {
  margin-top: 12px;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--ss-faint);
}

.odstep-gora { margin-top: var(--sp-4, 16px); }
.odstep-gora-maly { margin-top: var(--sp-2, 8px); }
.odstep-gora-duzy { margin-top: var(--sp-5, 24px); }
.odstep-dol-maly { margin-bottom: var(--sp-2, 8px); }
.odstep-dol-duzy { margin-bottom: var(--sp-6, 32px); }

/* kursor dla powiekszanych zrzutow - byl ustawiany z vss.js, a to nalezy do arkusza */
.shot.gallery-item { cursor: zoom-in; }