/* Account screens share the full-screen, right-to-left transition. */
html.na-slide-panel-open,
html.na-slide-panel-open body { overflow: hidden; }

dialog.na-slide-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #fffbf3;
    color: #17140f;
    font-family: var(--na-font-family, Inter, sans-serif);
    text-align: left;
    box-shadow: -12px 0 40px rgba(23, 20, 15, .16);
}
html[data-na-theme="dark"] dialog.na-slide-panel { background: #121923; color: #f5f7fa; }
dialog.na-slide-panel:not([open]) { display: none; }
dialog.na-slide-panel[open] { animation: na-panel-enter .28s ease-out; }
dialog.na-slide-panel[open].is-closing { animation: na-panel-exit .28s ease-in forwards; }
dialog.na-slide-panel::backdrop { background: rgba(23, 20, 15, .3); }
.na-slide-panel-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; }
.na-slide-panel-frame.is-ready { visibility: visible; }
.na-slide-panel-frame.is-ready { animation: na-panel-content .14s ease-out; }
.na-slide-panel-skeleton { display: grid; gap: 14px; padding: 0 24px; max-width: 760px; }
.na-slide-panel-skeleton div { height: 72px; border-radius: 12px; background: #ece6f2; }
html[data-na-theme="dark"] .na-slide-panel-skeleton div { background: #252d39; }
@keyframes na-panel-content { from { opacity: .5; } to { opacity: 1; } }
.na-slide-panel-loading [hidden] { display: none !important; }
.na-slide-panel-loading > p,
.na-slide-panel-loading > button { margin: 24px; }
.na-slide-panel-loading > button { min-height: 44px; padding: 8px 20px; cursor: pointer; }
dialog.na-slide-panel .na-page-toolbar { flex: none; padding-inline: 16px; text-align: left; }
dialog.na-slide-panel-confirmation[open] { display: flex; flex-direction: column; overflow-y: auto; }
.na-slide-confirmation-content { width: min(100%, 420px); margin: auto; padding: 32px 24px; text-align: center; }

/* Embedded screens use their own existing forms and scripts with the toolbar at the top. */
html[data-na-panel] { margin-top: 0 !important; }
html[data-na-panel] .na-app-header,
html[data-na-panel] #wpadminbar,
html[data-na-panel] .na-language-switcher { display: none !important; }
html[data-na-panel] body { margin: 0; }

@keyframes na-panel-enter {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes na-panel-exit {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    dialog.na-slide-panel[open], dialog.na-slide-panel[open].is-closing { animation: none; }
    .na-slide-panel-frame.is-ready { animation: none; }
}