/* ==========================================================================
   Adult OT — Component foundation

   Two audiences:
     1. `.aot-*` classes authored by this theme;
     2. the legacy class names MyAAC's core templates already emit
        (TableContent, LabelV, TableContentContainer, ...). Those are styled
        here so every existing page inherits the theme with no Twig override.
   ========================================================================== */

/* ============================================================ panels ===== */

.aot-panel {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	box-shadow: var(--aot-shadow-sm);
	margin-bottom: var(--aot-space-5);
	overflow: hidden;
}

.aot-panel--raised { background: var(--aot-surface-raised); }
.aot-panel--accent { border-color: var(--aot-border-accent); }
.aot-panel--critical { border-color: var(--aot-crimson); }

.aot-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aot-space-3);
	padding: var(--aot-space-3) var(--aot-space-4);
	background: linear-gradient(180deg, rgba(32, 36, 42, .9), rgba(23, 26, 30, .9));
	border-bottom: 1px solid var(--aot-border);
}

.aot-panel__title {
	margin: 0;
	font-family: var(--aot-font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aot-text);
}

.aot-panel__body { padding: var(--aot-space-4); }

/* Section heading with a restrained gothic divider. Ornament is an accent,
   not a frame around every component. */
.aot-section-title {
	display: flex;
	align-items: center;
	gap: var(--aot-space-3);
	margin: 0 0 var(--aot-space-4);
	font-family: var(--aot-font-display);
	font-size: var(--aot-h3);
	color: var(--aot-text);
}

.aot-section-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--aot-border-accent), transparent);
}

/* =========================================================== buttons ===== */

.aot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aot-space-2);
	min-height: 42px;
	padding: 10px 22px;
	font-family: var(--aot-font-ui);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--aot-radius-sm);
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.aot-btn:hover { text-decoration: none; }
.aot-btn:active { transform: translateY(1px); }

.aot-btn--primary {
	color: #14100A;
	background: linear-gradient(180deg, var(--aot-bronze-hi), var(--aot-bronze) 55%, var(--aot-bronze-lo));
	border-color: var(--aot-bronze-lo);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--aot-shadow-sm);
}

.aot-btn--primary:hover {
	color: #14100A;
	background: linear-gradient(180deg, #E0BE85, var(--aot-bronze-hi) 55%, var(--aot-bronze));
}

.aot-btn--secondary {
	color: var(--aot-text);
	background: var(--aot-surface-raised);
	border-color: var(--aot-bronze-muted);
}

.aot-btn--secondary:hover {
	color: var(--aot-text);
	border-color: var(--aot-bronze);
	background: var(--aot-bronze-subtle);
}

.aot-btn--danger {
	color: var(--aot-text);
	background: linear-gradient(180deg, var(--aot-crimson), var(--aot-wine));
	border-color: var(--aot-crimson);
}

.aot-btn--danger:hover { background: linear-gradient(180deg, #A02536, var(--aot-crimson)); }

.aot-btn[disabled],
.aot-btn--disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
	filter: grayscale(.4);
}

.aot-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aot-space-3);
}

/* MyAAC core emits plain submit buttons and legacy Bootstrap-ish button
   classes on some public pages. Give them the same language. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn {
	font-family: var(--aot-font-ui);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	color: #14100A;
	background: linear-gradient(180deg, var(--aot-bronze-hi), var(--aot-bronze) 55%, var(--aot-bronze-lo));
	border: 1px solid var(--aot-bronze-lo);
	border-radius: var(--aot-radius-sm);
	padding: 9px 18px;
	min-height: 40px;
	cursor: pointer;
	transition: background .15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
	background: linear-gradient(180deg, #E0BE85, var(--aot-bronze-hi) 55%, var(--aot-bronze));
}

button[disabled],
input[type="submit"][disabled],
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* the nav toggle is a button but must keep its own styling */
.aot-nav-toggle,
.aot-nav__label {
	background: none;
	color: inherit;
	border-radius: 0;
	min-height: 0;
}

.aot-nav-toggle {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
	color: var(--aot-text);
}

.aot-nav-toggle:hover { background: var(--aot-surface-raised); }
.aot-nav__label:hover { background: none; }

/* ============================================================= forms ===== */

