/**
 * We'ra Core UI Kit — v0.1.0 design tokens + core component classes.
 *
 * SCOPE (see docs/architecture-v0.1.md for the full rationale):
 *   - This file defines :root custom properties (design tokens, prefix
 *     --wrc-ui-*) and component rules scoped EXCLUSIVELY to `.wrc-ui-*`
 *     classes.
 *   - It never styles a generic element (button, a, input, h1-h6, p,
 *     table, ul, body, etc.) and contains no CSS reset. This is
 *     deliberate and load-bearing: this stylesheet is registered
 *     site-wide (see class-wrc-ui-assets.php), so it must be incapable of
 *     visually rewriting unrelated theme/plugin content. Every selector
 *     below is anchored to a `.wrc-ui-` prefixed class.
 *   - Components consume tokens; hard-coded brand colors are not
 *     scattered through component rules (the token block below is the
 *     single place brand values live).
 *   - No `!important` is used anywhere in this file except where noted
 *     as unavoidable (there are currently zero such cases).
 *   - No external font or image URL is referenced; typography falls back
 *     to the system font stack.
 */

/* =====================================================================
   DESIGN TOKENS
   Overriding: define ANY of these again, at higher specificity or later
   in the cascade (e.g. a child theme's stylesheet loaded after this one,
   or an Elementor "Custom CSS" panel targeting :root), to retagret the
   whole system. None of these are !important, so a single matching
   `:root { --wrc-ui-color-primary: #003322; }` declaration anywhere later
   in the cascade wins. See docs/architecture-v0.1.md "Token overrides".
   ===================================================================== */

:root {
	/* --- Colors ------------------------------------------------------- */
	--wrc-ui-color-primary:       #1F3D2E; /* deep forest green */
	--wrc-ui-color-primary-hover: #16301F; /* darker forest green */
	--wrc-ui-color-primary-soft:  #E6EEE7; /* very pale sage */
	--wrc-ui-color-secondary:     #7C8B74; /* muted sage */
	--wrc-ui-color-accent:        #B8963F; /* subtle muted gold */
	--wrc-ui-color-background:    #FAF7F2; /* warm off-white */
	--wrc-ui-color-surface:       #FFFFFF; /* near-white surface */
	--wrc-ui-color-surface-alt:   #F1E9DB; /* warm beige */
	--wrc-ui-color-text:          #2B2E27; /* deep charcoal / green-black */
	--wrc-ui-color-text-muted:    #746E63; /* warm gray */
	--wrc-ui-color-border:        #DFD5C2; /* soft beige-gray */
	--wrc-ui-color-success:       #4C7A54; /* muted green */
	--wrc-ui-color-warning:       #B07A2E; /* muted amber */
	--wrc-ui-color-error:         #A54B3C; /* muted terracotta */
	--wrc-ui-color-info:          #4C6C86; /* muted slate blue */

	/* --- Typography ----------------------------------------------------
	   No external font is loaded (spec 38./39. pont): the family token is
	   a system-font stack only. Sites are free to override it with a
	   licensed webfont via their own :root rule. */
	--wrc-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--wrc-ui-font-size-xs:  0.75rem;  /* 12px */
	--wrc-ui-font-size-sm:  0.875rem; /* 14px */
	--wrc-ui-font-size-md:  1rem;     /* 16px */
	--wrc-ui-font-size-lg:  1.125rem; /* 18px */
	--wrc-ui-font-size-xl:  1.5rem;   /* 24px */
	--wrc-ui-font-size-2xl: 2rem;     /* 32px */
	--wrc-ui-font-weight-normal:   400;
	--wrc-ui-font-weight-medium:   500;
	--wrc-ui-font-weight-semibold: 600;
	--wrc-ui-font-weight-bold:     700;

	/* --- Spacing scale --------------------------------------------------
	   A small, consistent 8-step scale. Components use these instead of
	   ad-hoc pixel values. */
	--wrc-ui-space-1: 0.25rem; /* 4px */
	--wrc-ui-space-2: 0.5rem;  /* 8px */
	--wrc-ui-space-3: 0.75rem; /* 12px */
	--wrc-ui-space-4: 1rem;    /* 16px */
	--wrc-ui-space-5: 1.5rem;  /* 24px */
	--wrc-ui-space-6: 2rem;    /* 32px */
	--wrc-ui-space-7: 2.5rem;  /* 40px */
	--wrc-ui-space-8: 3rem;    /* 48px */

	/* --- Radius ---------------------------------------------------------
	   Deliberately NOT everything pill-shaped (spec 4. pont) - `-pill` is
	   reserved for chips/badges, not the default component radius. */
	--wrc-ui-radius-sm:   6px;
	--wrc-ui-radius-md:   10px;
	--wrc-ui-radius-lg:   16px;
	--wrc-ui-radius-pill: 999px;

	/* --- Shadow ----------------------------------------------------------
	   Intentionally subtle (spec 4. pont: "Do not overuse shadows") - both
	   values are low-opacity and tinted with the primary color rather than
	   flat black, so they read as soft depth, not a generic SaaS panel. */
	--wrc-ui-shadow-sm: 0 1px 2px rgba(31, 61, 46, 0.08);
	--wrc-ui-shadow-md: 0 6px 16px rgba(31, 61, 46, 0.10);

	/* --- Layout ----------------------------------------------------------- */
	--wrc-ui-container-width: 1140px;
	--wrc-ui-transition: 150ms ease;

	/* --- Focus -------------------------------------------------------------
	   A gold-tinted ring (not a re-used brand green) so the focus
	   indicator reads clearly against both the primary button and light
	   surfaces alike. Applied per-component via :focus-visible - see
	   "Accessibility" in docs/architecture-v0.1.md for why this is not a
	   blanket `:focus-visible { ... }` rule (spec 7. pont: no generic
	   element selectors). */
	--wrc-ui-focus-ring: 0 0 0 3px rgba(184, 150, 63, 0.45);
}

