/* ============================================================
   CHALLENGE · Monats-Challenge (portiert aus aivonyx-dashboard v0.43.0,
   Kalender-Raster v0.44.3, ausgelagert nach ax-challenges v0.1.0)
   Client-gerendert (Alpine) aus GET /aivonyx/v1/challenge.

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

.aivonyx-dashboard .ax-ch-demo-pill {
	display: inline-block;
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ax-info-fg);
	background: var(--ax-info-tint);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-2) var(--ax-space-4);
	margin-bottom: var(--ax-space-4);
}

/* v0.4.1: Statt der Streak-Flamme (.ax-ch-streak, entfernt) steht im
   Sektions-Kopf der Monatsfortschritt — Begründung im Kommentar in
   blocks/challenge/render.php. Mono + tabular-nums, damit die Zahl beim
   Hochzählen nicht springt. Kein Cyan bei erreichtem Ziel: das „Geschafft"
   zeigt die Karte schon, zwei Quellen für denselben Zustand laufen
   irgendwann auseinander. */
.aivonyx-dashboard .ax-ch-count {
	font: 700 var(--ax-text-sm)/1 var(--ax-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--ax-gray);
}

.aivonyx-dashboard .ax-ch-head { margin-bottom: var(--ax-space-4); }
.aivonyx-dashboard .ax-ch-title {
	font: 700 var(--ax-text-lg)/1.25 var(--ax-font-sans);
	color: var(--ax-black);
}
.aivonyx-dashboard .ax-ch-desc {
	margin-top: var(--ax-space-2);
	font: 400 var(--ax-text-sm)/1.5 var(--ax-font-sans);
	color: var(--ax-gray);
}
.aivonyx-dashboard .ax-ch-target {
	margin-top: var(--ax-space-3);
	/* v0.2.1: Typografie-Detox nachgezogen (Muster Dashboard v0.46) */
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
}

.aivonyx-dashboard .ax-ch-howto { margin: var(--ax-space-4) 0; }
.aivonyx-dashboard .ax-ch-howto summary {
	min-height: 44px;
	display: flex;
	align-items: center; /* Touch-Ziel in px (v0.2.3) */
	cursor: pointer;
	font: 600 var(--ax-text-xs)/1.4 var(--ax-font-sans);
	color: var(--ax-deep);
}
.aivonyx-dashboard .ax-ch-howto p {
	margin: var(--ax-space-3) 0 0;
	font: 400 var(--ax-text-sm)/1.55 var(--ax-font-sans);
	color: var(--ax-black);
}

.aivonyx-dashboard .ax-ch-progress { margin: var(--ax-space-5) 0 var(--ax-space-4); }
.aivonyx-dashboard .ax-ch-progress-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ax-space-3);
	font: 500 var(--ax-text-xs)/1.4 var(--ax-font-sans);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-2);
}
.aivonyx-dashboard .ax-ch-complete {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-2);
	font-weight: 700;
	color: var(--ax-success-fg);
}
.aivonyx-dashboard .ax-ch-track {
	height: 0.5rem;
	border-radius: var(--ax-radius-full);
	background: var(--ax-gray-track);
	overflow: hidden;
}
.aivonyx-dashboard .ax-ch-fill {
	height: 100%;
	border-radius: var(--ax-radius-full);
	background: var(--ax-accent);
	transition: width var(--ax-dur-base) var(--ax-ease);
}

/* Wochen-Fenster (v0.4.0): 7 Tage, heute mittig — schmal statt volle
   Kartenbreite; Wochentags-Kürzel steht in der Zelle (die alte
   Mo–So-Kopfzeile passt zum verschobenen Fenster nicht mehr). */
.aivonyx-dashboard .ax-ch-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--ax-space-2);
	margin: var(--ax-space-4) 0 var(--ax-space-5);
	max-width: 22rem;
}
.aivonyx-dashboard .ax-ch-day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	gap: 0.125rem;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-mono);
	color: var(--ax-gray);
	background: var(--ax-gray-subtle);
	border-radius: var(--ax-radius-sm);
}
/* UX-Review 2026-08-14: 9px mit opacity 0.7 lag bei ~2,9:1 — volle
   Deckkraft + Token-Größe halten 4,89:1. */
