/* Confirm — the kit's confirmation dialog: a centred panel over a scrim, for the
 * question a destructive action has to ask. Shares its scrim and focus trap with
 * the drawer (see overlay.js). Local tokens: --confirm-surface, --confirm-scrim.
 * why: docs/foundations.md#motion */

.ui-confirm {
  /* The floating step; nothing casts. why: docs/foundations.md#elevation */
  --confirm-surface: var(--bg-elevated);
  --confirm-scrim: var(--scrim);
  --confirm-w: var(--panel-md);

  position: fixed;
  inset: 0;
  /* Top of the overlay stack — one above the palette, two above the drawer: a
     confirm asks a question about whichever of them opened it, so it has to be
     readable above both whatever order the three are mounted in. */
  z-index: calc(var(--z-overlay) + 2);
  pointer-events: none; /* container never blocks; scrim/panel opt back in */

  /* SWITCHED, not transitioned: transitioned, the panel is still `hidden` in the
     frame the class lands and openConfirm()'s focus() has nothing to focus. Only
     the hide is timed, so the panel is on screen while it fades out. `linear` and
     not var(--ease): visibility is discrete, and a curve leaving [0, 1] flips it
     mid-fade. The root owns the switch; panel and scrim inherit it. */
  visibility: hidden;
  transition: visibility var(--dur-med) linear;
}
.ui-confirm.is-open { visibility: visible; transition: none; }

/* Hit-testable only while open. The root stays visible for --dur-med after
   closeConfirm() has stopped trapping, and an accept button that is still
   clickable in that window runs the caller's destructive work a second time. */
.ui-confirm.is-open .ui-confirm__scrim,
.ui-confirm.is-open .ui-confirm__panel { pointer-events: auto; }

.ui-confirm__scrim {
  position: absolute;
  inset: 0;
  background: var(--confirm-scrim);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
}
.ui-confirm.is-open .ui-confirm__scrim { opacity: 1; }

/* Panel — centred with `translate` so the entrance can own `transform` without
   dropping the panel into the corner when it resets to none. */
.ui-confirm__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(var(--confirm-w), calc(100vw - var(--space-8)));
  /* A fixed, centred panel cannot be scrolled into view — scrollIntoView does
     nothing to it — so a panel taller than the viewport puts its answers below
     the fold for good. Bound it, and let the consequence scroll instead. The
     dvh line wins where it is understood; the vh line is what holds it up
     everywhere else. */
  max-height: calc(100vh - var(--space-8));
  max-height: calc(100dvh - var(--space-8));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--confirm-surface);
  /* The two-step edge and the drop, through the level's own names: in DARK that is
     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
     both lines are transparent and the drop carries the whole separation.
     why: docs/foundations.md#elevation */
  border: 1px solid var(--float-edge);
  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
}
.ui-confirm.is-open .ui-confirm__panel { opacity: 1; transform: none; }
/* The ring leaves the panel's own elevation alone: it is an outline since #578, so
   it no longer has to be composed into the box-shadow list that carries the edge and
   the drop — and the list no longer has to be restated here to survive focus.
   why: docs/foundations.md#elevation */
.ui-confirm__panel:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

/* -- Slots ----------------------------------------------------------------- */
/* The question and the answers keep their size; the consequence between them is
   the one that gives, and scrolls — the same split the drawer's header / body /
   footer makes. The title is an h2 and opts out of the display face base.css
   gives a heading, for the same reason .ui-drawer__title does: at --text-md it
   is the question on a dialog, set at the size the answer beneath it is set at.
   why: docs/foundations.md#typefaces */
.ui-confirm__title {
  margin: 0;
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--strong);
}
.ui-confirm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* The padding is the ring's clearance from the glyphs, as on .ui-table-scroll; the
     negative margin spends it out of the panel's --space-5, not out of the text
     column the three slots share. #531 */
  margin: 0 calc(-1 * var(--space-1));
  padding: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: 1.55;
  color: var(--text);
}
/* A consequence long enough to scroll is a keyboard stop, and answered with the
   native outline. The wired dialog's trap wraps between the two answers, which both
   follow it; the markup the kit publishes as a string, rendered open without the
   wiring, has no trap and makes it the first stop. The band is drawn INWARD, inside
   the --space-1 above, which is what keeps it off the glyphs.
   why: docs/foundations.md#the-focus-ring */
.ui-confirm__body:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
.ui-confirm__acts {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Under reduced motion the net makes every change instant, and gives every
   element a 0.01ms transition: a child inherits `visible` one tick after the
   root, so the answer openConfirm() focuses is still hidden and focus falls to
   <body>. So an open confirm carries no transition inside it at all — for as
   long as it is open, not only in the frame it opens.
   why: docs/foundations.md#reduced-motion-travels-with-the-stylesheet */
@media (prefers-reduced-motion: reduce) {
  .ui-confirm.is-open * { transition: none !important; }
}