/**
 * AcceGuru - new design system (Settings + Dashboard).
 * Sizes match the reference HTML * 1.25.
 */

/* --------------------------------------------------------------------------
 * Tokens
 * -------------------------------------------------------------------------- */
.a11y-design {
	--navy: #134B87;
	--navy-light: #1a5fa0;
	--navy-pale: #e8f0f8;
	--navy-ghost: #f4f8fc;
	--mint: #2FBE8B;
	--mint-light: #3dd49c;
	--mint-pale: #e6f9f1;
	--mint-ghost: #f0fbf6;
	--text: #1a2a3a;
	--text-secondary: #5a6e82;
	--text-muted: #5a6e82;
	--border: #e2e8f0;
	--border-light: #f0f4f8;
	--bg: #fafcfe;
	--white: #ffffff;
	--critical: #dc3545;
	--critical-bg: #fef2f2;
	--serious: #e67e22;
	--serious-bg: #fef9f0;
	--moderate: #f0c040;
	--moderate-bg: #fffbeb;
	--minor: #6c757d;
	--minor-bg: #f8f9fa;
	--danger: #e74c4c;
	--danger-pale: #fef2f2;
}

/* Review prompt card ------------------------------------------------------ */
.wrap.a11y-design .a11y-review-notice {
	background: var(--white);
	border: 1px solid var(--border);
	border-left: 4px solid var(--mint);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.wrap.a11y-design .a11y-review-notice__text {
	margin: 0;
	font-size: 15px;
	color: var(--text);
	flex: 1;
	min-width: 280px;
}

.wrap.a11y-design .a11y-review-notice__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Page background on plugin admin screens --------------------------------- */
body:has(.wrap.a11y-design),
body:has(.wrap.a11y-design) #wpcontent,
body:has(.wrap.a11y-design) #wpbody-content {
	background: #fafcfe;
}

/* WP core "Settings saved." notice: larger and more prominent on our
 * Settings tabs. Defaults are 13-14px and easy to miss. */
