/* walkthrough.css — SquareKeeper shared walkthrough styles
 * Per SQUAREKEEPER_WALKTHROUGH_SPEC.md (locked 2026-05-15).
 *
 * INVARIANT: this file must be byte-identical between
 *   Platform/dashboard/dist/assets/css/walkthrough.css
 *   Platform/portal/dist/assets/css/walkthrough.css
 * Edit one, copy to the other in the same commit.
 *
 * High z-index (9998/9999) so it sits above module chrome, banners,
 * dropdowns. Single absolutely-positioned spotlight div uses the
 * box-shadow 9999px trick to darken everything outside it — no
 * separate backdrop element.
 */

.wt-spotlight {
  position: absolute;
  border-radius: 8px;
  border: 2px solid var(--wt-brand, #11A6F6);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  z-index: 9998;
  transition: top 250ms ease, left 250ms ease,
              width 250ms ease, height 250ms ease;
}

/* Centered-modal steps: spotlight collapses to invisible point.
   Backdrop still darkens the page via the box-shadow trick. */
.wt-spotlight-hidden {
  border-color: transparent;
}

.wt-tooltip {
  position: absolute;
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 20px 22px 18px;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  transition: top 250ms ease, left 250ms ease;
}

/* Dark-theme tooltip — opt in via [data-theme="dark"] on html/body */
[data-theme="dark"] .wt-tooltip {
  background: #1A1A23;
  color: #E2E8F0;
  border-color: rgba(226, 232, 240, 0.10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.wt-tooltip-counter {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 8px;
}
[data-theme="dark"] .wt-tooltip-counter { color: #94A3B8; }

.wt-tooltip-title {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}
[data-theme="dark"] .wt-tooltip-title { color: #F8FAFC; }

.wt-tooltip-body {
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  margin-bottom: 16px;
}
[data-theme="dark"] .wt-tooltip-body { color: #CBD5E1; }

.wt-tooltip-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wt-tooltip-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.wt-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.wt-btn-skip {
  background: transparent;
  color: #64748B;
  border-color: transparent;
}
.wt-btn-skip:hover { color: #0F172A; background: rgba(15, 23, 42, 0.05); }
[data-theme="dark"] .wt-btn-skip { color: #94A3B8; }
[data-theme="dark"] .wt-btn-skip:hover { color: #F8FAFC; background: rgba(255, 255, 255, 0.05); }

.wt-btn-back {
  background: transparent;
  color: #475569;
  border-color: rgba(15, 23, 42, 0.15);
}
.wt-btn-back:hover { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.25); }
[data-theme="dark"] .wt-btn-back { color: #CBD5E1; border-color: rgba(255, 255, 255, 0.15); }
[data-theme="dark"] .wt-btn-back:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); }

.wt-btn-next {
  background: var(--wt-brand, #11A6F6);
  color: #001423;
  border-color: var(--wt-brand, #11A6F6);
  font-weight: 600;
}
.wt-btn-next:hover { filter: brightness(0.95); }
.wt-btn-next:focus-visible {
  outline: 2px solid var(--wt-brand, #11A6F6);
  outline-offset: 2px;
}

/* Reduced-motion: snap instead of animate */
@media (prefers-reduced-motion: reduce) {
  .wt-spotlight,
  .wt-tooltip {
    transition: none;
  }
}

/* Narrow viewport: shrink tooltip width to fit */
@media (max-width: 480px) {
  .wt-tooltip {
    width: calc(100vw - 32px);
    padding: 16px 18px 14px;
  }
}