/* ================================================================
   LMA Awards Manager — Shared Frontend Design System.

   Premium dark / glassmorphism / gold component library. This is the
   single source of truth for the public-facing visual identity
   introduced by the Official Nominees Directory module, and is meant
   to be reused — not redefined — by every future public-facing module:
   Voting Directory, Winner Directory, Category Directory, Hall of
   Fame, Judges Directory, Campaign Pages, Entry Tracking, etc.

   Every class here is prefixed `lma-ui-` (generic, module-agnostic).
   Module-specific files (e.g. nominees-directory.css) should only
   contain composition/layout rules for that module's own markup, and
   should reuse these classes/tokens rather than re-declaring colors,
   radii, shadows, or component patterns.

   Enqueue this BEFORE any module's own stylesheet (see
   LMA_Module_Nominees_Directory::register_public_assets(), which
   registers 'lma-design-system' as a dependency of the module's own
   handle).
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────────────── */
/* V13.2 — Official Brand Identity & Colour System. Values below are the
   canonical brand palette (site bg #000000FC, widget bg #0F0F13,
   official gold #C9973A — the ONLY gold used across the public site).
   --lma-* names are this plugin's established naming convention and
   remain the primary tokens every component/module references. The
   --am-* block further down aliases the same values under the brand
   spec's own token names, for anyone (theme CSS, custom Elementor
   global colors, future modules) who wants to consume the "official"
   names directly — both sets always stay in sync since the --am-*
   block is defined in terms of these. */
:root,
.lma-ui-root {
	--lma-bg:          #0f0f13;
	--lma-bg-elevated: #17171c;
	--lma-glass:        rgba(255, 255, 255, 0.04);
	--lma-glass-bd:      rgba(255, 255, 255, 0.08);
	--lma-gold:          #c9973a; /* Official Brand Gold — the ONLY primary gold on the public site. V13.2 */
	--lma-gold-tint:     #e3c583; /* Lighter tint of the official gold — metallic text/ribbon effects only, never an independent hue. */
	--lma-gold-shade:    #836226; /* Darker shade of the official gold — same purpose as above. */
	--lma-gold-soft:     rgba(201, 151, 58, 0.35);
	--lma-gold-glow:     rgba(201, 151, 58, 0.18);
	--lma-border-soft:   rgba(102, 102, 102, 0.39); /* V13.3.1 — search field default border (#66666663), gold reserved for hover/focus only */
	--lma-gold-hover:    rgba(201, 151, 58, 0.25); /* V13.3 — search field hover border */
	--lma-text:          #ffffff;
	--lma-text-dim:      #b8b8b8;
	--lma-text-faint:    #80808c;
	--lma-radius-lg:     24px;
	--lma-radius-md:     20px;
	--lma-radius-sm:     12px;
	--lma-shadow:        0 20px 60px rgba(0, 0, 0, 0.45);
	--lma-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* ── Official brand token names (V13.2 brand spec) — aliases of the
	   canonical values above; kept in sync automatically. ── */
	--am-bg-site:    #000000fc;
	--am-bg-widget:  var(--lma-bg);
	--am-gold:       var(--lma-gold);
	--am-text:       var(--lma-text);
	--am-text-muted: var(--lma-text-dim);
	--am-card:       #18181c;
	--am-border:     #2a2a30;
	--am-radius:     18px;
	--am-transition: .35s ease;
}

.lma-ui-root {
	position: relative;
	font-family: var(--lma-font);
	background: var(--lma-bg);
	color: var(--lma-text);
	border-radius: var(--lma-radius-lg);
	box-sizing: border-box;
}
.lma-ui-root * { box-sizing: border-box; }

/* Ambient decorative background glow — usable behind any section header. */
.lma-ui-ambient-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 900px 420px at 50% -10%, var(--lma-gold-glow), transparent 70%),
		radial-gradient(ellipse 600px 300px at 90% 10%, rgba(212,175,55,0.08), transparent 70%);
}

