/* v21 responsive overrides for the "auth" page group: scoped to its pages, loaded after every other stylesheet. */

/* ---- Forgot password, email verification, change password, new-device confirmation (section.sign-up .sing-up-right) ----
   The column is a query container: text, paddings and icons follow its inline size (451px on desktop, 296px at 320px)
   so nothing is fixed per breakpoint. Values at 451px and above equal the current desktop ones. */
.sign-up .sing-up-right{container:uos-auth/inline-size;min-width:0}
.sign-up .sing-up-right>p{font-size:clamp(.9375rem,.8194rem + .645cqi,1rem);margin-bottom:clamp(32px,-4.26px + 12.3cqi,51px);overflow-wrap:anywhere}
.sign-up .sing-up-right .form-label{font-size:clamp(.9375rem,.8194rem + .645cqi,1rem);margin-bottom:.5rem}
.sign-up .sing-up-right .form-control{padding-left:clamp(44px,36.4px + 2.58cqi,48px);min-width:0}
.sign-up .sing-up-right .position-relative>i{left:clamp(16px,12.2px + 1.29cqi,18px);top:50%;transform:translateY(-50%);pointer-events:none}
.sign-up .sing-up-right .log-in .btn{font-size:clamp(.9688rem,.9103rem + .323cqi,1rem);padding:clamp(11px,9.11px + .645cqi,12px) clamp(20px,.923px + 6.45cqi,30px);margin-top:clamp(24px,12.6px + 3.87cqi,30px);margin-bottom:clamp(24px,12.6px + 3.87cqi,30px);white-space:normal}
/* The back link's arrow was absolutely positioned by the template's ".sing-up-right i" rule and floated to the page corner. */
.sign-up .sing-up-right .uos-back{display:inline-flex;align-items:center;gap:8px;font-size:clamp(.9375rem,.8194rem + .645cqi,1rem)}
.sign-up .sing-up-right .uos-back i{position:static;top:auto;left:auto;color:inherit}
/* "Resend" links: the floated children gave the link no height (no tap area); make it one flex row with a 44px hit area. */
.sign-up .sing-up-right #resend_mail_button{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-size:clamp(.875rem,.8194rem + .3cqi,.9rem)}
.sign-up .sing-up-right #resend_mail_button .float-start{float:none!important;padding:0!important}
.sign-up .sing-up-right #resend_mail_button img{width:19px;height:19px;display:block}
/* ---- r2: forgot password now uses the login/sign-up card shell (.ul-page--plain, no pup) ---- */
.ul-card-wrap--plain .ul-card{margin-top:0}
.ul-card-wrap--plain .ul-title{margin-bottom:6px}
.ul-card-wrap--plain .ul-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0;font-weight:600}
.ul-card-wrap--plain .ul-back i{font-size:.9em}
/* r2b: email verification on the same shell. "Resend mail" + loader are one inline-flex row with a 44px hit area under the field. */
.ul-card-wrap--plain .ul-vc-field{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ul-card-wrap--plain .ul-vc-field>.ul-field{align-self:stretch}
.ul-card-wrap--plain #resend_mail_button{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 -8px;font-weight:600;font-size:clamp(.8125rem,.7238rem + .5cqi,.86rem);color:var(--uos-accent-text)}
.ul-card-wrap--plain #resend_mail_loader:empty{display:none}
.ul-card-wrap--plain #resend_mail_loader img{width:19px;height:19px;display:block}

/* r2b: sign-up instructor fields. The file input, its button and the helper text scale with the card so
   "No file chosen" fits at 320px, and the button has visible chrome in both themes. */
.ul-card-wrap .ul-extra{padding:clamp(10px,3.2cqi,14px)}
.ul-card-wrap .ul-file{container-type:inline-size;padding:8px clamp(10px,3cqi,14px);gap:clamp(6px,2cqi,10px)}
/* inside .ul-file, cqi is the file box itself (about 230px at a 320px screen, 420px on desktop) */
.ul-card-wrap .ul-file input{font-size:clamp(.72rem,.4rem + 2.2cqi,.88rem);min-width:0}
.ul-card-wrap .ul-file input::file-selector-button{font:inherit;font-weight:600;padding:clamp(5px,1.6cqi,7px) clamp(8px,.1rem + 3cqi,14px);margin-inline-end:clamp(6px,2.4cqi,10px);border:1px solid var(--uos-line-2);background:color-mix(in srgb,var(--uos-muted) 12%,transparent)}
.ul-card-wrap .ul-field small{font-size:clamp(.72rem,2.9cqi,.76rem)}

/* r2c: placeholders were cut off at 320px ("Enter your verificatio", "Your phone numbe"). Fields without the password eye
   button do not need its 40px right padding, and the placeholder text scales with the card (1rem from a 400px card up,
   so desktop is unchanged). The typed text stays 1rem so phones do not zoom on focus. */
.ul-card-wrap .ul-input:not(:has(.ul-eye)) input{padding-right:clamp(12px,4cqi,18px)}
.ul-card-wrap .ul-input input::placeholder{font-size:clamp(.8125rem,.5536rem + 1.786cqi,1rem)}

/* ---- r2: page glow. The fixed body::before glow (shared theme) ended in a hard edge at the bottom of the viewport box
   and the old .sign-up section painted white over it. Fade the glow out and let it show through on auth pages only. ---- */
body:has(.ul-page,.sign-up .sing-up-right)::before{-webkit-mask-image:linear-gradient(#000 45%,transparent 92%);mask-image:linear-gradient(#000 45%,transparent 92%)}
section.sign-up:has(.sing-up-right){background:transparent}

/* ---- r2: sign-up password meter + hint. On a narrow card the meter sits above the hint as a full-width bar;
   the hint scales with the card; the track uses a colour that stays visible in dark mode. ---- */
.ul-card-wrap .ul-pw-hint{row-gap:6px;font-size:clamp(.75rem,3.4cqi,.8rem);line-height:1.45}
.ul-card-wrap .ul-pw-hint [data-pw-meter]{background:color-mix(in srgb,var(--uos-muted) 32%,transparent)}
@container ul (max-width:26rem){
  .ul-card-wrap .ul-pw-hint{flex-wrap:wrap;margin-top:-2px}
  .ul-card-wrap .ul-pw-hint [data-pw-meter]{flex:1 1 100%;width:100%}
}
/* Focused sign-in pages (index.php adds body.uos-focus-page on login, sign up, forgot/reset password, verification
   and new-device pages): no site header or footer, the card sits in the middle of the screen. */
body.uos-focus-page{min-height:100dvh;display:flex;flex-direction:column}
body.uos-focus-page #uos-page{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
body.uos-focus-page .ul-page{min-height:0;padding:clamp(8px,3vh,32px) 0 clamp(16px,4vh,40px)}
.uos-focus-top{display:flex;align-items:center;padding:clamp(10px,2.4vh,20px) clamp(16px,3vw,32px) 0}
.uos-focus-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;color:var(--uos-muted);font-size:clamp(.875rem,.84rem + .2vw,.9375rem);font-weight:600;text-decoration:none;border:1px solid transparent}
.uos-focus-back:hover{color:var(--uos-ink);border-color:var(--uos-line-2);background:var(--uos-surface)}
.uos-focus-back:focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:2px}
.uos-focus-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding:0 16px clamp(14px,3vh,26px);color:var(--uos-muted);font-size:clamp(.8125rem,.79rem + .15vw,.875rem)}
.uos-focus-foot a{display:inline-flex;align-items:center;min-height:32px;color:var(--uos-muted);text-decoration:none}
.uos-focus-foot a:hover{color:var(--uos-ink);text-decoration:underline}
/* "Forgot password?" sits right-aligned under the password field (login.php). */
.ul-card .ul-forgot-row{display:flex;justify-content:flex-end;margin:calc(-1 * clamp(6px,2cqi,10px)) 0 clamp(4px,1.6cqi,8px)}
.ul-card .ul-forgot-row .ul-forgot{min-height:32px;margin:0}
.ul-submit[aria-busy=true]{opacity:.7;cursor:progress}
/* The sign-in pages show only the card: no chips or extra buttons under it. */
.uos-focus-page .ul-perks{display:none!important}