/**
 * UK Social Care Directory — Utilities
 * ----------------------------------------------------------------------------
 * The inline-style killer.
 *
 * The audit found 7,776 CSS declarations spread across 1,920 inline `style`
 * attributes — but only 953 DISTINCT declarations across 90 properties, and
 * the top 200 declarations account for 82% of every instance. That is the
 * whole reason this approach works: the design surface is small, it is just
 * applied by hand thousands of times.
 *
 * These classes cover that top slice. Anything they do not cover is either a
 * component (>=3 uses -> components.css) or a genuine one-off (-> a page
 * stylesheet). Do not add a utility for something used once.
 *
 * Prefix is `scd-u-` so a utility is never mistaken for a component.
 *
 * THE ONE SANCTIONED INLINE STYLE: dynamic numeric values passed as custom
 * properties, e.g. style="--scd-bar-pct:62%". Everything else in the rule
 * still comes from a class, so media queries retain control.
 */

/* =====================================================================
 * DISPLAY
 * ===================================================================== */

.scd-u-block { display: block; }
.scd-u-inline-block { display: inline-block; }
.scd-u-inline { display: inline; }
.scd-u-flex { display: flex; }
.scd-u-inline-flex { display: inline-flex; }
.scd-u-grid { display: grid; }
.scd-u-hidden { display: none; }
.scd-u-contents { display: contents; }

/* =====================================================================
 * FLEX / GRID ALIGNMENT
 * ===================================================================== */

.scd-u-row { flex-direction: row; }
.scd-u-col { flex-direction: column; }
.scd-u-wrap { flex-wrap: wrap; }
.scd-u-nowrap { flex-wrap: nowrap; }

.scd-u-items-start { align-items: flex-start; }
.scd-u-items-center { align-items: center; }
.scd-u-items-end { align-items: flex-end; }
.scd-u-items-baseline { align-items: baseline; }
.scd-u-items-stretch { align-items: stretch; }

.scd-u-justify-start { justify-content: flex-start; }
.scd-u-justify-center { justify-content: center; }
.scd-u-justify-end { justify-content: flex-end; }
.scd-u-justify-between { justify-content: space-between; }
.scd-u-justify-around { justify-content: space-around; }

.scd-u-self-start { align-self: flex-start; }
.scd-u-self-center { align-self: center; }
.scd-u-self-end { align-self: flex-end; }

.scd-u-grow { flex: 1 1 auto; }
.scd-u-grow-0 { flex: 0 0 auto; }
.scd-u-shrink-0 { flex-shrink: 0; }

/* `min-width:0` on a flex child is the fix for "long text refuses to wrap
 * and blows out the row" — flex items default to min-width:auto. */
.scd-u-min-0 { min-width: 0; }

/* =====================================================================
 * GAP
 * ===================================================================== */

.scd-u-gap-0 { gap: 0; }
.scd-u-gap-1 { gap: var(--scd-space-1); }
.scd-u-gap-2 { gap: var(--scd-space-2); }
.scd-u-gap-3 { gap: var(--scd-space-3); }
.scd-u-gap-4 { gap: var(--scd-space-4); }
.scd-u-gap-5 { gap: var(--scd-space-5); }
.scd-u-gap-6 { gap: var(--scd-space-6); }
.scd-u-gap-8 { gap: var(--scd-space-8); }

/* =====================================================================
 * MARGIN  (m / mt / mb / ml / mr / mx / my)
 * ===================================================================== */

.scd-u-m-0 { margin: 0; }
.scd-u-m-auto { margin: auto; }
.scd-u-mx-auto { margin-inline: auto; }

.scd-u-mt-0 { margin-top: 0; }
.scd-u-mt-1 { margin-top: var(--scd-space-1); }
.scd-u-mt-2 { margin-top: var(--scd-space-2); }
.scd-u-mt-3 { margin-top: var(--scd-space-3); }
.scd-u-mt-4 { margin-top: var(--scd-space-4); }
.scd-u-mt-5 { margin-top: var(--scd-space-5); }
.scd-u-mt-6 { margin-top: var(--scd-space-6); }
.scd-u-mt-8 { margin-top: var(--scd-space-8); }
.scd-u-mt-10 { margin-top: var(--scd-space-10); }

.scd-u-mb-0 { margin-bottom: 0; }
.scd-u-mb-1 { margin-bottom: var(--scd-space-1); }
.scd-u-mb-2 { margin-bottom: var(--scd-space-2); }
.scd-u-mb-3 { margin-bottom: var(--scd-space-3); }
.scd-u-mb-4 { margin-bottom: var(--scd-space-4); }
.scd-u-mb-5 { margin-bottom: var(--scd-space-5); }
.scd-u-mb-6 { margin-bottom: var(--scd-space-6); }
.scd-u-mb-8 { margin-bottom: var(--scd-space-8); }
.scd-u-mb-10 { margin-bottom: var(--scd-space-10); }

