/**
 * UK Social Care Directory — Components
 * ----------------------------------------------------------------------------
 * Every component here is written ONCE and resolves through the semantic
 * tokens in tokens.css. Neither palette appears in this file — that is the
 * property that lets the same `.scd-card` render correctly on the dark front
 * end and inside light wp-admin with no duplication.
 *
 * If you need a hex value here, you need a token instead.
 *
 * Naming is BEM: .scd-block__element--modifier
 * State is a separate class: .is-active, .is-open, .is-loading, .is-disabled
 */

/* =====================================================================
 * CARD  — the most repeated pattern in the codebase
 * ===================================================================== */

.scd-card {
	background: var(--scd-surface-1);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-xl);
	padding: var(--scd-card-pad, var(--scd-space-6));
	box-shadow: var(--scd-shadow-2);
}

.scd-card--flush { --scd-card-pad: 0; overflow: hidden; }
.scd-card--tight { --scd-card-pad: var(--scd-space-4); }
.scd-card--roomy { --scd-card-pad: var(--scd-space-8); }
.scd-card--inset { background: var(--scd-surface-inset); box-shadow: none; }
.scd-card--plain { background: transparent; box-shadow: none; }
.scd-card--solid { background: var(--scd-surface-2); }

/* Interactive card (a listing that links somewhere). */
.scd-card--link {
	display: block;
	transition:
		transform var(--scd-dur-base) var(--scd-ease-out),
		border-color var(--scd-dur-base) var(--scd-ease-out),
		box-shadow var(--scd-dur-base) var(--scd-ease-out);
}

.scd-card--link:hover,
.scd-card--link:focus-within {
	transform: translateY(-3px);
	border-color: var(--scd-accent);
	box-shadow: var(--scd-shadow-3);
}

/* Accent rail along the top — the rating colour on directory listings. */
.scd-card--railed { border-top: 3px solid var(--scd-rail, var(--scd-accent)); }

.scd-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--scd-space-3);
	margin-bottom: var(--scd-space-4);
}

.scd-card__title {
	display: flex;
	align-items: center;
	gap: var(--scd-space-2);
	margin: 0;
	font-size: var(--scd-text-xl);
	font-weight: var(--scd-weight-semibold);
	color: var(--scd-text);
	line-height: var(--scd-leading-snug);
}

.scd-card__body > * + * { margin-top: var(--scd-space-4); }

.scd-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scd-space-3);
	margin-top: var(--scd-space-5);
	padding-top: var(--scd-space-4);
	border-top: 1px solid var(--scd-border-subtle);
}

/* =====================================================================
 * EYEBROW / FIELD LABEL — small uppercase caption
 * The single most repeated text treatment in the inline styles.
 * ===================================================================== */

.scd-eyebrow {
	display: block;
	margin-bottom: var(--scd-space-1);
	font-size: var(--scd-text-xs);
	font-weight: var(--scd-weight-semibold);
	line-height: var(--scd-leading-snug);
	color: var(--scd-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
}

.scd-eyebrow--micro { font-size: var(--scd-text-2xs); }
.scd-eyebrow--accent { color: var(--scd-accent-on-soft); }

/* =====================================================================
 * BUTTON
 * ===================================================================== */

.scd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--scd-space-2);
	min-height: var(--scd-tap);
	padding: var(--scd-space-3) var(--scd-space-5);
	border: 1px solid transparent;
	border-radius: var(--scd-radius-md);
	background: var(--scd-accent);
	color: var(--scd-accent-contrast);
	font-size: var(--scd-text-base);
	font-weight: var(--scd-weight-semibold);
	line-height: var(--scd-leading-none);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--scd-dur-fast) var(--scd-ease-out),
		border-color var(--scd-dur-fast) var(--scd-ease-out),
		transform var(--scd-dur-fast) var(--scd-ease-out),
		box-shadow var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-btn:hover {
	background: var(--scd-accent-hover);
	color: var(--scd-accent-contrast);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--scd-shadow-2);
}

.scd-btn:active { transform: translateY(0); box-shadow: none; }

.scd-btn:disabled,
.scd-btn.is-disabled,
.scd-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	pointer-events: none;
}

/* Variants */
.scd-btn--secondary {
	background: var(--scd-surface-2);
	border-color: var(--scd-border);
	color: var(--scd-text);
}
.scd-btn--secondary:hover {
	background: var(--scd-surface-2);
	border-color: var(--scd-accent);
	color: var(--scd-text);
}

