/* =============================================================
   aivonyx · Element-Basis (E1, v0.90.0)
   Konzept: 04_Projekte/aivonyx/KONZEPT-ax-design-elementbasis.html
   =============================================================

   WARUM
   Das Kern-Stylesheet arbeitet mit 677 Klassen- gegen 22 Element-Regeln.
   Ein Unterplugin, das ein <button> oder <input> rendert, erbt deshalb
   nichts und muss den Stil selbst mitbringen — so entstehen die Gaps
   zwischen Screens und Plugins (gemessen 13.09.: zwei verschiedene
   Feldstile in derselben App).

   Diese Datei gibt jedem HTML-Element einen Marken-Grundstil. Referenz ist
   das Dashboard (Entscheidung Dirk, 13.09.), Werte kommen ausschliesslich
   aus tokens.css — hier wird kein neuer Wert erfunden.

   KASKADE
   Alles steht in `@layer ax.base`, der untersten Schicht. Jedes bestehende
   Stylesheet ist ungelayert und gewinnt damit automatisch gegen diese Datei.
   Die Umstellung ist deshalb rueckwaertskompatibel: Sie wirkt dort, wo heute
   NICHTS definiert ist, und aendert nichts, was schon gestylt war. Die
   Doppelungen raeumt E2 ab, wenn die Basis sich bewaehrt hat.

   SCHRIFTROLLEN (Doktrin v0.46.0, gilt weiter)
   --ax-font-ui  = Sprache: Titel, Labels, Buttons, Fliesstext
   --ax-font-num = Zahlen: Werte, Uhrzeiten, Versionen, Kalendertage
   Wer den technischen Look ueberall will, setzt --ax-font-ui in tokens.css
   auf var(--ax-font-mono) — eine Zeile, alle Elemente ziehen mit.

   GELTUNGSBEREICH
   Nur innerhalb von .ax-dashboard-page :where((Body-Klasse der App-Seiten inkl. Shop —
   Entscheidung Dirk 13.09.). Abschaltbar ueber den Filter
   `aivonyx_dashboard_element_base` in ax-app-dashboard.php, falls die
   Woo-Seiten zicken.
   ============================================================= */

@layer ax.base, ax.components, ax.overrides;

/* WICHTIG — Korrektur aus E2 (13.09.):
   Der Inhalt dieser Datei stand zunaechst IN `@layer ax.base`. Das war falsch:
   Astra und WooCommerce liefern ihr Element-CSS ungelayert, und ungelayertes
   CSS gewinnt IMMER gegen jede Layer — unabhaengig von Spezifitaet und
   Reihenfolge. Die Felder auf /profil/ fielen dadurch auf Astra-Defaults
   zurueck (Radius 4 px, Rand #d1d5db) statt auf den Markenstil.
   Deshalb steht die Basis jetzt ungelayert, und die Spezifitaet ist gerechnet
   statt geschaetzt: `.ax-dashboard-page :where(button)` = (0,1,0) — die
   Body-Klasse zaehlt, der Elementteil in :where() zaehlt null.
     > Astras `button` (0,0,1)               → Basis gewinnt
     = unser `.ax-cta` (0,1,0)               → Gleichstand, dashboard.css laedt
                                               spaeter → die Komponente gewinnt
     < `.aivonyx-dashboard .ax-more` (0,2,0) → Komponente gewinnt
   Erster Versuch war `body.ax-dashboard-page X` = (0,1,1). Damit ueberfuhr die
   Basis den gefuellten CTA-Button, der nur (0,1,0) hat — er wurde transparent. Die Layer-Deklaration oben bleibt fuer ax.components
   und ax.overrides in den spaeteren Etappen stehen. */

/* ---------- [hidden] ist eine Zusage, kein Vorschlag ----------
   Das UA-Stylesheet gibt `[hidden]` ein `display: none` — jede Autoren-Regel
   mit `display` schlaegt das. Genau hier passiert: Die Button-Basis unten setzt
   `display: inline-flex`, wodurch `<button hidden>` wieder sichtbar wurde. Im
   Anamnese-Bogen stand dadurch auf dem letzten Schritt neben „Submit" noch ein
   „Next"-Button (Dirk, 13.09.). `!important`, weil die Zusage staerker sein muss
   als jede Layout-Regel — dieselbe Loesung wie in normalize.css. */
