/* DocketWatch first-run help tour (docketwatch-qad).
   BEA-branded spotlight overlay + tooltip card. Colors come from theme.css. */

/* ---- the ? help / replay button in the nav ---- */
.nav-help {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--bea-border, #E0DDE3);
  background: var(--bea-white, #fff);
  color: var(--bea-purple, #4F3D63);
  font: 700 1rem/1 'Open Sans', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-help:hover {
  background: var(--bea-purple, #4F3D63);
  border-color: var(--bea-purple, #4F3D63);
  color: #fff;
  transform: translateY(-1px);
}
.nav-help:focus-visible { outline: 2px solid var(--bea-amber, #C17F47); outline-offset: 2px; }

/* Mobile bar (docketwatch-hfrc / -92pi). This lives here, not in theme.css's
   mobile section, because tour.css loads after theme.css: an equal-specificity
   `.nav-help` rule over there loses the cascade and silently does nothing —
   which is exactly what happened to the old `margin-left: auto`, leaving the
   controls packed against the wordmark instead of the right edge.
   44px square is the WCAG 2.5.5 / iOS touch minimum (docketwatch-92pi); the
   glyph scales with it so a 2rem "?" doesn't rattle around in a 44px circle. */
@media (max-width: 900px) {
  .nav-help {
    margin-left: auto;
    width: 44px; height: 44px;
    font-size: 1.15rem;
  }
}

/* ---- overlay scaffold ---- */
.tour-active { overflow: hidden; }           /* lock scroll while touring */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;                       /* clicks fall through except on card */
  opacity: 0;
  transition: opacity .25s ease;
}
.tour-overlay.is-visible { opacity: 1; }

/* the spotlight: a transparent box whose massive box-shadow dims everything else */
.tour-spotlight {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(36, 28, 46, 0.66);
  outline: 2px solid var(--bea-amber, #C17F47);
  outline-offset: 3px;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.tour-spotlight.is-pulsing { animation: tour-ring 1.8s ease-in-out infinite; }
@keyframes tour-ring {
  0%, 100% { outline-color: var(--bea-amber, #C17F47); outline-offset: 3px; }
  50%      { outline-color: var(--bea-amber-light, #D4A373); outline-offset: 6px; }
}
/* welcome step: dim the whole screen, no hole */
.tour-overlay.is-welcome .tour-spotlight {
  box-shadow: 0 0 0 9999px rgba(36, 28, 46, 0.72);
  outline: none;
  width: 0; height: 0;
  left: 50%; top: 50%;
}

/* ---- the tooltip card ---- */
.tour-card {
  position: absolute;
  width: min(430px, calc(100vw - 32px));
  background: var(--bea-white, #fff);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(36, 28, 46, 0.32), 0 2px 8px rgba(36, 28, 46, 0.18);
  padding: 1.25rem 1.35rem 1.1rem;
  pointer-events: auto;
  font-family: 'Open Sans', system-ui, sans-serif;
  color: var(--bea-text, #333);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.2, .64, 1);
}
.tour-card.is-in { opacity: 1; transform: none; }
.tour-card.is-center {                        /* welcome: dead-center modal */
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -48%) scale(.97);
}
.tour-card.is-center.is-in { transform: translate(-50%, -50%); }

/* the little arrow pointing at the target */
.tour-arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--bea-white, #fff);
  transform: rotate(45deg);
}
.tour-card[data-pos="bottom"] .tour-arrow { top: -7px;    left: var(--arrow-x, 28px); box-shadow: -2px -2px 4px rgba(36,28,46,.06); }
.tour-card[data-pos="top"]    .tour-arrow { bottom: -7px; left: var(--arrow-x, 28px); box-shadow:  2px  2px 4px rgba(36,28,46,.06); }
.tour-card[data-pos="left"]   .tour-arrow { right: -7px;  top:  var(--arrow-y, 28px); box-shadow:  2px -2px 4px rgba(36,28,46,.06); }
.tour-card[data-pos="right"]  .tour-arrow { left: -7px;   top:  var(--arrow-y, 28px); box-shadow: -2px  2px 4px rgba(36,28,46,.06); }
.tour-card.is-center .tour-arrow { display: none; }

/* ---- card content ---- */
.tour-kicker {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bea-amber-dark, #A86B3A);
  background: var(--bea-bg-alt, #F0EDF4);
  padding: .2rem .5rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}
.tour-title {
  margin: 0 0 .45rem;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--bea-purple, #4F3D63);
  line-height: 1.25;
}
.tour-body { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--bea-text, #333); }
.tour-body b, .tour-body strong { color: var(--bea-purple-dark, #3D2E4E); }

/* ---- footer: progress + buttons ---- */
.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.15rem;
  gap: .75rem;
}
.tour-progress { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bea-purple-faint, #E8E4ED); transition: background .2s, transform .2s; }
.tour-dot.is-done { background: var(--bea-amber-light, #D4A373); }
.tour-dot.is-now  { background: var(--bea-amber, #C17F47); transform: scale(1.35); }
.tour-count { font-size: .76rem; color: var(--bea-text-light, #666); margin-left: .4rem; white-space: nowrap; }

.tour-btns { display: flex; align-items: center; gap: .5rem; }
.tour-btn {
  font: 600 .85rem/1 'Open Sans', system-ui, sans-serif;
  padding: .5rem .85rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.tour-btn:active { transform: translateY(1px); }
.tour-btn-primary { background: var(--bea-amber, #C17F47); color: #fff; }
.tour-btn-primary:hover { background: var(--bea-amber-dark, #A86B3A); }
.tour-btn-ghost { background: transparent; color: var(--bea-text-light, #666); }
.tour-btn-ghost:hover { color: var(--bea-purple, #4F3D63); }
.tour-btn-skip {
  background: none; border: none; cursor: pointer;
  font: 600 .8rem/1 'Open Sans', system-ui, sans-serif;
  color: var(--bea-text-light, #666);
  padding: .4rem .2rem;
}
.tour-btn-skip:hover { color: var(--bea-purple, #4F3D63); text-decoration: underline; }
.tour-btn:focus-visible, .tour-btn-skip:focus-visible { outline: 2px solid var(--bea-amber, #C17F47); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tour-overlay, .tour-spotlight, .tour-card { transition: none; }
  .tour-spotlight.is-pulsing { animation: none; }
}

/* ---- Mobile (docketwatch-z10d): the card + its controls must fit 390px ---- */
@media (max-width: 480px) {
  .tour-card { width: calc(100vw - 24px); padding: 1rem 1.05rem 0.9rem; }
  .tour-title { font-size: 1.05rem; }
  .tour-body { font-size: 0.88rem; }
  /* Footer wraps: progress dots on their own line, buttons right-aligned
     below — nothing runs off the right edge. */
  .tour-foot { flex-wrap: wrap; gap: 0.55rem; margin-top: 0.9rem; }
  .tour-progress { flex: 1 1 100%; }
  .tour-btns { flex: 1 1 100%; justify-content: flex-end; }
  /* 44px minimum touch size (docketwatch-92pi). "Skip" is narrow text, so it
     needs the width floor too. */
  .tour-btn {
    padding: 0.5rem 0.9rem; min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .tour-btn-skip {
    padding: 0.4rem 0.55rem; min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}