/*
 * rh-zahlenformat-de-us — local controls + layout overrides only.
 *
 * Since rh-tools-core v1.2.0 the shared component chrome (stats banner,
 * diagnostic-table chrome incl. sticky thead and scrollable table-wrap,
 * canonical row tints — success / warning / error / alarm —, related
 * cards, FAQ accordion, button-row baseline, textarea baseline, shortcut
 * hint) is owned by core CSS. This file only contains:
 *   - rh-zahlenformat-de-us-specific form controls (direction radios +
 *     option checkboxes)
 *   - local table density (monospace Eingabe/Ausgabe columns + nowrap on
 *     short columns)
 *   - empty-state output-panel hide
 *   - the small-screen button-row stack
 *   - minor spacing nudges
 *
 * Do not duplicate shared stats/chip/table/FAQ/related-card chrome here —
 * the shared layer is the source of truth.
 *
 * Layout doctrine:
 *   rh-zahlenformat-de-us uses a single-column layout — the wide 5-column
 *   diagnostic results table needs full content width. The shortcode does
 *   NOT wrap the input/output panels in `.rh-tool__grid`. Do NOT add
 *   `.rh-zahlenformat-de-us .rh-tool__grid { … }` here; that would
 *   collapse a layout the markup never opens.
 *
 * Parser / JS semantics are not controlled by this file.
 *
 * All selectors scoped under .rh-zahlenformat-de-us.
 */

/* ---------------------------------------------------------------------------
 * Tool-specific form controls — DE/US direction radios + two option
 * checkboxes (thousands separator, keep invalid). No shared core equivalent
 * because no other tool ships this exact pattern.
 * --------------------------------------------------------------------------- */

.rh-zahlenformat-de-us__fieldset {
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	padding: 0.55rem 0.75rem;
	margin: 1.1rem 0 0;
}

.rh-zahlenformat-de-us__fieldset .rh-tool__label {
	margin: 0 0 0.35rem;
}

.rh-zahlenformat-de-us__radio,
.rh-zahlenformat-de-us__check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.15rem 0;
	cursor: pointer;
	font-size: 0.92rem;
}

.rh-zahlenformat-de-us__radio input,
.rh-zahlenformat-de-us__check input {
	margin: 0;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * Output textarea — monospace + slightly tighter min-height. The diagnostic
 * table below is the canonical audit surface; this textarea is the quick
 * copy-paste destination, so it doesn't need to dominate the viewport.
 * --------------------------------------------------------------------------- */

.rh-zahlenformat-de-us__output {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9rem;
	background: #fafbfc;
	min-height: 5.5rem;
}

/* ---------------------------------------------------------------------------
 * 5-column diagnostic table density. Shared core supplies the wrap chrome
 * (max-height, scroll, border, sticky thead) and the canonical row tints
 * (success / warning / error / alarm). Local rules only handle:
 *   - slightly denser table font
 *   - monospace + no-wrap on the Eingabe + Ausgabe number columns so
 *     `1.234.567,89` doesn't break mid-value
 *   - no-wrap on the short Zeile + Status columns so they stay compact
 *   - SATURATED data-rh-row tints (v1.3 §5.1 / §5.8): core's tints are
 *     near-white (#fcfefd/#f8f3e7/#faf2f2) and read as zebra striping
 *     instead of as a semantic verdict. Tool-local overrides bump them
 *     so the verdict is unambiguously visible. Still restrained per §3.1.
 * --------------------------------------------------------------------------- */

.rh-zahlenformat-de-us__table {
	font-size: 0.9rem;
}

.rh-zahlenformat-de-us__table .rh-tool__col-line,
.rh-zahlenformat-de-us__table .rh-tool__col-status {
	white-space: nowrap;
}

.rh-zahlenformat-de-us__table tbody td.rh-tool__col-input,
.rh-zahlenformat-de-us__table tbody td.rh-tool__col-output {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88rem;
	color: #1e2230;
	white-space: nowrap;
}

/* Saturated semantic row tints — override core's near-white defaults. */
.rh-zahlenformat-de-us tr[data-rh-row="success"] {
	background: #ecf6ef;
}

.rh-zahlenformat-de-us tr[data-rh-row="warning"] {
	background: #fbeec6;
}

.rh-zahlenformat-de-us tr[data-rh-row="error"] {
	background: #f4d7d7;
}

/* ---------------------------------------------------------------------------
 * Empty-state output panel hide.
 *
 * On first page load the JS leaves `data-rh-state="empty"` on the root.
 * Hiding the entire output panel until the user runs once keeps the page
 * lean and prevents an empty stats banner + empty textarea + invisible
 * table from cluttering the empty state. UI-STANDARDS §7: the JS removes
 * the attribute on first successful run and never re-adds it.
 * --------------------------------------------------------------------------- */

.rh-zahlenformat-de-us[data-rh-state="empty"] .rh-zahlenformat-de-us__output-panel {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Local spacing nudges — match the modern migrated tools (rh-telefonnummern,
 * rh-umlaute, rh-plz-ort, rh-datumsformat). The stats banner and shortcut
 * hint themselves are styled by rh-tools-core; we only adjust their
 * vertical rhythm inside this scope.
 * --------------------------------------------------------------------------- */

.rh-zahlenformat-de-us .rh-tool__shortcut-hint {
	margin: 0.85rem 0 0.5rem;
}

.rh-zahlenformat-de-us .rh-tool__stats {
	margin-bottom: 0.65rem;
}

/* ---------------------------------------------------------------------------
 * Breakpoints.
 *   782 px — tighten top margin against the WP admin bar / GeneratePress
 *            header on tablet width.
 *   720 px — control labels gain a half-step of font-size on phones-plus.
 *   560 px — button row stacks vertically; each button spans full width.
 *
 * No 480 px breakpoint, no print styles, no palette overrides — the shared
 * core layer covers those.
 * --------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.rh-zahlenformat-de-us {
		margin-top: 0.75rem;
	}
}

@media (min-width: 720px) {
	.rh-zahlenformat-de-us__radio,
	.rh-zahlenformat-de-us__check {
		font-size: 0.95rem;
	}
}

@media (max-width: 560px) {
	.rh-zahlenformat-de-us .rh-tool__button-row {
		flex-direction: column;
	}

	.rh-zahlenformat-de-us .rh-tool__button-row .rh-tool__button {
		width: 100%;
	}
}