/* Strona pomocy Uploadera — barwy i kroje przepisane z `www.uploader.it`.
 *
 * ZRODLEM JEST STRONA ZAPOWIEDZI, nie ciemny motyw programu. Wartosci ponizej
 * sa zmierzone z `strona_zapowiedzi/szablon.html` (zliczone wystapienia, nie
 * dobrane na oko): #0d7377 wystepuje tam 35 razy, #12201f 22 razy, #56676a
 * 13 razy. To jest paleta, ktora klient widzi, zanim trafi tutaj.
 *
 * Ciemny motyw (`scheme: slate`) schodzi natomiast do barw PROGRAMU —
 * #1e1e1e, #2b2b2b, #3d3d3d, #e6e6e6 z `gui/motyw.py` — bo w ciemnosci
 * jasna paleta strony nie ma czego opisywac, a czytajacy ma przed soba okno
 * Uploadera w tych wlasnie barwach.
 *
 * CZEGO NIE ROBIMY: nie przepisujemy tu ukladu Material od nowa. Zasada
 * "makieta 1:1" obowiazuje tam, gdzie makieta istnieje; dla tej strony
 * makiety nie ma, wiec Material zostaje Materialem, a my podmieniamy barwy,
 * kroje i te kilka wykonczen, ktore inaczej klamia o marce.
 */

/* --- kroje. Pliki leza w `zasoby/fonty/` i wklada je tam `buduj.py`,
 *     kopiujac z `strona_zapowiedzi/fonty/` — JEDNA kopia w repozytorium.
 *     `theme.font: false` w mkdocs.yml odcina Google Fonts, wiec bez tych
 *     deklaracji strona zjechalaby na krój systemowy.
 *     Zakresy znakow sa te same, co na stronie zapowiedzi: osobny plik na
 *     latin-ext (polskie znaki diakrytyczne) i osobny na latin.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonty/bricolage-grotesque-latin-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonty/bricolage-grotesque-latin.woff2') format('woff2');
  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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonty/instrument-sans-latin-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonty/instrument-sans-latin.woff2') format('woff2');
  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;
}

/* --- paleta: jasny motyw (barwy strony) ---------------------------------- */

[data-md-color-scheme='default'] {
  --uploader-akcent: #0d7377;
  --uploader-akcent-jasny: #14a3a8;
  --uploader-akcent-ciemny: #0a5c5f;
  --uploader-tekst: #12201f;
  --uploader-przygas: #56676a;
  --uploader-tlo-plamy: #f6f8f8;
  --uploader-kreska: #dfe7e7;
  --uploader-plama-akcentu: #dcefef;
}

[data-md-color-scheme='default'][data-md-color-primary='custom'] {
  --md-primary-fg-color: var(--uploader-akcent);
  --md-primary-fg-color--light: var(--uploader-akcent-jasny);
  --md-primary-fg-color--dark: var(--uploader-akcent-ciemny);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #e6f1f1;
}

[data-md-color-scheme='default'][data-md-color-accent='custom'] {
  --md-accent-fg-color: var(--uploader-akcent-jasny);
  --md-accent-fg-color--transparent: rgba(20, 163, 168, 0.1);
  --md-accent-bg-color: #ffffff;
}

[data-md-color-scheme='default'] {
  --md-default-fg-color: var(--uploader-tekst);
  --md-default-fg-color--light: var(--uploader-przygas);
  --md-default-fg-color--lighter: #8fbaba;
  --md-typeset-a-color: var(--uploader-akcent);
  --md-code-bg-color: var(--uploader-tlo-plamy);
  --md-footer-bg-color: var(--uploader-tekst);
}

/* --- paleta: ciemny motyw (barwy PROGRAMU, z gui/motyw.py) --------------- */

