/* Language switcher (web/_lang_switch.html) component styles.
   Shared by every app-shell page (imported from web/styles.css) and the landing
   page (linked directly, since index.html is its own self-contained stylesheet
   per design.md) — one file, so the control looks identical everywhere it's
   included instead of two hand-kept copies drifting apart. Values are the
   design system's tokens, hardcoded rather than read from a CSS custom
   property, since the two host stylesheets don't share a variable naming
   convention (--color-charcoal vs --charcoal).

   A field-style trigger opening a flat popover, the same treatment design.md
   gives the Date Range Dropdown: white surface, 1px #e5e7eb border, 12px
   radius, no shadow. The flag makes the current language recognizable at a
   glance; the chevron rotates open like every other disclosure control in
   the system. */
.lang-switch { position: relative; }

.lang-switch__trigger {
  display: flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid #e5e7eb;
  border-radius: 6px; padding: 6px 10px;
  font-family: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px; font-weight: 500; color: #333333;
  cursor: pointer; line-height: 1;
}
.lang-switch__trigger:hover { border-color: #545454; }
.lang-switch__trigger:focus-visible { outline: 2px solid #e35d6a; outline-offset: 2px; }
.lang-switch__flag { font-size: 15px; line-height: 1; }
.lang-switch__chevron { color: #767676; transition: transform 0.15s ease; }
.lang-switch__trigger[aria-expanded="true"] .lang-switch__chevron { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 160px; margin: 0; padding: 6px; list-style: none;
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  font-family: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; font-weight: 500; color: #333333;
  text-decoration: none;
}
a.lang-switch__option:hover { background: #f9f9fb; color: #e35d6a; }
a.lang-switch__option:focus-visible { outline: 2px solid #e35d6a; outline-offset: -2px; }
.lang-switch__option.is-current { color: #545454; cursor: default; }
.lang-switch__option .lang-switch__flag { font-size: 17px; }

@media (max-width: 720px) {
  .lang-switch__trigger { padding: 6px 8px; }
}