/*
 * En-tête collant (spec design §4).
 * Le `min-width:1080px` de la maquette n'est pas transcrit : il forçait un défilement horizontal
 * sous ce seuil au lieu de laisser le contenu se réorganiser.
 */
.rb-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    background-color: rgb(7 12 22 / 92%);
    border-bottom: 1px solid var(--rb-border-subtle);
    backdrop-filter: blur(10px);
}

.rb-header__control {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 11px;
    color: var(--rb-text-muted);
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-border-strong);
    border-radius: var(--rb-radius-md);
}

button.rb-header__control {
    cursor: pointer;
}

button.rb-header__control:disabled {
    color: var(--rb-text-ghost);
    cursor: not-allowed;
}

.rb-header__toggle {
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

.rb-header__search {
    flex: 1;
    justify-content: flex-start;
    max-width: 440px;
    padding: 9px 12px;
    text-align: left;
}

.rb-header__search-text {
    flex: 1;
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-header__search-shortcut {
    display: none;
    font-family: var(--rb-font-mono);
    font-size: 10.5px;
}

.rb-header__sync,
.rb-header__separator {
    display: none;
}

.rb-header__sync {
    gap: 7px;
    align-items: center;
    font-family: var(--rb-font-mono);
    font-size: 11px;
    color: var(--rb-text-faint);
}

.rb-header__sync-dot {
    width: 7px;
    height: 7px;
    background-color: var(--rb-accent-green);
    border-radius: 50%;
    animation: rbPulse 2.4s infinite;
}

.rb-header__sync-dot--never {
    background-color: var(--rb-text-ghost);
    animation: none;
}

.rb-header__separator {
    width: 1px;
    height: 22px;
    background-color: var(--rb-border-strong);
}

.rb-header__set {
    display: none;
    gap: 6px;
    align-items: center;
    padding: 7px 12px;
    font-size: 11.5px;
    color: var(--rb-text-secondary);
    background-color: rgb(169 140 255 / 8%);
    border: 1px solid var(--rb-border-accent-purple);
    border-radius: var(--rb-radius-md);
}

.rb-header__set-countdown {
    font-family: var(--rb-font-mono);
    color: var(--rb-accent-purple);
}

.rb-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.rb-header__logout {
    font-size: 11.5px;
    color: var(--rb-accent-gray);
    white-space: nowrap;
}

/* Segments de densité : deux boutons de soumission, l'état courant porte `aria-pressed`. */
.rb-density {
    display: flex;
    gap: 0;
    overflow: hidden;
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-border-chip);
    border-radius: var(--rb-radius-md);
}

.rb-density__button {
    padding: 7px 10px;
    font-size: 11px;
    color: var(--rb-text-faint);
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

.rb-density__button--active {
    font-weight: 700;
    color: var(--rb-accent-cyan);
    background-color: rgb(95 227 245 / 12%);
}

@media (min-width: 760px) {
    .rb-header {
        flex-wrap: nowrap;
        gap: 14px;
        padding: 14px 28px;
    }

    .rb-header__search-shortcut,
    .rb-header__set {
        display: flex;
    }
}

@media (min-width: 1180px) {
    .rb-header__toggle {
        display: none;
    }

    .rb-header__sync,
    .rb-header__separator {
        display: flex;
    }
}