/* Language picker: a flag and the language's own name in the navbar, opening
   a list of every edition of the current page. Shared by every page, so the
   privacy policy, which has its own small stylesheet, carries it too. The
   summary keeps the browser's own disclosure triangle, which turns when the
   panel opens, and the panel hangs from the bar rather than the summary, the
   same pattern as the nfcmint.com family header. */
.lang {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  flex: none;
}
.lang > summary {
  display: list-item;
  list-style-position: inside;
  width: fit-content;
  min-height: 44px;
  padding: 12px 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
}
.lang > summary::after { content: none; }
.lang[open] > summary, .lang > summary:hover { color: var(--gold); }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  vertical-align: top;
}
.lang-flag {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-panel {
  position: absolute;
  z-index: 120;
  top: 100%;
  right: 0;
  width: 220px;
  max-width: 100%;
  padding: 8px;
  background: var(--felt-deep);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
.lang-panel > nav { display: grid; }
.lang-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.lang-panel a:last-child { border-bottom: 0; }
.lang-panel a:hover { color: var(--gold); text-decoration: none; }
.lang-panel a[aria-current] {
  border-left: 3px solid var(--gold);
  padding-left: 5px;
  font-weight: 700;
}

/* The privacy policy has no navbar; a slim bar holds the way back and the
   picker. The bar is the panel's anchor there. */
.lang-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 20px 0;
}
.lang-bar .lang-home {
  font-weight: 600;
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
}
.lang-bar .lang-home:hover { text-decoration: underline; }

/* In the navbar the picker sits after the links; translated labels run
   long, so the brand never wraps and the links keep tight padding. The
   nav-wrap is positioned, so the panel lines up with the bar's right edge. */
.navbar .lang { margin-left: 12px; }
.navbar .nav-brand { white-space: nowrap; }
.navbar .lang-panel { right: 20px; }

@media (max-width: 800px) {
  .navbar .nav-brand { order: 0; }
  .navbar .lang { order: 1; margin-left: auto; margin-right: 12px; }
  .navbar .nav-toggler { order: 2; }
}

/* Phones: the flag and the triangle alone, the name stays for readers. */
@media (max-width: 480px) {
  .navbar .lang { margin-right: 8px; }
  .lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}