/* SZABLON #2 „nocne pasmo" — warstwa przenosząca strony linii Open Radio.
   ==========================================================================
   Strony linii kolorują się wyłącznie przez zmienne CSS, więc przeniesienie na
   nowy język wizualny jest podmianą warstwy tokenów, a nie przepisaniem 206 klas.
   Ten plik nadpisuje tokeny szablonu #1 paletą „nocnego pasma", zmienia
   typografię na Unbounded i domyka dostępność, która w #1 była niepełna.

   Szablon #1 zostaje na głównej fiedoruk.pl — ten arkusz ładują wyłącznie strony
   Open Radio.

   KAŻDA liczba kontrastu w komentarzach jest zmierzona formułą WCAG, nie
   oszacowana. Wartości, które nie przechodziły, są podane razem z tym, co miały.
   Ładować PO assets/css/open-radio.css i po blokach <style> stron. */

@font-face{
  font-family:'Unbounded';
  src:url('../fonts/or/unbounded-latin.woff2') format('woff2');
  font-weight:200 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Unbounded';
  src:url('../fonts/or/unbounded-latin-ext.woff2') format('woff2');
  font-weight:200 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ——— CIEMNY: całość jest nocą ——— */
:root{
  --bg:#081010; --bg-2:#101821; --panel:#101821;
  --ink:#F5F1E8;      /* 17,06:1 na nocy */
  --dim:#9AACBC;      /*  8,24:1 */
  --faint:#78899C;    /*  5,36:1 — było #56616f, czyli 2,4:1 */
  --line:#2C3B4E;                       /* dekoracja bez znaczenia */
  --line-2:#546B80;   /*  3,47:1 na nocy i 3,16:1 na karcie — było #1E2937 = 1,31 */
  --cyan:#42DBAD;     /* mięta, 10,48:1 */
  --cyan-deep:#26C998; --glow:rgba(66,219,173,.26);
  --amber:#FFB652;    /*  11,05:1 */
  --green:#52D7A5;    /* 10,64:1 */
  --rose:#FF7D7B;     /*  7,76:1 */
  --disp:'Unbounded',system-ui,sans-serif;
  /* Pierścień focusa: jeden kolor na wszystkie cztery tła projektu.
     Zmierzone 3,14 na kremie / 3,54 na karcie / 5,43 na nocy / 4,94 na noc2.
     Wcześniej focus brał --cyan, czyli miętę, która na jasnym tle ma 1,63:1 —
     klawiaturowy użytkownik nie widział, gdzie jest. */
  --focus:#0E9B6E;
}

/* ——— JASNY: papier, a na nim nocne pasmo ——— */
[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F1E8; --bg-2:#FFFFFF; --panel:#FFFFFF;
  --ink:#14181D;      /* 15,81:1 na kremie */
  --dim:#4A5462;      /*  6,81:1 */
  --faint:#5C6A7C;    /*  4,89:1 */
  --line:#DCD5C6;
  --line-2:#93876B;   /*  3,15:1 na kremie, 3,55:1 na karcie */
  --cyan:#167C5B;     /*  4,58:1 — mięta w wersji, którą da się czytać na papierze */
  --cyan-deep:#126349; --glow:rgba(22,124,91,.14);
  --amber:#9C4900;    /*  5,53:1 */
  --green:#087952;    /*  4,82:1 */
  --rose:#B52029;     /*  5,82:1 */
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F5F1E8; --bg-2:#FFFFFF; --panel:#FFFFFF;
    --ink:#14181D; --dim:#4A5462; --faint:#5C6A7C;
    --line:#DCD5C6; --line-2:#93876B;
    --cyan:#167C5B; --cyan-deep:#126349; --glow:rgba(22,124,91,.14);
    --amber:#9C4900; --green:#087952; --rose:#B52029;
  }
}

body{font-family:var(--body);background:var(--bg);color:var(--ink);
  transition:background-color .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1)}