/* =====================================================================
   BUTTON — .wrc-ui-button
   ===================================================================== */

.wrc-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wrc-ui-space-2 );
	box-sizing: border-box;
	min-height: 44px; /* touch-friendly (spec 8. pont) */
	padding: var( --wrc-ui-space-2 ) var( --wrc-ui-space-5 );
	border: 1px solid transparent;
	border-radius: var( --wrc-ui-radius-md );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-md );
	font-weight: var( --wrc-ui-font-weight-medium );
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background-color: var( --wrc-ui-color-primary );
	color: #FFFFFF;
	transition: background-color var( --wrc-ui-transition ), border-color var( --wrc-ui-transition ),
		color var( --wrc-ui-transition ), box-shadow var( --wrc-ui-transition );
}

.wrc-ui-button:hover {
	background-color: var( --wrc-ui-color-primary-hover );
}

.wrc-ui-button:focus-visible {
	outline: none;
	box-shadow: var( --wrc-ui-focus-ring );
}

.wrc-ui-button:disabled,
.wrc-ui-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
}

.wrc-ui-button:disabled:hover,
.wrc-ui-button[aria-disabled="true"]:hover {
	background-color: var( --wrc-ui-color-primary );
}

/* --- Variants --------------------------------------------------------- */

.wrc-ui-button--primary {
	background-color: var( --wrc-ui-color-primary );
	color: #FFFFFF;
}
.wrc-ui-button--primary:hover {
	background-color: var( --wrc-ui-color-primary-hover );
}

.wrc-ui-button--secondary {
	background-color: var( --wrc-ui-color-secondary );
	color: #FFFFFF;
}
.wrc-ui-button--secondary:hover {
	background-color: var( --wrc-ui-color-primary-hover );
}

.wrc-ui-button--outline {
	background-color: transparent;
	border-color: var( --wrc-ui-color-primary );
	color: var( --wrc-ui-color-primary );
}
.wrc-ui-button--outline:hover {
	background-color: var( --wrc-ui-color-primary-soft );
}
.wrc-ui-button--outline:disabled:hover,
.wrc-ui-button--outline[aria-disabled="true"]:hover {
	background-color: transparent;
}

