/* BrandGuard 0.19.18 — canonical form and authentication presentation */

:root{
  color-scheme:dark;
  --form-bg:#091626;
  --form-bg-focus:#0a1d31;
  --form-border:#294866;
  --form-border-focus:#7180ff;
  --form-text:#f4f8fd;
  --form-placeholder:#6f87a2;
  --form-label:#a8bad0;
}

/* Shared readable form controls across the authenticated application and public dark theme. */
body:not(.public-body) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body:not(.public-body) select,
body:not(.public-body) textarea,
.public-body.brandguard-dark-public input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.public-body.brandguard-dark-public select,
.public-body.brandguard-dark-public textarea{
  background:var(--form-bg);
  border-color:var(--form-border);
  color:var(--form-text);
  caret-color:var(--form-text);
  -webkit-text-fill-color:var(--form-text);
}

body:not(.public-body) input::placeholder,
body:not(.public-body) textarea::placeholder,
.public-body.brandguard-dark-public input::placeholder,
.public-body.brandguard-dark-public textarea::placeholder{
  color:var(--form-placeholder);
  opacity:1;
}

body:not(.public-body) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body:not(.public-body) select:focus,
body:not(.public-body) textarea:focus,
.public-body.brandguard-dark-public input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.public-body.brandguard-dark-public select:focus,
.public-body.brandguard-dark-public textarea:focus{
  background:var(--form-bg-focus);
  border-color:var(--form-border-focus);
  color:#f8fbff;
  -webkit-text-fill-color:#f8fbff;
  box-shadow:0 0 0 3px rgba(109,124,255,.10);
  outline:none;
}

body:not(.public-body) select option,
.public-body.brandguard-dark-public select option{
  background:var(--form-bg);
  color:var(--form-text);
}

/* Browser autofill must remain readable in the dark design. */
body:not(.public-body) input:-webkit-autofill,
body:not(.public-body) input:-webkit-autofill:hover,
body:not(.public-body) input:-webkit-autofill:focus,
body:not(.public-body) textarea:-webkit-autofill,
body:not(.public-body) select:-webkit-autofill,
.public-body.brandguard-dark-public input:-webkit-autofill,
.public-body.brandguard-dark-public input:-webkit-autofill:hover,
.public-body.brandguard-dark-public input:-webkit-autofill:focus,
.public-body.brandguard-dark-public textarea:-webkit-autofill,
.public-body.brandguard-dark-public select:-webkit-autofill{
  -webkit-text-fill-color:var(--form-text)!important;
  caret-color:var(--form-text)!important;
  border-color:#36577a!important;
  -webkit-box-shadow:0 0 0 1000px var(--form-bg-focus) inset,0 0 0 1px #36577a!important;
  box-shadow:0 0 0 1000px var(--form-bg-focus) inset,0 0 0 1px #36577a!important;
  transition:background-color 9999s ease-out 0s;
}

