/**
 * Language switcher — fixed top-right.
 *
 * It used to be a row of two-letter links buried inside the dock menu and at
 * the bottom of the footer. Nobody found it there, which is the same as not
 * having translations. The button now sits in the corner people look at first,
 * and the panel is the only place the full list has to live.
 */

.tk-lsw {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 99990;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* The WP toolbar is 32px tall and fixed; do not hide the button under it. */
body.admin-bar .tk-lsw {
	top: 48px;
}

.tk-lsw__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 11px 7px 13px;
	border: 1px solid rgb(255 255 255 / .14);
	border-radius: 999px;
	background: rgb(9 11 22 / .55);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	box-shadow: 0 6px 22px rgb(0 0 0 / .35);
	color: rgb(223 241 246 / .88);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.tk-lsw__btn:hover,
.tk-lsw__btn[aria-expanded="true"] {
	border-color: rgb(155 124 246 / .55);
	background: rgb(155 124 246 / .16);
	color: #fff;
}

.tk-lsw__btn:focus-visible {
	outline: 2px solid rgb(155 124 246 / .8);
	outline-offset: 2px;
}

.tk-lsw__chev {
	width: 13px;
	height: 13px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .7;
	transition: transform .25s ease;
}

.tk-lsw__btn[aria-expanded="true"] .tk-lsw__chev {
	transform: rotate(180deg);
}

/* ---------- panel ---------- */

.tk-lsw__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: min(330px, calc(100vw - 32px));
	max-height: min(62vh, 470px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / .12);
	border-radius: 16px;
	background: rgb(8 10 20 / .94);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 22px 60px rgb(0 0 0 / .55);
	animation: tkLswIn .18s ease both;
}

.tk-lsw__panel[hidden] {
	display: none;
}

@keyframes tkLswIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tk-lsw__top {
	padding: 10px 10px 8px;
	border-bottom: 1px solid rgb(255 255 255 / .07);
}

/* Scoped to the panel id so Astra's form-control rules (which set a light
   background and dark slate text) cannot repaint the field inside the dark
   panel. */
#tkLangPanel .tk-lsw__search {
	width: 100%;
	padding: 8px 11px;
	border: 1px solid rgb(255 255 255 / .12);
	border-radius: 9px;
	/* Chromium paints input[type=search] with its own light-field background
	   unless the native appearance is turned off — on a near-black panel that
	   reads as a white slab. */
	-webkit-appearance: none;
	appearance: none;
	background-color: rgb(255 255 255 / .06);
	color-scheme: dark;
	color: rgb(223 241 246 / .92);
	font-size: 12.5px;
	font-family: inherit;
	line-height: 1.4;
	box-sizing: border-box;
}

.tk-lsw__search::-webkit-search-cancel-button,
.tk-lsw__search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

#tkLangPanel .tk-lsw__search::placeholder {
	color: rgb(223 241 246 / .38);
}

#tkLangPanel .tk-lsw__search:focus {
	outline: none;
	border-color: rgb(155 124 246 / .6);
	background-color: rgb(255 255 255 / .09);
}

/* ---------- room for the button in the hero HUD ----------
   The home page pins its "Today's free energy" counter to the right edge of
   the HUD, which is exactly where the switcher now sits. Reserve the space
   instead of letting the two overlap. */

body .tk-imm__hud {
	padding-right: 100px;
}

.tk-lsw__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 10px 12px;
}

.tk-lsw__group[hidden] {
	display: none;
}

.tk-lsw__glabel {
	margin: 8px 4px 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgb(155 124 246 / .85);
}

.tk-lsw__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3px;
}

.tk-lsw__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 9px;
	color: rgb(223 241 246 / .74);
	font-size: 12.5px;
	line-height: 1.25;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease;
}

.tk-lsw__item[hidden] {
	display: none;
}

.tk-lsw__item:hover {
	background: rgb(255 255 255 / .07);
	color: #fff;
}

.tk-lsw__item.is-on {
	background: rgb(155 124 246 / .18);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgb(155 124 246 / .35);
}

.tk-lsw__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tk-lsw__item em {
	flex: none;
	font-size: 9.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .08em;
	color: rgb(223 241 246 / .38);
}

.tk-lsw__item.is-on em {
	color: rgb(155 124 246 / .95);
}

.tk-lsw__none {
	margin: 14px 4px;
	font-size: 12px;
	color: rgb(223 241 246 / .45);
}

.tk-lsw__none[hidden] {
	display: none;
}

/* ---------- phone ---------- */

@media (max-width: 640px) {
	.tk-lsw {
		top: 10px;
		right: 10px;
	}

	body.admin-bar .tk-lsw {
		top: 56px;
	}

	.tk-lsw__btn {
		padding: 6px 9px 6px 11px;
		font-size: 11px;
	}

	.tk-lsw__panel {
		width: min(300px, calc(100vw - 20px));
		max-height: min(64vh, 420px);
	}

	/* Keep the list two columns but let long names use the room. */
	.tk-lsw__grid {
		gap: 2px;
	}

	.tk-lsw__item {
		padding: 9px 8px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tk-lsw__panel {
		animation: none;
	}
	.tk-lsw__chev {
		transition: none;
	}
}