/* ============================================================================
   alphasec-skins.css — skórki, konsola i przytrzymanie przycisku motywu
   ----------------------------------------------------------------------------
   Wydzielone z alphasec.css, bo używa tego również aplikacja protipów
   (osobne repo alphasec.protip, ta sama domena — wciąga plik z /assets/).
   Tokeny bazowe zostają w alphasec.css; tutaj są tylko nadpisania skórek.
   ============================================================================ */

/* ============================================================================
   6 · SKÓRKA „POSTAPO" — schowany smaczek
   ----------------------------------------------------------------------------
   Włącza się wpisaniem `wasteland` na stronie albo ?skin=postapo w adresie,
   zapamiętuje w localStorage (klucz alphasec-skin). Nie ma dla niej żadnego
   przycisku — tak jak dla `adv` i gier.

   Kolory idą przez tokeny. Kształty i kroje wymagają !important, bo strona
   trzyma je w atrybutach style="", a te biją każdy selektor. Dla warstwy
   nakładkowej to poprawne użycie, nie obejście.
   ============================================================================ */
[data-skin="postapo"],
[data-skin="postapo"][data-theme],
[data-skin="postapo"] [data-theme] {
  --bg:          #d6d1c7;
  --surface:     #c8c2b6;
  --card:        #e3dfd6;
  --ink:         #16181a;
  --strong:      #2b3034;
  --muted:       #4c5257;
  --muted2:      #5f666a;
  --faint:       #7e847f;
  --quote:       #2b3034;
  --line:        #16181a;
  --line2:       #b2ac9f;
  --line3:       #b2ac9f;
  --inputborder: #16181a;
  --acc:         #8f4326;   /* rdza */
  --acc-fg:      #ffffff;
  --navbg:       rgba(214,209,199,0.9);
  --logofilter:  grayscale(1) brightness(.25);
  --logoblend:   multiply;

  --foot-bg:     #16181a;
  --foot-fg:     #9aa09c;
  --foot-dim:    #6b716d;
  --foot-hi:     #dfa400;   /* farba ostrzegawcza */
  --foot-line:   #2b3034;
  --dashed:      #16181a;
  --hairline:    #4c5257;

  /* fosfor ustępuje stali i bursztynowi — inaczej byłby miszmasz */
  --crt-bg:      #2b3034;
  --crt-bar:     #22262a;
  --crt-fg:      #ced3d0;
  --crt-dim:     #7f8a86;
  --crt-faint:   #6b716d;
  --mint:        #dfa400;
  --mint-ink:    #16181a;

  --band-bg:     #16181a;
  --band-input:  #22262a;
  --band-line:   #3a4147;
  --band-fg:     #e8e4da;
  --band-dim:    #9aa09c;
}

/* beton: skrót `background` w atrybucie style zamalowałby tło, więc tekstura
   idzie na osobną warstwę pod treścią. */
[data-skin="postapo"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(37deg, rgba(0,0,0,.02) 0 2px, transparent 2px 5px);
}

/* kształty: zero zaokrągleń, ciężkie krawędzie */
[data-skin="postapo"] *:not(.egg):not(.egg *) { border-radius: 0 !important; }
[data-skin="postapo"] section, [data-skin="postapo"] header.nav { border-width: 3px !important; }

/* typografia: wersaliki na kondensowanym kroju */
[data-skin="postapo"] h1,
[data-skin="postapo"] h2,
[data-skin="postapo"] h3,
[data-skin="postapo"] h4 {
  font-family: 'Big Shoulders Display', system-ui, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .005em !important;
  line-height: .96 !important;
}
[data-skin="postapo"] body,
[data-skin="postapo"] p,
[data-skin="postapo"] li,
[data-skin="postapo"] a,
[data-skin="postapo"] span,
[data-skin="postapo"] div { font-family: 'Barlow', system-ui, sans-serif; }
[data-skin="postapo"] .mono,
[data-skin="postapo"] [style*="JetBrains"] { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }

/* Zdjęcia: nie czerń i biel — wyblakły rdzawo-piaskowy ton. Czarno-białe
   wygląda jak nekrolog, a nie jak coś, co leżało za długo na słońcu. */
[data-skin="postapo"] img:not([src*="alphasec_academy"]):not(.egg img) {
  filter: sepia(.62) saturate(1.35) hue-rotate(-14deg) contrast(1.08) brightness(.97);
}

