/* ── rbConfirm ───────────────────────────────────────────────
   The dialog shown before anything irreversible. Styled to match the panels
   rather than the browser's own alert, which reads as an error rather than a
   decision. <dialog> handles focus and Escape; this only handles how it looks. */

.rbc {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--p-border, #252a3a);
    border-radius: 16px;
    margin: auto;
    background: var(--p-card, #1c2030);
    color: var(--p-text, #e2e4f0);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
    animation: rbcIn 0.18s cubic-bezier(0.2, 0, 0.2, 1) both;
}

.rbc::backdrop {
    background: rgba(6, 8, 14, 0.72);
    backdrop-filter: blur(3px);
    animation: rbcFade 0.18s ease both;
}

.rbc.is-closing { animation: rbcOut 0.12s ease both; }

@keyframes rbcIn   { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes rbcOut  { to   { opacity: 0; transform: scale(0.98); } }
@keyframes rbcFade { from { opacity: 0; } }

.rbc__box {
    display: flex;
    gap: 15px;
    padding: 22px 22px 18px;
}

.rbc__ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
}

.rbc__body { min-width: 0; }

.rbc__title {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--p-text, #e2e4f0);
}

.rbc__text {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--p-text-soft, #9095b0);
}

.rbc__acts {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 0 22px 20px;
}

.rbc__btn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 9px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.rbc__btn--ghost {
    background: transparent;
    border-color: var(--p-border, #252a3a);
    color: var(--p-text-soft, #9095b0);
}
.rbc__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--p-text, #e2e4f0); }

.rbc__btn--go { color: #fff; }
.rbc__btn--go:hover { filter: brightness(1.08); }

.rbc__btn:focus-visible { outline: 2px solid var(--p-accent, #FFD700); outline-offset: 2px; }

/* Tone carries the weight of the decision: red for gone-for-good, amber for
   a stop that can be explained, green for an approval. */
.rbc--danger  .rbc__ico { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.rbc--danger  .rbc__btn--go { background: linear-gradient(135deg, #dc2626, #b31c1c); }

.rbc--warning .rbc__ico { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.rbc--warning .rbc__btn--go { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1204; }

.rbc--primary .rbc__ico { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.rbc--primary .rbc__btn--go { background: linear-gradient(135deg, #22c55e, #16a34a); }

@media (max-width: 480px) {
    .rbc__acts { flex-direction: column-reverse; }
    .rbc__btn  { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rbc, .rbc::backdrop, .rbc.is-closing { animation: none; }
    .rbc__btn { transition: none; }
}