/*!
 * SaaS Experience Bridge — Bố cục vùng kết quả: dải chỉ số và hai panel giữa
 *
 * Một phần của giao diện Experience. Thứ tự nạp do public/ui/manifest.php quy
 * định và là RÀNG BUỘC: nhiều quy tắc dựa vào việc file sau ghi đè file trước
 * ở cùng độ đặc hiệu. Đảo thứ tự là đổi giao diện.
 */

/* --------------------------------------------------------------------------
 * Result area — giữ chiều cao để không nhảy layout khi result xuất hiện
 * ----------------------------------------------------------------------- */

/*
 * Vùng kết quả sống trong popup, nên không còn phải giữ chỗ trong dòng chảy
 * trang: trang chỉ có ô nhập, và ô nhập không bao giờ bị đẩy đi đâu cả.
 */
.spe-result {
	min-height: 0;
}


.spe-card {
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-radius);
	box-shadow: var(--spe-shadow);
	padding: 1.25rem;
}

/* Trong popup, khung thẻ là chính popup — không lồng thêm một khung nữa. */
.spe-card--flat {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.spe-card--center {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 2.25rem 1.25rem;
	text-align: center;
}

.spe-card__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Bố cục kết quả — theo bản mẫu tĩnh trong thư mục SSPE
 *
 * Bản mẫu chạy ở 13px với viền 1px và bo 8px: đặc hơn giao diện mặc định của
 * plugin nhiều. Ở đây cỡ chữ được ghi thẳng (không dùng rem của trang) để mật
 * độ đó không đổi theo cỡ chữ gốc của theme.
 * ----------------------------------------------------------------------- */

.spe-modal {
	--spe-panel-radius: 8px;
	--spe-panel-shadow: 0 1px 2px rgba(21, 27, 38, 0.06);
	--spe-head-bg: color-mix(in oklab, var(--spe-surface) 88%, var(--spe-surface-2));
}

/* Đầu kết quả: câu trả lời bên trái, tình trạng quét bên phải. */
.spe-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: space-between;
	margin-bottom: 10px;
	/* Chỗ của nút đóng đang nổi ở góc — xem .spe-modal__head. */
	padding-inline-end: 44px;
}

.spe-head__text {
	min-width: 0;
}

.spe-head__title {
	color: var(--spe-ink);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	text-wrap: pretty;
}

.spe-head__q {
	color: var(--spe-accent-strong);
}

.spe-head__sub {
	color: var(--spe-ink-2);
	font-size: 12px;
	margin: 2px 0 0;
	text-wrap: pretty;
}

/* Viên nhãn "đang quét": chấm xanh + việc server đang làm. */
.spe-scan {
	align-items: center;
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: 6px;
	color: var(--spe-ink-2);
	display: inline-flex;
	flex: none;
	font-size: 11.5px;
	font-weight: 600;
	gap: 7px;
	padding: 5px 10px;
}

.spe-scan__dot {
	animation: spe-working 1.3s ease-in-out infinite;
	background: var(--spe-good);
	block-size: 6px;
	border-radius: 50%;
	inline-size: 6px;
}

/* --------------------------------------------------------------------------
 * Dải chỉ số
 * ----------------------------------------------------------------------- */

.spe-stats__grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 8px;
}

@container (max-width: 980px) {
	.spe-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 560px) {
	.spe-stats__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Chiều cao tối thiểu = ô cao nhất của dải (ô tồn kho: nhãn + vòng tròn 52px +
 * đệm). Ghi thành một con số ở đây để khung xương và bản thật không thể lệch
 * chiều cao — lệch là cả trang nhảy đúng lúc dữ liệu về.
 */
.spe-stat {
	min-block-size: 94px;
	background: var(--spe-surface);
	border: 1px solid var(--spe-border);
	border-radius: var(--spe-panel-radius);
	box-shadow: var(--spe-panel-shadow);
	display: grid;
	gap: 3px;
	justify-items: start;
	padding: 9px 12px;
}

.spe-stat__label {
	align-items: center;
	color: var(--spe-muted);
	display: flex;
	font-size: 11px;
	font-weight: 600;
	gap: 5px;
}

/* Dấu "i" của bản mẫu: giải thích nằm trong tooltip, không chiếm dòng. */
.spe-stat__info {
	align-items: center;
	block-size: 14px;
	border: 1px solid var(--spe-border-strong);
	border-radius: 50%;
	color: var(--spe-muted);
	cursor: help;
	display: inline-flex;
	flex: none;
	font-size: 9.5px;
	font-weight: 700;
	inline-size: 14px;
	justify-content: center;
}

.spe-stat__value {
	align-items: baseline;
	color: var(--spe-ink);
	display: flex;
	flex-wrap: wrap;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	gap: 4px;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.spe-stat__value--locked {
	align-items: center;
}

.spe-stat__dash,
.spe-stat__unit {
	color: var(--spe-ink-2);
	font-size: 11.5px;
	font-weight: 600;
}

.spe-stat__sub {
	color: var(--spe-ink-2);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/*
 * Liên kết mở khoá trong ô: chữ nhỏ, màu accent, có ổ khoá. Không phải nút thứ
 * hai — nó dẫn về đúng hành động của nút chính ở chân popup.
 */
.spe-unlock {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--spe-accent-strong);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	gap: 4px;
	margin-top: 1px;
	padding: 0;
}

.spe-unlock:hover:not( [disabled] ) {
	text-decoration: underline;
}

.spe-unlock:focus-visible {
	border-radius: 4px;
	box-shadow: var(--spe-ring);
	outline: none;
}

.spe-unlock[disabled] {
	cursor: not-allowed;
	opacity: 0.55;
}

.spe-unlock svg {
	block-size: 11px;
	flex: none;
	inline-size: 11px;
}

/* --------------------------------------------------------------------------
 * Hai panel giữa: gợi ý giá và chú giải thang giá
 * ----------------------------------------------------------------------- */

.spe-mid {
	align-items: start;
	display: grid;
	gap: 8px;
	grid-template-columns: 2.1fr 1fr;
	margin-bottom: 10px;
}

@container (max-width: 980px) {
	.spe-mid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.spe-card__headline {
	color: var(--spe-ink);
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: pretty;
}

.spe-badge {
	background: var(--spe-surface-2);
	border-radius: var(--spe-radius-pill);
	color: var(--spe-ink-2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.6rem;
	text-transform: uppercase;
}

.spe-badge--accent {
	background: var(--spe-accent-soft);
	color: var(--spe-accent-strong);
}

.spe-card__subject {
	color: var(--spe-ink);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.spe-card__trace {
	color: var(--spe-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
	margin-left: auto;
}

.spe-empty__text,
.spe-progress {
	color: var(--spe-muted);
	margin: 0;
}

.spe-progress {
	font-size: 0.875rem;
	margin-top: 0.75rem;
	text-align: center;
}

.spe-error__text {
	color: var(--spe-ink);
	font-weight: 600;
	margin: 0;
}

.spe-error__meta {
	color: var(--spe-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
	margin: 0;
}

.spe-icon--error {
	color: var(--spe-critical);
	display: inline-flex;
}

.spe-icon--error svg {
	height: 32px;
	width: 32px;
}