/* v113-demo.css — demo mode (night build Oct 7–8 2026 · plan C3; ui/demo.js). Tokens only. Nothing here applies unless :root has data-demo
   (set by ui/demo.js while demo mode is on), except the banner's and the tour's own classes, which only exist then.
   · The banner (.dm-bar): one slim row on top of every screen, above the sidebar and the header — 40px, 48px on a phone (its words may take two
     lines there; the button words become icons with the same accessible names). The shell gives up exactly that height, so nothing scrolls twice.
   · The tour (#dp-tour): a layer over the page that takes no clicks itself — a ring around the part a stop explains and one small popover
     (12px corners, like a menu). It sits under the panels, sheets and menus (590), and fades in only when motion is allowed. */
:root[data-demo]{--demo-h:40px}
@media (max-width:560px){:root[data-demo]{--demo-h:48px}}
/* embed (the landing's iframe): a 28px strip with one chip */
:root[data-demo][data-embed]{--demo-h:0px}   /* embed: no banner (ui/demo.js bar() returns nothing there), so no height kept for it */
.dm-bar.is-embed{gap:8px;padding:0 12px;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-2)}
.dm-bar.is-embed .dm-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-chip{display:inline-flex;align-items:center;gap:4px;flex:none}

/* ---- the banner ---- */
.dm-bar{display:flex;align-items:center;gap:10px;height:var(--demo-h);padding:0 12px 0 16px;background:var(--st-blue-bg);border-bottom:1px solid var(--line);color:var(--text-1);font-size:var(--t-co);line-height:var(--lh-co);overflow:hidden}
.dm-ic{display:inline-flex;flex:none;color:var(--st-blue-fg)}
.dm-t{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap}
.dm-t b{font-weight:var(--w-semibold)}
.dm-acts{display:flex;align-items:center;gap:4px;flex:none}
.dm-bar .btn.ghost{color:var(--text-1)}
.dm-bar .btn.ghost svg{color:var(--st-blue-fg)}
.dm-get{text-decoration:none}
.dm-note{display:block;margin-top:6px;color:var(--text-3)}
.toast-fix.dm-note{margin-top:2px}
@media (max-width:900px){
  .dm-bar .dm-b{width:32px;padding:0}
  .dm-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:560px){
  .dm-bar{gap:8px;padding:0 8px 0 16px;font-size:var(--t-meta);line-height:var(--lh-sh)}
  .dm-t{white-space:normal}
  .dm-acts{gap:2px}
  .dm-bar .dm-b{width:36px;height:36px}
  .dm-bar .dm-get{height:36px}
}

/* ---- the shell gives up the banner's height ---- */
:root[data-demo] .app{height:calc(100vh - var(--demo-h));height:calc(100dvh - var(--demo-h))}
:root[data-demo] .au-app{height:calc(100vh - var(--demo-h));height:calc(100dvh - var(--demo-h))}
:root[data-demo] .ask,:root[data-demo] .ask-bw{height:calc(100dvh - var(--top-h) - var(--demo-h))}
:root[data-demo] .ask-bw > .ask{height:auto}
:root[data-demo] .dp-side{max-height:calc(100dvh - var(--top-h) - 32px - var(--demo-h))}
:root[data-demo] .stg-nav,:root[data-demo] .ig-toc{max-height:calc(100vh - var(--top-h) - 36px - var(--demo-h))}
:root[data-demo] .notif-pop{top:calc(64px + var(--demo-h));max-height:calc(100vh - 60px - var(--demo-h))}
:root[data-demo] .ap{top:calc(var(--top-h,52px) + 8px + var(--demo-h))}
/* closing round L (#50): the banner's 40px comes out of the sidebar's rows (25 × 2px), so at 1920×1080 every row, Reports included, shows without
   scrolling the sidebar — a mouse screen only; touch rows keep their size */
@media (min-width:901px) and (max-height:1200px) and (hover:hover){:root[data-demo] .app.v89 .sb:not(.is-rail) .sb-nav .nav-i{height:28px}}

/* ---- the tour ---- */
.dm-tour{position:fixed;inset:0;z-index:590;pointer-events:none}
.dm-ring{position:fixed;border:2px solid var(--ring);border-radius:var(--r-12);box-shadow:0 0 0 4px var(--accent-tint);pointer-events:none}
.dm-pop{position:fixed;left:16px;top:16px;width:320px;max-width:calc(100vw - 32px);padding:14px 16px 12px;border-radius:var(--r-12);background:var(--elev);border:1px solid var(--line-strong);box-shadow:var(--sh-high);color:var(--text-1);pointer-events:auto}
.dm-pop-k{margin:0 0 4px;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3);font-variant-numeric:tabular-nums}
.dm-pop h2{margin:0;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--text-1)}
.dm-pop-b{margin:4px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.dm-pop-n{margin:6px 0 0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--text-3)}
.dm-pop-f{display:flex;align-items:center;gap:6px;margin-top:12px}
.dm-pop-f .grow{flex:1 1 auto}
@media (max-width:560px){.dm-pop-f .btn{height:36px}}
@media (prefers-reduced-motion:no-preference){.dm-pop.is-in,.dm-ring{animation:dm-in var(--dur-2) var(--ease-out)}}
@keyframes dm-in{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}

@media print{.dm-bar,.dm-tour{display:none}}