.app-header { position: fixed; inset: 0 0 auto 0; height: var(--app-header-height); z-index: var(--z-header); display: flex; align-items: center; gap: 18px; box-sizing: border-box; padding: 0 16px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); }
.app-header__brand { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.app-header__logo { height: 30px; width: auto; max-width: 110px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; }
.app-header__module-back {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--app-radius-md);
    text-decoration: none;
    color: var(--app-text);
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}
.app-header__module-back:hover,
.app-header__module-back:focus-visible {
    background: var(--app-surface-muted);
    color: var(--app-primary);
}
.app-header__module-back--static {
    cursor: default;
    padding: 0;
    margin: 0;
}
.app-header__module-back--static:hover,
.app-header__module-back--static:focus-visible {
    background: transparent;
    color: var(--app-text);
    gap: 0;
}
.app-header__module-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-start: 8px;
    width: 16px;
    opacity: 0;
    pointer-events: none;
    color: var(--app-primary);
    transition: opacity 0.15s ease;
}
.app-header__module-back:hover .app-header__module-back-icon,
.app-header__module-back:focus-visible .app-header__module-back-icon {
    opacity: 1;
}
.app-header__module-back-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform 0.15s ease;
}
.app-header__module-back:not(.app-header__module-back--static):hover .app-header__module-back-label,
.app-header__module-back:not(.app-header__module-back--static):focus-visible .app-header__module-back-label {
    transform: translateX(22px);
}
html[dir="rtl"] .app-header__module-back:not(.app-header__module-back--static):hover .app-header__module-back-label,
html[dir="rtl"] .app-header__module-back:not(.app-header__module-back--static):focus-visible .app-header__module-back-label {
    transform: translateX(-22px);
}
html[dir="rtl"] .app-header__module-back-icon svg {
    transform: scaleX(-1);
}
.app-header__nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.app-header__nav-link, .app-header__nav-button { height: 36px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--app-radius-md); background: transparent; color: var(--app-text); white-space: nowrap; }
.app-header__nav-link:hover, .app-header__nav-button:hover, .app-header__nav-link.is-active, .app-header__nav-item.is-active > .app-header__nav-button { background: var(--app-surface-muted); color: var(--app-primary); }
.app-header__tools { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.app-header__lang-toggle {
    height: 36px;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: none;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.app-header__lang-toggle:hover {
    background: var(--app-surface-muted);
    color: var(--app-primary);
    border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-border));
}
.app-header__lang-toggle-label {
    line-height: 1;
}
.app-user-button { height: 36px; display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 0 8px; border: none; border-radius: var(--app-radius-md); background: transparent; color: var(--app-text); cursor: pointer; }
.app-user-button:hover,
.app-user-button[aria-expanded="true"] { border-color: color-mix(in srgb, var(--app-primary) 34%, var(--app-border)); background: var(--app-surface-muted); }
.app-user-button > span:not(.app-user-button__avatar):not(.app-dropdown__chevron) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user-button__avatar { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--app-primary); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 900px) {
    .app-body { --app-header-height: 92px; }
    .app-header { flex-wrap: wrap; align-content: center; gap: 6px 8px; padding-block: 6px; }
    .app-header__brand { flex: 1 1 auto; max-width: calc(100% - 150px); }
    .app-header__tools { margin-inline-start: auto; }
    .app-header__nav { flex: 0 0 100%; order: 3; height: 36px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
}

@media (max-width: 520px) {
    .app-body { --app-header-height: 96px; }
    .app-header { padding-inline: 10px; }
    .app-header__brand { max-width: calc(100% - 128px); }
    .app-header__logo { height: 24px; max-width: 72px; }
    .app-header__separator, .app-header__module, .app-header__app { display: none; }
    .app-header__tools { gap: 6px; }
    .app-user-button { max-width: 92px; overflow: hidden; }
}

/* The user badge carries a picture when the account has one. Lives here rather than in
   pages/profile.css because the header is on every page and the profile stylesheet is not. */

.app-user-button__avatar.has-image {
    /* The initial is a text node on this element; hiding it with a transparent colour rather
       than removing it keeps the element's size stable while the image loads. */
    color: transparent;
    padding: 0;
    overflow: hidden;
}

.app-user-button__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.app-user-button__avatar { position: relative; }