/* Authentication and account recovery use one consistent component structure. */
.auth-card-recovery{
  width:min(620px,100%);
  padding:36px;
}
.auth-card-recovery .auth-heading{
  margin-bottom:24px;
}
.auth-card-recovery .auth-heading h1{
  margin:13px 0 9px;
  font-size:clamp(34px,4vw,44px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.auth-card-recovery .auth-heading p{
  margin:0;
  color:#9db2c9;
  line-height:1.65;
}
.auth-card-recovery .auth-form{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:0;
}
.auth-card-recovery .auth-form label{
  display:grid;
  gap:7px;
}
.auth-card-recovery .auth-form label>span{
  margin:0;
  color:var(--form-label);
  font-size:10px;
  font-weight:750;
}
.auth-card-recovery .auth-form input,
.auth-card-recovery .auth-form select,
.auth-card-recovery .auth-form textarea{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid var(--form-border);
  border-radius:12px;
}
.auth-card-recovery .auth-form .button{
  width:100%;
  min-height:50px;
  margin-top:2px;
}

/* Login remains a balanced two-panel access page. */
.auth-shell .auth-card,
.auth-shell .auth-trust-panel{
  align-self:flex-start;
}
.auth-form input,
.auth-form select,
.auth-form textarea{
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
}

@media(max-width:760px){
  .auth-card-recovery{
    padding:24px 22px;
  }
  .auth-card-recovery .auth-heading h1{
    font-size:34px;
  }
}

/* BrandGuard 0.20.2 — canonical structured forms and invitation access pages */

/* Every structured form uses the same field geometry. This replaces page-specific
   inline alignment assumptions and keeps labels, controls and actions readable. */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px;
  align-items:end;
}
.form-grid>.full,
.form-grid>.full-span{
  grid-column:1/-1;
}
.form-grid>label:not(.check-line):not(.check-card):not(.checkbox-label):not(.legal-check){
  display:grid;
  gap:7px;
  min-width:0;
  align-self:start;
}
.form-grid>label:not(.check-line):not(.check-card):not(.checkbox-label):not(.legal-check)>span{
  display:block;
  margin:0;
  color:var(--form-label);
  font-size:10px;
  font-weight:750;
  line-height:1.35;
}
.form-grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.form-grid select,
.form-grid textarea{
  width:100%;
  min-width:0;
  min-height:47px;
  padding:11px 13px;
  border:1px solid var(--form-border);
  border-radius:11px;
  background:var(--form-bg);
  color:var(--form-text);
  box-sizing:border-box;
  outline:none;
}
.form-grid textarea{
  min-height:128px;
  resize:vertical;
  line-height:1.55;
}
.form-grid>.button{
  min-width:0;
  min-height:48px;
  align-self:end;
}

/* Invitation acceptance is intentionally top-aligned. Tall cards must never be
   vertically centred underneath the sticky public header and become clipped. */
.invitation-shell{
  place-items:start center;
  min-height:calc(100vh - 78px);
  padding:48px 0 72px;
}
.invitation-card{
  width:min(780px,100%);
  padding:clamp(28px,4vw,42px);
  overflow:hidden;
}
.invitation-heading{
  max-width:680px;
}
.invitation-heading h1{
  margin:14px 0 10px;
  font-size:clamp(34px,4.2vw,48px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.invitation-heading p{
  margin:0;
  color:#9db1c8;
  font-size:14px;
  line-height:1.68;
}
.invitation-summary{
  gap:12px;
  margin:26px 0 20px;
}
.invitation-summary>div{
  min-width:0;
  padding:16px 17px;
  border-color:rgba(98,139,195,.22);
  background:linear-gradient(145deg,rgba(14,33,57,.86),rgba(9,23,40,.72));
}
.invitation-summary span{
  color:#7188a2;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.invitation-summary strong{
  color:#f2f6fb;
  font-size:15px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.invitation-callout{
  margin:0 0 22px;
  padding:17px 18px;
  border-color:rgba(93,137,255,.28);
  background:linear-gradient(135deg,rgba(86,141,255,.09),rgba(86,141,255,.045));
}
.invitation-callout strong{
  color:#f1f5fb;
}
.invitation-callout p{
  margin-top:7px;
  font-size:13px;
  line-height:1.65;
}
.invitation-access-form{
  margin-top:22px;
}
.invitation-access-form>.button{
  width:100%;
  margin-top:2px;
}
.invitation-more-link,
.invitation-footnote{
  display:block;
  margin:18px 0 0;
  text-align:center;
  color:#7f95ae;
  font-size:11px;
  line-height:1.5;
}
.invitation-more-link a{
  color:#aeb9ff;
  font-weight:800;
}
.invitation-more-link a:hover{
  color:#dce2ff;
}

/* Controls in every canonical form layout must be able to shrink inside grids. */
.auth-form input,
.auth-form select,
.auth-form textarea,
.public-contact-form input,
.public-contact-form select,
.public-contact-form textarea,
.discovery-form input,
.discovery-form select,
.discovery-form textarea,
.billing-profile-form input,
.billing-profile-form select,
.billing-profile-form textarea,
.workspace-settings-grid input,
.workspace-settings-grid select,
.workspace-settings-grid textarea,
.invite-form-grid input,
.invite-form-grid select,
.invite-form-grid textarea,
.partner-pilot-form input,
.partner-pilot-form select,
.partner-pilot-form textarea,
.quality-filter-form input,
.quality-filter-form select,
.quality-filter-form textarea{
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:700px){
  .form-grid,
  .invitation-summary{
    grid-template-columns:1fr;
  }
  .form-grid>.full,
  .form-grid>.full-span{
    grid-column:auto;
  }
  .invitation-shell{
    padding:28px 0 54px;
  }
  .invitation-card{
    padding:25px 21px;
    border-radius:20px;
  }
  .invitation-heading h1{
    font-size:34px;
  }
}

/* Clear password guidance for registration, invitations and recovery. */
.password-alert strong{
  display:block;
}
.password-alert ul{
  margin:9px 0 0 18px;
  padding:0;
}
.password-alert li{
  margin:4px 0;
  line-height:1.45;
}
.password-context{
  margin:18px 0 4px;
  padding:15px 17px;
  border:1px solid rgba(98,139,195,.25);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(14,33,57,.82),rgba(9,23,40,.68));
  color:#b9c8d9;
  font-size:12px;
  line-height:1.58;
}
.password-context strong{
  display:block;
  color:#eef4fb;
  font-size:12px;
  line-height:1.55;
}
.password-context.existing-account{
  border-color:rgba(80,205,168,.28);
  background:linear-gradient(145deg,rgba(17,54,56,.48),rgba(9,23,40,.72));
}
.password-context.compact{
  margin:0;
}
.password-rule-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 18px;
  margin:11px 0 0;
  padding:0;
  list-style:none;
}
.password-rule-list li{
  position:relative;
  padding-left:18px;
  color:#9fb1c5;
}
.password-rule-list li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#65d9b4;
  font-weight:900;
}
@media(max-width:620px){
  .password-rule-list{grid-template-columns:1fr;}
}