label { color: var(--aot-text-secondary); font-size: var(--aot-small); }

/*
 * `input:not([type])` is not padding — it is the fix for a real, reported bug.
 *
 * An <input> with NO type attribute behaves as type=text, but the attribute
 * selector `input[type="text"]` matches the ATTRIBUTE, not the effective type,
 * so such a field matched none of the rules below and fell back to the browser
 * default: white ground, dark text. On this theme that is unreadable.
 *
 * Upstream ships exactly that markup for the character-name field:
 *
 *     system/templates/account.create.html.twig:131
 *     system/templates/account.characters.create.html.twig:49
 *     system/templates/account.characters.change-name.html.twig:25
 *
 * all three written `<input id="character_name" name="name" …>` with no type,
 * which is why Character Name was the one illegible box on an otherwise dark
 * registration form.
 *
 * Fixed HERE rather than by adding type="text" to three upstream templates:
 * presentation is the theme's job, this covers every page at once, and it keeps
 * covering any future untyped input instead of waiting for the next report. No
 * upstream file is touched and no inline style is used.
 */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-control {
	width: auto;
	max-width: 100%;
	padding: 10px 12px;
	min-height: 42px;
	color: var(--aot-text);
	background: #101317;
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

textarea { min-height: 120px; }

input::placeholder,
textarea::placeholder { color: var(--aot-text-muted); }

/*
 * Autofill, which is the OTHER way a field goes pale on this theme.
 *
 * When Chrome re-presents a saved value it paints the control with an internal
 * style that `background` cannot override — the field turns near-white with
 * dark text while everything around it stays dark. Same symptom as the untyped
 * input above, different cause, so it is worth fixing next to it rather than
 * waiting for it to be reported separately.
 *
 * A large inset box-shadow is the only thing that reliably repaints that
 * background, and `-webkit-text-fill-color` the only thing that reliably sets
 * the text. The long transition delay stops the yellow flash the browser paints
 * for a moment before settling.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--aot-text);
	-webkit-box-shadow: 0 0 0 1000px #101317 inset;
	box-shadow: 0 0 0 1000px #101317 inset;
	caret-color: var(--aot-text);
	transition: background-color 5000s ease-in-out 0s;
}

input:hover,
select:hover,
textarea:hover { border-color: var(--aot-bronze-muted); }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--aot-bronze);
	box-shadow: 0 0 0 3px var(--aot-bronze-subtle);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--aot-bronze);
	outline-offset: 1px;
}

input[disabled],
select[disabled],
textarea[disabled] {
	opacity: .5;
	cursor: not-allowed;
	background: var(--aot-surface);
}

input[type="checkbox"],
input[type="radio"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	accent-color: var(--aot-bronze);
	vertical-align: middle;
}

/* ------------------------------------------------------------ aot-form --
   A stacked form: label above control, one field per row, controls filling
   the card.

   WHY A COMPONENT AND NOT A CHANGE TO THE GLOBAL RULE
   The element rule above sets `width: auto` on inputs, selects and textareas,
   which is right for the search boxes and inline filters that make up most of
   this site's inputs. It is what makes a bare <textarea> render at its `cols`
   default -- around 180px -- which is exactly the New Ticket problem. Widening
   the global rule would fix that page by stretching every filter box on every
   other page, so the width lives here, on an opt-in container.
   ------------------------------------------------------------------------ */

.aot-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 20px;
}

/* One field: label, control, and the hint that belongs to it. */
.aot-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aot-form__label {
	color: var(--aot-text-secondary);
	font-size: var(--aot-small);
	font-weight: 600;
	letter-spacing: .02em;
}

/* The control fills its field. min-width:0 so a flex child can actually
   shrink below its intrinsic size instead of forcing the card to scroll. */
