/*
 * dz-alert — HaTchi-MaXchi tranche 1 (spec: hatchi-maxchi-standalone).
 *
 * Identity signals: tone wash surface (--colour-*-soft) + registry icon +
 * text — colour never carries meaning alone (WCAG 1.4.1 as aesthetic).
 *
 * Contract:
 *   <div class="dz-alert" data-dz-tone="warning" role="alert">
 *     <span class="dz-alert__icon" aria-hidden="true"><svg…/></span>
 *     <div class="dz-alert__body">
 *       <div class="dz-alert__title">Heads up</div>
 *       <div class="dz-alert__description">Something needs attention.</div>
 *     </div>
 *   </div>
 * Tones: info (default) | success | warning | destructive | neutral.
 */

.dz-alert {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
  font-size: var(--text-sm);
}

.dz-alert__icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-block-start: 0.125rem;
}

.dz-alert__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dz-alert__title {
  font-weight: var(--weight-semibold);
  margin-block-end: 0.125rem;
}

.dz-alert__description {
  color: var(--colour-text-muted);
  line-height: var(--leading-normal);
}

.dz-alert[data-dz-tone="info"] {
  background: var(--colour-brand-soft);
  border-color: color-mix(in oklab, var(--colour-brand) 25%, var(--colour-border));
}

.dz-alert[data-dz-tone="info"] .dz-alert__icon { color: var(--colour-brand); }

.dz-alert[data-dz-tone="success"] {
  background: var(--colour-success-soft);
  border-color: color-mix(in oklab, var(--colour-success) 25%, var(--colour-border));
}

.dz-alert[data-dz-tone="success"] .dz-alert__icon { color: var(--colour-success); }

.dz-alert[data-dz-tone="warning"] {
  background: var(--colour-warning-soft);
  border-color: color-mix(in oklab, var(--colour-warning) 25%, var(--colour-border));
}

.dz-alert[data-dz-tone="warning"] .dz-alert__icon { color: var(--colour-warning); }

.dz-alert[data-dz-tone="destructive"] {
  background: var(--colour-danger-soft);
  border-color: color-mix(in oklab, var(--colour-danger) 25%, var(--colour-border));
}

.dz-alert[data-dz-tone="destructive"] .dz-alert__icon { color: var(--colour-danger); }

/* ── dz-separator ────────────────────────────────────────────────────── */
/* HYPERPART: separator */

.dz-separator {
  border: none;
  border-block-start: 1px solid var(--colour-border);
  margin-block: var(--space-lg);
  /* The UA gives <hr> margin-inline auto; in a column flexbox those auto
   * margins absorb ALL free space and the rule's width collapses to zero
   * (rendered as a blank line). Pin the inline margins. */
  margin-inline: 0;
}

.dz-separator--vertical {
  display: inline-block;
  width: 0;
  align-self: stretch;
  border-block-start: none;
  border-inline-start: 1px solid var(--colour-border);
  margin-block: 0;
  margin-inline: var(--space-md);
}

/* ── data-dz-tooltip — CSS-only attribute tooltip ────────────────────── */

[data-dz-tooltip] {
  position: relative;
}

[data-dz-tooltip]::after {
  content: attr(data-dz-tooltip);
  position: absolute;
  inset-block-end: calc(100% + 0.375rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--colour-text);
  color: var(--colour-bg);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 50;
}

[data-dz-tooltip]:hover::after,
[data-dz-tooltip]:focus-visible::after {
  opacity: 1;
  transition-delay: 300ms;
}

/* Forced open — gallery capture / docs / dual-lock stills that must show the
   hint without hover (coherence + Playwright static shots). Do not use on
   product surfaces that should stay hover-only. */
[data-dz-tooltip][data-dz-tooltip-open]::after {
  opacity: 1;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-dz-tooltip]::after { transition: none; }
}

/* HYPERPART: menu */
/* ── dz-menu — details-based dropdown (the hypermedia answer) ──────────
 * Disclosure chrome: CSS chevron on the summary trigger (same family as
 * accordion / navigation-menu) — not Unicode ▾ in the label text
 * (affordance-disclosure-chrome). Summary usually carries .dz-button.
 * Light-dismiss: controllers/dz-details-light-dismiss.js (overlay-light-dismiss).
 */

.dz-menu {
  position: relative;
  display: inline-block;
}

.dz-menu > summary {
  list-style: none;
  cursor: pointer;
  /* .dz-button is already inline-flex; ensure room for ::after chevron */
  gap: var(--space-2xs);
}

.dz-menu > summary::-webkit-details-marker {
  display: none;
}

/* House disclosure chevron — 1rem, rotates when open (not part of label text) */
.dz-menu > summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  opacity: 0.65;
  -webkit-mask: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  mask: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  transition: transform var(--duration-base, 150ms) var(--ease-out, ease);
}

.dz-menu[open] > summary::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .dz-menu > summary::after {
    transition: none;
  }
}

.dz-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-end: 0;
  min-width: 11rem;
  padding: var(--space-xs);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 40;
}

.dz-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--colour-text);
  font-size: var(--text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.dz-menu__item:hover {
  background: var(--colour-bg);
}

.dz-menu__item[data-dz-tone="destructive"] { color: var(--colour-danger); }

.dz-menu__separator {
  border: none;
  border-block-start: 1px solid var(--colour-border);
  margin-block: var(--space-xs);
}

/* ── dz-alert-dialog — designed hx-confirm surface ───────────────────── */
/* HYPERPART: confirm */
dialog.dz-alert-dialog {
  width: min(26rem, calc(100vw - 2rem));
  padding: var(--space-2xl);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  color: var(--colour-text);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

dialog.dz-alert-dialog::backdrop {
  background: oklch(13% 0.028 261.69 / 0.5);
  backdrop-filter: blur(2px);
}

.dz-alert-dialog__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  color: var(--colour-danger);
  margin-block-end: var(--space-md);
}

.dz-alert-dialog__icon svg { width: 100%; height: 100%; }

.dz-alert-dialog__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-sm);
}

.dz-alert-dialog__message {
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-xl);
}

.dz-alert-dialog__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}