.scd-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--scd-text-muted);
}
.scd-btn--ghost:hover {
	background: var(--scd-surface-2);
	color: var(--scd-text);
	box-shadow: none;
}

.scd-btn--outline {
	background: transparent;
	border-color: var(--scd-accent);
	color: var(--scd-accent-on-soft);
}
.scd-btn--outline:hover {
	background: var(--scd-accent-soft);
	color: var(--scd-accent-on-soft);
}

.scd-btn--danger { background: var(--scd-danger); }
.scd-btn--danger:hover { background: var(--scd-danger); filter: brightness(0.92); }

.scd-btn--success { background: var(--scd-success); }
.scd-btn--success:hover { background: var(--scd-success); filter: brightness(0.92); }

.scd-btn--gradient { background: var(--scd-accent-gradient); border: 0; }
.scd-btn--gradient:hover { background: var(--scd-accent-gradient); filter: brightness(1.08); }

/* Sizes */
.scd-btn--sm {
	min-height: 34px;
	padding: var(--scd-space-2) var(--scd-space-3);
	font-size: var(--scd-text-sm);
}
.scd-btn--lg {
	min-height: 52px;
	padding: var(--scd-space-4) var(--scd-space-8);
	font-size: var(--scd-text-lg);
}
.scd-btn--block { display: flex; width: 100%; }

/* Icon-only: keep the tap target square and label it with aria-label. */
.scd-btn--icon { padding: 0; width: var(--scd-tap); min-width: var(--scd-tap); }

/* =====================================================================
 * BADGE / PILL
 * ===================================================================== */

.scd-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-1);
	padding: var(--scd-space-1) var(--scd-space-2);
	border: 1px solid transparent;
	border-radius: var(--scd-radius-sm);
	background: var(--scd-accent-soft);
	color: var(--scd-accent-on-soft);
	font-size: var(--scd-text-2xs);
	font-weight: var(--scd-weight-bold);
	line-height: var(--scd-leading-snug);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
	white-space: nowrap;
}

.scd-badge--pill { border-radius: var(--scd-radius-pill); padding-inline: var(--scd-space-3); }
.scd-badge--lg { font-size: var(--scd-text-xs); padding: var(--scd-space-2) var(--scd-space-3); }
.scd-badge--plain { text-transform: none; letter-spacing: normal; font-weight: var(--scd-weight-semibold); }

.scd-badge--success { background: var(--scd-success-soft); color: var(--scd-success-on-soft); }
.scd-badge--warning { background: var(--scd-warning-soft); color: var(--scd-warning-on-soft); }
.scd-badge--danger  { background: var(--scd-danger-soft);  color: var(--scd-danger-on-soft); }
.scd-badge--info    { background: var(--scd-info-soft);    color: var(--scd-info-on-soft); }
.scd-badge--muted   { background: var(--scd-surface-2);    color: var(--scd-text-muted); }
.scd-badge--solid   { background: var(--scd-accent);       color: var(--scd-accent-contrast); }
.scd-badge--outline { background: transparent; border-color: var(--scd-border); color: var(--scd-text-muted); }

/* --- Inspection ratings ----------------------------------------------
 * Ofsted / CQC judgements. These four map onto the status tokens so they
 * theme correctly, and set --scd-rail so a card can pick up the same colour
 * on its top border via .scd-card--railed. */

.scd-rating { --scd-rail: var(--scd-text-subtle); }
.scd-rating--outstanding { --scd-rail: var(--scd-success); background: var(--scd-success-soft); color: var(--scd-success-on-soft); }
.scd-rating--good { --scd-rail: var(--scd-info); background: var(--scd-info-soft); color: var(--scd-info-on-soft); }
.scd-rating--requires-improvement { --scd-rail: var(--scd-warning); background: var(--scd-warning-soft); color: var(--scd-warning-on-soft); }
.scd-rating--inadequate { --scd-rail: var(--scd-danger); background: var(--scd-danger-soft); color: var(--scd-danger-on-soft); }
.scd-rating--unknown { background: var(--scd-surface-2); color: var(--scd-text-muted); }

/* =====================================================================
 * CHIP — removable applied-filter token
 * ===================================================================== */

.scd-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-2);
	padding: var(--scd-space-1) var(--scd-space-2) var(--scd-space-1) var(--scd-space-3);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-pill);
	background: var(--scd-surface-2);
	color: var(--scd-text-secondary);
	font-size: var(--scd-text-xs);
	font-weight: var(--scd-weight-medium);
	white-space: nowrap;
}