.scd-u-my-0 { margin-block: 0; }
.scd-u-my-4 { margin-block: var(--scd-space-4); }
.scd-u-my-6 { margin-block: var(--scd-space-6); }

/* =====================================================================
 * PADDING
 * ===================================================================== */

.scd-u-p-0 { padding: 0; }
.scd-u-p-1 { padding: var(--scd-space-1); }
.scd-u-p-2 { padding: var(--scd-space-2); }
.scd-u-p-3 { padding: var(--scd-space-3); }
.scd-u-p-4 { padding: var(--scd-space-4); }
.scd-u-p-5 { padding: var(--scd-space-5); }
.scd-u-p-6 { padding: var(--scd-space-6); }
.scd-u-p-8 { padding: var(--scd-space-8); }

.scd-u-px-3 { padding-inline: var(--scd-space-3); }
.scd-u-px-4 { padding-inline: var(--scd-space-4); }
.scd-u-px-5 { padding-inline: var(--scd-space-5); }
.scd-u-px-6 { padding-inline: var(--scd-space-6); }

.scd-u-py-1 { padding-block: var(--scd-space-1); }
.scd-u-py-2 { padding-block: var(--scd-space-2); }
.scd-u-py-3 { padding-block: var(--scd-space-3); }
.scd-u-py-4 { padding-block: var(--scd-space-4); }
.scd-u-py-6 { padding-block: var(--scd-space-6); }

.scd-u-pt-0 { padding-top: 0; }
.scd-u-pt-4 { padding-top: var(--scd-space-4); }
.scd-u-pb-0 { padding-bottom: 0; }
.scd-u-pb-4 { padding-bottom: var(--scd-space-4); }

/* =====================================================================
 * TYPOGRAPHY
 * ===================================================================== */

.scd-u-text-2xs { font-size: var(--scd-text-2xs); }
.scd-u-text-xs { font-size: var(--scd-text-xs); }
.scd-u-text-sm { font-size: var(--scd-text-sm); }
.scd-u-text-base { font-size: var(--scd-text-base); }
.scd-u-text-md { font-size: var(--scd-text-md); }
.scd-u-text-lg { font-size: var(--scd-text-lg); }
.scd-u-text-xl { font-size: var(--scd-text-xl); }
.scd-u-text-2xl { font-size: var(--scd-text-2xl); }
.scd-u-text-3xl { font-size: var(--scd-text-3xl); }
.scd-u-text-4xl { font-size: var(--scd-text-4xl); }

.scd-u-font-normal { font-weight: var(--scd-weight-normal); }
.scd-u-font-medium { font-weight: var(--scd-weight-medium); }
.scd-u-font-semibold { font-weight: var(--scd-weight-semibold); }
.scd-u-font-bold { font-weight: var(--scd-weight-bold); }

.scd-u-left { text-align: left; }
.scd-u-center { text-align: center; }
.scd-u-right { text-align: right; }

.scd-u-uppercase { text-transform: uppercase; letter-spacing: var(--scd-tracking-wide); }
.scd-u-capitalize { text-transform: capitalize; }
.scd-u-italic { font-style: italic; }
.scd-u-no-underline { text-decoration: none; }
.scd-u-underline { text-decoration: underline; }
.scd-u-strike { text-decoration: line-through; }

.scd-u-leading-none { line-height: var(--scd-leading-none); }
.scd-u-leading-tight { line-height: var(--scd-leading-tight); }
.scd-u-leading-snug { line-height: var(--scd-leading-snug); }
.scd-u-leading-normal { line-height: var(--scd-leading-normal); }
.scd-u-leading-relaxed { line-height: var(--scd-leading-relaxed); }

.scd-u-mono { font-family: var(--scd-font-mono); }
.scd-u-nums { font-variant-numeric: tabular-nums; }

/* Truncation. `scd-u-clamp-N` needs -webkit-box, which is still the only
 * cross-browser multi-line clamp. */
.scd-u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scd-u-clamp-2,
.scd-u-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.scd-u-clamp-2 { -webkit-line-clamp: 2; }
.scd-u-clamp-3 { -webkit-line-clamp: 3; }

/* Force wrapping of unbroken strings — URNs, CRNs, long URLs. */
.scd-u-break { overflow-wrap: anywhere; word-break: break-word; }

/* Readable measure. Long lines are the most common text-legibility fault. */
.scd-u-measure { max-width: 68ch; }
.scd-u-measure-narrow { max-width: 46ch; }

/* =====================================================================
 * COLOUR  (semantic only — no raw values)
 * ===================================================================== */