[data-md-color-scheme='slate'] {
  --uploader-akcent: #14a3a8;
  --uploader-akcent-jasny: #3fc1c5;
  --uploader-akcent-ciemny: #0d7377;
  --uploader-tekst: #e6e6e6;
  --uploader-przygas: #999999;
  --uploader-tlo-plamy: #2b2b2b;
  --uploader-kreska: #3d3d3d;
  --uploader-plama-akcentu: #19393a;

  --md-hue: 0; /* szarosci programu sa NEUTRALNE, a slate wpada w granat */
  --md-default-bg-color: #1e1e1e;
  --md-default-bg-color--light: #2b2b2b;
  --md-default-fg-color: var(--uploader-tekst);
  --md-default-fg-color--light: var(--uploader-przygas);
  --md-code-bg-color: #232323;
  --md-typeset-a-color: var(--uploader-akcent-jasny);
  --md-footer-bg-color: #171717;
}

[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
  --md-primary-fg-color: #232323;
  --md-primary-fg-color--light: #2b2b2b;
  --md-primary-fg-color--dark: #171717;
  --md-primary-bg-color: var(--uploader-tekst);
  --md-primary-bg-color--light: var(--uploader-przygas);
}

[data-md-color-scheme='slate'][data-md-color-accent='custom'] {
  --md-accent-fg-color: var(--uploader-akcent-jasny);
  --md-accent-fg-color--transparent: rgba(63, 193, 197, 0.1);
  --md-accent-bg-color: #1e1e1e;
}

/* --- typografia ---------------------------------------------------------- */

/* PODSTAWIAMY `--md-text-font`, A NIE `--md-text-font-family`. Roznica nie
 * jest kosmetyczna i kosztowala osobne szukanie — zmierzone 2026-10-12
 * w przegladarce na zbudowanej stronie:
 *
 *   * Material definiuje `--md-text-font-family` w selektorze `body`, jako
 *     `var(--md-text-font, _), -apple-system, BlinkMacSystemFont, …`;
 *   * nasza definicja stala w `:root`, czyli na `html` — a `body` jest
 *     BLIZEJ kazdego akapitu, wiec wygrywala jego. Zmierzony skutek:
 *     `getComputedStyle(p).fontFamily` zwracalo `"_, -apple-system, …"`,
 *     czyli krój o nazwie PODKRESLNIK, i strona szla na font systemowy.
 *     Naglowki wygladaly dobrze, bo im `font-family` ustawiamy wprost —
 *     i to jest cala pulapka: polowa strony wygladala poprawnie.
 *   * `document.fonts.check('400 1rem "Instrument Sans"')` dawalo `false`
 *     przy `true` dla Bricolage. Po tej zmianie oba sa `true`.
 *
 * `--md-text-font` to punkt, w ktory Material celowo pozwala sie wpiac:
 * swoje zapasowe kroje doklada sam, wiec nie powtarzamy ich tutaj.
 * Podkreslnik w jego wartosci domyslnej jest nazwa kroju, ktory nie
 * istnieje — tak Material wymusza zejscie na `-apple-system` przy
 * `theme.font: false`. */
:root {
  --md-text-font: 'Instrument Sans';
  --md-code-font: 'Cascadia Mono', 'Consolas';
}

/* Naglowki na Bricolage Grotesque, tak jak na stronie zapowiedzi: ciasny
 * odstep miedzy literami (-.02em) i `text-wrap:balance`, zeby tytul nie
 * zostawial w ostatnim wierszu jednego slowa. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.md-typeset h1 {
  color: var(--uploader-tekst);
  font-size: 2.1rem;
  line-height: 1.12;
}

.md-typeset h2 {
  margin-top: 2.4em;
  border-top: 1px solid var(--uploader-kreska);
  padding-top: 1.1em;
}

/* Akapit ma sie zawijac po znaczeniu, nie po szerokosci — ta sama wlasnosc,
 * co na stronie zapowiedzi. */
.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