/* ── Section header ──────────────────────────────────────────────── */
.lma-ui-section-header {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-bottom: 40px;
}
.lma-ui-section-header-title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 12px;
	line-height: 1.1;
	background: linear-gradient(180deg, var(--lma-gold-tint) 0%, var(--lma-gold) 55%, var(--lma-gold-shade) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--lma-gold);
	text-shadow: 0 2px 30px var(--lma-gold-glow);
}
.lma-ui-section-header-subtitle {
	font-size: 1.05rem;
	color: var(--lma-text-dim);
	margin: 0;
	font-weight: 400;
}

/* ── Hero (large centered title section with ambient glow) ───────── */
.lma-ui-hero {
	position: relative;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.lma-ui-hero-icon {
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	color: var(--lma-gold);
	fill: var(--lma-gold);
	filter: drop-shadow(0 0 12px var(--lma-gold-glow));
}
.lma-ui-hero-icon svg { width: 100%; height: 100%; }

/* ── Official Award Plaque placeholder ───────────────────────────────
   Shared hero component (V13.0 — Official Categories / Category
   Details). Reserves room for a future PNG/SVG/transparent/3D-render
   plaque image supplied via an Elementor media control; falls back to
   a glass-panel frame with a gold trophy glyph when no artwork has
   been uploaded yet, so the layout is never empty. The floating
   animation is opt-in per instance (add is-floating) and respects
   prefers-reduced-motion. */
.lma-ui-plaque {
	position: relative;
	z-index: 1;
	width: 160px;
	height: 160px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lma-ui-plaque-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 12px 32px var(--lma-gold-glow));
}
.lma-ui-plaque-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lma-glass);
	border: 1px dashed var(--lma-gold-soft);
	border-radius: var(--lma-radius-lg);
	color: var(--lma-gold);
	fill: var(--lma-gold);
}
.lma-ui-plaque-placeholder svg { width: 56px; height: 56px; filter: drop-shadow(0 0 12px var(--lma-gold-glow)); }
.lma-ui-plaque.is-floating .lma-ui-plaque-img,
.lma-ui-plaque.is-floating .lma-ui-plaque-placeholder {
	animation: lma-ui-plaque-float 5s ease-in-out infinite;
}
@keyframes lma-ui-plaque-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.lma-ui-plaque.is-floating .lma-ui-plaque-img,
	.lma-ui-plaque.is-floating .lma-ui-plaque-placeholder {
		animation: none;
	}
}

/* Lightweight CSS-only "particle" texture — small gold flecks drifting
   slowly, used behind hero sections. Deliberately cheap (no JS, no
   images) so it never costs a network request or a layout thrash. */
.lma-ui-particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(2px 2px at 10% 20%, var(--lma-gold) 0, transparent 50%),
		radial-gradient(2px 2px at 80% 30%, var(--lma-gold) 0, transparent 50%),
		radial-gradient(1.5px 1.5px at 30% 70%, var(--lma-gold) 0, transparent 50%),
		radial-gradient(1.5px 1.5px at 65% 80%, var(--lma-gold) 0, transparent 50%),
		radial-gradient(2px 2px at 90% 60%, var(--lma-gold) 0, transparent 50%),
		radial-gradient(1px 1px at 45% 15%, var(--lma-gold) 0, transparent 50%);
	background-repeat: no-repeat;
	opacity: 0.35;
	animation: lma-ui-particle-drift 18s linear infinite;
}
@keyframes lma-ui-particle-drift {
	0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0.25; }
	50%  { opacity: 0.45; }
	100% { background-position: 0 -40px, 0 30px, 0 -25px, 0 20px, 0 -35px, 0 15px; opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
	.lma-ui-particles { animation: none; opacity: 0.3; }
}