.ax-dashboard-page :where([hidden]) { display: none !important; }

/* ---------- Text ---------- */

.ax-dashboard-page :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ax-font-ui);
	color: var(--ax-deep);
	margin-block: 0 var(--ax-space-5);
	text-wrap: balance;
}
.ax-dashboard-page :where(h1) { font-size: var(--ax-text-2xl); font-weight: 700; line-height: 1.2; }
.ax-dashboard-page :where(h2) { font-size: var(--ax-text-xl);  font-weight: 600; line-height: 1.25; }
.ax-dashboard-page :where(h3) { font-size: var(--ax-text-lg);  font-weight: 600; line-height: 1.3; }
.ax-dashboard-page :where(h4) { font-size: var(--ax-text-md);  font-weight: 600; line-height: 1.35; }
.ax-dashboard-page :where(h5, h6) { font-size: var(--ax-text-base); font-weight: 600; line-height: 1.4; }

.ax-dashboard-page :where(p) {
	font: 400 var(--ax-text-base)/1.55 var(--ax-font-ui);
	color: var(--ax-neutral-900);
	margin-block: 0 var(--ax-space-5);
	text-wrap: pretty;
}
.ax-dashboard-page :where(small) { font-size: var(--ax-text-2xs); color: var(--ax-gray); }

.ax-dashboard-page :where(a) {
	color: var(--ax-cyan-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.ax-dashboard-page :where(a:hover) { color: var(--ax-cyan-hover); }

/* Zahlen bekommen feste Zeichenbreite, damit Werte beim Aktualisieren
   nicht springen — dieselbe Rollenlogik wie bei den Schriften. */
.ax-dashboard-page :where(time, output, meter, progress, data) { font-family: var(--ax-font-num); }

/* ---------- Formular ---------- */

/* Browser setzen hier eigene Schrift — ohne das erbt kein Feld die Marke. */
.ax-dashboard-page :where(input, select, textarea, button) { font-family: inherit; }

.ax-dashboard-page :where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="password"], input[type="search"],
	input[type="date"], input[type="time"], input[type="datetime-local"],
	select, textarea
) {
	width: 100%;
	box-sizing: border-box;
	border: var(--ax-border-thin) solid var(--ax-field-border);
	/* Ueber Custom Properties statt fester Werte: Ein dichtes Formular
	   (Lifestyle, Import) setzt nur diese drei Variablen und bekommt
	   trotzdem denselben Feldstil — statt den ganzen Block neu zu
	   deklarieren und dabei still abzudriften (E2, v0.91.0). */
	border-radius: var(--ax-field-radius, var(--ax-radius-lg));
	padding: var(--ax-field-pad-y, var(--ax-space-4)) var(--ax-field-pad-x, var(--ax-space-6));
	font: 500 var(--ax-field-size, var(--ax-text-base))/1.4 var(--ax-font-ui);
	color: var(--ax-neutral-900);
	background: var(--ax-white);
	transition: border-color var(--ax-dur-base) var(--ax-ease),
	            box-shadow var(--ax-dur-base) var(--ax-ease);
}
.ax-dashboard-page :where(input, select, textarea):hover { border-color: var(--ax-neutral-400); }
.ax-dashboard-page :where(input, select, textarea):focus-visible {
	outline: 0;
	border-color: var(--ax-cyan-hover);
	box-shadow: var(--ax-shadow-focus);
}
.ax-dashboard-page :where(select) { padding-right: var(--ax-space-9); }
/* Waechst mit dem Inhalt statt per Autogrow-JS (Baseline 2025). */
.ax-dashboard-page :where(textarea) { field-sizing: content; min-height: 4lh; }

.ax-dashboard-page :where(label) {
	display: block;
	font: 500 var(--ax-text-2xs)/1.3 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-2);
}

/* Der nackte Button ist die SEKUNDAERE Aktion. Der gefuellte Haupt-CTA
   bleibt .ax-cta — sonst saehe jeder beilaeufige Button wie der eine
   wichtige Knopf der Seite aus. */
