/*
 * Formular, Registerkarten und Befundliste.
 *
 * Zurueckhaltend und ohne Markenfarben: das Plugin ist eine Vorlage und soll
 * sich in ein beliebiges Theme einfuegen. Alles Wesentliche haengt an
 * CSS-Variablen, die ein Theme ueberschreiben kann.
 *
 * Die Statusfarben tragen NIE die Bedeutung allein - neben jeder Farbe steht
 * ein Zeichen oder ein Wort. Sonst waere die Ausgabe eines
 * Barrierefreiheits-Werkzeugs selbst nicht barrierefrei (WCAG 1.4.1).
 */

.website-scanner {
	--ws-abstand: 1rem;
	--ws-radius: 6px;
	--ws-rahmen: #d6d8db;
	--ws-flaeche: #f7f8f9;
	--ws-gut: #2c7a4b;
	--ws-mittel: #b7791f;
	--ws-schlecht: #c53030;
	--ws-gedaempft: #6b7280;

	margin: var(--ws-abstand) 0;
}

.website-scanner__title { margin: 0 0 .5rem; }

.website-scanner__label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
}

.website-scanner__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.website-scanner__input {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .6rem .75rem;
	border: 1px solid var(--ws-rahmen);
	border-radius: var(--ws-radius);
	font: inherit;
}

.website-scanner__button {
	padding: .6rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: var(--ws-radius);
	background: transparent;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.website-scanner__button[disabled] {
	opacity: .6;
	cursor: progress;
}

.website-scanner__scope {
	margin: .5rem 0 0;
	font-size: .875em;
	color: var(--ws-gedaempft);
}

.website-scanner__status {
	margin: .75rem 0 0;
	padding: .6rem .75rem;
	border-radius: var(--ws-radius);
	background: var(--ws-flaeche);
	font-size: .9375em;
}

.website-scanner__status.is-error {
	background: #fdecea;
	color: var(--ws-schlecht);
}

/* ── Gesamtergebnis ──────────────────────────────────────────────────────── */

.website-scanner__results { margin-top: var(--ws-abstand); }

.website-scanner__summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--ws-abstand);
}

/*
 * Ringdiagramm ueber conic-gradient. Der Wert steht als Zahl in der Mitte -
 * der Ring ist Zierde, nicht Traeger der Information.
 */
.website-scanner__gauge {
	--ws-anteil: 0;
	position: relative;
	flex: 0 0 auto;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: conic-gradient( currentColor calc( var(--ws-anteil) * 1% ), var(--ws-flaeche) 0 );
	display: grid;
	place-items: center;
}

.website-scanner__gauge::after {
	content: "";
	position: absolute;
	inset: .55rem;
	border-radius: 50%;
	background: #fff;
}

.website-scanner__gauge-value {
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	font-weight: 700;
	color: #111;
}

.website-scanner__gauge.is-good { color: var(--ws-gut); }
.website-scanner__gauge.is-ok   { color: var(--ws-mittel); }
.website-scanner__gauge.is-bad  { color: var(--ws-schlecht); }

.website-scanner__overall {
	margin: 0;
	font-size: 1.0625em;
	font-weight: 600;
}

.website-scanner__target {
	margin: .15rem 0 0;
	font-size: .875em;
	color: var(--ws-gedaempft);
	word-break: break-all;
}

/* ── Registerkarten ──────────────────────────────────────────────────────── */

.website-scanner__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-bottom: -1px;
}

.website-scanner__tab {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .8rem;
	border: 1px solid var(--ws-rahmen);
	border-radius: var(--ws-radius) var(--ws-radius) 0 0;
	background: var(--ws-flaeche);
	font: inherit;
	cursor: pointer;
}

.website-scanner__tab[aria-selected="true"] {
	background: #fff;
	border-bottom-color: #fff;
	font-weight: 600;
}

/* Fokus muss sichtbar bleiben - die Registerkarten sind per Tastatur
   bedienbar, und ohne sichtbaren Fokus waere das wertlos. */