/* ── Stat cards (statistics bar) ─────────────────────────────────── */
.lma-ui-stats-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
	padding: 22px 36px;
}
.lma-ui-stat {
	display: flex;
	align-items: center;
	gap: 12px;
}
.lma-ui-stat-icon {
	width: 26px;
	height: 26px;
	color: var(--lma-gold);
	fill: var(--lma-gold);
	flex-shrink: 0;
}
.lma-ui-stat-icon svg { width: 100%; height: 100%; display: block; }
.lma-ui-stat-value {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--lma-gold);
	line-height: 1;
}
.lma-ui-stat-label {
	display: block;
	font-size: 0.72rem;
	color: var(--lma-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 2px;
}
.lma-ui-stat-divider {
	width: 1px;
	height: 32px;
	background: var(--lma-glass-bd);
	flex-shrink: 0;
}

/* On narrow viewports the 3-stat / 2-divider row no longer fits on one
   line, and letting it wrap via flex-wrap (the previous approach) breaks
   the divider count and centers each wrapped line independently — the
   dividers end up next to the wrong stat and the third row drifts out
   of alignment with the first two. Below 640px we switch to a single
   deliberate column instead, so every row shares identical height,
   icon position, and text baseline, with the divider rotated into a
   full-width rule between rows. */
@media (max-width: 640px) {
	.lma-ui-stats-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.lma-ui-stat {
		justify-content: flex-start;
		padding: 14px 4px;
	}
	.lma-ui-stat-divider {
		width: 100%;
		height: 1px;
	}
}

/* ── Ribbon (small corner tag, e.g. "Official Winner") ─────────────── */
.lma-ui-ribbon {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient(135deg, var(--lma-gold-tint), var(--lma-gold) 60%, var(--lma-gold-shade));
	color: var(--lma-bg);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.lma-ui-ribbon-icon { width: 11px; height: 11px; fill: var(--lma-bg); }

/* ── Inline status badge (e.g. "WINNER" under a card name) ─────────── */
.lma-ui-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--lma-gold);
	margin-top: 4px;
}
.lma-ui-status-badge-icon { width: 13px; height: 13px; color: var(--lma-gold); }

/* ── Pending / placeholder card state ───────────────────────────── */
.lma-ui-pending-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 220px;
	border: 1px dashed var(--lma-glass-bd);
	border-radius: var(--lma-radius-md);
	background: rgba(255,255,255,0.015);
	color: var(--lma-text-faint);
	padding: 24px;
	text-align: center;
}
.lma-ui-pending-icon { width: 28px; height: 28px; color: var(--lma-text-faint); }
.lma-ui-pending-label { font-size: 0.85rem; margin: 0; }


.lma-ui-glass-panel {
	background: var(--lma-glass);
	border: 1px solid var(--lma-glass-bd);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
}

/* ── Search field ─────────────────────────────────────────────────── */
/* V13.3: overrides the .lma-ui-glass-panel base it's paired with in
   markup (see templates — this class always appears alongside
   lma-ui-glass-panel) with a softer, premium treatment: a solid subtle
   card surface instead of the visible white-ish glass border, and a
   barely-there gold hairline instead of a harsh outline. Same size and
   shape as before (radius/padding untouched) — only the surface/border
   treatment changes. Applies to every frontend search field plugin-wide
   (Nominees, Winners, Categories) since they all share this one class —
   no per-module duplication needed. */
.lma-ui-search-field {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 18px;
	background: var(--am-card);
	border: 1px solid var(--lma-border-soft);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: border-color var(--am-transition), box-shadow var(--am-transition), background var(--am-transition);
}
.lma-ui-search-field:hover {
	border-color: var(--lma-gold-hover);
}
.lma-ui-search-field:focus-within {
	border-color: var(--lma-gold-soft);
	box-shadow: 0 0 0 3px var(--lma-gold-glow);
	outline: none;
}
.lma-ui-search-field-icon {
	width: 18px;
	height: 18px;
	fill: var(--lma-gold);
	flex-shrink: 0;
}
.lma-ui-search-field-input {
	background: transparent;
	border: none;
	outline: none;
	color: var(--lma-text);
	font-size: 0.95rem;
	font-family: inherit;
	padding: 16px 12px;
	width: 100%;
}
.lma-ui-search-field-input::placeholder { color: var(--lma-text-faint); }

