/* djjs.us · v1.1.2 aarti: /bhakti/aarti (the Sacred Naman & Mangal Aarti sanctuary) and /bhakti/sunday-rudripath (the
   Rudripath Practice Hub). Loaded after site.css and liturgy.css (page_meta 'styles', v112_meta_aarti()); uses their tokens,
   so the page follows Temple Dark and the light theme. The player stage and the altar are always dark (a lit sanctum),
   in both themes. The printed run-of-show (Download run-of-show) is the @media print block at the end. */

.aa, .rph {
  --aa-deva: "DJJS Tiro Devanagari", "Tiro Devanagari Hindi", "Mukta", "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  --aa-scale: 1;
  --aa-gold: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%);
  --aa-onyx: #0D0B09;
  --aa-onyx-2: #15110D;
  --aa-line: rgba(245, 158, 11, 0.2);
  --aa-line-strong: rgba(245, 158, 11, 0.42);
  --aa-parch: #FCFBF7;
  --aa-parch-muted: #BBA996;
  --aa-glow: rgba(245, 158, 11, 0.16);
}
.aa.page, .rph.page { overflow: hidden; }
@supports (overflow: clip) { .aa.page, .rph.page { overflow: clip; } }
.aa__aura { position: absolute; inset: -12% -10% auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 46% at 50% 22%, rgba(245, 158, 11, 0.14), transparent 70%), radial-gradient(30% 30% at 82% 10%, rgba(136, 19, 55, 0.18), transparent 70%); }
.aa-crumbs { margin-bottom: 10px; }
.aa-section-head { max-width: 46rem; margin-bottom: clamp(18px, 2.6vw, 30px); }
.aa-section-head h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin: 0 0 0.3em; }
.aa-section-head p:not(.eyebrow) { color: var(--muted); margin: 0; }
.aa section + section, .aa .aa-more { margin-top: clamp(56px, 7vw, 104px); }
.aa-fine { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }

/* ---------- hero ---------- */
.aa-hero { max-width: 52rem; margin-bottom: clamp(24px, 3.5vw, 40px); }
.aa-hero h1 { margin-bottom: 0.08em; }
.aa-hero__deva { font-family: var(--aa-deva); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.35; color: var(--gold-text); margin: 0 0 0.5em; }
/* the DJVM credit (RUDRI_DJVM_CREDIT) on the Rudri Path Practice hub */
.aa-hero__credit { margin: -0.2em 0 0.9em; max-width: 46rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--muted); }
.aa-hero__lead { max-width: 44rem; }
.aa-live { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--aa-line-strong);
  background: rgba(136, 19, 55, 0.14); color: var(--gold-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; }
.aa-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22); }
@media (prefers-reduced-motion: no-preference) { .aa-live__dot { animation: aa-pulse 1.8s ease-in-out infinite; } }
@keyframes aa-pulse { 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }

.aa-begin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 22px; padding: 18px 22px; border-radius: var(--radius-card);
  border: 1px solid var(--aa-line-strong); background: linear-gradient(120deg, rgba(136, 19, 55, 0.22), rgba(217, 119, 6, 0.12)); }
.aa-begin__btn { font-size: 1.12rem; min-width: 220px; }
.aa-begin__note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- the stage: player + navigator (always a dark sanctum) ---------- */
.aa-stage { scroll-margin-top: calc(var(--header-h) + var(--djjs-global-h, 0px) + 16px); display: grid; gap: 0; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #1E1610 0%, var(--aa-onyx) 62%); color: var(--aa-parch);
  border: 1px solid var(--aa-line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(245, 158, 11, 0.05) inset; }
@media (min-width: 1024px) { .aa-stage { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); } }
.aa-stage__screen { position: relative; min-height: 220px; aspect-ratio: 16 / 10; background: #000; }
@media (min-width: 1024px) { .aa-stage__screen { aspect-ratio: auto; min-height: 100%; } }
.aa-stage__screen.is-video { background: #000; }
.aa-stage__screen video, .aa-stage__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.aa-art, .aa-facade { position: absolute; inset: 0; overflow: hidden; }
.aa-art__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-art__glow { position: absolute; left: 50%; top: 58%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(252, 211, 77, 0.55), rgba(245, 158, 11, 0.18) 45%, transparent 72%); opacity: calc(0.15 + var(--aa-climax, 0) * 0.85);
  transition: opacity 1.2s ease; mix-blend-mode: screen; }
.aa-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(13, 11, 9, 0.88)); pointer-events: none; }
.aa-facade__body { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 10px; justify-items: start; padding: clamp(16px, 3vw, 28px); }
.aa-facade__play { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--aa-gold); color: #2A0A14; font-weight: 700; font-size: 1.02rem; box-shadow: 0 14px 30px -14px rgba(245, 158, 11, 0.8); }
.aa-facade__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2A0A14; color: #F8D888; font-size: 0.95rem; padding-left: 3px; }
.aa-facade__note { margin: 0; max-width: 34rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--aa-parch-muted); }
@media (hover: hover) and (pointer: fine) { .aa-facade__play:hover { filter: brightness(1.06); } }

