/* ==========================================================
   CLARITENOTE AUTH V4
   One clean public auth system.
   No legacy auth.css dependency.
   ========================================================== */

:root {
  --cn-navy: #073047;
  --cn-ink: #172026;
  --cn-text: #52656d;
  --cn-muted: #7c8b90;

  --cn-bg: #f6f8f7;
  --cn-card: #ffffff;
  --cn-input: #fafcfc;

  --cn-border: #d9e2df;
  --cn-border-soft: #e7ecea;

  --cn-black: #171b1d;

  --cn-error: #8d3d3d;
  --cn-error-bg: #fff4f3;
  --cn-error-border: #efd2cf;

  --cn-success: #37675b;
  --cn-success-bg: #eef5f2;
  --cn-success-border: #cee1d9;

  --cn-shadow:
    0 24px 60px rgba(28, 44, 48, 0.08);
}


/* ==========================================================
   FOUNDATION
   ========================================================== */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body.auth-body {
  width: 100%;
  min-height: 100vh;

  margin: 0;

  background: var(--cn-bg);

  color: var(--cn-ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


/* ==========================================================
   BACK BUTTON
   ========================================================== */

.cn-auth-back {
  position: fixed;

  top: 24px;
  left: 26px;

  z-index: 100;

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid var(--cn-border);

  border-radius: 11px;

  background: rgba(255,255,255,.94);

  color: #243d45;

  text-decoration: none;

  font-size: 20px;

  box-shadow:
    0 6px 18px rgba(24, 39, 43, 0.05);

  transition:
    border-color .15s ease,
    background .15s ease,
    transform .15s ease;
}

.cn-auth-back:hover {
  background: #fff;

  border-color: #bccac6;

  transform: translateX(-1px);
}


/* ==========================================================
   BRAND
   ========================================================== */

.auth-brand,
.cn-login-brand {
  width: fit-content;

  margin: 0 auto 16px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  color: var(--cn-navy);

  text-decoration: none;
}

.auth-brand img,
.cn-login-logo-image {
  display: block;

  width: 35px;
  height: 39px;

  object-fit: contain;
}

.auth-brand-name,
.cn-login-brand-name {
  color: var(--cn-navy);

  font-size: 22px;
  line-height: 1;

  font-weight: 760;

  letter-spacing: -.7px;
}


/* ==========================================================
   MAIN PAGE SHELLS
   ========================================================== */

.auth-page,
.cn-login-shell {
  width: 100%;

  min-height: 100vh;

  margin: 0;

  padding: 22px 24px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.cn-login-wrap {
  width: 100%;

  max-width: 500px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;
}


/* ==========================================================
   CARD BASE
   ========================================================== */

.auth-card,
.cn-login-card {
  width: 100%;

  margin: 0 auto;

  border: 1px solid var(--cn-border);

  border-radius: 17px;

  background: var(--cn-card);

  color: var(--cn-ink);

  box-shadow: var(--cn-shadow);
}


/* ==========================================================
   HEADINGS
   ========================================================== */

.auth-card-header,
.cn-login-header {
  margin: 0 0 18px;

  padding: 0;

  text-align: left;
}

.auth-card-header h1,
.cn-login-header h1 {
  margin: 0;

  color: var(--cn-navy);

  font-size: 29px;
  line-height: 1.08;

  font-weight: 760;

  letter-spacing: -1.25px;
}

.auth-card-header p,
.cn-login-header p,
.cn-login-subtitle {
  margin: 8px 0 0;

  color: var(--cn-text);

  font-size: 12px;
  line-height: 1.55;

  font-weight: 450;
}


/* ==========================================================
   FIELDS
   ========================================================== */

.field,
.cn-login-field {
  margin: 0 0 11px;
}

.field-row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}

label,
.cn-login-label-row label {
  display: block;

  margin: 0 0 5px;

  color: #324b54;

  font-size: 10px;
  line-height: 1.4;

  font-weight: 700;
}

.optional {
  color: #89979b;

  font-size: 9px;

  font-weight: 550;
}

.field-help {
  display: block;

  margin-top: 4px;

  color: #89969b;

  font-size: 8px;
  line-height: 1.35;
}

.cn-login-label-row {
  margin-bottom: 5px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}

.cn-login-label-row label {
  margin: 0;
}


/* ==========================================================
   INPUTS / SELECT
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;

  height: 41px;

  margin: 0;

  padding: 0 12px;

  border: 1px solid #d5dfdc;

  border-radius: 9px;

  outline: none;

  background: var(--cn-input);

  color: var(--cn-ink);

  font: inherit;

  font-size: 11px;

  box-shadow: none;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

select {
  cursor: pointer;
}

input::placeholder {
  color: #a1abad;

  opacity: 1;
}

input:hover,
select:hover {
  border-color: #c1ceca;
}

input:focus,
select:focus {
  border-color: #809b94;

  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(70, 106, 97, .08);
}


/* Chrome autofill */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color:
    var(--cn-ink) !important;

  -webkit-box-shadow:
    0 0 0 1000px var(--cn-input) inset !important;

  box-shadow:
    0 0 0 1000px var(--cn-input) inset !important;

  caret-color:
    var(--cn-ink) !important;
}


/* ==========================================================
   PASSWORD
   ========================================================== */

.password-wrap,
.cn-login-password-wrap {
  position: relative;

  width: 100%;
}

.password-wrap input,
.cn-login-password-wrap input {
  padding-right: 58px;
}

.toggle-pw,
.cn-login-password-toggle {
  position: absolute;

  top: 50%;
  right: 9px;

  transform: translateY(-50%);

  min-width: 42px;

  padding: 5px 6px;

  border: 0;

  background: transparent;

  color: #536970;

  font-family: inherit;

  font-size: 9px;

  font-weight: 700;

  cursor: pointer;
}


/* ==========================================================
   PASSWORD REQUIREMENTS
   ========================================================== */

.password-requirements {
  margin: 7px 0 0;

  padding: 0;

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 5px;

  list-style: none;
}

.password-requirements li {
  min-width: 0;

  padding: 5px 6px;

  display: flex;

  align-items: center;

  gap: 4px;

  border: 1px solid #e2e8e6;

  border-radius: 6px;

  background: #f8faf9;

  color: #7a898e;

  font-size: 7px;
  line-height: 1.2;

  white-space: nowrap;
}

.requirement-icon {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #d5ddda;

  color: transparent;

  font-size: 0;
}

.password-requirements li.met {
  border-color: #d3e3dc;

  background: #f0f6f3;

  color: #41685c;
}

.password-requirements li.met .requirement-icon {
  background: #52776c;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.auth-submit,
.cn-login-submit {
  width: 100%;

  height: 43px;

  margin: 2px 0 0;

  padding: 0 16px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid var(--cn-black) !important;

  border-radius:
    9px !important;

  background:
    var(--cn-black) !important;

  color:
    #ffffff !important;

  font-family: inherit;

  font-size: 11px;

  font-weight: 720;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background .15s ease,
    transform .15s ease;
}

.auth-submit:hover,
.cn-login-submit:hover {
  background:
    #292f31 !important;

  border-color:
    #292f31 !important;

  transform:
    translateY(-1px);
}

.auth-submit:disabled,
.cn-login-submit:disabled {
  opacity: .55;

  cursor: not-allowed;

  transform: none;
}


/* Force the main actions black regardless of any inline
   legacy values still present. */

#loginBtn,
#signupBtn,
#submitBtn,
#resendBtn {
  background:
    var(--cn-black) !important;

  border-color:
    var(--cn-black) !important;

  color:
    #fff !important;
}


/* Secondary actions */

#tryAgainBtn,
.cn-login-secondary {
  width: 100%;

  height: 42px;

  margin: 8px 0 0 !important;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid #d5dedb !important;

  border-radius:
    9px !important;

  background:
    #ffffff !important;

  color:
    #3d555d !important;

  font-family: inherit;

  font-size: 10px;

  font-weight: 680;

  text-decoration: none;

  cursor: pointer;
}


/* ==========================================================
   LINKS / SWITCH
   ========================================================== */

.auth-switch,
.cn-login-switch {
  margin: 12px 0 0;

  padding: 12px 0 0;

  border-top:
    1px solid var(--cn-border-soft);

  color: #819095;

  text-align: center;

  font-size: 9px;
  line-height: 1.45;
}

.auth-switch a,
.cn-login-switch a,
.cn-login-forgot {
  color: #294d57;

  text-decoration: none;

  font-size: inherit;

  font-weight: 700;
}

.auth-switch a:hover,
.cn-login-switch a:hover,
.cn-login-forgot:hover {
  text-decoration: underline;

  text-underline-offset: 3px;
}


/* ==========================================================
   MESSAGES
   ========================================================== */

.auth-error,
.cn-login-message.auth-error {
  margin: 0 0 11px;

  padding: 8px 10px;

  border: 1px solid var(--cn-error-border);

  border-radius: 8px;

  background: var(--cn-error-bg);

  color: var(--cn-error);

  font-size: 9px;
  line-height: 1.45;
}

.auth-success,
.cn-login-message.auth-success,
.cn-login-inline-message {
  margin: 0 0 11px;

  padding: 8px 10px;

  border: 1px solid var(--cn-success-border);

  border-radius: 8px;

  background: var(--cn-success-bg);

  color: var(--cn-success);

  font-size: 9px;
  line-height: 1.45;
}


/* ==========================================================
   LOGIN
   ========================================================== */

body.auth-login .cn-login-shell {
  padding:
    20px 22px;
}

body.auth-login .cn-login-wrap {
  max-width:
    500px;
}

body.auth-login .cn-login-card {
  padding:
    28px 31px 26px;
}

body.auth-login .cn-login-header {
  margin-bottom:
    20px;
}

body.auth-login .cn-login-field {
  margin-bottom:
    13px;
}

body.auth-login .cn-login-header h1 {
  font-size:
    29px;
}

body.auth-login .cn-login-subtitle {
  font-size:
    12px;
}

body.auth-login #loginBtn {
  height:
    44px;

  margin-top:
    4px;
}


