/* Astropress Admin UI — shared stylesheet
 * Served with Cache-Control: public, max-age=31536000, immutable
 * Extracted from AdminLayout.astro so browsers can cache it across all admin pages.
 */

html {
	scroll-behavior: smooth;
}

:root {
	color-scheme: light;
	--bg: #f4f6f8;
	--panel: #ffffff;
	--text: #17212c;
	--muted: #374151;
	--line: #d8dee5;
	--accent: #094a50;
	--accent-soft: #e6f4f2;
	--sidebar-bg: #15202b;
	--sidebar-text: rgba(255, 255, 255, 0.9);
	--sidebar-muted: rgba(255, 255, 255, 0.92);
	--topbar-bg: #0f1720;
	--surface-subtle: #f8fafb;
	--button-primary-bg: #094a50;
	--button-primary-text: #ffffff;
	--button-primary-hover: #0b5960;
	--button-secondary-bg: #e6f4f2;
	--button-secondary-text: #094a50;
	--button-secondary-hover: #d7edea;
	--button-ghost-bg: transparent;
	--button-ghost-text: var(--text);
	--button-ghost-border: var(--line);
	--button-ghost-hover: #edf1f5;
	--danger: #991b1b;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0f1317;
	--panel: #171d23;
	--text: #edf2f7;
	--muted: #c0cad5;
	--line: #2a3440;
	--accent: #c8d4e3;
	--accent-soft: #212b35;
	--sidebar-bg: #121921;
	--sidebar-text: rgba(237, 242, 247, 0.92);
	--sidebar-muted: #d0d8e1;
	--topbar-bg: #0c1117;
	--surface-subtle: #141b22;
	--button-primary-bg: #d7e1ee;
	--button-primary-text: #15202b;
	--button-primary-hover: #e5ecf5;
	--button-secondary-bg: #232d37;
	--button-secondary-text: #edf2f7;
	--button-secondary-hover: #2b3642;
	--button-ghost-bg: transparent;
	--button-ghost-text: #edf2f7;
	--button-ghost-border: #3a4652;
	--button-ghost-hover: #202933;
	--danger: #ff8ea3;
}

html {
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	background: var(--bg);
	color: var(--text);
}

body {
	margin: 0;
}

/* Hide off-screen via translateY rather than `top: -Npx` so growing the link's
 * box (via padding/min-height for #58 touch-target compliance) can never push
 * its bottom edge back into the viewport. */
.skip-link {
	position: absolute;
	inset-inline-start: 1rem;
	top: 0;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
	padding: 0.85rem 1rem;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	transform: translateY(-150%);
	transition: transform 80ms ease-out;
	z-index: 200;
}

