@charset "UTF-8";
/**
 * MLS Genie™ — Skeleton loader.
 *
 * One loading treatment for the whole product.
 *
 * There were ten of these before this file: mlsg-shimmer, mlsg-comps-skeleton,
 * mlsg-dr-shimmer, mlsg-sj-loading, mlsg-draw-loading, mlsg-ac-loading and
 * more, each invented for one screen. They looked different from each other,
 * and screens that waited on a slow lookup often had none at all — a blank
 * panel for a second or two, which reads as broken rather than busy.
 *
 * A skeleton rather than a spinner, deliberately. A spinner says "wait"; a
 * skeleton says "a table is coming and this is its shape", which makes the
 * wait feel shorter and stops the layout jumping when the content lands.
 *
 * USAGE
 *
 *   <div class="mlsg-sk mlsg-sk--line"></div>            one line of text
 *   <div class="mlsg-sk mlsg-sk--line mlsg-sk--w60"></div>  a short line
 *   <div class="mlsg-sk mlsg-sk--title"></div>           a heading
 *   <div class="mlsg-sk mlsg-sk--value"></div>           a big figure
 *   <div class="mlsg-sk mlsg-sk--thumb"></div>           a photo
 *   <div class="mlsg-sk-rows" data-rows="4"></div>       filled by JS
 *
 * Anything inside .mlsg-sk-block is removed once real content arrives.
 *
 * @package MLSGenie
 */

/* The sweep. Kept slow enough to read as "working", not as a strobe. */
@keyframes mlsg-sk-sweep {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

.mlsg-sk {
	background: linear-gradient(
		90deg,
		var(--mlsg-bg-subtle, #f1f5f9) 25%,
		var(--mlsg-border, #e2e8f0)    50%,
		var(--mlsg-bg-subtle, #f1f5f9) 75%
	);
	background-size: 1200px 100%;
	animation: mlsg-sk-sweep 1.4s ease-in-out infinite;
	border-radius: 6px;
	pointer-events: none;
	user-select: none;
}

/* Someone who finds motion difficult gets the shape without the sweep. */
@media ( prefers-reduced-motion: reduce ) {
	.mlsg-sk {
		animation: none;
		background: var(--mlsg-bg-subtle, #f1f5f9);
	}
}

/* ── Shapes ──────────────────────────────────────────────────────────────── */

.mlsg-sk--line  { height: 14px; margin: 8px 0; }
.mlsg-sk--title { height: 22px; margin: 0 0 14px; width: 45%; }
.mlsg-sk--value { height: 34px; margin: 0 0 8px; width: 38%; border-radius: 8px; }
.mlsg-sk--pill  { height: 26px; width: 92px; border-radius: 999px; display: inline-block; margin-right: 8px; }
.mlsg-sk--thumb { aspect-ratio: 4 / 3; width: 100%; border-radius: 10px; }
.mlsg-sk--map   { aspect-ratio: 16 / 9; width: 100%; border-radius: 10px; }
/* Content under a photo or map stands clear of it, as a card's text does. */
.mlsg-sk--thumb + .mlsg-sk,
.mlsg-sk--map + .mlsg-sk { margin-top: 14px; }

/* Widths, so a block of lines does not look like a solid slab. */
.mlsg-sk--w90 { width: 90%; }
.mlsg-sk--w75 { width: 75%; }
.mlsg-sk--w60 { width: 60%; }
.mlsg-sk--w40 { width: 40%; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.mlsg-sk-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mlsg-sk-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.mlsg-sk-row .mlsg-sk--line { flex: 1; margin: 0; }

/* A skeleton standing in for a card keeps the card's own padding and border,
   so nothing shifts sideways when the real content replaces it. */
.mlsg-sk-card {
	padding: 18px;
	background: var(--mlsg-bg-white, #fff);
	border: 1px solid var(--mlsg-border, #e2e8f0);
	border-radius: 12px;
}

/* ── Fading in ───────────────────────────────────────────────────────────── */

/* Real content arriving replaces the skeleton; a short fade stops that
   reading as a flicker. */
.mlsg-sk-in {
	animation: mlsg-sk-fade .18s ease-out;
}

@keyframes mlsg-sk-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mlsg-sk-in { animation: none; }
}

/* Screen readers should hear that something is loading, not read out the
   shapes — hence aria-hidden on the skeleton and a live region beside it. */
.mlsg-sk-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Shell navigation placeholder ───────────────────────────────────────
 * Shown in the CRM content area while a screen is being fetched, and only
 * after a short delay — a screen that answers quickly should simply appear
 * rather than flash a loading state on its way in.
 */

.mlsg-shell-loading {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}