/* THE CONFIRM DIALOG — common: one question, one act, or Close
   (dialog.js raises it inside the app screen — the frame's inner layer
   on a PC, the viewport on the device — or, on a page with no screen,
   on the body, fixed over the viewport wherever the page is scrolled,
   as on a phone page that flows as a document;
   a box to tick beneath the note when the act carries a choice). The box sits on the surface;
   the act's button wears the act's colour from the colour library:
   go (moss), warn and armed (yellow), stop (the soft stop, a matte,
   pastel red — an act that stops something and destroys nothing, an
   unfollow), danger (the danger red — an act that destroys), or the
   neutral fill, each with the text colour that reads over that fill.
   No hover — the app screen is a touch UI. */
.dlg { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.dlg[hidden] { display: none; }
body > .dlg { position: fixed; } /* a page with no screen scrolls as a document: the dialog over the viewport */
html.flows .dlg { position: fixed; } /* a phone page that flows scrolls as a document, its screen as tall as the page: the dialog over what shows, never over the whole page, standing still while the page scrolls beneath — in the desktop's phone frame over the frame, which holds it (common.css) */
.dlgscrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.dlgbox {
  position: relative; width: min(24rem, calc(100% - 2.4rem)); box-sizing: border-box;
  background: var(--surface, Canvas); color: var(--ink, CanvasText); border: 1px solid var(--line, transparent); border-radius: 18px; padding: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); text-align: center;
}
.dlgtext { font-size: 1.05rem; margin-bottom: 0.9rem; }
.dlgnote { font-size: 0.86rem; opacity: 0.6; margin: -0.5rem 0 0.9rem; white-space: pre-line; }
.dlgcheck { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.92rem; margin: 0 0 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dlgcheck[hidden] { display: none; }
.dlgcheck input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--accent-2); cursor: pointer; }
.dlgact {
  display: block; width: 100%; box-sizing: border-box;
  background: color-mix(in srgb, currentColor 14%, transparent); border: none; border-radius: 14px;
  color: inherit; font: inherit; font-size: 1.05rem; font-weight: 600; padding: 0.9rem 1rem; cursor: pointer;
  height: auto; min-height: 0; line-height: 1.25; /* the dialog's own size on any page — a host page's own button rule never squeezes it */
  -webkit-tap-highlight-color: transparent;
}
.dlgact:active { filter: brightness(0.92); }
.dlgact.go { background: var(--accent-2); color: var(--on-accent-2); }
.dlgact.warn { background: var(--accent); color: var(--on-accent); }
.dlgact.armed { background: var(--accent); color: var(--on-accent); }
.dlgact.danger { background: var(--danger); color: var(--on-danger); }
.dlgact.stop { background: var(--stop); color: var(--on-stop); }
.dlgclose {
  display: block; width: 100%; margin-top: 0.3rem; background: none; border: none; color: inherit;
  font: inherit; font-size: 0.95rem; padding: 0.7rem 0.5rem; cursor: pointer; opacity: 0.7;
  height: auto; min-height: 0; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}