.skip-link:focus {
	transform: translateY(5rem);
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.95rem 1.35rem;
	background: var(--topbar-bg);
	color: white;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.topbar-logo {
	width: 1.9rem;
	height: 1.9rem;
	object-fit: contain;
	border-radius: 0.35rem;
}

.topbar-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.role-chip {
	display: inline-flex;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.topbar button {
	border: 0;
	border-radius: 0.5rem;
	padding: 0.5rem 0.8rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	font: inherit;
	cursor: pointer;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
}

.topbar button:hover,
.topbar button:focus-visible {
	background: var(--button-primary-hover);
}

.publish-form {
	display: inline-flex;
}

.publish-btn {
	background: #16a34a;
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	padding: 0.4rem 0.9rem;
	min-height: 2.75rem;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.publish-btn:hover,
.publish-btn:focus-visible {
	background: #15803d;
}

/* ── Utility panel (native <details> toggle, inline in topbar flex) ───────── */
.topbar-panel-details {
	display: inline-flex;
	align-items: center;
	/* Match the gap used between siblings inside the panel so the toggle has
     the same breathing room from the leftmost utility button as every other
     pair of buttons. */
	gap: 0.6rem;
}

.topbar-panel-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.14);
	color: white;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	list-style: none;
}
.topbar-panel-toggle::-webkit-details-marker {
	display: none;
}
.topbar-panel-toggle:hover,
.topbar-panel-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}
.panel-toggle-arrows {
	position: relative;
	width: 18px;
	height: 18px;
	display: inline-flex;
}
.panel-toggle-arrow {
	position: absolute;
	inset: 0;
	transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
}
.panel-toggle-arrow-closed {
	transform: translateX(0);
	opacity: 1;
}
.panel-toggle-arrow-open {
	transform: translateX(-6px);
	opacity: 0;
}
.topbar-panel-details[open] > .topbar-panel-toggle .panel-toggle-arrow-closed {
	transform: translateX(6px);
	opacity: 0;
}
.topbar-panel-details[open] > .topbar-panel-toggle .panel-toggle-arrow-open {
	transform: translateX(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.panel-toggle-arrow {
		transition: none;
	}
}

.topbar-utility-panel {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Floating scroll-to-top action button — appears bottom-right after the user
   scrolls past the first viewport. Sized as a 44px circle to satisfy WCAG
   2.5.5 touch-target guidance. */
.scroll-to-top-fab {
	position: fixed;
	inset-inline-end: 1.25rem;
	bottom: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, background-color 140ms
		ease;
	z-index: 40;
}
.scroll-to-top-fab.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* `display: inline-flex` above wins over the user-agent rule for [hidden],
   so we have to re-apply display:none ourselves. */
.scroll-to-top-fab[hidden] {
	display: none;
}
.scroll-to-top-fab:hover,
.scroll-to-top-fab:focus-visible {
	background: var(--button-primary-hover);
}
.scroll-to-top-fab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.scroll-to-top-fab {
		transition: opacity 120ms ease;
		transform: none;
	}
	.scroll-to-top-fab.is-visible {
		transform: none;
	}
}

.topbar-utility-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.14);
	color: white;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
}
.topbar-utility-btn:hover,
.topbar-utility-btn:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}
.topbar .locale-select.topbar-utility-btn {
	/* Lock to the same 2.75rem square as the other utility buttons so the
     row reads as a uniform set of icons. The two-letter locale codes
     (EN / TE / JA / NY) all fit comfortably inside 44px at 0.8rem. */
	width: 2.75rem;
	padding: 0;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
	text-align: center;
	text-align-last: center;
}
.topbar .locale-select.topbar-utility-btn:hover,
.topbar .locale-select.topbar-utility-btn:focus-visible {
	background: var(--button-primary-hover);
}
.topbar .locale-select.topbar-utility-btn option {
	color: var(--text);
	background-color: var(--panel);
}

.theme-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.admin-shell {
	display: grid;
	grid-template-columns: 1fr;
	min-height: calc(100vh - 66px);
}

.sidebar {
	padding: 1.15rem 0.9rem;
	background: var(--sidebar-bg);
	color: var(--sidebar-text);
	display: none;
	flex-direction: column;
	gap: 0.2rem;
	border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(17rem, 85vw);
	z-index: 100;
	overflow-y: auto;
}

.sidebar[data-open] {
	display: flex;
	flex-direction: column;
}

.sidebar-group {
	margin: 0.4rem 0 0;
}

.sidebar-group > summary.sidebar-group-label {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0.5rem 0 0.15rem;
	padding: 0.4rem 0.85rem;
	color: var(--sidebar-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 0.5rem;
	user-select: none;
}

.sidebar-group > summary.sidebar-group-label::-webkit-details-marker {
	display: none;
}

.sidebar-group > summary.sidebar-group-label::after {
	content: "▾";
	font-size: 0.65rem;
	transition: transform 120ms ease;
	color: var(--sidebar-muted);
}

.sidebar-group:not([open]) > summary.sidebar-group-label::after {
	transform: rotate(-90deg);
}

.sidebar-group > summary.sidebar-group-label:hover,
.sidebar-group > summary.sidebar-group-label:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	color: var(--sidebar-fg, inherit);
}