.scd-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--scd-radius-circle);
	background: var(--scd-surface-0);
	color: var(--scd-text-muted);
	font-size: var(--scd-text-2xs);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-chip__remove:hover { background: var(--scd-danger); color: var(--scd-accent-contrast); }

/* =====================================================================
 * TABS — the ONE implementation, replacing four divergent ones
 *
 * Contract (see assets/js/scd-tabs.js):
 *   .scd-tabs[data-scd-tabs]
 *     .scd-tabs__list[role=tablist]
 *       .scd-tabs__tab[role=tab][data-tab][aria-selected]
 *     .scd-tabs__panel[role=tabpanel][data-tab][hidden]
 *
 * Panels are toggled with the `hidden` ATTRIBUTE, never inline display, so
 * CSS retains full control and media queries still apply.
 * ===================================================================== */

.scd-tabs { display: block; }

.scd-tabs__list {
	display: flex;
	gap: var(--scd-space-2);
	margin-bottom: var(--scd-space-6);
	padding: var(--scd-space-1);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-inset);
	border: 1px solid var(--scd-border-subtle);

	/* Mobile: a snapping scroll strip. Above md this wraps instead — see the
	 * media query below. The 8-tab provision nav is the case this exists for;
	 * it currently has no mobile treatment at all. */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.scd-tabs__list::-webkit-scrollbar { display: none; }

.scd-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-2);
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-height: var(--scd-tap);
	padding: var(--scd-space-2) var(--scd-space-4);
	border: 0;
	border-radius: var(--scd-radius-md);
	background: transparent;
	color: var(--scd-text-muted);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
	line-height: var(--scd-leading-none);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--scd-dur-fast) var(--scd-ease-out),
		color var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-tabs__tab:hover { background: var(--scd-surface-2); color: var(--scd-text); text-decoration: none; }

.scd-tabs__tab[aria-selected="true"],
.scd-tabs__tab.is-active {
	background: var(--scd-accent);
	color: var(--scd-accent-contrast);
	box-shadow: var(--scd-shadow-1);
}

/* Server-rendered tabs that are real links (`<a href="?tab=x">`) rather than
 * JS-driven panels. Visually identical, deliberately NOT wired to the JS
 * component — conflating the two is the classic bug in this migration. */
.scd-tabs__tab--link { text-decoration: none; }

.scd-tabs__panel { animation: scd-fade-in var(--scd-dur-base) var(--scd-ease-out); }

/* Nested tab groups sit inside a panel and must look subordinate. */
.scd-tabs--nested .scd-tabs__list { background: transparent; border: 0; padding: 0; }
.scd-tabs--nested .scd-tabs__tab { font-size: var(--scd-text-xs); min-height: 36px; }

@media (min-width: 768px) {
	.scd-tabs__list { flex-wrap: wrap; overflow-x: visible; }
}

@keyframes scd-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* =====================================================================
 * INFO TABLE — label/value pairs on entity pages
 * Duplicated across all three single-* templates today.
 * ===================================================================== */

.scd-info-table { width: 100%; border-collapse: collapse; }

.scd-info-table th,
.scd-info-table td {
	padding: var(--scd-space-3) 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--scd-border-subtle);
}

.scd-info-table th {
	width: 40%;
	color: var(--scd-text-muted);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
}

.scd-info-table td { color: var(--scd-text-secondary); }
.scd-info-table tr:last-child th,
.scd-info-table tr:last-child td { border-bottom: 0; }

/* On a phone, a two-column label/value table is unreadable — stack it. */
@media (max-width: 599px) {
	.scd-info-table,
	.scd-info-table tbody,
	.scd-info-table tr,
	.scd-info-table th,
	.scd-info-table td { display: block; width: 100%; }

	.scd-info-table tr { padding: var(--scd-space-3) 0; border-bottom: 1px solid var(--scd-border-subtle); }
	.scd-info-table th { padding: 0 0 var(--scd-space-1); border: 0; font-size: var(--scd-text-xs); text-transform: uppercase; letter-spacing: var(--scd-tracking-wide); }
	.scd-info-table td { padding: 0; border: 0; }
}

/* =====================================================================
 * DATA TABLE — admin lists and comparison grids
 * ===================================================================== */

.scd-table { width: 100%; border-collapse: collapse; font-size: var(--scd-text-sm); }

