/* ============================================================
   MISSION FLOW — Themed confirm dialog stylesheet (Daylight Pro).
   Shared by admin + editor + archives pages. Variables:
     --mfc-accent   (accent default, red when danger)
   Follows the host page's Daylight tokens when present; the
   fallbacks keep it presentable on any page.
   ============================================================ */

@keyframes mfc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mfc-pop {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.mf-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 15, 20, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    animation: mfc-fade 0.18s ease-out;
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--ink, #1d232b);
}
.mf-confirm-backdrop.mf-confirm-closing { animation: mfc-fade 0.16s ease-out reverse; }

.mf-confirm-card {
    --mfc-accent: var(--accent, #2f5fa8);
    --mfc-accent-glow: transparent;
    position: relative;
    background: var(--surface, #fff);
    width: min(480px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.1rem;
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    animation: mfc-pop 0.2s ease-out;
}

/* Legacy scanline layer — Daylight has none, keep the node inert. */
.mf-confirm-scanlines { display: none; }

.mf-confirm-header { margin-bottom: 0.9rem; }
.mf-confirm-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mfc-accent);
}
.mf-confirm-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink, #1d232b);
    line-height: 1.2;
    margin-top: 0.2rem;
}
.mf-confirm-body {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink, #1d232b);
    margin-bottom: 0.9rem;
}
.mf-confirm-detail {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mut, #6e7681);
    padding: 0.7rem 0.9rem;
    background: var(--bg, #f6f5f2);
    border: 1px solid var(--line, rgba(0, 0, 0, .09));
    border-radius: 9px;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.mf-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .09));
}
.mf-confirm-btn {
    border: 0;
    padding: 0.6rem 1.15rem;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s, background 0.15s;
}
.mf-confirm-btn:active { transform: translateY(1px); }
.mf-confirm-cancel {
    background: transparent;
    color: var(--mut, #6e7681);
    border: 1px solid var(--line, rgba(0, 0, 0, .12));
}
.mf-confirm-cancel:hover { color: var(--ink, #1d232b); border-color: var(--mut, #9aa0a8); }
.mf-confirm-ok {
    background: var(--mfc-accent);
    /* The theme's own text-on-accent colour. It was a fixed #fff, and on a theme
       whose accent is white (Blueprint) the button that confirms FINISH VOTE or
       CLOSE SESSION was blank: white words on a white button. */
    color: var(--accent-ink, #fff);
}
/* A danger button is always the danger red, whatever the theme: white reads on it. */
.mf-confirm-danger .mf-confirm-ok { color: #fff; }
.mf-confirm-ok:hover { filter: brightness(1.08); }
.mf-confirm-ok:focus { outline: 2px solid var(--tint, #e8eefb); outline-offset: 2px; }

/* mfPromptText: the confirm card plus one text input. */
.mf-confirm-input-wrap {
    padding: 0 22px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mf-confirm-input-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mut, #6e7681);
}
.mf-confirm-input {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink, #1d232b);
    background: var(--surface, #fff);
    border: 1px solid var(--line, rgba(0, 0, 0, .12));
    border-radius: 8px;
    outline: none;
}
.mf-confirm-input:focus { border-color: var(--mfc-accent); }

/* mfPromptText: the one-line text input grafted into the confirm card. */
.mf-confirm-input-wrap {
    padding: 0 22px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mf-confirm-input-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mut, #6e7681);
}
.mf-confirm-input {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink, #1d232b);
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, rgba(0, 0, 0, .15));
    border-radius: 9px;
    outline: none;
}
.mf-confirm-input:focus { border-color: var(--mfc-accent); }

/* The editor's PRINT PACK dialog: page size and what to include, grafted into
   the confirm card the way mfPromptText grafts its input. */
.print-pack-form { gap: 8px; }
.print-pack-row { display: flex; gap: 18px; flex-wrap: wrap; }
.print-pack-row label, .print-pack-check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--ink, #1d232b); cursor: pointer;
}
.print-pack-check { margin-top: 2px; }
.print-pack-form input[type="radio"], .print-pack-form input[type="checkbox"] { accent-color: var(--mfc-accent); }