/* ============================================================
   Student onboarding tour — spotlight overlay
   Reuses the portal theme variables defined in student_portal.css
   (--brand, --brand-2, --brand-soft, --ink, --line, --r, --serif, --sans, --warn).
   ============================================================ */

:root {
  --st-gold: #d9901a;            /* matches portal --warn, used for arrow accent */
  --st-dim: rgba(27, 33, 48, .55);
}

/* ---- Overlay container (holds spotlight + tooltip + arrow) ---- */
#student-tour {
  position: fixed;
  inset: 0;
  z-index: 100000;              /* above topbar (sticky) and sidebar drawer */
  font-family: var(--sans, system-ui, sans-serif);
}
#student-tour[hidden] { display: none; }

/* Full-screen dimmer for centered (no-target) steps */
.st-backdrop {
  position: fixed;
  inset: 0;
  background: var(--st-dim);
  opacity: 0;
  transition: opacity .25s ease;
}
#student-tour.st-show .st-backdrop { opacity: 1; }

/* ---- Spotlight: a positioned box whose huge outer shadow dims
   everything except the rounded hole over the target element. ---- */
.st-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px var(--st-dim);
  transition: top .35s cubic-bezier(.4, 0, .2, 1),
              left .35s cubic-bezier(.4, 0, .2, 1),
              width .35s cubic-bezier(.4, 0, .2, 1),
              height .35s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
/* Pulsing brand glow ring around the cut-out */
.st-spotlight::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid var(--brand-2, #8067aa);
  animation: st-pulse 2s infinite;
}
@keyframes st-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(128, 103, 170, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(128, 103, 170, 0); }
  100% { box-shadow: 0 0 0 0 rgba(128, 103, 170, 0); }
}

/* ---- Tooltip card ---- */
.st-tooltip {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e8e6df);
  border-radius: var(--r, 18px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(27, 33, 48, .14));
  padding: 20px 20px 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, top .35s ease, left .35s ease;
}
#student-tour.st-show .st-tooltip { opacity: 1; transform: translateY(0); }

.st-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-2, #8067aa);
  margin: 0 0 6px;
}
.st-tooltip h3 {
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink, #1b2130);
  margin: 0 0 8px;
}
.st-tooltip p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2, #586173);
  margin: 0 0 16px;
}

/* ---- Celebration mark on the final "You're ready" card ---- */
.st-tooltip-celebrate { text-align: center; padding-top: 24px; }
.st-tooltip-celebrate .st-step-label,
.st-tooltip-celebrate h3,
.st-tooltip-celebrate p { text-align: center; }
.st-celebrate {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2, #8067aa) 0%, var(--brand, #4D3E77) 100%);
  box-shadow: 0 8px 20px rgba(77, 62, 119, .35);
  animation: st-pop .45s cubic-bezier(.2, .9, .3, 1.4) both;
}
.st-celebrate svg { width: 28px; height: 28px; }
.st-tooltip-celebrate .st-foot { justify-content: center; }
@keyframes st-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Footer: progress dots + controls ---- */
.st-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.st-dots { display: flex; gap: 6px; }
.st-dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line, #e8e6df);
  display: block;
  transition: background .2s, width .2s;
}
.st-dots i.on { background: var(--brand, #4D3E77); width: 18px; }

.st-actions { display: flex; align-items: center; gap: 6px; }
.st-skip {
  background: none;
  border: none;
  color: var(--ink-3, #8b94a4);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 9px;
}
.st-skip:hover { color: var(--ink-2, #586173); background: var(--surface-2, #fbfaf8); }
.st-next {
  background: var(--brand, #4D3E77);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 9px;
  transition: background .2s, transform .1s;
}
.st-next:hover { background: #3c3060; }
.st-next:active { transform: translateY(1px); }

/* ---- Curved arrow from tooltip to target ---- */
.st-arrow {
  position: fixed;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity .25s ease .1s;
}
#student-tour.st-show .st-arrow { opacity: 1; }
.st-arrow path { stroke-dasharray: 6 5; animation: st-dash 1.2s linear infinite; }
@keyframes st-dash { to { stroke-dashoffset: -22; } }

/* ---- Mobile: center everything, drop the arrow ---- */
@media (max-width: 920px) {
  .st-tooltip {
    left: 50% !important;
    top: auto !important;
    bottom: 18px;
    transform: translateX(-50%) translateY(6px);
    width: calc(100vw - 28px);
  }
  /* Flip to the top of the screen when the highlighted target is low, so the
     card never covers what it's pointing at (added by JS as .st-pin-top). */
  .st-tooltip.st-pin-top {
    bottom: auto !important;
    top: 16px !important;
  }
  #student-tour.st-show .st-tooltip { transform: translateX(-50%) translateY(0); }
  .st-arrow { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .st-spotlight,
  .st-tooltip { transition: none; }
  .st-spotlight::after { animation: none; }
  .st-arrow path { animation: none; }
  .st-celebrate { animation: none; }
}