/* The languages (WM-0211 DESIGN.md §3a, §5; WM-0212 §12): linked only on a
   page served in two or more languages, so a page in English only keeps its
   head and look. The switchers in the header and the footer; the notice
   under the header that the app is in English; a translated legal page's
   note that the English version prevails. */

/* The switcher: a disclosure like the header's menu, its trigger the current
   language's own name, its links 44 px targets in the footer's style. */
.foot-langs { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
.foot-langs ~ .foot-credit { grid-row: 4; }
.foot-langs summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
}
.foot-langs summary::-webkit-details-marker { display: none; }
/* A small triangle: down while closed, up while open. */
.foot-langs summary::after {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.foot-langs details[open] > summary::after {
  border-top: 0;
  border-bottom: 6px solid currentColor;
}
.foot-langs ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.foot-langs a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-langs a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .foot-langs { grid-row: 5; margin-top: 16px; }
  .foot-langs ~ .foot-credit { grid-row: 6; }
}
@media (max-width: 767px) {
  .foot-langs ul { flex-direction: column; gap: 4px; }
}

/* The header's switcher (WM-0212 DESIGN.md §12): a globe and the language's
   code after the links, its list hanging below it, right-aligned. On phones
   it sits beside Menu; below 400 px Menu shows its icon only (its word stays
   for screen readers), below 380 px the round icon beside the wordmark steps
   aside, and below 360 px the globe's sides narrow: no wrap and no sideways
   scroll at 320 px, every target 44 x 44. The code is shown as written in
   site.toml, never cased here. */
.top.has-langs .nav-wide { margin-left: auto; }
.top.has-langs .brand { flex: none; }
.top-langs { position: relative; }
.top-langs summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  font-weight: 650;
}
.top-langs summary::-webkit-details-marker { display: none; }
.top-langs-globe { flex: none; }
.top-langs ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 96;
  width: max-content;
  min-width: 180px;
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: 8px 18px;
  list-style: none;
  border: 1px solid var(--edge);
  border-radius: 15px;
  background: var(--card);
  box-shadow: 0 12px 30px rgb(90 69 51 / 0.1);
}
.top-langs a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.top-langs a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .top.has-langs { gap: 8px; }
  .top-langs { margin-left: auto; }
}
@media (max-width: 399px) {
  .has-langs .menu summary { justify-content: center; min-width: 44px; padding: 0; }
  .has-langs .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 379px) { .has-langs .brand::before { display: none; } }
@media (max-width: 359px) { .top-langs summary { padding: 0 4px; } }

/* The app is in English: one quiet line under the header, in the page's
   width. */
.app-language {
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto 16px;
  padding: 10px 16px;
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--card);
  font-size: 14px;
  line-height: 22px;
}

/* A translated legal page: the English version prevails, above the text. */
.prose .legal-english {
  margin: 0 0 32px;
  padding: 12px 16px;
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  background: var(--card);
}