/*  demo.css — the only thing the demo adds to the application's own look.
 *
 *  Two panels' worth of style and nothing else. Everything the visitor sees is
 *  drawn by src/styles.css and src/theme.css, unchanged, because a demo that
 *  is styled differently teaches the wrong product.
 *
 *  The tokens below are the application's: --raised, --hairline, --glow, and
 *  they follow the accent the visitor picks, like the rest of the window.
 */

/* The way back, when the demo is the whole window.
 *
 * The same pill MOTION's demo has, in the same corner and at the same size, so
 * somebody who has seen one recognises the other. Built by demo-bridge.js and
 * only when this document is the top one — see the note there.
 *
 * Fixed rather than in the title bar: the interface below is the application's
 * own and nothing here should have to find a place inside its layout. */
.demo-home {
  position: fixed;
  top: 9px;
  left: 14px;
  z-index: 8000;

  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;

  border: 1px solid var(--divider, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(8, 8, 12, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim, rgba(255, 255, 255, 0.42));
  transition: color 0.15s ease, border-color 0.15s ease;
}

.demo-home:hover {
  color: var(--text, rgba(255, 255, 255, 0.94));
  border-color: var(--hairline, rgba(255, 255, 255, 0.22));
}

.demo-home svg { width: 13px; height: 13px; display: block; }

/* And the title bar makes room for it. Without this the pill lands exactly on
   the companion button, which the rule below puts at the same 14px. */
html.demo-alone .companion-btn { left: 164px; }

/* The companion button, hard left.
 *
 * theme.css puts it at 82px on macOS to clear the traffic lights, and 80px
 * everywhere else to clear Windows' own controls. A browser tab has neither, so
 * both numbers leave a wide empty gap with nothing in it — the same mistake the
 * plug-in made until it was given left: 14px for exactly this reason.
 *
 * 14px is the application's own gutter, the one the account button on the right
 * is held at. */
html[data-platform="web"] .companion-btn {
  left: 14px;
}

.demo-native-veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 10, 13, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.demo-native-veil.is-open {
  opacity: 1;
}

.demo-native-panel {
  width: min(420px, 100%);
  padding: 26px 26px 22px;
  background: var(--raised, #17171a);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(6px) scale(0.985);
  transition: transform 0.18s ease;
}

.demo-native-veil.is-open .demo-native-panel {
  transform: none;
}

.demo-native-panel h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text, #e8e8ea);
}

.demo-native-panel p {
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--read, rgba(232, 232, 234, 0.62));
}

.demo-native-row {
  display: flex;
  gap: 9px;
  align-items: center;
}

.demo-native-get,
.demo-native-close {
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.demo-native-get {
  background: var(--glow, #ffb27a);
  border: 1px solid transparent;
  color: var(--on-glow, rgba(9, 11, 15, 0.92));
}

.demo-native-get:hover {
  filter: brightness(1.06);
}

.demo-native-close {
  background: none;
  border: 1px solid var(--divider, rgba(255, 255, 255, 0.12));
  color: var(--dim, rgba(232, 232, 234, 0.55));
}

.demo-native-close:hover {
  color: var(--text, #e8e8ea);
  border-color: var(--hairline, rgba(255, 255, 255, 0.2));
}