/* pas ostrzegawczy pojawia się dokładnie raz — gdyby był wszędzie, byłby kostiumem */
[data-skin="postapo"] section.trusted { position: relative; }
[data-skin="postapo"] section.trusted::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 10px;
  background: repeating-linear-gradient(45deg, #dfa400 0 14px, #16181a 14px 28px);
}

/* ============================================================================
   7 · SKÓRKA „ZINE" — druk offsetowy
   ============================================================================ */
[data-skin="zine"],
[data-skin="zine"][data-theme],
[data-skin="zine"] [data-theme] {
  --bg: #f2ecdd; --surface: #e9e1cd; --card: #f8f3e6;
  --ink: #171512; --strong: #322d26; --muted: #4a453c; --muted2: #5d564a; --faint: #7d7566;
  --quote: #322d26; --line: #171512; --line2: #b8ae97; --line3: #b8ae97; --inputborder: #171512;
  --acc: #ff6a00; --acc-fg: #f2ecdd;
  --navbg: rgba(242,236,221,0.92); --logofilter: grayscale(1) brightness(.15); --logoblend: multiply;
  --foot-bg: #171512; --foot-fg: #c9c2b2; --foot-dim: #8d8676; --foot-hi: #ff6a00; --foot-line: #3a352c;
  --dashed: #171512; --hairline: #4a453c;
  --crt-bg: #171512; --crt-bar: #221e18; --crt-fg: #f2ecdd; --crt-dim: #ff6a00; --crt-faint: #8d8676;
  --mint: #ff6a00; --mint-ink: #f2ecdd;
  --band-bg: #171512; --band-input: #221e18; --band-line: #3a352c; --band-fg: #f2ecdd; --band-dim: #c9c2b2;
}
[data-skin="zine"] *:not(.egg):not(.egg *) { border-radius: 0 !important; }
[data-skin="zine"] h1, [data-skin="zine"] h2, [data-skin="zine"] h3, [data-skin="zine"] h4 {
  font-family: 'Archivo Black', system-ui, sans-serif !important;
  font-weight: 400 !important; text-transform: uppercase !important;
  letter-spacing: -.03em !important; line-height: 1.02 !important;
}
[data-skin="zine"] body, [data-skin="zine"] p, [data-skin="zine"] li,
[data-skin="zine"] a, [data-skin="zine"] span, [data-skin="zine"] div { font-family: 'Fragment Mono', ui-monospace, monospace; }
[data-skin="zine"] img:not([src*="alphasec_academy"]):not(.egg img) { filter: grayscale(1) contrast(1.18) sepia(.12); }

/* ============================================================================
   8 · SKÓRKA „STEAMPUNK" — mosiądz i postarzały papier
   ============================================================================ */
[data-skin="steampunk"],
[data-skin="steampunk"][data-theme],
[data-skin="steampunk"] [data-theme] {
  --bg: #efe6d2; --surface: #e7dcc3; --card: #f6f0e0;
  --ink: #241d15; --strong: #3d3225; --muted: #5b4d3c; --muted2: #6d5e49; --faint: #8d7c64;
  --quote: #3d3225; --line: #cbbb9b; --line2: #ddd0b3; --line3: #cbbb9b; --inputborder: #b9a684;
  --acc: #7c2f22; --acc-fg: #efe6d2;
  --navbg: rgba(239,230,210,0.9); --logofilter: sepia(.6) saturate(1.4) brightness(.75); --logoblend: multiply;
  --foot-bg: #2a2118; --foot-fg: #c3b294; --foot-dim: #8d7c64; --foot-hi: #c99a44; --foot-line: #4a3a29;
  --dashed: #b9a684; --hairline: #8d7c64;
  --crt-bg: #2a2118; --crt-bar: #221a12; --crt-fg: #e4d3ac; --crt-dim: #c99a44; --crt-faint: #9a8258;
  --mint: #c99a44; --mint-ink: #22160a;
  --band-bg: #2a2118; --band-input: #221a12; --band-line: #4a3a29; --band-fg: #efe6d2; --band-dim: #c3b294;
}
[data-skin="steampunk"] *:not(.egg):not(.egg *) { border-radius: 0 !important; }
[data-skin="steampunk"] h1, [data-skin="steampunk"] h2, [data-skin="steampunk"] h3, [data-skin="steampunk"] h4 {
  font-family: 'Zilla Slab', Georgia, serif !important; font-weight: 700 !important; letter-spacing: -.012em !important;
}
[data-skin="steampunk"] img:not([src*="alphasec_academy"]):not(.egg img) { filter: sepia(.45) contrast(1.06) saturate(.9); }