/* ── Dropdown (native select, styled) ─────────────────────────────── */
.lma-ui-dropdown {
	width: 100%;
	height: 100%;
	min-height: 56px;
	color: var(--lma-text);
	font-family: inherit;
	font-size: 0.9rem;
	padding: 0 16px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C9973A'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23C9973A' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lma-ui-dropdown:focus {
	outline: none;
	border-color: var(--lma-gold-soft);
	box-shadow: 0 0 0 3px var(--lma-gold-glow);
}
.lma-ui-dropdown option { background: var(--lma-bg-elevated); color: var(--lma-text); }

/* ── Alphabet / pill navigation ──────────────────────────────────── */
.lma-ui-pill-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px;
}
.lma-ui-pill {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--lma-text-dim);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.lma-ui-pill:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
	color: var(--lma-text);
}
.lma-ui-pill.is-active {
	background: var(--lma-gold);
	color: var(--lma-bg);
	box-shadow: 0 4px 16px var(--lma-gold-glow);
}
.lma-ui-pill:disabled,
.lma-ui-pill.is-empty {
	color: rgba(189, 189, 189, 0.3);
	cursor: not-allowed;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.lma-ui-card {
	position: relative;
	background: linear-gradient(160deg, var(--lma-gold-glow), rgba(255,255,255,0.02) 60%);
	border: 1px solid var(--lma-glass-bd);
	border-radius: var(--lma-radius-md);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--lma-shadow);
	transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.lma-ui-card:hover {
	transform: translateY(-6px);
	border-color: var(--lma-gold-soft);
	box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px var(--lma-gold-soft), 0 0 40px var(--lma-gold-glow);
}
.lma-ui-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--lma-bg-elevated);
}
.lma-ui-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.lma-ui-card:hover .lma-ui-card-img { transform: scale(1.08); }
.lma-ui-card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--lma-bg-elevated), var(--lma-bg));
	color: var(--lma-gold);
	font-size: 2.5rem;
	font-weight: 800;
}
.lma-ui-card-media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
	pointer-events: none;
}
.lma-ui-card-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lma-ui-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lma-glass-bd);
}

/* ── Overlay card variant ──────────────────────────────────────────────
   Image-dominant card: the photo fills the ENTIRE card (no separate
   content section below it). Text sits directly on the bottom portion
   of the photo via a tall, premium gradient. Used by the Nominee Card
   (and intended to be reused by the Winner Card and future modules per
   the card-redesign brief — see lma-ui-card-overlay-content below). */
.lma-ui-card-overlay {
	border-color: var(--lma-gold-soft);
}
.lma-ui-card-overlay .lma-ui-card-media {
	aspect-ratio: 3 / 4;
}
.lma-ui-card-overlay .lma-ui-card-media::after {
	/* Taller, stronger gradient than the badge-only default — this
	   variant overlays multiple lines of text directly on the photo,
	   so it needs much more contrast to stay readable while still
	   "fading naturally into the photograph" per the brief, not
	   reading as a flat black rectangle. */
	height: 62%;
	background: linear-gradient(180deg, transparent, rgba(10,8,8,0.55) 35%, rgba(8,6,6,0.88) 70%, rgba(6,4,4,0.94));
}
.lma-ui-card-overlay-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px 18px 18px;
}