body:has(.wrap.a11y-design) .notice.settings-error {
	font-size: 16px;
	font-weight: 500;
	padding: 16px 22px;
	border-radius: 10px;
	border-left-width: 6px;
	margin: 0 0 18px;
	box-shadow: 0 2px 6px rgba(19, 75, 135, 0.08);
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body:has(.wrap.a11y-design) .notice.settings-error.notice-success {
	background: var(--mint-pale, #e6f9f1);
	border-left-color: var(--mint, #2FBE8B);
}
body:has(.wrap.a11y-design) .notice.settings-error.notice-error {
	background: var(--danger-pale, #fef2f2);
	border-left-color: var(--danger, #e74c4c);
}
body:has(.wrap.a11y-design) .notice.settings-error p {
	font-size: inherit;
	margin: 0;
}

/* WP wrap reset for our design surface ------------------------------------ */
.wrap.a11y-design {
	max-width: 1122px;
	margin: 24px 20px 60px 0;
	padding: 0 0 0 22px;
	background: var(--bg);
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

.wrap.a11y-design *,
.wrap.a11y-design *::before,
.wrap.a11y-design *::after {
	box-sizing: border-box;
}

.wrap.a11y-design h1,
.wrap.a11y-design h2,
.wrap.a11y-design h3 {
	margin: 0;
	padding: 0;
	font-weight: 600;
	color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.a11y-d-header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 0 0;
	margin-bottom: 32px;
}

.a11y-d-header__right {
	margin-left: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.a11y-d-logo {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent;
}

.a11y-d-logo img {
	width: 50px;
	height: 50px;
	display: block;
}

.wrap.a11y-design .a11y-d-header__text h1 {
	font-size: 25px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.a11y-d-header__text h1 .a11y-d-version {
	position: relative;
	top: -2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 0;
	background: var(--mint);
	padding: 4px 10px;
	border-radius: 7px;
}

.a11y-d-header__text p {
	font-size: 16px;
	color: var(--text-muted);
	margin: 4px 0 0;
	line-height: 1.4;
}

/* Tabs (settings) --------------------------------------------------------- */
.wrap.a11y-design .a11y-d-tabs {
	display: flex;
	gap: 2px;
	margin: 0 0 36px;
	border-bottom: 1px solid var(--border);
	padding: 0;
}

.wrap.a11y-design .a11y-d-tab {
	padding: 13px 22px;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.wrap.a11y-design .a11y-d-tab:hover,
.wrap.a11y-design .a11y-d-tab:focus {
	color: var(--navy);
	box-shadow: none;
	outline: none;
}

.wrap.a11y-design .a11y-d-tab.is-active {
	color: var(--navy);
	border-bottom-color: var(--navy);
	font-weight: 600;
}

/* Section title ----------------------------------------------------------- */
.wrap.a11y-design .a11y-d-section-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 36px 0 18px;
}

.wrap.a11y-design .a11y-d-section-title:first-child,
.wrap.a11y-design .a11y-d-section-title.is-first {
	margin-top: 0;
}

/* Card -------------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px 30px;
	margin-bottom: 18px;
}

/* Form row ---------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 17px 0;
	border-bottom: 1px solid var(--border-light);
}

.wrap.a11y-design .a11y-d-row:first-child { padding-top: 4px; }
.wrap.a11y-design .a11y-d-row:last-child  { padding-bottom: 4px; border-bottom: none; }

.wrap.a11y-design .a11y-d-label {
	font-size: 17px;
	font-weight: 500;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	line-height: 1.4;
}

.wrap.a11y-design .a11y-d-label__title {
	display: block;
}

.wrap.a11y-design .a11y-d-label__hint {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--text-muted);
	margin-top: 4px;
	line-height: 1.45;
}

.wrap.a11y-design .a11y-d-control {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Help-tip wrapper inside flex labels needs to act inline ----------------- */
.wrap.a11y-design .a11y-help-tip-wrap {
	display: inline-flex;
	align-items: center;
}

/* Tooltip popup inherits text-transform from parents (e.g. uppercased
 * stat-card labels) - reset to readable casing. */
.wrap.a11y-design .a11y-help-tip__content {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

/* Tint the help-icon to match the design palette ------------------------- */
.wrap.a11y-design .a11y-help-tip {
	color: var(--navy);
}

.wrap.a11y-design .a11y-help-tip:hover,
.wrap.a11y-design .a11y-help-tip:focus {
	color: var(--navy-light);
}

/* Toggle ------------------------------------------------------------------ */
.wrap.a11y-design .a11y-d-toggle {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 25px;
	flex-shrink: 0;
}

.wrap.a11y-design .a11y-d-toggle input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

.wrap.a11y-design .a11y-d-toggle__slider {
	position: absolute;
	inset: 0;
	background: var(--border);
	border-radius: 13px;
	transition: background 0.2s;
}

.wrap.a11y-design .a11y-d-toggle__slider::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s;
}

.wrap.a11y-design .a11y-d-toggle input:checked + .a11y-d-toggle__slider {
	background: var(--mint);
}

.wrap.a11y-design .a11y-d-toggle input:checked + .a11y-d-toggle__slider::after {
	transform: translateX(20px);
}

.wrap.a11y-design .a11y-d-toggle input:focus-visible + .a11y-d-toggle__slider {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* Select ------------------------------------------------------------------ */
.wrap.a11y-design .a11y-d-select {
	padding: 9px 36px 9px 15px;
	border: 1px solid var(--border);
	border-radius: 9px;
	font-family: inherit;
	font-size: 16px;
	color: var(--text);
	background: var(--white) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa0b4' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 180px;
	height: auto;
	line-height: 1.4;
	box-shadow: none;
	cursor: pointer;
}

.wrap.a11y-design .a11y-d-select:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 1px var(--navy);
	outline: none;
}

/* Inputs ------------------------------------------------------------------ */
.wrap.a11y-design .a11y-d-input {
	padding: 9px 15px;
	border: 1px solid var(--border);
	border-radius: 9px;
	font-family: inherit;
	font-size: 16px;
	color: var(--text);
	background: var(--white);
	width: 240px;
	height: auto;
	line-height: 1.4;
	box-shadow: none;
}

.wrap.a11y-design .a11y-d-input:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 1px var(--navy);
	outline: none;
}

.wrap.a11y-design .a11y-d-input--sm     { width: 100px; text-align: center; }
.wrap.a11y-design .a11y-d-input--mono   { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.wrap.a11y-design .a11y-d-input--wide   { width: 320px; }
.wrap.a11y-design .a11y-d-input--apikey { width: 380px; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }

/* Multi-checkbox group ---------------------------------------------------- */
/* Checkbox-group rows (the post-type picker) carry the .a11y-d-cbrow
   modifier and stack vertically: the long title sits on its own
   full-width line instead of being crushed into a sliver by the
   non-shrinking control column, and the boxes lay out as an even
   auto-fitting grid rather than a ragged wrap. A plain class is used
   here (not :has()) so aggressive CSS optimisers cannot drop the rule. */
.wrap.a11y-design .a11y-d-cbrow {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.wrap.a11y-design .a11y-d-cbrow .a11y-d-control {
	display: block;
	width: 100%;
}

.wrap.a11y-design .a11y-d-cbgroup {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 12px 18px;
	align-items: center;
}

.wrap.a11y-design .a11y-d-cb {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--text);
	cursor: pointer;
	user-select: none;
}

.wrap.a11y-design .a11y-d-cb input {
	position: absolute;
	opacity: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
}

.wrap.a11y-design .a11y-d-cb__box {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1.5px solid var(--border);
	background: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.wrap.a11y-design .a11y-d-cb input:checked + .a11y-d-cb__box {
	background: var(--navy);
	border-color: var(--navy);
}

.wrap.a11y-design .a11y-d-cb input:checked + .a11y-d-cb__box::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: rotate(-45deg) translate(1px, -1px);
}

.wrap.a11y-design .a11y-d-cb input:focus-visible + .a11y-d-cb__box {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

/* Buttons ----------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-btn,
.wrap.a11y-design .a11y-d-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 24px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: filter 0.15s, background 0.15s, color 0.15s;
	height: auto;
	box-shadow: none;
}

/* `display: inline-flex` above wins over the browser's built-in
   `[hidden] { display: none }` rule, so the HTML `hidden` attribute
   silently does nothing on our buttons. Restore it explicitly. */
.wrap.a11y-design .a11y-d-btn[hidden] { display: none; }

.wrap.a11y-design .a11y-d-btn--primary { background: var(--navy);  color: var(--white); }
.wrap.a11y-design .a11y-d-btn--primary:hover { background: var(--navy-light); color: var(--white); }
.wrap.a11y-design .a11y-d-btn--mint    { background: var(--mint);  color: var(--white); }
.wrap.a11y-design .a11y-d-btn--mint:hover { background: var(--mint-light); color: var(--white); }
.wrap.a11y-design .a11y-d-btn--outline { background: var(--white); color: var(--text-secondary); border-color: var(--border); }
.wrap.a11y-design .a11y-d-btn--outline:hover { color: var(--navy); border-color: var(--navy); }
.wrap.a11y-design .a11y-d-btn--danger  { background: var(--white); color: #dc3545; border: 1px solid #dc3545; }
.wrap.a11y-design .a11y-d-btn--danger:hover { background: var(--danger-pale); color: #dc3545; }
.wrap.a11y-design .a11y-d-btn--sm      { padding: 8px 16px; font-size: 14px; border-radius: 8px; }

.wrap.a11y-design .a11y-d-btn:disabled,
.wrap.a11y-design .a11y-d-btn[disabled] {
	background: #868e96;
	color: #ffffff;
	border-color: transparent;
	cursor: not-allowed;
	box-shadow: none;
}
.wrap.a11y-design .a11y-d-btn:disabled:hover,
.wrap.a11y-design .a11y-d-btn[disabled]:hover {
	background: #868e96;
	color: #ffffff;
}

/* Two-column layout (Fixers tab) ----------------------------------------- */
.wrap.a11y-design .a11y-d-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	align-items: start;
}

.wrap.a11y-design .a11y-d-cols > .a11y-d-section-title {
	margin-top: 0;
}

@media (max-width: 900px) {
	.wrap.a11y-design .a11y-d-cols {
		grid-template-columns: 1fr;
	}
}

.wrap.a11y-design .a11y-d-btngroup {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* Boxes ------------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-info {
	background: var(--navy-ghost);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px 22px;
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.55;
}

.wrap.a11y-design .a11y-d-divider {
	height: 1px;
	background: var(--border);
	margin: 32px 0;
	border: none;
}

/* Key-saved indicator ----------------------------------------------------- */
.wrap.a11y-design .a11y-d-key {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
}

.wrap.a11y-design .a11y-d-key--ok      { color: #1a8a60; }
.wrap.a11y-design .a11y-d-key--ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.wrap.a11y-design .a11y-d-key--missing { color: #b07a18; }
.wrap.a11y-design .a11y-d-key--missing::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--moderate); }

/* Textarea + WP editor wrapper -------------------------------------------- */
.wrap.a11y-design .a11y-d-editor-wrap .wp-editor-wrap {
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--white);
}

.wrap.a11y-design .a11y-d-editor-wrap .wp-editor-tools {
	background: var(--navy-ghost);
	border-bottom: 1px solid var(--border);
}

.wrap.a11y-design .a11y-d-editor-wrap textarea.wp-editor-area {
	border: none;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	padding: 16px;
}

/* Inline note ------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-note {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 6px;
}

/* WP notices passthrough -------------------------------------------------- */
.wrap.a11y-design .notice {
	margin: 0 0 18px;
	border-radius: 8px;
}

/* Tables ------------------------------------------------------------------ */
.wrap.a11y-design .a11y-d-table {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.wrap.a11y-design .a11y-d-table thead th {
	background: var(--navy-ghost);
	border-bottom: 1px solid var(--border);
	padding: 14px 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
}

.wrap.a11y-design .a11y-d-table tbody td {
	padding: 14px 22px;
	font-size: 15px;
	color: var(--text);
	border-bottom: 1px solid var(--border-light);
	vertical-align: middle;
}

.wrap.a11y-design .a11y-d-table tbody tr:last-child td { border-bottom: none; }

/* Animations -------------------------------------------------------------- */
@keyframes a11yDFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wrap.a11y-design .a11y-d-card,
.wrap.a11y-design .a11y-d-table,
.wrap.a11y-design .a11y-d-info,
.wrap.a11y-design .a11y-d-section-title {
	animation: a11yDFadeIn 0.35s ease both;
}

/* Hide WP-injected H1/wrap chrome we replaced ----------------------------- */
.wrap.a11y-design > h1.wp-heading-inline,
.wrap.a11y-design > .page-title-action,
.wrap.a11y-design > hr.wp-header-end {
	display: none !important;
}

/* ==========================================================================
 * Dashboard
 * ========================================================================== */

/* Header buttons row ------------------------------------------------------ */
.wrap.a11y-design .a11y-d-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

/* Status filter ----------------------------------------------------------- */
.wrap.a11y-design .a11y-d-status-filter {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 28px;
	padding: 0;
	border: none;
	white-space: nowrap;
}

.wrap.a11y-design .a11y-d-status-filter label { white-space: nowrap; }

.wrap.a11y-design .a11y-d-status-filter__label {
	font-size: 15px;
	font-weight: 500;
	color: var(--text-muted);
	margin: 0;
	padding: 0;
}

.wrap.a11y-design .a11y-d-status-filter label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: var(--text-secondary);
	cursor: pointer;
	margin: 0;
}

.wrap.a11y-design .a11y-d-status-filter input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.5px solid var(--border);
	background: var(--white);
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}

.wrap.a11y-design .a11y-d-status-filter input[type="checkbox"]:checked {
	background: var(--navy);
	border-color: var(--navy);
}

/* Suppress WordPress's default checkmark image so only our custom one shows. */
.wrap.a11y-design .a11y-d-status-filter input[type="checkbox"]::before {
	content: none !important;
	display: none !important;
}

.wrap.a11y-design .a11y-d-status-filter input[type="checkbox"]:checked::after {
	content: '';
	width: 8px;
	height: 5px;
	border-left: 1.7px solid var(--white);
	border-bottom: 1.7px solid var(--white);
	transform: rotate(-45deg) translate(1px, -1px);
}

/* Standalone branded checkbox (e.g. the Bulk Alt Text consent box). Native
 * WordPress admin checkboxes set appearance:none and ignore accent-color, so
 * we replace the control to match the dashboard's status-filter checkbox. */
.wrap.a11y-design input[type="checkbox"].a11y-d-cbx {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.5px solid var(--border);
	background: var(--white);
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	flex-shrink: 0;
}

.wrap.a11y-design input[type="checkbox"].a11y-d-cbx:checked {
	background: var(--navy);
	border-color: var(--navy);
}

.wrap.a11y-design input[type="checkbox"].a11y-d-cbx::before {
	content: none !important;
	display: none !important;
}

.wrap.a11y-design input[type="checkbox"].a11y-d-cbx:checked::after {
	content: '';
	width: 8px;
	height: 5px;
	border-left: 1.7px solid var(--white);
	border-bottom: 1.7px solid var(--white);
	transform: rotate(-45deg) translate(1px, -1px);
}

.wrap.a11y-design input[type="checkbox"].a11y-d-cbx:disabled {
	opacity: 1;
	cursor: default;
}

/* Welcome card ------------------------------------------------------------ */
.wrap.a11y-design .a11y-d-welcome {
	background: linear-gradient(135deg, var(--navy-ghost) 0%, var(--mint-pale) 100%);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 28px 32px;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}

.wrap.a11y-design .a11y-d-welcome__top {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.wrap.a11y-design .a11y-d-welcome::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(47, 190, 139, 0.06);
}

.wrap.a11y-design .a11y-d-welcome::after {
	content: '';
	position: absolute;
	bottom: -70px;
	left: -40px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(19, 75, 135, 0.05);
}

.wrap.a11y-design .a11y-d-welcome > * { position: relative; z-index: 1; }

.wrap.a11y-design .a11y-d-welcome__icon {
	width: 96px;
	height: 96px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	flex-shrink: 0;
	background: transparent;
}

.wrap.a11y-design .a11y-d-welcome__icon img { width: 96px; height: 96px; display: block; }

.wrap.a11y-design .a11y-d-welcome__body { flex: 1; min-width: 0; }

.wrap.a11y-design .a11y-d-welcome__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -0.02em;
	margin: 0 0 10px;
}

.wrap.a11y-design .a11y-d-welcome__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--text-secondary);
	margin: 0;
}

.wrap.a11y-design .a11y-d-welcome__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.wrap.a11y-design .a11y-d-welcome__hint {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0;
	font-style: italic;
}

/* Stats row --------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}

/* Scan-coverage line (X of Y content types) ------------------------------- */
.wrap.a11y-design .a11y-d-coverage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: -16px 0 24px;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	font-size: 13px;
	color: var(--text-muted);
}
.wrap.a11y-design .a11y-d-coverage.is-full {
	border-color: var(--mint-pale);
	background: var(--mint-pale);
}
.wrap.a11y-design .a11y-d-coverage__count {
	font-weight: 600;
	color: var(--navy);
}
.wrap.a11y-design .a11y-d-coverage__missing {
	color: var(--text);
}
.wrap.a11y-design .a11y-d-stat {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 24px;
	border-top: 3px solid var(--border);
}

.wrap.a11y-design .a11y-d-stat--navy   { border-top-color: var(--navy-pale); }
.wrap.a11y-design .a11y-d-stat--red    { border-top-color: var(--critical-bg); }
.wrap.a11y-design .a11y-d-stat--orange { border-top-color: var(--serious-bg); }
.wrap.a11y-design .a11y-d-stat--mint   { border-top-color: var(--mint-pale); }

.wrap.a11y-design .a11y-d-stat__icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.wrap.a11y-design .a11y-d-stat__icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.wrap.a11y-design .a11y-d-stat__icon--navy   { background: var(--navy-pale);    color: var(--navy); }
.wrap.a11y-design .a11y-d-stat__icon--red    { background: var(--critical-bg); color: var(--critical); }
.wrap.a11y-design .a11y-d-stat__icon--orange { background: var(--serious-bg);  color: var(--serious); }
.wrap.a11y-design .a11y-d-stat__icon--mint   { background: var(--mint-pale);    color: var(--mint); }

.wrap.a11y-design .a11y-d-stat__value {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 6px;
}

.wrap.a11y-design .a11y-d-stat--navy   .a11y-d-stat__value { color: var(--navy); }
.wrap.a11y-design .a11y-d-stat--red    .a11y-d-stat__value { color: var(--critical); }
.wrap.a11y-design .a11y-d-stat--orange .a11y-d-stat__value { color: var(--serious); }
.wrap.a11y-design .a11y-d-stat--mint   .a11y-d-stat__value { color: var(--mint); }

.wrap.a11y-design .a11y-d-stat__value.is-empty {
	color: var(--border);
	font-size: 36px;
}

.wrap.a11y-design .a11y-d-stat__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Distribution bar -------------------------------------------------------- */
.wrap.a11y-design .a11y-d-dist {
	margin-bottom: 28px;
}

.wrap.a11y-design .a11y-d-dist__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.wrap.a11y-design .a11y-d-dist__bar {
	display: flex;
	height: 32px;
	border-radius: 9px;
	overflow: hidden;
	margin-bottom: 10px;
}

.wrap.a11y-design .a11y-d-dist__seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	min-width: 90px;
	padding: 0 6px;
	white-space: nowrap;
}

.wrap.a11y-design .a11y-d-dist__seg--critical { background: var(--critical); }
.wrap.a11y-design .a11y-d-dist__seg--serious  { background: var(--serious); }
.wrap.a11y-design .a11y-d-dist__seg--moderate { background: var(--moderate); color: #7a6800; }
.wrap.a11y-design .a11y-d-dist__seg--minor    { background: #a0aec0; }

.wrap.a11y-design .a11y-d-dist__time {
	font-size: 13px;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wrap.a11y-design .a11y-d-dist__time::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mint);
}

/* Card chrome (panels) ---------------------------------------------------- */
.wrap.a11y-design .a11y-d-panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	margin-bottom: 18px;
	/* overflow:visible so help-tip popups in panel headers can escape; inner
	   scrollable lists handle their own clipping. */
	overflow: visible;
}

.wrap.a11y-design .a11y-d-panel__title {
	padding: 22px 24px 16px;
	font-size: 17px;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.wrap.a11y-design .a11y-d-panel__title .a11y-d-panel__meta,
.wrap.a11y-design .a11y-d-panel__head .a11y-d-panel__meta {
	margin-left: auto;
	font-weight: 400;
	font-size: 13px;
	color: var(--text-muted);
}

/* Head row wrapper (Top Offending Pages): heading, View-all disclosure and
   meta text sit side by side as SIBLINGS - the interactive disclosure must
   not nest inside the role=button heading. The wrapper takes over the
   title's padding; the heading inside keeps only its text and chevron. */
.wrap.a11y-design .a11y-d-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 24px 16px;
	position: relative;
}
.wrap.a11y-design .a11y-d-panel__head > .a11y-d-panel__title {
	padding: 0;
	flex: 0 0 auto;
}
/* The chevron is appended inside the (now short, left-aligned) heading;
   pin it back to the row's right edge so all three panels keep their
   chevrons on one vertical line. It stays a child of the heading, so
   clicking it still toggles the collapse. */
.wrap.a11y-design .a11y-d-panel__head .a11y-d-collapse-chevron {
	position: absolute;
	right: 22px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	margin: 0;
}
/* Keep the meta text clear of the pinned chevron. */
.wrap.a11y-design .a11y-d-panel__head .a11y-d-panel__meta {
	margin-right: 34px;
}

/* "View all" post-type dropdown in the Top Offending Pages title. A native
   details/summary disclosure: no scripting, keyboard toggling built in, and
   arrowing through it never navigates anywhere (unlike a jump-on-change
   select). Scales to any number of post types without crowding the title. */
.wrap.a11y-design .a11y-d-typemenu {
	position: relative;
	font-size: 13px;
	font-weight: 500;
}
.wrap.a11y-design .a11y-d-typemenu > summary {
	cursor: pointer;
	color: var(--navy);
	white-space: nowrap;
	list-style: none;
}
.wrap.a11y-design .a11y-d-typemenu > summary::-webkit-details-marker {
	display: none;
}
.wrap.a11y-design .a11y-d-typemenu__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.wrap.a11y-design .a11y-d-typemenu__item {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--navy);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.wrap.a11y-design .a11y-d-typemenu__item:hover,
.wrap.a11y-design .a11y-d-typemenu__item:focus {
	background: var(--bg);
}

/* Filter pills (Top Offending Pages) ------------------------------------- */
.wrap.a11y-design .a11y-d-pills {
	display: flex;
	gap: 6px;
	padding: 0 24px 16px;
	flex-wrap: wrap;
}

.wrap.a11y-design .a11y-d-pill,
.wrap.a11y-design .a11y-table__filter-btn {
	padding: 7px 14px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--border);
	background: var(--white);
	color: var(--text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	line-height: 1.2;
	box-shadow: none;
	transition: all 0.15s;
}

.wrap.a11y-design .a11y-table__filter-btn:hover:not(:disabled) {
	border-color: var(--navy);
	color: var(--navy);
}

.wrap.a11y-design .a11y-table__filter-btn.is-active {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.wrap.a11y-design .a11y-table__filter-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wrap.a11y-design .a11y-table__filter-count {
	font-weight: 600;
	font-size: 13px;
}

/* Top-pages table (override old chrome) ---------------------------------- */
.wrap.a11y-design .a11y-d-panel .a11y-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.wrap.a11y-design .a11y-d-panel .a11y-table--impacts th:first-child,
.wrap.a11y-design .a11y-d-panel .a11y-table--impacts td:first-child {
	max-width: 420px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.wrap.a11y-design .a11y-d-panel .a11y-table thead th {
	background: var(--navy-ghost);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 12px 24px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
}

.wrap.a11y-design .a11y-d-panel .a11y-table thead th.a11y-table__num { text-align: center; }
.wrap.a11y-design .a11y-d-panel .a11y-table thead th:last-child { text-align: right; }

.wrap.a11y-design .a11y-d-panel .a11y-table tbody td {
	padding: 14px 24px;
	border-bottom: 1px solid var(--border-light);
	font-size: 15px;
	color: var(--text);
	vertical-align: middle;
}

.wrap.a11y-design .a11y-d-panel .a11y-table tbody tr:last-child td { border-bottom: none; }
.wrap.a11y-design .a11y-d-panel .a11y-table tbody tr:hover { background: var(--navy-ghost); }

.wrap.a11y-design .a11y-d-panel .a11y-table tbody td:last-child {
	text-align: right;
	font-size: 14px;
	color: var(--text-muted);
}

.wrap.a11y-design .a11y-d-panel .a11y-table tbody td.a11y-table__num {
	text-align: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-weight: 500;
	font-size: 15px;
}

.wrap.a11y-design .a11y-d-panel .a11y-table .a11y-table__zero { color: var(--border); font-weight: 500; }

.wrap.a11y-design .a11y-d-panel .a11y-table tbody td a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 500;
}

.wrap.a11y-design .a11y-d-panel .a11y-table tbody td a:hover { text-decoration: underline; }

.wrap.a11y-design .a11y-table__view-link {
	font-size: 13px;
	color: var(--text-muted) !important;
	font-weight: 400 !important;
	margin-left: 8px;
}

.wrap.a11y-design .a11y-d-panel .a11y-table__empty td {
	padding: 56px 24px !important;
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	font-size: 16px;
}

/* Bottom grid (Scan log + Most Common Issues) ---------------------------- */
.wrap.a11y-design .a11y-d-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 18px;
	align-items: start;
}

.wrap.a11y-design .a11y-d-bottom .a11y-d-panel {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.wrap.a11y-design .a11y-d-bottom { grid-template-columns: 1fr; }
	.wrap.a11y-design .a11y-d-stats  { grid-template-columns: repeat(2, 1fr); }
}

/* Scan log ---------------------------------------------------------------- */
.wrap.a11y-design .acceguru-bulk-alt__log {
	list-style: none;
	margin: 0;
	padding: 0 24px 18px;
	max-height: 480px;
	overflow-y: auto;
	border: none;
}

.wrap.a11y-design .a11y-rules {
	max-height: 480px;
	overflow-y: auto;
}

.wrap.a11y-design .acceguru-bulk-alt__log li,
.wrap.a11y-design .acceguru-bulk-alt__log-item {
	padding: 9px 0;
	border-bottom: 1px solid var(--border-light);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.45;
}

.wrap.a11y-design .acceguru-bulk-alt__log li:last-child { border-bottom: none; }

.wrap.a11y-design .acceguru-bulk-alt__log-item--ok strong  { color: var(--mint); }
.wrap.a11y-design .acceguru-bulk-alt__log-item--err strong { color: var(--critical); }

/* Most Common Issues ------------------------------------------------------ */
.wrap.a11y-design .a11y-rules {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wrap.a11y-design .a11y-rules__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 24px;
	border-bottom: 1px solid var(--border-light);
}

.wrap.a11y-design .a11y-rules__item:last-child { border-bottom: none; }

.wrap.a11y-design .a11y-rules__name {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 14px;
	color: var(--text);
	width: 140px;
	flex-shrink: 0;
	text-decoration: none;
}

.wrap.a11y-design .a11y-rules__name:hover { color: var(--navy); text-decoration: underline; }

.wrap.a11y-design .a11y-rules__bar {
	flex: 1;
	height: 9px;
	background: var(--border-light);
	border-radius: 5px;
	overflow: hidden;
	display: block;
}

.wrap.a11y-design .a11y-rules__bar-fill {
	display: block;
	height: 100%;
	background: var(--critical);
	border-radius: 5px;
}

.wrap.a11y-design .a11y-rules__count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	width: 32px;
	text-align: right;
}

.wrap.a11y-design .a11y-rules__ignore {
	font-size: 13px;
	color: var(--text-muted);
	padding: 5px 11px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--white);
	cursor: pointer;
	font-family: inherit;
}

.wrap.a11y-design .a11y-rules__ignore:hover {
	border-color: var(--navy);
	color: var(--navy);
}

/* Reset all scan data (inline in status-filter row) ----------------------- */
.wrap.a11y-design .a11y-d-reset-tip {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
}

.wrap.a11y-design .a11y-d-reset-btn {
	align-self: baseline;
	background: #dc3545;
	color: #fff;
	border: none;
	font-size: 16px;
	font-weight: 600;
	padding: 11px 24px;
	border-radius: 9px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	box-shadow: none;
	transition: background 0.15s;
}

.wrap.a11y-design .a11y-d-reset-btn:hover,
.wrap.a11y-design .a11y-d-reset-btn:focus {
	background: #b32d2e;
	color: #fff;
}

/* Site-scan progress bar -------------------------------------------------- */
.wrap.a11y-design #acceguru-site-scan-progress {
	margin-bottom: 24px;
}

.wrap.a11y-design .acceguru-bulk-alt__bar {
	position: relative;
	width: 100%;
	height: 26px;
	background: var(--border-light);
	border-radius: 8px;
	overflow: hidden;
	border: none;
}

.wrap.a11y-design .acceguru-bulk-alt__fill {
	display: block;
	height: 100%;
	background: var(--mint);
	transition: width 0.2s;
}

.wrap.a11y-design .acceguru-bulk-alt__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: 0;
	pointer-events: none;
}

