/* Histriphy 21.3.5 — compact authentication UX
 * Login/register should feel intentional at 100% browser zoom on ordinary
 * notebooks. This file is intentionally scoped to auth templates only. */

.auth-login-page .auth-shell,
.auth-register-page .auth-shell{
  width:min(calc(100% - 44px),1000px)!important;
  min-height:0!important;
  padding:24px 0 34px!important;
}

.auth-login-page .auth-layout,
.auth-register-page .auth-layout{
  grid-template-columns:minmax(0,.94fr) minmax(390px,1.06fr)!important;
  min-height:0!important;
  max-width:1000px!important;
  margin-inline:auto!important;
  gap:0!important;
  border-radius:14px!important;
}

.auth-login-page .auth-story-panel,
.auth-register-page .auth-story-panel{
  min-height:0!important;
  padding:34px 36px 24px!important;
}

.auth-login-page .auth-story-panel h1,
.auth-register-page .auth-story-panel h1{
  margin:18px 0 13px!important;
  max-width:540px!important;
  font-size:clamp(2rem,3.2vw,2.85rem)!important;
  line-height:1.02!important;
}

.auth-login-page .auth-story-content>p,
.auth-register-page .auth-story-content>p{
  max-width:520px!important;
  font-size:.84rem!important;
  line-height:1.55!important;
}

.auth-login-page .auth-trust-list{
  gap:8px!important;
  margin-top:20px!important;
}
.auth-login-page .auth-trust-list>div{
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:10px!important;
  padding:10px 11px!important;
  border-radius:9px!important;
}
.auth-login-page .auth-trust-icon{
  width:34px!important;
  height:34px!important;
  border-radius:8px!important;
}
.auth-login-page .auth-trust-icon svg{width:17px!important;height:17px!important}
.auth-login-page .auth-trust-list strong{font-size:.78rem!important}
.auth-login-page .auth-trust-list small{font-size:.66rem!important;margin-top:2px!important}

.auth-register-page .auth-benefit-grid{
  gap:8px!important;
  margin-top:20px!important;
}
.auth-register-page .auth-benefit-grid>div{
  padding:11px 12px!important;
  border-radius:9px!important;
}
.auth-register-page .auth-benefit-grid strong{font-size:1rem!important}
.auth-register-page .auth-benefit-grid span{font-size:.64rem!important;margin-top:2px!important}
.auth-register-page .auth-quote{
  gap:10px!important;
  margin-top:14px!important;
  padding:11px 12px!important;
}
.auth-register-page .auth-quote svg{width:17px!important;height:17px!important}
.auth-register-page .auth-quote p{font-size:.69rem!important;line-height:1.45!important}

.auth-login-page .auth-story-foot,
.auth-register-page .auth-story-foot{
  padding-top:18px!important;
  font-size:.63rem!important;
}

.auth-login-page .auth-form-panel,
.auth-register-page .auth-form-panel{
  padding:25px 30px!important;
}
.auth-login-page .auth-form-card,
.auth-register-page .auth-form-card{
  max-width:420px!important;
}
.auth-login-page .auth-form-brand,
.auth-register-page .auth-form-brand{
  gap:8px!important;
  margin-bottom:16px!important;
  font-size:.88rem!important;
}
.auth-login-page .auth-form-brand .brand-mark,
.auth-register-page .auth-form-brand .brand-mark{
  width:29px!important;
  height:29px!important;
}
.auth-login-page .auth-form-heading,
.auth-register-page .auth-form-heading{
  margin-bottom:14px!important;
}
.auth-login-page .auth-form-heading h1,
.auth-login-page .auth-form-heading h2,
.auth-register-page .auth-form-heading h1,
.auth-register-page .auth-form-heading h2{
  margin:6px 0 5px!important;
  font-size:1.72rem!important;
  line-height:1.08!important;
}
.auth-login-page .auth-form-heading p,
.auth-register-page .auth-form-heading p{
  font-size:.77rem!important;
  line-height:1.45!important;
}
.auth-login-page .auth-kicker,
.auth-register-page .auth-kicker{font-size:.61rem!important}

.auth-login-page .auth-form,
.auth-register-page .auth-form{gap:10px!important}
.auth-login-page .auth-field>label,
.auth-login-page .auth-label-row label,
.auth-register-page .auth-field>label,
.auth-register-page .auth-label-row label{
  margin-bottom:5px!important;
  font-size:.7rem!important;
}
.auth-login-page .auth-label-row,
.auth-register-page .auth-label-row{margin-bottom:5px!important}
.auth-login-page .auth-label-row>a,
.auth-login-page .auth-label-row>span,
.auth-register-page .auth-label-row>a,
.auth-register-page .auth-label-row>span{font-size:.66rem!important}
.auth-login-page .auth-input-wrap input,
.auth-register-page .auth-input-wrap input{
  min-height:42px!important;
  padding-inline:40px!important;
  border-radius:8px!important;
  font-size:.79rem!important;
}
.auth-login-page .auth-input-icon,
.auth-register-page .auth-input-icon{left:13px!important}
.auth-login-page .auth-input-icon svg,
.auth-register-page .auth-input-icon svg{width:16px!important;height:16px!important}
.auth-login-page .auth-password-toggle,
.auth-register-page .auth-password-toggle{width:31px!important;height:31px!important;right:6px!important}
.auth-login-page .auth-password-toggle svg,
.auth-register-page .auth-password-toggle svg{width:17px!important;height:17px!important}

