/*!
 * Toutour v0.1 (MIT) — spotlight tour styles.
 * Themeable via CSS custom properties; sensible light/dark defaults built in.
 * Override on :root to match your design system:
 *   --tt-surface --tt-text --tt-muted --tt-accent --tt-border --tt-radius --tt-mask
 */
:root {
  --tt-surface: #ffffff;
  --tt-text: #111827;
  --tt-muted: #6b7280;
  --tt-accent: #7c3aed;
  --tt-accent-bg: #ede9fe;
  --tt-border: #e5e7eb;
  --tt-radius: 12px;
  --tt-mask: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tt-surface: #16161a;
    --tt-text: #f9fafb;
    --tt-muted: #9ca3af;
    --tt-accent: #a78bfa;
    --tt-accent-bg: #2b2350;
    --tt-border: #2a2a33;
  }
}

#ttBlock, #ttSpot, #ttTip { display: none; }
#ttBlock.show { display: block; position: fixed; inset: 0; background: transparent; }
#ttSpot.show {
  display: block; position: fixed; pointer-events: auto;
  box-shadow: 0 0 0 200vmax var(--tt-mask);
  border: 2px solid var(--tt-accent); border-radius: 10px;
  /* CVD-safe: a white hairline between the accent ring and the dark mask makes
     the spotlight edge readable by luminance alone, whatever the viewer's
     color vision. Override --tt-halo to transparent to disable. */
  outline: 1px solid var(--tt-halo, rgba(255, 255, 255, .85));
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease, border-radius .35s ease;
}
#ttSpot.tt-mask-off { box-shadow: none; }
#ttSpot.tt-ring-off { border-color: transparent; }
#ttSpot.no-anim { transition: none !important; }

#ttTip.show {
  display: block; position: fixed;
  background: var(--tt-surface); color: var(--tt-text);
  border: 1px solid var(--tt-border); border-radius: var(--tt-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  padding: .8rem .9rem .55rem; width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  font: 400 14px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#ttTip::before {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--tt-surface); transform: rotate(45deg); display: none;
}
#ttTip.tip-right::before  { display: block; left: -7px;  top: var(--tt-arrow-off, 20px); border-left: 1px solid var(--tt-border); border-bottom: 1px solid var(--tt-border); }
#ttTip.tip-left::before   { display: block; right: -7px; top: var(--tt-arrow-off, 20px); border-right: 1px solid var(--tt-border); border-top: 1px solid var(--tt-border); }
#ttTip.tip-bottom::before { display: block; top: -7px;   left: var(--tt-arrow-off, 20px); border-left: 1px solid var(--tt-border); border-top: 1px solid var(--tt-border); }
#ttTip.tip-top::before    { display: block; bottom: -7px;left: var(--tt-arrow-off, 20px); border-right: 1px solid var(--tt-border); border-bottom: 1px solid var(--tt-border); }

.tt-head  { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.tt-ico   { font-size: 1.15rem; line-height: 1; }
.tt-count { font-size: .68rem; font-weight: 600; background: var(--tt-accent-bg); color: var(--tt-accent); border-radius: 999px; padding: .14rem .55rem; }
.tt-body  { font-size: .84rem; }
.tt-foot  { display: flex; gap: .5rem; margin-top: .7rem; }
.tt-btn {
  flex: 1; padding: .45rem .5rem; border: 1px solid var(--tt-border);
  background: transparent; color: var(--tt-text); border-radius: 8px;
  font-size: .78rem; font-weight: 500; cursor: pointer; line-height: 1.3;
}
.tt-btn:hover { border-color: var(--tt-accent); color: var(--tt-accent); }
.tt-btn-primary { background: var(--tt-accent); border-color: var(--tt-accent); color: #fff; font-weight: 600; }
.tt-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.tt-skip {
  display: block; width: 100%; margin-top: .45rem; padding: .2rem;
  background: none; border: none; color: var(--tt-muted); font-size: .72rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.tt-skip:hover { color: var(--tt-text); }

@media (prefers-reduced-motion: reduce) {
  #ttSpot.show, #ttTip.show { transition: none !important; }
}