/* Sikhi — Sacred Sanctuary Theme */

/* Noto Sans Gurmukhi — loaded via <link> in base.html for preload support */

/* Eliminate 300ms tap delay on mobile */
* { touch-action: manipulation; }

/* Prevent browser's built-in pull-to-refresh from conflicting with custom gesture */
body.sikhi-app { overscroll-behavior-y: none; }

:root {
  /* Core palette — luxe minimal */
  --milk-cream: #F7F7F5;
  --milk-warm: #F2F1EF;
  --milk-honey: #B87A1E;
  --milk-honey-soft: #F5F0E6;
  --milk-teal: #AD7018;
  --milk-teal-dark: #8C5A13;
  --milk-teal-soft: #F5F0E6;
  --milk-rose: #BE4D58;
  --milk-rose-soft: #F9EEF0;
  --milk-shaheedi: #C0392B;
  --milk-itihaas: #6B7B8D;
  --milk-jor-mela: #D4A054;
  --milk-text: #1A1714;
  --milk-text-soft: #999999;
  --milk-border: #EBEBEB;
  --milk-card: #FFFFFF;

  /* Barely-there shadows */
  --milk-shadow: 0 1px 2px rgba(0,0,0,0.02),
                 0 4px 12px rgba(0,0,0,0.03);
  --milk-shadow-lg: 0 2px 4px rgba(0,0,0,0.02),
                    0 8px 24px rgba(0,0,0,0.04),
                    0 12px 32px rgba(0,0,0,0.02);

  /* Spiritual palette (used in hukamnama light-mode fallbacks) */
  --milk-saffron: #AD7018;
  --milk-saffron-glow: #C99A3E;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
}


/* === Sanctuary theme (dark mode) === */

.sanctuary {
  --sanctuary-bg: #0F1419;
  --sanctuary-bg-elevated: #1A2128;
  --sanctuary-bg-card: #1E2730;
  --sanctuary-gold: #C99A3E;
  --sanctuary-gold-soft: rgba(201,154,62,0.15);
  --sanctuary-gold-glow: rgba(201,154,62,0.08);
  --sanctuary-text: #E8E4DC;
  --sanctuary-text-soft: rgba(232,228,220,0.5);
  --sanctuary-border: rgba(201,154,62,0.12);
  --sanctuary-shadow: 0 4px 24px rgba(0,0,0,0.4),
                      0 1px 4px rgba(0,0,0,0.2);
  --milk-saffron: var(--sanctuary-gold);
  --milk-text-soft: var(--sanctuary-text-soft);
}

body.sikhi-app.sanctuary {
  --milk-text: var(--sanctuary-text);
  --milk-text-soft: var(--sanctuary-text-soft);
  --milk-saffron: var(--sanctuary-gold);
  --milk-saffron-glow: var(--sanctuary-gold);
  --milk-border: var(--sanctuary-border);
  --milk-warm: var(--sanctuary-bg-elevated);
  --milk-card: var(--sanctuary-bg-card);
  --milk-cream: var(--sanctuary-bg);
  --milk-teal: var(--sanctuary-gold);
  --milk-teal-dark: var(--sanctuary-gold);
  --milk-teal-soft: rgba(201,154,62,0.12);
  --milk-rose: #E06C75;
  --milk-rose-soft: rgba(224,108,117,0.15);
  --milk-shaheedi: #E74C3C;
  --milk-itihaas: #8FA3B5;
  --milk-jor-mela: #E8B86D;
  --milk-honey: var(--sanctuary-gold);
  --milk-honey-soft: var(--sanctuary-gold-soft);
  --milk-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
  --milk-shadow-lg: 0 2px 4px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.2);
  background: var(--sanctuary-bg);
  color: var(--sanctuary-text);
}


/* === Body === */

body.sikhi-app {
  font-family: 'Noto Sans Gurmukhi', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--milk-cream);
  color: var(--milk-text);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[x-cloak] { display: none !important; }

/* Gold text selection */
.sikhi-app ::selection {
  background: rgba(201,154,62,0.25);
  color: var(--milk-text);
}
.sikhi-app.sanctuary ::selection {
  background: rgba(201,154,62,0.35);
  color: var(--sanctuary-text);
}


/* === Utility: Luxe Card === */

.luxe-card {
  background: var(--milk-card);
  box-shadow: var(--milk-shadow);
  border: 1px solid rgba(201,154,62,0.15);
}


/* === Shahi Hukamnama Frame === */