.auth-login-page .auth-check,
.auth-register-page .auth-check{
  gap:8px!important;
  font-size:.67rem!important;
  line-height:1.4!important;
}
.auth-login-page .auth-check input,
.auth-register-page .auth-check input{width:14px!important;height:14px!important;margin-top:1px!important}
.auth-login-page .auth-submit,
.auth-register-page .auth-submit,
.auth-login-page .auth-google-button,
.auth-register-page .auth-google-button,
.auth-login-page .auth-secondary-action,
.auth-register-page .auth-secondary-action{
  min-height:42px!important;
  border-radius:8px!important;
  font-size:.77rem!important;
}
.auth-login-page .auth-google-icon,
.auth-register-page .auth-google-icon,
.auth-login-page .auth-google-icon svg,
.auth-register-page .auth-google-icon svg{width:18px!important;height:18px!important}
.auth-login-page .auth-google-form,
.auth-register-page .auth-google-form{gap:9px!important}
.auth-login-page .auth-form-divider,
.auth-register-page .auth-form-divider{margin:11px 0!important;font-size:.62rem!important}
.auth-login-page .auth-provider-divider,
.auth-register-page .auth-provider-divider{margin:10px 0!important}
.auth-login-page .auth-security-note,
.auth-register-page .auth-security-note{
  gap:7px!important;
  margin-top:12px!important;
  font-size:.61rem!important;
  line-height:1.4!important;
}
.auth-login-page .auth-security-note svg,
.auth-register-page .auth-security-note svg{width:14px!important;height:14px!important}
.auth-login-page .auth-notice,
.auth-register-page .auth-notice{
  margin-bottom:11px!important;
  padding:9px 10px!important;
  font-size:.7rem!important;
}
.auth-register-page .auth-password-meter{margin-top:6px!important;gap:4px!important}
.auth-register-page .auth-password-meter strong{font-size:.59rem!important}
.auth-register-page .auth-password-rules{gap:2px!important;margin-top:6px!important;font-size:.59rem!important}
.auth-register-page .auth-field-status{min-height:11px!important;margin-top:3px!important;font-size:.59rem!important}

/* At notebook heights the story stays useful, but purely decorative/supporting
 * content yields space before the form ever requires browser zoom. */
@media (max-height:820px) and (min-width:821px){
  .auth-login-page .auth-shell,
  .auth-register-page .auth-shell{padding:14px 0 20px!important}
  .auth-login-page .auth-story-panel,
  .auth-register-page .auth-story-panel{padding:27px 30px 20px!important}
  .auth-login-page .auth-story-panel h1,
  .auth-register-page .auth-story-panel h1{font-size:2.22rem!important;margin-top:14px!important}
  .auth-login-page .auth-story-foot,
  .auth-register-page .auth-story-foot{display:none!important}
  .auth-register-page .auth-benefit-grid{margin-top:15px!important}
  .auth-register-page .auth-quote{margin-top:11px!important}
  .auth-login-page .auth-form-panel,
  .auth-register-page .auth-form-panel{padding:20px 25px!important}
}

@media (max-height:700px) and (min-width:821px){
  .auth-login-page .auth-story-content>p,
  .auth-register-page .auth-story-content>p{font-size:.76rem!important}
  .auth-register-page .auth-quote{display:none!important}
  .auth-login-page .auth-trust-list>div:nth-child(n+3){display:none!important}
  .auth-register-page .auth-security-note{display:none!important}
}

/* Keep a useful two-column composition on common tablet/notebook widths.
 * Below 820px, the marketing story yields entirely to the form. */
@media (min-width:821px) and (max-width:1100px){
  .auth-login-page .auth-shell,
  .auth-register-page .auth-shell{width:min(calc(100% - 32px),920px)!important}
  .auth-login-page .auth-layout,
  .auth-register-page .auth-layout{
    display:grid!important;
    grid-template-columns:minmax(0,.88fr) minmax(390px,1.12fr)!important;
    max-width:920px!important;
  }
}

@media (max-width:820px){
  .auth-login-page .auth-shell,
  .auth-register-page .auth-shell{
    width:min(calc(100% - 28px),520px)!important;
    padding:18px 0 28px!important;
  }
  .auth-login-page .auth-layout,
  .auth-register-page .auth-layout{display:block!important;max-width:520px!important}
  .auth-login-page .auth-story-panel,
  .auth-register-page .auth-story-panel{display:none!important}
  .auth-login-page .auth-form-panel,
  .auth-register-page .auth-form-panel{width:100%!important;max-width:none!important;padding:21px!important}
  .auth-login-page .auth-form-card,
  .auth-register-page .auth-form-card{max-width:none!important;padding:0!important}
}

@media (max-width:480px){
  .auth-login-page .auth-shell,
  .auth-register-page .auth-shell{width:calc(100% - 20px)!important;padding:10px 0 22px!important}
  .auth-login-page .auth-form-panel,
  .auth-register-page .auth-form-panel{padding:17px 14px!important}
  .auth-login-page .auth-form-heading h2,
  .auth-register-page .auth-form-heading h2{font-size:1.5rem!important}
}