/* Frame the demo without changing the application's financial layout. */
:root{--demo-bar-height:82px}
body.demo-app{padding-top:var(--demo-bar-height)}
.demo-bar{position:fixed;z-index:11000;inset:0 0 auto;background:#f7fbff;border-bottom:1px solid #d9e6f2;color:#233342;padding:10px 22px;box-shadow:0 4px 18px #23334206;font:14px/1.45 'Golos Text',system-ui,sans-serif}
.demo-bar-main{display:flex;align-items:center;gap:22px;max-width:1700px;margin:auto}
.demo-home{white-space:nowrap;color:#526f8b;text-decoration:none;display:flex;align-items:center;min-height:44px}
.demo-bar-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.demo-bar-copy strong{font-size:15px;font-weight:650;color:#24496b}
.demo-bar-copy span{font-size:12px;color:#657e94}
.demo-bar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.demo-bar button,.demo-bar-actions a,.demo-confirm button,.demo-leave{border:1px solid #d9e4ed;border-radius:11px;background:white;color:#305473;padding:10px 14px;min-height:44px;cursor:pointer;font:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:550}
.demo-bar .demo-primary,.demo-confirm .demo-primary{background:#3390ec;border-color:#3390ec;color:#fff}
.demo-bar button:disabled,.demo-confirm button:disabled{opacity:.6;cursor:wait}
.demo-status{margin:0 auto;max-width:1700px;font-size:12px;color:#946326}
.demo-status:not(:empty){margin-top:8px}
.demo-app>.app{min-height:calc(100dvh - var(--demo-bar-height))}
.demo-app .sidebar{top:var(--demo-bar-height);height:calc(100dvh - var(--demo-bar-height))}
/* The full demo has more sections than the original four-view example. */
html[data-ui=desktop] .demo-app .sidebar{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable}
html[data-ui=desktop] .demo-app .sidebar>*{flex-shrink:0}
.demo-app .online-launch{top:var(--demo-bar-height)}
.demo-confirm{border:1px solid #dbe5ee;border-radius:20px;padding:26px;max-width:480px;width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;color:#233342;box-shadow:0 22px 70px #23334226;font:14px/1.55 'Golos Text',system-ui,sans-serif}
.demo-confirm::backdrop{background:#102d4559;backdrop-filter:blur(3px)}
.demo-confirm h2{margin:0 0 12px;font-size:21px;letter-spacing:-.4px}
.demo-confirm h3{margin:22px 0 10px;font-size:16px}
.demo-confirm p{margin:0 0 14px;color:#62778c}
.demo-confirm .demo-confirm-error{color:#bd485d}
.demo-confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
.demo-bar :focus-visible,.demo-confirm :focus-visible{outline:3px solid #3390ec77;outline-offset:3px}
.demo-scenario{max-width:620px}
.demo-dialog-heading{display:flex;align-items:flex-start;gap:15px;justify-content:space-between}
.demo-dialog-heading>button{flex:0 0 44px;font-size:24px;line-height:1;padding:0}
.demo-dialog-heading h2{padding-top:7px}
.demo-simulation-label,.demo-simulation-note{border:1px solid #d9e7f4;background:#f1f7fd;border-radius:10px;color:#486985!important;padding:10px 12px;font-size:12px;line-height:1.5}
.demo-simulation-note{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 14px}
.demo-simulation-note button{white-space:nowrap;min-height:44px}
.demo-inbox{display:grid;gap:8px}
.demo-inbox article{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid #e1e8ef;border-radius:12px;padding:12px}
.demo-inbox article>div{min-width:0;overflow-wrap:anywhere}
.demo-inbox article b,.demo-inbox article small{display:block}
.demo-inbox article small{margin-top:3px;color:#6f8193;font-size:12px}
.demo-inbox article>button{flex-shrink:0}
.demo-inbox .demo-done{font-size:12px;color:#6b8091;text-align:right;max-width:110px}
.demo-import-facts{display:grid;gap:8px;margin:12px 0 20px}
.demo-import-facts>div{display:flex;justify-content:space-between;gap:20px;padding-bottom:8px;border-bottom:1px solid #e5edf4}
.demo-import-facts dd{font-weight:650}
@media(max-width:850px){.demo-bar{padding:9px 16px}.demo-bar-main{gap:10px 13px;flex-wrap:wrap}.demo-home{min-height:30px;font-size:12px}.demo-bar-copy{min-width:calc(100% - 125px)}.demo-bar-actions{margin-left:auto}.demo-bar-actions a,.demo-bar button{font-size:12px}}
@media(max-width:740px){.demo-app .sidebar{top:auto;height:66px}.demo-bar{padding:8px 12px}.demo-bar-main{gap:6px 10px}.demo-bar-copy{min-width:calc(100% - 120px)}.demo-bar-copy strong{font-size:13px}.demo-bar-copy span{font-size:11px}.demo-bar .demo-home{font-size:11px}.demo-bar-actions{width:100%;gap:7px}.demo-bar-actions>*{flex:1}.demo-bar button{min-height:44px;padding:7px 10px}.demo-confirm{padding:18px}.demo-confirm-actions{flex-wrap:wrap}.demo-confirm-actions button{flex:1}.demo-status{font-size:11px}.demo-inbox article{align-items:flex-start;flex-wrap:wrap;padding:10px}.demo-inbox article>button{width:100%}.demo-simulation-note{align-items:flex-start;gap:8px}.demo-simulation-note span{min-width:0}}