.ax-dashboard-page :where(button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ax-space-3);
	padding: var(--ax-space-4) var(--ax-space-6);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-md);
	background: transparent;
	color: var(--ax-deep);
	font: 600 var(--ax-text-sm)/1 var(--ax-font-ui);
	cursor: pointer;
	transition: background var(--ax-dur-base) var(--ax-ease),
	            border-color var(--ax-dur-base) var(--ax-ease);
}
.ax-dashboard-page :where(button:hover) { border-color: var(--ax-neutral-400); }
.ax-dashboard-page :where(button:focus-visible) { outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-dashboard-page :where(button[disabled]) { opacity: 0.55; cursor: not-allowed; }

.ax-dashboard-page :where(fieldset) { border: 0; padding: 0; margin: 0; }
.ax-dashboard-page :where(legend) { font: 600 var(--ax-text-sm)/1.3 var(--ax-font-ui); color: var(--ax-deep); padding: 0; }

/* ---------- Struktur ---------- */

.ax-dashboard-page :where(ul, ol) { margin-block: 0 var(--ax-space-5); padding-inline-start: var(--ax-space-8); }
.ax-dashboard-page :where(li) { margin-bottom: var(--ax-space-2); }
.ax-dashboard-page :where(hr) { border: 0; border-top: var(--ax-border-thin) solid var(--ax-gray-line); margin-block: var(--ax-space-7); }

.ax-dashboard-page :where(table) { width: 100%; border-collapse: collapse; font-size: var(--ax-text-sm); }
.ax-dashboard-page :where(th, td) {
	text-align: left;
	padding: var(--ax-space-4) var(--ax-space-5);
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.ax-dashboard-page :where(th) { font: 600 var(--ax-text-2xs)/1.2 var(--ax-font-ui); color: var(--ax-gray); }
.ax-dashboard-page :where(td) { font-variant-numeric: tabular-nums; }

/* ---------- Interaktive Elemente ---------- */

/* Health Check, Konto-Formular und weitere nutzen <details> bereits —
   ohne Basis sieht jedes davon anders aus. */
.ax-dashboard-page :where(summary) {
	cursor: pointer;
	font: 600 var(--ax-text-sm)/1.3 var(--ax-font-ui);
	color: var(--ax-deep);
	list-style: none;
	padding-block: var(--ax-space-2);
}
.ax-dashboard-page :where(summary::-webkit-details-marker) { display: none; }
.ax-dashboard-page :where(summary::after) { content: " ›"; display: inline-block; transition: transform var(--ax-dur-base) var(--ax-ease); }
.ax-dashboard-page :where(details[open] > summary::after) { transform: rotate(90deg); }

.ax-dashboard-page :where(dialog) {
	border: 0;
	border-radius: var(--ax-radius-3xl);
	padding: var(--ax-space-9);
	background: var(--ax-white);
	color: var(--ax-neutral-900);
}
.ax-dashboard-page :where(dialog::backdrop) { background: rgb(0 0 0 / 0.45); }

/* ---------- Dunkle Flaechen ---------- */

/* Hero und Login-Gate stehen auf --ax-deep. Ohne diesen Block wuerde die
   Basis dort dunkle Schrift auf dunklem Grund setzen — genau der Fehler,
   der am 13.09. zweimal als „Optikfehler" auftauchte. */
.ax-dashboard-page :is(.ax-header, .ax-gate-card, [data-ax-surface="dark"]) :where(h1, h2, h3, h4, h5, h6, p, summary, legend) {
	color: var(--ax-on-dark);
}
.ax-dashboard-page :is(.ax-header, .ax-gate-card, [data-ax-surface="dark"]) :where(label) { color: var(--ax-on-dark-mute); }
.ax-dashboard-page :is(.ax-header, .ax-gate-card, [data-ax-surface="dark"]) :where(input, select, textarea) {
	border-color: var(--ax-on-dark-line);
	background: var(--ax-on-dark-field, rgb(255 255 255 / 0.06));
	color: var(--ax-on-dark);
}
.ax-dashboard-page :is(.ax-header, .ax-gate-card, [data-ax-surface="dark"]) :where(button) {
	border-color: var(--ax-on-dark-line);
	color: var(--ax-on-dark);
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
	.ax-dashboard-page * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}