/* LANGUAGE COMPONENTS — ported verbatim from the 31 Aug 2026 Language Components export.
 * Values are the export's declared CSS, which it states is authoritative over the screenshots. */

/* ── Header switcher ─────────────────────────────────────────────────────────
 * 2 September 2026 ruling (owner-confirmed, export 1234567ccd): HEADER only, never the footer, and
 * flags in front everywhere. `.ft-bot` is a plain disclaimer row again — the footer switcher's rules
 * are DELETED, not disabled, so a future export cannot find a styled dormant control and assume it
 * was meant to be there. That is exactly how the abandoned 21 Aug header switcher survived in
 * polish.css for two weeks after its markup went. */
.ft-bot .disc { max-width: 640px; }

.hdr-lang { position: relative; flex-shrink: 0; }

/* Two mounts, one visible at a time. Desktop lives in .hdr-actions immediately left of
   Sign in/account; mobile lives in the header bar beside the burger. */
.hdr-lang-m { display: none; }
@media (max-width: 900px) {
  .hdr-lang-d { display: none; }
  .hdr-lang-m { display: block; }
}

/* Closed control: flag + UPPERCASE language code + chevron. Light header context, so the border and
   text are the page's own tokens rather than the footer's white-on-navy. */
.hdr-lang .hdr-lang-btn {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease;
}
.hdr-lang .hdr-lang-btn:hover,
.hdr-lang .hdr-lang-btn:focus-visible { border-color: var(--ink); }

/* The flag sits optically high against uppercase letterforms; the export nudges it 1.5px down. */
.hdr-lang-flag { font-size: 13px; line-height: 1; transform: translateY(1.5px); }
.hdr-lang-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hdr-lang .hdr-lang-chev { flex-shrink: 0; }

/* Opens DOWNWARD — the control is at the top of the page now. Right-aligned on desktop because the
   cluster sits at the right edge; left-aligned on mobile because it sits at the left. TWO COLUMNS:
   fifteen native names in one column is a scroll. */
.hdr-lang .hdr-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(13, 15, 26, .14);
  z-index: 120;
}
.hdr-lang-m .hdr-lang-menu { right: auto; left: 0; }
.hdr-lang .hdr-lang-menu[hidden] { display: none; }

.hdr-lang-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 9px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.hdr-lang-row:hover { background: var(--off); }
.hdr-lang-row.on { background: var(--off); color: var(--navy); }
.hdr-lang-rowflag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.hdr-lang-row .hdr-lang-label { flex: 1; min-width: 0; }
.hdr-lang-check { margin-left: auto; flex-shrink: 0; }

/* The 901–1024px squeeze: nav, three actions and a logo on one row. The export trims the button's
   horizontal padding rather than dropping the control. */
@media (min-width: 901px) and (max-width: 1024px) {
  .hdr-lang .hdr-lang-btn { padding: 0 7px; }
}
@media (max-width: 640px) {
  .hdr-lang .hdr-lang-btn { height: 32px; padding: 0 8px; }
  .hdr-lang-code { font-size: 11px; }
}

/* ── Entry-gate language field ───────────────────────────────────────────────
 * A DROPDOWN, styled as the country field directly above it — 2 September 2026 ruling
 * (owner-confirmed, export 1234567ccd). It replaces the one-tap pill row of 31 Aug.
 *
 * The pill rules are DELETED. They were the third styling this one field has carried, and leaving
 * them would mean the gate had two complete language controls in CSS and one in markup — the same
 * residue that let an abandoned header switcher look intentional for two weeks.
 *
 * No .gate-field select rule is added here: the country field's own styling already covers it,
 * which is the point of making the two fields the same control. Anything added here would make
 * them drift.
 *
 * The flag lives inside the <option> text, because an <option> cannot contain elements. That is why
 * the field needs no flag rule at all — the glyph is part of the string. */
.gate-field select[data-gate-lang-select] option { font-size: 14px; }

/* The no-JS fallback: a plain row of language links under the field. Never seen with scripting on. */
.gate-field noscript .gate-fine { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }