/*
 * Confirm dialog — the single surface behind every `data-turbo-confirm` call
 * site, replacing the browser's native window.confirm().
 *
 * Kept out of notarium.css for the same reason chat.css / findability.css
 * are: Propshaft's `stylesheet_link_tag :app` (see shared/_head.html.erb)
 * picks up every file under app/assets/stylesheets regardless, so a separate
 * file costs nothing and keeps this one workstream's rules out of the shared
 * design-system file. Only --nt-* tokens are used, so both themes and
 * prefers-reduced-motion come for free.
 *
 * The dialog chrome itself (.nt-dialog, .nt-modal, .nt-modal-sm — backdrop,
 * centering, surface, entrance animation) is notarium.css section 18. What's
 * here is just the two things that section doesn't already have an opinion
 * on: the question text, and a button row with no header/footer scaffolding
 * around it.
 */

.nt-confirm-message {
  margin: 0;
  font-size: var(--nt-text-base);
  line-height: 1.55;
  color: var(--nt-text);
}

/* Programmatically focused on open (confirm_controller.js#ask) so a screen
   reader announces the question and the customer reads it before either
   button is anywhere near focus. It is not a control, so the platform's
   focus ring on it would just be noise. */
.nt-confirm-message:focus { outline: none; }

.nt-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--nt-space-3);
  /* No top padding: .nt-panel-body above already closes with --nt-space-5,
     which is the gap this row wants too. */
  padding: 0 var(--nt-space-5) var(--nt-space-5);
}

/* ── Phone (≤40rem) ──────────────────────────────────────────────────
 * 40rem is the canonical phone step (BREAKPOINT REGISTRY, notarium.css).
 *
 * Two buttons on one row is fine until the labels are Danish: "Annullér" next
 * to "Slet dokumentet permanent" overflowed the small modal and the confirm
 * button was clipped by the dialog's own edge — on the one dialog whose whole
 * job is to be read before it is answered.
 *
 * `column`, not `column-reverse`: the safe choice is first in the DOM on
 * purpose (see shared/_confirm_dialog), and reversing it visually would put
 * the destructive button under the reader's thumb while Tab still reached
 * Annullér first. Reading order and focus order stay agreed.
 */
@media (max-width: 40rem) {
  .nt-confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nt-confirm-actions .nt-btn {
    width: 100%;
    justify-content: center;
  }
}