/* Tour-only styling for demo.html - everything else on the page (header,
   toolbars, rows, modals) reuses styles.css's real admin classes directly,
   so the mock UI looks identical to the actual admin tool. This file is
   just the guided-tour chrome layered on top of it. */

/* Groups the header's existing links/buttons into one element purely so
   the tour's last step has a single thing to point its spotlight at -
   same flex/gap/align values .site-header already uses on its own direct
   children, so wrapping them here doesn't change how they lay out. */
#admin-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* .header-link--activity/--github/--export themselves now live in
   styles.css (shared with the real admin.html) - demo.js's step 11 reuses
   those same three classes on its tour-text <span>s, matching styles.css's
   colours exactly without a second copy of them here. */

#demo-banner {
  padding: 0.6rem 1.5rem;
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}

#demo-banner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

/* A single full-viewport SVG whose path is the whole screen minus one
   rectangular hole per current target (evenodd fill-rule - any number of
   holes, each independently sized/positioned, dims everything outside all
   of them while leaving every target's own rectangle fully lit). Replaces
   an earlier "surround the union of all targets with 4 shade rectangles"
   approach once a step needed two targets with genuinely separate frames
   around each (e.g. the header's Import button and the Import modal,
   nowhere near each other) rather than one box spanning both. */
#tour-shade-svg {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#tour-shade-path {
  fill: rgba(0, 0, 0, 0.72);
}

/* One of these per current target (see renderRings in demo.js) - plain
   divs rather than the SVG above, since a crisp rounded border/glow is
   simpler to get right with normal CSS than drawn into the same path. */
.tour-ring {
  position: fixed;
  z-index: 201;
  border: 3px solid #f09433;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(240, 148, 51, 0.25), 0 0 24px rgba(240, 148, 51, 0.5);
  pointer-events: none;
  transition: all 0.2s ease;
}

#tour-card {
  position: fixed;
  z-index: 202;
  width: min(340px, calc(100vw - 2rem));
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid rgba(128, 128, 128, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

#tour-step-count {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f09433;
  margin-bottom: 0.35rem;
}

#tour-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--fg);
}

#tour-text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg);
}

#tour-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#tour-skip {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

#tour-skip:hover {
  color: var(--fg);
}

#tour-nav {
  display: flex;
  gap: 0.5rem;
}

#tour-back,
#tour-next {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#tour-back {
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: transparent;
  color: var(--fg);
}

#tour-back:hover {
  background: rgba(128, 128, 128, 0.15);
}

#tour-back:disabled {
  opacity: 0.4;
  cursor: default;
}

#tour-next {
  border: none;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

#tour-next:hover {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

#tour-restart {
  position: fixed;
  z-index: 199;
  bottom: 1.25rem;
  right: 1.25rem;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to left, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#tour-restart:hover {
  background: linear-gradient(to right, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}