/* ==========================================================
   SIGNUP — DESKTOP TWO-COLUMN FORM
   ========================================================== */

body.auth-signup .auth-page {
  padding:
    16px 22px;
}

body.auth-signup .auth-brand {
  margin-bottom:
    11px;
}

body.auth-signup #stepForm {
  max-width:
    760px;

  padding:
    21px 28px 18px;

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    13px;

  row-gap:
    0;
}


/* Header */

body.auth-signup
#stepForm > .auth-card-header {
  grid-column:
    1 / -1;

  margin-bottom:
    14px;
}


/* Error */

body.auth-signup
#stepForm > #authError {
  grid-column:
    1 / -1;
}


/* First and last name */

body.auth-signup
#stepForm > .field-row {
  grid-column:
    1 / -1;
}


/* Email left */

body.auth-signup
#stepForm > .field:has(#email) {
  grid-column:
    1;
}


/* Practice right */

body.auth-signup
#stepForm > .field:has(#practice) {
  grid-column:
    2;
}


/* Credentials left */

body.auth-signup
#stepForm > .field:has(#credentials) {
  grid-column:
    1;
}


/* License right */

body.auth-signup
#stepForm > .field:has(#license_number) {
  grid-column:
    2;
}


/* Password full width */

body.auth-signup
#stepForm > .field:has(#password) {
  grid-column:
    1 / -1;

  margin-bottom:
    9px;
}


