/* ============================================================================
 * utilities.css — single-purpose classes on the token scales. Every other sheet puts
 * its rules in @layer app; these stay outside it, so a utility beats any normal rule
 * there whatever its specificity, the way the inline style it replaced did. Use them for one-off
 * layout and text tweaks in markup; anything a component or a page needs repeatedly
 * belongs in components.css or the page's sheet instead. No !important: a style a
 * script sets on an element (el.style.display = …) still wins.
 * ========================================================================== */

/* The hidden attribute wins over a class that sets display (the browser's own rule
   would lose to it); an inline display set by a script still wins over this. */
[hidden] { display: none; }

/* Values computed at run time: the markup passes them as a custom property
   (style="--u-color: …", the one inline style allowed) and these read it. */
.u-text-var { color: var(--u-color); }
.u-bg-var { background: var(--u-bg); }
.u-border-var { border-color: var(--u-border); }
.u-w-var { width: var(--u-w); }
.u-fs-var { font-size: var(--u-fs); }

/* Text colour */
.u-text-primary { color: var(--text-primary); }
.u-text-muted { color: var(--text-muted); }
.u-text-danger { color: var(--danger); }
.u-text-success { color: var(--success); }
.u-text-warning { color: var(--warning); }
.u-text-accent { color: var(--accent); }
.u-text-info { color: var(--accent-blue); }
.u-text-ltir { color: var(--ltir); }
.u-text-on-status { color: var(--on-status); }
.u-text-on-accent { color: var(--on-accent); }
.u-text-inherit { color: inherit; }

