/* ── Info Element base ─────────────────────────────── */
.infoelem {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.5;
}

.infoelem__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.infoelem__content p {
    margin: 0;
}

.infoelem__content p + p {
    margin-top: 0.25rem;
}

/* ── Info (primary blue) ───────────────────────────── */
.infoelem--info {
    background-color: #eff6ff;
    border-color: #B8D7FF;
    color: #1e3a5f;
}

.infoelem--info .infoelem__icon {
    color: #4279BC;
}

/* ── Warning (amber) ───────────────────────────────── */
.infoelem--warning {
    background-color: hsla(35, 79%, 66%, 0.12);
    border-color: hsl(35, 79%, 66%);
    color: #946713;
}

.infoelem--warning .infoelem__icon {
    color: #b07d1a;
}

/* ── Error (red) ───────────────────────────────────── */
.infoelem--error {
    background-color: hsla(342, 89%, 48%, 0.08);
    border-color: hsla(342, 89%, 48%, 0.4);
    color: #700a0a;
}

.infoelem--error .infoelem__icon {
    color: hsl(342, 89%, 48%);
}

/* ── Success (green) ───────────────────────────────── */
.infoelem--success {
    background-color: hsla(170, 78%, 36%, 0.1);
    border-color: hsla(170, 78%, 36%, 0.4);
    color: #225a36;
}

.infoelem--success .infoelem__icon {
    color: hsl(170, 78%, 36%);
}

/* ── Neutral (grey) ────────────────────────────────── */
.infoelem--neutral {
    background-color: #f8f9fa;
    border-color: #e5e7eb;
    color: #374151;
}

.infoelem--neutral .infoelem__icon {
    color: #8a8a8a;
}

/* ── Counter pill ──────────────────────────────────── */
.infoelem--counter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: #f9fafb;
    border-color: #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #374151;
    width: fit-content;
}

/* ── Tip callout ───────────────────────────────────── */
.infoelem--tip {
    background-color: #faf5ff;
    border-color: #e0cffc;
    color: #4a2578;
}

.infoelem--tip .infoelem__icon {
    color: #7c3aed;
}