/* =====================
   UTILITIES
   ===================== */

.u-flex {
    display: flex;
    align-items: center;
}

.u-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-flex-between-start {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.u-flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.u-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.u-flex-col {
    display: flex;
    flex-direction: column;
}

.u-flex-col-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.u-flex-end {
    display: flex;
    align-items: flex-end;
}

.u-flex-fill {
    flex: 1;
    min-width: 0;
}

.u-inline {
    display: inline-flex;
    align-items: center;
}

.u-inline-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Positioning ── */
.u-z-content {
    position: relative;
    z-index: var(--z-content);
}

.u-pointer-none {
    pointer-events: none;
}

.u-overflow-hidden {
    overflow: hidden;
}

.u-min-w-0 {
    min-width: 0;
}

/* ── Flex helpers ── */
.u-shrink-0 {
    flex-shrink: 0;
}

/* ── Typography ── */
.u-white {
    color: var(--white-color);
}

.u-muted {
    color: var(--mute);
}

.u-mono {
    font-family: var(--mono-font-family);
}

.u-text-center {
    text-align: center;
}

.u-nowrap {
    white-space: nowrap;
}

/* ── Compound typography ── */
.u-label {
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.u-meta-text {
    color: var(--mute);
    font-size: var(--font-size-sm);
    font-family: var(--mono-font-family);
    letter-spacing: var(--tracking-wide);
}

/* ── Border & radius ── */
.u-pill {
    border-radius: var(--radius-pill);
}

.u-border-line {
    border: var(--border-width) solid var(--line);
}

.u-border-strong {
    border: var(--border-width) solid var(--line-strong);
}

/* ── Interaction ── */
.u-pointer {
    cursor: pointer;
}

/* ── Accessibility ── */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}