/* HTNS v262 — flatter login with one unified secondary action strip.
   Guest Mode, language, and Offline Songbook share one surface so the login
   no longer looks like rounded cards nested inside another rounded card. */

/* Remove the outer "card around cards" treatment. */
#gate .panel{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}

#gate #lblName{
  margin:0 0 10px !important;
}

/* Keep the member picker as the one primary field. */
#gate .login-select-wrap{
  width:100% !important;
  margin:0 !important;
}
#gate .login-name-select{
  border-radius:13px !important;
  box-shadow:none !important;
}

/* One flat, segmented surface for all secondary login actions. */
#gate .login-secondary-actions{
  width:100% !important;
  min-height:46px !important;
  margin:8px 0 0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr) !important;
  align-items:stretch !important;
  gap:0 !important;
  border:1px solid #b7cad9 !important;
  border-radius:12px !important;
  background:rgba(248,251,254,.82) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#gate .login-secondary-actions.has-offline{
  grid-template-columns:minmax(0,1.04fr) minmax(74px,.70fr) minmax(0,1.28fr) !important;
}

/* Let Guest and Language become direct segments of the unified strip. */
#gate .login-secondary-actions > .guest-language-row{
  display:contents !important;
}

#gate .login-secondary-actions #btnGuest,
#gate .login-secondary-actions #langBar,
#gate .login-secondary-actions #langBar .lang-btn,
#gate .login-secondary-actions .htns-songbook-offline-entry,
html.htns-theme-v234 #gate .login-secondary-actions #btnGuest,
html.htns-theme-v234 #gate .login-secondary-actions #langBar .lang-btn,
html.htns-theme-v234 #gate .login-secondary-actions .htns-songbook-offline-entry{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  margin:0 !important;
  padding:0 9px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  color:#173b63 !important;
  text-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Simple hairline dividers replace separate rounded buttons. */
#gate .login-secondary-actions #btnGuest,
#gate .login-secondary-actions #langBar{
  border-right:1px solid #d4e0e9 !important;
}
#gate .login-secondary-actions:not(.has-offline) #langBar{
  border-right:0 !important;
}

/* Guest Mode */
#gate .login-secondary-actions #btnGuest{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  font-size:12.5px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}
#gate .login-secondary-actions #btnGuest::after{
  display:none !important;
  content:none !important;
}
#gate .login-secondary-actions #btnGuest .login-guest-icon{
  display:block !important;
  position:static !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  color:#2f739f !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}
#gate .login-secondary-actions #btnGuest #btnGuestLabel{
  display:block !important;
  color:#173b63 !important;
  white-space:nowrap !important;
}

/* Language: show only the currently active language inside its segment. */
#gate .login-secondary-actions #langBar{
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
}
#gate .login-secondary-actions #langBar > .login-lang-separator{
  display:none !important;
}
#gate .login-secondary-actions #langBar .lang-btn{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
#gate .login-secondary-actions #langBar .lang-btn.on,
#gate .login-secondary-actions #langBar .lang-btn[aria-pressed="true"]{
  display:flex !important;
}
#gate .login-secondary-actions #langBar .login-lang-icon{
  display:block !important;
  position:static !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  color:#2f739f !important;
  stroke:currentColor !important;
}
#gate .login-secondary-actions #langBar .login-lang-label{
  display:block !important;
  min-width:0 !important;
  color:#173b63 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:12.5px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}
#gate .login-secondary-actions #langBar .login-lang-chevron{
  display:block !important;
  position:static !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  color:#2f739f !important;
  stroke:currentColor !important;
}

/* Offline Songbook joins the same strip instead of becoming another card row. */
#gate .login-secondary-actions .htns-songbook-offline-entry{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:9.5px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
  white-space:nowrap !important;
}
#gate .login-secondary-actions .htns-songbook-offline-entry.show{
  display:flex !important;
}
#gate .login-secondary-actions .htns-songbook-offline-entry svg{
  display:block !important;
  position:static !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  color:#2f739f !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}
#gate .login-secondary-actions .htns-songbook-offline-entry span{
  min-width:0 !important;
  color:#173b63 !important;
  white-space:nowrap !important;
}

/* Flat interaction feedback; no raised cards. */
#gate .login-secondary-actions #btnGuest:hover,
#gate .login-secondary-actions #langBar .lang-btn:hover,
#gate .login-secondary-actions .htns-songbook-offline-entry:hover{
  background:rgba(225,239,248,.62) !important;
}
#gate .login-secondary-actions #btnGuest:active,
#gate .login-secondary-actions #langBar .lang-btn:active,
#gate .login-secondary-actions .htns-songbook-offline-entry:active{
  background:rgba(207,228,241,.72) !important;
  transform:none !important;
  box-shadow:none !important;
}
#gate .login-secondary-actions #btnGuest:focus-visible,
#gate .login-secondary-actions #langBar .lang-btn:focus-visible,
#gate .login-secondary-actions .htns-songbook-offline-entry:focus-visible{
  outline:2px solid rgba(47,125,180,.36) !important;
  outline-offset:-2px !important;
}

/* The install prompt remains separate and readable if it appears. */
#gate .panel .install-banner{
  margin-top:9px !important;
}

@media(max-width:350px){
  #gate .login-secondary-actions.has-offline{
    grid-template-columns:minmax(0,1fr) minmax(68px,.66fr) minmax(0,1.18fr) !important;
  }
  #gate .login-secondary-actions #btnGuest{
    gap:5px !important;
    padding:0 6px !important;
    font-size:11.5px !important;
  }
  #gate .login-secondary-actions #btnGuest .login-guest-icon{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
  }
  #gate .login-secondary-actions #langBar .lang-btn{
    gap:3px !important;
    padding:0 5px !important;
  }
  #gate .login-secondary-actions #langBar .login-lang-icon{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
  }
  #gate .login-secondary-actions #langBar .login-lang-label{
    font-size:11.5px !important;
  }
  #gate .login-secondary-actions #langBar .login-lang-chevron{
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
  }
  #gate .login-secondary-actions .htns-songbook-offline-entry{
    gap:4px !important;
    padding:0 5px !important;
    font-size:8.7px !important;
    letter-spacing:.01em !important;
  }
  #gate .login-secondary-actions .htns-songbook-offline-entry svg{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
  }
}