/* ---------- OpenYardage · Sprache/Einheiten-Umschalter ----------
   Gehört zu public/js/i18n.js (MIGRATION-PLAN Abschnitt 4 C).
   Einbindung:  <link rel="stylesheet" href="css/i18n.css">
   Design-Tokens aus index.html werden per var(--x, fallback) benutzt, das
   Stylesheet funktioniert aber auch ohne sie (Fallbacks = Werte aus Abschnitt 2).

   Kontexte:
     .topbar .oy-i18n        dunkle Leiste (Ink-Hintergrund) — greift automatisch
     .oy-i18n--dark          dieselbe Optik erzwingen
     .oy-i18n / --light      helle Karten-Optik (Papier/Card)
   Die Klassenselektoren sind absichtlich zweistufig (.oy-i18n .oy-i18n-b),
   damit sie die globale button-Regel aus index.html sicher überschreiben.
*/

.oy-i18n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  line-height: 1;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
}

.oy-i18n .oy-i18n-seg {
  display: inline-flex;
  border: 1.5px solid var(--ink, #21251f);
  border-radius: 3px;
  overflow: hidden;
  background: var(--card2, #fffdf7);
}

.oy-i18n .oy-i18n-b {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 9px;
  margin: 0;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--faint, #8a8170);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.oy-i18n .oy-i18n-b + .oy-i18n-b { border-left: 1px solid var(--line, #d8d1c0); }

.oy-i18n .oy-i18n-b:hover { background: var(--line3, #eee8da); color: var(--ink2, #4a463c); }

.oy-i18n .oy-i18n-b.is-on,
.oy-i18n .oy-i18n-b.is-on:hover {
  background: var(--ink, #21251f);
  color: #f5f1e6;
  cursor: default;
}

.oy-i18n .oy-i18n-b:focus { outline: none; }
.oy-i18n .oy-i18n-b:focus-visible {
  outline: 2px solid var(--green, #2f6b46);
  outline-offset: -2px;
}

/* ---------- Dunkle Topbar (Ink-Hintergrund) ---------- */
.topbar .oy-i18n .oy-i18n-seg,
.oy-i18n--dark .oy-i18n-seg {
  border: 1px solid var(--ink2, #4a463c);
  background: transparent;
}

.topbar .oy-i18n .oy-i18n-b,
.oy-i18n--dark .oy-i18n-b {
  color: #b8b09c;
  background: none;
}

.topbar .oy-i18n .oy-i18n-b + .oy-i18n-b,
.oy-i18n--dark .oy-i18n-b + .oy-i18n-b { border-left: 1px solid var(--ink2, #4a463c); }

.topbar .oy-i18n .oy-i18n-b:hover,
.oy-i18n--dark .oy-i18n-b:hover { background: rgba(245, 241, 230, .12); color: #f5f1e6; }

.topbar .oy-i18n .oy-i18n-b.is-on,
.topbar .oy-i18n .oy-i18n-b.is-on:hover,
.oy-i18n--dark .oy-i18n-b.is-on,
.oy-i18n--dark .oy-i18n-b.is-on:hover {
  background: #f5f1e6;
  color: var(--ink, #21251f);
}

.topbar .oy-i18n .oy-i18n-b:focus-visible,
.oy-i18n--dark .oy-i18n-b:focus-visible { outline-color: var(--green-lt, #8fc98f); }

/* ---------- Helle Karten-Optik erzwingen (z. B. über dem Diagramm) ---------- */
.oy-i18n--light .oy-i18n-seg {
  border: 1.5px solid var(--ink, #21251f);
  background: var(--card2, #fffdf7);
}
.oy-i18n--light .oy-i18n-b { color: var(--faint, #8a8170); }
.oy-i18n--light .oy-i18n-b.is-on { background: var(--ink, #21251f); color: #f5f1e6; }

/* ---------- Varianten ---------- */
.oy-i18n--compact { gap: 5px; }
.oy-i18n--compact .oy-i18n-b { font-size: 10px; padding: 4px 7px; letter-spacing: .08em; }

.oy-i18n--stack { flex-direction: column; align-items: stretch; gap: 6px; }

/* Optionale Beschriftung davor: <span class="oy-i18n-lbl">SPRACHE</span> */
.oy-i18n-lbl {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint, #8a8170);
}
.topbar .oy-i18n-lbl { color: #8a8170; }

/* ---------- Schmale Viewports ---------- */
@media (max-width: 560px) {
  .oy-i18n { gap: 6px; }
  .oy-i18n .oy-i18n-b { font-size: 10.5px; padding: 5px 7px; letter-spacing: .06em; }
}

/* ---------- Druck: Umschalter gehören nie aufs Papier ---------- */
@media print {
  .oy-i18n, .oy-i18n-lbl { display: none !important; }
}