/* ============================================================================
   9 · KONSOLA — otwiera ją ukośnik, jak w Quake'u
   ----------------------------------------------------------------------------
   Panel żyje poza drzewem szablonu dc (doklejany do <body>), więc cykliczne
   przerysowania runtime'u go nie kasują.
   ============================================================================ */
#asConsole {
  position: fixed; inset: 0 0 auto 0; z-index: 3000;
  background: rgba(8,12,10,.94); border-bottom: 1px solid rgba(0,255,102,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.75;
  transform: translateY(-100%); transition: transform .18s ease-out;
  max-height: 62vh; display: flex; flex-direction: column;
}
#asConsole[data-open] { transform: none; }
#asConsole .out { padding: 16px 20px 6px; overflow-y: auto; color: #b9d6c6; }
#asConsole .out div { white-space: pre-wrap; word-break: break-word; }
#asConsole .out .cmd { color: #00ff66; }
#asConsole .out .err { color: #ff6b5e; }
#asConsole .out .dim { color: #4d7a5f; }
#asConsole .row { display: flex; align-items: center; gap: 9px; padding: 10px 20px 16px; }
#asConsole .row span { color: #00ff66; }
#asConsole input {
  flex: 1; background: none; border: 0; outline: none;
  color: #d6f5e4; font: inherit; caret-color: #00ff66;
}
@media (prefers-reduced-motion: reduce) { #asConsole { transition: none; } }

/* ============================================================================
   10 · SKÓRKI W NOCY
   ----------------------------------------------------------------------------
   Bloki skórek mają specyficzność (0,2,0) i przebijały [data-theme="dark"]
   (0,1,0) — przez co przy włączonej skórce przełącznik jasny/ciemny nic nie
   robił. Każda skórka dostaje więc własny wariant nocny, celowo dobrany,
   a nie automatycznie odwrócony.
   ============================================================================ */

/* --- POSTAPO: noc na pustkowiu --- */
[data-skin="postapo"][data-theme="dark"],
[data-skin="postapo"] [data-theme="dark"] {
  --bg: #1a1d1f; --surface: #16181a; --card: #22262a;
  --ink: #e8e4da; --strong: #cfcabd; --muted: #9aa09c; --muted2: #868c88; --faint: #6b716d;
  --quote: #cfcabd; --line: #3a4147; --line2: #2b3034; --line3: #3a4147; --inputborder: #4c5257;
  --acc: #c0552f; --acc-fg: #16181a;
  --navbg: rgba(26,29,31,0.9); --logofilter: brightness(0) invert(1); --logoblend: normal;
  --foot-bg: #0f1113; --foot-fg: #9aa09c; --foot-dim: #6b716d; --foot-hi: #dfa400; --foot-line: #2b3034;
  --dashed: #4c5257; --hairline: #6b716d;
  --crt-bg: #22262a; --crt-bar: #1a1d1f; --crt-fg: #ced3d0; --crt-dim: #dfa400; --crt-faint: #6b716d;
  --mint: #dfa400; --mint-ink: #16181a;
  --band-bg: #0f1113; --band-input: #1a1d1f; --band-line: #3a4147; --band-fg: #e8e4da; --band-dim: #9aa09c;
}

/* --- ZINE: druk na czarnym papierze --- */
[data-skin="zine"][data-theme="dark"],
[data-skin="zine"] [data-theme="dark"] {
  --bg: #171512; --surface: #221e18; --card: #221e18;
  --ink: #f2ecdd; --strong: #ded7c6; --muted: #b8ae97; --muted2: #9a927e; --faint: #7d7566;
  --quote: #ded7c6; --line: #f2ecdd; --line2: #3a352c; --line3: #3a352c; --inputborder: #f2ecdd;
  --acc: #ff6a00; --acc-fg: #171512;
  --navbg: rgba(23,21,18,0.92); --logofilter: brightness(0) invert(1); --logoblend: normal;
  --foot-bg: #0d0c0a; --foot-fg: #c9c2b2; --foot-dim: #7d7566; --foot-hi: #ff6a00; --foot-line: #3a352c;
  --dashed: #f2ecdd; --hairline: #b8ae97;
  --crt-bg: #0d0c0a; --crt-bar: #171512; --crt-fg: #f2ecdd; --crt-dim: #ff6a00; --crt-faint: #7d7566;
  --mint: #ff6a00; --mint-ink: #171512;
  --band-bg: #0d0c0a; --band-input: #221e18; --band-line: #3a352c; --band-fg: #f2ecdd; --band-dim: #c9c2b2;
}

/* --- STEAMPUNK: warsztat przy lampie. Oxblood za ciemny na noc,
       więc akcentem zostaje mosiądz. --- */
[data-skin="steampunk"][data-theme="dark"],
[data-skin="steampunk"] [data-theme="dark"] {
  --bg: #241d15; --surface: #2e2519; --card: #33291d;
  --ink: #efe6d2; --strong: #ddd0b3; --muted: #b9a684; --muted2: #9a8a6c; --faint: #8d7c64;
  --quote: #ddd0b3; --line: #4a3a29; --line2: #3a2f21; --line3: #4a3a29; --inputborder: #5c4a33;
  --acc: #c99a44; --acc-fg: #22160a;
  --navbg: rgba(36,29,21,0.9); --logofilter: brightness(0) invert(1); --logoblend: normal;
  --foot-bg: #1a140e; --foot-fg: #c3b294; --foot-dim: #8d7c64; --foot-hi: #c99a44; --foot-line: #3a2f21;
  --dashed: #5c4a33; --hairline: #8d7c64;
  --crt-bg: #1a140e; --crt-bar: #140f0a; --crt-fg: #e4d3ac; --crt-dim: #c99a44; --crt-faint: #9a8258;
  --mint: #c99a44; --mint-ink: #22160a;
  --band-bg: #1a140e; --band-input: #241d15; --band-line: #4a3a29; --band-fg: #efe6d2; --band-dim: #c3b294;
}

/* Zdjęcia w nocy znoszą mniej filtra — inaczej robią się błotem. */
[data-skin="postapo"] [data-theme="dark"] img:not([src*="alphasec_academy"]):not(.egg img) { filter: sepia(.45) saturate(1.2) hue-rotate(-14deg) brightness(.9); }
[data-skin="zine"] [data-theme="dark"] img:not([src*="alphasec_academy"]):not(.egg img) { filter: grayscale(1) contrast(1.1) brightness(.85); }
[data-skin="steampunk"] [data-theme="dark"] img:not([src*="alphasec_academy"]):not(.egg img) { filter: sepia(.4) contrast(1.02) brightness(.88); }

/* ============================================================================
   11 · PRZYTRZYMANIE PRZYCISKU MOTYWU = KOLEJNA SKÓRKA
   ----------------------------------------------------------------------------
   Krótkie kliknięcie robi to co dotąd (jasny/ciemny). Przytrzymanie przełącza
   skórkę. Bez paska postępu użytkownik trzyma i myśli, że nic się nie dzieje —
   dlatego pasek jest obowiązkowy, a nie ozdobny.
   ============================================================================ */
[data-theme-toggle] { position: relative; overflow: hidden; }
[data-theme-toggle]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--acc); pointer-events: none;
}
[data-theme-toggle].holding::after { animation: hold-fill var(--hold-ms, 1500ms) linear forwards; }
@keyframes hold-fill { from { width: 0 } to { width: 100% } }
@media (prefers-reduced-motion: reduce) {
  [data-theme-toggle].holding::after { animation: none; width: 100%; }
}

/* Komunikat po przełączeniu — bez niego nikt nie wie, co się właśnie stało
   ani jak wrócić. Żyje poza drzewem szablonu dc. */
#asToast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 3200; pointer-events: none;
  background: rgba(8,12,10,.94); color: #d6f5e4;
  border: 1px solid rgba(0,255,102,.3); border-radius: 6px;
  padding: 11px 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
  opacity: 0; transition: opacity .18s, transform .18s;
}
#asToast[data-show] { opacity: 1; transform: translate(-50%, 0); }
#asToast b { color: #00ff66; font-weight: 500; }

/* Znaków ☾ / ☀ nie ma w krojach skórek — przeglądarka podmienia je wtedy na
   przypadkowy zamiennik. Sam przycisk motywu zostaje więc przy kroju systemowym. */
[data-skin] [data-theme-toggle],
[data-skin] [data-theme-icon] { font-family: ui-sans-serif, system-ui, "Segoe UI Symbol", sans-serif !important; }