:root{--demo-bg:#f5f6f8;--demo-card:#fff;--demo-border:#d9dee7;--demo-text:#1f2937;--demo-muted:#667085;--demo-primary:#2563eb}
html,body{height:100%}
body{margin:0;background:var(--demo-bg);color:var(--demo-text);font-family:Arial,"Yu Gothic",Meiryo,sans-serif;font-size:14px}
body.demo-maximized{overflow:hidden}
.demo-page{min-height:100vh;display:flex;flex-direction:column}
.demo-header{padding:14px 18px;background:#fff;border-bottom:1px solid var(--demo-border)}
.demo-header h1{font-size:18px;margin:0 0 4px}.demo-header p{margin:0;color:var(--demo-muted)}
.demo-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 18px;background:#fff;border-bottom:1px solid var(--demo-border)}
.demo-toolbar label{display:inline-flex;gap:6px;align-items:center}
.demo-toolbar select,.demo-toolbar input{height:30px;border:1px solid var(--demo-border);border-radius:6px;padding:0 8px}
.demo-btn{height:30px;border:1px solid var(--demo-border);border-radius:6px;background:#fff;cursor:pointer;padding:0 10px}.demo-btn.primary{border-color:var(--demo-primary);color:var(--demo-primary);background:#eff6ff}
.demo-frame-wrap{flex:1;min-height:0;padding:12px 18px;display:flex;flex-direction:column}
.demo-control-frame{flex:1;min-height:560px;border:1px solid var(--demo-border);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05);overflow:hidden}
.demo-note{padding:0 18px 12px;color:var(--demo-muted)}
.demo-list{padding:24px}.demo-list a{display:block;margin:8px 0;color:var(--demo-primary)}
.demo-log{height:90px;overflow:auto;background:#0f172a;color:#d1d5db;font-family:Consolas,monospace;font-size:12px;padding:8px;white-space:pre-wrap}
.demo-two-column{display:grid;grid-template-columns:320px 1fr;gap:12px;min-height:0;flex:1;padding:12px 18px}
.demo-panel{background:#fff;border:1px solid var(--demo-border);padding:12px;overflow:auto}.demo-panel h2{font-size:15px;margin:0 0 10px}.demo-panel code{background:#f3f4f6;padding:1px 4px;border-radius:4px}

/*
 * Demo maximization is intentionally implemented only in demo/assets.
 * The runtime Control remains mounted in the same #controlFrame; the demo
 * shell simply hides parameter/log panels and lets the frame consume the
 * whole viewport. This follows the package policy that Demo UI must not leak
 * into the product runtime or Control API.
 */
.demo-page.is-maximized{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;min-height:0;background:var(--demo-bg);overflow:hidden;display:flex;flex-direction:column}
.demo-page.is-maximized .demo-header,.demo-page.is-maximized .demo-toolbar,.demo-page.is-maximized .demo-note,.demo-page.is-maximized .demo-panel{display:none!important}
.demo-page.is-maximized .demo-frame-wrap{flex:1 1 auto;min-height:0;height:auto;padding:0;overflow:hidden;display:flex}
.demo-page.is-maximized .demo-two-column{display:flex;flex:1 1 auto;min-height:0;height:auto;padding:0;gap:0;overflow:hidden}
.demo-page.is-maximized .demo-control-frame{flex:1 1 auto;width:100%;height:100%;min-height:0;border:0;box-shadow:none;overflow:hidden}
.demo-restore-btn{position:absolute;right:14px;top:14px;z-index:10001;height:32px;border:1px solid var(--demo-border);border-radius:7px;background:#fff;color:var(--demo-text);box-shadow:0 8px 20px rgba(15,23,42,.18);cursor:pointer;padding:0 12px;display:none}
.demo-page.is-maximized .demo-restore-btn{display:inline-flex;align-items:center;gap:6px}

@media(max-width:900px){.demo-two-column{grid-template-columns:1fr}.demo-control-frame{min-height:480px}}


/* dev-22.0.1: chrome stability during Demo maximization.
 * The previous maximize implementation hid Demo panels correctly, but the
 * browser page could still become scrollable when the mounted spreadsheet had
 * a large minimum workspace height or when object-layer interactions changed
 * layout metrics. Once the page scrolled, the product title/menu row could
 * move out of view while the toolbar was still visible. These rules lock the
 * page and keep scrolling inside NativeGrid only.
 */
html.demo-maximized,
html.demo-maximized body,
body.demo-maximized {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.demo-page.is-maximized,
.demo-page.is-maximized .demo-two-column,
.demo-page.is-maximized .demo-frame-wrap,
.demo-page.is-maximized .demo-control-frame,
.demo-page.is-maximized .unifiedspread-host-frame,
.demo-page.is-maximized .unifiedspread-host-frame > #app,
.demo-page.is-maximized #app.unifiedspread-app-shell {
  min-height: 0 !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.demo-page.is-maximized .unifiedspread-host-frame,
.demo-page.is-maximized .unifiedspread-host-frame > #app,
.demo-page.is-maximized #app.unifiedspread-app-shell {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.demo-page.is-maximized #topBar {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 100;
}

.demo-page.is-maximized #contentShell,
.demo-page.is-maximized #mainContentArea,
.demo-page.is-maximized #workspaceShell,
.demo-page.is-maximized #workspace,
.demo-page.is-maximized .unifiedspread-native-grid {
  min-height: 0 !important;
  overflow: hidden !important;
}

.demo-page.is-maximized #contentShell,
.demo-page.is-maximized #mainContentArea,
.demo-page.is-maximized #workspaceShell {
  flex: 1 1 auto !important;
}