/* The confirmation dialog. Colours come from themes.css like everything else,
   so it follows the colour schemes and day/night mode rather than looking like
   a system alert dropped onto the page. */

/* A modal <dialog> is centred by the browser's own `position: fixed; inset: 0;
   margin: auto`. The site's reset opens with `* { margin: 0 }`, which wins
   over the UA sheet and drops the dialog into the top-left corner. Restated
   here rather than weakening the reset, which every other element relies on. */
.cd-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 380px;
    width: calc(100% - 32px);
    height: fit-content;
    padding: 0;
    border: var(--theme-primary, #cc0000) solid 2px;
    border-radius: 14px;
    background-color: var(--bg-primary, #f5f2e8);
    color: var(--text-primary, #000);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Dialogs sit in the top layer, so this is the page behind rather than an
   overlay element anyone has to manage. */
.cd-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.cd-form {
    padding: 20px 22px 18px;
}

.cd-title {
    margin: 0 0 10px;
    font-size: 1.1em;
    line-height: 1.3;
    color: var(--theme-primary, #cc0000);
}

.cd-body {
    margin: 0 0 18px;
    font-size: 0.92em;
    line-height: 1.45;
    color: var(--text-primary, #000);
}

.cd-body[hidden] {
    display: none;
}

/* Confirm sits on the right, where the eye finishes. Cancel is first in the
   DOM so it holds focus, which is the pairing most desktop conventions use. */
.cd-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cd-btn {
    padding: 7px 16px;
    font-size: 0.92em;
    font-weight: 700;
    border-radius: 8px;
    border: 2px solid var(--border-light, #ccc);
    background-color: var(--bg-button, #efefde);
    color: var(--text-primary, #000);
    cursor: pointer;
}

.cd-btn:hover {
    background-color: var(--bg-secondary, #ffffff);
}

/* Visible focus, because Escape and Tab are the whole point of using a real
   dialog and a focus ring nobody can see undoes that. */
.cd-btn:focus-visible {
    outline: 3px solid var(--theme-primary, #cc0000);
    outline-offset: 2px;
}

/* The destructive answer wears the warning, not the whole dialog. */
.cd-btn.cd-danger {
    border-color: var(--theme-primary, #cc0000);
    color: #ffffff;
    background-color: var(--theme-primary, #cc0000);
}

.cd-btn.cd-danger:hover {
    filter: brightness(1.1);
}