.wrc-ui-button--ghost {
	background-color: transparent;
	color: var( --wrc-ui-color-primary );
}
.wrc-ui-button--ghost:hover {
	background-color: var( --wrc-ui-color-primary-soft );
}
.wrc-ui-button--ghost:disabled:hover,
.wrc-ui-button--ghost[aria-disabled="true"]:hover {
	background-color: transparent;
}

.wrc-ui-button--danger {
	background-color: var( --wrc-ui-color-error );
	color: #FFFFFF;
}
.wrc-ui-button--danger:hover {
	background-color: #8A3C30;
}

/* --- Sizes -------------------------------------------------------------- */

.wrc-ui-button--sm {
	min-height: 36px;
	padding: var( --wrc-ui-space-1 ) var( --wrc-ui-space-4 );
	font-size: var( --wrc-ui-font-size-sm );
}

.wrc-ui-button--md {
	min-height: 44px;
	padding: var( --wrc-ui-space-2 ) var( --wrc-ui-space-5 );
	font-size: var( --wrc-ui-font-size-md );
}

.wrc-ui-button--lg {
	min-height: 52px;
	padding: var( --wrc-ui-space-3 ) var( --wrc-ui-space-6 );
	font-size: var( --wrc-ui-font-size-lg );
}

/* Icon-compatible: any child element (an inline SVG a site/theme
   provides, or a font-icon span) is simply sized to the line height -
   the UI Kit ships no icon library itself (spec 26. pont). */
.wrc-ui-button__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* =====================================================================
   CARD — .wrc-ui-card
   ===================================================================== */

.wrc-ui-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: var( --wrc-ui-color-surface );
	border: 1px solid var( --wrc-ui-color-border );
	border-radius: var( --wrc-ui-radius-lg );
	box-shadow: var( --wrc-ui-shadow-sm );
	overflow: hidden;
}

.wrc-ui-card__header,
.wrc-ui-card__body,
.wrc-ui-card__footer {
	padding: var( --wrc-ui-space-5 );
}

.wrc-ui-card__header {
	border-bottom: 1px solid var( --wrc-ui-color-border );
}

.wrc-ui-card__footer {
	border-top: 1px solid var( --wrc-ui-color-border );
	background-color: var( --wrc-ui-color-surface-alt );
}

.wrc-ui-card__title {
	margin: 0 0 var( --wrc-ui-space-2 );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-lg );
	font-weight: var( --wrc-ui-font-weight-semibold );
	color: var( --wrc-ui-color-text );
}

.wrc-ui-card__description {
	margin: 0;
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-sm );
	color: var( --wrc-ui-color-text-muted );
	line-height: 1.5;
}

/* --- Variants --------------------------------------------------------- */

/* Interactive: SUBTLE hover only (spec 9. pont) - no JS makes the whole
   card clickable; a real link/button inside the card remains the only
   actionable element. This rule purely signals "this card sits inside an
   interactive context" (e.g. a card that itself wraps an <a>). */
.wrc-ui-card--interactive {
	transition: box-shadow var( --wrc-ui-transition ), border-color var( --wrc-ui-transition );
}
.wrc-ui-card--interactive:hover {
	box-shadow: var( --wrc-ui-shadow-md );
	border-color: var( --wrc-ui-color-secondary );
}

.wrc-ui-card--highlight {
	border-color: var( --wrc-ui-color-accent );
	box-shadow: var( --wrc-ui-shadow-md );
}

.wrc-ui-card--flat {
	box-shadow: none;
	border-color: var( --wrc-ui-color-border );
}

/* =====================================================================
   BADGE — .wrc-ui-badge
   ===================================================================== */

.wrc-ui-badge {
	display: inline-flex;
	align-items: center;
	gap: var( --wrc-ui-space-1 );
	box-sizing: border-box;
	padding: var( --wrc-ui-space-1 ) var( --wrc-ui-space-3 );
	border-radius: var( --wrc-ui-radius-pill );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-xs );
	font-weight: var( --wrc-ui-font-weight-semibold );
	line-height: 1.4;
	white-space: nowrap;
	background-color: var( --wrc-ui-color-surface-alt );
	color: var( --wrc-ui-color-text );
}

