/*
 * Rechnerhub Tools — shared styles
 * All rules scoped under .rh-tool to avoid leaking into the host theme.
 * Mobile-first. Inherits site fonts. No external assets.
 */

/* ============================================================================
 * Rechnerhub design tokens — locked vocabulary per docs/DESIGN-TOKENS.md.
 * Declared on the 8 known top-level Rechnerhub wrappers so the variables
 * cascade to every descendant without leaking to the host GeneratePress
 * theme. Tokens are infrastructure for future consumption; existing rules
 * below intentionally remain literal so this C-3 rollout is byte-stable.
 * No :root, no body, no html.
 * ============================================================================ */

.rh-tool,
.rh-finanzen-ids-hub,
.rh-address-hub,
.rh-zahlen-datum-hub,
.rh-text-zeichen-hub,
.rh-csv-tabellen-hub,
.rh-datenbereinigung-hub,
.rh-content-articles {
	/* Core colors */
	--rh-color-text-primary: #14181f;
	--rh-color-text-body: #2a3142;
	--rh-color-text-muted: #5a6478;
	--rh-color-text-subtle: #6c7689;
	--rh-color-text-link: #4a5266;
	--rh-color-primary: #1f3a5f;
	--rh-color-primary-hover: #15294a;
	--rh-color-accent: #2563eb;
	--rh-color-privacy: #2f6b3a;

	/* Surfaces */
	--rh-color-surface: #fff;
	--rh-color-surface-muted: #fafafa;
	--rh-color-surface-card: #fbfcfe;
	--rh-color-surface-info: #f3f6fb;

	/* Borders */
	--rh-color-border-light: #ececec;
	--rh-color-border-medium: #c9c9c9;
	--rh-color-border-card: #d7deea;
	--rh-color-border-card-hover: #b8c6da;

	/* Status colors */
	--rh-color-success: #1e5b2c;
	--rh-color-success-bg: #d4f0dc;
	--rh-color-success-border: #b4dcc0;
	--rh-color-warning: #6b4a00;
	--rh-color-warning-bg: #fbe5c1;
	--rh-color-warning-border: #e9cf99;
	--rh-color-error: #6e3838;
	--rh-color-error-bg: #ead7d7;
	--rh-color-error-border: #d4b9b9;
	--rh-color-alarm: #7a1d1d;
	--rh-color-alarm-bg: #f6d3d3;
	--rh-color-alarm-border: #dca9a9;

	/* Row tints */
	--rh-color-row-success: #fcfefd;
	--rh-color-row-warning: #f8f3e7;
	--rh-color-row-error: #faf2f2;
	--rh-color-row-alarm: #fdecec;

	/* Radius */
	--rh-radius-sm: 4px;
	--rh-radius-md: 6px;
	--rh-radius-card: 8px;
	--rh-radius-pill: 999px;

	/* Shadow */
	--rh-shadow-card: 0 1px 2px rgba(20, 24, 31, 0.04);
	--rh-shadow-card-hover: 0 3px 8px rgba(20, 24, 31, 0.08);

	/* --------------------------------------------------------------------
	 * v1.5.0 — canonical diagnostic / status palette aliases.
	 *
	 * Palette source: the existing --rh-color-* freeze above, which already
	 * matches rh-email-adressen-extrahieren (the visual freeze target).
	 * These aliases give Lane 5.2 master-router + category-hub consumers a
	 * stable public token name (`--rh-status-*`) decoupled from the
	 * underlying `--rh-color-*` infrastructure tokens. Vocabulary mapping:
	 *   success  ↔ OK
	 *   notice   ↔ Hinweis  (← shared with --rh-color-warning-*)
	 *   error    ↔ Fehler
	 * Declared on the same wrapper union as the underlying tokens — NOT on
	 * :root — per the no-leak doctrine documented at the top of this file.
	 * -------------------------------------------------------------------- */
	--rh-status-success-bg: var(--rh-color-success-bg);
	--rh-status-success-border: var(--rh-color-success-border);
	--rh-status-success-text: var(--rh-color-success);
	--rh-status-success-row: var(--rh-color-row-success);

	--rh-status-notice-bg: var(--rh-color-warning-bg);
	--rh-status-notice-border: var(--rh-color-warning-border);
	--rh-status-notice-text: var(--rh-color-warning);
	--rh-status-notice-row: var(--rh-color-row-warning);

	--rh-status-error-bg: var(--rh-color-error-bg);
	--rh-status-error-border: var(--rh-color-error-border);
	--rh-status-error-text: var(--rh-color-error);
	--rh-status-error-row: var(--rh-color-row-error);
}