@media (prefers-reduced-motion: reduce) {
	.sidebar-group > summary.sidebar-group-label::after {
		transition: none;
	}
}

/*
 * Coming-soon group: visually demoted so operators can tell at a glance
 * the group lists roadmap entries, not shipping features. Driven by
 * INTEGRATIONS manifest via data-coming-soon attribute.
 *
 * Demotion is italic + regular weight on the group label (NO opacity —
 * opacity dimming the label fails axe AAA contrast 7:1). The sidebar's
 * own contrast stays intact; the label visibly differs from solid-bold
 * "Integrations" siblings, which is the honest signal we want.
 */
.sidebar-group[data-coming-soon="true"] > summary.sidebar-group-label {
	font-style: italic;
	font-weight: 500;
}

.sidebar a {
	color: inherit;
	text-decoration: none;
	padding: 0.68rem 0.85rem;
	border-radius: 0.7rem;
	font-weight: 650;
	display: block;
}

.sidebar a.sidebar-child {
	padding-inline-start: 1.5rem;
	font-weight: 500;
	font-size: 0.9rem;
}

.sidebar a[aria-current="page"] {
	background: var(--accent-soft);
	color: var(--accent);
}

.sidebar a:hover {
	background: rgba(255, 255, 255, 0.06);
}

main {
	padding: 1rem 1rem 1.5rem;
	max-width: 86rem;
}

.page-header {
	margin-bottom: 1.1rem;
}

.eyebrow {
	margin: 0 0 0.25rem;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
}

h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 1rem;
	padding: 1.05rem;
	box-shadow: 0 10px 24px rgba(15, 18, 24, 0.03);
}

html[data-theme="dark"] .panel {
	box-shadow: none;
}

.notice,
.error-notice {
	border-radius: 0.8rem;
	padding: 0.9rem 1rem;
	font-weight: 700;
}

.notice {
	background: #e7f6ef;
	color: #16543b;
	border: 1px solid #b7dec9;
}

.error-notice {
	background: #fff0f2;
	color: #8f1730;
	border: 1px solid #f0c0ca;
}

.grid {
	display: grid;
	gap: 1rem;
}