.aot-form__control {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Roomy enough to write a bug report in without scrolling from line three.
   Vertical resize only: horizontal dragging would break the card's layout and
   there is nothing to gain from it. */
.aot-form__control--text {
	min-height: 220px;
	resize: vertical;
	line-height: 1.6;
	font-family: var(--aot-font-ui);
}

/* A select stretched to full width looks broken next to a short list of two
   options, so it stops at a readable measure -- but never overflows. */
.aot-form__control--choice {
	width: 100%;
	max-width: 340px;
}

.aot-form__hint {
	color: var(--aot-text-muted);
	font-size: var(--aot-caption);
	margin: 0;
}

.aot-form .aot-btn-row {
	margin-top: 4px;
}

@media (max-width: 640px) {
	.aot-form { gap: 14px; }

	/* Every control edge to edge, and the select loses its cap: on a narrow
	   screen the readable measure IS the screen. */
	.aot-form__control--choice { max-width: 100%; }
	.aot-form__control--text { min-height: 180px; }

	/* Full-width buttons, stacked, so neither is a small target. */
	.aot-form .aot-btn-row {
		flex-direction: column;
		align-items: stretch;
	}

	.aot-form .aot-btn-row > .aot-btn { width: 100%; text-align: center; }
}

/* ---------------------------------------------------- aot-ticket-status --
   The five ticket states, as a small badge.

   COLOUR IS THE SECOND CHANNEL, NEVER THE ONLY ONE: every badge carries the
   translated words as well, so a player who cannot separate the amber from the
   green reads exactly the same information. The distinction that matters most
   is Waiting-for-you (you owe us a reply) against Answered (you owe us
   nothing), and those are the two that are furthest apart here.

   Every colour is an approved token. No new hue is introduced.
   -------------------------------------------------------------------------- */

.aot-ticket-status {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--aot-border);
	border-radius: 999px;
	font-size: var(--aot-caption);
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
	color: var(--aot-text-secondary);
	background: var(--aot-surface-raised);
}

/* Nobody has picked it up yet. */
.aot-ticket-status--open {
	color: var(--aot-bronze-hi);
	border-color: var(--aot-bronze-muted);
}

/* Staff has it. Deliberately quiet: nothing is required of the player. */
.aot-ticket-status--in_progress {
	color: var(--aot-text-secondary);
	border-color: var(--aot-bronze-subtle);
}

/* The one state that asks the player to act, and the only one that is warm. */
.aot-ticket-status--waiting_player {
	color: var(--aot-warning);
	border-color: var(--aot-warning);
	background: rgba(200, 154, 60, .10);
}

/* Finished, and finished well. */
.aot-ticket-status--answered {
	color: var(--aot-success-text);
	border-color: var(--aot-success);
	background: rgba(63, 107, 74, .12);
}

/* Shut. Receding, not alarming -- closing a ticket is not a failure. */
.aot-ticket-status--closed {
	color: var(--aot-text-muted);
	border-color: var(--aot-border);
	background: transparent;
}

/* ------------------------------------------------------- aot-choice ------
   A selectable package card: one label wrapping one real radio.

   EVERY CARD HAS THE SAME ROWS. The package without a bonus prints "Bonus 0"
   rather than dropping the row, because a card that drops a row is a card of a
   different height, and five cards of four different heights is what the page
   looked like before. The bonus BADGE is still hidden there -- the row is a
   fact, the badge would be a claim.

   The state is carried by the radio's :checked, so the browser owns selection,
   focus and keyboard behaviour and there is no script to keep in sync.
   -------------------------------------------------------------------------- */

.aot-choice {
	display: flex;
	position: relative;
	padding: 16px 18px;
	cursor: pointer;
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-md);
	background: var(--aot-surface);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.aot-choice:hover { border-color: var(--aot-bronze-muted); }

.aot-choice--accent { border-color: var(--aot-bronze-subtle); }

/* The radio itself is off-screen rather than display:none -- a hidden input is
   removed from the accessibility tree and from the tab order, which would take
   the keyboard behaviour this markup exists to keep. */
.aot-choice__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.aot-choice__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.aot-choice__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* Reserves the badge's line on every card, so the row below starts at the
	   same height whether or not a badge is printed. */
	min-height: 22px;
}

.aot-choice__title {
	font-family: var(--aot-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
}

/* The placeholder that keeps the no-bonus card the same height. It says
   nothing and is hidden from screen readers by aria-hidden in the markup. */
.aot-tag--ghost {
	visibility: hidden;
}

.aot-choice__price {
	font-family: var(--aot-font-display);
	font-size: var(--aot-h3);
	color: var(--aot-text);
}

.aot-choice__facts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	font-size: var(--aot-small);
	color: var(--aot-text-secondary);
}