.scd-table th,
.scd-table td {
	padding: var(--scd-space-3);
	text-align: left;
	border-bottom: 1px solid var(--scd-border-subtle);
}

.scd-table thead th {
	background: var(--scd-surface-2);
	color: var(--scd-text);
	font-weight: var(--scd-weight-semibold);
	font-size: var(--scd-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
	white-space: nowrap;
}

.scd-table tbody tr:hover { background: var(--scd-surface-2); }
.scd-table--fixed { table-layout: fixed; }

/* First column stays visible while the rest scrolls. Requires the table to
 * be inside .scd-sheet. */
.scd-table--sticky-col th:first-child,
.scd-table--sticky-col td:first-child {
	position: sticky;
	left: 0;
	background: var(--scd-surface-1);
	z-index: var(--scd-z-base);
}

/* =====================================================================
 * FORMS
 * ===================================================================== */

.scd-field { margin-bottom: var(--scd-space-5); }

.scd-field__label {
	display: block;
	margin-bottom: var(--scd-space-2);
	color: var(--scd-text-secondary);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
}

.scd-field__required { color: var(--scd-danger); margin-left: 2px; }

.scd-input,
.scd-select,
.scd-textarea {
	width: 100%;
	min-height: var(--scd-tap);
	padding: var(--scd-space-3);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-sm);
	background: var(--scd-surface-3);
	color: var(--scd-text);
	font-size: var(--scd-text-base);
	transition:
		border-color var(--scd-dur-fast) var(--scd-ease-out),
		box-shadow var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-input::placeholder,
.scd-textarea::placeholder { color: var(--scd-text-subtle); }

.scd-input:focus,
.scd-select:focus,
.scd-textarea:focus {
	border-color: var(--scd-accent);
	box-shadow: 0 0 0 3px var(--scd-accent-ring);
	outline: none;
}

.scd-input[readonly],
.scd-input:disabled,
.scd-select:disabled,
.scd-textarea:disabled {
	background: var(--scd-surface-2);
	color: var(--scd-text-muted);
	cursor: not-allowed;
}

.scd-input[aria-invalid="true"] { border-color: var(--scd-danger); }

/* Native select arrow is unstyleable across browsers; draw our own. The SVG
 * is inlined as a data URI so it needs no extra request and no colour token
 * (currentColor is not available in a background image). */
.scd-select {
	appearance: none;
	padding-right: var(--scd-space-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--scd-space-3) center;
	background-size: 12px 8px;
}

.scd-field__help { margin-top: var(--scd-space-1); font-size: var(--scd-text-xs); color: var(--scd-text-muted); }
.scd-field__error { margin-top: var(--scd-space-1); font-size: var(--scd-text-xs); color: var(--scd-danger-on-soft); }

/* Checkbox / radio row — the whole label is the tap target. */
.scd-check {
	display: flex;
	align-items: center;
	gap: var(--scd-space-2);
	min-height: var(--scd-tap);
	cursor: pointer;
}

.scd-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--scd-accent); cursor: pointer; }

/* =====================================================================
 * STAT TILE
 * ===================================================================== */

.scd-stat {
	display: flex;
	flex-direction: column;
	gap: var(--scd-space-1);
	padding: var(--scd-space-5);
	border: 1px solid var(--scd-border-subtle);
	border-radius: var(--scd-radius-lg);
	background: var(--scd-surface-inset);
}

.scd-stat__label {
	font-size: var(--scd-text-2xs);
	font-weight: var(--scd-weight-semibold);
	color: var(--scd-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
}

.scd-stat__value {
	font-size: var(--scd-text-3xl);
	font-weight: var(--scd-weight-bold);
	line-height: var(--scd-leading-none);
	color: var(--scd-text);
	/* Tabular figures stop the number jittering as it updates. */
	font-variant-numeric: tabular-nums;
}

.scd-stat__meta { font-size: var(--scd-text-xs); color: var(--scd-text-subtle); }
.scd-stat--accent { border-color: var(--scd-accent); background: var(--scd-accent-soft); }

/* =====================================================================
 * PROGRESS BAR
 * Driven by --scd-bar-pct, the one sanctioned inline-style escape hatch:
 *   <div class="scd-progress" style="--scd-bar-pct:62%">
 * ===================================================================== */

.scd-progress {
	overflow: hidden;
	height: var(--scd-progress-h, 8px);
	border-radius: var(--scd-radius-pill);
	background: var(--scd-surface-2);
}

.scd-progress__fill {
	width: var(--scd-bar-pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--scd-accent);
	transition: width var(--scd-dur-slow) var(--scd-ease-out);
}

.scd-progress--lg { --scd-progress-h: 24px; }
.scd-progress--success .scd-progress__fill { background: var(--scd-success); }
.scd-progress--warning .scd-progress__fill { background: var(--scd-warning); }
.scd-progress--danger .scd-progress__fill { background: var(--scd-danger); }

/* Indeterminate: a travelling sliver when there is no known percentage. */
.scd-progress.is-indeterminate .scd-progress__fill {
	width: 35%;
	animation: scd-indeterminate 1.4s var(--scd-ease-in-out) infinite;
}

@keyframes scd-indeterminate {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(320%); }
}

