/* account.css - Optional player account control in the lobby header.
 *
 * Semantic theme tokens throughout, so the control follows the light/dark switch instead of
 * hardcoding a foreground over a background that only works in one of them. */

.account-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	padding: 10px 12px;
	border-radius: var(--radius);
}


.account-prompt {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
	flex: 1 1 auto;
	min-width: 0;
}

/* The signed-in sentence is the menu button (see account.ts), so it is styled as a control and
 * not as the paragraph it used to be: pressable, and visibly so. */
.account-status {
	font-weight: 600;
	text-align: left;
	max-width: 100%;
}

/* The sign-in affordances navigate away, so they are links. They are STYLED like buttons for
 * pointer users while keeping the link role, and they carry an underline so the styling is not the
 * only thing distinguishing them from surrounding text. */
/* A real list in the accessibility tree and a row on screen. `list-style: none` is what makes a
   browser drop the list semantics, which is why the markup carries an explicit role="list"; here we
   only take the bullets and the indent away. */
.account-providers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-signin-link {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	/* Only the border transitions. Animating the background would let it lag behind `color`, which
	 * flips instantly with the theme token — leaving the label briefly unreadable against the old
	 * background every time the theme is toggled. */
	transition: border-color 0.2s ease;
}

.account-signin-link:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.account-signin-link:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

.account-signout-btn {
	width: auto;
	padding: 8px 12px;
	font-size: 14px;
	flex: 0 0 auto;
}

/* A failed sign-in is explanatory, not catastrophic: readable danger ink on a tinted surface
 * rather than dimmed text, so it keeps full contrast in both themes. */
.account-error {
	margin: 0;
	flex: 1 1 100%;
	padding: 8px 10px;
	border: 1px solid var(--danger);
	border-radius: var(--radius-sm);
	background: var(--danger-soft);
	color: var(--text);
	font-size: 13px;
}

.account-manage-btn {
	width: auto;
	padding: 8px 12px;
	font-size: 14px;
	flex: 0 0 auto;
}

/* ── the account settings dialog ─────────────────────────────────────────── */

.account-settings-status:empty {
	/* An empty live region must take no space, but it has to stay in the DOM: a screen reader
	 * announces changes to an existing region, not the sudden arrival of a new one. */
	margin: 0;
}

.account-settings-status {
	margin: 0 0 12px;
	color: var(--text);
	font-weight: 600;
}

.account-settings-hint {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--text-muted);
}

/* The control and the words it refers to are ONE line, and the control comes first — a box that
   sits on its own line above its label reads as decoration, and somebody tabbing lands on a square
   with nothing beside it to say what it would do. */
.account-settings-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 6px 0;
}

.account-settings-choice label {
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

.account-settings-choice input {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

/* A fieldset carries a browser default border and padding that would box this section off from
   every other group in the dialog. The legend is what names it; it needs no frame. */
.account-settings-listed {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
	min-inline-size: 0;
}

.account-settings-listed legend {
	padding: 0;
	font-weight: 600;
}

.account-settings h3 {
	margin: 20px 0 8px;
	font-size: 16px;
}

.account-method-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.account-method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}

.account-method-line {
	color: var(--text);
	min-width: 0;
}

/* Adding a provider navigates away, so it is a link and stays visibly one. */
.account-link-provider {
	color: var(--text);
	font-weight: 600;
	text-decoration: underline;
}

.account-link-provider:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.account-unlink-btn {
	width: auto;
	padding: 6px 10px;
	font-size: 13px;
	flex: 0 0 auto;
}

/* The refused state is never conveyed by dimming alone: the control keeps a fully readable
 * foreground and gains a dashed edge, and its reason is spoken through aria-describedby. */
.account-unlink-btn[aria-disabled="true"] {
	border-style: dashed;
	border-color: var(--border-strong);
	background: var(--surface-3);
	color: var(--text);
	cursor: not-allowed;
}

.account-danger-btn {
	width: auto;
	padding: 8px 12px;
	border: 1px solid var(--danger);
	border-radius: var(--radius-sm);
	background: var(--danger-soft);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.account-danger-btn:hover {
	border-color: var(--danger-hover);
}

.account-danger-btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.account-erase-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--danger);
	border-radius: var(--radius-sm);
	background: var(--danger-soft);
}

.account-erase-confirm p {
	margin: 0;
	flex: 1 1 100%;
	color: var(--text);
	font-weight: 600;
}

@media (max-width: 600px) {
	.account-bar {
		align-items: stretch;
		flex-direction: column;
	}

	.account-method {
		align-items: stretch;
		flex-direction: column;
	}

	.account-providers {
		flex-direction: column;
	}

	.account-signin-link {
		text-align: center;
	}
}

/* ── Sign in with Apple: Apple's official button treatment ─────────
 * Apple's brand guidelines ask for their own mark and a black-or-white button rather than the
 * neutral link styling the other providers use. We keep the link semantics and the row's sizing
 * but paint it as the official button: black with a white mark in light mode, white with a black
 * mark in dark. The logo is a currentColor mask, so it flips with the label instead of shipping
 * two images, and hover/focus are pinned here because the shared rules swap in accent tokens that
 * would break the official treatment. */
.account-signin-link[data-provider="apple"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	border-color: #000;
	background: #000;
	color: #fff;
	text-decoration: none;
}

.account-signin-link[data-provider="apple"]::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-top: -0.1em; /* the mark's optical centre sits a touch high */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20384%20512%27%3E%3Cpath%20d%3D%27M318.7%20268.7c-.2-36.7%2016.4-64.4%2050-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3%2020.7-88.5%2020.7-15%200-49.4-19.7-76.4-19.7C63.3%20141.2%204%20184.8%204%20273.5q0%2039.3%2014.4%2081.2c12.8%2036.7%2059%20126.7%20107.2%20125.2%2025.2-.6%2043-17.9%2075.8-17.9%2031.8%200%2048.3%2017.9%2076.4%2017.9%2048.6-.7%2090.4-82.5%20102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4%2024.8-61.9%2024-72.5-24.1%201.4-52%2016.4-67.9%2034.9-17.5%2019.8-27.8%2044.3-25.6%2071.9%2026.1%202%2049.9-11.4%2069.5-34.3z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20384%20512%27%3E%3Cpath%20d%3D%27M318.7%20268.7c-.2-36.7%2016.4-64.4%2050-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3%2020.7-88.5%2020.7-15%200-49.4-19.7-76.4-19.7C63.3%20141.2%204%20184.8%204%20273.5q0%2039.3%2014.4%2081.2c12.8%2036.7%2059%20126.7%20107.2%20125.2%2025.2-.6%2043-17.9%2075.8-17.9%2031.8%200%2048.3%2017.9%2076.4%2017.9%2048.6-.7%2090.4-82.5%20102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4%2024.8-61.9%2024-72.5-24.1%201.4-52%2016.4-67.9%2034.9-17.5%2019.8-27.8%2044.3-25.6%2071.9%2026.1%202%2049.9-11.4%2069.5-34.3z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.account-signin-link[data-provider="apple"]:hover {
	border-color: #000;
	background: #1a1a1a;
}

.account-signin-link[data-provider="apple"]:focus-visible {
	border-color: #000;
}

[data-theme="dark"] .account-signin-link[data-provider="apple"] {
	border-color: #fff;
	background: #fff;
	color: #000;
}

[data-theme="dark"] .account-signin-link[data-provider="apple"]:hover {
	border-color: #fff;
	background: #e8e8e8;
}

[data-theme="dark"] .account-signin-link[data-provider="apple"]:focus-visible {
	border-color: #fff;
}