/* ============================================================
   UTILITY CLASSES
   The Content Security Policy forbids inline style attributes,
   so every one off layout tweak lives here as a named class.
   ============================================================ */

/* Layout */
.u-between { justify-content: space-between; }
.u-col { flex-direction: column; }
.u-flex { display: flex; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-grid { display: grid; }
.u-grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.u-grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.u-hidden { display: none; }
.u-inline-flex { display: inline-flex; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-self-end { align-self: flex-end; }

/* Spacing */
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-20 { gap: 20px; }
.u-gap-4 { gap: 4px; }
.u-gap-8 { gap: 8px; }
.u-m-0 { margin: 0; }
.u-m-24-0-8-0 { margin: 24px 0 8px 0; }
.u-mb-0 { margin-bottom: 0; }
.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-ml-4 { margin-left: 4px; }
.u-ml-6 { margin-left: 6px; }
.u-ml-auto { margin-left: auto; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-2 { margin-top: 2px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-8 { margin-top: 8px; }
.u-mx-auto { margin: 0 auto; }
.u-my-20 { margin: 20px 0; }
.u-p-10 { padding: 10px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-p-2 { padding: 2px; }
.u-p-2-6 { padding: 2px 6px; }
.u-p-2-8 { padding: 2px 8px; }
.u-p-20 { padding: 20px; }
.u-p-24 { padding: 24px; }
.u-p-4-10 { padding: 4px 10px; }
.u-p-4-6 { padding: 4px 6px; }
.u-p-4-8 { padding: 4px 8px; }
.u-p-6 { padding: 6px; }
.u-p-6-10 { padding: 6px 10px; }
.u-p-6-12 { padding: 6px 12px; }
.u-p-6-14 { padding: 6px 14px; }
.u-p-8-12 { padding: 8px 12px; }
.u-pb-8 { padding-bottom: 8px; }

/* Sizing */
.u-h-18 { height: 18px; }
.u-h-38 { height: 38px; }
.u-h-48 { height: 48px; }
.u-maxh-60vh { max-height: 60vh; }
.u-maxw-260 { max-width: 260px; }
.u-maxw-380 { max-width: 380px; }
.u-maxw-400 { max-width: 400px; }
.u-maxw-800 { max-width: 800px; }
.u-mh-24 { min-height: 24px; }
.u-mh-28 { min-height: 28px; }
.u-mh-32 { min-height: 32px; }
.u-mh-36 { min-height: 36px; }
.u-mh-40 { min-height: 40px; }
.u-minh-screen { min-height: 100vh; }
.u-minw-130 { min-width: 130px; }
.u-minw-140 { min-width: 140px; }
.u-minw-150 { min-width: 150px; }
.u-minw-160 { min-width: 160px; }
.u-minw-180 { min-width: 180px; }
.u-minw-220 { min-width: 220px; }
.u-w-120 { width: 120px; }
.u-w-18 { width: 18px; }
.u-w-48 { width: 48px; }
.u-w-64 { width: 64px; }
.u-w-90 { width: 90px; }
.u-w-full { width: 100%; }

/* Typography */
.u-fs-10 { font-size: 10px; }
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-15 { font-size: 15px; }
.u-fs-16 { font-size: 16px; }
.u-fs-18 { font-size: 18px; }
.u-fs-20 { font-size: 20px; }
.u-fs-24 { font-size: 24px; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-italic { font-style: italic; }
.u-lh-14 { line-height: 1.4; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-tt-none { text-transform: none; }

/* Colour and surface */
.u-bg-error-container { background: var(--error-container); }
.u-bg-secondary-container { background: var(--secondary-container); }
.u-bg-surface-container-high { background: var(--surface-container-high); }
.u-bg-surface-container-low { background: var(--surface-container-low); }
.u-bg-surface-container-lowest { background: var(--surface-container-lowest); }
.u-border-b-surface-container-high { border-bottom: 1px solid var(--surface-container-high); }
.u-border-color-outline-variant { border-color: var(--outline-variant); }
.u-border-outline-variant { border: 1px solid var(--outline-variant); }
.u-radius { border-radius: var(--radius); }
.u-radius-sm { border-radius: var(--radius-sm); }
.u-shadow-card { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.u-text-error { color: var(--error); }
.u-text-on-error-container { color: var(--on-error-container); }
.u-text-on-secondary-container { color: var(--on-secondary-container); }
.u-text-on-surface { color: var(--on-surface); }
.u-text-on-surface-variant { color: var(--on-surface-variant); }
.u-text-outline { color: var(--outline); }
.u-text-primary { color: var(--primary); }
.u-text-success { color: var(--success); }
.u-text-warning { color: var(--warning); }

/* Misc */
.u-opacity-80 { opacity: 0.8; }
.u-pointer { cursor: pointer; }
.u-scroll-y { overflow-y: auto; }
.u-wrap-anywhere { overflow-wrap: anywhere; }