/* Nazwa w belce na kroju naglowkowym — to jest znak marki, nie napis. */
.md-header__topic:first-child .md-ellipsis {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- wykonczenia -------------------------------------------------------- */

/* Belka strony zapowiedzi ma kreske u dolu, nie cien. To samo tutaj, zeby
 * przejscie miedzy witrynami nie bylo widoczne. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--uploader-kreska);
}

[data-md-color-scheme='slate'] .md-header {
  border-bottom-color: var(--uploader-kreska);
}

/* Tabele: strona zapowiedzi nie ma zadnej, wiec wzorem jest tu
 * `docs/model-danych.html` — naglowek na plamie, kreska wlosowa, narozniki
 * 6 px. Material domyslnie rysuje cien, ktory w tej palecie wyglada na brud. */
.md-typeset table:not([class]) {
  border: 1px solid var(--uploader-kreska);
  border-radius: 6px;
  box-shadow: none;
  font-size: 0.78rem;
}

.md-typeset table:not([class]) th {
  background: var(--uploader-tlo-plamy);
  font-weight: 600;
}

/* Wyrozniki (`!!! uwaga`, `!!! warning`) — zdejmujemy cien i zwezamy ramke
 * do wlosowej, ALE NIE RUSZAMY JEJ KOLORU. To nie jest drobiazg:
 *
 * Material koduje RODZAJ wyroznika barwa ramki — `note` #448aff, `tip`
 * #00bfa5, `info` #00b8d4, `warning`, `danger` i tak dalej (zmierzone
 * w `assets/stylesheets/main.*.css`). Reguly rodzajow maja selektor
 * `.md-typeset .admonition.note`, czyli te sama szczegolowosc, co nasz
 * `.md-typeset .admonition` — a nasz arkusz wczytuje sie POZNIEJ i wygrywa.
 *
 * Pierwsza wersja tego pliku miala tu skrocone `border: 1px solid
 * var(--uploader-kreska)`. Skrot ustawia takze KOLOR, wiec ostrzezenie,
 * wskazowka i niebezpieczenstwo stawaly sie jednakowo szare — rozroznienie,
 * ktore niesie znaczenie, znikalo bez sladu w kodzie. Dlatego `border-width`
 * osobno, a `border-color` wcale.
 *
 * NIE MA TU TEZ grubej kreski z lewej strony pudelka. Material stawia akcent
 * na PASKU TYTULU (`.admonition-title` dostaje `border-left-width: .2rem`),
 * a nie na obwodzie karty; dokladanie jej na pudelko bylo wymyslem obok
 * jezyka motywu. Zdjete po uwadze przegladu wygladu 2026-10-12. */
.md-typeset .admonition,
.md-typeset details {
  box-shadow: none;
  border-width: 1px;
  border-radius: 6px;
  font-size: 0.78rem;
}

/* Przyciski akcji (`{ .md-button }`) w barwie strony zapowiedzi: wypelniony
 * akcentem, narozniki 8 px — tak wyglada tam "Zapisz sie na beta". */
.md-typeset .md-button--primary {
  background: var(--uploader-akcent);
  border-color: var(--uploader-akcent);
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
}

.md-typeset .md-button--primary:hover {
  background: var(--uploader-akcent-jasny);
  border-color: var(--uploader-akcent-jasny);
  color: #ffffff;
}

/* Znak w belce ma byc ostry i nie przycinany — logo jest SVG o proporcjach
 * 1:1 i Material skaluje je do wysokosci wiersza. */
.md-header__button.md-logo :is(img, svg) {
  height: 1.5rem;
  width: 1.5rem;
}

/* --- powrot na www.uploader.it ------------------------------------------
 * Stopka Material pokazuje odsylacze "poprzednia/nastepna" i prawa autorskie.
 * Odsylacz do strony glownej dokladamy przez `extra.social`, a tutaj tylko
 * odbieramy mu wyglad ikony mediow spolecznosciowych, ktora nie jest.
 * ---------------------------------------------------------------------- */

.md-social__link svg {
  max-height: 0.9rem;
}