/* ============================================================================
   OSTOJA — MOSTEK STYLÓW DLA PANELU GRAFICZNEGO (Studio slajdów)
   ----------------------------------------------------------------------------
   Ten arkusz doczepia się PO wewnętrznym <style> pliku index.html i przebija go
   KOLEJNOŚCIĄ, nie siłą. Ta sama specyficzność + późniejsza pozycja = wygrywa.
   Dlatego `!important` nie pada tu ani razu.

   ┌──────────────────────────────────────────────────────────────────────────┐
   │ RZECZ NAJWAŻNIEJSZA: TO JEST NARZĘDZIE DO ROBIENIA GRAFIK.               │
   │ Klient eksportuje z niego PNG/PDF dla SWOJEJ marki. Gdyby barwy Ostoi    │
   │ weszły do slajdu, wyeksportowałby grafikę w NASZYCH kolorach.            │
   │ Dlatego cały ten arkusz ma jedną żelazną granicę — opisaną w bloku 01.   │
   └──────────────────────────────────────────────────────────────────────────┘

   DLACZEGO GRANICA W OGÓLE JEST POTRZEBNA (to nie teoria — tak było w kodzie)
   ---------------------------------------------------------------------------
   Oryginalny index.html ma DWA bloki `:root` w jednym arkuszu:
     · linie 20–21  — zmienne SLAJDU  (--black --off --gold --gold-d --gray
                                       --serif --sans)  ← wygląd eksportu
     · linie 105–131 — zmienne INTERFEJSU (--bg --panel --ink --line …)
   Nazwa `--gold` siedzi w obu. Do tego funkcja applyBrand() w JS wpisuje
   `--gold` INLINE na <html>, więc żadna reguła `:root` z tego pliku i tak by
   jej nie przebiła. Gdyby więc Ostoia przemalowała `--gold` „po prostu”,
   złoto zamieniłoby się w fiolet nie tylko na przyciskach, ale i w nadtytule,
   kursywie tytułu, kresce i numerze slajdu — czyli W EKSPORCIE.

   ROZWIĄZANIE: ŚLUZA NA `.slide` (blok 01)
   ---------------------------------------------------------------------------
   Zamiast wyliczać, gdzie wolno malować, odwracam pytanie i stawiam zaporę
   dokładnie na granicy obszaru roboczego. Każdy slajd — na scenie, w pasku
   miniatur, w kokpicie i w niewidocznym kontenerze eksportu — ma klasę
   `.slide` (sprawdzone: buildSlideEl() i captureSlide() nadają ją zawsze).
   Wystarczy więc, że `.slide` sam sobie deklaruje swoje siedem zmiennych.
   Deklaracja na elemencie bije wartość odziedziczoną z <html> — także tę
   wpisaną inline. Jedna reguła zamyka WSZYSTKIE drogi przecieku naraz.

   Kolor akcentu marki (`--gold` w slajdzie) dalej ma iść z ustawień klienta,
   bo to jest funkcja produktu (white-label). Dlatego applyBrand() dostał jedną
   dodatkową linię: zapisuje ten sam kolor pod nazwą `--marka-akcent`, po którą
   śluza sięga. Powłoka używa fioletu Ostoi, slajd — koloru klienta.

   TRZY DECYZJE, KTÓRE TRZEBA ZNAĆ
   ---------------------------------------------------------------------------
   1. AKCENT POWŁOKI JEST FIOLETOWY i to nie łamie reguły „fiolet = Puchacz”.
      Cała skala szarości Ostoi jest podfioletowana (atrament #1A1620), więc
      fiolet jest w tej marce barwą NEUTRALNĄ, nie sygnałową. Ta sama decyzja
      co w mostku panelu SEO — oba panele mają wyglądać na rodzeństwo.

   2. KOLOR PROWADNIC (--blue) ZOSTAJE BEZ ZMIAN. To jedyny kolor w tym
      narzędziu, który musi być czytelny NA CUDZEJ GRAFICE — nad zdjęciem
      drewna, nad białym tłem, nad czymkolwiek. Ostoia nie ma neutralnej barwy
      sygnałowej; przestawienie prowadnic na bursztyn/zieleń/fiolet kazałoby je
      czytać jako sygnał modułu (Ryś/Żubr/Puchacz), a to jest zwykła mechanika
      edytora. Świadomie zostawiam #5aa9c7.

   3. KRÓJ INTERFEJSU idzie na systemowy stos Ostoi, ale `.slide` dostaje
      z powrotem PRZYPIĘTY 'Inter' — dokładnie to, co slajdy dziedziczą dziś
      z <body>. Kilka klas slajdu (m.in. `.list li`) nie ma własnego
      font-family i bez tego przypięcia zmieniłyby krój w eksporcie.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   01 · ŚLUZA — GRANICA OBSZARU ROBOCZEGO
   Ta jedna reguła jest powodem, dla którego reszta arkusza może być odważna.
   Trzyma się jej cały układ: NIC poniżej nie deklaruje tych siedmiu nazw
   na :root, na .app ani na żadnym przodku slajdu.
   Kolejność ma znaczenie — musi stać PRZED blokami 02/03, żeby czytający
   plik od góry najpierw zobaczył zaporę, a potem malowanie.
   ------------------------------------------------------------------------- */
