/*!
 * Typing Tutor — result dialog (SRS §20).
 *
 * A separate small file appended to the engine's stylesheet rather than edited
 * into it, so the phase that added the dialog is the phase that owns its CSS.
 * Loaded alongside typing-engine.css on the lesson page.
 *
 * The element is a native <dialog>, so the browser supplies the backdrop, focus
 * trapping and Escape handling. Only sizing and the backdrop tint are set here.
 */

.typing-result-dialog {
    border: 0;
    border-radius: .5rem;
    padding: 0;
    max-width: 34rem;
    width: calc(100% - 2rem);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}

.typing-result-dialog::backdrop {
    background: rgba(15, 15, 20, .6);
}

.typing-result-body {
    padding: 1.25rem;
}

/* Long weakest-key lists must not stretch the dialog off-screen. */
.typing-result-dialog [data-result-keys] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-height: 6rem;
    overflow-y: auto;
}