.sisl-layout {
    --sisl-sidebar-width: 320px;
    --sisl-effective-sidebar-width: min(var(--sisl-sidebar-width), max(200px, calc(100vw - 320px)));
    --sisl-content-max-width: 1080px;
    --sisl-gap: 32px;
    --sisl-panel-padding: 24px;
    --sisl-button-radius: 6px;
    --sisl-surface: var(--wp--preset--color--base, #fff);
    --sisl-admin-offset: 0px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
}
.sisl-layout > .sisl-panel,
.sisl-layout .sisl-dialog > .sisl-panel {
    box-sizing: border-box;
    min-width: 0;
    padding: var(--sisl-panel-padding);
    color: var(--sisl-panel-color, inherit);
    background: var(--sisl-surface);
}
.sisl-layout .sisl-panel-content { min-width: 0; overflow-wrap: anywhere; }
.sisl-layout > .sisl-main-region { box-sizing: border-box; min-width: 0; padding: 32px var(--sisl-gap); }
.sisl-layout .sisl-content { box-sizing: border-box; width: 100%; max-width: var(--sisl-content-max-width); min-width: 0; margin-inline: auto; overflow-wrap: break-word; }
.sisl-layout .sisl-panel[hidden],
.sisl-layout .sisl-toggle[hidden],
.sisl-layout .sisl-dialog:not([open]) { display: none !important; }
.sisl-layout[data-sisl-ready] { display: block; min-height: 100vh; min-height: 100dvh; padding-inline-start: 0; transition: padding-inline-start .2s ease; }
.sisl-layout[data-sisl-mode="desktop"][data-sisl-open="true"] { padding-inline-start: var(--sisl-effective-sidebar-width); }
.sisl-layout[data-sisl-mode="desktop"] > .sisl-panel {
    position: fixed;
    z-index: 30;
    inset: var(--sisl-admin-offset) auto 0 0;
    width: var(--sisl-effective-sidebar-width);
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    border-inline-end: 1px solid #8884;
    transform: translateX(0);
    visibility: visible;
    transition: transform .2s ease, visibility 0s;
}
.sisl-layout[data-sisl-mode="desktop"][data-sisl-open="false"] > .sisl-panel {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s ease, visibility 0s linear .2s;
}
.sisl-layout[data-sisl-mode="mobile"] > .sisl-main-region {
    padding-inline: max(var(--sisl-gap), 32px, env(safe-area-inset-left, 0px)) max(var(--sisl-gap), 32px, env(safe-area-inset-right, 0px));
}
.sisl-layout .sisl-toggle {
    position: fixed;
    z-index: 35;
    left: 0;
    top: calc(var(--sisl-admin-offset) + (100vh - var(--sisl-admin-offset)) / 2);
    top: calc(var(--sisl-admin-offset) + (100dvh - var(--sisl-admin-offset)) / 2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 44px;
    height: 72px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sisl-button-color, inherit);
    cursor: pointer;
    transition: left .2s ease;
}
.sisl-layout .sisl-toggle::before {
    position: absolute;
    inset: 0 auto 0 0;
    box-sizing: border-box;
    width: 28px;
    border: 1px solid currentColor;
    border-left: 0;
    border-radius: 0 var(--sisl-button-radius) var(--sisl-button-radius) 0;
    background: var(--sisl-button-background, var(--sisl-surface));
    content: "";
}
.sisl-layout .sisl-toggle svg { position: relative; flex: none; margin-left: 4px; pointer-events: none; transition: transform .2s ease; }
.sisl-layout[data-sisl-mode="desktop"][data-sisl-open="true"] .sisl-toggle { left: var(--sisl-effective-sidebar-width); }
.sisl-layout[data-sisl-mode="desktop"][data-sisl-open="true"] .sisl-toggle svg { transform: rotate(180deg); }
.sisl-layout .sisl-toggle:focus-visible,
.sisl-layout .sisl-close:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sisl-layout .sisl-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--sisl-panel-color, inherit);
    background: linear-gradient(var(--sisl-surface), var(--sisl-surface)), #fff;
    overflow: hidden;
    overscroll-behavior: contain;
}
.sisl-layout .sisl-dialog[open] { display: flex; flex-direction: column; }
.sisl-layout .sisl-dialog::backdrop { background: #0006; }
.sisl-layout .sisl-dialog-bar {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
}
.sisl-layout .sisl-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px;
    border: 1px solid currentColor;
    border-radius: var(--sisl-button-radius);
    color: var(--sisl-button-color, inherit);
    background: var(--sisl-button-background, var(--sisl-surface));
    cursor: pointer;
}
.sisl-layout .sisl-dialog > .sisl-panel {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding-inline: max(var(--sisl-panel-padding), env(safe-area-inset-left, 0px)) max(var(--sisl-panel-padding), env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--sisl-panel-padding), env(safe-area-inset-bottom, 0px));
}
.sisl-layout:not([data-sisl-animate]),
.sisl-layout:not([data-sisl-animate]) > .sisl-panel,
.sisl-layout:not([data-sisl-animate]) .sisl-toggle,
.sisl-layout:not([data-sisl-animate]) .sisl-toggle svg { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .sisl-layout,
    .sisl-layout > .sisl-panel,
    .sisl-layout .sisl-toggle,
    .sisl-layout .sisl-toggle svg { transition: none !important; }
    .sisl-layout .sisl-dialog,
    .sisl-layout .sisl-panel { scroll-behavior: auto !important; }
}
