/* The guided tour: a ring around the control of the step and a panel that
   carries the caption and the controls.  The panel never covers the ring. */

.tour-overlay { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: none; }

.tour-ring {
  position: fixed; border: 3px solid var(--accent, #1f5f8b); border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(9, 16, 24, .3); pointer-events: none;
}

.tour-panel {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  box-sizing: border-box; width: min(40rem, calc(100% - 2rem)); max-height: 60vh; overflow-y: auto;
  background: var(--surface, #fff); color: var(--fg, #142230);
  border: 1px solid var(--line, #dde3e9); border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 4px 14px rgba(20, 34, 48, .1));
  padding: 0.9rem 1rem; pointer-events: auto;
}

.tour-count { margin: 0; font-size: .76rem; letter-spacing: normal; color: var(--fg-2, #4a5b6b); }
.tour-path { margin: 0 0 .1rem; font-size: .78rem; letter-spacing: .04em; color: var(--fg-2, #4a5b6b); font-weight: 600; }
.tour-title { margin: .15rem 0 .35rem; font-size: 1.1rem; }
.tour-caption { margin: 0 0 .5rem; font-size: .95rem; }
.tour-warning { margin: 0 0 .5rem; font-size: .88rem; color: var(--warn, #a5650b); }

/* A story step and the line between tracks have no control to ring, so the
   panel sits in the centre of the screen. */
.tour-panel.is-centred {
  top: 50%; bottom: auto; transform: translate(-50%, -50%);
}

/* The Muse mark.  The hidden attribute hides the block.  The rule below
   applies only when the block is shown, so it does not override hidden. */
.tour-muse:not([hidden]) {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline;
  margin: 0 0 .5rem;
}
.tour-muse-badge {
  display: inline-block; flex: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: none; line-height: 1.2;
  padding: .12rem .4rem; border-radius: 999px;
  background: var(--accent, #1f5f8b); color: #fff;
}
.tour-replay:not([hidden]) {
  display: block; margin: 0 0 .5rem; font-size: .85rem; color: var(--fg-2, #4a5b6b);
}
.tour-note { margin: 0 0 .5rem; font-size: .85rem; color: var(--fg-2, #4a5b6b); }

/* Start fresh: the one write the tour may offer, on the first step of the
   café path.  The note beside the button says what the server answered. */
.tour-fresh { flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .5rem; }
.tour-fresh:not([hidden]) { display: flex; }
.tour-fresh [hidden] { display: none; }
.tour-fresh-note { font-size: .82rem; color: var(--fg-2, #4a5b6b); }
.tour-fill { margin: 0 0 .5rem; }
.tour-permit:not([hidden]) {
  display: block; margin: 0 0 .5rem; padding: .5rem .65rem;
  border: 1px solid var(--line, #dde3e9); border-radius: 8px; font-size: .88rem;
}
.tour-permit h3 { margin: 0 0 .3rem; font-size: .95rem; }
.tour-permit p { margin: 0 0 .15rem; }

.tour-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tour-controls .btn { font-size: .88rem; }

/* The note beside the voice button says why the voice did not start. */
.tour-voice-note { font-size: .82rem; color: var(--warn, #a5650b); }

/* The hidden attribute hides the control of the tour.  The buttons of the
   interface set a display of their own, which would otherwise show a button
   that the tour has hidden, such as Play voice before a clip is named. */
.tour-overlay [hidden] { display: none; }

/* The countdown of the auto-play sits beside the button that starts it.  The
   text counts the seconds down; the thin bar fills over the step. */
.tour-auto { display: inline-flex; flex-direction: column; gap: .2rem; min-width: 5.5rem; }
.tour-countdown { font-size: .78rem; color: var(--fg-2, #4a5b6b); white-space: nowrap; }
.tour-progress { display: block; height: 3px; border-radius: 2px; background: var(--line, #dde3e9); overflow: hidden; }
/* The bar grows by a scale, not by a width: the browser animates the
   transform, so the bar never reflows the panel around it. */
.tour-progress-fill {
  display: block; height: 100%; width: 100%; background: var(--accent, #1f5f8b);
  transform: scaleX(0); transform-origin: left center; transition: transform 1s linear;
}

@media (max-width: 720px) {
  .tour-panel:not(.is-centred) { bottom: 4.5rem; max-height: 50vh; }
  .tour-panel.is-centred { max-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-progress-fill { transition: none; }
}