/**
 * AccessVane admin styles.
 *
 * Deliberately close to WordPress's own admin design rather than a branded
 * world of its own — a plugin screen that ignores the admin's visual language
 * reads as an advert, not a tool.
 */

.accessvane-wrap {
	--av-critical: #b32d2e;
	--av-serious: #b26200;
	--av-moderate: #8a6d00;
	--av-minor: #50575e;
	--av-good: #007017;
	--av-accent: #0b63ce;
	max-width: 1100px;
}

.accessvane-title {
	margin-bottom: 4px;
}

.accessvane-intro {
	max-width: 70ch;
	font-size: 14px;
	color: #50575e;
	margin-top: 0;
}

.accessvane-dim {
	color: #646970;
	font-size: 13px;
	margin: 2px 0;
}

/* --- cards -------------------------------------------------------------- */

.accessvane-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 20px;
	margin: 18px 0;
}

.accessvane-card > h2:first-child {
	margin-top: 0;
}

.accessvane-empty {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 40px 24px;
	text-align: center;
	margin-top: 20px;
}

.accessvane-empty p {
	max-width: 60ch;
	margin: 0 auto 20px;
	color: #50575e;
}

/* --- the honesty note --------------------------------------------------- */

.accessvane-note {
	border-left: 4px solid var(--av-accent);
	background: #f0f6fc;
	padding: 14px 18px;
	margin: 18px 0;
	border-radius: 0 4px 4px 0;
}

.accessvane-note p {
	margin: 6px 0 0;
	max-width: 80ch;
}

/* --- score -------------------------------------------------------------- */

.accessvane-score {
	display: inline-flex;
	align-items: baseline;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.accessvane-score small {
	font-size: 14px;
	font-weight: 400;
	color: #646970;
	margin-left: 2px;
}

.accessvane-score--good {
	color: var(--av-good);
}

.accessvane-score--warn {
	color: var(--av-serious);
}

.accessvane-score--bad {
	color: var(--av-critical);
}

/* --- summary ------------------------------------------------------------ */

.accessvane-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	padding: 22px;
	margin-top: 16px;
}

.accessvane-summary__score {
	text-align: center;
}

.accessvane-summary__score p {
	margin: 4px 0 0;
	font-size: 12px;
	color: #646970;
}

.accessvane-summary__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1;
	min-width: 260px;
}

.accessvane-count {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 10px 16px;
	min-width: 92px;
}

.accessvane-count__n {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.accessvane-count__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
}

.accessvane-count--critical .accessvane-count__n { color: var(--av-critical); }
.accessvane-count--serious  .accessvane-count__n { color: var(--av-serious); }
.accessvane-count--moderate .accessvane-count__n { color: var(--av-moderate); }
.accessvane-count--minor    .accessvane-count__n { color: var(--av-minor); }

.accessvane-meta {
	color: #646970;
	font-size: 13px;
}

/* --- pills -------------------------------------------------------------- */

.accessvane-pillrow {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.accessvane-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 3px;
	background: #f0f0f1;
	color: #3c434a;
	white-space: nowrap;
}