/* Spinners (test API key) ------------------------------------------------- */
.wrap.a11y-design .spinner.is-active {
	float: none;
	margin-top: 0;
}

/* Collapsible dashboard sections --------------------------------------- */
/* JS marks each collapsible block with [data-a11y-collapse="<key>"] and
   appends a .a11y-d-collapse-chevron span to its title. The chevron lives
   INSIDE the title as a flex item pushed to the right with margin-left:
   auto, so it sits exactly on the title's baseline (vertical alignment
   with the block name) and lands at the title's right edge.
   To get those right edges onto the same vertical line across all three
   sections, we normalise their effective right padding to 30px - the
   card's padding-right - so each title ends at the same X. */
.wrap.a11y-design [data-a11y-collapse] .a11y-d-section-title,
.wrap.a11y-design [data-a11y-collapse] .a11y-d-panel__title,
.wrap.a11y-design [data-a11y-collapse] .a11y-d-dist__label {
	display: flex;
	align-items: center;
}

/* Normalise the right padding of each section's header area so all three
   title right edges land at the same X within the main column. */
.wrap.a11y-design [data-a11y-collapse].a11y-d-dist {
	padding-right: 30px;
}
.wrap.a11y-design [data-a11y-collapse] > .a11y-d-panel__title,
.wrap.a11y-design [data-a11y-collapse] > .a11y-d-panel__head {
	padding-right: 30px;
}