.wrc-ui-badge--primary {
	background-color: var( --wrc-ui-color-primary-soft );
	color: var( --wrc-ui-color-primary );
}

.wrc-ui-badge--neutral {
	background-color: var( --wrc-ui-color-surface-alt );
	color: var( --wrc-ui-color-text-muted );
}

.wrc-ui-badge--success {
	background-color: #E5EFE4;
	color: var( --wrc-ui-color-success );
}

.wrc-ui-badge--warning {
	background-color: #F5E9D6;
	color: var( --wrc-ui-color-warning );
}

.wrc-ui-badge--error {
	background-color: #F3E1DC;
	color: var( --wrc-ui-color-error );
}

.wrc-ui-badge--info {
	background-color: #E1E9EF;
	color: var( --wrc-ui-color-info );
}

/* =====================================================================
   PROGRESS — .wrc-ui-progress
   The visual fill width is driven by the safe, PHP-clamped
   `--wrc-ui-progress-value` custom property (spec 11./22. pont) - never
   a raw, unclamped style value. ===================================== */

.wrc-ui-progress {
	display: flex;
	flex-direction: column;
	gap: var( --wrc-ui-space-1 );
	--wrc-ui-progress-value: 0%;
}

.wrc-ui-progress__track {
	position: relative;
	width: 100%;
	height: var( --wrc-ui-space-3 );
	background-color: var( --wrc-ui-color-surface-alt );
	border-radius: var( --wrc-ui-radius-pill );
	overflow: hidden;
}

.wrc-ui-progress__bar {
	display: block;
	height: 100%;
	width: var( --wrc-ui-progress-value );
	background-color: var( --wrc-ui-color-primary );
	border-radius: var( --wrc-ui-radius-pill );
	transition: width var( --wrc-ui-transition );
}

.wrc-ui-progress__label {
	display: flex;
	justify-content: space-between;
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-sm );
	color: var( --wrc-ui-color-text-muted );
}

.wrc-ui-progress__value {
	font-weight: var( --wrc-ui-font-weight-semibold );
	color: var( --wrc-ui-color-text );
}

@media ( prefers-reduced-motion: reduce ) {
	.wrc-ui-progress__bar {
		transition: none;
	}
}

/* =====================================================================
   CHIP — .wrc-ui-chip
   No filtering JS ships in v0.1 (spec 12. pont) - purely visual states.
   ===================================================================== */

.wrc-ui-chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 36px;
	padding: var( --wrc-ui-space-1 ) var( --wrc-ui-space-4 );
	border: 1px solid var( --wrc-ui-color-border );
	border-radius: var( --wrc-ui-radius-pill );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-sm );
	font-weight: var( --wrc-ui-font-weight-medium );
	color: var( --wrc-ui-color-text );
	background-color: var( --wrc-ui-color-surface );
	cursor: pointer;
	transition: background-color var( --wrc-ui-transition ), border-color var( --wrc-ui-transition ),
		color var( --wrc-ui-transition );
}

.wrc-ui-chip:hover {
	border-color: var( --wrc-ui-color-secondary );
}

.wrc-ui-chip:focus-visible {
	outline: none;
	box-shadow: var( --wrc-ui-focus-ring );
}

.wrc-ui-chip--active {
	background-color: var( --wrc-ui-color-primary );
	border-color: var( --wrc-ui-color-primary );
	color: #FFFFFF;
}
.wrc-ui-chip--active:hover {
	border-color: var( --wrc-ui-color-primary-hover );
}

.wrc-ui-chip--disabled,
.wrc-ui-chip[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* =====================================================================
   NOTICE — .wrc-ui-notice
   ===================================================================== */

.wrc-ui-notice {
	display: flex;
	flex-direction: column;
	gap: var( --wrc-ui-space-1 );
	box-sizing: border-box;
	padding: var( --wrc-ui-space-4 ) var( --wrc-ui-space-5 );
	border: 1px solid var( --wrc-ui-color-border );
	border-left: 4px solid var( --wrc-ui-color-info );
	border-radius: var( --wrc-ui-radius-md );
	background-color: var( --wrc-ui-color-surface );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-sm );
	color: var( --wrc-ui-color-text );
	line-height: 1.5;
}

