/* =========================================================================
   djjs.us · site-wide Akhand Sadhna chrome on the PHP pages (v1.0.2)
   The public site and every /admin/* desk (includes/sadhna-global.php; never the portal SPA or the kiosk).
   Loaded after site.css and built from its tokens. Behaviour: assets/js/sadhna-global.js.
     1. .djjs-sun-loader          the golden sun-dial loader (contract C5)
     2. .djjs-live                the active sadhna countdown bar, fixed above the sticky header
     3. .djjs-start               the homepage "Start Sadhna" widget (signed-in members)
     4. .djjs-dial-glyph, .djjs-dial   the dial triggers' icon and the 24-hour dial drawer
   ========================================================================= */

/* ---------- 1. Loader (C5): <span class="djjs-sun-loader" role="status" aria-label="Loading…"></span> ----------
   The SVG turns its ray ring and steps its hour hand itself; reduced motion swaps in the still frame. */
.djjs-sun-loader {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.22em;
  background: url("../img/sun-dial-loader.svg") center / contain no-repeat;
}
.djjs-sun-loader--lg { width: 3rem; height: 3rem; }
.djjs-sun-loader--xl { width: 4.5rem; height: 4.5rem; }
/* Busy submit buttons (the Join Sangat and RSVP forms, assets/js/intake.js) show it too. */
.is-site [data-submit][aria-busy="true"]::before, .djjs-live__btn[aria-busy="true"]::before {
  content: ""; display: inline-block; flex: none; width: 1.25em; height: 1.25em;
  background: url("../img/sun-dial-loader.svg") center / contain no-repeat;
}
/* Under reduced motion the still frame (an SVG background may not see the page's motion preference). */
@media (prefers-reduced-motion: reduce) {
  .djjs-sun-loader, .is-site [data-submit][aria-busy="true"]::before, .djjs-live__btn[aria-busy="true"]::before {
    background-image: url("../img/sun-dial-loader-still.svg");
  }
}

