/*
 * Utilities (U Layer)
 *
 * Single-purpose classes that do one thing well.
 * Expand demand-driven — only add utilities that are actually used.
 */

/* -------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------- */

.text-base {
    font-size: var(--step-0);
}

.text-sm {
    font-size: var(--step--1);
}

.text-xs {
    font-size: var(--step--2);
}

.text-lg {
    font-size: var(--step-2);
}

.text-xl {
    font-size: var(--step-3);
}

.font-bold {
    font-weight: 700;
}

.font-normal {
    font-weight: 400;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------
 * Color
 * ------------------------------------------------------------------- */

.color-muted {
    color: var(--color-text-muted);
}

.color-primary {
    color: var(--color-primary-fill-vivid);
}

.color-danger {
    color: var(--color-danger-fill-vivid);
}

/* -------------------------------------------------------------------
 * Spacing
 * ------------------------------------------------------------------- */

.pb-xs {
    padding-block-end: var(--space-xs);
}

/* -------------------------------------------------------------------
 * Borders
 * ------------------------------------------------------------------- */

.border-bottom-muted {
    border-bottom: var(--border-thin) solid var(--color-border-muted);
}

/* -------------------------------------------------------------------
 * Alignment
 * ------------------------------------------------------------------- */

.text-end {
    text-align: end;
}

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

.spread {
    justify-content: space-between;
}

.grow {
    flex: 1;
}

.measure-form {
    max-inline-size: var(--measure-form);
}

/* -------------------------------------------------------------------
 * Additional colors
 * ------------------------------------------------------------------- */

.color-warning {
    color: var(--color-warning-fill-vivid);
}

.color-success {
    color: var(--color-success-fill-vivid);
}

/* -------------------------------------------------------------------
 * Form layout
 * ------------------------------------------------------------------- */

.filter-field {
    flex: 1;
    min-width: 10rem;
}

.filter-actions {
    padding-top: 1.4em;
    align-self: flex-end;
}

.filter-actions button {
    padding-block: var(--space-xs);
}

.inline-form label {
    display: inline;
}

.inline-form select {
    width: auto;
}

/* -------------------------------------------------------------------
 * Interaction
 * ------------------------------------------------------------------- */

.user-select-all {
    user-select: all;
}

.break-all {
    word-break: break-all;
}

/* -------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------- */

.display-contents {
    display: contents;
}

.col-fit {
    inline-size: 1%;
    white-space: nowrap;
}

/*
 * Allow horizontal scroll
 *
 * Opt-in container for content that is wider than its parent (wide tables,
 * long code blocks, etc.). The negative margin / positive padding pair
 * reserves room for focus outlines on inner elements so they are not
 * clipped at the scroll edges.
 */
.scroll-horizontal {
    --buffer: calc(var(--focus-ring-offset) + var(--focus-ring-width));
    display: block;
    overflow-x: auto;

    /* Prevent focus outlines from getting clipped */
    margin-inline: calc(-1 * var(--buffer));
    padding-inline: var(--buffer);
}

/* -------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------- */

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}