.aa-stage__panel { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aa-stage__eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: #F2C978; }
.aa-stage__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); color: var(--aa-parch); }
.aa-now { margin: 0; min-height: 1.6em; color: var(--aa-parch-muted); font-size: var(--fs-sm); }
.aa-now strong { color: #F8D888; font-weight: 600; }
.aa-transport { display: grid; gap: 10px; }
.aa-scrub { position: relative; }
.aa-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.aa-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #E7AE45 var(--aa-fill, 0%), rgba(252, 251, 247, 0.16) var(--aa-fill, 0%)); }
.aa-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(252, 251, 247, 0.16); }
.aa-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #E7AE45; }
.aa-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #FFF4D6; border: 2px solid #D97706; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
.aa-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFF4D6; border: 2px solid #D97706; }
.aa-range:focus-visible { outline: 2px solid #FCD34D; outline-offset: 2px; }
.aa-scrub__marks { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; pointer-events: none; }
.aa-scrub__marks i { position: absolute; top: -9px; width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; background: rgba(248, 216, 136, 0.55); }
.aa-scrub__marks i.is-mangal { background: #F59E0B; box-shadow: 0 0 8px rgba(245, 158, 11, 0.8); }
.aa-times { margin: -6px 0 0; font-variant-numeric: tabular-nums lining-nums; color: var(--aa-parch-muted); font-size: var(--fs-sm); }
.aa-times [data-aa-elapsed] { color: var(--aa-parch); font-weight: 600; }
.aa-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aa-ctl { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--aa-line-strong); background: rgba(252, 251, 247, 0.04); color: var(--aa-parch); font-size: 1.05rem; font-weight: 600; }
.aa-ctl small { font-size: 0.72rem; letter-spacing: 0.02em; }
.aa-ctl--play { min-width: 64px; min-height: 64px; border: 0; background: var(--aa-gold); color: #2A0A14; font-size: 1.35rem; box-shadow: 0 12px 28px -12px rgba(245, 158, 11, 0.85); }
.aa-ctl--text { font-size: var(--fs-sm); padding: 0 18px; }
.aa-ctl[aria-pressed="true"] { background: rgba(245, 158, 11, 0.2); border-color: #E7AE45; color: #F8D888; }
.aa-ctl:focus-visible, .aa-nav__btn:focus-visible, .aa-nav__sub-btn:focus-visible, .aa-chip:focus-visible, .aa-facade__play:focus-visible { outline: 2px solid #FCD34D; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .aa-ctl:not(.aa-ctl--play):hover { border-color: #E7AE45; } }
.aa-vol { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; max-width: 22rem; }
.aa-vol__label { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aa-parch-muted); }
.aa-vol__ios { margin: 0; font-size: var(--fs-xs); color: var(--aa-parch-muted); }

.aa-nav { border-top: 1px solid var(--aa-line); padding-top: 12px; }
.aa-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.aa-nav__btn { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px 6px 6px;
  border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--aa-parch); text-align: left; cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.aa-nav__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--aa-line-strong); font-family: var(--serif); font-size: 1.1rem; color: #F8D888; }
.aa-nav__text { display: grid; min-width: 0; }
.aa-nav__title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.aa-nav__sub { font-size: var(--fs-xs); color: var(--aa-parch-muted); letter-spacing: 0.02em; }
.aa-nav__time { font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-sm); color: var(--aa-parch-muted); }
.aa-nav__sub-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: calc(100% - 54px); margin: 2px 0 4px 54px; min-height: 44px; padding: 4px 10px;
  border: 1px dashed var(--aa-line); border-radius: 12px; background: transparent; color: var(--aa-parch-muted); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.aa-nav__item.is-active .aa-nav__btn, .aa-nav__sub-btn.is-active { border-color: rgba(245, 158, 11, 0.55); background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(136, 19, 55, 0.14)); }
