/* The skin switcher in the top bar (every skin). Skin looks themselves live in ember-base.css and ember-skin.css. */
.skin-switch { position: relative; }
.skin-button { display: inline-grid; place-items: center; }
.skin-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; width: 236px; padding: 6px; display: grid; gap: 2px; background: var(--navy-850, #0a1c2b); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.skin-menu[hidden] { display: none; }
.skin-menu button { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #e6eef2; text-align: left; }
.skin-menu button:hover, .skin-menu button:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.skin-menu button[aria-checked="true"] { background: rgba(158,209,210,.14); }
.skin-menu strong { display: block; font-size: 13px; }
.skin-menu small { display: block; margin-top: 2px; color: #9dafbb; font-size: 11px; }
.skin-swatch { width: 18px; height: 18px; border-radius: 4px; display: block; }
.skin-swatch.default { background: linear-gradient(135deg, #f4f7f8 0 50%, #071522 50% 100%); border: 1px solid rgba(255,255,255,.3); }
.skin-swatch.ember { background: linear-gradient(135deg, #0b0c0d 0 58%, #ff4d00 58% 100%); border: 1px solid rgba(255,255,255,.3); }

/* The language switcher borrows the skin menu's look; its rows carry no swatch, and the button reads the code. */
.lang-switch { position: relative; }
.lang-button { display: inline-grid; place-items: center; font: 600 11px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .08em; }
.lang-menu { width: 264px; }
.lang-menu button { grid-template-columns: 1fr; }