/* =====================================================================
 * TIMELINE
 * ===================================================================== */

.scd-timeline { list-style: none; margin: 0; padding: 0; }

.scd-timeline__item {
	position: relative;
	padding-left: var(--scd-space-5);
	padding-bottom: var(--scd-space-5);
	border-left: 2px solid var(--scd-border);
}

.scd-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.scd-timeline__item::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: var(--scd-radius-circle);
	background: var(--scd-accent);
	box-shadow: 0 0 0 3px var(--scd-surface-0);
}

.scd-timeline__date {
	display: block;
	font-size: var(--scd-text-xs);
	font-weight: var(--scd-weight-semibold);
	color: var(--scd-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
}

.scd-timeline__title { font-weight: var(--scd-weight-semibold); color: var(--scd-text); }
.scd-timeline__item--success::before { background: var(--scd-success); }
.scd-timeline__item--warning::before { background: var(--scd-warning); }
.scd-timeline__item--danger::before { background: var(--scd-danger); }

/* =====================================================================
 * NOTICE / ALERT
 * ===================================================================== */

.scd-notice {
	display: flex;
	gap: var(--scd-space-3);
	padding: var(--scd-space-4);
	border: 1px solid var(--scd-border);
	border-left: 3px solid var(--scd-accent);
	border-radius: var(--scd-radius-md);
	background: var(--scd-surface-2);
	color: var(--scd-text-secondary);
	font-size: var(--scd-text-sm);
}

.scd-notice__icon { flex: 0 0 auto; line-height: var(--scd-leading-snug); }
.scd-notice__body > * + * { margin-top: var(--scd-space-2); }
.scd-notice__title { font-weight: var(--scd-weight-semibold); color: var(--scd-text); }

.scd-notice--success { border-left-color: var(--scd-success); background: var(--scd-success-soft); }
.scd-notice--warning { border-left-color: var(--scd-warning); background: var(--scd-warning-soft); }
.scd-notice--danger  { border-left-color: var(--scd-danger);  background: var(--scd-danger-soft); }
.scd-notice--info    { border-left-color: var(--scd-info);    background: var(--scd-info-soft); }

/* =====================================================================
 * EMPTY STATE
 * ===================================================================== */

.scd-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--scd-space-3);
	padding: var(--scd-space-16) var(--scd-space-6);
	border: 1px dashed var(--scd-border);
	border-radius: var(--scd-radius-xl);
	text-align: center;
	color: var(--scd-text-muted);
}

.scd-empty__icon { font-size: var(--scd-text-4xl); opacity: 0.5; line-height: 1; }
.scd-empty__title { font-size: var(--scd-text-lg); font-weight: var(--scd-weight-semibold); color: var(--scd-text); }
.scd-empty__text { max-width: 46ch; font-size: var(--scd-text-sm); }

/* =====================================================================
 * SKELETON — loading placeholder
 * ===================================================================== */

.scd-skeleton {
	border-radius: var(--scd-radius-sm);
	background: var(--scd-skeleton);
	animation: scd-pulse 1.6s var(--scd-ease-in-out) infinite;
	/* Prevents a screen reader announcing placeholder geometry. */
	color: transparent;
	user-select: none;
}

.scd-skeleton--text { height: 1em; margin-bottom: var(--scd-space-2); }
.scd-skeleton--title { height: 1.6em; width: 55%; }

@keyframes scd-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* Spinner — replaces the ad-hoc @keyframes spin blocks. */
.scd-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid var(--scd-border);
	border-top-color: var(--scd-accent);
	border-radius: var(--scd-radius-circle);
	animation: scd-spin 0.7s linear infinite;
}

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

/* =====================================================================
 * MODAL
 * ===================================================================== */