.wrap.a11y-design .a11y-d-collapse-chevron {
	margin-left: auto;
	font-size: 26px;
	line-height: 1;
	color: var(--text-muted, #5a6e82);
	transition: transform 0.18s ease;
	cursor: pointer;
	/* Padding + negative margin: visible glyph stays the same size but
	   the hit area is a comfortable ~38x34 box. */
	padding: 6px 8px;
	margin-top: -6px;
	margin-bottom: -6px;
	margin-right: -8px;
}

.wrap.a11y-design [data-a11y-collapse].is-collapsed .a11y-d-collapse-chevron {
	transform: rotate(-90deg);
}

/* Hide everything inside the collapsed wrapper except the title itself.
   Three title selectors cover the three kinds of section we collapse:
   .a11y-d-section-title (cards like alt text coverage),
   .a11y-d-panel__title (top offending pages),
   .a11y-d-dist__label  (issue distribution bar). */
.wrap.a11y-design [data-a11y-collapse].is-collapsed > *:not(.a11y-d-section-title):not(.a11y-d-panel__title):not(.a11y-d-panel__head):not(.a11y-d-dist__label) {
	display: none !important;
}

/* When the collapsed wrapper is a card with normal padding, the title
   sits alone with full padding. Tighten the bottom to avoid awkward
   tall-empty-card look. */
.wrap.a11y-design [data-a11y-collapse].is-collapsed.a11y-d-card,
.wrap.a11y-design [data-a11y-collapse].is-collapsed.a11y-d-panel {
	padding-bottom: 16px;
}

/* Right-side rail (dashboard + settings) --------------------------------- */
/* These screens drop the shared 1122px cap so the rail can occupy
 * browser space to the RIGHT of the main column. The main column is pinned
 * at 1100px - exactly its pre-rail width - so nothing inside it reflows. */
.wrap.a11y-design.a11y-dashboard,
.wrap.a11y-design.a11y-settings {
	max-width: none;
}

.a11y-d-with-rail {
	display: flex;
	/* stretch (not flex-start) so .a11y-d-rail grows to the full height of
	 * the main column - that tall track is what gives the sticky rail
	 * room to actually stick while the page scrolls. */
	align-items: stretch;
	gap: 24px;
	width: fit-content;
	max-width: 100%;
}

.a11y-d-main {
	width: 1100px;
	max-width: 100%;
	min-width: 0;
	flex-shrink: 1;
}

.a11y-d-rail {
	width: 290px;
	flex-shrink: 0;
}

/* Sticky wrapper keeps the rail content visible during scroll. */
.wrap.a11y-design .a11y-d-rail__sticky {
	position: sticky;
	top: 42px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* FAQ box ---------------------------------------------------------------- */
.wrap.a11y-design .a11y-d-faq {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 20px 14px;
}

.wrap.a11y-design .a11y-d-faq__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.wrap.a11y-design .a11y-d-faq__item {
	border-top: 1px solid var(--border-light);
	padding: 10px 0;
}

.wrap.a11y-design .a11y-d-faq__item:last-child {
	padding-bottom: 4px;
}

.wrap.a11y-design .a11y-d-faq__docs {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-light);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	text-align: right;
}

.wrap.a11y-design .a11y-d-faq__docs:hover,
.wrap.a11y-design .a11y-d-faq__docs:focus {
	color: var(--mint);
	text-decoration: underline;
}

.wrap.a11y-design .a11y-d-faq__q {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--text);
	line-height: 1.4;
	list-style: none;
	padding-right: 18px;
	position: relative;
}

