/* ===========================================================================
   The few things the demo adds INSIDE the frame. Nothing here is part of the
   software: it is the band that says what this is, the mark on every message
   that says nothing actually happened, and the line under the file picker.
   It uses the app's own tokens, so it redraws with each brand like everything
   else does.
   ======================================================================== */

.demo-band{
  position:relative;z-index:60;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:9px var(--gutter,20px);
  /* a solid card, not a translucent one: what this band says must be readable
     whatever the business behind it is painted in */
  background:var(--glass,rgba(255,255,255,.1));color:var(--ink,#fff);
  border-bottom:1px solid var(--glass-line,rgba(255,255,255,.24));
  font-size:.86rem;line-height:1.35;
}
.demo-band b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
.demo-band span{opacity:.82}
/* On a phone the band is one short line, so the software starts within a thumb's reach.
   It still says the two things that matter: invented, and nothing happens. */
.demo-band .short{display:none}
@media (max-width:759px){
  /* One centred line, clear of the rounded corners of a phone's screen and of
     the bezel the demo page draws: a line that starts at the left edge loses
     its first letters to the corner. */
  .demo-band{display:block;padding:12px 28px 7px;font-size:.8rem;line-height:1.3;text-align:center}
  .demo-band .long{display:none}
  .demo-band .short{display:inline}
  .demo-only{padding:7px 16px;font-size:.8rem}
}

.demo-only{
  position:relative;z-index:60;margin:0;
  padding:9px var(--gutter,20px);
  background:var(--glass,rgba(255,255,255,.1));color:var(--ink-2,inherit);
  border-bottom:1px solid var(--glass-line,rgba(255,255,255,.24));
  font-size:.86rem;line-height:1.35;
}
.demo-only[hidden]{display:none}

/* The mark on every message the software shows, so none of them can be read
   as a thing that just happened to a real account. */
.toast .demo-tag{
  flex:0 0 auto;font-style:normal;font-weight:700;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--r3,6px);
  /* the toast is a dark translucent panel in every theme, so this rides on it */
  background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.34);
}
/* a message that explains instead of claiming needs room to be read */
.toast{max-width:min(560px,88vw);text-align:left}

.demo-inline{
  display:block;margin-top:10px;font-size:.92rem;line-height:1.4;
  color:var(--ink-2,inherit);
}

/* ---- one product, the other locked ---------------------------------------
   The software's own Social / Assistant toggle is hidden while the demo is
   held to one product; this pill stands where it stood and switches the other
   one on. Drawn with the app's own tokens, so it follows every brand. */
html[data-demo-lock] .bar .prod{display:none !important}
html[data-demo-lock] .bar .tabs[data-tabs-set]:not([hidden]){}
.demo-upgrade{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  height:44px;padding:0 16px 0 12px;border-radius:var(--rp,999px);
  background:var(--on-world,rgba(255,255,255,.14));border:1px solid var(--on-world-line,rgba(255,255,255,.24));
  color:inherit;font:inherit;font-size:.9rem;line-height:1.1;cursor:pointer;white-space:nowrap;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
}
.demo-upgrade[hidden]{display:none}
.demo-upgrade b{font-weight:700}
.demo-upgrade span{opacity:.78;font-size:.82rem}
.demo-upgrade:hover{background:rgba(255,255,255,.22)}
.demo-upgrade .lk{position:relative;width:12px;height:15px;flex:0 0 auto;display:block}
.demo-upgrade .lk::before{content:"";position:absolute;left:2px;top:0;width:6px;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:5px 5px 0 0}
.demo-upgrade .lk::after{content:"";position:absolute;left:0;bottom:0;width:12px;height:9px;border-radius:2px;background:currentColor}
.demo-upgrade .lk.open::before{transform:translateX(3px) rotate(18deg);transform-origin:bottom left}
.demo-upgrade.is-open{background:var(--go-bg,#fff);color:var(--go-ink,#0a1416);border-color:transparent}
.demo-lockline{opacity:.95}
@media (max-width:759px){
  .demo-upgrade{height:38px;padding:0 12px 0 10px;font-size:.84rem}
  .demo-upgrade span{display:none}
}

/* The page behind everything. The software paints its world in a fixed layer,
   and sets <html> to its own near-black underneath — which is right for the
   dark design it ships with and wrong for a business whose world is ivory. It
   shows at the edges of a rubber-band scroll, so it follows the world. */
html{background:var(--deep,#041417)}

/* The band must not be covered by the bar the app makes sticky. */
@media (min-width:760px){
  .bar{top:0}
}