/* Language switch (F21.1): header dropdown, footer flag array. Flags are decorative emoji. */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary .lang-code { margin-left: .3rem; }
.lang-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 11rem; margin: 0; padding: .3rem; list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.lang-list a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .7rem; border-radius: 8px; color: var(--fg); text-decoration: none; }
.lang-list a:hover, .lang-list a:focus-visible { background: var(--bg-alt); }
.lang-list a.is-on { font-weight: 700; background: var(--bg-alt); }
.lang-flag { font-size: 1.15rem; line-height: 1; letter-spacing: .05em; }

.lang-flags { margin-top: .8rem; }
.lang-flags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .3rem; }
.lang-flags li { margin: 0; }
.lang-flags a { display: inline-flex; align-items: center; gap: .25rem; min-height: 28px; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 99px;
  color: var(--muted); text-decoration: none; background: var(--bg); font-size: .75rem; line-height: 1.2; }
.lang-flags a:hover { color: var(--accent); }
.lang-flags a.is-on { border-color: var(--accent); color: var(--fg); font-weight: 700; }
.lang-flags .lang-flag { font-size: .85rem; }
.lang-flags .lang-code { font-size: .7rem; letter-spacing: .03em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Profile > Settings: many languages wrap onto several lines. */
.seg-wrap { flex-wrap: wrap; border-radius: 18px; }
@media (max-width: 719px) {
  .lang-list { right: -2px; }
}