/* ── Badge ────────────────────────────────────────────────────────── */
.lma-ui-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	background: rgba(10, 10, 12, 0.65);
	border: 1px solid var(--lma-gold-soft);
	color: var(--lma-gold);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.lma-ui-badge-icon { width: 10px; height: 10px; fill: var(--lma-gold); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.lma-ui-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.03em;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.lma-ui-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.lma-ui-btn:active:not(:disabled) { transform: scale(0.98); }

/* Outline variant — gold border, transparent fill, fills gold on hover.
   Used for primary actions like "Load More". */
.lma-ui-btn-outline {
	background: transparent;
	border: 1.5px solid var(--lma-gold-soft);
	color: var(--lma-gold);
	font-size: 0.85rem;
	text-transform: uppercase;
	padding: 16px 36px;
}
.lma-ui-btn-outline:hover:not(:disabled) {
	background: var(--lma-gold);
	color: var(--lma-bg);
	box-shadow: 0 8px 28px var(--lma-gold-glow);
}

/* Pill/chip variant — small outlined CTA. Used for "View Winner" etc. */
.lma-ui-btn-chip {
	background: transparent;
	border: 1px solid var(--lma-gold-soft);
	color: var(--lma-gold);
	font-size: 0.78rem;
	padding: 7px 14px;
	white-space: nowrap;
}
.lma-ui-btn-chip:hover:not(:disabled) {
	background: var(--lma-gold);
	color: var(--lma-bg);
	box-shadow: 0 4px 14px var(--lma-gold-glow);
}

.lma-ui-btn-icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.6s ease;
}
.lma-ui-btn.is-loading .lma-ui-btn-icon {
	animation: lma-ui-spin 0.8s linear infinite;
}
@keyframes lma-ui-spin { to { transform: rotate(360deg); } }

/* ── Loaders / skeletons ──────────────────────────────────────────── */
.lma-ui-skeleton-card {
	background: var(--lma-glass);
	border: 1px solid var(--lma-glass-bd);
	border-radius: var(--lma-radius-md);
	padding: 0 0 18px;
	overflow: hidden;
}
.lma-ui-skeleton-img {
	aspect-ratio: 3/4;
	background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%);
	background-size: 200% 100%;
	animation: lma-ui-shimmer 1.6s ease-in-out infinite;
}
.lma-ui-skeleton-line {
	height: 12px;
	border-radius: 6px;
	margin: 14px 18px 0;
	background: rgba(255,255,255,0.07);
}
.lma-ui-skeleton-line-lg { width: 70%; }
.lma-ui-skeleton-line-sm { width: 45%; margin-top: 8px; }

@keyframes lma-ui-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Pagination / "load more" wrapper ─────────────────────────────── */
.lma-ui-pagination {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
}
.lma-ui-pagination-count {
	font-size: 0.82rem;
	color: var(--lma-text-faint);
	margin: 0;
}

/* ── Collapsible section heading (letter groups, future accordions) ── */
.lma-ui-collapsible-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}
.lma-ui-collapsible-label {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--lma-gold);
	line-height: 1;
}
.lma-ui-collapsible-meta {
	font-size: 0.85rem;
	color: var(--lma-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.lma-ui-collapsible-divider {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--lma-gold-soft), transparent);
}
.lma-ui-collapsible-toggle {
	appearance: none;
	border: 1px solid var(--lma-glass-bd);
	background: var(--lma-glass);
	color: var(--lma-gold);
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.lma-ui-collapsible-toggle:hover { background: rgba(255,255,255,0.08); }
.lma-ui-collapsible-chevron { width: 16px; height: 16px; transition: transform 0.25s ease; }
.is-collapsed .lma-ui-collapsible-chevron { transform: rotate(180deg); }

/* ── Empty state ──────────────────────────────────────────────────── */
.lma-ui-empty-state {
	text-align: center;
	color: var(--lma-text-faint);
	padding: 60px 20px;
	font-size: 1rem;
	position: relative;
	z-index: 1;
}

/* ── Status / live region (visually hidden but announced) ────────── */
.lma-ui-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Generic visually-hidden utility for accessible labels that shouldn't
   render visibly. Self-contained — does not depend on a theme defining
   .screen-reader-text. */
.lma-ui-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lma-ui-card,
	.lma-ui-card-img,
	.lma-ui-collapsible-chevron,
	.lma-ui-btn-icon {
		transition: none;
		animation: none;
	}
}

/* ── Focus visibility (accessibility) ─────────────────────────────── */
.lma-ui-pill:focus-visible,
.lma-ui-collapsible-toggle:focus-visible,
.lma-ui-btn:focus-visible {
	outline: 2px solid var(--lma-gold);
	outline-offset: 2px;
}