/* ============================================================
   DAILY-CHECK · Täglicher Frage-Check (ax-daily-check v0.1.0)
   Client-gerendert (Alpine) aus GET /aivonyx/v1/daily-check.

   Hängt von der 'aivonyx-dashboard'-Style ab (Design-Tokens + .ax-section/
   .ax-card/.ax-empty-Primitiven) — siehe wp_register_style() in
   ax-daily-check.php.
   ============================================================ */

.aivonyx-dashboard .ax-dc-streak {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-2);
	font: 700 var(--ax-text-sm)/1 var(--ax-font-mono);
	color: var(--ax-warning-fg);
}
/* v0.4.5: Flamme trug --ax-warning (#F5A623) = 2,03:1 auf weißer Karte,
   während die Zahl daneben schon --ax-warning-fg nutzte. Ein Paar, zwei Töne —
   jetzt einer, und der hält 4,83:1. */
.aivonyx-dashboard .ax-dc-streak svg { color: var(--ax-warning-fg); }

/* v0.4.2: Streak 0 — Flamme bleibt stehen, ausgegraut und ohne Zahl (s.
   Kommentar in blocks/daily-check/render.php). Doppelte Klasse im Selektor,
   weil die Warnfarbe oben mit (0,2,1) gleich stark wäre — dann entschiede die
   Ladereihenfolge, und darauf soll sich das hier nicht verlassen.
   Bleibt bewusst modul-lokal: ax-challenges zeigt seit 0.4.1 den
   Monatsfortschritt statt einer Serie, die Flamme hat also nur einen Nutzer. */
.aivonyx-dashboard .ax-dc-streak.ax-dc-streak--none { color: var(--ax-gray); }
.aivonyx-dashboard .ax-dc-streak.ax-dc-streak--none svg { color: var(--ax-gray); opacity: 0.5; }

.aivonyx-dashboard .ax-dc-progress {
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-4);
}

.aivonyx-dashboard .ax-dc-done {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-2);
	font: 600 var(--ax-text-sm)/1 var(--ax-font-sans);
	color: var(--ax-success-fg);
	margin-bottom: var(--ax-space-4);
}

.aivonyx-dashboard .ax-dc-question {
	padding: var(--ax-space-4) 0;
	border-top: 1px solid var(--ax-border-thin);
}
.aivonyx-dashboard .ax-dc-question:first-of-type { border-top: 0; padding-top: 0; }
/* UX-Review 2026-08-14: Block-Opacity 0.75 drückte die Texte unter AA
   (3,2–3,7:1). Stattdessen gezielt gedämpfte, AA-feste Textfarben:
   --ax-neutral-700 #3D3D3D = 10,9:1, --ax-neutral-500 #6B6B6B = 5,3:1
   auf Weiß. is-selected-Button bleibt ungedämpft (zeigt die Antwort). */
.aivonyx-dashboard .ax-dc-question.is-answered .ax-dc-q-text { color: var(--ax-neutral-700); }
.aivonyx-dashboard .ax-dc-question.is-answered .ax-dc-category { color: var(--ax-neutral-500); }

.aivonyx-dashboard .ax-dc-q-head { margin-bottom: var(--ax-space-3); }
.aivonyx-dashboard .ax-dc-category {
	display: inline-block;
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
	margin-right: var(--ax-space-3);
}
.aivonyx-dashboard .ax-dc-q-text {
	font: 600 var(--ax-text-sm)/1.4 var(--ax-font-sans);
	color: var(--ax-black);
}

.aivonyx-dashboard .ax-dc-answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-2);
}

.aivonyx-dashboard .ax-dc-btn {
	min-width: 44px;
	min-height: 44px; /* Touch-Ziel in px (v0.2.2) */
	padding: var(--ax-space-2) var(--ax-space-3);
	font: 600 var(--ax-text-sm)/1 var(--ax-font-mono);
	color: var(--ax-deep);
	background: transparent;
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-md);
	cursor: pointer;
}
.aivonyx-dashboard .ax-dc-btn:hover { border-color: var(--ax-accent); }
.aivonyx-dashboard .ax-dc-btn:disabled { opacity: 0.5; cursor: default; }
/* v0.4.5 · Weiß auf Cyan hielt 1,70:1 — der Bestätigungszustand der
   Tages-Interaktion war praktisch unlesbar. Petrol auf Cyan ist das Muster
   des Systems (.ax-cta) und hält 7,11:1. */
.aivonyx-dashboard .ax-dc-btn.is-selected {
	color: var(--ax-deep);
	background: var(--ax-accent);
	border-color: var(--ax-accent);
}
.aivonyx-dashboard .ax-dc-btn--word { min-width: 4rem; font-family: var(--ax-font-sans); }

/* Skala 1–10 als klickbare Ziffern (v0.4.0, Entscheidung Dirk 07.08.):
   präziser als der Slider (v0.2.0–0.3.0), keine Sliden-oder-Tippen-
   Irritation. v0.4.1 (Entscheidung Dirk 08.08.): immer EINE Reihe à 10
   statt 2×5 — dafür fällt min-width 44px für die Skala-Buttons; auf
   360px-Geräten werden die Ziffern ~24px schmal, Höhe bleibt 44px. */
.aivonyx-dashboard .ax-dc-answers--scale {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: var(--ax-space-3); /* UX-Review 2026-08-14: 8px Abstand (WCAG 2.5.8) */
}
.aivonyx-dashboard .ax-dc-answers--scale .ax-dc-btn {
	min-width: 0;
	padding: var(--ax-space-2) 0;
}
/* Unter 380px reicht die Breite für eine 10er-Reihe mit 8px Gap nicht mehr —
   dann 2 Reihen à 5 (UX-Review 2026-08-14, revidiert v0.4.1). */
@media (max-width: 380px) {
	.aivonyx-dashboard .ax-dc-answers--scale { grid-template-columns: repeat(5, 1fr); }
}

/* Toggle in der Fertig-Zeile: Link-Optik, kein Button-Chrome */
.aivonyx-dashboard .ax-dc-edit-toggle {
	appearance: none;
	background: none;
	border: 0;
	min-height: 24px; /* WCAG 2.5.8 Minimum — war ~22px (UX-Review 2026-08-14) */
	padding: var(--ax-space-1) 0;
	margin-left: var(--ax-space-3);
	font: 600 var(--ax-text-xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.aivonyx-dashboard .ax-dc-scale-legend {
	display: flex;
	justify-content: space-between;
	margin-top: var(--ax-space-2);
	font: 400 var(--ax-text-2xs)/1 var(--ax-font-sans);
	color: var(--ax-gray);
}

.aivonyx-dashboard .ax-dc-savemsg.is-error {
	margin-top: var(--ax-space-2);
	font: 400 var(--ax-text-xs)/1.4 var(--ax-font-sans);
	color: var(--ax-danger-fg);
}

/* Dark-Mode (v0.3.0): deep-farbige Texte auf dunkler Karte aufhellen
   (--ax-deep bleibt im Remap unverändert). */
html.ax-dark .aivonyx-dashboard .ax-dc-btn { color: var(--ax-neutral-700, #C7D2DA); }

/* Fokus (v0.4.4): Das Modul hatte keine einzige :focus-visible-Regel — der
   UA-Default griff zwar, sah aber in jedem Browser anders aus als der
   Cyan-Ring des restlichen Dashboards. Kein Bugfix, eine Systemlücke. */
.aivonyx-dashboard .ax-dc-btn:focus-visible,
.aivonyx-dashboard .ax-dc-edit-toggle:focus-visible {
	outline: 0;
	box-shadow: var(--ax-shadow-focus);
}