/* Shared by Home, Privacy and Feedback. Isolate typography from page styles. */
.locale-picker, .locale-dialog { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-align: start; }
.locale-picker { position: relative; margin-inline-start: auto; min-inline-size: 0; }
.locale-trigger { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
  min-block-size: 44px; padding: 8px 13px; border: 1px solid #2b4936; border-radius: 999px;
  background: #112a1b; color: #e4f6e9; font-size: 14px; font-weight: 600; }
.locale-trigger::-webkit-details-marker { display: none; }
.locale-trigger:hover, .locale-trigger[aria-expanded="true"] { background: #183823; border-color: #55976a; }
.locale-current { max-inline-size: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 23px; line-height: 1; }
.locale-trigger .locale-flag { font-size: 20px; }
.locale-trigger > svg { flex-shrink: 0; color: #97b4a1; }
.locale-panel { box-sizing: border-box; display: flex; flex-direction: column; min-block-size: 0;
  padding: 24px; background: #0c2316; color: #f0fdf4; }
.locale-picker > .locale-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 12px);
  inline-size: min(600px, calc(100vw - 44px)); z-index: 30; border: 1px solid #34553e;
  border-radius: 22px; box-shadow: 0 20px 60px #0008; }
.locale-dialog { box-sizing: border-box; inline-size: min(600px, calc(100vw - 32px)); max-inline-size: none;
  max-block-size: calc(100vh - 32px); max-block-size: calc(100dvh - 32px); margin: auto; padding: 0;
  color: #f0fdf4; background: #0c2316; border: 1px solid #34553e; border-radius: 24px;
  overflow: hidden; box-shadow: 0 24px 100px #0009; }
.locale-dialog::backdrop { background: #020d08b8; backdrop-filter: blur(5px); }
.locale-dialog .locale-panel { max-block-size: calc(100vh - 34px); max-block-size: calc(100dvh - 34px); }
.locale-heading { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-block-end: 18px; }
.locale-heading h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; text-align: start; color: inherit; }
.locale-count { padding: 4px 8px; border-radius: 8px; background: #1c3826; color: #a8c7b2;
  font-size: 12px; font-variant-numeric: tabular-nums; }
.locale-close, .locale-clear { display: grid; place-items: center; flex-shrink: 0; cursor: pointer;
  border: 0; color: #bbd1c3; background: transparent; font: inherit; }
.locale-close { inline-size: 40px; block-size: 40px; margin-inline-start: auto; border-radius: 50%; background: #193723; }
.locale-close:hover, .locale-clear:hover { background: #284d34; color: #fff; }
.locale-search { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-block-size: 48px;
  padding-inline: 14px 4px; margin-block-end: 18px; border: 1px solid #365340; border-radius: 12px; background: #071b10; }
.locale-search > svg { flex-shrink: 0; color: #95b49f; }
.locale-search:focus-within { border-color: #76c48e; box-shadow: 0 0 0 3px #4ade8018; }
.locale-search input { min-inline-size: 0; inline-size: 100%; padding: 12px 0; border: 0;
  background: transparent; color: #f0fdf4; outline: none; font: inherit; font-size: 16px; }
.locale-search input::placeholder { color: #90ad9a; }
.locale-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.locale-clear { inline-size: 40px; block-size: 40px; border-radius: 9px; font-size: 25px; }
.locale-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  min-block-size: 0; max-block-size: 380px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-color: #45694f transparent; scrollbar-width: thin; padding: 3px; margin: -3px; }
.locale-option { display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
  box-sizing: border-box; min-block-size: 68px; padding: 11px; border: 1px solid #25432f; border-radius: 12px;
  color: #e1f0e5; background: #112c1c; font: inherit; text-decoration: none; transition: background .12s, border-color .12s; }
.locale-option:hover { background: #1b3c27; border-color: #567a60; text-decoration: none; }
.locale-option[aria-current="page"] { background: #1c422b; border-color: #76c48e; }
.locale-names { display: grid; gap: 3px; min-inline-size: 0; }
.locale-autonym { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.locale-description { color: #92b09e; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.locale-check { visibility: hidden; color: #8de2a6; }
.locale-option[aria-current="page"] .locale-check { visibility: visible; }
.locale-empty { margin: 0; padding: 40px 10px; text-align: center; color: #b4cdbd; font-size: 15px; }
.locale-search[hidden], .locale-option[hidden], .locale-empty[hidden], .locale-close[hidden], .locale-clear[hidden] { display: none; }
.locale-trigger:focus-visible, .locale-option:focus-visible, .locale-close:focus-visible, .locale-clear:focus-visible {
  outline: 2px solid #8de2a6; outline-offset: 3px; }
html.locale-modal-open { overflow: hidden; }
@media (max-width: 480px) {
  .locale-panel { padding: 18px 14px; }
  .locale-dialog { border-radius: 20px; }
  .locale-heading { gap: 10px; margin-block-end: 14px; }
  .locale-heading h2 { font-size: 21px; }
  .locale-search { margin-block-end: 14px; }
  .locale-option { grid-template-columns: 23px minmax(0, 1fr) 12px; gap: 7px; padding: 10px 8px; }
  .locale-option .locale-flag { font-size: 21px; }
  .locale-autonym { font-size: 13px; }
  .locale-current { max-inline-size: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .locale-option { transition: none; } }
@media (max-width: 360px) {
  .locale-option { position: relative; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 12px; }
  .locale-option .locale-flag, .locale-names { grid-column: 1; }
  .locale-check { position: absolute; inset-inline-end: 10px; inset-block-start: 12px; }
}