/* CM001 kit — dialog.css (@layer cm.components). Native <dialog> chrome shared by cm.confirm (P2)
 * and the Dialog widget (P3): base panel + backdrop + confirm layout + header/close + size modifiers. */
@layer cm.components {
  .cm-dialog {
    border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); padding: 0; color: var(--text);
    background: var(--surface); box-shadow: var(--shadow-md); inline-size: min(92vw, 34rem); max-width: 96vw;
  }
  .cm-dialog::backdrop { background: color-mix(in srgb, #0b1220 46%, transparent); backdrop-filter: blur(2px); }
  .cm-dialog-body { padding: 20px 22px; }
  .cm-dialog-ttl { font-size: 17px; margin: 0 0 6px; }
  .cm-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); border-end-start-radius: var(--radius-lg, 16px); border-end-end-radius: var(--radius-lg, 16px); }

  /* confirm layout */
  .cm-confirm-body { display: flex; gap: 14px; align-items: flex-start; }
  .cm-confirm-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50, #eff6ff); color: var(--brand); }
  .cm-confirm-ic--danger { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
  .cm-confirm-ic--warning { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
  .cm-confirm-ic--success { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
  .cm-confirm-msg { color: var(--text-2); font-size: 14px; }

  /* header row (title + close) — Dialog widget */
  .cm-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
  .cm-dialog-head .cm-dialog-ttl { margin: 0; flex: 1 1 auto; min-width: 0; }
  .cm-dialog-x {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px;
    margin-inline-end: -4px; margin-block-start: -4px; padding: 0; border: 0; border-radius: var(--radius-md, 10px);
    background: transparent; color: var(--text-2); cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease), color var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-dialog-x:hover { background: var(--surface-2); color: var(--text); }
  .cm-dialog-x svg { display: block; }

  /* size modifiers */
  .cm-dialog--sm { inline-size: min(92vw, 24rem); }
  .cm-dialog--md { inline-size: min(92vw, 34rem); }
  .cm-dialog--lg { inline-size: min(94vw, 52rem); }

  @media (prefers-reduced-motion: no-preference) {
    .cm-dialog[open]::backdrop { animation: cm-dlg-backdrop var(--dur-med, 200ms) var(--ease-std, ease); }
  }
  @keyframes cm-dlg-backdrop { from { opacity: 0; } to { opacity: 1; } }
}