.grid.two {
	grid-template-columns: 1fr;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stat strong {
	font-size: 2rem;
	color: var(--accent);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

th,
td {
	padding: 0.82rem 0.78rem;
	border-bottom: 1px solid var(--line);
	text-align: start;
	vertical-align: top;
}

th {
	color: var(--muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

.toolbar {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.toolbar button,
.toolbar a {
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: 0.6rem;
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
	padding: 0.65rem 0.9rem;
	text-decoration: none;
	font: inherit;
}

.admin-button,
.admin-button-secondary,
.admin-button-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.65rem 0.95rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	border: 1px solid transparent;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms
		ease, transform 140ms ease;
}

.admin-button {
	background: var(--button-primary-bg);
	color: var(--button-primary-text);
}

.admin-button-secondary {
	background: var(--button-secondary-bg);
	color: var(--button-secondary-text);
}

.admin-button-ghost {
	background: var(--button-ghost-bg);
	color: var(--button-ghost-text);
	border-color: var(--button-ghost-border);
}

.admin-button:hover,
.admin-button:focus-visible {
	background: var(--button-primary-hover);
	transform: translateY(-1px);
}

.admin-button-secondary:hover,
.admin-button-secondary:focus-visible {
	background: var(--button-secondary-hover);
	transform: translateY(-1px);
}

.admin-button-ghost:hover,
.admin-button-ghost:focus-visible {
	background: var(--button-ghost-hover);
	transform: translateY(-1px);
}

.admin-button.small,
.admin-button-secondary.small,
.admin-button-ghost.small {
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.45rem 0.75rem;
	font-size: 0.84rem;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.9rem;
	flex-wrap: wrap;
}

.section-header h2 {
	margin: 0;
}

.section-header p {
	margin: 0.35rem 0 0;
	max-width: 42rem;
	color: var(--muted);
}

.admin-form-grid {
	display: grid;
	gap: 1rem;
}

.admin-form-grid.columns-3 {
	grid-template-columns: 1fr;
}

.admin-field {
	display: grid;
	gap: 0.4rem;
}

.admin-field span,
.admin-field label {
	font-weight: 600;
}

.admin-input,
.admin-select,
.admin-textarea {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 0.8rem;
	font: inherit;
	color: var(--text);
	background: var(--panel);
	box-sizing: border-box;
}

.admin-input::placeholder,
.admin-textarea::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
	outline-offset: 1px;
	border-color: var(--accent);
}

.admin-empty-state {
	padding: 2rem 1.5rem;
	text-align: center;
	color: var(--muted);
	font-style: italic;
}

.admin-empty-state a {
	color: var(--accent);
}

.admin-table-shell {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 0.95rem;
	background: var(--surface-subtle);
}

.admin-table-shell table {
	background: var(--panel);
}

.admin-table-shell thead th {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--panel);
}

.admin-kicker {
	margin: 0 0 0.55rem;
	color: var(--muted);
	font-size: 0.84rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

.admin-subgrid {
	display: grid;
	gap: 0.9rem;
}

.admin-subgrid.two {
	grid-template-columns: 1fr;
}

.admin-actions-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.admin-table-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

.admin-inline-form {
	display: inline-flex;
}

.admin-note {
	margin: 0;
	color: var(--muted);
	line-height: 1.55;
}

.admin-note.strong {
	font-weight: 600;
}

.admin-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.84rem;
	font-weight: 700;
}

.forbidden {
	max-width: 42rem;
}

/* ap-notice — status banners */
ap-notice {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: 0.55rem;
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

ap-notice[type="success"] {
	background: #e6f7f0;
	color: #0a5c3a;
	border: 1px solid #9dd8be;
}

ap-notice[type="error"] {
	background: #fdf1f0;
	color: #8b1c1c;
	border: 1px solid #f4b8b8;
}

ap-notice[type="info"] {
	background: var(--accent-soft);
	color: var(--text);
	border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

ap-notice[type="info"] a {
	color: var(--text);
	text-decoration: underline;
	font-weight: 600;
}

ap-notice[type="info"] a:hover,
ap-notice[type="info"] a:focus-visible {
	text-decoration-thickness: 2px;
}

ap-notice[type="warning"] {
	background: #fdecea;
	color: #7a1f1f;
	border: 1px solid #f0a8a8;
}

ap-notice[type="warning"] a {
	color: #5a1414;
	text-decoration: underline;
	font-weight: 700;
}

ap-notice[type="warning"] a:hover,
ap-notice[type="warning"] a:focus-visible {
	text-decoration-thickness: 2px;
}

html[data-theme="dark"] ap-notice[type="success"] {
	background: #0d2e1e;
	color: #6ee7b7;
	border-color: #1f5c3a;
}

html[data-theme="dark"] ap-notice[type="error"] {
	background: #2d1010;
	color: #ff8ea3;
	border-color: #5c1f1f;
}

html[data-theme="dark"] ap-notice[type="warning"] {
	background: #3a1414;
	color: #ffb3a3;
	border-color: #6e2222;
}

html[data-theme="dark"] ap-notice[type="warning"] a {
	color: #ffd1c4;
}

/* Mobile nav toggle — hidden on desktop via min-width block below */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0.4rem;
	color: white;
	font-size: 1.15rem;
	line-height: 1;
	padding: 0.3rem 0.55rem;
	cursor: pointer;
}

.nav-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Close button inside sidebar — hidden on desktop via min-width block below */
.nav-close {
	display: block;
	background: transparent;
	border: none;
	color: var(--sidebar-muted);
	font-size: 1.15rem;
	padding: 0.5rem;
	cursor: pointer;
	align-self: flex-end;
}

.nav-close:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Inline form validation feedback */
.field-error {
	display: block;
	color: var(--danger);
	font-size: 0.82rem;
	margin-top: 0.2rem;
}

[aria-invalid="true"] {
	outline: 2px solid var(--danger);
	outline-offset: 1px;
}

/* Server-side action error region (assertive, populated via sessionStorage by JS) */
.action-error-region:not(:empty) {
	background: #fdf0ef;
	border: 1px solid var(--danger);
	border-radius: 4px;
	color: var(--danger);
	padding: 0.6rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

/* Desktop layout — progressive enhancement from the mobile-first defaults above */
@media (min-width: 56.25rem) {
	.admin-shell {
		grid-template-columns: 17rem minmax(0, 1fr);
	}

	.sidebar {
		display: flex;
		position: static;
		inset: auto;
		width: auto;
		z-index: auto;
		overflow-y: visible;
	}

	.nav-toggle {
		display: none;
	}

	.nav-close {
		display: none;
	}

	main {
		padding: 1.5rem 1.65rem 2rem;
	}

	.grid.two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.admin-form-grid.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.admin-subgrid.two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ─── Native popover (keyboard shortcuts panel) ──────────────────────────────
 * Uses the native HTML Popover API (zero JS) for the keyboard shortcuts panel.
 * The `popover` attribute auto-wires toggle behavior via `popovertarget`.
 * ────────────────────────────────────────────────────────────────────────────── */
.keyboard-shortcuts-popover {
	position: fixed;
	inset: 4rem 1rem auto auto;
	width: min(22rem, calc(100vw - 2rem));
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	padding: 1.25rem;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
	z-index: 200;
	margin: 0;
}

.keyboard-shortcuts-popover h2 {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0 0 0.75rem;
}

.keyboard-shortcuts-popover table {
	width: 100%;
	border-collapse: collapse;
}

.keyboard-shortcuts-popover td {
	padding: 0.3rem 0;
	font-size: 0.88rem;
}

.keyboard-shortcuts-popover td:first-child {
	width: 45%;
	white-space: nowrap;
}

.keyboard-shortcuts-popover kbd {
	display: inline-block;
	padding: 0.1em 0.4em;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0.25rem;
	font-size: 0.78rem;
	font-family: ui-monospace, monospace;
}

/* ─── WCAG 2.2 AAA: Enhanced focus-visible (SC 2.4.12) ────────────────────────
 * Minimum 2px focus indicator with at least 3:1 contrast against adjacent colors.
 * Uses :focus-visible to avoid showing keyboard ring on mouse clicks.
 * ────────────────────────────────────────────────────────────────────────────── */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Interactive controls that need their own focus treatment */
.admin-button:focus-visible,
.admin-button-secondary:focus-visible,
.admin-button-ghost:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

.admin-input:focus-visible,
.admin-select:focus-visible,
.admin-textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 0;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
	border-color: var(--accent);
}

/* Skip link — always visible when focused; renders above all content */
.skip-link:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Dashboard support-surface cards — global styles ensure layout correctness even before
 * the component's scoped CSS finishes loading in development mode. */
.support-card {
	display: grid;
	gap: 0.28rem;
	padding: 0.95rem;
	min-height: 3rem;
	border-radius: 0.95rem;
	border: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────────── */
@keyframes ap-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
.skeleton {
	background: linear-gradient(
		90deg,
		var(--border, #e2e8f0) 25%,
		var(--surface-alt, #f8fafc) 50%,
		var(--border, #e2e8f0) 75%
	);
	background-size: 200% 100%;
	animation: ap-shimmer 1.4s infinite;
	border-radius: 4px;
	color: transparent;
	user-select: none;
}
.skeleton-row {
	height: 1.25rem;
	margin: 0.5rem 0;
}
.skeleton-text {
	height: 0.875rem;
}

/* ── Undo toast ───────────────────────────────────────────────────────────── */
.undo-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 0.75rem 1.25rem;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 200;
	animation: ap-toast-in 0.2s ease, ap-toast-out 0.4s ease 7.6s forwards;
}
@keyframes ap-toast-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(8px);
	}
}
@keyframes ap-toast-out {
	to {
		opacity: 0;
		transform: translateX(-50%) translateY(8px);
		pointer-events: none;
		visibility: hidden;
	}
}
.undo-btn {
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
	padding: 0.2rem 0.6rem;
	color: var(--accent);
}
.undo-btn:hover {
	background: var(--surface-alt);
}

/* ── Command palette ──────────────────────────────────────────────────────── */
.cmd-palette {
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	padding: 0;
	width: min(560px, 92vw);
	max-height: 60vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cmd-palette::backdrop {
	background: rgba(0, 0, 0, 0.4);
}
.cmd-input {
	border: none;
	border-bottom: 1px solid var(--border);
	font: inherit;
	font-size: 1.05rem;
	padding: 0.85rem 1rem;
	width: 100%;
	background: var(--surface);
	color: inherit;
	outline: none;
}
.cmd-results {
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	overflow-y: auto;
	flex: 1;
}
.cmd-results li a,
.cmd-results li span {
	display: block;
	padding: 0.55rem 1rem;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.cmd-results li[aria-selected="true"] a,
.cmd-results li:hover a {
	background: var(--surface-alt);
}
.cmd-empty {
	padding: 1rem;
	text-align: center;
	color: var(--text-muted, #64748b);
	font-size: 0.9rem;
}

/* ── Shared confirm dialog styles ──────────────────────────────────────────
 * Used by <ap-confirm-dialog> on redirects, comments, authors, taxonomies,
 * media, webhooks, api-tokens, users, and subscribers pages. */
.confirm-modal {
	border: none;
	border-radius: 1rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	max-width: 400px;
	padding: 0;
	backdrop-filter: blur(4px);
}
.confirm-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}
.modal-content {
	padding: 1.75rem;
}
.modal-content h2 {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	color: var(--text);
}
.modal-content p {
	margin: 0 0 0.75rem;
	color: var(--text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
.modal-content p:last-of-type {
	margin-bottom: 1.5rem;
}
.dialog-context {
	background: var(--bg);
	padding: 0.75rem;
	border-radius: 0.6rem;
	font-family: "Monaco", monospace;
	font-size: 0.85rem;
	color: var(--text);
	word-break: break-all;
}
.dialog-warning {
	color: var(--danger);
	font-weight: 600;
	font-size: 0.9rem;
}
.modal-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}
.modal-actions .secondary-button {
	padding: 0;
}
.modal-actions .secondary-button:hover {
	background: var(--accent-soft);
}

/* ── Shared breadcrumb navigation ─────────────────────────────────────────
 * Used by subscriber detail, import source, post/archive/route-page editors. */
.breadcrumb {
	font-size: 0.875rem;
	color: var(--text-muted, #374151);
	margin-bottom: 1.5rem;
}
.breadcrumb a {
	color: var(--accent, #6366f1);
	text-decoration: underline;
}
.breadcrumb a:hover {
	text-decoration: none;
}

/* ── Dialog entrance / exit ────────────────────────────────────────────────
 * Uses @starting-style (Chrome 117+, Firefox 129+, Safari 17.5+) to animate
 * <dialog> elements in and out without JavaScript. The allow-discrete keyword
 * delays display:none until after the exit transition completes.
 * Suppressed automatically by the prefers-reduced-motion block below. */
dialog {
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transition: opacity 180ms ease, transform 180ms ease, display 180ms
		allow-discrete, overlay 180ms allow-discrete;
}
dialog[open] {
	opacity: 1;
	transform: none;
}
@starting-style {
	dialog[open] {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

/* ── Cross-document view transitions for admin page navigation ─────────────
 * Progressive enhancement — Chrome/Edge 126+. Lets the browser animate
 * same-origin navigations between admin pages with a default cross-fade.
 * Guarded by prefers-reduced-motion so motion-sensitive users are unaffected. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		/* biome-ignore lint/correctness/noUnknownProperty: View Transitions Level 2 spec, Chrome 126+ */
		navigation: auto;
	}
}

/* WCAG 2.3.3 — suppress all transforms and transitions when the user requests
 * reduced motion. Keeps background-color swaps usable as focus/hover feedback. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.admin-button:hover,
	.admin-button:focus-visible,
	.admin-button-secondary:hover,
	.admin-button-secondary:focus-visible,
	.admin-button-ghost:hover,
	.admin-button-ghost:focus-visible {
		transform: none;
	}

	.skeleton {
		animation: none;
		background: var(--border, #e2e8f0);
	}
	.undo-toast {
		animation: none;
	}
}

/* Media picker dialog (rendered into <body> by ap-media-picker) */
.ap-media-picker__dialog {
	border: 0;
	padding: 0;
	max-inline-size: min(56rem, 95vw);
	max-block-size: 90vh;
	border-radius: 0.75rem;
}
.ap-media-picker__dialog::backdrop {
	background: rgba(15, 23, 42, 0.55);
}
.ap-media-picker__inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	max-block-size: 90vh;
	box-sizing: border-box;
}
.ap-media-picker__head {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.ap-media-picker__head h3 {
	margin: 0;
	flex: 0 0 auto;
}
.ap-media-picker__head input[type="search"] {
	flex: 1;
	min-block-size: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.375rem;
}
.ap-media-picker__head [data-media-picker-close] {
	min-block-size: 44px;
	min-inline-size: 44px;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	cursor: pointer;
}
.ap-media-picker__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
	gap: 0.5rem;
	overflow-y: auto;
	padding-block-end: 0.5rem;
}
.ap-media-picker__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border: 1px solid var(--line);
	border-radius: 0.375rem;
	background: var(--surface);
	padding: 0.25rem;
	cursor: pointer;
	min-block-size: 44px;
}
.ap-media-picker__item img {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.25rem;
}
.ap-media-picker__caption {
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ap-media-picker__loading,
.ap-media-picker__empty,
.ap-media-picker__error {
	color: var(--muted);
	margin: 0;
	padding: 1rem;
	text-align: center;
	grid-column: 1 / -1;
}

/* WCAG 2.5.5 (touch targets ≥ 44×44) — global guards for in-page nav and
   disclosure widgets across every admin page. Per-page <style> blocks
   may shrink padding for layout density; these rules ensure the hit area
   stays compliant on the 375px viewport sweep. */
[role="tab"],
.tab-link {
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}
details > summary {
	min-block-size: 44px;
	padding-block: 0.625rem;
}
/* Table-cell action links are the primary touch target on the row.
   WCAG 2.5.5 needs 44px in both axes; TD parent doesn't trigger the
   inline-flow exemption so the anchor itself must reach the size. */
td > a {
	display: inline-flex;
	min-block-size: 44px;
	min-inline-size: 44px;
	align-items: center;
	justify-content: flex-start;
}
/* Native checkbox / radio inputs render at ~13×13 by default. WCAG 2.5.5
   needs 44×44 — bump them globally in the admin shell so the bounding
   box matches. The platform-rendered indicator stays centred inside the
   larger box. */
input[type="checkbox"],
input[type="radio"] {
	inline-size: 44px;
	block-size: 44px;
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* Inline <code> tokens in body copy default to a monospace glyph that sits
   tight against the surrounding text — visually merging with neighbouring
   words ("like`admin`or`cms`"). Give them breathing room on the inline axis
   so the prose reads as separate words. */
p code,
li code,
.field-note code,
.admin-field__hint code {
	padding-inline: 0.2em;
	margin-inline: 0.1em;
	background: var(--code-bg, rgba(15, 23, 42, 0.06));
	border-radius: 3px;
	font-size: 0.95em;
}

/* RTL punctuation — when a primarily-LTR sentence (English placeholder copy
   not yet translated) renders inside a `dir="rtl"` block, the trailing
   period jumps to the visual start of the line. `unicode-bidi: plaintext`
   tells the browser to use the strong directional character at the start of
   the paragraph to determine direction, fixing the punctuation order without
   forcing manual bidi marks. */
html[dir="rtl"] p,
html[dir="rtl"] .field-note,
html[dir="rtl"] .stat-card p,
html[dir="rtl"] .support-card p,
html[dir="rtl"] .queue-copy span,
html[dir="rtl"] li {
	unicode-bidi: plaintext;
}

/* Section editor — list, footer, and add-section dialog. The web component
   does not ship its own CSS; styling lives here so admin.css owns the
   editor's visual identity (matches admin-button, panel, admin-field). */
.ap-section-editor {
	display: block;
}
.ap-section-editor__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-block: 0.75rem;
}
.ap-section-editor__empty {
	color: var(--muted);
	margin: 0.5rem 0;
	font-style: italic;
}
.ap-section-editor__footer {
	margin-block-start: 0.5rem;
}
.ap-section-editor__dialog {
	border: none;
	border-radius: 0.5rem;
	padding: 0;
	max-inline-size: min(36rem, 92vw);
	max-block-size: min(80vh, 40rem);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	background: #fff;
}
.ap-section-editor__dialog::backdrop {
	background: rgba(15, 23, 42, 0.45);
}
.ap-section-editor__dialog-inner {
	padding: 1.25rem 1.35rem 1rem;
	max-block-size: inherit;
	overflow-y: auto;
}
.ap-section-editor__dialog-inner h3 {
	margin: 0 0 0.85rem;
}
.ap-section-editor__dialog-inner h4 {
	margin: 1rem 0 0.5rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}
.ap-section-editor__picks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 0.5rem;
}
.ap-section-editor__pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.7rem 0.85rem;
	background: var(--panel-bg, #f8fafc);
	border: 1px solid var(--panel-border, rgba(15, 23, 42, 0.08));
	border-radius: 0.4rem;
	text-align: start;
	font: inherit;
	color: inherit;
	cursor: pointer;
	min-block-size: 44px;
}
.ap-section-editor__pick:hover,
.ap-section-editor__pick:focus-visible {
	border-color: var(--accent, #0f766e);
	background: #fff;
}
.ap-section-editor__pick strong {
	font-size: 0.95rem;
}
.ap-section-editor__pick span {
	font-size: 0.85rem;
	color: var(--muted);
}
.ap-editor-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
@media (min-width: 64rem) {
	.ap-editor-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
.ap-page-preview {
	display: flex;
	flex-direction: column;
	min-block-size: 24rem;
	border: 1px solid var(--panel-border, rgba(15, 23, 42, 0.08));
	border-radius: 0.4rem;
	background: #fff;
	overflow: hidden;
}
.ap-page-preview iframe {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: #fff;
}

/* Mobile chrome — at viewports under 600px the topbar stacks: brand on the
   first row, identity + actions on a second row. Without this the brand
   wordmark and the user identity cluster overlap (375px is the narrowest
   supported admin viewport). */
@media (max-width: 600px) {
	.topbar {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		padding: 0.6rem 0.85rem;
	}
	.topbar-meta {
		flex-wrap: wrap;
		row-gap: 0.4rem;
		justify-content: flex-end;
		flex: 1 1 auto;
	}
	.topbar-meta > span,
	.topbar-meta .role-chip {
		font-size: 0.85rem;
	}
	.topbar-brand {
		flex: 1 1 100%;
		font-size: 1rem;
	}
	.topbar-brand strong {
		font-size: 1rem;
	}
	/* Hamburger nav-toggle gets a guaranteed 44×44 hit area + visible
	   contrast under the dark topbar. The desktop rules above 56.25rem
	   hide it; this scope only applies on narrow viewports. */
	.nav-toggle {
		min-inline-size: 44px;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}