.callout{align-items:flex-start;gap:var(--spacing-sm);border:1px solid var(--edge-strong);border-radius:var(--radius-md);background:var(--ground-2);color:var(--text);font-family:var(--font-sans);font-size:var(--text-sm);padding:10px 14px;line-height:1.4;display:flex}.callout--page{max-width:var(--content-max-width);margin:var(--spacing-md) auto 0;padding:var(--spacing-sm) var(--spacing-lg)}.callout--success{background:var(--banner-success);border-color:var(--banner-success-edge)}.callout--warn{background:var(--banner-warn);border-color:var(--banner-warn-edge)}.callout--error{background:var(--banner-error);border-color:var(--banner-error-edge)}.callout--brand{background:var(--brand-soft);border-color:var(--brand-edge)}.callout__icon{color:var(--text-2);flex-shrink:0;margin-top:1px}.callout--success .callout__icon{color:var(--signal-rise-on-soft)}.callout--error .callout__icon{color:var(--signal-fall-on-soft)}.callout--brand .callout__icon{color:var(--brand-on-soft)}.callout__copy{min-width:0;max-width:var(--measure);flex:1}.callout__title{color:var(--text);margin:0;font-weight:600}.callout__body{color:var(--text-2)}.callout__title+.callout__body{margin-top:var(--spacing-2xs)}.callout__body>p{margin:0}.callout__action{flex-shrink:0;align-self:center}.callout__dismiss{border-radius:var(--radius-full);width:28px;height:28px;color:var(--text-2);cursor:pointer;transition:background var(--motion-fast) var(--ease-ember), color var(--motion-fast) var(--ease-ember);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin:-4px -6px -4px 0;padding:0;display:inline-flex}@media (hover:hover){.callout__dismiss:hover{background:var(--text-soft);color:var(--text)}}@media (width<=600px){.callout{flex-wrap:wrap}.callout--page{margin-left:var(--spacing-md);margin-right:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}.callout__action{flex-basis:100%;justify-content:flex-end;display:flex}}