/* ==========================================================================
   Site header — brand, section deck, Telegram entry points.

   Three zones on a wide screen: identity left, where-you-are centre, what-to-do
   right. The centre is the deck progress itself, so the header is navigation
   rather than decoration.
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 10;
    flex: none;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

/* Every track is minmax(0, …): an `auto` track floors at its content's
   min-content width, so one long deck label used to push the whole bar wider
   than the container and put a horizontal scrollbar on the document. */
.site-header__bar {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--space-5);
    min-height: 4.5rem;
    padding-block: var(--space-3);
}

/* ---------- brand ---------- */

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
}

.brand__badge {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
}

.brand__text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.brand__mark {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.brand__sub {
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---------- deck ----------
   One block per slide, centred. The active block widens and lights up; the
   ones behind it stay filled so progress through the deck is readable at a
   glance. */

.deck {
    display: none;
    justify-self: center;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    box-shadow: 0 1px 2px rgb(4 4 7 / 0.04) inset;
}

.js .deck {
    display: flex;
}

.deck__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out);
}

.deck__item:hover {
    color: var(--color-text);
}

.deck__index {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-border-strong);
    transition: color var(--duration-base) var(--ease-out);
}

.deck__item:hover .deck__index {
    color: var(--color-accent);
}

.deck__item.is-done {
    color: var(--color-text);
}

.deck__item.is-done .deck__index {
    color: var(--brand-300);
}

.deck__item.is-current {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    box-shadow:
        0 1px 0 rgb(255 255 255) inset,
        0 4px 10px -5px rgb(4 4 7 / 0.3),
        0 1px 2px rgb(4 4 7 / 0.08);
}

.deck__item.is-current .deck__index {
    color: var(--color-accent);
}

/* Only the current block spells its section out. Six full labels are wider
   than the header can give without squeezing the brand, and the number alone
   already says how far along the deck you are. */
.deck__label {
    display: none;
}

.deck__item.is-current .deck__label {
    display: inline;
}

.deck__item:not(.is-current) {
    padding-inline: var(--space-3);
}

/* The pink underline under the active block — the one moving part. */
.deck__item.is-current::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 0.3rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}

/* ---------- actions ---------- */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: end;
}

.intro-replay {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.intro-replay:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.intro-replay svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* ---------- compact ----------
   Below this the deck drops to its own row under the bar rather than competing
   with the brand and the buttons for the same line. */

@media (max-width: 68rem) {
    /* Brand and actions share the top row, the deck gets its own beneath —
       placed explicitly, or the actions would be pushed onto a third row. */
    .site-header__bar {
        grid-template-columns: minmax(0, auto) minmax(0, auto);
        justify-content: space-between;
        min-height: 3.75rem;
    }

    .brand {
        grid-area: 1 / 1;
    }

    .site-header__actions {
        grid-area: 1 / 2;
    }

    .deck {
        grid-area: 2 / 1 / 3 / -1;
        justify-self: center;
        margin-top: var(--space-2);
        padding: var(--space-1) var(--space-2);
        gap: var(--space-1);
    }

    .deck__item {
        padding: var(--space-2);
        min-width: 2rem;
        justify-content: center;
    }

    .deck__index {
        font-size: 0.75rem;
    }

    .deck__item.is-current::after {
        left: 30%;
        right: 30%;
        bottom: 0.25rem;
    }
}

@media (max-width: 40rem) {
    .brand__sub {
        display: none;
    }

    .brand__badge {
        width: 2.15rem;
        height: 2.15rem;
    }
}

/* On a phone even one label is too much: "Присоединяйся" alone made the deck
   441px wide inside a 312px container. Numbers only — the slide carries its
   own heading, so nothing is actually lost. */
@media (max-width: 34rem) {
    .intro-replay {
        width: 2.15rem;
        height: 2.15rem;
    }

    .deck__item.is-current .deck__label {
        display: none;
    }

    .deck__item,
    .deck__item:not(.is-current) {
        padding-inline: var(--space-2);
        min-width: 1.75rem;
    }

    .deck__item.is-current::after {
        left: 25%;
        right: 25%;
    }
}