.website-scanner__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.website-scanner__tab-score {
	padding: .05rem .4rem;
	border-radius: 999px;
	background: #fff;
	font-size: .8125em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.website-scanner__tab-score.is-good     { color: var(--ws-gut); }
.website-scanner__tab-score.is-ok       { color: var(--ws-mittel); }
.website-scanner__tab-score.is-bad      { color: var(--ws-schlecht); }
.website-scanner__tab-score.is-unscored { color: var(--ws-gedaempft); font-weight: 400; }

.website-scanner__panel {
	padding: var(--ws-abstand);
	border: 1px solid var(--ws-rahmen);
	border-radius: 0 var(--ws-radius) var(--ws-radius) var(--ws-radius);
	background: #fff;
}

.website-scanner__panel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Bei nur einem Bereich ist die Leiste ausgeblendet - dann braucht das
   Panel oben ebenfalls eine Rundung. */
.website-scanner__tabs[hidden] + .website-scanner__panels .website-scanner__panel {
	border-radius: var(--ws-radius);
}

/* ── Panel-Kopf ──────────────────────────────────────────────────────────── */

.website-scanner__panel-head { margin-bottom: .9rem; }

.website-scanner__bar {
	height: .4rem;
	border-radius: 999px;
	background: var(--ws-flaeche);
	overflow: hidden;
}

.website-scanner__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: currentColor;
}

.website-scanner__bar-fill.is-good { color: var(--ws-gut); }
.website-scanner__bar-fill.is-ok   { color: var(--ws-mittel); }
.website-scanner__bar-fill.is-bad  { color: var(--ws-schlecht); }

.website-scanner__counts {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: .5rem 0 0;
	font-size: .8125em;
}

.website-scanner__count.is-good     { color: var(--ws-gut); }
.website-scanner__count.is-ok       { color: var(--ws-mittel); }
.website-scanner__count.is-bad      { color: var(--ws-schlecht); }
.website-scanner__count.is-unscored { color: var(--ws-gedaempft); }

/* ── Befunde ─────────────────────────────────────────────────────────────── */

.website-scanner__findings {
	margin: 0;
	padding: 0;
	list-style: none;
}

.website-scanner__finding {
	padding: .65rem 0;
	border-top: 1px solid var(--ws-rahmen);
}

.website-scanner__finding:first-child { border-top: 0; }

.website-scanner__finding-head {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}

.website-scanner__finding-title { font-weight: 600; }

/*
 * Statuszeichen. Das Symbol traegt die Bedeutung mit, nicht die Farbe allein -
 * sonst waere der Befund fuer farbfehlsichtige Leser nicht unterscheidbar.
 */
.website-scanner__marker {
	flex: 0 0 auto;
	width: 1.1rem;
	text-align: center;
	font-weight: 700;
	line-height: 1.4;
}

.website-scanner__marker.is-fail::before { content: "\2715"; color: var(--ws-schlecht); }
.website-scanner__marker.is-warn::before { content: "\0021"; color: var(--ws-mittel); }
.website-scanner__marker.is-pass::before { content: "\2713"; color: var(--ws-gut); }
.website-scanner__marker.is-na::before   { content: "\2013"; color: var(--ws-gedaempft); }

.website-scanner__finding-evidence,
.website-scanner__finding-fix {
	margin: .3rem 0 0 1.6rem;
	font-size: .9em;
	line-height: 1.55;
}

.website-scanner__finding-fix {
	padding: .5rem .65rem;
	border-radius: var(--ws-radius);
	background: var(--ws-flaeche);
}

/* Bestandene Punkte treten zurueck - es geht um das, was zu tun ist. */
.website-scanner__finding.is-pass .website-scanner__finding-evidence,
.website-scanner__finding.is-na   .website-scanner__finding-evidence {
	color: var(--ws-gedaempft);
}

/*
 * Die Hinweise zur Aussagekraft. Klein, aber NICHT versteckt: ohne sie liest
 * sich "Barrierefreiheit 81" wie eine Konformitaetszusage.
 */
.website-scanner__note {
	margin: 1rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--ws-rahmen);
	font-size: .8125em;
	line-height: 1.55;
	color: var(--ws-gedaempft);
}

.website-scanner__empty {
	margin: 0;
	color: var(--ws-gedaempft);
}

.website-scanner.is-loading .website-scanner__input { opacity: .7; }

/* Redaktionshinweis bei fehlerhaftem Shortcode - nur fuer Angemeldete. */
.website-scanner-notice {
	padding: .6rem .75rem;
	border-left: 4px solid var(--ws-mittel, #b7791f);
	background: #fffbeb;
}

@media (max-width: 32rem) {
	.website-scanner__summary { flex-direction: column; align-items: flex-start; }
	.website-scanner__tab { flex: 1 1 auto; justify-content: space-between; }
}