/* Callout：薄阴影 + soft 状态背景。替代 Mantine Alert 的强色填充，
   与 Flat Cards 基调一致。 */

.callout
{
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--divider);
    font-size: var(--fs-13);
    line-height: var(--lh-ui);
    color: var(--text);
}

.icon { flex-shrink: 0; margin-top: 1px; }

.body { flex: 1; min-width: 0; }

.title { font-weight: 600; margin-bottom: 2px; }

/* 角色色编码:左色条 + soft 背景 + 同色标题 / 图标。 */
.toneError
{
    background: var(--error-soft);
    border-left-color: var(--error);
}
.toneError .body { color: var(--text); }
.toneError .icon, .toneError .title { color: var(--error); }

.toneWarn
{
    background: var(--warn-soft);
    border-left-color: var(--warn);
}
.toneWarn .body { color: var(--text); }
.toneWarn .icon, .toneWarn .title { color: var(--warn); }

.toneOk
{
    background: var(--success-soft);
    border-left-color: var(--success);
}
.toneOk .body { color: var(--text); }
.toneOk .icon, .toneOk .title { color: var(--success); }

.toneInfo
{
    background: var(--info-soft);
    border-left-color: var(--info);
}
.toneInfo .body { color: var(--text); }
.toneInfo .icon, .toneInfo .title { color: var(--info); }
