/* CM001 kit — alert.css (@layer cm.components). cm_alert() layout: leading icon, title+body,
 * optional dismiss, and an accent bar (RTL-correct via ::before at inset-inline-start). */
@layer cm.components {
  .note--alert { --accent: var(--line-2, #cbd5e1); position: relative; display: flex; gap: 11px; align-items: flex-start; padding-inline-start: 16px; overflow: hidden; }
  .note--alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); }
  .note--info { --accent: var(--info, #0ea5e9); }
  .note--ok { --accent: var(--ok); }
  .note--warn { --accent: var(--warn); }
  .note--danger { --accent: var(--danger); }

  .note-ic { color: var(--accent); flex: none; display: inline-flex; margin-top: 1px; }
  .note-content { flex: 1; min-width: 0; }
  .note-ttl { font-weight: 700; margin-bottom: 2px; color: var(--text); }
  .note-body { color: var(--text-2); font-size: 13px; }
  .note-body:empty { display: none; }
  .note-list { margin: 4px 0 0; padding-inline-start: 18px; }
  .note-list a { color: var(--danger); }
  .note-x { flex: none; border: 0; background: transparent; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; margin: -2px -4px -2px 0; }
  .note-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
}