.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
.language-picker { display: inline-flex; flex: 0 0 auto; min-width: 0; color: #344d3e; font-size: 12px; }
.language-picker button { font-family: inherit; cursor: pointer; filter: none; }
.language-picker .language-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: 34px; min-height: 34px; margin: 0; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s; }
.language-trigger > svg { width: 16px; height: 16px; flex-shrink: 0; color: #758375; }
.language-trigger > .language-chevron { width: 12px; height: 12px; transition: transform .15s; }
.language-trigger[aria-expanded="true"] > .language-chevron { transform: rotate(180deg); }
.language-picker .language-trigger:hover, .language-trigger[aria-expanded="true"] { background: #eaf0e6; border-color: #dde6d8; }
.language-picker button:focus-visible { outline: 2px solid #5c965d; outline-offset: 2px; }
.language-menu { position: fixed; z-index: 40; width: 304px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow: auto; padding: 8px; border: 1px solid #e0e7dc; border-radius: 13px; background: #fff; color: #344d3e; box-shadow: 0 12px 36px #2035241a, 0 2px 6px #20352409; }
.language-menu[hidden] { display: none; }
.language-menu-title { padding: 7px 9px 10px; color: #84907f; font-size: 11px; font-weight: 500; line-height: 1.3; }
.language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.language-picker .language-option { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; height: auto; min-height: 40px; padding: 8px 9px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: #475449; text-align: left; font-size: 12px; font-weight: 400; line-height: 1.4; }
.language-option > span { min-width: 0; }
.language-option > svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; color: #356c4c; }
.language-picker .language-option:hover, .language-picker .language-option:focus-visible { background: #f2f5ef; }
.language-picker .language-option[aria-checked="true"] { background: #eaf2e5; color: #2f6545; font-weight: 600; }
.language-option[aria-checked="true"] > svg { opacity: 1; }
.topbar { position: relative; z-index: 4; }
.login-page main { position: relative; }
.login-page main > .language-picker { position: absolute; top: 36px; right: 24px; }
@media (max-width: 560px) { .header-actions { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .language-trigger, .language-chevron { transition: none !important; } }
/* Longer translations must wrap without moving the sidebar or top bar. */
.modal-heading { gap: 12px; flex-wrap: wrap; }
.modal-heading h2 { flex: 1 1 140px; min-width: 0; }
.modal-heading .language-picker { margin-left: auto; }
.nav-item svg { flex-shrink: 0; }
.nav-item > span { min-width: 0; overflow-wrap: anywhere; }
.resource-top { flex-wrap: wrap; }
.resource-top > span { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 760px) {
  .topbar .environment-badge { display: none; }
  .topbar .header-actions { flex-wrap: nowrap; gap: 0; }
  .topbar > span { min-width: 0; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  .page-heading > div:first-child { width: 100%; min-width: 0; }
  .page-heading h1 { overflow-wrap: anywhere; line-height: 1.25; }
  .heading-actions { max-width: none; width: 100%; justify-content: flex-start; }
  .heading-actions > button { white-space: normal; max-width: 100%; }
  .driver-summary { flex-wrap: wrap; }
  .driver-summary p { flex-basis: 100%; margin-left: 12px; }
  .initialize-entry { margin-left: auto; }
  .filter-tabs { flex-wrap: wrap; }
  .page-footer { gap: 8px; flex-wrap: wrap; }
  .method-tabs { flex-wrap: wrap; }
  .method-tabs button { white-space: normal; min-width: 0; }
  .start-page header { flex-wrap: wrap; }
}

@media (max-width: 440px) {
  .nav-item svg { display: none; }
  .nav-item > span { overflow-wrap: normal; hyphens: auto; }
}
@media (max-width: 560px) {
  .modal-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .modal-heading h2 { grid-column: 1; grid-row: 1; }
  .modal-heading .icon-button { grid-column: 2; grid-row: 1; }
  .modal-heading .language-picker { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
}