.aa-nav__item.is-active .aa-nav__num { background: var(--aa-gold); color: #2A0A14; border-color: transparent; }
.aa-nav__sub-btn.is-active { color: #F8D888; }
@media (hover: hover) and (pointer: fine) { .aa-nav__btn:hover, .aa-nav__sub-btn:hover { background: rgba(252, 251, 247, 0.05); border-color: var(--aa-line); } }
@media (min-width: 640px) and (max-width: 1023px) { .aa-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } }

.aa-extras { display: flex; flex-wrap: wrap; gap: 10px; }
.aa-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--aa-line-strong);
  background: rgba(252, 251, 247, 0.04); color: var(--aa-parch); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.aa-chip[aria-pressed="true"] { background: rgba(245, 158, 11, 0.18); border-color: #E7AE45; color: #F8D888; }
.aa-chip:disabled { opacity: 0.6; cursor: progress; }
.aa-extras__status { margin: 0; font-size: var(--fs-xs); color: var(--aa-parch-muted); min-height: 1.3em; }
.aa-extras__status:empty { min-height: 0; }

/* ---------- teleprompter ---------- */
.aa-tp__lead { max-width: 44rem; }
.aa-tp__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin: 0 0 12px; border: 1px solid var(--champagne);
  border-radius: 22px; background: var(--glass); box-shadow: var(--shadow-soft); }
.aa-tog, .aa-size button, .aa-resume { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--champagne-strong); background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.aa-tog[aria-pressed="true"] { background: var(--vermilion); border-color: var(--vermilion); color: var(--on-vermilion); }
.aa-size { display: inline-flex; gap: 4px; }
.aa-size button { padding: 0 12px; }
.aa-resume { margin-left: auto; background: var(--aa-gold); border-color: transparent; color: #2A0A14; }
.aa-tp__honest { margin: 0 0 12px; font-size: var(--fs-xs); color: var(--muted); max-width: 52rem; }
.aa-tp__screen { position: relative; max-height: min(74vh, 820px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(14px, 2.4vw, 28px);
  border-radius: 26px; border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); scroll-padding: 30% 0; }
.aa-tp__screen:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .aa-tp__screen { scroll-behavior: smooth; } }
.aa-sec { padding: clamp(14px, 2vw, 22px) clamp(12px, 2vw, 20px); border-radius: 20px; border: 1px solid transparent; transition: border-color 0.5s ease, background 0.5s ease; }
.aa-sec + .aa-sec { margin-top: 6px; }
.aa-sec.is-active { border-color: var(--champagne-strong); background: linear-gradient(180deg, var(--aa-glow), transparent 70%); }
.aa-sec__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 10px; }
.aa-sec__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--champagne-strong); font-family: var(--serif); font-size: 1.15rem; color: var(--gold-text); }
.aa-sec.is-active .aa-sec__num { background: var(--aa-gold); color: #2A0A14; border-color: transparent; }
.aa-sec__head h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); margin: 0; }
.aa-sec__sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em; }
.aa-sec__empty { margin: 4px 0 0 54px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--champagne-strong); color: var(--muted); font-size: var(--fs-sm); font-style: italic; }
.aa-sec__note { margin: 10px 0 0 54px; color: var(--muted); font-size: var(--fs-sm); }
.aa-lines { list-style: none; margin: 0; padding: 0 0 0 54px; display: grid; gap: 6px; }
.aa-line { padding: 10px 14px; border-radius: 14px; border-left: 3px solid transparent; transition: background 0.45s ease, border-color 0.45s ease, opacity 0.45s ease; }
.aa-line__cols { display: grid; gap: 4px 28px; }
@media (min-width: 820px) { .aa-line__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }
.aa-line__deva { margin: 0; font-family: var(--aa-deva); font-size: calc(1.4rem * var(--aa-scale)); line-height: 1.75; overflow-wrap: anywhere; color: var(--ink); }
.aa-line__iast { margin: 0; font-family: var(--serif); font-size: calc(1.28rem * var(--aa-scale)); line-height: 1.55; font-weight: 500; overflow-wrap: anywhere; color: var(--ink); }
.aa-line__meaning { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: calc(1.08rem * var(--aa-scale)); line-height: 1.5; color: var(--muted); }
.aa--no-meaning .aa-line__meaning { display: none; }
.aa-line.is-active { background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.04) 70%, transparent); border-left-color: #E7AE45; }
.aa-line.is-active .aa-line__deva, .aa-line.is-active .aa-line__iast { color: var(--gold-text); }
.aa-line.is-active .aa-line__meaning { color: var(--ink); }
.aa-sec.is-active .aa-line.is-past { opacity: 0.62; }
@media (min-width: 2400px) { .aa .wrap { --wrap: 1600px; } .aa-line__deva { font-size: calc(1.65rem * var(--aa-scale)); } .aa-line__iast { font-size: calc(1.5rem * var(--aa-scale)); } }