.scd-modal {
	position: fixed;
	inset: 0;
	z-index: var(--scd-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--scd-space-4);
	background: var(--scd-overlay);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--scd-dur-base) var(--scd-ease-out),
		visibility var(--scd-dur-base);
}

.scd-modal.is-open { opacity: 1; visibility: visible; }

.scd-modal__dialog {
	width: 100%;
	max-width: var(--scd-modal-w, 900px);
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--scd-space-6);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-xl);
	background: var(--scd-surface-2);
	box-shadow: var(--scd-shadow-4);
	transform: translateY(12px) scale(0.98);
	transition: transform var(--scd-dur-base) var(--scd-ease-spring);
}

.scd-modal.is-open .scd-modal__dialog { transform: none; }

.scd-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--scd-space-4);
	margin-bottom: var(--scd-space-5);
}

.scd-modal__title { margin: 0; font-size: var(--scd-text-2xl); font-weight: var(--scd-weight-bold); }

/* Full-screen sheet on a phone — a centred dialog wastes the viewport. */
@media (max-width: 767px) {
	.scd-modal { padding: 0; align-items: stretch; }
	.scd-modal__dialog { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
}

/* =====================================================================
 * TRAY — bottom-anchored action bar (the compare tray)
 *
 * Animates with transform rather than `bottom`, so it composites on the GPU
 * and no magic offset value is needed.
 * ===================================================================== */

.scd-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--scd-z-overlay);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--scd-space-3);
	padding: var(--scd-space-4) var(--scd-gutter);
	padding-bottom: max(var(--scd-space-4), env(safe-area-inset-bottom));
	border-top: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-lg) var(--scd-radius-lg) 0 0;
	background: var(--scd-surface-2);
	box-shadow: var(--scd-shadow-4);
	transform: translateY(100%);
	transition: transform var(--scd-dur-base) var(--scd-ease-out);
}

.scd-tray.is-open { transform: none; }
.scd-tray__count { font-weight: var(--scd-weight-semibold); color: var(--scd-text); }

@media (min-width: 768px) {
	.scd-tray {
		left: 50%;
		right: auto;
		bottom: var(--scd-space-5);
		width: min(760px, calc(100% - var(--scd-space-10)));
		border-radius: var(--scd-radius-xl);
		border: 1px solid var(--scd-border);
		transform: translate(-50%, calc(100% + var(--scd-space-10)));
	}
	.scd-tray.is-open { transform: translate(-50%, 0); }
}

/* =====================================================================
 * PAGINATION
 * ===================================================================== */

.scd-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--scd-space-2);
	margin-top: var(--scd-space-10);
}

.scd-pagination a,
.scd-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--scd-tap);
	min-height: var(--scd-tap);
	padding: 0 var(--scd-space-3);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-md);
	background: var(--scd-surface-1);
	color: var(--scd-text-secondary);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
	text-decoration: none;
	transition: all var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-pagination a:hover { border-color: var(--scd-accent); color: var(--scd-text); text-decoration: none; }
.scd-pagination .current { background: var(--scd-accent); border-color: var(--scd-accent); color: var(--scd-accent-contrast); }
.scd-pagination .dots { border-color: transparent; background: transparent; }

/* =====================================================================
 * MAP
 * ===================================================================== */

.scd-map {
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 240px;
	max-height: 520px;
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-xl);
	overflow: hidden;
	background: var(--scd-surface-3);
}

@media (min-width: 768px) { .scd-map { aspect-ratio: 16 / 9; } }

/* Hint shown until the user clicks to enable scroll zoom. A full-bleed map
 * that swallows page scroll is a genuine mobile usability trap. */
.scd-map__hint {
	position: absolute;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scd-overlay);
	color: var(--scd-text);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--scd-dur-base) var(--scd-ease-out);
}

.scd-map.is-locked .scd-map__hint { opacity: 1; }

/* =====================================================================
 * DIVIDER / SECTION HEADING
 * ===================================================================== */

.scd-section { margin-bottom: var(--scd-space-10); }

.scd-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--scd-space-3);
	margin-bottom: var(--scd-space-5);
	padding-bottom: var(--scd-space-3);
	border-bottom: 1px solid var(--scd-border-subtle);
}

.scd-section__title { margin: 0; font-size: var(--scd-text-2xl); font-weight: var(--scd-weight-bold); }
.scd-section__meta { font-size: var(--scd-text-sm); color: var(--scd-text-muted); }