/* Hypercurio — HC-302: the tour's chrome.
 *
 * The mask darkens the page and the hole is punched with a very large box-shadow rather than
 * with four separate panels or an SVG cutout. One element, no seams, and it animates as one
 * thing when the spotlight moves between steps.
 */

.tr-mask { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tr-hole {
  position: absolute; border-radius: var(--hc-radius-control);
  box-shadow: 0 0 0 9999px rgba(6, 9, 16, .74);
  outline: 2px solid var(--hc-accent); outline-offset: 0;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}

.tr-card {
  position: fixed; z-index: 81; width: min(340px, calc(100vw - 32px));
  padding: var(--hc-5);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-card); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.tr-card:focus { outline: none; }
.tr-count { margin: 0; color: var(--hc-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.tr-title { margin: var(--hc-2) 0 0; font-family: var(--hc-font-head); font-size: 20px; font-weight: 600; }
.tr-body { margin: var(--hc-2) 0 0; color: var(--hc-text-muted); font-size: 15px; }
.tr-foot { display: flex; align-items: center; gap: var(--hc-2); margin-top: var(--hc-5); }
.tr-nav { width: auto; min-width: 84px; }
.tr-foot .tr-nav:last-child { margin-left: 0; }
.tr-skip { margin-right: auto; background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.tr-skip:hover { color: var(--hc-text); }

/* Portrait: the card sits at the bottom rather than beside the target, because there is almost
   never room beside anything on a phone. */
.tr-card--bottom {
  left: 0 !important; right: 0; top: auto !important;
  bottom: 0; width: 100vw; max-width: 100vw;
  border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0;
  padding-bottom: max(var(--hc-5), env(safe-area-inset-bottom));
}

/* "With prefers-reduced-motion, steps change without animation." Both the spotlight move and
   the scroll are covered; the scroll behaviour is handled in the script for the same reason. */
@media (prefers-reduced-motion: reduce) {
  .tr-hole { transition: none; }
}