.aot-choice__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.aot-choice__row--total {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid var(--aot-border);
	color: var(--aot-text);
}

/* SELECTED. Three signals, not one: the border, the ground, and a bar down the
   leading edge. Colour alone would leave the choice invisible to anyone who
   cannot separate bronze from charcoal. */
.aot-choice:has(.aot-choice__input:checked) {
	border-color: var(--aot-bronze);
	background: var(--aot-surface-raised);
	box-shadow: 0 0 0 1px var(--aot-bronze-subtle);
}

.aot-choice:has(.aot-choice__input:checked)::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: 3px;
	border-radius: var(--aot-radius-md) 0 0 var(--aot-radius-md);
	background: var(--aot-bronze);
}

/* Focus follows the input onto the card, since the input itself is off-screen
   and its own ring would be invisible. */
.aot-choice:has(.aot-choice__input:focus-visible) {
	outline: 2px solid var(--aot-bronze);
	outline-offset: 2px;
}

.aot-choice-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aot-space-3);
	margin-top: var(--aot-space-4);
}

.aot-choice-actions .aot-btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	/* One card per row, and the button full width below them all rather than
	   tied to any one card. */
	.aot-choice-grid { grid-template-columns: 1fr; }

	.aot-choice-actions { flex-direction: column; align-items: stretch; }
	.aot-choice-actions .aot-btn { width: 100%; text-align: center; }
}

/* MyAAC's inline field error markup */
.FormFieldError,
.aot-field-error {
	display: block;
	margin-top: 4px;
	font-size: var(--aot-small);
	color: var(--aot-danger);
}

input.aot-invalid,
input[aria-invalid="true"] { border-color: var(--aot-danger); }

/* legacy label cell used across account/character pages */
.LabelV,
.Label {
	color: var(--aot-text-secondary);
	font-weight: 600;
}

/* ============================================================ tables ===== */

/* Core pages emit bare <table> plus legacy container classes. Rather than
   overriding those templates, the containers are neutralised and the table
   itself is themed. */

.TableShadowContainer,
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableBottomShadow,
.TableBottomLeftShadow,
.TableBottomRightShadow,
.TableContentAndRightShadow {
	background-image: none !important;
	background-color: transparent !important;
}

.TableContentContainer,
.TableContainer {
	background: transparent;
	border: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	color: var(--aot-text);
	font-size: 14px;
}

.TableContent,
.aot-table {
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
	overflow: hidden;
}

table th,
.TableContent th {
	padding: 11px var(--aot-space-3);
	text-align: left;
	font-family: var(--aot-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aot-bronze-hi);
	background: linear-gradient(180deg, rgba(32, 36, 42, .95), rgba(23, 26, 30, .95));
	border-bottom: 1px solid var(--aot-border-accent);
	white-space: nowrap;
}

table td,
.TableContent td {
	padding: 10px var(--aot-space-3);
	border-bottom: 1px solid var(--aot-border);
	vertical-align: middle;
}

table tr:last-child td { border-bottom: 0; }

/* MyAAC alternates rows with inline background-color from config
   (darkborder/lightborder). Those are overridden to theme tints. */
.TableContent tr:nth-child(even) td { background: var(--aot-row-alt); }

.TableContent tr:hover td,
.aot-table tbody tr:hover td { background: var(--aot-row-hover); }

/* Header/label rows MyAAC marks up as full-width cells */
td.LabelV, th.LabelV { background: var(--aot-surface-raised); }

/* Wide tables must scroll rather than crush on small screens. */
.aot-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* On small screens the content surface itself becomes the scroll container, so
   a wide data table scrolls *inside* the panel instead of widening the whole
   document. Without this the min-width below would push the page sideways and
   clip the header, hero and footer. */
@media (max-width: 860px) {
	.aot-content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.aot-content table { min-width: 460px; }

	/* Tickers and news are laid out with tables too, but they hold prose and
	   must wrap rather than force a scrollbar. */
	.aot-content .aot-news table,
	.aot-content #Tickers table,
	.aot-content .aot-news,
	.aot-content #Tickers { min-width: 0; }
}

/* ====================================== hardcoded upstream colours ======= */

/* A few core templates bake literal light greys into inline styles that no
   config value reaches — most visibly the character page's equipment grid
   (`background: #808080` / `#292929` in characters.html.twig). Remapping them
   here keeps the dark palette intact without overriding a 437-line template. */