.shahi-outer {
  border: 2.5px solid var(--milk-saffron-glow);
  border-radius: 20px;
  padding: 4px;
}

.shahi-inner {
  border: 1px solid rgba(201,154,62,0.25);
  border-radius: 16px;
  padding: 24px 8px 20px;
  position: relative;
  background: var(--milk-card);
  box-shadow: inset 0 0 40px rgba(201,154,62,0.03);
}

.shahi-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--milk-saffron-glow);
  border-style: solid;
  border-width: 0;
  opacity: 0.5;
}
.shahi-corner::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--milk-saffron-glow);
  border-style: solid;
  border-width: 0;
  opacity: 0.6;
}
.shahi-corner--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; border-radius: 3px 0 0 0; }
.shahi-corner--tl::after { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; border-radius: 2px 0 0 0; }
.shahi-corner--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 3px 0 0; }
.shahi-corner--tr::after { top: 4px; right: 4px; border-top-width: 1px; border-right-width: 1px; border-radius: 0 2px 0 0; }
.shahi-corner--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 3px; }
.shahi-corner--bl::after { bottom: 4px; left: 4px; border-bottom-width: 1px; border-left-width: 1px; border-radius: 0 0 0 2px; }
.shahi-corner--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 3px 0; }
.shahi-corner--br::after { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; border-radius: 0 0 2px 0; }

.shahi-divider {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shahi-divider::before,
.shahi-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--milk-saffron), transparent);
  opacity: 0.35;
}
.shahi-diamond {
  width: 5px;
  height: 5px;
  background: var(--milk-saffron);
  transform: rotate(45deg);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Sanctuary Shahi overrides */
.sanctuary .shahi-outer {
  border-color: rgba(201,154,62,0.6);
}
.sanctuary .shahi-inner {
  border-color: rgba(201,154,62,0.15);
  background: rgba(30,39,48,0.6);
  box-shadow: inset 0 0 60px rgba(201,154,62,0.03),
              0 0 40px rgba(201,154,62,0.05);
}
.sanctuary .shahi-corner { opacity: 0.4; }
.sanctuary .shahi-divider::before,
.sanctuary .shahi-divider::after {
  background: linear-gradient(90deg, transparent, rgba(201,154,62,0.5), transparent);
  opacity: 0.5;
}
.sanctuary .shahi-diamond { opacity: 0.5; }

/* Raag/author badge */
.raag-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 100px;
  background: rgba(173,112,24,0.07);
  font-size: 10px;
  font-weight: 600;
  color: var(--milk-saffron);
}
.sanctuary .raag-badge {
  background: rgba(201,154,62,0.1);
}


/* === Progress Bar === */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--milk-saffron), var(--milk-saffron-glow));
  z-index: 60;
  transition: width 200ms var(--ease-out-expo), opacity 200ms ease;
  pointer-events: none;
}


/* === Skeleton Screens === */

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: var(--milk-border);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

.sanctuary .skeleton-line {
  background: var(--sanctuary-border);
}

.sanctuary #page-skeleton {
  background: var(--sanctuary-bg) !important;
}


/* === Floating Share === */

.share-float {
  transition: bottom var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-fast) var(--ease-spring);
}
.share-float:active {
  transform: scale(0.9);
}

@keyframes share-fade-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.share-float-enter {
  animation: share-fade-in 300ms var(--ease-spring) 1s both;
}


/* === Pull to Refresh === */

.pull-indicator {
  transition: transform 100ms ease, opacity 200ms ease;
}
.pull-ring {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--milk-border);
  border-top-color: var(--milk-saffron);
  border-radius: 50%;
}
.pull-ring.spinning {
  animation: pull-spin 800ms linear infinite;
}
@keyframes pull-spin {
  to { transform: rotate(360deg); }
}
.sanctuary .pull-ring {
  border-color: var(--sanctuary-border);
  border-top-color: var(--sanctuary-gold);
}


/* === Verse Accent Bar (line-by-line mode) === */

.verse-accent {
  border-left: 2px solid rgba(201,154,62,0.3);
  padding-left: 1rem;
}
.sanctuary .verse-accent {
  border-left-color: rgba(201,154,62,0.4);
}


/* === Numpad button (used by jantri nav arrows) === */

.numpad-btn {
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color 80ms ease,
              box-shadow var(--dur-fast) ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.04);
  user-select: none;
  -webkit-user-select: none;
}
.numpad-btn:active {
  transform: scale(0.93);
  box-shadow: none;
}