.rh-tool {
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5rem 0;
	font: inherit;
	color: inherit;
	line-height: 1.55;
}

.rh-tool *,
.rh-tool *::before,
.rh-tool *::after {
	box-sizing: inherit;
}

/* ---------- Header ---------- */

.rh-tool__header {
	margin-bottom: 1.25rem;
}

.rh-tool__eyebrow {
	display: inline-block;
	margin: 0 0 0.4rem;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1f3a5f;
	background: #e7eef7;
	border-radius: 3px;
}

.rh-tool__title {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
}

.rh-tool__subtitle {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	color: #4a4a4a;
}

.rh-tool__privacy {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: #2f6b3a;
}

/* ---------- Layout ---------- */

.rh-tool__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.rh-tool__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.rh-tool__panel {
	padding: 1rem;
	background: #fafafa;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
}

/* ---------- Form controls ---------- */

.rh-tool__label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
}

.rh-tool__textarea,
.rh-tool__input,
.rh-tool__select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.55rem 0.7rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	line-height: 1.4;
}

.rh-tool__textarea {
	/* Lowered baseline (UI-STANDARDS §10) — plugin-local overrides remain permitted. */
	min-height: 6.5rem;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
}

.rh-tool__textarea:focus,
.rh-tool__input:focus,
.rh-tool__select:focus {
	outline: 2px solid #2563eb;
	outline-offset: 1px;
	border-color: #2563eb;
}

/* ---------- Buttons ---------- */

.rh-tool__button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

.rh-tool__button {
	display: inline-block;
	padding: 0.55rem 1rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #1f3a5f;
	border: 1px solid #1f3a5f;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
}

.rh-tool__button:hover,
.rh-tool__button:focus {
	background: #15294a;
	border-color: #15294a;
}

.rh-tool__button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.rh-tool__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.rh-tool__button--secondary {
	color: #1f3a5f;
	background: #fff;
	border-color: #1f3a5f;
}

.rh-tool__button--secondary:hover,
.rh-tool__button--secondary:focus {
	color: #fff;
	background: #1f3a5f;
}

/* ---------- Output ---------- */