/* Signup button */

body.auth-signup
#signupBtn {
  grid-column:
    1 / -1;
}


/* Sign in link */

body.auth-signup
#stepForm > .auth-switch {
  grid-column:
    1 / -1;
}


/* Smaller signup heading */

body.auth-signup
.auth-card-header h1 {
  font-size:
    27px;
}

body.auth-signup
.auth-card-header p {
  margin-top:
    6px;

  font-size:
    10px;
}

body.auth-signup
#stepForm .field {
  margin-bottom:
    8px;
}

body.auth-signup
#stepForm .field-row {
  gap:
    13px;
}

body.auth-signup
#stepForm label {
  margin-bottom:
    4px;
}


/* Check-email state */

body.auth-signup #stepEmail {
  max-width:
    480px;

  padding:
    28px 31px 26px;

  text-align:
    center;
}

body.auth-signup
#stepEmail .auth-card-header {
  text-align:
    center;
}


/* ==========================================================
   FORGOT PASSWORD
   ========================================================== */

body.auth-forgot .auth-page {
  padding:
    20px 22px;
}

body.auth-forgot .auth-card {
  max-width:
    480px;

  padding:
    28px 31px 26px;
}

body.auth-forgot #stepSent {
  text-align:
    center;
}

body.auth-forgot
#stepSent .auth-card-header {
  text-align:
    center;
}


/* ==========================================================
   RESET PASSWORD
   ========================================================== */

body.auth-reset .auth-page {
  padding:
    20px 22px;
}

body.auth-reset .auth-card {
  max-width:
    520px;

  padding:
    26px 31px 24px;
}

body.auth-reset
.password-requirements {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}


/* Strength meter */

#strengthLabel {
  color:
    var(--cn-muted) !important;
}