/* === Animations === */

@keyframes card-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.card-enter { animation: card-up 300ms var(--ease-smooth) both; }

/* Jantri month navigation slide transitions */
@keyframes jantri-out-left {
  to { transform: translateX(-20px); opacity: 0; }
}
@keyframes jantri-out-right {
  to { transform: translateX(20px); opacity: 0; }
}
@keyframes jantri-in-left {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes jantri-in-right {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.jantri-slide-out-left  { animation: jantri-out-left 100ms var(--ease-smooth) both; }
.jantri-slide-out-right { animation: jantri-out-right 100ms var(--ease-smooth) both; }
.jantri-slide-in-left   { animation: jantri-in-left 150ms var(--ease-smooth) both; }
.jantri-slide-in-right  { animation: jantri-in-right 150ms var(--ease-smooth) both; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* === SPA Tab Transitions === */

.tab-panel {
  transition: opacity 100ms var(--ease-smooth);
}

/* === Detail Overlay === */

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--milk-cream);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sanctuary .detail-overlay {
  background: var(--sanctuary-bg);
}

/* Overlay backdrop dim */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: rgba(0,0,0,0.3);
}
.sanctuary .overlay-backdrop {
  background: rgba(0,0,0,0.5);
}


/* === Sticky header — frosted glass === */

.sikhi-header-blur {
  background: rgba(247,247,245,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.sanctuary .sikhi-header-blur {
  background: rgba(15,20,25,0.85);
}

/* === Navigation bar — frosted glass === */

.nav-bar {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(235,235,235,0.4),
              0 -2px 16px rgba(26,23,20,0.04);
  border-top: 1px solid rgba(201,154,62,0.2);
}

.nav-tab {
  position: relative;
  color: var(--milk-text-soft);
  transition: color var(--dur-fast) ease;
}

.nav-tab-active {
  position: relative;
  color: var(--milk-teal);
}
.nav-tab-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%; right: 30%;
  height: 3px;
  border-radius: 2px;
  background: var(--milk-teal);
  animation: dot-pop 250ms var(--ease-spring);
}

@keyframes dot-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-fade {
  padding-top: 1.5rem;
  background: linear-gradient(to top, var(--milk-cream) 65%, transparent);
}


/* === Nav Scroll Hide (reading pages) === */

.nav-scroll-hide {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.nav-scroll-hide.nav-hidden {
  transform: translateY(100%);
}




/* === Gurbani text === */

.gurbani-text {
  line-height: 1.9;
  letter-spacing: 0.015em;
}


/* === Reading shell === */

.reading-shell .gurbani-verse {
  font-size: clamp(18px, 4.5vw, 24px);
  line-height: 1.9;
  letter-spacing: 0.018em;
  font-weight: 600;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

.reading-shell .translation-text {
  font-size: clamp(15px, 3.8vw, 20px);
  line-height: 1.6;
  font-weight: 500;
}


/* === Safe area — iOS === */

.sikhi-nav-safe {
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
}


/* === Scrollbar === */

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; }


/* =================================
   Hukamnama — Sacred Aesthetic
   ================================= */

.shabad-block {
  text-align: center;
}

/* Verse stack — each verse on its own line, minimal gaps */
.verse-stack .gurbani-verse {
  margin-bottom: 0;
  line-height: 1.7;
}
.verse-stack .translation-text {
  margin-bottom: 0;
}

/* Line-by-line verse pair */
.verse-pair {
  text-align: center;
  padding: 0.15em 0;
}
.verse-arth {
  margin-top: 0.25em;
}

.gurbani-verse {
  text-align: center;
  line-height: 1.9;
  letter-spacing: 0.015em;
  font-weight: 600;
}

.translation-text {
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}

/* Stack translations tighter — short phrases need less breathing room */
.verse-stack .translation-text {
  line-height: 1.4;
}

/* Light mode ambient glow — soft sunlight warmth */
.light-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(201,154,62,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(201,154,62,0.03) 0%, transparent 40%);
  animation: light-breathe 10s ease-in-out infinite;
}

@keyframes light-breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}


.ik-onkar {
  font-size: 3.25rem;
  line-height: 1.3;
  padding-top: 0.15em;
  color: var(--milk-saffron);
  text-shadow: 0 0 32px rgba(173,112,24,0.18),
               0 0 64px rgba(173,112,24,0.08);
}

/* Header Ik Onkar — subtle perpetual glow */
.header-ik-onkar {
  text-shadow: 0 0 12px rgba(201,154,62,0.4),
               0 0 24px rgba(201,154,62,0.15);
  animation: header-ik-pulse 4s ease-in-out infinite;
}
@keyframes header-ik-pulse {
  0%, 100% { text-shadow: 0 0 12px rgba(201,154,62,0.4), 0 0 24px rgba(201,154,62,0.15); }
  50%      { text-shadow: 0 0 18px rgba(201,154,62,0.6), 0 0 36px rgba(201,154,62,0.25); }
}

.hukam-rule {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--milk-saffron-glow),
    var(--milk-saffron),
    var(--milk-saffron-glow),
    transparent
  );
  opacity: 0.35;
}

