/* A product tour: one frame at a readable size, and a row of tabs that choose what is in it.

   Shared by echorb.html and guardian-forge.html. It lived inline in echorb.html until Giovanni
   asked for the same treatment on Guardian Forge; a second inline copy would have been two
   stylesheets to keep in step, so it moved here rather than being duplicated.

   The case for the layout is measured, not decorative. Echorb showed three screenshots at 388px
   and Guardian Forge two at 634px, and both are dense application windows: at those sizes nothing
   inside any of them can be read, so they carry mood rather than information. One frame at
   container width shows a single view at a size where the interface is legible. */

.tour-frame .win-shot img,
.tour-frame .tour-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.1rem;
}

/* Anchors doing tab duty: they must not look like body links. */
.tour-tabs a.tour-tab { text-decoration: none; }

.tour-tab {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--light-gray);
  background: rgba(10, 0, 21, 0.55);
  border: 1px solid rgba(0, 212, 255, 0.28);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tour-tab:hover { border-color: rgba(0, 212, 255, 0.6); }
.tour-tab[aria-selected="true"] {
  color: var(--ai-cyan);
  border-color: var(--ai-cyan);
  background: rgba(0, 212, 255, 0.12);
}
/* A visible focus ring is the point of building real tabs rather than clickable divs. */
.tour-tab:focus-visible { outline: 2px solid var(--ai-cyan); outline-offset: 3px; }

/* Where a page gives each view its own sentence, it sits under the frame and only the active one
   is shown. The others stay in the DOM rather than being generated, because they are page copy. */
.tour-desc {
  margin-top: 0.9rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) { .tour-tab { transition: none; } }
html[data-motion="still"] .tour-tab { transition: none; }