.wrc-ui-notice__title {
	margin: 0;
	font-size: var( --wrc-ui-font-size-md );
	font-weight: var( --wrc-ui-font-weight-semibold );
}

.wrc-ui-notice__content {
	margin: 0;
	color: var( --wrc-ui-color-text );
}

.wrc-ui-notice--success {
	border-left-color: var( --wrc-ui-color-success );
}

.wrc-ui-notice--warning {
	border-left-color: var( --wrc-ui-color-warning );
}

.wrc-ui-notice--error {
	border-left-color: var( --wrc-ui-color-error );
}

.wrc-ui-notice--info {
	border-left-color: var( --wrc-ui-color-info );
}

/* =====================================================================
   EMPTY STATE — .wrc-ui-empty
   ===================================================================== */

.wrc-ui-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var( --wrc-ui-space-2 );
	box-sizing: border-box;
	padding: var( --wrc-ui-space-8 ) var( --wrc-ui-space-5 );
	color: var( --wrc-ui-color-text-muted );
	font-family: var( --wrc-ui-font-family );
}

/* No icon dependency (spec 14./26. pont) - this area is reserved for
   optional, later, site/user-supplied safe markup and stays empty (0
   height) if none is provided. */
.wrc-ui-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var( --wrc-ui-color-secondary );
}

.wrc-ui-empty__title {
	margin: 0;
	font-size: var( --wrc-ui-font-size-lg );
	font-weight: var( --wrc-ui-font-weight-semibold );
	color: var( --wrc-ui-color-text );
}

.wrc-ui-empty__text {
	margin: 0;
	max-width: 32rem;
	font-size: var( --wrc-ui-font-size-sm );
}

.wrc-ui-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --wrc-ui-space-3 );
	margin-top: var( --wrc-ui-space-2 );
}

/* =====================================================================
   LOADING — .wrc-ui-loading / .wrc-ui-spinner / .wrc-ui-skeleton
   No JS is required for any of these (spec 15./29. pont) - pure CSS
   animation, disabled under prefers-reduced-motion.
   ===================================================================== */

.wrc-ui-loading {
	display: inline-flex;
	align-items: center;
	gap: var( --wrc-ui-space-2 );
	font-family: var( --wrc-ui-font-family );
	font-size: var( --wrc-ui-font-size-sm );
	color: var( --wrc-ui-color-text-muted );
}

.wrc-ui-spinner {
	display: inline-block;
	box-sizing: border-box;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var( --wrc-ui-color-surface-alt );
	border-top-color: var( --wrc-ui-color-primary );
	border-radius: 50%;
	animation: wrc-ui-spin 0.8s linear infinite;
}

@keyframes wrc-ui-spin {
	to {
		transform: rotate( 360deg );
	}
}

.wrc-ui-skeleton {
	display: block;
	width: 100%;
	height: var( --wrc-ui-space-5 );
	border-radius: var( --wrc-ui-radius-sm );
	background: linear-gradient(
		90deg,
		var( --wrc-ui-color-surface-alt ) 25%,
		var( --wrc-ui-color-border ) 37%,
		var( --wrc-ui-color-surface-alt ) 63%
	);
	background-size: 400% 100%;
	animation: wrc-ui-skeleton-shimmer 1.4s ease infinite;
}

@keyframes wrc-ui-skeleton-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wrc-ui-spinner {
		animation: none;
		border-top-color: var( --wrc-ui-color-primary );
	}
	.wrc-ui-skeleton {
		animation: none;
		background: var( --wrc-ui-color-surface-alt );
	}
}

/* =====================================================================
   LAYOUT PRIMITIVES — .wrc-ui-stack / .wrc-ui-cluster / .wrc-ui-grid
   Scoped strictly to UI Kit component composition (spec 16. pont) - NOT
   a general-purpose layout framework.
   ===================================================================== */

.wrc-ui-stack {
	display: flex;
	flex-direction: column;
	gap: var( --wrc-ui-space-4 );
}

.wrc-ui-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wrc-ui-space-3 );
}

.wrc-ui-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: var( --wrc-ui-space-5 );
}

