/* Znacznik "w budowie" — strona opublikowana, ale niepotwierdzona.
 *
 * Po co: strona jest już w sieci, ale nie przeszła punkt po punkcie
 * sprawdzenia zgodności z wymaganiami. Ma być widoczna i użyteczna
 * od razu, a jednocześnie jednoznacznie oznaczona jako niedokończona.
 *
 * Wygląd: żółto-czarny pas budowlany (klasyczne "under construction"),
 * przykryty półprzezrocystym kolorem przewodnim strony, żeby nie krzyczał
 * barwami wyrwanymi z reszty serwisu. Nic nie blokuje kliknięć.
 *
 * Włączenie: klasa "status-budowa" na <body> oraz
 * <link rel="stylesheet" href="/materialy-web/status-budowy.css">.
 * Wstawia i usuwa narzędzie tools/status-publikacji.py.
 */

/* Używamy atrybutu, a nie klasy: jest jednoznaczny i nie koliduje
   z klasami, które strony mają własne. Kluczowy jest zapis
   data-status-budowa="1", bo to on wstawia tools/status-publikacji.py. */
body[data-status-budowa] {
    /* Brak paddingu: pasek u góry został usunięty, treść strony
       zaczyna się dokładnie tam, gdzie zaczynała się wcześniej. */
}

/* 1. WZÓR NIE PRZYKRYWA TEŚCI.
      Dwie pierwsze wersje kładły pasy na całą stronę i obie były złe:
      wersja z fioletem 17% i przyciemnieniem 30% była ciemną mgłą,
      wersja z opacity .055 obniżała kontrast akapitu wstępnego do 4,17
      przy normie 4,5 — bo półprzezroczyste żółty rozjaśnia szary
      tekst i zbliża go do tła. Nie ma krycia, które by to naprawiło,
      bo sam ten akapit ma tylko 4,57.

      Rozwiązanie: wzór jest na marginesach, tekstu nie dotyka. Kto czyta,
      nie ma pasów przed oczami; kto patrzy na krawędzie, widzi od razu.
      Kontrast treści zostaje wtedy taki, jaki go dał autor strony. */
body[data-status-budowa]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    background:
        /* górna krawędź — tuż pod paskiem ostrzegawczym */
        repeating-linear-gradient(-45deg,
            #ffd60a 0 20px, #1b1b1b 20px 40px) top / 100% 8px no-repeat,
        /* dolna krawędź */
        repeating-linear-gradient(-45deg,
            #ffd60a 0 20px, #1b1b1b 20px 40px) bottom / 100% 8px no-repeat,
        /* obie pionowe krawędzie */
        repeating-linear-gradient(45deg,
            #ffd60a 0 20px, #1b1b1b 20px 40px) left / 8px 100% no-repeat,
        repeating-linear-gradient(45deg,
            #ffd60a 0 20px, #1b1b1b 20px 40px) right / 8px 100% no-repeat;
    opacity: .85;
}

/* Kwadraciki w rogach — wizualny domknięcie ramki. */
body[data-status-budowa]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147482999;
    pointer-events: none;
    border: solid transparent;
    border-width: 8px;
    border-image: repeating-linear-gradient(-45deg,
        #ffd60a 0 20px, #1b1b1b 20px 40px) 1;
}

/* 2. Plakietka w prawym dolnym rogu — jedyny element z napisem.
      Pasek u góry z ostrzeżeniem był i został usunięty: ciemny tekst
      na żółto-czarnym tle był nieczytelny, a użytkownik zaznaczył, że
      napisu i tak nie trzeba. */
.status-plakietka {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 2147483002;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: min(340px, calc(100vw - 28px));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 18, 40, .28);
    font: 500 12px/1.4 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.status-plakietka > span {
    display: flex;
    align-items: center;
    padding: 7px 11px;
}

.status-plakietka .status-etykieta {
    background: #ffd60a;
    color: #1b1b1b;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-right: 3px solid #1b1b1b;
}

/* Ten prawy pasek byl rozdzielaczem miedzy etykieta a szczegolami
   (.status-szczegol), ktore wypisuje tools/status-publikacji.py.
   Szczegoly zniknely z markupu — plakietka zostala sama etykieta —
   a pasek zostal. Efekt: czarny brzeg 3 px na prawej krawedzi zoltej
   plakietki, wygladajacy jak obciety element bez tresci.

   :last-child rozwiazuje to bez zgadywania: "jestem ostatnim dzieckiem"
   znaczy "nie ma szczegolow za mna", czyli ten pasek nie ma czego
   oddzielac. Gdyby szczegoly wrocily, :last-child przestanie pasowac
   i rozdzielacz wraca sam. */
.status-plakietka .status-etykieta:last-child {
    border-right: 0;
}

.status-plakietka .status-szczegol {
    background: rgba(37, 35, 59, .94);
    color: #f4f3ff;
}

.status-plakietka .status-szczegol b {
    color: #ffd60a;
    font-weight: 700;
}

/* Strona potwierdzona — znacznika nie ma, ale zostaje plakietka
   informująca, że treść przeszła sprawdzenie. */
body[data-status-potwierdzona] .status-plakietka .status-etykieta {
    background: #2f9e6e;
    color: #ffffff;
    border-right-color: #1e6b4a;
}

/* Licznik modułu jest też przyklejony do prawego dolnego rogu — podnieś go,
   żeby plakietka statusu nie zasłaniała procentu i liczby pytań. */
body[data-status-budowa] #licznikModulu,
body[data-status-potwierdzona] #licznikModulu {
    bottom: 78px;
}

@media print {
    body[data-status-budowa]::before,
    body[data-status-budowa]::after,
    .status-plakietka {
        display: none !important;
    }
}

/* Na wąskich ekranach pionowe krawędzie wchodzą na tekst — chowamy je,
   zostaje pasek u góry i plakietka, czyli cały sygnał. */
@media (max-width: 900px) {
    body[data-status-budowa]::before {
        background:
            repeating-linear-gradient(-45deg,
                #ffd60a 0 20px, #1b1b1b 20px 40px) top / 100% 8px no-repeat,
            repeating-linear-gradient(-45deg,
                #ffd60a 0 20px, #1b1b1b 20px 40px) bottom / 100% 8px no-repeat;
    }

    body[data-status-budowa]::after {
        border-width: 8px 0 8px 0;
    }
}