.rh-tool__output {
	width: 100%;
	max-width: 100%;
	min-height: 9rem;
	padding: 0.7rem;
	background: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95rem;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ---------- Tables ---------- */

.rh-tool__table {
	width: 100%;
	margin: 0.75rem 0;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.rh-tool__table th,
.rh-tool__table td {
	padding: 0.45rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid #e3e3e3;
	vertical-align: top;
}

.rh-tool__table th {
	background: #f1f1f1;
	font-weight: 600;
}

/* ---------- Warnings / status ---------- */

.rh-tool__warnings {
	margin: 0.75rem 0;
}

.rh-tool__warnings:empty {
	display: none;
}

.rh-tool__notice {
	margin: 0.5rem 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #f7f7f7;
	font-size: 0.9rem;
}

.rh-tool__notice[data-rh-status="success"] {
	border-color: #b6dcc1;
	background: #eaf6ee;
	color: #1e5b2c;
}

.rh-tool__notice[data-rh-status="warning"] {
	border-color: #ecd9a8;
	background: #fbf3df;
	color: #6b4a00;
}

.rh-tool__notice[data-rh-status="error"] {
	border-color: #e6b3b3;
	background: #fbeaea;
	color: #8a1f1f;
}

.rh-tool__notice[data-rh-status="info"] {
	border-color: #b9d2ee;
	background: #eaf2fb;
	color: #1f3a5f;
}

/* ---------- Examples / related / FAQ ---------- */

.rh-tool__example {
	margin: 0.75rem 0;
	padding: 0.6rem 0.8rem;
	background: #f4f7fb;
	border-left: 3px solid #1f3a5f;
	border-radius: 0 4px 4px 0;
	font-size: 0.9rem;
}

.rh-tool__related,
.rh-tool__faq {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e3e3e3;
}

.rh-tool__related h2,
.rh-tool__faq h2 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}

.rh-tool__faq details {
	margin: 0.4rem 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
}

.rh-tool__faq summary {
	cursor: pointer;
	font-weight: 600;
}

/* ============================================================================
 * v1.2.0 — shared UI components (UI-STANDARDS hard-locked freeze)
 *
 * Additive. Existing rules above remain authoritative for legacy markup
 * (`.rh-tool__notice`, `.rh-tool__table th/td`, legacy chip classes such as
 * `--ok / --quality / --security` defined inside individual plugins, etc.).
 * Plugins migrate to the blocks below per docs/UI-STANDARDS.md §11.
 * ============================================================================ */

/* ---------- 1. Chip standard (canonical) ---------- */

.rh-tool__chip {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	border-radius: 999px;
	white-space: nowrap;
	vertical-align: baseline;
}

.rh-tool__chip--success {
	background: #d4f0dc;
	color: #1e5b2c;
	border-color: #b4dcc0;
}

.rh-tool__chip--warning {
	background: #fbe5c1;
	color: #6b4a00;
	border-color: #e9cf99;
}

.rh-tool__chip--error {
	background: #ead7d7;
	color: #6e3838;
	border-color: #d4b9b9;
}

.rh-tool__chip--alarm {
	background: #f6d3d3;
	color: #7a1d1d;
	border-color: #dca9a9;
}

/* ---------- 2. Row-tint standard (canonical) ---------- */

tr[data-rh-row="success"] {
	background: #fcfefd;
}

tr[data-rh-row="warning"] {
	background: #f8f3e7;
}

tr[data-rh-row="error"] {
	background: #faf2f2;
}

tr[data-rh-row="alarm"] {
	background: #fdecec;
	box-shadow: inset 4px 0 0 0 #b03a3a;
}

tr[data-rh-row="alarm"] .rh-tool__col-value,
tr[data-rh-row="alarm"] .rh-tool__col-input {
	color: #7a1d1d;
	font-weight: 600;
}

/* ---------- 3. Stats banner ---------- */

.rh-tool__stats {
	margin: 0.85rem 0 0;
	padding: 0.65rem 0.85rem;
	background: #f3f6fb;
	border: 1px solid #dde2ea;
	border-radius: 4px;
}

.rh-tool__stats:empty {
	display: none;
}

.rh-tool__stats-primary {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: #14181f;
	letter-spacing: -0.005em;
	line-height: 1.35;
}

.rh-tool__stats-secondary {
	display: block;
	margin-top: 0.15rem;
	font-weight: 400;
	font-size: 0.82rem;
	color: #6c7689;
	line-height: 1.45;
}

.rh-tool__stats-secondary:empty {
	display: none;
}

/* ---------- 4. Diagnostic-table chrome ---------- */

.rh-tool__table-wrap {
	max-height: 26rem;
	margin: 0.75rem 0;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
}

.rh-tool__table-wrap > .rh-tool__table {
	margin: 0;
	border: 0;
}

.rh-tool__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0.6rem 0.8rem;
	background: #f1f1f1;
	border-bottom: 1px solid #d4d4d4;
	white-space: nowrap;
	text-align: left;
	font-weight: 600;
}

.rh-tool__table tbody td {
	padding: 0.55rem 0.8rem;
	vertical-align: top;
	border-bottom: 1px solid #ececec;
	overflow-wrap: anywhere;
}

.rh-tool__table tbody tr:last-child td {
	border-bottom: 0;
}