[style*="#808080"] {
	background: var(--aot-surface-raised) !important;
	border-color: var(--aot-border) !important;
}

[style*="#292929"] {
	background: var(--aot-bg) !important;
}

/* ============================================================ alerts ===== */

.aot-alert,
.note,
.success,
.error,
.warning {
	display: block;
	padding: var(--aot-space-3) var(--aot-space-4);
	margin: 0 0 var(--aot-space-4);
	border: 1px solid var(--aot-border);
	border-left-width: 3px;
	border-radius: var(--aot-radius-sm);
	background: var(--aot-surface);
	color: var(--aot-text);
	font-size: 14px;
}

.aot-alert--info,
.note { border-left-color: var(--aot-bronze); }

.aot-alert--success,
.success { border-left-color: var(--aot-success); }

.aot-alert--warning,
.warning { border-left-color: var(--aot-warning); }

.aot-alert--danger,
.error {
	border-left-color: var(--aot-danger);
	color: var(--aot-danger-text);
}

/* ======================================================== pagination ===== */

.aot-pagination,
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aot-space-2);
	align-items: center;
	margin: var(--aot-space-4) 0;
	padding: 0;
	list-style: none;
}

.aot-pagination a,
.pagination a,
.aot-pagination span,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--aot-text-secondary);
	background: var(--aot-surface);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-sm);
}

.aot-pagination a:hover,
.pagination a:hover {
	color: var(--aot-text);
	border-color: var(--aot-bronze);
	background: var(--aot-bronze-subtle);
	text-decoration: none;
}

/* ============================================================== misc ===== */

.aot-meta {
	font-size: var(--aot-small);
	color: var(--aot-text-muted);
}

.aot-tag {
	display: inline-block;
	padding: 3px 9px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aot-text-secondary);
	background: var(--aot-surface-raised);
	border: 1px solid var(--aot-border);
	border-radius: var(--aot-radius-xs);
}

.aot-tag--accent {
	color: var(--aot-bronze-hi);
	border-color: var(--aot-border-accent);
}

/* ── Language switcher ─────────────────────────────────────────────────────
   Two flags, inside the menu strip and pinned to its right edge.

   Sized to sit WITH the nav labels rather than compete with them: the flag is
   20x14, about the cap height of the strip's own text, so the pair reads as
   part of the row instead of two buttons parked on top of it. The first
   version was 28x20 in the masthead and looked exactly like what it was — an
   afterthought bolted above the bar.

   It is a SIBLING of the nav list, not an item inside it. On a narrow screen
   the list collapses behind the burger, and a switcher inside it would vanish
   with it — a language control nobody can see until they open a menu is a
   language control most people never find. As a sibling it stays on the strip
   at every width, and there is still only one of it: one pair of CSRF forms,
   no duplicate markup to keep in step.

   The active flag is marked with the bronze the theme already uses for a
   current item; the other is dimmed rather than greyed, so the difference
   reads without either looking disabled.
*/
.aot-nav > .aot-container {
	display: flex;
	align-items: stretch;
}

.aot-nav__list {
	flex: 1 1 auto;
}

.aot-nav__lang {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
}

.aot-lang {
	display: flex;
	align-items: center;
	gap: 4px;
}

.aot-lang__form {
	margin: 0;
	display: flex;
}

.aot-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	line-height: 0;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.aot-lang__btn:hover,
.aot-lang__btn:focus-visible {
	opacity: 1;
	border-color: var(--aot-bronze-muted);
}

.aot-lang__btn--active {
	opacity: 1;
	border-color: var(--aot-bronze);
}

.aot-lang__flag {
	display: block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
}

/* On mobile the list becomes a column that opens BELOW the strip, so the
   container stops being a single row and `margin-left: auto` has nothing to
   push against. The switcher is pinned to the strip's own line instead, where
   it stays visible whether the menu is open or closed. */
@media (max-width: 768px) {
	.aot-nav > .aot-container {
		display: block;
		position: relative;
		min-height: 44px;
	}

	.aot-nav__lang {
		position: absolute;
		top: 0;
		right: var(--aot-gutter);
		height: 44px;
		margin-left: 0;
	}
}