/* The guided tours (schema patch 39.22; assets/js/portal-tour.js, includes/tours.php). Temple Dark: a stone-dark glass card with
   an amber hairline and gold leaf, Cormorant Garamond titles; Temple Dawn: sandalwood parchment. The spotlight is an amber ring
   whose own wide shadow dims the rest of the page, so the lit element stays itself (nothing is drawn over it). */
.djjs-tour {
  --tour-card: rgba(28, 25, 23, .96); --tour-ink: #FCFBF7; --tour-meta: #D6C7B0; --tour-gold: #F59E0B; --tour-amber: #D97706;
  --tour-dim: rgba(13, 11, 9, .72); --tour-line: rgba(217, 119, 6, .35); --tour-primary: #881337; --tour-on-primary: #FCFBF7;
  position: fixed; inset: 0; z-index: 2147482000; pointer-events: auto;   /* the page waits while the tour is open */
}
:root:not(.dark) .djjs-tour {
  --tour-card: rgba(251, 248, 241, .98); --tour-ink: #2A1614; --tour-meta: #6B4F3A; --tour-gold: #B45309; --tour-amber: #B45309;
  --tour-dim: rgba(42, 22, 20, .55); --tour-line: rgba(180, 83, 9, .35);
}
.djjs-tour:not(.has-spot) { background: var(--tour-dim); }
.djjs-tour__spot {
  position: fixed; display: none; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--tour-gold), 0 0 22px 4px rgba(245, 158, 11, .45), 0 0 0 200vmax var(--tour-dim);
}
.djjs-tour.has-spot .djjs-tour__spot { display: block; }
.djjs-tour__card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  overflow: auto; box-sizing: border-box; padding: 1.1rem 1.15rem 1rem; border-radius: 18px; pointer-events: auto;
  background: var(--tour-card); color: var(--tour-ink); border: 1px solid var(--tour-line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(252, 211, 77, .14);
  font: 400 1rem/1.5 var(--font-sans, Mukta, system-ui, sans-serif);
}
.djjs-tour.has-spot .djjs-tour__card[style*="left"] { transform: none; }
.djjs-tour.is-docked .djjs-tour__card { left: 16px; right: 16px; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; transform: none; max-height: 60vh; }
.djjs-tour__card::before { /* gold leaf along the top edge */
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tour-gold), #FCD34D, var(--tour-gold), transparent); opacity: .85;
}
.djjs-tour__k { margin: 0 0 .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tour-gold); font-variant-numeric: lining-nums tabular-nums; }
.djjs-tour__t { margin: 0 0 .4rem; font: 600 1.45rem/1.15 var(--font-display, "Cormorant Garamond", Georgia, serif); color: var(--tour-ink); }
.djjs-tour__b { margin: 0 0 .7rem; font-size: .95rem; color: var(--tour-ink); opacity: .92; }
.djjs-tour__cta { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 .5rem; color: var(--tour-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.djjs-tour__cta:focus-visible, .djjs-tour__btn:focus-visible { outline: 2px solid var(--tour-gold); outline-offset: 2px; }
.djjs-tour__bar { height: 3px; margin: .2rem 0 .8rem; border-radius: 3px; background: var(--tour-line); overflow: hidden; }
.djjs-tour__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--tour-amber), #FCD34D); }
.djjs-tour__acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
.djjs-tour__btn {
  position: relative; min-height: 44px; min-width: 44px; padding: 0 1rem; border-radius: 999px; font: 600 .92rem/1 var(--font-sans, Mukta, system-ui, sans-serif);
  cursor: pointer; border: 1px solid transparent;
}
.djjs-tour__btn--primary { background: var(--tour-primary); color: var(--tour-on-primary); }
.djjs-tour__btn--ghost { background: transparent; color: var(--tour-ink); border-color: var(--tour-line); }
.djjs-tour__btn--quiet { background: transparent; color: var(--tour-meta); margin-right: auto; padding-left: .25rem; }
.djjs-tour__btn:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .djjs-tour__spot { transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
  .djjs-tour__card { animation: djjs-tour-in .22s ease-out; }
}
@keyframes djjs-tour-in { from { opacity: 0; } to { opacity: 1; } }
@media (forced-colors: active) {
  .djjs-tour__spot { box-shadow: none; outline: 3px solid Highlight; }
  .djjs-tour__card { border: 2px solid CanvasText; }
}

/* "Replay tour": the desks' header button and the portal footer's (a plain text button in each) */
.djjs-tour-replay { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .6rem; border: 0; background: none;
  color: inherit; font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.djjs-tour-replay:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; border-radius: 6px; }