/* A short tour video, in the sign in band or in its own dialog: tabs when there is more than one, then the video at 16:9. */
.tours { display: grid; gap: 12px; }
.tours-tabs { display: inline-flex; gap: 4px; justify-self: start; padding: 4px; border-radius: var(--r-full); background: var(--stage-fill); }
.tours-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--stage-muted); font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer;
}
.tours-tab svg { width: 14px; height: 14px; }
.tours-tab:hover { color: var(--stage-ink); }
.tours-tab[aria-selected="true"] { background: var(--stage-action); color: #fff; }
.tours-tab:focus-visible { outline: 2px solid var(--stage-flow); outline-offset: 2px; }
.tours-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); background: var(--stage-bg); box-shadow: 0 0 0 1px var(--stage-line); }
.tours-frame video, .tours-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--stage-bg); }
.tours-line { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--stage-muted); opacity: .6; }
.tours-line b { color: inherit; font-weight: 600; }

/* In its dialog the player sits on the same dark stage as in the sign in band. */
.demomodal .tours { padding: 14px; background: var(--stage-bg); }
.demomodal .tours-frame { box-shadow: none; }