/* 2Lúa v2.4.20: self-contained responsive login / register dialog.
 * Keep all account/auth logic in Core and app.js; only presentation changes.
 * The right column is scrollable on desktop; tablet/mobile use a single scrollable sheet.
 */
#tl-login-modal.tl-modal{
  box-sizing:border-box;
  overscroll-behavior:contain;
  padding:clamp(10px,2.5vh,26px);
  align-items:center;
}
#tl-login-modal .tl-login-panel{
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr)!important;
  width:min(940px,calc(100vw - 32px))!important;
  height:min(760px,calc(100dvh - 40px))!important;
  min-height:0!important;
  max-height:calc(100dvh - 40px)!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:26px!important;
  isolation:isolate;
}
#tl-login-modal .tl-login-visual{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  min-height:0!important;
  height:100%;
  overflow:hidden;
  padding:clamp(20px,3vh,30px) clamp(20px,2.4vw,31px);
}
#tl-login-modal .tl-login-visual__copy{
  flex:0 1 auto;
  min-width:0;
  margin:auto 0 17px;
}
#tl-login-modal .tl-login-visual h3{
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.14;
  overflow-wrap:break-word;
}
#tl-login-modal .tl-login-benefits{
  flex-shrink:0;
  gap:10px;
  min-width:0;
}
#tl-login-modal .tl-login-benefits span{
  line-height:1.4;
}
#tl-login-modal .tl-login-content{
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  padding:clamp(22px,2.8vh,34px) clamp(20px,2.5vw,36px) 28px;
}
#tl-login-modal .tl-login-close{
  z-index:6;
  top:14px;
  right:15px;
  box-shadow:0 3px 15px rgba(0,0,0,.09);
}
#tl-login-modal .tl-login-content > .tl-login-kicker,
#tl-login-modal .tl-login-content > h2,
#tl-login-modal .tl-login-content > .tl-login-lead{
  padding-right:35px;
}
#tl-login-modal .tl-social-providers,
#tl-login-modal .tl-auth-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#tl-login-modal .tl-auth-mode label{
  min-width:0;
}
#tl-login-modal .tl-input-wrap,
#tl-login-modal .tl-input-wrap input{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}
#tl-login-modal .tl-login-trust{
  margin-top:20px;
  padding-bottom:3px;
}
/* When a viewport is short, keep only useful information in the brand column. */
@media(max-height:650px) and (min-width:1200px){
  #tl-login-modal .tl-login-benefits{gap:5px}
  #tl-login-modal .tl-login-visual h3{font-size:25px;margin-block:9px}
  #tl-login-modal .tl-login-visual__copy{margin:auto 0 9px}
}
/* Tablet: do not squeeze the two-column modal. The whole form can scroll. */
@media(max-width:1199px){
  #tl-login-modal.tl-modal{padding:12px;align-items:center!important}
  #tl-login-modal .tl-login-panel{
    display:block!important;
    grid-template-columns:none!important;
    width:min(620px,calc(100vw - 24px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(90dvh,850px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-radius:23px!important;
  }
  #tl-login-modal .tl-login-visual{display:none!important}
  #tl-login-modal .tl-login-content{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    scrollbar-gutter:auto;
    padding:25px 24px 25px;
  }
  #tl-login-modal .tl-login-brand--mobile{display:flex!important;margin-bottom:13px;padding-right:45px}
}
/* Small phones: accessible bottom sheet respecting the safe area. */
@media(max-width:600px){
  #tl-login-modal.tl-modal{padding:0!important;align-items:end!important;place-items:end center}
  #tl-login-modal .tl-login-panel{
    width:100%!important;
    max-width:100%!important;
    max-height:94dvh!important;
    border-radius:22px 22px 0 0!important;
    margin:0!important;
    padding:0!important;
    overscroll-behavior-y:contain;
  }
  #tl-login-modal .tl-login-content{
    padding:21px 17px calc(24px + env(safe-area-inset-bottom))!important;
  }
  #tl-login-modal .tl-social-providers{grid-template-columns:1fr!important;gap:8px}
  #tl-login-modal .tl-social-provider{min-height:44px}
  #tl-login-modal .tl-login-content h2{font-size:clamp(23px,7vw,27px)}
  #tl-login-modal .tl-login-lead{line-height:1.55}
}
@media(max-width:359px){
  #tl-login-modal .tl-login-content{padding-inline:12px!important}
  #tl-login-modal .tl-auth-tabs button{font-size:12px}
}

/* v2.4.20: One official wordmark per view: left on desktop, form-header only on tablet/mobile. */
/* Desktop must show only the logo in the green visual panel. */
#tl-login-modal .tl-login-content > .tl-login-brand--mobile.tl-login-brand--official{
  display:none!important;
}
#tl-login-modal .tl-login-brand--official{
  box-sizing:border-box;
  display:inline-flex;
  justify-content:flex-start;
  align-items:center;
  align-self:flex-start;
  flex:0 0 auto;
  width:max-content;
  max-width:100%;
  padding:4px 11px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,58,31,.12);
}
#tl-login-modal .tl-login-brand--official .tl-login-official-logo{
  display:block;
  width:204px;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
@media(max-width:1199px){
  #tl-login-modal .tl-login-content > .tl-login-brand--mobile.tl-login-brand--official{
    display:inline-flex!important;
    width:max-content;
    max-width:calc(100% - 48px);
    padding:3px 10px!important;
    margin-bottom:13px;
    border:1px solid rgba(11,104,55,.1);
    box-shadow:0 3px 12px rgba(0,58,31,.05);
  }
  #tl-login-modal .tl-login-brand--mobile .tl-login-official-logo{width:170px}
}
@media(max-width:390px){
  #tl-login-modal .tl-login-brand--mobile .tl-login-official-logo{width:152px}
}