/* Load page — zero zależności zewnętrznych, fonty systemowe.
   Cienka złota linia pod znakiem = brzytwa Ockhama. */

:root {
    --bg: #0b0e14;
    --fg: #e6e4dd;
    --muted: #8b8f98;
    --accent: #c8a24b;
    --przerwa: #8c4a3f;
    --halo: rgba(200, 162, 75, 0.14);
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f5f0;
        --fg: #1a1d23;
        --muted: #6b6f78;
        --accent: #a07f2e;
        --przerwa: #9c4a38;
        --halo: rgba(160, 127, 46, 0.16);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: grid;
    /* `minmax(0, 1fr)`, nie `auto`: domyślna kolumna siatki nie kurczy się
       poniżej swojej szerokości max-content, więc linia „W przygotowaniu…"
       rozpychała stronę poza ekran telefonu zamiast się zawinąć. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    background: var(--bg);
    background-image: radial-gradient(ellipse 80% 60% at 50% 35%,
        rgba(200, 162, 75, 0.06), transparent);
    color: var(--fg);
    font-family: ui-serif, "Iowan Old Style", Georgia, Cambria, serif;
    text-align: center;
    padding: 2rem 1.25rem;
}

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.wordmark {
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-indent: 0.14em; /* kompensacja letter-spacing przy centrowaniu */
}

.razor {
    width: min(22rem, 70vw);
    height: 1px;
    margin: 1.6rem 0;
    background: linear-gradient(90deg, transparent, var(--accent) 20%,
        var(--accent) 80%, transparent);
    transform: rotate(-1.2deg);
}

.tagline {
    font-size: clamp(1rem, 3vw, 1.25rem);
    letter-spacing: 0.32em;
    text-indent: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
}

.status {
    margin-top: 2.8rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ---------- Panel stanu ----------
   Diody i licznik mają ożywić stronę, nie przekrzyczeć znaku: ten sam krój
   bezszeryfowy i ta sama barwa przygaszona co w linii „W przygotowaniu",
   złoto wyłącznie na tym, co faktycznie pracuje. */

.panel {
    margin-top: 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    font-family: var(--sans);
}

.diody {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.7rem;
}

.dioda {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.4s ease, opacity 0.4s ease;
}

.led {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* czynny — ostatni przebieg mieści się w harmonogramie */
.dioda[data-stan="czynny"] {
    color: var(--fg);
}

.dioda[data-stan="czynny"] .led {
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--halo);
    animation: puls 2.6s ease-in-out infinite;
}

/* czuwa — moduł żyje, ale jego pora jeszcze nie nadeszła */
.dioda[data-stan="czuwa"] .led {
    background: var(--muted);
}

/* planowany — modułu jeszcze nie ma; obrys bez wypełnienia, żeby nie mylić
   go z awarią (faza 3 to nie usterka) */
.dioda[data-stan="planowany"] {
    opacity: 0.5;
}

.dioda[data-stan="planowany"] .led {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--muted);
}

/* przerwa — przygaszona czerwień, bez pulsu: alarm ma być widoczny,
   nie natarczywy */
.dioda[data-stan="przerwa"] .led {
    background: var(--przerwa);
}

@keyframes puls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.licznik {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.liczba {
    font-size: 1.05rem;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Treść wyłącznie dla czytnika ekranu: dioda bez tego byłaby niema. */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .dioda[data-stan="czynny"] .led {
        animation: none;
    }
}

/* Wąskie ekrany: trzy diody nie mieszczą się w jednej linii przy tym
   odstępie liter — zawijają się, więc odstęp pionowy musi zostać czytelny. */
@media (max-width: 30rem) {
    .status {
        margin-top: 2.2rem;
    }

    .panel {
        margin-top: 1.8rem;
        gap: 1rem;
    }

    .diody {
        gap: 0.7rem 1.2rem;
    }

    .dioda {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .foot {
        padding-top: 2.2rem;
    }
}

.foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.3rem 1.1rem;
    padding-top: 3rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.7;
}

.beat-link {
    color: inherit;
    text-decoration: none;
}

.beat-link:hover {
    color: var(--fg);
}

#beatclock {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}