.accessvane-pill--critical { background: #fcf0f1; color: var(--av-critical); }
.accessvane-pill--serious  { background: #fcf5ea; color: var(--av-serious); }
.accessvane-pill--moderate { background: #fbf6e3; color: var(--av-moderate); }
.accessvane-pill--minor,
.accessvane-pill--advisory { background: #f0f0f1; color: var(--av-minor); }
.accessvane-pill--fixable  { background: #eef4fd; color: var(--av-accent); }
.accessvane-pill--wcag     { background: #f0f0f1; color: #3c434a; text-transform: none; }

/* --- tables ------------------------------------------------------------- */

.accessvane-table {
	margin: 12px 0 28px;
}

.accessvane-table td,
.accessvane-table th {
	vertical-align: top;
}

.accessvane-table p {
	max-width: 60ch;
}

/* --- page picker -------------------------------------------------------- */

.accessvane-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.accessvane-pagelist {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 6px 12px;
	margin: 12px 0 18px;
}

.accessvane-pagelist li {
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px solid #f0f0f1;
}

.accessvane-pagelist li:last-child {
	border-bottom: 0;
}

.accessvane-pagelist label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.accessvane-status {
	margin-left: 12px;
	font-size: 13px;
	color: #50575e;
}

/* The scanning frame must stay in the layout — a display:none iframe does not
   reliably load or compute styles, which would break every contrast check. */
#accessvane-frame {
	position: absolute;
	width: 1280px;
	height: 900px;
	left: -10000px;
	top: 0;
	border: 0;
	visibility: hidden;
}

/* --- results ------------------------------------------------------------ */

.accessvane-result__head {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.accessvane-result__head h3 {
	margin: 0;
}

.accessvane-result--error {
	border-left: 4px solid var(--av-critical);
}

.accessvane-clean {
	color: var(--av-good);
	font-weight: 600;
}

.accessvane-issue {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin: 8px 0;
	overflow: hidden;
}

.accessvane-issue > summary {
	cursor: pointer;
	padding: 10px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: #f6f7f7;
}

.accessvane-issue--critical > summary { border-left: 4px solid var(--av-critical); }
.accessvane-issue--serious  > summary { border-left: 4px solid var(--av-serious); }
.accessvane-issue--moderate > summary { border-left: 4px solid var(--av-moderate); }
.accessvane-issue--minor    > summary,
.accessvane-issue--advisory > summary { border-left: 4px solid #c3c4c7; }

.accessvane-issue__title {
	font-weight: 600;
}

.accessvane-issue__count {
	font-variant-numeric: tabular-nums;
	color: #646970;
	font-size: 12px;
}

.accessvane-issue__count::before {
	content: "x";
}

.accessvane-issue__body {
	padding: 14px;
}

.accessvane-issue__body p {
	max-width: 80ch;
}

.accessvane-wpfix {
	background: #f0f6fc;
	border-left: 3px solid var(--av-accent);
	padding: 10px 14px;
	border-radius: 0 3px 3px 0;
}

.accessvane-examples {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.accessvane-examples li {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	padding: 8px 10px;
	margin-bottom: 6px;
	overflow-x: auto;
}

.accessvane-examples code {
	display: block;
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
	background: none;
	padding: 0;
}

.accessvane-selector {
	display: block;
	margin-top: 4px;
	font-family: Consolas, Monaco, monospace;
	font-size: 11px;
	color: #646970;
	word-break: break-all;
}

/* --- repairs ------------------------------------------------------------ */

.accessvane-fix {
	border-top: 1px solid #f0f0f1;
	padding: 14px 0;
}

.accessvane-fix:first-of-type {
	border-top: 0;
}

.accessvane-fix__toggle {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
}

.accessvane-fix__what {
	margin: 6px 0 4px 26px;
	max-width: 80ch;
}

.accessvane-fix__risk {
	margin: 0 0 0 26px;
	max-width: 80ch;
	color: #646970;
	font-size: 13px;
}

.accessvane-options {
	border-top: 1px solid #f0f0f1;
	padding-top: 14px;
	margin-top: 10px;
}

.accessvane-options .description {
	display: block;
	margin-top: 3px;
}

/* --- manual checks ------------------------------------------------------ */

.accessvane-manual {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: accessvane-check;
}

.accessvane-manual > li {
	counter-increment: accessvane-check;
}

.accessvane-manual > li > h2::before {
	content: counter(accessvane-check) ". ";
	color: var(--av-accent);
}

.accessvane-manual p {
	max-width: 80ch;
}

/* --- alt text ----------------------------------------------------------- */

.accessvane-alt-row img {
	max-width: 90px;
	height: auto;
	border-radius: 3px;
	display: block;
}

.accessvane-alt-input {
	width: 100%;
}

.accessvane-alt-saved {
	color: var(--av-good);
	font-size: 12px;
	margin-left: 6px;
}

/* --- sibling product ---------------------------------------------------- */

.accessvane-sibling {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 28px;
	padding: 20px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.accessvane-sibling > div:first-child {
	flex: 1;
	min-width: 260px;
}

.accessvane-sibling h2 {
	margin: 0 0 8px;
	font-size: 15px;
}

.accessvane-sibling p {
	margin: 0 0 8px;
	max-width: 80ch;
}

.accessvane-sibling__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

/* --- review request ------------------------------------------------------ */

.accessvane-review {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
	padding: 16px 20px;
	background: #f0f6fc;
	border: 1px solid #c5d9ed;
	border-left: 4px solid var(--av-accent);
	border-radius: 0 6px 6px 0;
}

.accessvane-review__text {
	flex: 1;
	min-width: 280px;
	margin: 0;
	max-width: 80ch;
}

.accessvane-review__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	margin: 0;
}

.accessvane-review__no {
	font-size: 13px;
	color: #646970;
}