/*
 * Talking Time header styles — bannered, pastel-blue gradient with
 * the TT logo, tagline, and the three co-developer logos sized
 * identically (Requirement 6.4).
 *
 * Requirement 5.2, 5.3, 6.2, 6.4, 5.5
 */

.tt-area .tt-header {
    background: linear-gradient(
        135deg,
        var(--tt-talk-teal) 0%,
        var(--tt-story-purple) 100%
    );
    color: var(--tt-text-inverse);
    box-shadow: var(--tt-shadow-md);
    padding: 14px 24px 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.tt-area .tt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
}

.tt-area .tt-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tt-area .tt-header__logo {
    height: 40px;
    width: auto;
    display: block;
}

.tt-area .tt-header__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tt-area .tt-header__title {
    font-size: var(--tt-font-size-lg);
    font-weight: 700;
}

.tt-area .tt-header__tagline {
    font-size: var(--tt-font-size-sm);
    opacity: 0.9;
}

.tt-area .tt-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tt-area .tt-header__user {
    font-size: var(--tt-font-size-sm);
    font-weight: 600;
    opacity: 0.92;
}

.tt-area .tt-header__co-brand {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    max-width: 1280px;
    margin: 10px auto 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.tt-area .tt-header__co-brand-logo {
    /* Co-developer logos must be sized identically — Requirement 6.4 */
    height: 28px;
    width: auto;
    display: block;
    opacity: 0.95;
    filter: brightness(1) saturate(1);
}