/* The dialog Creodin asks with. Paired with src/js/overlay.js -- see the note
   there for why the browser's own are never used.

   Tokens rather than hexes, so it follows the theme like everything else and a
   delete confirmation is not the one light box on a dark site. */
#creodinOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 9, 11, 0.62);
    backdrop-filter: blur(3px);
}
#creodinOverlay.open { display: flex; }

#creodinOverlayBox {
    /* Nearer square than wide: three words of buttons do not need a banner. */
    width: min(340px, 100%);
    padding: 22px 22px 20px;
    border: 1px solid var(--ui-line, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    background: var(--ui-panel, #17191b);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    color: var(--ui-text, #e6e6e6);
}

#creodinOverlayTitle {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.creodinOverlayText {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ui-text-dim, rgba(255, 255, 255, 0.62));
}

#creodinOverlayActions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}
/* Equal buttons across the foot, one word each. */
#creodinOverlayActions .creodinOverlayBtn { flex: 1 1 0; text-align: center; white-space: nowrap; }

.creodinOverlayBtn {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.creodinOverlayBtn:focus-visible {
    outline: 2px solid var(--ui-accent, #d9a441);
    outline-offset: 2px;
}
/* Cancel is the quiet one and the one that holds focus, so the key you press
   without reading does nothing. */
.creodinOverlayBtn.ghost {
    border-color: var(--ui-line, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--ui-text, #e6e6e6);
}
.creodinOverlayBtn.ghost:hover { border-color: var(--ui-text-dim, rgba(255, 255, 255, 0.4)); }

.creodinOverlayBtn.primary {
    background: var(--ui-accent, #d9a441);
    color: #17140c;
    font-weight: 600;
}
.creodinOverlayBtn.primary:hover { filter: brightness(1.08); }

/* Destructive, and it says so in colour rather than in an extra sentence. */
.creodinOverlayBtn.danger {
    background: var(--ui-danger, #c8523f);
    color: #fff;
    font-weight: 600;
}
.creodinOverlayBtn.danger:hover { filter: brightness(1.1); }