.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-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-self-end { align-self: flex-end; }

.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-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-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }
.u-p-2 { padding: 2px; }
.u-p-2-8 { padding: 2px 8px; }
.u-p-20 { padding: 20px; }
.u-p-24 { padding: 24px; }
.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-8-12 { padding: 8px 12px; }
.u-pb-8 { padding-bottom: 8px; }

.u-h-18 { height: 18px; }
.u-h-38 { height: 38px; }
.u-maxw-260 { max-width: 260px; }
.u-maxw-380 { max-width: 380px; }
.u-maxw-400 { max-width: 400px; }
.u-mh-24 { min-height: 24px; }
.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-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-90 { width: 90px; }
.u-w-full { width: 100%; }

.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-20 { font-size: 20px; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-lh-14 { line-height: 1.4; }
.u-text-center { text-align: center; }
.u-tt-none { text-transform: none; }

.u-bg-error-container { background: var(--error-container); }
.u-bg-secondary-container { background: var(--secondary-container); }
.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-outline-variant { border: 1px solid var(--outline-variant); }
.u-radius { border-radius: var(--radius); }
.u-radius-sm { border-radius: var(--radius-sm); }
.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(--on-surface-variant, #4F654A); }
.u-text-primary { color: var(--primary); }
.u-text-success { color: var(--success); }
.u-text-warning { color: var(--warning); }

.u-opacity-80 { opacity: 0.8; }
.u-pointer { cursor: pointer; }
.u-wrap-anywhere { overflow-wrap: anywhere; }

.u-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--outline-variant);
}
.u-link:hover,
.u-link:focus-visible {
    border-bottom-color: var(--primary);
}

.app-footer {
    padding: 16px;
    text-align: center;
    font-size: 11px;
    /* --outline measures 4.09 to 1 on the page background, under the 4.5 that 11px text
       needs. --on-surface-variant measures 7.60 to 1 and reads almost the same. */
    color: var(--on-surface-variant);
    border-top: 1px solid var(--outline-variant);
}
.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-inline-block { display: inline-block; }
.u-gap-6 { gap: 6px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mt-20 { margin-top: 20px; }
.u-fs-14 { font-size: 14px; }
.u-fs-22 { font-size: 22px; }
.u-minw-200 { min-width: 200px; }
.u-maxw-600 { max-width: 600px; }

/* Present to a screen reader, absent to the eye. Used for the per view heading that gives
   the admin console a document outline without changing its look. */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}