/* Confirm modal — centred dialog for destructive actions.
   Tokens only: no literal colour, radius, duration or ease lives here. */

/* The kit's shared .btn gains a danger pair here because destructive
   confirmation is the first place it is needed. Both read --danger. */
.btn--danger { border-color: var(--danger); color: var(--danger); background: var(--danger-wash); }
.btn--danger:hover { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.btn--danger.btn--solid { background: var(--danger); border-color: var(--danger); color: var(--ink-inverse); font-weight: 600; }
.btn--danger.btn--solid:hover { background: var(--danger); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--danger-wash); }
.btn--danger.btn--solid[disabled]:hover { background: var(--danger); }

/* ---------- the triggers ---------- */

.confirm-hint { max-width: 56ch; color: var(--ink-muted); font-size: var(--text-sm); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---------- scrim ---------- */

.confirm-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  opacity: 0;                 /* GSAP owns opacity; presence is the hidden attr */
}
.confirm-scrim[hidden] { display: none; }

/* ---------- dialog ---------- */

.confirm {
  position: fixed; z-index: 310;
  top: 50%; left: 50%;
  /* Centring is done by GSAP (xPercent/yPercent), not by a CSS transform:
     a translate(-50%,-50%) here would be read as a pixel offset the dialog
     never returns from. */
  width: min(420px, calc(100vw - var(--sp-6)));
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-3);
}
.confirm[hidden] { display: none; }
.confirm:focus { outline: none; }

.confirm__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--danger-wash); color: var(--danger);
}
.confirm__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.confirm[data-tone="default"] .confirm__icon { background: var(--accent-wash); color: var(--accent); }

.confirm__title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
.confirm__message { margin-top: var(--sp-2); color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- typed confirmation ---------- */

.confirm__gate { margin-top: var(--sp-4); }
.confirm__gate[hidden] { display: none; }
.confirm__label { display: block; color: var(--ink-muted); font-size: var(--text-sm); }
.confirm__phrase {
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--surface-hover); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.confirm__input {
  width: 100%; height: var(--control-h);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) ease;
}
.confirm__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.confirm__input[aria-invalid="true"] { border-color: var(--danger); }
.confirm__help { margin-top: var(--sp-2); color: var(--ink-faint); font-size: var(--text-xs); }
.confirm__help[data-state="error"] { color: var(--danger); }
.confirm__help[data-state="ready"] { color: var(--ok); }

.confirm__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }

@media (max-width: 520px) {
  .confirm { padding: var(--sp-4); }
  .confirm__actions { flex-direction: column-reverse; }
  .confirm__actions .btn { width: 100%; }
}