/* =====================================================================
   RESPONSIVE FOUNDATION
   Mobile-first by construction (flex/grid + relative units throughout);
   the only breakpoint below widens spacing slightly on larger screens,
   it never introduces a fixed width (spec 17. pont).
   ===================================================================== */

@media ( min-width: 782px ) {
	.wrc-ui-card__header,
	.wrc-ui-card__body,
	.wrc-ui-card__footer {
		padding: var( --wrc-ui-space-6 );
	}
}

/* =====================================================================
   INTERACTIVE COMPONENTS — v0.2
   ===================================================================== */
.wrc-ui-accordion { border-top: 1px solid var( --wrc-ui-color-border ); }
.wrc-ui-accordion__item { border-bottom: 1px solid var( --wrc-ui-color-border ); }
.wrc-ui-accordion__heading { margin: 0; }
.wrc-ui-accordion__trigger { width: 100%; padding: var( --wrc-ui-space-4 ) 0; border: 0; background: transparent; color: var( --wrc-ui-color-text ); font: inherit; font-weight: var( --wrc-ui-font-weight-semibold ); text-align: left; cursor: pointer; }
.wrc-ui-accordion__trigger:focus-visible, .wrc-ui-tabs__tab:focus-visible, .wrc-ui-modal__close:focus-visible, .wrc-ui-notice__dismiss:focus-visible { outline: var( --wrc-ui-focus-ring ); outline-offset: 2px; }
.wrc-ui-accordion__panel { padding: 0 0 var( --wrc-ui-space-4 ); color: var( --wrc-ui-color-text ); }

.wrc-ui-tabs__list { display: flex; flex-wrap: wrap; gap: var( --wrc-ui-space-2 ); border-bottom: 1px solid var( --wrc-ui-color-border ); }
.wrc-ui-tabs__tab { padding: var( --wrc-ui-space-3 ) var( --wrc-ui-space-4 ); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var( --wrc-ui-color-text-muted ); font: inherit; cursor: pointer; }
.wrc-ui-tabs__tab[aria-selected="true"] { border-bottom-color: var( --wrc-ui-color-primary ); color: var( --wrc-ui-color-primary ); font-weight: var( --wrc-ui-font-weight-semibold ); }
.wrc-ui-tabs__panel { padding: var( --wrc-ui-space-4 ) 0; color: var( --wrc-ui-color-text ); }

.wrc-ui-modal__backdrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: var( --wrc-ui-space-4 ); background: rgba( 0, 0, 0, 0.45 ); }
.wrc-ui-modal__backdrop[hidden] { display: none; }
.wrc-ui-modal__dialog { width: min( 100%, 640px ); max-height: calc( 100vh - 2 * var( --wrc-ui-space-4 ) ); overflow: auto; border-radius: var( --wrc-ui-radius-lg ); background: var( --wrc-ui-color-surface ); box-shadow: var( --wrc-ui-shadow-md ); color: var( --wrc-ui-color-text ); }
.wrc-ui-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var( --wrc-ui-space-4 ); padding: var( --wrc-ui-space-5 ); border-bottom: 1px solid var( --wrc-ui-color-border ); }
.wrc-ui-modal__title { margin: 0; font-size: var( --wrc-ui-font-size-xl ); }
.wrc-ui-modal__body { padding: var( --wrc-ui-space-5 ); }
.wrc-ui-modal__close, .wrc-ui-notice__dismiss { border: 0; background: transparent; color: var( --wrc-ui-color-text-muted ); font: inherit; font-size: var( --wrc-ui-font-size-xl ); cursor: pointer; }
.wrc-ui-modal-open { overflow: hidden; }

.wrc-ui-notice { position: relative; }
.wrc-ui-notice__dismiss { position: absolute; top: var( --wrc-ui-space-2 ); right: var( --wrc-ui-space-2 ); }
.wrc-ui-notice:has(.wrc-ui-notice__dismiss) { padding-right: var( --wrc-ui-space-8 ); }

@media ( prefers-reduced-motion: reduce ) {
	.wrc-ui-accordion__trigger, .wrc-ui-tabs__tab, .wrc-ui-modal__dialog { transition: none; }
}