/* Language menu and the translation note. Written by hand; tool/i18n.py links it from every page. */
:root{--lm-text:var(--cream);--lm-muted:var(--muted);--lm-card:var(--ink-3);--lm-line:var(--line-strong);--lm-hover:rgba(240,203,99,.10);--lm-accent:var(--gold-hi)}
.langmenu{position:relative;margin:0;flex:none}
.langmenu>summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;list-style:none;cursor:pointer;border-radius:999px;color:var(--lm-text);font-size:.9rem;font-weight:500;white-space:nowrap;transition:background .15s}
.langmenu>summary::-webkit-details-marker{display:none}
.langmenu>summary:hover,.langmenu[open]>summary{background:var(--lm-hover)}
.langmenu svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.langmenu>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 2px 0 1px;opacity:.7}
.langmenu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;min-width:11.5rem;max-height:calc(100vh - 84px);overflow-y:auto;background:var(--lm-card);border:1px solid var(--lm-line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.langmenu li{margin:0;padding:0}
.langmenu li a,.langmenu li a:not(.head-link){display:flex;align-items:center;min-height:44px;margin:0;padding:0 12px;border-radius:9px;color:var(--lm-text);font-size:.95rem;font-weight:500;text-decoration:none;white-space:nowrap}
.langmenu li a:hover{background:var(--lm-hover)}
.langmenu li a[aria-current]{color:var(--lm-accent);font-weight:700}
.langmenu li a[aria-current]::after{content:"\2713";margin-left:auto;padding-left:16px}
/* On a phone the button is the globe alone; the menu still names every language. */
@media (max-width:640px){.langmenu>summary>span{display:none}.langmenu>summary{padding:0 8px}}
.i18n-note{font-size:.92rem;color:var(--lm-muted);border-left:3px solid var(--lm-line);padding:2px 0 2px 12px}
@media (max-width:560px){.head-nav .langmenu li a:not(.head-link){display:flex}}
/* A translated heading can hold one word longer than a phone is wide ("Datenschutzerklärung"). */
html:not([lang=en]) :is(h1,h2,h3){overflow-wrap:break-word;hyphens:auto}
/* "Descarga la app" and "Télécharger l'app" are wider than "Get the app": make room for them and the globe at 320 px. */
@media (max-width:400px){.head-in{gap:6px}.brand{flex:none}.head-nav{gap:0}.head-nav .head-link{margin-inline-start:0;padding:9px 12px}.langmenu>summary{padding:0 6px}.langmenu>summary::after{display:none}}
/* Korean breaks lines between words, not inside them. */
html[lang=ko] body{word-break:keep-all}