/* ---------- Virtual Diya & Pushpanjali ---------- */
.aa-ritual__stage { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--aa-line); background: var(--aa-onyx);
  aspect-ratio: 4 / 3; max-height: 620px; width: 100%; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7); }
@media (min-width: 900px) { .aa-ritual__stage { aspect-ratio: 16 / 8; } }
.aa-ritual__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.aa-ritual__canvas:active { cursor: grabbing; }
.aa-ritual__canvas:focus-visible { outline: 2px solid #FCD34D; outline-offset: -4px; }
.aa-ritual__ack { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; margin: 0; padding: 6px 16px; border-radius: 999px; background: rgba(13, 11, 9, 0.7);
  color: #F8D888; font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.aa-ritual__ack.is-on { opacity: 1; }
.aa-ritual__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.aa-ritual__btn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.aa-ritual__btn[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); }
.aa-ritual__hint { color: var(--muted); font-size: var(--fs-xs); }
.aa-ritual__status { margin: 10px 0 0; min-height: 1.5em; color: var(--gold-text); font-size: var(--fs-sm); }

/* ---------- Meaning of the Stotras ---------- */
.aa-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .aa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.aa-card { border-radius: var(--radius-card); border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
.aa-card__h { margin: 0; font-size: inherit; }
.aa-card__btn { position: relative; display: grid; gap: 2px; width: 100%; min-height: 64px; padding: 18px 56px 18px 22px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.aa-card__theme { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.aa-card__title { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.aa-card__deva { font-family: var(--aa-deva); font-size: 1.1rem; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.aa-card__chev { position: absolute; right: 20px; top: 26px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--champagne-strong); }
.aa-card__chev::before, .aa-card__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--gold-text); translate: -50% -50%; transition: rotate var(--t-base) var(--ease); }
.aa-card__chev::after { rotate: 90deg; }
.aa-card__btn[aria-expanded="true"] .aa-card__chev::after { rotate: 0deg; }
.aa-card__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.aa-card__body { padding: 0 22px 20px; border-top: 1px dashed var(--champagne); }
.aa-card__body[hidden] { display: none; }
.aa-card__body p { margin: 14px 0 0; }
.aa-card__src { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; }
.aa-card__share { margin-top: 14px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--champagne-strong); background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; }

/* ---------- Harmonium & Tabla ---------- */
.aa-music__grid { display: grid; gap: clamp(18px, 3vw, 32px); }
@media (min-width: 1024px) { .aa-music__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.aa-sargam, .aa-notation { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--radius-card); border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); min-width: 0; }
.aa-field { display: inline-grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.aa-field select { min-height: 48px; min-width: 12rem; padding: 0 40px 0 14px; border-radius: 14px; border: 1px solid var(--champagne-strong); background: var(--parchment) var(--select-arrow) no-repeat right 14px center;
  color: var(--ink); font: inherit; appearance: none; -webkit-appearance: none; }
.aa-table-wrap { margin-top: 14px; overflow-x: auto; }
.aa-sargam__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.aa-sargam__table th, .aa-sargam__table td { padding: 8px 10px; border-bottom: 1px solid var(--champagne); text-align: left; }
.aa-sargam__table thead th { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.aa-sargam__table tbody th { font-weight: 600; white-space: nowrap; }
.aa-sargam__table tbody th span { color: var(--gold-text); margin-left: 4px; }
.aa-sargam__table tr.is-komal td:first-of-type, .aa-sargam__table tr.is-tivra td:first-of-type { color: var(--accent); font-weight: 600; }
.aa-sargam__table td:last-child { font-weight: 700; font-size: 1.05rem; }
.aa-chords { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.aa-chords strong { color: var(--ink); }
.aa-taal { margin-top: 14px; border-top: 1px dashed var(--champagne); padding-top: 10px; }
.aa-taal summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.aa-taal dl { margin: 6px 0 0; display: grid; gap: 8px; }
.aa-taal dt { font-weight: 600; font-size: var(--fs-sm); }
.aa-taal dd { margin: 0; font-family: var(--serif); font-size: 1.1rem; overflow-wrap: anywhere; }
.aa-notation h3 { font-size: 1.6rem; margin: 0 0 10px; }
.aa-notation__empty { margin: 0; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--champagne-strong); color: var(--muted); font-style: italic; }
.aa-notation__meta { color: var(--muted); font-size: var(--fs-sm); }
.aa-notation__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aa-nline { padding: 12px 14px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--line); min-width: 0; }
.aa-nline__label { display: block; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin-bottom: 6px; }
.aa-nline__raw, .aa-nline__chords { display: block; font-family: var(--sans); white-space: normal; overflow-wrap: anywhere; }
.aa-nline__chords { color: var(--gold-text); font-size: var(--fs-sm); margin-top: 4px; }
.aa-ntoks { display: flex; flex-wrap: wrap; gap: 6px; }
.aa-ntok { display: inline-grid; justify-items: center; min-width: 40px; padding: 4px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--champagne); line-height: 1.2; }
.aa-ntok b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.aa-ntok small { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.aa-ntok.is-komal b { text-decoration: underline; text-underline-offset: 3px; }
.aa-ntok.is-tivra b::after { content: "´"; }
.aa-ntok.is-mark { min-width: 22px; background: transparent; border-color: transparent; color: var(--muted); }
.aa-ntok i.oct { font-style: normal; font-size: 0.7rem; color: var(--gold-text); }
.aa-nchords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aa-nchords span { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--champagne-strong); color: var(--gold-text); font-weight: 600; font-size: var(--fs-sm); }

/* ---------- run-of-show ---------- */
.aa-cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 18px; }
@media (min-width: 900px) { .aa-cues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aa-cue label { display: grid; gap: 4px; }
.aa-cue__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--gold-text); }
.aa-cue input { min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--champagne-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); width: 100%; }
.aa-cue input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
@media (pointer: coarse) { .aa-field select, .aa-cue input { font-size: 16px; } } /* touch: 16px, so iOS never zooms in on focus */
.aa-ros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.aa-sheet { display: none; }

