/*
 * Empty & error states (WP9; UI-Design-Principles Sec. 6). Empty: line icon + one
 * sentence + one action. Error: what happened + what to do — never a bare "error".
 *
 * Class schema: gtx-state, gtx-state--error, gtx-state__icon, gtx-state__title,
 * gtx-state__text, gtx-state__action.
 */

.gtx-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s7) var(--gtx-s4);
    color: var(--gtx-text-dim);
}

.gtx-state__icon {
    width: 40px;
    height: 40px;
    color: var(--gtx-text-dim);
}

.gtx-state--error .gtx-state__icon {
    color: var(--gtx-danger);
}

.gtx-state__title {
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h3);
    font-weight: 600;
    color: var(--gtx-text);
}

.gtx-state__text {
    max-width: 32rem;
}

.gtx-state__action {
    margin-top: var(--gtx-s2);
}