/*
 * Buttons, pills, icon buttons, fields, badges, loading dots.
 *
 * Every control has four states: default, hover (mouse only), focus
 * (keyboard only, from base.css), pressed. Hover rules sit inside
 * @media (hover: hover) so touch screens use the pressed state only.
 */

/* Icon button: 40px circle (search, theme toggle, menu). */
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--control-border-width) solid var(--control-border);
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	transition: border-color var(--speed), color var(--speed), transform var(--speed) var(--ease);
}
.icon-button .icon { width: 20px; height: 20px; }
.icon-button:active { border-color: var(--accent); color: var(--accent); transform: scale(.94); }

/* Theme toggle shows the mode you would switch to: sun in dark, moon in light. */
.theme-toggle .icon--moon,
[data-theme="light"] .theme-toggle .icon--sun { display: none; }
[data-theme="light"] .theme-toggle .icon--moon { display: block; }

/* Outlined pill (Get updates, Email, RSS, Try again). */
.pill-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border: var(--control-border-width) solid var(--accent);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--accent);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color var(--speed), color var(--speed), opacity var(--speed), transform var(--speed) var(--ease);
}
.pill-button .icon { width: 14px; height: 14px; stroke-width: 2; }
.pill-button--small { padding: 8px 16px; font-size: 14px; }
.pill-button:active,
.pill-button[aria-expanded="true"] {
	background: var(--accent);
	color: var(--on-accent);
}
.pill-button:active { opacity: .8; transform: scale(.97); }

/* Primary button: accent fill (Subscribe, Post comment, Search, Got it). */
.button,
input[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	transition: background-color var(--speed), color var(--speed), opacity var(--speed), transform var(--speed) var(--ease);
}
.button--primary { background: var(--accent); color: var(--on-accent); }
.button--small { padding: 9px 22px; }
.button--block { width: 100%; }
.button:active { opacity: .8; transform: scale(.97); }
.button[disabled] { opacity: .6; cursor: progress; }

/* Text field. */
.field {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--control-border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text);
	font-size: 16px;
	transition: border-color var(--speed), box-shadow var(--speed);
}
.field::placeholder { color: var(--text-muted); opacity: 1; }
.field:focus-visible,
.field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring-glow);
}
textarea.field { min-height: 130px; resize: vertical; }

/* Author badge on comments. */
.badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Accent check circle (subscribe success). */
.check-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
}
.check-circle .icon { width: 22px; height: 22px; stroke-width: 2.4; }

/* Three loading dots. */
.dots { display: inline-flex; gap: 8px; color: var(--accent); }
.dots > span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	animation: brookshire-dot 1.2s infinite ease-in-out both;
}
.dots > span:nth-child(2) { animation-delay: .15s; }
.dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes brookshire-dot {
	0%, 80%, 100% { opacity: .3; }
	40% { opacity: 1; }
}

/* Author avatar (photo or initials placeholder). */
.avatar-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	border: 1px solid var(--avatar-border);
	border-radius: var(--avatar-radius);
	background: var(--placeholder);
	color: var(--accent);
	font-weight: 700;
	line-height: 1;
}
.avatar-mark img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) {
	.icon-button:hover { border-color: var(--accent); color: var(--accent); }
	.pill-button:hover { background: var(--accent); color: var(--on-accent); }
	.button--primary:hover { background: var(--text); color: var(--bg); }
	.field:hover:not(:focus) { border-color: var(--text); }
}