/* Language switcher (top right of every page). Uses each page's own colour tokens. */
.navr { display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: 600 14px/1 var(--sans); cursor: pointer; }
.lang-btn:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.lang-btn:focus-visible, .lang-menu a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.lang .flag { font-size: 18px; line-height: 1; }
.lang .chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(10,20,60,.35); }
.lang-menu[hidden] { display: none; }
.lang-menu a, .lang-menu .off { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--text); }
.lang-menu a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.lang-menu [aria-current="true"] { font-weight: 700; }
.lang-menu .off { opacity: .5; cursor: default; }
.lang-menu small { margin-left: auto; font-size: 12px; color: var(--muted); }