/* The language switcher and the translation notices. Loaded only on pages the
   server renders with more than one language available (i18n_serve.go). */

.lang-pick {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0;
}
.lang-pick select {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--panel-ink-2);
  background: linear-gradient(var(--btn2-hi), var(--btn2-lo));
  border: 1px solid var(--edge); border-radius: 4px;
  padding: 6px 8px; max-width: 12em;
}
.lang-pick select:focus-visible { outline: 2px solid var(--panel-ink); outline-offset: 1px; }
.lang-pick button {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-ink-2); padding: 6px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--edge);
  background: linear-gradient(var(--btn2-hi), var(--btn2-lo));
}
.lang-pick button[hidden] { display: none; }
.lang-note {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  color: var(--ink-5);
}

.lang-banner {
  margin: 0 0 18px; padding: 10px 12px;
  border: 1px solid rgba(60,48,28,.45); border-radius: 4px;
  background: rgba(0,0,0,.12);
  font-size: 14px;
}

@media (max-width: 720px) {
  .lang-pick { width: 100%; }
  .lang-pick select { max-width: none; flex: 1 1 auto; }
}