/* ---------- more ---------- */
.aa-more { display: grid; gap: 14px; }
@media (min-width: 900px) { .aa-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aa-more__card { display: grid; gap: 4px; padding: 22px; border-radius: var(--radius-card); border: 1px solid var(--champagne); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-soft); }
.aa-more__k { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); }
.aa-more__t { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.aa-more__d { color: var(--muted); font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) { .aa-more__card:hover { border-color: var(--champagne-strong); color: var(--ink); text-decoration: none; } }

/* ---------- mini player (while the stage is off screen and the recording plays) ---------- */
.aa-mini { position: fixed; z-index: 40; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: 10px;
  width: min(calc(100% - 32px), 440px); padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(13, 11, 9, 0.92); color: var(--aa-parch);
  border: 1px solid var(--aa-line-strong); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.aa-mini__play { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--aa-gold); color: #2A0A14; font-size: 1.1rem; cursor: pointer; }
.aa-mini__text { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.aa-mini__sec { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-mini__time { font-size: var(--fs-xs); color: var(--aa-parch-muted); font-variant-numeric: tabular-nums; }

/* ---------- light theme: the panel text stays on the dark stage; the rest follows the tokens ---------- */
[data-theme="light"] .aa__aura { background: radial-gradient(48% 46% at 50% 22%, rgba(245, 158, 11, 0.12), transparent 70%); }

@media (prefers-reduced-motion: reduce) {
  .aa-sec, .aa-line, .aa-art__glow, .aa-nav__btn, .aa-ritual__ack, .aa-card__chev::after { transition: none; }
}

/* ---------- Rudri Path Practice Hub ---------- */
.rph section + section { margin-top: clamp(44px, 6vw, 80px); }
.rph-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .rph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rph-card { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--radius-card); border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); min-width: 0; }
.rph-card h3 { font-size: 1.6rem; margin: 0 0 8px; }
.rph-when { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.2; margin: 0; }
.rph-local { margin: 6px 0 0; color: var(--gold-text); font-weight: 600; min-height: 1.5em; }
.rph-meta { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.rph-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rph-tracker__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rph-progress { display: flex; align-items: center; gap: 12px; min-width: min(100%, 260px); }
.rph-progress progress { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; -webkit-appearance: none; appearance: none; border: 0; background: var(--sunken); }
.rph-progress progress::-webkit-progress-bar { background: var(--sunken); border-radius: 999px; }
.rph-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #E7AE45, #D97706); border-radius: 999px; }
.rph-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #E7AE45, #D97706); border-radius: 999px; }
.rph-verses { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .rph-verses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rph-verse label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--champagne); background: var(--surface); cursor: pointer; }
.rph-verse input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--vermilion); }
.rph-verse__t { display: grid; min-width: 0; }
.rph-verse__k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--gold-text); }
.rph-verse__d { font-family: var(--aa-deva); font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.rph-verse input:checked + .rph-verse__t .rph-verse__d { color: var(--muted); }
.rph-verse:has(input:checked) label { border-color: var(--champagne-strong); background: linear-gradient(90deg, var(--aa-glow), transparent); }
.rph-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---------- the printed run-of-show (Download run-of-show → Save as PDF): one page, Letter or A4 ---------- */
@media print {
  @page { size: auto; margin: 10mm 10mm 11mm; }
  html, body { background: #fff !important; color: #000 !important; }
  /* /bhakti/aarti prints its run-of-show sheet only (the button and Ctrl/Cmd+P alike) */
  body:has(> main.aa-sanctuary) > :not(main), main.aa-sanctuary > :not(.wrap), .aa-sanctuary .wrap > :not(.aa-ros), .aa-ros > :not(.aa-sheet), .aa-mini, [data-djjs-global], .skip-link { display: none !important; }
  .aa-sanctuary.page { padding: 0 !important; overflow: visible !important; }
  .aa-sanctuary .wrap { width: auto !important; margin: 0 !important; }
  .aa-sanctuary section + section { margin: 0 !important; }
  .aa .aa-sheet { display: block !important; color: #000; font-family: var(--sans); font-size: 7.6pt; line-height: 1.3; }
  .aa-sheet * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .aa-sheet__head { border-bottom: 0.8pt solid #888; padding-bottom: 2.5mm; margin-bottom: 2.5mm; }
  .aa-sheet__org { margin: 0; font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase; }
  .aa-sheet h2 { margin: 0.6mm 0; font-family: var(--serif); font-size: 17pt; font-weight: 600; }
  .aa-sheet h2 span { font-family: var(--aa-deva); font-size: 12pt; margin-left: 2mm; }
  .aa-sheet__meta { margin: 0; font-size: 7.2pt; }
  .aa-sheet__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .aa-sheet__table th { text-align: left; font-size: 6.6pt; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 0.6pt solid #888; padding: 1mm 1.2mm; }
  .aa-sheet__table td { vertical-align: top; padding: 1.1mm 1.2mm; border-bottom: 0.3pt solid #ccc; overflow-wrap: anywhere; }
  .aa-sheet__table th:nth-child(1) { width: 4%; } .aa-sheet__table th:nth-child(2) { width: 7%; } .aa-sheet__table th:nth-child(3) { width: 7%; }
  .aa-sheet__table th:nth-child(4) { width: 19%; } .aa-sheet__table th:nth-child(5) { width: 42%; } .aa-sheet__table th:nth-child(6) { width: 21%; }
  .aa-sheet__table tr { break-inside: avoid; page-break-inside: avoid; }
  .aa-sheet__table td:nth-child(2), .aa-sheet__table td:nth-child(3) { font-variant-numeric: tabular-nums; }
  .aa-sheet__sub { font-size: 6.6pt; color: #444 !important; }
  .aa-sheet__deva { display: block; font-family: var(--aa-deva); font-size: 8.4pt; line-height: 1.45; }
  .aa-sheet__iast { display: block; font-family: var(--serif); font-style: italic; font-size: 7.6pt; line-height: 1.25; margin-bottom: 0.6mm; }
  .aa-sheet__more { display: block; font-size: 6.6pt; color: #444 !important; }
  .aa-sheet__foot { margin: 2.5mm 0 0; font-size: 6.6pt; text-align: center; color: #444 !important; }
  .aa-sheet [lang="hi"] { font-family: var(--aa-deva); }
}
@media screen and (max-width: 520px) { .aa-sargam__table th, .aa-sargam__table td { padding: 8px 6px; } .aa-sargam { padding: 16px 14px; } }
.aa-sargam__table abbr { text-decoration: none; }

/* v1.3.2: "🪔 Follow Aarti Now" from another page cross-fades into this one where the browser supports cross-document view
   transitions (the banner opts the page it leaves in only for that click: assets/js/chrome-v112.js follow()). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 260ms; }
  ::view-transition-new(root) { animation-duration: 420ms; }
}

/* v1.3.8 demystification: the English half of a dual title, and the petals button's subtitle */
.aa-dual { display: block; margin-top: .25em; font-size: .42em; font-weight: 500; letter-spacing: .01em; line-height: 1.3; color: var(--gold-text); }
.aa-ritual__en { font-weight: 500; font-size: .82em; opacity: .9; }
@media (max-width: 520px) { .aa-ritual__en { display: block; } .aa-ritual__btn { flex-wrap: wrap; height: auto; min-height: 44px; } }

/* ---------- Schema patch 39: the altar (includes/aarti.php aarti_altar_html()) ----------
   The Divine Swaroop of His Holiness Shri Ashutosh Maharaj Ji (the authentic image from the Sacred Media Desk) on a
   luminous backplate, framed by a slowly breathing golden halo with a few rising sparks; beneath it the brass Aarti thali
   is offered in clockwise circles (Aarti Parikrama), its ghee and camphor flames flickering. The plate stays level as it
   circles. Brighter while the Aarti plays and at the Mangal Aarti (--aa-climax); still under prefers-reduced-motion. */
.aa-stage__screen.has-altar { aspect-ratio: 4 / 5; max-height: min(86vh, 760px); }
@media (min-width: 640px) and (max-width: 1023.98px) { .aa-stage__screen.has-altar { aspect-ratio: 5 / 4; } }
@media (min-width: 1024px) { .aa-stage__screen.has-altar { aspect-ratio: auto; min-height: max(100%, 600px); max-height: none; } }
.aa-altar {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; container-type: size; container-name: altar;
  background: radial-gradient(120% 85% at 50% 32%, #2E1707 0%, #170C05 52%, #0D0B09 100%);
}
.aa-altar__backplate {
  position: absolute; left: 50%; top: 38%; width: min(92cqw, 92cqh); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.3) 0%, rgba(245, 158, 11, 0.14) 36%, rgba(217, 119, 6, 0.05) 58%, transparent 70%);
}
.aa-altar__darshan {
  position: absolute; z-index: 1; left: 50%; top: 5cqh; height: 62cqh; max-width: 82cqw; aspect-ratio: 4 / 5; translate: -50% 0; margin: 0;
  display: grid; place-items: center;
}
.aa-altar__swaroop {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  border-radius: 50% 50% 18px 18px / 36% 36% 18px 18px;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.38), 0 0 34px rgba(245, 158, 11, 0.28), 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
.aa-altar__halo {
  position: absolute; z-index: 0; left: 50%; top: 32%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 178, calc(0.5 + 0.25 * var(--aa-climax, 0))), rgba(245, 158, 11, 0.26) 46%, rgba(217, 119, 6, 0.08) 72%, transparent);
  animation: aa-halo 6.5s ease-in-out infinite;
}
.aa-altar__darshan--light { height: 52cqh; }
@keyframes aa-halo { 0%, 100% { opacity: 0.72; scale: 0.96; } 50% { opacity: 1; scale: 1.04; } }
.aa-altar__sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.aa-altar__spark {
  position: absolute; left: calc(28% + var(--k) * 5%); bottom: 16%; width: 3px; height: 3px; border-radius: 50%;
  background: #FCD34D; box-shadow: 0 0 6px 1px rgba(245, 158, 11, 0.8); opacity: 0;
  animation: aa-spark 7.5s linear infinite; animation-delay: calc(var(--k) * -0.83s);
}
@keyframes aa-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(calc((var(--k) - 5) * 4px), -58cqh); }
}
/* the Parikrama: the plate's centre travels a circle (clockwise on screen) and the plate itself stays level */
.aa-altar__orbit { position: absolute; z-index: 3; left: 50%; top: 74cqh; width: 0; height: 0; --aa-r: min(7cqw, 6cqh); }
.aa-altar__thali {
  position: absolute; left: 0; top: 0; width: min(66cqw, 46cqh, 400px); transform-origin: 0 0;
  transform: rotate(90deg) translateX(var(--aa-r)) rotate(-90deg) translate(-50%, -50%);
  animation: aa-parikrama 9s linear infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.aa-stage.is-playing .aa-altar__thali { animation-duration: 6s; }
.aa-stage.is-playing .aa-altar__halo { animation-duration: 4.5s; }
@keyframes aa-parikrama {
  from { transform: rotate(90deg) translateX(var(--aa-r)) rotate(-90deg) translate(-50%, -50%); }
  to { transform: rotate(450deg) translateX(var(--aa-r)) rotate(-450deg) translate(-50%, -50%); }
}
.aa-thali__svg { display: block; width: 100%; height: auto; overflow: visible; }
.aa-thali__flame-in { animation: aa-flicker 1.4s ease-in-out infinite alternate; }
.aa-thali__flame--kapoor .aa-thali__flame-in { animation-duration: 0.9s; }
.aa-thali__flame--kapoor2 .aa-thali__flame-in { animation-duration: 1.15s; animation-delay: -0.4s; }
@keyframes aa-flicker {
  0% { transform: scale(1, 1) skewX(0deg); }
  35% { transform: scale(0.93, 1.07) skewX(2.5deg); }
  70% { transform: scale(1.05, 0.95) skewX(-2deg); }
  100% { transform: scale(0.97, 1.04) skewX(1deg); }
}
.aa-thali__halo { animation: aa-glowpulse 2.2s ease-in-out infinite alternate; }
@keyframes aa-glowpulse { from { opacity: 0.7; } to { opacity: 1; } }
.aa-thali__smoke path { animation: aa-smoke 6s ease-in-out infinite; }
.aa-thali__smoke path + path { animation-delay: -3s; }
@keyframes aa-smoke { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
/* the facade's play button sits over the altar's lower edge */
.aa-facade .aa-altar { z-index: 0; }
@media (prefers-reduced-motion: reduce) {
  .aa-altar__thali, .aa-altar__halo, .aa-thali__flame-in, .aa-thali__halo, .aa-thali__smoke path { animation: none; }
  .aa-altar__thali { transform: translate(-50%, -50%); }
  .aa-altar__spark { display: none; }
}
@media (forced-colors: active) { .aa-altar__sparks, .aa-altar__backplate, .aa-altar__halo { display: none; } }
/* schema patch 39.33: the altar's WebGL light (assets/js/aarti-fx.js): flames that sway by vertex, embers and soft dhoop smoke,
   additive, above the swaroop's backplate and below the thali's orbit; every particle fades out before the lower edge of the
   swaroop's face. While it runs (.is-fx) the SVG flames and the CSS sparks step aside so nothing is drawn twice. */
.aa-altar__fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.aa-altar.is-fx .aa-thali__flame-in { opacity: 0; }
.aa-altar.is-fx .aa-altar__sparks { display: none; }
@media (forced-colors: active) { .aa-altar__fx { display: none; } .aa-altar.is-fx .aa-thali__flame-in { opacity: 1; } }
.aa-begin__btn.is-waiting { box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.35); }
/* patch 39.01: the Rudrashtadhyayi's order on the Rudri Path Practice hub */
.rph-order { margin: 12px 0; padding-left: 1.4em; display: grid; gap: 6px; }
.rph-order li { padding-left: 4px; }