.slide{
  /* akcent: z ustawień marki klienta (applyBrand → --marka-akcent),
     awaryjnie oryginalne złoto VIAM, gdyby JS nie zdążył */
  --gold:   var(--marka-akcent, #b89a6a);
  --gold-d: #9a7e52;
  /* pozostałe sześć — wartości 1:1 z oryginału, przypięte na wypadek, gdyby
     ktoś kiedyś dopisał je na :root nie wiedząc, że karmią eksport */
  --black:  #080808;
  --off:    #f7f6f3;
  --gray:   #454545;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  /* krój dziedziczony: dziś slajd bierze go z <body>; blok 05 zmienia powłokę na
     systemowy stos Ostoi, więc slajd musi dostać swój z powrotem */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* KOLOR DZIEDZICZONY — znaleziony dopiero przy porównaniu „przed / po”.
     Slajd nie deklaruje własnego `color`, więc elementy bez własnego koloru
     (obcy kod z importu, luźny <div>) brały go z <body>, czyli ze zmiennej
     interfejsu --ink. To była otwarta furtka: barwa POWŁOKI schodziła
     dziedziczeniem do eksportu. Przypinam wartość, którą panel dawał do tej
     pory w motywie ciemnym (#ececed).
     Przy okazji znika starsza usterka oryginału: w jasnym motywie interfejsu
     ten sam tekst wychodził prawie czarny, bo --ink zmieniało się na #1c2027. */
  color: #ececed;
}


/* ---------------------------------------------------------------------------
   02 · ZMIENNE POWŁOKI — TRYB CIEMNY (domyślny dla tego narzędzia)
   Ciemna powłoka nie jest wyłomem w „baza jest jasna”. W edytorze grafiki
   otoczenie płótna ma być ciemne i mało nasycone, bo inaczej oko źle ocenia
   kolory samej grafiki. Używam skali ciemnej Ostoi (--ciemny-0..7), która jest
   podfioletowanym atramentem, a nie czernią.
   Panel ustawia motyw atrybutem data-theme ZAWSZE (applyUITheme przy starcie),
   więc nie ma tu duplikatu na prefers-color-scheme.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  /* --- powierzchnie: skala ciemna Ostoi, poziomy 0 / 2 / 3 / 4 --- */
  --bg:      #0B0910;
  --panel:   #14111B;
  --panel2:  #191520;
  --panel3:  #1E1926;

  /* --- linie: biel na alfie, nie przypadkowa szarość #2a2a2e --- */
  --line:    rgba(255,255,255,.08);
  --line2:   rgba(255,255,255,.16);

  /* --- tekst: skala tekstowa Ostoi na ciemnym --- */
  --ink:     #F2F0F6;
  --ink2:    #B9B3C6;
  /* --ink3 podniesiony z #6c6c74. Drobny druk w tym panelu (podpowiedzi pod
     przełącznikami, etykiety sekcji inspektora) jest CZYTANY, nie oglądany —
     ta sama poprawka co w mostku panelu SEO. */
  --ink3:    #A79FB7;

  /* --- akcent powłoki: fiolet Ostoi + wersja rozjaśniona do tekstu --- */
  --o-akcent:   #AC90F7;
  --o-akcent-2: #B9A2F8;
  --o-akcent-tekst-na-akcencie: #14111B;   /* napis NA fiolecie: ciemny */
  --o-akcent-mgla:  rgba(172,144,247,.14); /* tło stanu „włączone” */
  --o-akcent-linia: rgba(172,144,247,.34); /* ramka stanu „włączone” */

  /* --- barwy sygnałowe: alarm i Żubr, tak jak w panelu SEO --- */
  --danger:  #FF6B78;
  --ok:      #4FDB8C;

  /* --- tła dużych płaszczyzn --- */
  --stagebg:  radial-gradient(1200px 700px at 50% -10%, #191520, #0B0910 60%);
  --toolbar1: #14111B;
  --toolbar2: #100D16;
  --navbg:    #0B0910;
  --pop:      #14111B;
  --homebg:   radial-gradient(1400px 900px at 78% -12%, #1E1926, #0B0910 62%);
  --swborder: rgba(255,255,255,.14);
  --scrim:    rgba(11,9,16,.80);

  /* Czerń w cieniu jest na ciemnym tle dozwolona — to jedyne takie miejsce. */
  --shadow: 0 12px 28px rgba(0,0,0,.46), 0 4px 8px rgba(0,0,0,.32);
}

/* ---------------------------------------------------------------------------
   03 · ZMIENNE POWŁOKI — TRYB JASNY
   Tu wracamy do bazy Ostoi: skala jasna, linie z atramentu na alfie,
   akcent w wersji przyciemnionej (#5836C4, 7,7:1 na bieli).
   ------------------------------------------------------------------------- */
:root[data-theme="light"]{
  --bg:      #F5F3F8;
  --panel:   #FFFFFF;
  --panel2:  #F8F6FB;
  --panel3:  #F0EDF5;

  --line:    rgba(26,22,32,.10);
  --line2:   rgba(26,22,32,.18);

  --ink:     #1A1620;
  --ink2:    #4C4657;
  --ink3:    #5F5869;

  --o-akcent:   #5836C4;
  --o-akcent-2: #452A9C;
  --o-akcent-tekst-na-akcencie: #FFFFFF;   /* napis NA fiolecie: biały */
  --o-akcent-mgla:  rgba(88,54,196,.09);
  --o-akcent-linia: rgba(88,54,196,.28);

  --danger:  #B3261E;
  --ok:      #0B6E3D;

  --stagebg:  radial-gradient(1200px 700px at 50% -10%, #FCFBFD, #ECE9F1 60%);
  --toolbar1: #FFFFFF;
  --toolbar2: #F8F6FB;
  --navbg:    #F5F3F8;
  --pop:      #FFFFFF;
  --homebg:   radial-gradient(1400px 900px at 78% -12%, #FCFBFD, #F0EDF5 62%);
  --swborder: rgba(26,22,32,.14);
  --scrim:    rgba(26,22,32,.44);

  /* Zakaz czarnego cienia na jasnym tle — drabina warstw z atramentu. */
  --shadow: 0 8px 16px -8px rgba(26,22,32,.08),
            0 16px 32px -16px rgba(26,22,32,.07),
            0 2px 4px -2px rgba(26,22,32,.05);
}

/* Promienie z drabiny Ostoi (14 / 8). Wspólne dla obu motywów — to geometria,
   nie kolor, więc nie ma czego rozdzielać. */
:root{ --r:8px; --r2:14px; }

/* Suwaki: oryginał malował je „przypadkowymi” szarościami #38383e / #c9ccd4. */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2E2838; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#3A3346; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#E5E1EC; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#D6D0E0; }


/* ---------------------------------------------------------------------------
   04 · AKCENT W POWŁOCE — PODMIANA `--gold` POZA OBSZAREM ROBOCZYM
   Powłoka nadal pyta o `--gold` w 64 miejscach. Nie przepisuję tych 64 reguł —
   podmieniam samą zmienną, ale WYŁĄCZNIE na kontenerach powłoki. Lista jest
   wypisana z pliku (body ma dokładnie te dzieci: .app, #txtbar, #drop, #toast,
   .menu, .modal oraz wstrzykiwane #home i #authGate — bramka logowania
   wypadła przy pierwszym przebiegu i przyciski zostały złote, patrz zrzut).
   Wewnątrz `.app` leży też scena — i właśnie dlatego blok 01 stoi na `.slide`:
   ta reguła nie ma szansy tam wejść.
   ------------------------------------------------------------------------- */
.app, #home, #authGate, #txtbar, #drop, #toast, .menu, .modal{
  --gold:  var(--o-akcent);
  --goldh: var(--o-akcent-2);
  --accent:var(--o-akcent);
}

/* Zaznaczanie tekstu — oryginał miał tu złoto wpisane na sztywno. */
::selection{ background: var(--o-akcent-mgla); }

/* --- akcent JAKO TŁO: napis musi zmienić kolor razem z motywem ---
   Na ciemnym fiolet jaśnieje i biały napis dałby 2,1:1; na jasnym jest
   odwrotnie. Oryginał wpisywał wszędzie #141210 (prawie czerń), bo złoto
   było jasne w obu motywach. Lista selektorów przepisana z pliku, nie z głowy. */
.tbtn.gold, .ibtn.gold, .hbtn.gold,
.chip.act, .seg button.act, .libcat.act, .authtabs button.act, .authbtn,
.newcard .plus, .projcard .pmenu:hover, .thumb .tacts button:hover,
.dimtag{
  color: var(--o-akcent-tekst-na-akcencie);
}
.thumb .pick svg, .exslide .cbx svg{ color: var(--o-akcent-tekst-na-akcencie); }
input[type=range]::-webkit-slider-thumb{ border-color: var(--panel); }
input[type=range]::-moz-range-thumb{ border-color: var(--panel); }

/* --- stan „włączone / zaznaczone”: oryginał miał tu rgba(184,154,106,…)
   wklepane na sztywno w ośmiu miejscach, więc nie szło za akcentem wcale. --- */
.tbtn.on{  background:var(--o-akcent-mgla); border-color:var(--o-akcent-linia); color:var(--goldh); }
.navbtn.act{ background:var(--o-akcent-mgla); color:var(--goldh); }
.ibtn.act{ background:var(--o-akcent-mgla); border-color:var(--o-akcent-linia); color:var(--goldh); }
.layer.sel{ background:var(--o-akcent-mgla); border-color:var(--o-akcent-linia); }
.thumb.sel{ border-color:var(--gold); box-shadow:0 0 0 2px var(--o-akcent-linia); }
.hoverbox{ border-color:var(--o-akcent-linia); }
.projrow.cur{ border-color:var(--o-akcent-linia); }
.badgecur{ border-color:var(--o-akcent-linia); }
.projcard .pinfo .chip2{ background:var(--o-akcent-mgla); border-color:var(--o-akcent-linia); }
.optcard.act{ border-color:var(--gold); background:var(--o-akcent-mgla); }
#drop{ background:var(--o-akcent-mgla); }


/* ---------------------------------------------------------------------------
   05 · TYPOGRAFIA POWŁOKI
   Systemowy stos Ostoi — ten sam, co na ostoia.biz. Nie ruszam
   html/body, tylko kontenery powłoki: gdyby stos wszedł na <body>, zszedłby
   dziedziczeniem do klas slajdu, które nie mają własnego font-family.
   (Zapasowo pilnuje tego jeszcze przypięcie 'Inter' w bloku 01.)
   ------------------------------------------------------------------------- */
.app, #home, #authGate, #txtbar, #drop, #toast, .menu, .modal{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}
/* Sceny to nie dotyczy — a to i tak jest tylko pas zapasowy do bloku 01. */
#stage, #thumbs, .exslide .mini{ font-family: 'Inter', system-ui, sans-serif; }

/* Nagłówki: Ostoia prowadzi je grubością i ciasnym światłem, nie wersalikami. */
.mhead h2{ font-weight:640; letter-spacing:-.015em; }
#homeTop .hbrand b{ font-weight:640; letter-spacing:-.015em; }
.authcard h2{ font-weight:640; letter-spacing:-.02em; }


/* ---------------------------------------------------------------------------
   06 · PASEK MARKI (górny lewy róg) + KOKPIT + EKRAN LOGOWANIA
   Oryginał rysował tu złoty kwadracik z gradientem i literą „V”.
   Ostoia ma znak: literę O z Montserrat 700 wyciętą do konturu (sygnet).
   Wstawia go JS (funkcja brandGlyph w index.html) — tutaj tylko oprawa.
   `background:none` gasi gradient 135deg z oryginału; `color` niesie sygnet,
   bo w SVG ścieżka ma fill="currentColor".
   ------------------------------------------------------------------------- */
.brandmark .dot,
#homeTop .hbrand .hlogo,
.authcard .albrand .aldot{
  background: var(--o-akcent-mgla);
  border: 1px solid var(--o-akcent-linia);
  color: var(--o-akcent);
}
.brandmark .dot svg{ width:15px; height:15px; display:block; }
#homeTop .hbrand .hlogo svg{ width:24px; height:24px; display:block; }
.authcard .albrand .aldot svg{ width:26px; height:26px; display:block; }
/* Nadtytuł obok znaku: w Ostoi drobny druk jest spokojny, nie rozstrzelony. */
.brandmark span{ letter-spacing:.10em; }
#homeTop .hbrand span{ letter-spacing:.12em; }


/* ---------------------------------------------------------------------------
   07 · POWIERZCHNIE I POLA — kształt, nie kolor
   Kolory już poszły zmiennymi z bloków 02/03. Tu zostaje tylko drabina
   promieni i cieni Ostoi tam, gdzie oryginał miał wartości sztywne.
   ------------------------------------------------------------------------- */
.mbox{ border-radius:14px; }
.projcard, .optcard, .tplcard, .authcard{ border-radius:14px; }
.thumb{ border-radius:8px; }
.field, .ibtn, .hbtn, .tbtn, .authbtn{ border-radius:8px; }
.badgecur, .chip, .chip2, .libcat, .tag2{ border-radius:6px; }

/* ---------------------------------------------------------------------------
   08 · PODGLĄDY EFEKTÓW TEKSTU — druga śluza, tego samego rodzaju co blok 01
   Kafelki „Obrys / Poświata / Gradient / Tło” w inspektorze rysują próbkę „Ab”
   stylem wpisanym inline w FX_PRESETS, a ten sięga po `var(--gold)`. Siedzą
   wewnątrz `.app`, więc po podmianie z bloku 04 pokazywały FIOLET — a efekt
   nałożony na slajd i tak wychodzi w kolorze marki (defaultFxColor bierze
   getBrand().accent). Podgląd kłamałby: fiolet na kafelku, złoto na grafice.
   Oddaję próbce kolor marki. Ramka kafelka (`.fxcard`) zostaje fioletowa —
   to już powłoka, nie próbka.
   Znalezione na zrzucie ekranu, nie w kodzie — dlatego warto było patrzeć.
   ------------------------------------------------------------------------- */
.fxcard .fxprev{ --gold: var(--marka-akcent, #b89a6a); }

/* Pola tekstowe: widoczna ramka zamiast samego tła — nietechniczny użytkownik
   ma widzieć, gdzie wolno pisać. */
.field input, .field, textarea, select{ border-color: var(--line2); }
.field:focus-within{ border-color: var(--o-akcent-linia); }
input:focus, textarea:focus, select:focus{ outline-color: var(--o-akcent); }