/* Karmakaryam immersive Puja finishing pass — 2026-08-17 */

/* Quieter product chrome so practice content starts sooner. */
.kk-top{min-height:64px!important;padding:8px 22px!important}
.kk-brand{gap:10px!important}.kk-brand-mark{width:38px!important;height:38px!important;font-size:20px!important}.kk-brand-copy strong{font-size:17px!important}.kk-brand-copy span{font-size:8px!important;letter-spacing:.11em!important}
.kk-top-account{min-height:38px!important;padding:7px 13px!important}.kk-theme-toggle{height:38px!important;min-width:40px!important}

/* Virtual Puja already explains itself in the Mandir. Keep only one compact context bar. */
.kk-card-accent:has(+ .kk-mandir-workspace){
  display:flex!important;align-items:center!important;gap:10px 16px!important;flex-wrap:wrap!important;
  min-height:58px!important;margin-top:8px!important;padding:10px 14px!important;border-radius:14px!important;
}
.kk-card-accent:has(+ .kk-mandir-workspace) .kk-card-title{flex:0 0 auto!important;margin:0!important;font-size:18px!important;line-height:1.15!important}
.kk-card-accent:has(+ .kk-mandir-workspace) .kk-muted{flex:1 1 250px!important;margin:0!important;font-size:9px!important;line-height:1.4!important}
.kk-card-accent:has(+ .kk-mandir-workspace) .kk-spacer{display:none!important}
.kk-card-accent:has(+ .kk-mandir-workspace)>.kk-row-wrap{flex:0 0 auto!important;margin-left:auto!important;gap:6px!important}
.kk-card-accent:has(+ .kk-mandir-workspace) .kk-status{min-height:22px!important;padding:3px 7px!important;font-size:7px!important}
.kk-card-accent:has(+ .kk-mandir-workspace) .kk-btn{min-height:44px!important;padding:9px 12px!important;font-size:10px!important}

/* Puja sound is a primary interactive control, not compact metadata. Keep it at
   the same 44px accessibility target as the ritual and offering controls. */
.kk-mandir-sound-row .kk-btn{min-height:44px!important;padding:9px 12px!important}

/* Make the shrine feel like the actual screen, not a card buried below metadata. */
.kk-mandir-workspace{margin-top:7px!important}
.kk-mandir-stage-cinematic{min-height:590px!important}

@media(max-width:980px){
  .kk-top{min-height:60px!important;padding:7px 14px!important}
  .kk-card-accent:has(+ .kk-mandir-workspace){align-items:flex-start!important}
  .kk-card-accent:has(+ .kk-mandir-workspace)>.kk-row-wrap{width:100%!important;margin-left:0!important}
  .kk-mandir-stage-cinematic{min-height:500px!important}
}
@media(max-width:760px){
  .kk-top{min-height:56px!important;padding:6px 10px!important}
  .kk-brand-copy span{display:none!important}.kk-brand-mark{width:34px!important;height:34px!important}
  .kk-card-accent:has(+ .kk-mandir-workspace){min-height:0!important;padding:9px 11px!important}
  .kk-card-accent:has(+ .kk-mandir-workspace) .kk-card-title{font-size:17px!important}
  .kk-mandir-stage-cinematic{min-height:440px!important}
  /* The mobile action bar carries 10px inline margins in the established Mandir
     composition. Account for those margins in the loaded Puja layer so a 100%
     desktop width cannot make the 390px ritual surface horizontally scroll. */
  body.kk-mandir-immersive-open .kk-mandir-actionbar{width:calc(100% - 20px)!important;max-width:calc(100% - 20px)!important}
}