/* Shared app shell: one sidebar layout and one demo bar for every app screen.
   Loaded after each page's own styles, so these rules win. */
.bar .logo{order:1}
.bar .side-foot{order:2;display:flex;align-items:center;gap:8px;margin-left:auto}
.bar .tabs{order:3;flex:1 1 100%}
.bar .side-foot .sample{display:inline-block;margin:0;align-self:center}
.bar .side-foot .icon-btn{margin:0;align-self:center;color:var(--ink);cursor:pointer}
.bar .tab-sep{display:none}
@media (max-width:560px){.bar .side-foot .sample{display:none}}
@media (min-width:1100px){
  .bar .logo{margin-right:0!important}
  .bar .tabs{flex:0 0 auto}
  .bar .tab-sep{display:block;margin:12px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .bar .side-foot{order:4;margin:auto 0 0!important;padding:12px 4px 2px;border-top:1px solid var(--line);justify-content:space-between}
  .bar .side-foot .sample,.bar .side-foot .icon-btn{align-self:center!important;margin:0!important}
}

/* "You're in the demo" bar */
body.has-demobar{padding-bottom:calc(84px + var(--lift,0px) + env(safe-area-inset-bottom,0px))}
.demobar{position:fixed;z-index:60;left:50%;bottom:calc(16px + var(--lift,0px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);transition:transform .28s ease,opacity .28s ease,left .28s ease;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:99px;background:rgba(13,27,42,.86);color:#fff;font-size:14px;font-weight:600;box-shadow:0 16px 40px rgba(13,27,42,.28);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);white-space:nowrap;max-width:calc(100% - 24px)}
:root[data-theme="dark"] .demobar{background:rgba(232,238,246,.92);color:#0B1320}
.demobar .dot{width:8px;height:8px;border-radius:50%;background:#3DCB88;box-shadow:0 0 0 0 rgba(61,203,136,.6);animation:dbp 2s ease-out infinite;flex:none}
@keyframes dbp{to{box-shadow:0 0 0 9px rgba(61,203,136,0)}}
.demobar .t{margin:0 6px 0 2px}
.demobar a{text-decoration:none;font-weight:700;padding:8px 14px;border-radius:99px;font-size:13.5px}
.demobar .join{background:#1652F0;color:#fff}
.demobar .leave{color:inherit;opacity:.8}
.demobar .leave:hover{opacity:1}
@media (min-width:1100px){.demobar{left:calc(50% + 124px)}}
@media (max-width:420px){.demobar{font-size:13px;padding-left:12px}.demobar .t{margin:0 2px}.demobar a{padding:8px 10px;font-size:13px}}
/* tucked: a small pill in the corner when a control scrolls under the full bar */
.demobar.tuck{left:auto;right:calc(16px + env(safe-area-inset-right,0px));transform:none;padding-left:12px}
.demobar.tuck .t,.demobar.tuck .leave{display:none}
/* away: slides off while a control is under it; comes back when the control moves on */
.demobar.away{opacity:0;transform:translate(-50%,calc(100% + 24px));pointer-events:none}
.demobar.tuck.away{transform:translateY(calc(100% + 24px))}
@media (prefers-reduced-motion:reduce){.demobar .dot{animation:none}.demobar{transition:none}}
body.has-demobar .toast{bottom:calc(84px + var(--lift,0px) + env(safe-area-inset-bottom,0px))!important}
/* round 3: toast keeps a readable width on every screen (was squeezed to one word per line) */
.toast{width:max-content!important;max-width:min(calc(100vw - 32px),440px)!important;text-align:center;overflow-wrap:break-word}