/* Judge-demo tour: spotlight coach marks layered over the real diary UI.
   Nothing here restyles the app itself — the overlay sits above it and points
   at the interface the judge is already looking at. Palette borrows from
   style.css so the tour reads as part of the product. */

:root {
  --tour-gold: #f5c451;
  --tour-ink: #f6efe3;
  --tour-surface: #1c1713;
  --tour-edge: #3a322a;
}

/* ---------- spotlight ---------- */
/* Four panels around the target rather than one box-shadow: they can be
   transitioned independently, so the light glides between targets. */
.tour-scrim {
  position: fixed;
  background: rgba(9, 7, 5, 0.72);
  z-index: 90;
  pointer-events: auto;
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-ring {
  position: fixed;
  z-index: 91;
  border: 2px solid var(--tour-gold);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(245, 196, 81, 0.15), 0 0 28px rgba(245, 196, 81, 0.35);
  pointer-events: none;
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 2px solid var(--tour-gold);
  opacity: 0;
  animation: tourPulse 2.2s ease-out infinite;
}

@keyframes tourPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.06); }
  100% { opacity: 0;   transform: scale(1.06); }
}

/* ---------- bubble ---------- */
.tour-bubble {
  position: fixed;
  z-index: 93;
  width: min(21rem, calc(100vw - 2rem));
  background: var(--tour-surface);
  border: 1px solid var(--tour-edge);
  border-radius: 14px;
  padding: 1rem 1.15rem 0.95rem;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.55);
  color: var(--tour-ink);
  transition: opacity 260ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tour-bubble.is-hidden { opacity: 0; pointer-events: none; transform: translateY(6px); }

.tour-step {
  margin: 0 0 .3rem;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tour-gold);
}

.tour-title {
  margin: 0 0 .4rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.25;
}

.tour-body { margin: 0; font-size: .88rem; line-height: 1.6; color: #cdc2b2; }

.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .85rem;
}

.tour-dots { display: flex; gap: .3rem; }
.tour-dot { width: 5px; height: 5px; border-radius: 50%; background: #4a4038; }
.tour-dot.on { background: var(--tour-gold); }

.tour-next {
  border: 0;
  border-radius: 9px;
  padding: .48rem 1.05rem;
  background: var(--tour-gold);
  color: #2a1f10;
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}
.tour-next:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.tour-next:active { transform: translateY(0); }

.tour-skip {
  background: none;
  border: 0;
  color: #8d8071;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  padding: .3rem .1rem;
  text-decoration: underline;
}
.tour-skip:hover { color: var(--tour-ink); }

/* Arrow pointing at the highlighted element. */
.tour-bubble::before {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  background: var(--tour-surface);
  border: 1px solid var(--tour-edge);
  transform: rotate(45deg);
}
.tour-bubble[data-side="top"]::before    { bottom: -6px; border-top: 0; border-left: 0; left: var(--arrow-x, 50%); }
.tour-bubble[data-side="bottom"]::before { top: -6px; border-bottom: 0; border-right: 0; left: var(--arrow-x, 50%); }
.tour-bubble[data-side="left"]::before   { right: -6px; border-bottom: 0; border-left: 0; top: var(--arrow-y, 50%); }
.tour-bubble[data-side="right"]::before  { left: -6px; border-top: 0; border-right: 0; top: var(--arrow-y, 50%); }
.tour-bubble[data-side="center"]::before { display: none; }

/* A step that asks the judge to act: the ring stays, the Next button doesn't. */
.tour-bubble.awaiting .tour-next { display: none; }
.tour-hint {
  margin-top: .55rem;
  font-size: .8rem;
  color: var(--tour-gold);
  display: flex;
  align-items: center;
  gap: .4rem;
}
/* `display: flex` above outranks the UA's low-specificity [hidden] rule, so
   the attribute alone would not hide this. */
.tour-hint[hidden] { display: none; }
.tour-hint::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tour-gold);
  animation: tourBlink 1.4s ease-in-out infinite;
}
@keyframes tourBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* The demo entry button on the sign-in card. */
.demo-cta {
  margin-top: .85rem;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--tour-edge);
  border-radius: 11px;
  padding: .7rem 1rem;
  color: var(--tour-gold);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.demo-cta:hover {
  border-color: var(--tour-gold);
  background: rgba(245, 196, 81, .07);
  transform: translateY(-1px);
}
.demo-cta small { display: block; color: #8d8071; font-size: .74rem; margin-top: .18rem; }

/* Ribbon so nobody mistakes the demo for real data. */
.demo-badge {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  background: var(--tour-gold);
  color: #2a1f10;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem 1rem .32rem;
  border-radius: 0 0 9px 9px;
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .tour-scrim, .tour-ring, .tour-bubble { transition: none; }
  .tour-ring::after, .tour-hint::before { animation: none; }
  .demo-cta:hover, .tour-next:hover { transform: none; }
}

/* One simulated evening landing: the day's emotion pops into the same pill
   the judge's own photo used, so the month reads as repeated check-ins. */
.demo-day-tick { animation: demoDayTick 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes demoDayTick {
  0%   { transform: translateY(4px) scale(.94); opacity: .35; }
  60%  { transform: translateY(0) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-day-tick { animation: none; }
}