.rh-tool__col-line {
	min-width: 3.5rem;
	color: #5a6478;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.rh-tool__col-value,
.rh-tool__col-input {
	min-width: 14rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: nowrap;
	overflow-wrap: normal;
}

.rh-tool__col-status {
	min-width: 8rem;
	white-space: nowrap;
}

.rh-tool__col-output {
	min-width: 12rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.rh-tool__col-hint {
	min-width: 14rem;
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.45;
}

.rh-tool__table thead th.rh-tool__col-hint {
	padding-left: 1rem;
	padding-right: 1rem;
}

.rh-tool__output-value {
	display: inline;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	color: #1e5b2c;
	overflow-wrap: anywhere;
}

/* ---------- 5. Related-card standard ----------
 * Polished product-navigation cards. Works with both markup variants:
 *   Variant 1: <a><span.rh-tool__related-title/><span.rh-tool__related-desc/></a>
 *   Variant 2: <a>Title only</a>
 * A decorative "→" pseudo-arrow at top-right provides affordance without
 * requiring markup changes. The arrow is aria-neutral (CSS-generated, not
 * read as content by assistive tech in practice) and never load-bearing.
 */

.rh-tool__related ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

.rh-tool__related li {
	display: flex;
	margin: 0;
}

.rh-tool__related a {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
	min-height: 5.25rem;
	padding: 1rem 2.6rem 1rem 1rem;
	background: #fbfcfe;
	border: 1px solid #d7deea;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
	color: inherit;
	text-decoration: none;
	line-height: 1.4;
	transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.rh-tool__related a::after {
	content: "→";
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: #1f3a5f;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.55;
	transition: transform 0.12s ease, opacity 0.12s ease;
}

.rh-tool__related a:hover,
.rh-tool__related a:focus {
	background: #f7f9fc;
	border-color: #b8c6da;
	box-shadow: 0 3px 8px rgba(20, 24, 31, 0.08);
	text-decoration: none;
	transform: translateY(-1px);
}

.rh-tool__related a:hover::after,
.rh-tool__related a:focus::after {
	opacity: 1;
	transform: translateX(2px);
}

.rh-tool__related a:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.rh-tool__related-title {
	font-weight: 700;
	font-size: 1.03rem;
	line-height: 1.3;
	color: #182033;
}

.rh-tool__related-desc {
	margin-top: 0.2rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #4a5266;
}

/* Optional CTA line. May be unused until plugin markup adopts it; in that case
   nothing renders. No icon, no emoji — markup may include a plain text arrow. */
.rh-tool__related-cta {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #1f3a5f;
}

@media (prefers-reduced-motion: reduce) {
	.rh-tool__related a,
	.rh-tool__related a::after {
		transition: none;
	}
	.rh-tool__related a:hover,
	.rh-tool__related a:focus {
		transform: none;
	}
	.rh-tool__related a:hover::after,
	.rh-tool__related a:focus::after {
		transform: none;
	}
}

@media (max-width: 720px) {
	.rh-tool__related ul {
		grid-template-columns: 1fr;
	}
	.rh-tool__related a {
		min-height: 0;
	}
}

/* ---------- 6. FAQ accordion ---------- */

.rh-tool__faq details {
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #ececec;
	border-radius: 0;
}

.rh-tool__faq details:first-of-type {
	border-top: 1px solid #ececec;
}

.rh-tool__faq summary {
	position: relative;
	display: block;
	padding: 0.7rem 2rem 0.7rem 0.25rem;
	min-height: 2.75rem;
	font-weight: 600;
	color: #1e2230;
	list-style: none;
	cursor: pointer;
}

.rh-tool__faq summary::-webkit-details-marker {
	display: none;
}

.rh-tool__faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.6rem;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: -0.35rem;
	border-right: 2px solid #1f3a5f;
	border-bottom: 2px solid #1f3a5f;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.rh-tool__faq details[open] summary::after {
	transform: rotate(-135deg);
	margin-top: -0.2rem;
}

.rh-tool__faq summary:hover,
.rh-tool__faq summary:focus-visible {
	color: #1f3a5f;
}

.rh-tool__faq summary:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.rh-tool__faq p {
	margin: 0;
	padding: 0 0.25rem 0.8rem;
	color: #2a3142;
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ---------- 7. Empty state ---------- */

[data-rh-state="empty"] .rh-tool__output-panel {
	display: none;
}

/* ---------- 8. Bottom export row ---------- */

.rh-tool__bottom-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 0.85rem;
	padding-top: 0.7rem;
	border-top: 1px solid #ececec;
}

.rh-tool__bottom-actions[hidden] {
	display: none;
}

.rh-tool__bottom-actions .rh-tool__button {
	font-size: 0.85rem;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/* ---------- 10. Shortcut hint ---------- */

.rh-tool__shortcut-hint {
	margin-top: 0.45rem;
	font-size: 0.85rem;
	color: #5a6478;
	line-height: 1.4;
}

/* ============================================================================
 * v1.5.0 — optional shared diagnostic / status utility classes.
 *
 * Hub-agnostic alternatives to the legacy `.rh-tool__chip--*` classes (which
 * are scoped under `.rh-tool` and assume the shared tool chrome). Useful for
 * hubs that have their own wrapper class (e.g. `.rh-datenbereinigung-hub`)
 * and want to render diagnostic-sample tables outside the `.rh-tool` shell.
 *
 * Scoped under the same 8 Rechnerhub container classes as the design tokens
 * so the rules never leak to the host GeneratePress theme. This is purely
 * additive — no existing class is restyled. Consumer adoption happens in
 * each consumer's own lane; nothing in rh-tools-core (or any other already-
 * shipped plugin) emits these classes today.
 *
 * Vocabulary (German UI):
 *   --success  →  OK
 *   --notice   →  Hinweis
 *   --error    →  Fehler
 * ============================================================================ */

.rh-tool .rh-status-chip,
.rh-finanzen-ids-hub .rh-status-chip,
.rh-address-hub .rh-status-chip,
.rh-zahlen-datum-hub .rh-status-chip,
.rh-text-zeichen-hub .rh-status-chip,
.rh-csv-tabellen-hub .rh-status-chip,
.rh-datenbereinigung-hub .rh-status-chip,
.rh-content-articles .rh-status-chip {
	display: inline-block;
	padding: 0.12rem 0.55rem;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: baseline;
}

.rh-tool .rh-status-chip--success,
.rh-finanzen-ids-hub .rh-status-chip--success,
.rh-address-hub .rh-status-chip--success,
.rh-zahlen-datum-hub .rh-status-chip--success,
.rh-text-zeichen-hub .rh-status-chip--success,
.rh-csv-tabellen-hub .rh-status-chip--success,
.rh-datenbereinigung-hub .rh-status-chip--success,
.rh-content-articles .rh-status-chip--success {
	background: var(--rh-status-success-bg);
	border-color: var(--rh-status-success-border);
	color: var(--rh-status-success-text);
}

.rh-tool .rh-status-chip--notice,
.rh-finanzen-ids-hub .rh-status-chip--notice,
.rh-address-hub .rh-status-chip--notice,
.rh-zahlen-datum-hub .rh-status-chip--notice,
.rh-text-zeichen-hub .rh-status-chip--notice,
.rh-csv-tabellen-hub .rh-status-chip--notice,
.rh-datenbereinigung-hub .rh-status-chip--notice,
.rh-content-articles .rh-status-chip--notice {
	background: var(--rh-status-notice-bg);
	border-color: var(--rh-status-notice-border);
	color: var(--rh-status-notice-text);
}

.rh-tool .rh-status-chip--error,
.rh-finanzen-ids-hub .rh-status-chip--error,
.rh-address-hub .rh-status-chip--error,
.rh-zahlen-datum-hub .rh-status-chip--error,
.rh-text-zeichen-hub .rh-status-chip--error,
.rh-csv-tabellen-hub .rh-status-chip--error,
.rh-datenbereinigung-hub .rh-status-chip--error,
.rh-content-articles .rh-status-chip--error {
	background: var(--rh-status-error-bg);
	border-color: var(--rh-status-error-border);
	color: var(--rh-status-error-text);
}

/* Diagnostic-sample container — neutral chrome for the static input → status
 * → diagnose tables that the master router and category hubs will render
 * under their hero. No layout / column rules here; consumers own table
 * specifics. Just background + border + radius so the block reads as a
 * deliberate panel. */
.rh-tool .rh-diagnostic-sample,
.rh-finanzen-ids-hub .rh-diagnostic-sample,
.rh-address-hub .rh-diagnostic-sample,
.rh-zahlen-datum-hub .rh-diagnostic-sample,
.rh-text-zeichen-hub .rh-diagnostic-sample,
.rh-csv-tabellen-hub .rh-diagnostic-sample,
.rh-datenbereinigung-hub .rh-diagnostic-sample,
.rh-content-articles .rh-diagnostic-sample {
	padding: 1rem 1.15rem 1.1rem;
	background: var(--rh-color-surface);
	border: 1px solid var(--rh-color-border-card);
	border-radius: var(--rh-radius-card);
}

/* ─── .rh-tool__how* — 3-step "Wie es funktioniert" block (promoted v1.5.1) ─── */

.rh-zahlenformat-de-us .rh-tool__how {
	margin: 2rem 0 0;
}

.rh-zahlenformat-de-us .rh-tool__how > h2 {
	margin: 0 0 0.9rem;
	font-size: 1.15rem;
	line-height: 1.3;
	color: #1f3a5f;
}

.rh-zahlenformat-de-us .rh-tool__how-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
	counter-reset: rh-how;
}

.rh-zahlenformat-de-us .rh-tool__how-step {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: start;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.rh-zahlenformat-de-us .rh-tool__how-step-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #1f3a5f;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.rh-zahlenformat-de-us .rh-tool__how-step-body {
	min-width: 0;
}

.rh-zahlenformat-de-us .rh-tool__how-step-title {
	margin: 0.1rem 0 0.2rem;
	font-size: 1rem;
	line-height: 1.25;
	color: #1e2230;
}

.rh-zahlenformat-de-us .rh-tool__how-step-body p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #2c2f3a;
}

@media (min-width: 720px) {
	.rh-zahlenformat-de-us .rh-tool__how-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.1rem;
	}
}

