/* Presentation only: source screen, grid, chart and calculator styles stay intact. */
html, body { margin: 0; width: 100%; height: 100%; }
.omni-header, .omni-rail, .omni-global-actions { user-select: none; }
[data-demo-menu] { padding: 0; }
.demo-menu-heading { padding: 22px 18px 20px; font-size: 17px; font-weight: 650; color: #263a4b; border-bottom: 1px solid #dce3eb; }
.demo-menu-list { padding: 18px 10px; }
.demo-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 10px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: #405365; text-align: left; font: inherit; font-size: 12px; font-weight: 560; line-height: 1.5; }
.demo-menu-item > .mdi { font-size: 18px; color: #738495; flex-shrink: 0; }
.demo-menu-item > span { flex: 1; }
button.demo-menu-item { cursor: pointer; }
.demo-menu-item:focus-visible { outline: 2px solid #007ec5; outline-offset: -2px; }
.demo-menu-item.is-hovered { background: #e9f0f7; }
.demo-menu-item.is-selected { background: #e7f3fd; color: #126494; box-shadow: inset 3px 0 #087cb9; }
.demo-menu-item.is-selected > .mdi { color: #087cb9; }
.demo-submenus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms cubic-bezier(.22,.61,.36,1); }
.demo-submenus.is-open { grid-template-rows: 1fr; }
.demo-submenus > div { overflow: hidden; }
.demo-submenus .demo-menu-item { padding-left: 16px; font-size: 11.5px; min-height: 44px; font-weight: 450; }
.demo-submenus .demo-menu-item > .mdi { font-size: 16px; }
.demo-chevron { transition: transform 340ms; }
[aria-expanded="true"] .demo-chevron { transform: rotate(90deg); }
.demo-cursor { position: fixed; left: 0; top: 0; width: 30px; height: 38px; z-index: 10000; pointer-events: none; color: #fff; filter: drop-shadow(0 2px 2px #18344780); will-change: transform; }
.demo-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #20384b; stroke-width: 1.5px; }
.demo-cursor-ring { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px; border: 2px solid #007ec5; border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0; }
.demo-cursor-ring.is-clicking { animation: demo-click 440ms ease-out; }
.demo-progress { position: fixed; left: 0; bottom: 0; height: 3px; width: 100%; background: #007ec5; transform: scaleX(0); transform-origin: left; z-index: 10001; }
@keyframes demo-click { from { opacity: .55; transform: scale(.35); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .demo-submenus, .demo-chevron { transition: none; } }
/* Zone captions sit outside the data track; the Hole keeps its original time geometry. */
.buffer-position-track { overflow: visible; margin-top: 16px; }
.buffer-position-zones { inset: -14px 0 auto; height: 12px; font-size: 9px; font-weight: 600; }
.buffer-position-hole { border: 1px dashed #b34b59; box-sizing: border-box; }
.control-panel.buffer-detail-panel { overflow-y: scroll; scrollbar-gutter: stable; }
.buffer-detail-panel .buffer-detail { height: auto; min-height: 100%; }
.buffer-detail .buffer-hole-decision { grid-template-rows: auto auto auto auto minmax(76px, 1fr) auto; }
.buffer-order-dock { max-height: 180px; overflow-y: auto; scrollbar-gutter: stable; }
.buffer-detail-panel::-webkit-scrollbar, .buffer-order-dock::-webkit-scrollbar { width: 10px; }
.buffer-detail-panel::-webkit-scrollbar-track, .buffer-order-dock::-webkit-scrollbar-track { background: #edf2f6; }
.buffer-detail-panel::-webkit-scrollbar-thumb, .buffer-order-dock::-webkit-scrollbar-thumb { background: #879eaf; border: 2px solid #edf2f6; border-radius: 6px; }