/**
 * Govli AI FOIA Module - Language Selector Styles
 * AI-10: Multilingual interface styling
 */

.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

/* ── SLICE E4 — THE COMPACT LANGUAGE AFFORDANCE ───────────────────────────
 *
 * THE DEFECT. This stylesheet was written for a LIGHT page: the label is
 * `#374151` (dark slate) and the dropdown is `background-color: white`. Every
 * page that actually mounts it is a DARK citizen header with
 * `<body class="text-white">` — so the select inherited WHITE text onto its
 * WHITE background. Measured on the public tracking page: background
 * `rgb(255,255,255)`, text `rgb(255,255,255)`. The selected language was
 * invisible in a 326x40px blank pill, with a dark-slate label beside it on a
 * dark header. On four public pages, including the one a citizen reaches from
 * an emailed link.
 *
 * THE SHAPE OF THE FIX, and why the <select> survives underneath. The visible
 * control is a compact globe + language code. The real control is still the
 * native <select>, laid over the face at `opacity: 0` — so every behaviour that
 * keys off it is untouched: the change handler, `data-i18n` updates, the RTL
 * flip, keyboard operation, and the screen-reader name from the (visually
 * hidden) <label>. Rebuilding it as a custom menu would have meant rebuilding
 * all of that, and the i18n layer is not the place to be inventive.
 *
 * AND THE ROOT CAUSE IS CLOSED, not just covered: the select declares its own
 * `color` and `background-color`, so the page's inherited `text-white` can
 * never again reach the option list. That is what made it invisible; a smaller
 * button alone would have left the popup white-on-white.
 */
.govli-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;              /* overrides .language-selector's 1rem block margin */
  gap: 0;
}

/* The <label> stays in the DOM and out of the picture: it is the select's
   accessible name, and it carries the data-i18n key that translates it. */
.govli-lang-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The face is decorative — aria-hidden, never focusable. Colours are declared
   against a dark header rather than inherited, which is the mistake above. */
.govli-lang-face {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.govli-lang:hover .govli-lang-face {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

.govli-lang-globe {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.govli-lang-code {
  letter-spacing: 0.04em;
}

/* The real control, laid over the face. Invisible, fully operable, and — the
   part that matters — carrying its OWN colours so the option popup is dark ink
   on white however the host page styles its text. */
.govli-lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  color: #111827;
  background-color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
}

.govli-lang-select option {
  color: #111827;
  background-color: #ffffff;
}

/* Focus is invisible on an opacity-0 element, so it is drawn on the face. The
   select precedes the face in the DOM precisely so this sibling rule works
   without :has(). */
.govli-lang-select:focus-visible ~ .govli-lang-face {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

/* The compact control is already narrow; the stacked mobile rule for the old
   wide selector must not apply to it. */
@media (max-width: 640px) {
  .govli-lang {
    flex-direction: row;
    align-items: center;
  }

  .govli-lang-select {
    width: 100%;
  }
}

.language-selector-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

.language-selector-dropdown {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  appearance: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.language-selector-dropdown:hover {
  border-color: #9ca3af;
}

.language-selector-dropdown:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* RTL Support for Arabic */
/*
 * NOTE: do NOT add `flex-direction: row-reverse` to these containers. Under
 * dir="rtl" a plain flex row ALREADY lays out right-to-left; adding
 * row-reverse reverses it a second time, back to LTR reading order inside an
 * RTL page. That bug shipped here once and put the selector's label to the
 * LEFT of its dropdown in Arabic — the one component the rule existed to fix.
 * The direction flip is inherited; only direction-agnostic properties
 * (padding, background-position, border side) need explicit RTL rules.
 */
[dir="rtl"] .language-selector-dropdown {
  background-position: left 0.5rem center;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
}

/*
 * RTL coverage for the citizen pages themselves.
 *
 * The pages are built on Tailwind utilities that are PHYSICAL, not logical:
 * `mr-2` is always margin-right, `border-l-4` is always a left border, and
 * `space-x-*` sets margin-left on every child but the first. None of them
 * follow dir="rtl", so under Arabic the icons jam against their labels
 * (measured gap: 0px), accent bars stay on the wrong edge, and flex rows lose
 * their gutters. These rules flip the ones actually used on the 5 citizen
 * pages. Scoped to [dir="rtl"], so nothing changes for the other 9 languages.
 */
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }

[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0;
  margin-right: 0.25rem;
}
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0;
  margin-right: 0.5rem;
}
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0;
  margin-right: 0.75rem;
}
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .border-l-4 {
  border-left-width: 0;
  border-right-width: 4px;
}

/* `text-right` here means "align to the end of the line", which under RTL is
   the physical left. Without this the column reads as start-aligned. */
[dir="rtl"] .text-right { text-align: left; }

/* Responsive design */
@media (max-width: 640px) {
  .language-selector {
    flex-direction: column;
    align-items: flex-start;
  }

  .language-selector-dropdown {
    width: 100%;
  }

}

/* Accessibility */
.language-selector-dropdown:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/*
 * F11a (2026-08-31): the `.translation-*` rules are DELETED.
 *
 * They styled a button and a result panel that `addTranslationButton()` created
 * - a helper nothing called, posting to a route that returned 404. Ruled at the
 * F11 review: presentation for a feature that does not exist is F11 in
 * miniature, and if the translation arc (F11c) is ever commissioned it will be
 * rewritten regardless. `@keyframes spin` went with them; nothing else used it.
 *
 * The ten `translation.*` keys in each i18n bundle are KEPT, deliberately: a
 * string nobody renders is inert content, not a surface, and deleting 100
 * bundle entries ahead of a counsel ruling is churn. They are accounted for in
 * the F11c filing (backend/src/seed-letter-templates/illinois.json).
 */