/* Background */
.u-bg-bg { background: var(--bg); }
.u-bg-surface { background: var(--surface); }
.u-bg-surface-head { background: var(--surface-head); }
.u-bg-tint-sm { background: var(--bg-translucent-sm); }
.u-bg-tint { background: var(--bg-translucent-md); }
.u-bg-tint-lg { background: var(--bg-translucent-lg); }
.u-bg-none { background: transparent; }
.u-bg-accent { background: var(--accent); }
.u-bg-danger { background: var(--danger); }
.u-bg-success { background: var(--success); }
.u-bg-warning { background: var(--warning); }
.u-bg-info { background: var(--accent-blue); }
/* Status tints: a status colour washed over the surface, and a matching soft border. */
.u-bg-tint-danger { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.u-border-tint-danger { border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.u-bg-tint-warning { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.u-border-tint-warning { border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.u-bg-tint-success { background: color-mix(in srgb, var(--success) 8%, transparent); }
.u-border-tint-success { border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.u-bg-tint-ltir { background: color-mix(in srgb, var(--ltir) 8%, transparent); }
.u-border-tint-ltir { border: 1px solid color-mix(in srgb, var(--ltir) 30%, transparent); }
.u-bg-tint-info { background: color-mix(in srgb, var(--accent-blue) 8%, transparent); }
.u-bg-tint-accent { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.u-bg-chip-sky { background: var(--chip-sky); }
.u-bg-chip-amber { background: var(--chip-amber); }
.u-bg-chip-teal { background: var(--chip-teal); }
.u-bg-chip-lilac { background: var(--chip-lilac); }
.u-bg-chip-periwinkle { background: var(--chip-periwinkle); }
.u-bg-chip-violet { background: var(--chip-violet); }
.u-bg-chip-purple { background: var(--chip-purple); }
.u-bg-chip-coral { background: var(--chip-coral); }
.u-bg-chip-red { background: var(--chip-red); }
.u-bg-chip-green { background: var(--chip-green); }
.u-bg-chip-emerald { background: var(--chip-emerald); }
.u-bg-chip-silver { background: var(--chip-silver); }
.u-bg-chip-slate { background: var(--chip-slate); }
.u-bg-chip-steel { background: var(--chip-steel); }
.u-bg-chip-cyan { background: var(--chip-cyan); }
.u-bg-chip-blue { background: var(--chip-blue); }
.u-bg-chip-yellow { background: var(--chip-yellow); }

/* Type */
.u-fs-micro { font-size: var(--fs-micro); }
.u-fs-xs { font-size: var(--fs-xs); }
.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-base { font-size: var(--fs-base); }
.u-fs-md { font-size: var(--fs-md); }
.u-fs-lg { font-size: var(--fs-lg); }
.u-fs-xl { font-size: var(--fs-xl); }
.u-fs-2xl { font-size: var(--fs-2xl); }
.u-fw-400 { font-weight: 400; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-fw-800 { font-weight: 800; }
.u-fw-900 { font-weight: 900; }
.u-uppercase { text-transform: uppercase; }
.u-tracking-tight { letter-spacing: var(--tracking-tight); }
.u-tracking-wide { letter-spacing: var(--tracking-wide); }
.u-tracking-caps { letter-spacing: var(--tracking-caps); }
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-mono { font-family: var(--font-mono); }
.u-font { font-family: var(--font); }
.u-italic { font-style: italic; }
.u-pre-wrap { white-space: pre-wrap; }
.u-ellipsis { text-overflow: ellipsis; }
.u-line-through { text-decoration: line-through; }
.u-leading-tight { line-height: 1.2; }
.u-leading-normal { line-height: 1.5; }
.u-leading-relaxed { line-height: 1.6; }
.u-no-underline { text-decoration: none; }
.u-align-middle { vertical-align: middle; }

/* Layout */
.u-block { display: block; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }
.u-col { flex-direction: column; }
.u-wrap { flex-wrap: wrap; }
.u-items-start { align-items: flex-start; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-items-baseline { align-items: baseline; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-around { justify-content: space-around; }
.u-self-start { align-self: flex-start; }
.u-flex-1 { flex: 1 1 0%; }
.u-flex-none { flex: none; }
.u-shrink-0 { flex-shrink: 0; }
.u-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-gap-0 { gap: 0; }
.u-gap-2 { gap: 2px; }
.u-gap-4 { gap: 4px; }
.u-gap-6 { gap: 6px; }
.u-gap-8 { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-20 { gap: 20px; }
.u-gap-24 { gap: 24px; }
.u-gap-32 { gap: 32px; }

/* Sizing and position */
.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-h-auto { height: auto; }
.u-min-h-screen { min-height: 100vh; }
.u-min-w-0 { min-width: 0; }
.u-h-12 { height: 12px; }
.u-w-16 { width: 16px; }
.u-h-16 { height: 16px; }
.u-w-20 { width: 20px; }
.u-h-20 { height: 20px; }
.u-w-24 { width: 24px; }
.u-h-24 { height: 24px; }
.u-h-28 { height: 28px; }
.u-w-32 { width: 32px; }
.u-object-contain { object-fit: contain; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-static { position: static; }
.u-inset-0 { inset: 0; }
.u-top-0 { top: 0; }
.u-left-0 { left: 0; }
.u-scroll { overflow: auto; }
.u-scroll-x { overflow-x: auto; }
.u-scroll-y { overflow-y: auto; }
.u-clip { overflow: hidden; }
.u-pointer { cursor: pointer; }
.u-select-none { user-select: none; }
.u-faint { opacity: 0.3; }
.u-dim { opacity: 0.5; }
.u-soft { opacity: 0.8; }
.u-not-allowed { cursor: not-allowed; }
.u-accent { accent-color: var(--accent); }
.u-resize-none { resize: none; }
.u-resize-y { resize: vertical; }
.u-collapse { border-collapse: collapse; }
.u-transition { transition: var(--transition); }

/* Borders */
.u-border { border: 1px solid var(--panel-border); }
.u-border-0 { border: 0; }
.u-border-t { border-top: 1px solid var(--panel-border); }
.u-border-b { border-bottom: 1px solid var(--panel-border); }
.u-border-l { border-left: 1px solid var(--panel-border); }
.u-border-b-0 { border-bottom: 0; }
.u-border-current { border-color: currentColor; }
.u-border-danger { border-color: var(--danger); }
.u-border-success { border-color: var(--success); }
.u-border-warning { border-color: var(--warning); }
.u-border-accent { border-color: var(--accent); }
.u-border-info { border-color: var(--accent-blue); }
.u-border-ltir { border-color: var(--ltir); }
.u-stripe-t-accent { border-top: 3px solid var(--accent); }
.u-stripe-b-accent { border-bottom: 3px solid var(--accent); }
.u-stripe-t-info { border-top: 3px solid var(--accent-blue); }
.u-stripe-b-info { border-bottom: 3px solid var(--accent-blue); }
.u-stripe-t-danger { border-top: 3px solid var(--danger); }
.u-stripe-b-danger { border-bottom: 3px solid var(--danger); }
.u-stripe-t-warning { border-top: 3px solid var(--warning); }
.u-stripe-t-ltir { border-top: 3px solid var(--ltir); }
.u-stripe-t-surface { border-top: 3px solid var(--surface); }
.u-stripe-b-surface { border-bottom: 3px solid var(--surface); }
.u-rounded-sm { border-radius: var(--radius-sm); }
.u-rounded-md { border-radius: var(--radius-md); }
.u-rounded-lg { border-radius: var(--radius-lg); }

/* Spacing (4px grid). Shorthands first, so a side (u-pt-8) wins over its shorthand (u-p-16). */
.u-m-0 { margin: 0; }
.u-mx-0 { margin-left: 0; margin-right: 0; }
.u-my-0 { margin-top: 0; margin-bottom: 0; }
.u-my-32 { margin-top: 32px; margin-bottom: 32px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: 2px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-48 { margin-top: 48px; }
.u-mt-64 { margin-top: 64px; }
.u-mr-0 { margin-right: 0; }
.u-mr-4 { margin-right: 4px; }
.u-mr-6 { margin-right: 6px; }
.u-mr-8 { margin-right: 8px; }
.u-mr-32 { margin-right: 32px; }
.u-mr-auto { margin-right: auto; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: 2px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-32 { margin-bottom: 32px; }
.u-mb-40 { margin-bottom: 40px; }
.u-ml-0 { margin-left: 0; }
.u-ml-6 { margin-left: 6px; }
.u-ml-8 { margin-left: 8px; }
.u-ml-12 { margin-left: 12px; }
.u-ml-auto { margin-left: auto; }
.u-p-0 { padding: 0; }
.u-p-6 { padding: 6px; }
.u-p-8 { padding: 8px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-p-20 { padding: 20px; }
.u-p-24 { padding: 24px; }
.u-p-32 { padding: 32px; }
.u-p-40 { padding: 40px; }
.u-p-48 { padding: 48px; }
.u-p-64 { padding: 64px; }
.u-px-0 { padding-left: 0; padding-right: 0; }
.u-py-0 { padding-top: 0; padding-bottom: 0; }
.u-py-2 { padding-top: 2px; padding-bottom: 2px; }
.u-px-4 { padding-left: 4px; padding-right: 4px; }
.u-py-4 { padding-top: 4px; padding-bottom: 4px; }
.u-px-6 { padding-left: 6px; padding-right: 6px; }
.u-py-6 { padding-top: 6px; padding-bottom: 6px; }
.u-px-8 { padding-left: 8px; padding-right: 8px; }
.u-py-8 { padding-top: 8px; padding-bottom: 8px; }
.u-px-12 { padding-left: 12px; padding-right: 12px; }
.u-py-12 { padding-top: 12px; padding-bottom: 12px; }
.u-px-16 { padding-left: 16px; padding-right: 16px; }
.u-py-16 { padding-top: 16px; padding-bottom: 16px; }
.u-px-20 { padding-left: 20px; padding-right: 20px; }
.u-py-20 { padding-top: 20px; padding-bottom: 20px; }
.u-px-24 { padding-left: 24px; padding-right: 24px; }
.u-py-24 { padding-top: 24px; padding-bottom: 24px; }
.u-px-32 { padding-left: 32px; padding-right: 32px; }
.u-py-32 { padding-top: 32px; padding-bottom: 32px; }
.u-py-40 { padding-top: 40px; padding-bottom: 40px; }
.u-py-64 { padding-top: 64px; padding-bottom: 64px; }
.u-pt-0 { padding-top: 0; }
.u-pt-4 { padding-top: 4px; }
.u-pt-6 { padding-top: 6px; }
.u-pt-12 { padding-top: 12px; }
.u-pt-16 { padding-top: 16px; }
.u-pt-20 { padding-top: 20px; }
.u-pr-16 { padding-right: 16px; }
.u-pr-20 { padding-right: 20px; }
.u-pr-24 { padding-right: 24px; }
.u-pb-0 { padding-bottom: 0; }
.u-pb-4 { padding-bottom: 4px; }
.u-pb-12 { padding-bottom: 12px; }
.u-pb-16 { padding-bottom: 16px; }
.u-pb-24 { padding-bottom: 24px; }
.u-pl-16 { padding-left: 16px; }
.u-pl-20 { padding-left: 20px; }
.u-pl-24 { padding-left: 24px; }