.aivonyx-dashboard .ax-ch-day-wd {
	font-size: var(--ax-text-2xs);
	font-weight: 500;
}
.aivonyx-dashboard .ax-ch-day.is-done {
	background: var(--ax-success-tint);
	color: var(--ax-success-fg);
	font-weight: 700;
}
.aivonyx-dashboard .ax-ch-day.is-today {
	outline: var(--ax-border-thick) solid var(--ax-accent);
	outline-offset: -0.125rem;
	color: var(--ax-black);
	font-weight: 700;
}
.aivonyx-dashboard .ax-ch-day.is-future { opacity: 0.45; }

.aivonyx-dashboard .ax-ch-log {
	display: flex;
	align-items: flex-end;
	gap: var(--ax-space-4);
	margin-top: var(--ax-space-5);
}
.aivonyx-dashboard .ax-ch-log-field { flex: 1; margin-bottom: 0; }
.aivonyx-dashboard .ax-ch-log input[type="number"] {
	width: 100%;
	padding: var(--ax-space-3) var(--ax-space-4);
	font: 500 var(--ax-text-base)/1.4 var(--ax-font-sans);
	color: var(--ax-black);
	background: var(--ax-white);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-md);
}
.aivonyx-dashboard .ax-ch-log input[type="number"]:focus-visible {
	outline: none;
	border-color: var(--ax-accent);
	box-shadow: var(--ax-shadow-focus);
}
.aivonyx-dashboard .ax-ch-save {
	min-height: 44px; /* Touch-Ziel in px (v0.2.3) */
	padding: var(--ax-space-3) var(--ax-space-6);
	font: 600 var(--ax-text-sm)/1.4 var(--ax-font-sans);
	color: var(--ax-white);
	background: var(--ax-deep);
	border: none;
	border-radius: var(--ax-radius-md);
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard .ax-ch-save:hover { background: var(--ax-deep-700); }
.aivonyx-dashboard .ax-ch-save:focus-visible { outline: none; box-shadow: var(--ax-shadow-focus); }
.aivonyx-dashboard .ax-ch-save:disabled { opacity: 0.5; cursor: default; }

.aivonyx-dashboard .ax-ch-savemsg {
	margin-top: var(--ax-space-3);
	font: 600 var(--ax-text-xs)/1.4 var(--ax-font-sans);
	color: var(--ax-success-fg);
}
.aivonyx-dashboard .ax-ch-savemsg.is-error { color: var(--ax-danger-fg); }

.aivonyx-dashboard .ax-ch-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ax-space-4);
	margin-top: var(--ax-space-5);
	padding-top: var(--ax-space-4);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
}
.aivonyx-dashboard .ax-ch-hashtags {
	font: 500 var(--ax-text-2xs)/1.4 var(--ax-font-ui); /* v0.2.1: Detox */
	color: var(--ax-gray);
}

.aivonyx-dashboard .ax-ch-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ax-space-3);
	margin-top: var(--ax-space-5);
}
.aivonyx-dashboard .ax-ch-badges .ax-field-label { margin-bottom: 0; }
.aivonyx-dashboard .ax-ch-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-2);
	padding: var(--ax-space-2) var(--ax-space-4);
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-mono);
	color: var(--ax-success-fg);
	background: var(--ax-success-tint);
	border: var(--ax-border-thin) solid var(--ax-success-tint-bord);
	border-radius: var(--ax-radius-full);
}

/* Dark-Mode (v0.3.0): --ax-deep wird im ax-dark-Remap nicht umgemappt —
   der Eintragen-Button war deep-auf-dunkel fast unsichtbar. */
html.ax-dark .aivonyx-dashboard .ax-ch-save { background: var(--ax-deep-700, #12517A); }
html.ax-dark .aivonyx-dashboard .ax-ch-save:hover { background: var(--ax-accent); color: var(--ax-deep); }