.wrap.a11y-design .a11y-d-faq__q::-webkit-details-marker {
	display: none;
}

.wrap.a11y-design .a11y-d-faq__q::after {
	content: '+';
	position: absolute;
	right: 0;
	top: -1px;
	font-size: 18px;
	font-weight: 700;
	color: var(--text-muted);
	line-height: 1;
}

.wrap.a11y-design .a11y-d-faq__item[open] .a11y-d-faq__q::after {
	content: '\2013'; /* en dash, looks like a minus */
}

.wrap.a11y-design .a11y-d-faq__a {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
}

/* Not enough room for a full 1100px main column plus the rail - stack the
 * rail underneath so the main column keeps behaving exactly as it did
 * before the rail existed. */
@media (max-width: 1640px) {
	.a11y-d-with-rail {
		flex-direction: column;
		width: auto;
	}
	.a11y-d-main {
		width: 100%;
		max-width: 1100px;
	}
	.a11y-d-rail {
		width: 100%;
		max-width: 1100px;
	}
	.wrap.a11y-design .a11y-d-rail__sticky {
		position: static;
	}
}

/* Phone / tablet-portrait (<= 782px) -------------------------------------- *
 * Closes the layouts that overflow on narrow screens: the dashboard header,
 * the status-filter row, the Top Offending Pages title, the distribution bar,
 * and above all the wide impact table (which otherwise squeezed its first
 * column to nothing and wrapped page titles one character per line). */
