/**
 * Shared utilities (REU-01) and empty state (REU-02): stack layout, muted text, hint, truncation, empty-state panel.
 */

.dc-stack {
    display: flex;
    flex-direction: column;
}

.dc-stack--gap-2 {
    gap: var(--dc-space-2);
}

.dc-stack--gap-3 {
    gap: var(--dc-space-3);
}

.dc-stack--gap-4 {
    gap: var(--dc-space-4);
}

.dc-stack--gap-5 {
    gap: var(--dc-space-5);
}

.dc-stack--gap-6 {
    gap: var(--dc-space-6);
}

/* Secondary paragraph text (body size, muted colour, no margin). */
.dc-text-muted {
    margin: 0;
    font-size: var(--dc-size-body);
    line-height: var(--dc-lh-body);
    color: var(--dc-gris);
}

/* Small supporting text under a control or figure. */
.dc-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dc-gris);
}

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

/*
 * Visually hidden form control (native select behind a custom select, switch checkbox).
 * Not `.screen-reader-text`: Blocksy reveals `.screen-reader-text:focus` as a skip-link box.
 */
.dc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Empty state (REU-02): centred column with symbol, title, text. Pages add spacing and size overrides. */
.dc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dc-space-3);
    text-align: center;
}

/* Bordered inset panel (my account lists). */
.dc-empty-state--inset {
    padding: 3.5rem var(--dc-space-6);
    border: var(--dc-border-width) solid var(--dc-ceniza);
    border-radius: var(--dc-radius-card);
}

.dc-empty-state__symbol {
    display: block;
    flex: 0 0 auto;
}

.dc-empty-state__title {
    margin: 0;
    font-family: var(--dc-font-display);
    font-weight: var(--dc-weight-bold);
    font-size: var(--dc-size-h3);
    color: var(--dc-tinta);
}

.dc-empty-state__text {
    margin: 0;
    font-size: var(--dc-size-body-s);
    line-height: 1.5;
    color: var(--dc-gris);
}