/* Typografia marki: nagłówki i etykiety w Unbounded, treść zostaje czytelna. */
.brand,.head h1,.head h2,.step h3,.autor-tx h2,.rel-h h3,h1,h2,h3{font-family:var(--disp)}
.head h1,h1{letter-spacing:-.02em;text-wrap:balance}
.head p,.step p,.autor-tx p{text-wrap:pretty}

/* Focus. 3 px pierścienia i 2 px prześwitu, żeby był widoczny także na elemencie,
   który sam ma obramowanie w podobnym kolorze. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
/* Vendorowany przycisk instalacji gasi outline we własnym shadow rootcie —
   pierścień wraca na gospodarzu. */
esp-web-install-button:focus-within{outline:3px solid var(--focus);outline-offset:3px}

/* Skok do treści. Szablon #1 nie miał go wcale. */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--panel);color:var(--ink);
  padding:12px 18px;border:2px solid var(--focus);border-radius:0 0 8px 0;font-size:14px}
.skip:focus{left:0}

/* Siatka papieru ustępuje skali strojenia — motyw marki zamiast kratki. */
.paper{
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 15px),
                   repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 75px);
  background-size:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 190px);
  mask-image:linear-gradient(180deg,#000 0,transparent 190px);
  opacity:.5;
}
.glowfield{background:radial-gradient(680px 420px at 76% -6%,var(--glow),transparent 70%)}

/* Miękkie krawędzie zamiast ostrych — drugi szablon nie tnie rogów. */
.step,.os,.note,.proc,.rec-t,.strip,.top-r a.site,.theme-tgl,.autor img{border-radius:14px}
.btn{border-radius:10px}
.btn-corners::before,.btn-corners::after{display:none}
.term{border-radius:10px}
.autor-cta a{border-radius:999px}
.strip .cap,.strip .st{border-right-color:var(--line)}

/* Ruch: podkreślenia wyjeżdżające, unoszenie kart, wyciszenie na życzenie. */
.step,.os{transition:border-color .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1)}
.step:hover,.os:hover{border-color:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .step:hover{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

::selection{background:var(--cyan);color:#081010}
[data-theme="light"] ::selection{background:var(--cyan);color:#fff}

/* Przycisk primary: kolor tekstu idzie za motywem. W ciemnym mięta jest jasna,
   więc atrament na niej czyta się 10,48:1; w jasnym mięta jest ciemna i biel na
   niej daje 5,34:1. Jeden stały kolor tekstu padał w jednym z trybów. */
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#081010;font-weight:600}
.btn.primary .ar{color:#081010}
[data-theme="light"] .btn.primary,[data-theme="light"] .btn.primary .ar{color:#fff}
.autor-cta a.primary{background:var(--cyan);border-color:var(--cyan);color:#081010}
.autor-cta a.primary:hover{filter:brightness(1.06);color:#081010}
[data-theme="light"] .autor-cta a.primary,
[data-theme="light"] .autor-cta a.primary:hover{color:#fff}
.btn:hover{border-color:var(--cyan);background:rgba(66,219,173,.08)}
[data-theme="light"] .btn:hover{background:rgba(22,124,91,.07)}

/* Terminal zostaje ciemny w obu trybach — to cytat z konsoli, nie element strony. */
.term{background:#081010;color:#7EE8BC;border-color:#2C3B4E}
[data-theme="light"] .term{background:#081010;color:#7EE8BC;border-color:#2C3B4E}

/* Pasek górny w kolorze tła bieżącego motywu. */
.top{background:rgba(8,16,16,.80)}
[data-theme="light"] .top{background:rgba(245,241,232,.80)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .top{background:rgba(245,241,232,.80)}
}

@media print{
  .top,.paper,.glowfield,.sruler,.cross,.theme-tgl{display:none!important}
  body{background:#fff;color:#000}
  .step,.os{break-inside:avoid;border:1px solid #000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}