@media (max-width: 782px) {

	/* Header: title on top, action buttons full width underneath. */
	.wrap.a11y-design .a11y-d-header { flex-wrap: wrap; }
	.wrap.a11y-design .a11y-d-header__right { margin-left: 0; width: 100%; }
	.wrap.a11y-design .a11y-d-actions { width: 100%; }
	.wrap.a11y-design .a11y-d-actions .a11y-d-btn { flex: 1 1 auto; }

	/* Settings tabs: keep them on one row and let it scroll sideways instead
	   of wrapping "AI Alt Text" and clipping the tabs past the right edge.
	   overflow-y:hidden stops the browser adding a stray vertical scrollbar
	   (which it does when only overflow-x is set). */
	.wrap.a11y-design .a11y-d-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.wrap.a11y-design .a11y-d-tab {
		flex-shrink: 0;
		white-space: nowrap;
		padding: 13px 16px;
	}

	/* Status filter: wrap onto multiple lines instead of clipping. */
	.wrap.a11y-design .a11y-d-status-filter {
		flex-wrap: wrap;
		white-space: normal;
		align-items: center;
		gap: 10px 16px;
	}

	/* Reset button spans the full width of the screen, with a little gap above. */
	.wrap.a11y-design .a11y-d-reset-btn { width: 100%; margin-top: 8px; }

	/* Top Offending Pages head: drop the "View all" / "Showing top" meta
	   onto their own full-width lines. */
	.wrap.a11y-design .a11y-d-panel__title,
	.wrap.a11y-design .a11y-d-panel__head { flex-wrap: wrap; }
	.wrap.a11y-design .a11y-d-panel__title .a11y-d-panel__meta,
	.wrap.a11y-design .a11y-d-panel__head .a11y-d-panel__meta {
		margin-left: 0;
		flex-basis: 100%;
	}

	/* Distribution bar: scroll sideways so the Minor segment stays reachable. */
	.wrap.a11y-design .a11y-d-dist__bar { overflow-x: auto; overflow-y: hidden; }
	.wrap.a11y-design .a11y-d-dist__seg { min-width: 76px; }

	/* Wide impact table: scroll horizontally as a block, keep page titles on
	   one line, and tighten cell padding so columns fit. */
	.wrap.a11y-design .a11y-d-panel .a11y-table--impacts {
		display: block;
		width: max-content;
		max-width: 100%;
		overflow-x: auto;
	}
	.wrap.a11y-design .a11y-d-panel .a11y-table--impacts th:first-child,
	.wrap.a11y-design .a11y-d-panel .a11y-table--impacts td:first-child {
		max-width: none;
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: normal;
	}
	.wrap.a11y-design .a11y-d-panel .a11y-table--impacts thead th,
	.wrap.a11y-design .a11y-d-panel .a11y-table--impacts tbody td {
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
	}

	/* Same horizontal-scroll treatment for the boxed tables (e.g. the
	   ignored-rules table) so their cells stop wrapping per character
	   when squeezed. */
	.wrap.a11y-design .a11y-d-table {
		display: block;
		width: max-content;
		max-width: 100%;
		overflow-x: auto;
	}
	.wrap.a11y-design .a11y-d-table thead th,
	.wrap.a11y-design .a11y-d-table tbody td {
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
	}

	/* Welcome banner: stack the icon above the text, shrink the oversized
	   icon and title, and tighten padding so it reads cleanly on a phone. */
	.wrap.a11y-design .a11y-d-welcome { padding: 20px; }
	.wrap.a11y-design .a11y-d-welcome__top {
		flex-direction: column;
		gap: 14px;
	}
	.wrap.a11y-design .a11y-d-welcome__icon,
	.wrap.a11y-design .a11y-d-welcome__icon img {
		width: 64px;
		height: 64px;
	}
	.wrap.a11y-design .a11y-d-welcome__title { font-size: 22px; }

	/* Top Offending Pages filter buttons: 3 per line. */
	.wrap.a11y-design .a11y-d-pills {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	/* Settings rows: put the control on its own full-width line under the
	   label so wide dropdowns / text fields stop colliding with the label.
	   Toggle rows keep their compact label-left / switch-right layout. */
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) .a11y-d-control {
		width: 100%;
	}
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) .a11y-d-control select,
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) .a11y-d-control textarea,
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) .a11y-d-control .a11y-d-select,
	.wrap.a11y-design .a11y-d-row:not( :has( .a11y-d-toggle ) ) .a11y-d-control .a11y-d-input {
		width: 100%;
	}

	/* API-key controls: stack the field on top (full width) with the
	   "Key saved" status as a tidy line beneath it, instead of the field and
	   status colliding side by side. */
	.wrap.a11y-design .a11y-d-control:has( .a11y-d-key ) {
		flex-direction: column;
		align-items: stretch;
	}
	.wrap.a11y-design .a11y-d-control:has( .a11y-d-key ) .a11y-d-key {
		order: 2;
		align-self: flex-start;
	}
}