/* Layout around the material; panels and their reserved lanes are distinct. */
:root {--glass-inset:12px;--layout-sidebar:280px;--layout-topbar:64px}
.site-frame {--glass-rail:calc(var(--layout-sidebar) + 2 * var(--glass-inset))}
.site-frame.collapsed {--layout-sidebar:72px}
.site-workspace {margin-left:var(--glass-rail);padding-top:var(--glass-inset)}
.site-sidebar {inset:var(--glass-inset) auto var(--glass-inset) var(--glass-inset);width:var(--layout-sidebar);height:calc(100dvh - 2 * var(--glass-inset));min-height:0;border-radius:28px;padding:20px 12px 12px}
.topbar {top:var(--glass-inset);margin-right:var(--glass-inset);height:var(--layout-topbar);border-radius:32px;padding-inline:12px;margin-bottom:var(--glass-inset)}
.site-frame.collapsed .site-sidebar {padding:20px 8px 12px;border-radius:26px}
.site-sidebar .nav-link,.site-sidebar .nav-group-trigger,#mobile-menu .nav-link,#mobile-menu .nav-group-trigger {border-radius:18px}
.site-sidebar .nav-submenu a,#mobile-menu .nav-submenu a {border-radius:15px}
#mobile-menu {inset:var(--glass-inset) auto var(--glass-inset) var(--glass-inset);margin:0;width:min(280px,calc(100dvw - 2 * var(--glass-inset)));max-width:none;height:calc(100dvh - 2 * var(--glass-inset));max-height:calc(100dvh - 2 * var(--glass-inset));min-height:0;border-radius:28px;padding:16px 12px max(12px,env(safe-area-inset-bottom))}
.sidebar-pattern-layout {grid-template-columns:280px minmax(0,1fr)}
.sidebar-pattern-preview {border-radius:28px}
.demo {grid-template-columns:304px minmax(0,1fr)}
.demo.is-compact {grid-template-columns:96px minmax(0,1fr)}
.demo-sidebar {border-radius:28px;margin:12px;min-width:0}
.demo-topbar {border-radius:32px;margin:12px 12px 12px 0}
.demo.device-tablet,.demo.device-mobile,.demo.mode-public {grid-template-columns:minmax(0,1fr)}
.demo.device-tablet .demo-topbar,.demo.device-mobile .demo-topbar {margin-left:12px}
.wf-shell {--wf-sidebar:280px;--wf-rail:calc(var(--wf-sidebar) + 2 * var(--glass-inset));grid-template-columns:var(--wf-rail) minmax(0,1fr)}
.wf-shell.collapsed {--wf-sidebar:72px}
.wf-sidebar {margin:var(--glass-inset);width:var(--wf-sidebar);border-radius:28px}
.wf-workspace {grid-template-rows:calc(var(--wf-topbar) + 2 * var(--glass-inset)) minmax(0,1fr)}
.wf-topbar {margin:var(--glass-inset) var(--glass-inset) var(--glass-inset) 0;height:var(--wf-topbar);border-radius:32px;padding-inline:12px}
.wf-nav a,.nw-group-toggle {border-radius:18px}
.wf-public {grid-template-columns:minmax(0,1fr)}
.wf-public .wf-topbar {margin-left:var(--glass-inset)}
#wireframe-menu {inset:var(--glass-inset) auto var(--glass-inset) var(--glass-inset);margin:0;width:min(280px,calc(100dvw - 2 * var(--glass-inset)));max-width:none;height:calc(100dvh - 2 * var(--glass-inset));max-height:calc(100dvh - 2 * var(--glass-inset));border-radius:28px;min-height:0}
#navigation-popup {top:calc(var(--wf-topbar) + 2 * var(--glass-inset) + 8px);max-height:calc(100dvh - var(--wf-topbar) - 2 * var(--glass-inset) - 24px);width:calc(100vw - var(--nw-sidebar,304px) - 24px);max-width:min(1152px,calc(100vw - var(--nw-sidebar,304px) - 24px))}
@media(max-width:1023px) {
  :root {--glass-inset:10px}
  .site-frame,.site-frame.collapsed {--glass-rail:0px}
  .site-workspace {margin-left:0}
  .topbar {margin-left:var(--glass-inset)}
  .wf-shell,.wf-shell.collapsed {grid-template-columns:minmax(0,1fr);--wf-rail:0px}
  .wf-topbar {margin-left:var(--glass-inset)}
}
@media(max-width:767px) {
  :root {--glass-inset:8px;--layout-topbar:112px}
  .topbar {height:112px;border-radius:28px;padding:8px;gap:8px}
  .sidebar-pattern-layout {grid-template-columns:minmax(0,1fr)}
  .sidebar-pattern-preview {width:280px;max-width:100%}
  .wf-navigation-only .wf-topbar {padding-inline:8px}
}