.verse-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
}
.verse-divider::before,
.verse-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--milk-border), transparent);
}
.verse-divider-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--milk-saffron);
  opacity: 0.45;
  flex-shrink: 0;
}

.hukam-toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 9999px;
  background: var(--milk-border);
  transition: background var(--dur-normal) ease;
  flex-shrink: 0;
}
.hukam-toggle-track.active {
  background: var(--milk-saffron);
}
.hukam-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15),
              0 1px 1px rgba(0,0,0,0.06);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.hukam-toggle-track.active .hukam-toggle-thumb {
  transform: translateX(18px);
}
.hukam-toggle:active .hukam-toggle-thumb {
  width: 24px;
}
.hukam-toggle:active .hukam-toggle-track.active .hukam-toggle-thumb {
  transform: translateX(14px);
}

@keyframes verse-appear {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.verse-enter {
  animation: verse-appear 500ms var(--ease-out-expo) both;
  animation-delay: calc(var(--verse-idx, 0) * 120ms);
}

@keyframes hukam-header-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.hukam-header-enter {
  animation: hukam-header-in 600ms var(--ease-out-expo) both;
}

@keyframes hukam-audio-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,154,62,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(201,154,62,0); }
}
.hukam-audio-pulse {
  animation: hukam-audio-glow 2s ease-in-out infinite;
}


/* =================================
   Sanctuary — Dark Mode
   ================================= */

/* Sanctuary Ik Onkar — glowing gold */
.sanctuary .ik-onkar {
  color: var(--sanctuary-gold);
  animation: ik-glow 4s ease-in-out infinite;
}

.sanctuary .header-ik-onkar {
  text-shadow: 0 0 16px rgba(201,154,62,0.6), 0 0 32px rgba(201,154,62,0.3);
  animation: header-ik-pulse-dark 4s ease-in-out infinite;
}
@keyframes header-ik-pulse-dark {
  0%, 100% { text-shadow: 0 0 16px rgba(201,154,62,0.6), 0 0 32px rgba(201,154,62,0.3); }
  50%      { text-shadow: 0 0 24px rgba(201,154,62,0.8), 0 0 48px rgba(201,154,62,0.4); }
}

@keyframes ik-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,154,62,0.3), 0 0 60px rgba(201,154,62,0.1); }
  50%      { text-shadow: 0 0 35px rgba(201,154,62,0.5), 0 0 80px rgba(201,154,62,0.2); }
}

/* Sanctuary ambient glow — breathing radial gradient */
.sanctuary-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(201,154,62,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 75%, rgba(201,154,62,0.04) 0%, transparent 45%);
  animation: sanctuary-breathe 8s ease-in-out infinite;
}

@keyframes sanctuary-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Sanctuary particles — floating gold dots */
.sanctuary-particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sanctuary-particles span {
  position: absolute;
  bottom: -10px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--sanctuary-gold);
  opacity: 0;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.5; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(25px); opacity: 0; }
}

.sanctuary-particles span:nth-child(1) { left: 8%;  animation-duration: 20s; animation-delay: 0s; }
.sanctuary-particles span:nth-child(2) { left: 22%; animation-duration: 25s; animation-delay: 3s; width: 3px; height: 3px; }
.sanctuary-particles span:nth-child(3) { left: 38%; animation-duration: 18s; animation-delay: 7s; }
.sanctuary-particles span:nth-child(4) { left: 52%; animation-duration: 22s; animation-delay: 1s; }
.sanctuary-particles span:nth-child(5) { left: 68%; animation-duration: 19s; animation-delay: 5s; width: 3px; height: 3px; }
.sanctuary-particles span:nth-child(6) { left: 82%; animation-duration: 24s; animation-delay: 9s; }
.sanctuary-particles span:nth-child(7) { left: 15%; animation-duration: 21s; animation-delay: 12s; width: 3px; height: 3px; }
.sanctuary-particles span:nth-child(8) { left: 60%; animation-duration: 17s; animation-delay: 4s; }