.djjs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 2. The active sadhna bar ---------- */
.djjs-live {
  /* v1.4.4: part of the sticky top navigation: fixed at the top (z 50, the header's layer; the header sits right under it,
     never under it), Imperial Crimson #881337. Glossary modals (z 55/60, top layer) and toasts (200) cover it. Anything
     else that stacks at the top of the page (e.g. a festival banner) sits below it with top: var(--djjs-top-stack). */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: calc(6px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  background-color: #881337;
  background-image: linear-gradient(100deg, rgba(58, 8, 21, .32), transparent 40%, rgba(255, 255, 255, .03) 70%, rgba(58, 8, 21, .2));
  color: #FEF3C7; border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 1px 0 rgba(252, 211, 77, 0.28), 0 12px 28px -16px rgba(58, 10, 24, 0.7);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.2;
  --focus: #FCD34D;
}
.djjs-live__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--wrap, 1280px); margin-inline: auto; }
.djjs-live__status { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.djjs-live__icon { flex: none; font-family: var(--emoji); font-size: 1.15rem; line-height: 1; }
.djjs-live__label { min-width: 0; font-size: 0.8125rem; letter-spacing: 0.01em; }
.djjs-live__time {
  display: inline-flex; align-items: center; flex: none; min-height: 30px; padding: 0 11px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.38);
  color: #FDE68A; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums;
}
/* v1.1.2 realtime: how many sadhaks sit worldwide right now (window.DJJSLive); wide screens only, the bar stays one line */
.djjs-live__co {
  display: none; flex: none; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(252, 211, 77, 0.28); color: rgba(254, 243, 199, 0.86); font-size: 0.8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
@media (min-width: 1024px) { .djjs-live__co:not([hidden]) { display: inline-flex; } }
.djjs-live__note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: rgba(254, 243, 199, 0.72); }
.djjs-live__actions { display: flex; flex: none; align-items: center; gap: 6px; }
.djjs-live__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(254, 243, 199, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: inherit;
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.djjs-live__btn svg { display: block; flex: none; }
.djjs-live__btn.is-solid { background: linear-gradient(180deg, #FBBF24, #F59E0B); border-color: #F59E0B; color: #2A1614; }
.djjs-live__btn[aria-pressed="true"] { background: rgba(252, 211, 77, 0.18); border-color: rgba(252, 211, 77, 0.6); }
.djjs-live__btn:active { transform: scale(0.96); }
.djjs-live__btn:focus-visible { outline: 2px solid #FCD34D; outline-offset: 2px; }
.djjs-live__btn:disabled { opacity: 0.6; cursor: progress; }
.djjs-live__btn:visited, .djjs-live__btn:hover { color: inherit; }
.djjs-live__txt { display: none; }
.djjs-live__txt.is-always { display: inline; }
.djjs-live__progress {   /* how far into the hour: a thin amber line along the bottom edge */
  position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--djjs-p, 0%); border-radius: 0 2px 2px 0; pointer-events: none;
  background: linear-gradient(90deg, #D97706, #FCD34D); box-shadow: 0 0 10px rgba(245, 158, 11, 0.55); transition: width 1s linear;
}
.djjs-live.is-done { background: linear-gradient(100deg, #881337, #9A3412 62%, #A3480A); }
.djjs-live.is-done .djjs-live__progress { display: none; }
.djjs-live.is-done .djjs-live__label, .djjs-live.is-ask .djjs-live__label { font-size: 0.875rem; font-weight: 600; }
@media (min-width: 640px) {
  .djjs-live__label { font-size: 0.9375rem; white-space: nowrap; }
  .djjs-live__txt { display: inline; }
  .djjs-live__btn { padding: 0 14px; }
}
@media (max-width: 767.98px) { .djjs-live__note { display: none; } }
@media (max-width: 419.98px) { .djjs-live__icon { display: none; } }   /* "Active Sadhna:" keeps one line beside 3 buttons */
@media (max-width: 379.98px) {
  .djjs-live { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .djjs-live__inner { gap: 8px; }
  .djjs-live__status { gap: 6px; }
  .djjs-live__actions { gap: 4px; }
  .djjs-live__btn { padding: 0 10px; }
  .djjs-live__time { padding: 0 8px; }
}
@media (hover: hover) and (pointer: fine) {
  .djjs-live__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(254, 243, 199, 0.5); }
  .djjs-live__btn.is-solid:hover { background: #FBBF24; }
}
@media (prefers-reduced-motion: no-preference) {
  .djjs-live.is-entering { animation: djjs-live-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }   /* after a start click; page loads show it at once */
  @keyframes djjs-live-in { from { transform: translateY(-100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .djjs-live__progress, .djjs-live__btn { transition: none; } }

/* The page and its sticky parts move below the bar (the bar carries the iPhone's safe area, so the header drops its own). */
:root { --djjs-top-stack: 0px; }   /* v1.4.4 hook: the height of the fixed sadhna bar (0 without one) */
html.djjs-global-live { --djjs-top-stack: var(--djjs-global-h, 0px); }
html.djjs-global-live body { padding-top: var(--djjs-global-h, 0px); }
html.djjs-global-live .site-header { top: var(--djjs-global-h, 0px); padding-top: 0; }
html.djjs-global-live { scroll-padding-top: calc(var(--header-h) + var(--djjs-global-h, 0px) + 20px); }
html.djjs-global-live .privacy h2 { scroll-margin-top: calc(var(--header-h) + var(--djjs-global-h, 0px) + 20px); }
@media print {
  .djjs-live { display: none !important; }
  html.djjs-global-live body { padding-top: 0; }
  html.djjs-global-live .site-header { top: 0; }
}

/* ---------- 3. Homepage: Start Sadhna (inserted first in .hero__actions for signed-in members) ---------- */
.djjs-start {
  background: linear-gradient(120deg, #881337 0%, #A0293B 46%, #B4450C 78%, #A8500B 100%); color: #FFF7EE; border-color: rgba(252, 211, 77, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 4px var(--season-ring, rgba(245, 158, 11, 0.16)), 0 14px 32px -14px rgba(217, 119, 6, 0.85);
}
.djjs-start__icon { display: inline-grid; place-items: center; font-family: var(--emoji); line-height: 1; }
.djjs-start__icon .djjs-sun-loader { width: 1.35em; height: 1.35em; }
.djjs-start.is-active { background: linear-gradient(120deg, #6F0F2D, #881337 55%, #8C1A34); }
.djjs-start.is-active .djjs-start__label { font-variant-numeric: tabular-nums lining-nums; }
.djjs-start:disabled { opacity: 1; cursor: progress; }
.djjs-start:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .djjs-start:hover:not(:disabled) { color: #FFF7EE; filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); }
}
/* The header pill already leads members to their dashboard: the hero's Sangat Portal link gives its place to the widget. */
.hero__actions.djjs-has-start > a.btn--ghost[href$="/portal"] { display: none; }
.djjs-start-note { max-width: 34rem; margin: 12px 0 0; font-size: var(--fs-sm, 0.9375rem); line-height: 1.5; color: var(--muted); }
@media (max-width: 519.98px) { .hero__actions .djjs-start { width: 100%; } }

/* ---------- 4. The dial: trigger icon (site.css styles the header button) and the drawer ---------- */
.djjs-dial-glyph { display: block; width: 28px; height: 28px; overflow: visible; flex: none; }
.ddg-halo { fill: rgba(245, 158, 11, 0.1); stroke: rgba(245, 158, 11, 0.24); stroke-width: 0.75; }
.ddg-rays { fill: none; stroke: #D97706; stroke-width: 2.4; stroke-linecap: round; }
.ddg-ring { fill: none; stroke: #F59E0B; stroke-width: 1.4; }
.ddg-face { fill: #FCFBF7; stroke: rgba(217, 119, 6, 0.5); stroke-width: 1; }
.ddg-hand { fill: none; stroke: #881337; stroke-width: 2.8; stroke-linecap: round; }
.ddg-hub { fill: #881337; }
[data-theme="dark"] .ddg-rays, [data-theme="dark"] .ddg-hand, .drawer .ddg-rays, .drawer .ddg-hand { stroke: #FCD34D; }
[data-theme="dark"] .ddg-hub, .drawer .ddg-hub { fill: #FCD34D; }
[data-theme="dark"] .ddg-face, .drawer .ddg-face { fill: #1D1510; stroke: rgba(252, 211, 77, 0.45); }
.drawer__tool--dial { grid-column: 1 / -1; }
.drawer__tool--dial .djjs-dial-glyph { width: 26px; height: 26px; }

/* The drawer: the menu drawer's dark glass (.drawer in site.css), sliding in from the right. */
html.djjs-dial-open { overflow: hidden; }
.djjs-dial { width: min(440px, 92vw); gap: 14px; }
.djjs-dial__title { margin: 0; font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.05; color: #F3E9DA; }
.djjs-dial__title span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #D9A54A; }
.djjs-dial__lead { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.25; color: #FCE7B8; }
.djjs-dial__stage { display: grid; place-items: center; min-height: min(340px, 76vw); }
.djjs-dial__svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.djjs-dial__error { margin: 0 0 10px; color: #F3E9DA; text-align: center; }
.djjs-dial__retry { min-width: 160px; }
/* the legend: the golden badges of assets/css/sadhna-dial-3d.css (schema patch 39.23); the drawer is dark glass, so light text */
.djjs-dial .djjs-dial-legend { color: #D8C8B4; }
.djjs-dial__note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #BBA996; }
.djjs-dial__svg text { font-family: var(--sans); fill: #BBA996; font-size: 11.5px; }
.djjs-dial__svg .djjs-dial__now { fill: #FCD34D; font-weight: 700; letter-spacing: 0.04em; }
.djjs-dial__svg .djjs-dial__plus { fill: #D9A54A; font-size: 9.5px; }
.djjs-ray { stroke-linejoin: round; }
.djjs-ray.is-held { fill: #F59E0B; }
.djjs-ray.is-now { fill: #FBBF24; }
.djjs-ray.is-live { fill: #FF7A45; }
.djjs-ray.is-open { fill: none; stroke: #F87171; stroke-width: 1.2; stroke-dasharray: 3 3; }
.djjs-ray.is-mine { stroke: #FDE68A; stroke-width: 1.4; filter: drop-shadow(0 0 5px rgba(252, 211, 77, 0.9)); }
.djjs-ray.is-open.is-mine { stroke-dasharray: none; }
.djjs-dial__face { fill: #16120E; stroke: rgba(245, 158, 11, 0.25); stroke-width: 1.5; }
.djjs-dial__ring { fill: none; stroke: #F59E0B; stroke-opacity: 0.45; stroke-width: 1; }
.djjs-dial__dot { fill: #FF7A45; stroke: #16120E; stroke-width: 2; }
.djjs-dial__svg .djjs-dial__time { fill: #F3E9DA; font-family: var(--serif); font-size: 36px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.djjs-dial__svg .djjs-dial__ampm { fill: #BBA996; font-family: var(--sans); font-size: 14px; }
.djjs-dial__svg .djjs-dial__caption { fill: #BBA996; font-size: 12.5px; }
.djjs-dial__svg .djjs-dial__count { fill: #F3E9DA; font-size: 13.5px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .djjs-dial__svg .djjs-ray { transform-box: view-box; transform-origin: 200px 200px; animation: djjs-ray-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .djjs-dial__svg .djjs-ray.is-live { animation: djjs-ray-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both, djjs-ray-glow 2.6s ease-in-out 700ms infinite; }
  @keyframes djjs-ray-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
  @keyframes djjs-ray-glow { 50% { filter: drop-shadow(0 0 7px rgba(255, 122, 69, 0.95)); } }
}
@media (max-width: 379.98px) { .djjs-dial__title { font-size: 1.5rem; } .djjs-dial__lead { font-size: 1.15rem; } }
/* v1.4.4: from the Home Screen, the strip behind the iPhone status bar takes the bar's crimson while a sadhna runs */
html.djjs-standalone.djjs-global-live body.is-site::before { background: #881337; }