/* ==========================================================================
   home.css — strona główna sypian.ski (index.html, publications.html)
   Ładowany PO styles.css, tylko przez te dwie strony. styles.css jest
   wspólny dla ~1270 stron (granica/**, dip, blog, greta…), więc zmiany
   dotyczące wyłącznie strony głównej żyją tutaj, nie tam.
   ========================================================================== */

/* Brakujący token: styles.css czyta var(--border, #e8e3da), a żadna szata go nie definiuje. */
:root {
    --border: #e8e3da;
}

/* --------------------------------------------------------------------------
   Ciemny tryb wg systemu: ten sam układ i fonty (Scriptorium), ciemne kolory.
   Bez przełącznika; wyłącznie prefers-color-scheme.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #17150f;
        --bg-alt: #1f1c14;
        --ink: #ece6d6;
        --ink-soft: #c9c2ae;
        --ink-mute: #a39c86;
        --ink-faint: #8f8975;
        --rule: #34302a;
        --border: #2f2c25;
        --accent: #d8b43c;
        --accent-dark: #ecd070;
        --accent-soft: #d8b43c;
        --link-rest: #6d6652;
        --link-hover: #d8b43c;
        --rule-gradient: linear-gradient(to right, transparent, rgba(216, 180, 60, 0.35) 20%, #4a4535 50%, rgba(216, 180, 60, 0.35) 80%, transparent);
        color-scheme: dark;
    }
}

/* --------------------------------------------------------------------------
   Przełącznik języka w prawym rogu (pełne nazwy: Esperanto · Polski · English).
   Pozycjonowany absolutnie, żeby nie ruszać kolejności DOM: styles.css opiera
   hero na main > h1:first-child.
   -------------------------------------------------------------------------- */
.lang-switch {
    position: absolute;
    top: 1.1rem;
    right: 1.5rem;
    margin: 0;
    text-align: right;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* Odstęp między paskiem języków a nazwiskiem (tylko strona z przełącznikiem). */
main:has(> .lang-switch) {
    padding-top: 4.6rem;
}

.lang-switch a {
    display: inline-block;
    padding: 0.3rem 0.15rem;
    color: var(--ink-soft);
}

.lang-switch a.active {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Wstęp: akapit wiodący + miękki drugi
   -------------------------------------------------------------------------- */
main p.lead {
    font-size: 1.18rem;
    color: var(--ink);
}

main p.soft {
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Etykiety platform i liczniki przy nazwach kart
   -------------------------------------------------------------------------- */
.project-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
}

.plat {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0 0.45rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Zwinięte listy wtyczek (KOReader, Dev & desktop) i sublinki w dwóch kolumnach
   -------------------------------------------------------------------------- */
.project-fold {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.project-fold > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    color: var(--accent-dark);
    padding: 0.15rem 0;
}

.project-fold > summary::-webkit-details-marker {
    display: none;
}

.project-fold > summary::before {
    content: "\25B8"; /* ▸ */
    display: inline-block;
    margin-right: 0.4em;
    transition: transform 0.15s ease;
}

.project-fold[open] > summary::before {
    transform: rotate(90deg);
}

.project-fold > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.project-fold .project-sublinks {
    margin-top: 0.4rem;
}

/* Naprawa kreski: dawniej display:flex + gap:0 zjadały spacje wokół „—”. */
.project-sublink {
    display: grid;
    grid-template-columns: 7.6rem minmax(0, 1fr) auto;
    grid-template-areas: "l d r";
    column-gap: 0.6rem;
    align-items: baseline;
}

.project-sublink-label {
    grid-area: l;
    white-space: nowrap;
}

.project-sublink-dash {
    display: none;
}

.project-sublink-desc {
    grid-area: d;
    min-width: 0;
}

.project-sublink-arrow {
    grid-area: r;
}

@media (max-width: 600px) {
    main:has(> .lang-switch) {
        padding-top: 4rem;
    }

    .lang-switch {
        top: 0.7rem;
        right: 1.25rem;
    }

    .project-sublink {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "l r" "d d";
    }
}

/* --------------------------------------------------------------------------
   Kontakt: numery telefonów pokazywane po kliknięciu (składane skryptem)
   -------------------------------------------------------------------------- */
.contact-reveal {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: var(--ink-soft);
    padding: 0.25rem 0;
    text-decoration: underline;
    text-decoration-color: var(--link-rest);
    text-underline-offset: 2px;
}

.contact-reveal[hidden] {
    display: none;
}

.contact-reveal:hover {
    color: var(--accent-dark);
}

.contact-reveal:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}