.hr-dialog {
    background: var(--hr-color-surface);
    border: 1px solid var(--hr-color-border);
    border-radius: var(--hr-radius-surface);
    box-shadow: var(--hr-shadow-surface);
    box-sizing: border-box;
    color: var(--hr-color-text);
    max-height: calc(100dvh - var(--hr-space-6));
    max-width: calc(100vw - var(--hr-space-6));
    overflow: auto;
    padding: 0;
    width: 640px;
}

.hr-dialog::backdrop {
    background: var(--hr-color-backdrop);
}

.hr-dialog__surface {
    display: grid;
    gap: var(--hr-space-4);
    min-width: 0;
    padding: var(--hr-space-6);
    position: relative;
}

.hr-dialog__header {
    align-items: start;
    display: flex;
    gap: var(--hr-space-3);
    justify-content: space-between;
    min-width: 0;
}

.hr-dialog__header > div {
    min-width: 0;
}

.hr-dialog__header h2 {
    font-size: var(--hr-font-size-section-title);
    line-height: var(--hr-line-height-heading);
    margin: 0;
}

.hr-dialog__body {
    min-width: 0;
    overflow-wrap: break-word;
}

.hr-dialog__surface p {
    margin: 0;
}

.hr-dialog__close {
    flex: 0 0 auto;
    min-height: var(--hr-control-height-compact);
    min-width: var(--hr-control-height-compact);
}

.release-notes-dialog .hr-dialog__close {
    position: absolute;
    right: var(--hr-space-3);
    top: var(--hr-space-3);
}

.release-notes-dialog .hr-dialog__header {
    padding-right: calc(var(--hr-control-height-compact) + var(--hr-space-8));
}

.fingerprint-signature-close {
    order: 1;
}

.hr-dialog__actions {
    justify-content: flex-end;
}

.hr-dialog.digital-signature-dialog {
    width: 1120px;
}

.hr-dialog.fingerprint-signature-dialog {
    width: 520px;
}

.hr-dialog.fire-extinguisher-reminder-dialog {
    width: 760px;
}

@media screen and (max-width: 720px) {
    .hr-dialog__surface {
        padding: var(--hr-space-4);
    }
}

@media screen and (max-width: 480px) {
    .hr-dialog__surface {
        gap: var(--hr-space-3);
        padding: var(--hr-space-3);
    }
}

body:has(dialog.hr-dialog[open]) {
    overflow: hidden;
}