/* Sanctuary nav bar — dark frosted glass */
.sanctuary .nav-bar {
  background: rgba(15,20,25,0.95);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 0 0 1px rgba(201,154,62,0.08),
              0 -2px 16px rgba(0,0,0,0.3);
  border-top: 1px solid rgba(201,154,62,0.15);
}
.sanctuary .nav-tab { color: var(--sanctuary-text-soft); }
.sanctuary .nav-tab-active { color: var(--sanctuary-gold); }
.sanctuary .nav-tab-active::after { background: var(--sanctuary-gold); }

.sanctuary .nav-fade {
  background: linear-gradient(to top, var(--sanctuary-bg) 65%, transparent);
}

/* Sanctuary reading shell — transparent (body.sanctuary provides bg) */
.sanctuary .reading-shell { background: transparent; }

/* Sanctuary hukam rule — gold */
.sanctuary .hukam-rule {
  background: linear-gradient(90deg, transparent, var(--sanctuary-gold), transparent);
  opacity: 0.25;
}

/* Sanctuary verse dividers — gold */
.sanctuary .verse-divider::before,
.sanctuary .verse-divider::after {
  background: linear-gradient(90deg, transparent, rgba(201,154,62,0.3), transparent);
}
.sanctuary .verse-divider-dot {
  background: var(--sanctuary-gold);
  opacity: 0.5;
}

/* Sanctuary gurbani verse — light text, generous spacing */
.sanctuary .gurbani-verse {
  color: var(--sanctuary-text);
  line-height: 2.2;
  letter-spacing: 0.025em;
}

/* Sanctuary verse entrance — slower, more reverent */
@keyframes sanctuary-verse-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.sanctuary .verse-enter {
  animation: sanctuary-verse-in 600ms var(--ease-out-expo) both;
  animation-delay: calc(var(--verse-idx, 0) * 120ms);
}

/* Sanctuary toggle — gold */
.sanctuary .hukam-toggle-track { background: rgba(201,154,62,0.2); }
.sanctuary .hukam-toggle-track.active { background: var(--sanctuary-gold); }

/* Sanctuary component overrides */
.sanctuary .numpad-btn {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  border-color: var(--sanctuary-border);
}


.sanctuary input,
.sanctuary select,
.sanctuary textarea {
  background: var(--sanctuary-bg-elevated);
  border-color: var(--sanctuary-border);
  color: var(--sanctuary-text);
}


/* === Kirtan Page === */

/* Hero card — featured gurdwara */
.kirtan-hero {
  border: none;
  background: none;
  cursor: pointer;
}
.kirtan-hero-inner {
  background: var(--milk-card);
  border: 2px solid rgba(201,154,62,0.35);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(201,154,62,0.08),
              inset 0 0 40px rgba(201,154,62,0.03);
}
.sanctuary .kirtan-hero-inner {
  background: rgba(30,39,48,0.6);
  border-color: rgba(201,154,62,0.5);
  box-shadow: 0 4px 24px rgba(201,154,62,0.08),
              inset 0 0 60px rgba(201,154,62,0.03),
              0 0 40px rgba(201,154,62,0.05);
}

/* Hero play button */
.kirtan-hero-play {
  background: var(--milk-saffron);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(201,154,62,0.15),
              0 0 24px rgba(201,154,62,0.2);
  animation: kirtan-hero-pulse 3s ease-in-out infinite;
}
.sanctuary .kirtan-hero-play {
  box-shadow: 0 0 0 4px rgba(201,154,62,0.2),
              0 0 32px rgba(201,154,62,0.25);
}
@keyframes kirtan-hero-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201,154,62,0.15), 0 0 24px rgba(201,154,62,0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(201,154,62,0.08), 0 0 32px rgba(201,154,62,0.25); }
}

/* Live dot */
.kirtan-live-dot {
  background: #e53e3e;
  animation: kirtan-live-blink 2s ease-in-out infinite;
}
@keyframes kirtan-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Hero wave bars */
.kirtan-wave-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--milk-saffron);
  animation: kirtan-viz 1.4s ease-in-out infinite;
}

