/* ============================================================
   dialog.css — the confirmation that appears before something
   irreversible.

   Centred, small, and holding one question. A dialog that fills the
   screen or offers a third option gets dismissed on reflex, which
   defeats the reason for asking at all.
   ============================================================ */

.confirm{
  padding:0;
  border:none;
  background:none;
  max-width:none;
  max-height:none;
  color:var(--ink);
}

/* The dialog element centres itself only in newer engines, so it is
   placed explicitly and the position works everywhere. */
.confirm[open]{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:24px;
}

.confirm::backdrop{
  background:rgba(12,12,12,.42);
  backdrop-filter:blur(3px);
}
[data-theme="dark"] .confirm::backdrop{
  background:rgba(0,0,0,.62);
}

.confirm-panel{
  width:100%;
  max-width:360px;
  padding:28px 26px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
  text-align:center;
  animation:confirm-in .22s cubic-bezier(.3,.8,.3,1);
}

@keyframes confirm-in{
  from{ opacity:0; transform:translateY(8px) scale(.97); }
}
@media (prefers-reduced-motion:reduce){
  .confirm-panel{ animation:none; }
}

.confirm-title{
  font-family:Marcellus,serif;
  font-weight:400;
  font-size:22px;
  line-height:1.25;
  letter-spacing:.01em;
  margin:0 0 10px;
}

.confirm-message{
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  margin:0 0 8px;
  overflow-wrap:anywhere;
}

/* The consequence, set apart from the name so it is read rather than
   skimmed past on the way to the buttons. */
.confirm-note{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:13.5px;
  line-height:1.5;
  color:var(--soft);
  margin:0 0 22px;
}

.confirm-actions{
  display:flex;
  gap:9px;
}

.confirm-cancel,
.confirm-yes{
  flex:1;
  min-height:48px;
  padding:0 18px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:15px;
  border-radius:99px;
  cursor:pointer;
  transition:background .18s, border-color .18s, opacity .18s;
}

/* Cancel is not always a refusal. Where a dialog offers two real
   choices — restore this sheet, or pick another — both need to look
   like something you might reasonably press. */
.confirm-cancel{
  color:var(--ink);
  background:none;
  border:1px solid var(--line);
}
.confirm-cancel:hover{ border-color:var(--soft); }

.confirm-yes{
  color:var(--ink);
  background:none;
  border:1px solid var(--line);
}
.confirm-yes:hover{ border-color:var(--soft); }

/* Filled only for destructive answers, and in the muted red rather
   than a signal colour: it should read as the different one of the
   two, not as an alarm. */
.confirm-yes.is-danger{
  color:var(--danger);
  background:var(--danger-bg);
  border-color:var(--danger-line);
  font-weight:500;
}
.confirm-yes.is-danger:hover{
  border-color:var(--danger);
}

.confirm-cancel:focus-visible,
.confirm-yes:focus-visible{
  outline:2px solid var(--soft);
  outline-offset:2px;
}

/* ---------------- the trigger on the card ---------------- */
.quiet-danger{
  color:var(--danger);
  opacity:.75;
}
.quiet-danger:hover,
.quiet-danger:focus-visible{ opacity:1; }