/* The house asking whether you meant it. A modal of our own rather than
   the system's, because the app's webview simply swallows that one. */
@layer components {

.confirm {
  max-inline-size: min(26rem, calc(100vw - 2.5rem));
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--paper-high);
  color: var(--ink);
  box-shadow: 0 18px 50px oklch(var(--lch-ink) / 32%);
}
.confirm::backdrop {
  background: var(--veil);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.confirm__question {
  margin: 0 0 1.4rem;
  line-height: 1.6;
}
.confirm__answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
.confirm__answers .button { margin-top: 0; }

@media (max-width: 30rem) {
  /* Stacked full width, the answer being asked for on top and the way
     out beneath it — the order a phone expects. Only the painting
     order reverses; the keyboard still reaches Never mind first, and
     that is what opens focused. */
  .confirm__answers { flex-direction: column-reverse; }
  .confirm__answers .button { width: 100%; }
}

}