/* "The usual" (round 8): language icon, Light · Dark pill, dinner popup. Skin with these variables on :root or any parent:
   --u-ink (text on the popup/menu), --u-ground (popup/menu ground), --u-line, --u-accent, --u-font (text face), --u-display (popup title face),
   --u-chip (backdrop chip behind icons over photo/video), --u-on (icon colour over photo). */
:root{--u-ink:#26231f;--u-ground:#faf7f1;--u-line:rgba(38,35,31,.14);--u-accent:#b4955c;--u-font:inherit;--u-display:inherit;--u-chip:rgba(20,18,15,.34);--u-on:#fffaf2;--u-ease:cubic-bezier(.2,.7,.2,1)}
.u-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* language: one icon */
.u-lang{position:relative;display:inline-flex}
.u-lang-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--u-chip);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--u-on);cursor:pointer;transition:background .3s var(--u-ease)}
.u-lang-btn:hover{background:rgba(20,18,15,.5)}
.u-lang-btn svg{width:19px;height:19px}
.u-lang-btn:focus-visible,.u-mode:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.u-lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:90;list-style:none;margin:0;padding:6px;min-width:150px;background:var(--u-ground);color:var(--u-ink);border:1px solid var(--u-line);border-radius:4px;box-shadow:0 20px 40px -24px rgba(20,18,15,.5);text-align:left}
.u-lang-menu li{margin:0}
.u-lang-menu span{display:block;padding:9px 12px;font:500 14px/1.2 var(--u-font);letter-spacing:0;text-transform:none}
.u-lang-menu [aria-current]{font-weight:700}
.u-lang-menu small{opacity:.6;font-size:12px}
/* on a light bar: no chip, ink icon */
.u-flat .u-lang-btn,.u-lang.u-flat .u-lang-btn{background:transparent;color:inherit;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Light · Dark pill: both states labelled, the active one filled */
.u-mode{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:var(--u-chip);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--u-on);cursor:pointer;font:600 11px/1 var(--u-font);letter-spacing:.08em;text-transform:uppercase}
.u-mode>span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;opacity:.72;transition:background .3s var(--u-ease),color .3s var(--u-ease)}
.u-mode svg{width:14px;height:14px}
.u-mode[aria-pressed=false] .u-ml,.u-mode[aria-pressed=true] .u-md{background:var(--u-on);color:#1e1d1b;opacity:1}
@media (max-width:560px){.u-mode>span>span{display:none}.u-mode>span{padding:7px}}

/* Decompression Dinner popup */
.u-dinner{position:fixed;right:clamp(12px,2.5vw,32px);bottom:clamp(12px,2.5vw,32px);z-index:80;width:min(320px,calc(100vw - 24px));padding:18px 20px 18px;display:grid;gap:8px;background:var(--u-ground);color:var(--u-ink);border:1px solid var(--u-line);border-radius:4px;box-shadow:0 30px 60px -30px rgba(20,18,15,.55);font-family:var(--u-font);transform:translateY(16px);opacity:0;visibility:hidden;transition:opacity .5s var(--u-ease),transform .5s var(--u-ease),visibility 0s .5s}
.u-dinner.u-show{opacity:1;transform:none;visibility:visible;transition:opacity .5s var(--u-ease),transform .5s var(--u-ease)}
.u-dinner p{margin:0}
.u-dinner .u-x{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.u-dl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;padding-right:28px}
.u-dt{font:400 24px/1.1 var(--u-display)}
.u-dd{font-size:14px;line-height:1.5;opacity:.85}
.u-dk{justify-self:start;margin-top:4px;color:inherit;font-weight:600;font-size:14px;text-decoration:underline;text-decoration-color:var(--u-accent);text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.u-dinner,.u-dinner.u-show{transition:none;transform:none}}
@media print{.u-dinner{display:none}}
/* bottom docks: add .u-up to .u-lang to open the menu upward; set --u-dinner-bottom to clear a fixed bottom bar */
.u-lang.u-up .u-lang-menu{top:auto;bottom:calc(100% + 8px)}
.u-dinner{bottom:var(--u-dinner-bottom,clamp(12px,2.5vw,32px))}
/* web-interface-guidelines pass: no double-tap zoom delay on the kit's controls; popup label ≥ 12px */
.u-lang-btn,.u-mode,.u-dinner .u-x{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.u-dl{font-size:12px}