/* ==========================================================
   VERIFICATION STATES ON LOGIN
   ========================================================== */

.cn-login-status-step {
  text-align:
    center;
}

.cn-login-status-step
.cn-login-header {
  text-align:
    center;
}

.cn-login-account-email {
  margin:
    -5px 0 15px;

  padding:
    8px 10px;

  border:
    1px solid var(--cn-border-soft);

  border-radius:
    7px;

  background:
    #f8faf9;

  color:
    #4c626a;

  font-size:
    9px;

  font-weight:
    650;

  word-break:
    break-word;
}


/* ==========================================================
   HIDE OLD PAGE-LEVEL FOOTERS
   Keep auth experience simple.
   ========================================================== */

.auth-footer,
.cn-login-footer {
  display:
    none !important;
}


/* ==========================================================
   SPINNER
   ========================================================== */

.auth-spinner {
  width: 12px;
  height: 12px;

  display: inline-block;

  border:
    2px solid rgba(255,255,255,.35);

  border-top-color:
    #fff;

  border-radius:
    50%;

  animation:
    cnAuthSpin .7s linear infinite;
}

@keyframes cnAuthSpin {
  to {
    transform: rotate(360deg);
  }
}


/* ==========================================================
   DESKTOP HEIGHT
   ========================================================== */

@media (min-width: 721px) {

  body.auth-login,
  body.auth-forgot,
  body.auth-reset {
    height:
      100vh;

    overflow:
      hidden;
  }

  body.auth-signup {
    min-height:
      100vh;

    overflow:
      auto;
  }

  body.auth-signup .auth-page {
    min-height:
      100vh;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  body.auth-body {
    overflow-y:
      auto;
  }

  .cn-auth-back {
    position:
      absolute;

    top:
      13px;

    left:
      13px;

    width:
      38px;

    height:
      38px;
  }

  .auth-page,
  .cn-login-shell {
    min-height:
      100svh;

    height:
      auto;

    padding:
      58px 14px 26px;

    justify-content:
      flex-start;
  }

  .auth-brand,
  .cn-login-brand {
    margin-bottom:
      17px;
  }

  .auth-card,
  .cn-login-card,
  body.auth-signup #stepForm,
  body.auth-signup #stepEmail,
  body.auth-forgot .auth-card,
  body.auth-reset .auth-card {
    max-width:
      100%;

    padding:
      24px 20px 22px;
  }

  body.auth-signup #stepForm {
    display:
      block;
  }

  .field-row {
    grid-template-columns:
      1fr;
  }

  .password-requirements,
  body.auth-reset .password-requirements {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      5px;
  }

  .password-requirements li {
    font-size:
      8px;
  }

}


/* END CLARITENOTE AUTH V4 */

/* BEGIN CLARITENOTE AUTH SCALE TUNE V1 */
/* Slightly increase visual size of login/signup/reset auth cards */

@media (min-width: 980px) {
  .cn-auth-shell,
  .cn-auth-layout,
  .cn-auth-main {
    width: min(96vw, 1280px);
    max-width: 1280px;
  }

  .cn-auth-brand,
  .cn-auth-logo-wrap {
    margin-bottom: 24px;
  }

  .cn-auth-brand img,
  .cn-auth-logo-wrap img,
  .cn-auth-logo img {
    height: 56px !important;
    width: auto !important;
  }

  .cn-auth-card,
  .cn-auth-panel,
  .cn-auth-form-card {
    width: min(92vw, 640px) !important;
    max-width: 640px !important;
    padding: 40px 42px !important;
  }

  .cn-auth-card--wide,
  .cn-auth-panel--wide,
  .cn-auth-form-card--wide,
  .cn-auth-page--signup .cn-auth-card,
  .cn-auth-page--signup .cn-auth-panel,
  .cn-auth-page--signup .cn-auth-form-card {
    width: min(94vw, 980px) !important;
    max-width: 980px !important;
    padding: 40px 42px !important;
  }
}

@media (min-width: 1400px) {
  .cn-auth-card--wide,
  .cn-auth-panel--wide,
  .cn-auth-form-card--wide,
  .cn-auth-page--signup .cn-auth-card,
  .cn-auth-page--signup .cn-auth-panel,
  .cn-auth-page--signup .cn-auth-form-card {
    width: min(94vw, 1040px) !important;
    max-width: 1040px !important;
  }
}
/* END CLARITENOTE AUTH SCALE TUNE V1 */