/* Radio channel pills */
.kirtan-radio-pill {
  background: var(--milk-card);
  border: 1px solid rgba(201,154,62,0.15);
  box-shadow: var(--milk-shadow);
  animation: card-up 400ms var(--ease-smooth) both;
  animation-delay: calc(var(--pill-idx, 0) * 60ms);
}
.kirtan-radio-pill:active {
  border-color: var(--milk-saffron);
}
.sanctuary .kirtan-radio-pill {
  background: var(--sanctuary-bg-card);
  border-color: var(--sanctuary-border);
}

/* Gurdwara list row */
.kirtan-gurdwara-row {
  background: transparent;
  border: 1px solid transparent;
}
.kirtan-gurdwara-row:active {
  background: var(--milk-warm);
  border-color: rgba(201,154,62,0.12);
}

/* Hero play button — active (playing) */
.kirtan-hero-play-active {
  animation: none;
  box-shadow: 0 0 0 4px rgba(201,154,62,0.2),
              0 0 24px rgba(201,154,62,0.3);
}
.kirtan-hero-play-active .kirtan-viz-bar {
  background: #fff;
}

/* Radio pill — active (playing) */
.kirtan-radio-pill-active {
  border-color: var(--milk-saffron) !important;
  background: rgba(201,154,62,0.08) !important;
}
.sanctuary .kirtan-radio-pill-active {
  background: rgba(201,154,62,0.12) !important;
}

/* Gurdwara row — active (playing) */
.kirtan-gurdwara-row-active {
  background: rgba(201,154,62,0.06);
  border-color: rgba(201,154,62,0.15);
}
.sanctuary .kirtan-gurdwara-row-active {
  background: rgba(201,154,62,0.08);
}

/* Small play button */
.kirtan-play-sm {
  background: rgba(201,154,62,0.1);
  transition: background var(--dur-fast) ease;
}
.kirtan-gurdwara-row:active .kirtan-play-sm {
  background: rgba(201,154,62,0.2);
}


/* === Kirtan Mini Player === */

.kirtan-mini-bar {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 -1px 8px rgba(0,0,0,0.06),
              0 0 0 1px rgba(201,154,62,0.15);
}

.sanctuary .kirtan-mini-bar {
  background: rgba(15,20,25,0.95);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 -1px 8px rgba(0,0,0,0.3),
              0 0 0 1px rgba(201,154,62,0.12);
}

/* Visualizer bars animation */
@keyframes kirtan-viz {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.kirtan-viz-bar {
  background: var(--milk-saffron);
  animation: kirtan-viz 1.2s ease-in-out infinite;
}

/* Kirtan channel highlight when playing */
.kirtan-channel-playing {
  border-color: var(--milk-saffron) !important;
  box-shadow: 0 0 0 1px rgba(201,154,62,0.3),
              inset 0 0 20px rgba(201,154,62,0.05);
}

/* Nav playing indicator dot */
.kirtan-nav-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 14px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--milk-saffron);
  animation: hukam-audio-glow 2s ease-in-out infinite;
}


/* Pause ambient animations when app is backgrounded */
.app-hidden .light-glow,
.app-hidden .sanctuary-glow,
.app-hidden .sanctuary-particles span {
  animation-play-state: paused;
}


/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .verse-enter,
  .hukam-header-enter,
  .card-enter,
  .jantri-slide-out-left,
  .jantri-slide-out-right,
  .jantri-slide-in-left,
  .jantri-slide-in-right {
    animation: none;
  }
  .numpad-btn,
  .nav-tab {
    transition: none;
  }
  /* Sanctuary animations */
  .sanctuary .ik-onkar { animation: none; }
  .header-ik-onkar { animation: none; }
  .sanctuary .header-ik-onkar { animation: none; }
  .light-glow { animation: none; opacity: 0.7; }
  .sanctuary-glow { animation: none; }
  .sanctuary-particles span { animation: none; display: none; }
  .sanctuary .verse-enter { animation: none; }
  .skeleton-line { animation: none; opacity: 0.6; }
  .pull-ring.spinning { animation: none; }
  .share-float-enter { animation: none; opacity: 1; }
  .progress-bar { transition: none; }
  .kirtan-viz-bar { animation: none; height: 8px; }
  .kirtan-wave-bar { animation: none; }
  .kirtan-nav-dot { animation: none; }
  .kirtan-hero-play { animation: none; }
  .kirtan-live-dot { animation: none; }
  .kirtan-radio-pill { animation: none; }
  .detail-overlay { transition: none; }
  .overlay-backdrop { transition: none; }
  .tab-panel { transition: none; }
}