[hidden]{display:none!important}
.auth-shell{display:block}
.auth-panel{position:relative;width:100%;height:100%;padding:clamp(24px,6vw,56px);display:grid;place-items:safe center}
.auth-content{width:min(100%,568px);max-height:100%;min-height:0;display:grid;align-content:safe center;gap:clamp(20px,3vh,28px)}
.auth-copy{margin-bottom:6px;text-align:center}
.audience-label{margin:0 0 clamp(12px,2vh,20px);color:var(--app-leaf);font:900 clamp(.68rem,2.6vw,.82rem)/1 var(--vq-font);letter-spacing:.14em}
.auth-panel h1{margin:0;color:var(--app-ink);font-size:clamp(1.8rem,7vw,3.6rem);line-height:.95;letter-spacing:-.055em;text-wrap:balance}
.auth-description{margin:12px 0 0;color:var(--vq-ink-muted);font-size:clamp(.9rem,3vw,1.05rem)}
#auth-form{display:grid;gap:12px}
.field{display:grid;gap:6px}
label{font:800 .8rem/1.2 var(--vq-font);color:var(--app-ink)}
input,select,textarea{width:100%;min-height:50px;border:var(--vq-border);border-radius:var(--vq-radius-sm);padding:12px 14px;background:var(--vq-surface);box-shadow:none;color:var(--app-ink);font:700 1rem/1 var(--vq-font);appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--app-leaf) 50%),linear-gradient(135deg,var(--app-leaf) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{min-height:9.5em;font-weight:500;line-height:1.45;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--vq-ink-subtle);font-weight:500}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--vq-accent);outline:3px solid var(--vq-focus);outline-offset:2px;box-shadow:none}
.submit-button{width:100%;margin-top:2px}
.form-status{min-height:1.2em;margin:0;text-align:center;color:var(--vq-ink-muted);font:700 .78rem/1.3 var(--vq-font)}
/* Errors read at normal size: a small grey line under a form is easy to miss (persona T1, Nielsen 9). */
.form-status.error{color:var(--vq-danger);font:var(--vq-weight-bold) var(--vq-text-sm)/1.35 var(--vq-font)}
.form-status.success{color:var(--app-leaf)}
.auth-footer{display:grid;justify-items:center;margin:-8px 0 0}
.auth-beta-note{margin:var(--vq-space-1) 0 0;color:var(--vq-ink-muted);font:var(--vq-weight-medium) var(--vq-text-xs)/1.35 var(--vq-font);text-align:center}
.mode-toggle{min-height:44px;margin:0;border:0;background:transparent;color:var(--vq-ink-muted);font:600 .78rem/1.2 var(--vq-font);cursor:pointer}
.mode-toggle strong{color:var(--app-ink)}
a.mode-toggle{display:inline-flex;align-items:center;gap:var(--vq-space-1);text-decoration:none}
.mode-toggle:hover strong{text-decoration:underline;text-underline-offset:3px}

@media (max-height:750px){
  .auth-panel{padding:16px 22px}
  .auth-content{gap:24px}
  .auth-copy{margin-bottom:4px}
  .auth-panel h1{font-size:clamp(1.8rem,6.5vh,3rem)}
  .auth-description{margin-top:6px}
  #auth-form{gap:12px}
  .field{gap:6px}
  input,select{min-height:var(--vq-tap);padding:9px 12px}
  select{background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
  .auth-footer{margin-top:-4px}
}

@media (max-height:520px){
  .auth-panel{padding:10px 22px}
  .auth-content{gap:8px}
  .auth-copy{margin-bottom:0}
  .auth-description{display:none}
  .auth-panel h1{font-size:clamp(1.65rem,6.5vh,2rem)}
  #auth-form{gap:7px}
  .field{gap:4px}
  label{font-size:.7rem}
  input,select{min-height:var(--vq-tap);padding:7px 10px;font-size:.9rem}
  select{background-position:calc(100% - 18px) 15px,calc(100% - 13px) 15px}
  .form-status{min-height:1em;font-size:.7rem}
  .auth-footer{margin-top:0}
}

@media (min-width:521px) and (max-height:400px){
  .auth-panel{padding:9px 16px}
  .auth-content{width:100%;grid-template-columns:minmax(150px,.75fr) minmax(280px,1.25fr);grid-template-rows:1fr auto;column-gap:20px;row-gap:2px;align-items:center}
  .auth-copy{grid-column:1;grid-row:1;text-align:left}
  .auth-panel h1{font-size:clamp(1.5rem,6vh,1.75rem)}
  #auth-form{grid-column:2;grid-row:1 / span 2;gap:3px}
  .field{gap:2px}
  .auth-footer{grid-column:1;grid-row:2;justify-items:start}
  .auth-beta-note{text-align:left}
  .mode-toggle{text-align:left;padding:0}
}

@media (max-width:300px){
  .auth-panel h1{font-size:1.55rem;letter-spacing:-.04em}
}
#auth-form[hidden],.auth-beta-note[hidden]{display:none}