/* ─── Mobile diagnostic row-stack < 720px (promoted v1.5.1, §5.7/U3) ─── */

@media (max-width: 719px) {
	.rh-zahlenformat-de-us__table-wrap {
		max-height: none;
		overflow: visible;
		border: 0;
		background: transparent;
		padding: 0;
	}

	.rh-zahlenformat-de-us__table {
		display: block;
		width: 100%;
	}

	/* thead becomes screen-reader-only — keep the column names for AT. */
	.rh-zahlenformat-de-us__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.rh-zahlenformat-de-us__table tbody {
		display: block;
	}

	.rh-zahlenformat-de-us__table tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.3rem 0.7rem;
		padding: 0.7rem 0.85rem;
		margin: 0 0 0.6rem;
		border: 1px solid #d8dce5;
		border-radius: 6px;
	}

	.rh-zahlenformat-de-us__table tbody td {
		display: block;
		padding: 0;
		border: 0;
		white-space: normal;
	}

	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-line {
		grid-column: 1 / -1;
		font-weight: 600;
		color: #1f3a5f;
		font-size: 0.92rem;
		letter-spacing: 0.01em;
	}
	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-line::before {
		content: "Zeile ";
	}

	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-input {
		grid-column: 1 / -1;
	}
	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-input::before {
		content: "Eingabe: ";
		font-weight: 600;
		color: #1e2230;
		font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-output {
		grid-column: 1 / 2;
	}
	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-output::before {
		content: "Ausgabe: ";
		font-weight: 600;
		color: #1e2230;
		font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}

	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-status {
		grid-column: 2 / 3;
		justify-self: end;
		align-self: start;
	}

	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-hint {
		grid-column: 1 / -1;
		color: #2c2f3a;
		font-size: 0.92rem;
	}
	.rh-zahlenformat-de-us__table tbody td.rh-tool__col-hint::before {
		content: "Hinweis: ";
		font-weight: 600;
		color: #1e2230;
	}
}