/* What the web adds to a guide (build_site.py links it; a standalone guide file has none of it).
   The language switch as on draften.ai: the current language by its own name, opening the list
   of all languages. The same rules are in portal.css; the colours are the guide's theme tokens. */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;
 padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-btn,10px);
 font:inherit;font-size:14px;color:var(--ink);background:var(--surface)}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 2px 0 4px}
.lang-menu[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:50;list-style:none;margin:0;
 padding:6px;min-width:170px;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--r-panel,12px);box-shadow:var(--shadow-lift,0 4px 10px rgba(27,27,31,.08))}
.lang-menu li{margin:0}
.lang-menu a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
.lang-menu a:hover{background:var(--hover,var(--line-soft))}
.lang-menu a[aria-current]{font-weight:500}
@media (max-width:560px){.lang-menu summary span{display:none}}
/* long German compounds in headings would overflow a phone */
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto}