/* Compact language controls remain accessible without opening Settings. */
.language-switch {
    color-scheme: dark;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #f3f8fb;
    background: #13232f;
    border: 1px solid #3c5968;
    border-radius: 12px;
    min-height: 44px;
    width: 126px;
    max-width: 100%;
    padding: 8px 6px;
    flex: 0 0 auto;
    cursor: pointer;
}
.language-switch:focus-visible { outline: 3px solid #54daeb; outline-offset: 3px; }
.welcome-language { display: block; margin: 0 48px 12px 0; }
.document-language { width: min(1100px, calc(100% - 32px)); margin: 16px auto 0; text-align: right; }
/* The guest home hides account/settings controls, but language must stay visible. */
body.guest-home-active > header .header-controls { display: flex; }
body.guest-home-active > header .header-controls > button { display: none; }
html[lang="en"] .technique-card h3,
html[lang="en"] .journey-card h3,
html[lang="pt-BR"] .technique-card h3,
html[lang="pt-BR"] .journey-card h3 { overflow-wrap: anywhere; }
/* Intrinsic controls no longer overflow a fixed 220px column into navigation.
 * At intermediate widths navigation gets its own row; on phones it stays below. */
.app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand controls" "navigation navigation";
    gap: 16px 24px;
}
.app-header > .logo { grid-area: brand; min-width: 0; }
.app-header > .primary-app-nav { grid-area: navigation; justify-self: center; max-width: 100%; }
.app-header .primary-app-nav button { min-height: 44px; }
.app-header > .header-controls { grid-area: controls; justify-self: end; gap: 10px; flex-wrap: nowrap; }
.app-header .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header #account-button-label { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.guest-home-active > .app-header { grid-template-areas: "brand controls"; }
@media (min-width: 1380px) {
    .app-header {
        grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
        grid-template-areas: "brand navigation controls";
    }
    body.guest-home-active > .app-header { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 768px) {
    .app-header { grid-template-areas: "brand controls"; gap: 12px; }
    .app-header .header-controls > .glass-button { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; }
    .app-header .header-controls > .glass-button > span { display: none; }
}
@media (max-width: 480px) {
    .app-header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "controls"; }
    .app-header > .header-controls { justify-self: stretch; }
    .app-header .language-switch { margin-right: auto; }
    body.guest-home-active > .app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand controls"; }
}
@media (max-width: 600px) {
    .language-switch { font-size: 12px; }
    .landing-header .header-actions { gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
    .landing-header { flex-wrap: wrap; }
    .landing-header .header-login { display: none; }
}
/* Long translated navigation labels have their own row on the public site too. */
@media (min-width: 1101px) {
    .landing-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; }
    .landing-header > .brand { grid-column: 1; grid-row: 1; }
    .landing-header > .header-actions { grid-column: 2; grid-row: 1; }
    .landing-header > .desktop-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}