/* Schema patch 39.36: <djjs-viral-share> (assets/js/divine-viral-share.js), "✨ Share Divine Invitation": the button, and the
   share panel it opens when the device can't share the animated card itself (a popover beside the button on a computer, a
   bottom sheet on a phone). Loaded by the public homepage (templates/public/home.php) and the portal shell
   (includes/portal/shell.php). Temple Dark under :root.dark, Temple Dawn (parchment, never white) otherwise; the portal's
   tokens when present (--c-surface, --c-ink, --c-muted), the same values spelled out on the public pages. */
:root {
  --dvs-surface: var(--c-surface, #FBF8F1);
  --dvs-ink: var(--c-ink, #2A1A12);
  --dvs-muted: var(--c-muted, #6B5B4E);
  --dvs-hair: rgba(217, 119, 6, .28);
  --dvs-gold-ink: #92400E;
  --dvs-row: rgba(217, 119, 6, .08);
  --dvs-focus: #78122B;
}
:root.dark {
  --dvs-surface: #161311;
  --dvs-ink: #FCFBF7;
  --dvs-muted: #A8A29E;
  --dvs-hair: rgba(217, 119, 6, .2);
  --dvs-gold-ink: #F59E0B;
  --dvs-row: rgba(245, 158, 11, .07);
  --dvs-focus: #FCD34D;
}

djjs-viral-share { display: inline-block; max-width: 100%; min-height: 48px; vertical-align: middle; } /* the button's height held before the script runs */
djjs-viral-share[data-variant="hero"] { min-height: 56px; }
djjs-viral-share[data-variant="compact"] { min-height: 44px; }

/* the button: the homepage hero's gold (g-btn--gold), lining figures, a 48px target (56px in the hero) */
.djjs-dvs-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; max-width: 100%; padding: .55em 1.45em; overflow: hidden;
  border: 1px solid rgba(146, 64, 14, .35); border-radius: 999px;
  background: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%); color: #2A0A14;
  font: 600 1rem/1.15 var(--sans, 'Mukta', system-ui, sans-serif); letter-spacing: .01em; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 28px -16px rgba(201, 138, 34, .9);
  transition: filter 200ms ease, transform 120ms ease;
}
.djjs-dvs-btn:focus-visible { outline: 2px solid var(--dvs-focus); outline-offset: 3px; }
.djjs-dvs-btn:active { transform: scale(.98); }
.djjs-dvs-btn[aria-busy="true"] { cursor: progress; filter: saturate(.85); }
@media (hover: hover) and (pointer: fine) { .djjs-dvs-btn:hover { filter: brightness(1.06); } }
.djjs-dvs-btn__label { position: relative; z-index: 1; }
.djjs-dvs-btn__spark { filter: drop-shadow(0 0 1px rgba(42, 10, 20, .75)) drop-shadow(0 1px 1px rgba(42, 10, 20, .35)); } /* the emoji's yellow stays legible on the gold */
djjs-viral-share[data-variant="hero"] .djjs-dvs-btn { min-height: 56px; padding-inline: 1.8em; font-size: 1.0625rem; }
djjs-viral-share[data-variant="compact"] .djjs-dvs-btn { min-height: 44px; padding: .45em 1.1em; font-size: .95rem; }
djjs-viral-share[data-variant="banner"] { margin-top: .6rem; }

/* a slow sheen across the gold, only for visitors who haven't asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .djjs-dvs-btn::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 235, .55) 50%, transparent 65%);
    transform: translateX(-120%); animation: djjs-dvs-sheen 5.5s ease-in-out 1.2s infinite;
  }
}
@keyframes djjs-dvs-sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* the homepage hero: a full-width row on phones, like its other two buttons */
@media (max-width: 479.98px) {
  .g-hero__actions djjs-viral-share, djjs-viral-share[data-variant="hero"] { display: block; width: 100%; }
  .g-hero__actions djjs-viral-share .djjs-dvs-btn, djjs-viral-share[data-variant="hero"] .djjs-dvs-btn { width: 100%; }
}

/* the panel (a modal <dialog>: the top layer, so no ancestor's overflow clips it and the page never widens) */
.djjs-dvs-panel {
  position: fixed; inset: 0; margin: auto; height: fit-content; padding: 0; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 1px solid var(--dvs-hair); border-radius: 18px; background: var(--dvs-surface); color: var(--dvs-ink);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(245, 158, 11, .06);
  font: 400 1rem/1.5 var(--sans, 'Mukta', system-ui, sans-serif);
}
.djjs-dvs-panel::backdrop { background: rgba(13, 11, 9, .38); }
.djjs-dvs-panel__in { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.djjs-dvs-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.djjs-dvs-panel__title { margin: 0; font: 600 1.3rem/1.2 var(--font-display, 'Cormorant Garamond', Georgia, serif); color: var(--dvs-ink); }
.djjs-dvs-panel__close {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--dvs-muted); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.djjs-dvs-panel__close:focus-visible, .djjs-dvs-act:focus-visible { outline: 2px solid var(--dvs-focus); outline-offset: 2px; }
.djjs-dvs-act {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--dvs-ink);
  font: 500 1rem/1.3 var(--sans, 'Mukta', system-ui, sans-serif); text-align: left; text-decoration: none; cursor: pointer;
}
.djjs-dvs-act[hidden] { display: none; }
.djjs-dvs-act:hover { background: var(--dvs-row); border-color: var(--dvs-hair); color: var(--dvs-ink); }
.djjs-dvs-act__i { flex: none; width: 1.6em; text-align: center; font-size: 1.15rem; }
.djjs-dvs-act__t { min-width: 0; }
.djjs-dvs-note { margin: 0 0 4px 52px; font-size: .85rem; line-height: 1.45; color: var(--dvs-muted); }
.djjs-dvs-note[hidden] { display: none; }
.djjs-dvs-status { min-height: 1.4em; margin: 4px 12px 0; font-size: .9rem; color: var(--dvs-gold-ink); }

/* phones: a bottom sheet */
@media (max-width: 599.98px) {
  .djjs-dvs-panel { inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 85dvh; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .djjs-dvs-panel__in { padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .djjs-dvs-panel[open] { animation: djjs-dvs-in 180ms ease-out; }
}
@keyframes djjs-dvs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* /sadhna's page header (tools/patch-spa.py P3936_SHARE_PATCHES): the Rudripath tracker and the share button in one row */
.djjs-dvs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; }