.scd-u-fg { color: var(--scd-text); }
.scd-u-fg-secondary { color: var(--scd-text-secondary); }
.scd-u-fg-muted { color: var(--scd-text-muted); }
.scd-u-fg-subtle { color: var(--scd-text-subtle); }
.scd-u-fg-accent { color: var(--scd-accent-on-soft); }
.scd-u-fg-success { color: var(--scd-success-on-soft); }
.scd-u-fg-warning { color: var(--scd-warning-on-soft); }
.scd-u-fg-danger { color: var(--scd-danger-on-soft); }
.scd-u-fg-info { color: var(--scd-info-on-soft); }
.scd-u-fg-invert { color: var(--scd-text-invert); }
.scd-u-fg-inherit { color: inherit; }

.scd-u-bg-0 { background: var(--scd-surface-0); }
.scd-u-bg-1 { background: var(--scd-surface-1); }
.scd-u-bg-2 { background: var(--scd-surface-2); }
.scd-u-bg-3 { background: var(--scd-surface-3); }
.scd-u-bg-inset { background: var(--scd-surface-inset); }
.scd-u-bg-none { background: none; }
.scd-u-bg-accent-soft { background: var(--scd-accent-soft); }
.scd-u-bg-success-soft { background: var(--scd-success-soft); }
.scd-u-bg-warning-soft { background: var(--scd-warning-soft); }
.scd-u-bg-danger-soft { background: var(--scd-danger-soft); }

/* =====================================================================
 * BORDER / RADIUS / SHADOW
 * ===================================================================== */

.scd-u-border { border: 1px solid var(--scd-border); }
.scd-u-border-subtle { border: 1px solid var(--scd-border-subtle); }
.scd-u-border-0 { border: 0; }
.scd-u-border-t { border-top: 1px solid var(--scd-border-subtle); }
.scd-u-border-b { border-bottom: 1px solid var(--scd-border-subtle); }
.scd-u-border-l { border-left: 1px solid var(--scd-border-subtle); }

.scd-u-rounded-0 { border-radius: 0; }
.scd-u-rounded-xs { border-radius: var(--scd-radius-xs); }
.scd-u-rounded-sm { border-radius: var(--scd-radius-sm); }
.scd-u-rounded-md { border-radius: var(--scd-radius-md); }
.scd-u-rounded-lg { border-radius: var(--scd-radius-lg); }
.scd-u-rounded-xl { border-radius: var(--scd-radius-xl); }
.scd-u-rounded-2xl { border-radius: var(--scd-radius-2xl); }
.scd-u-rounded-pill { border-radius: var(--scd-radius-pill); }
.scd-u-rounded-circle { border-radius: var(--scd-radius-circle); }

.scd-u-shadow-0 { box-shadow: none; }
.scd-u-shadow-1 { box-shadow: var(--scd-shadow-1); }
.scd-u-shadow-2 { box-shadow: var(--scd-shadow-2); }
.scd-u-shadow-3 { box-shadow: var(--scd-shadow-3); }

/* =====================================================================
 * SIZING
 * ===================================================================== */

.scd-u-w-full { width: 100%; }
.scd-u-w-auto { width: auto; }
.scd-u-w-fit { width: fit-content; }
.scd-u-h-full { height: 100%; }
.scd-u-h-auto { height: auto; }
.scd-u-square { aspect-ratio: 1; }

.scd-u-max-full { max-width: 100%; }
.scd-u-max-sm { max-width: 480px; }
.scd-u-max-md { max-width: 760px; }
.scd-u-max-lg { max-width: 1000px; }

/* =====================================================================
 * POSITION / OVERFLOW
 * ===================================================================== */

.scd-u-relative { position: relative; }
.scd-u-absolute { position: absolute; }
.scd-u-static { position: static; }
.scd-u-inset-0 { inset: 0; }

.scd-u-overflow-hidden { overflow: hidden; }
.scd-u-overflow-auto { overflow: auto; -webkit-overflow-scrolling: touch; }
.scd-u-overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
 * INTERACTION
 * ===================================================================== */

.scd-u-pointer { cursor: pointer; }
.scd-u-not-allowed { cursor: not-allowed; }
.scd-u-select-none { user-select: none; }
.scd-u-no-events { pointer-events: none; }

.scd-u-op-50 { opacity: 0.5; }
.scd-u-op-70 { opacity: 0.7; }

/* =====================================================================
 * RESPONSIVE VISIBILITY
 * Only two, deliberately. Duplicating content to show/hide per breakpoint
 * is a maintenance trap — prefer one element that reflows.
 * ===================================================================== */

@media (max-width: 767px) { .scd-u-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .scd-u-hide-desktop { display: none !important; } }

/* =====================================================================
 * PRINT
 * ===================================================================== */

@media print {
	.scd-u-no-print { display: none !important; }
}