/* Unified /auth page styles — merges the former login.css + register.css.
   Layout primitives (.go-with-button, .input-div, #content-right, etc.) live in common.css. */

/* ---- Progressive steps ----------------------------------------------------
   Three panels (method choice / email+password / name) are stacked absolutely
   inside a fixed-size box. Only the active panel is visible; the others fade out
   with a small vertical lift (same pattern as the post-editor view switch), so
   steps cross-fade seamlessly and stay perfectly aligned. */
.auth-slider {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
}
.auth-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 4px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.auth-slide[data-state="active"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
/* Lowkey back chevron sitting at the top-left of the email/name slides */
.auth-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    margin: -4px 0 -6px -6px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--font-gray);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.auth-back:hover {
    background: var(--purple-clear);
    color: var(--primary-color);
    transform: translateX(-2px);
}
.auth-back svg {
    height: 15px;
    width: 15px;
}

#toggle-password-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    height: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0.68;
    transition: opacity var(--transition-fast) ease;
}
#toggle-password-icon:hover {
    opacity: 1;
}

#password_div a {
    font-size: 12px;
    font-weight: 650;
    color: var(--font-gray);
    align-self: flex-end;
    padding-top: 2px;
}
#password_div a:hover {
    color: var(--link-hover);
}

#remember {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    width: 100%;
    font-weight: 650;
    color: var(--font-gray);
    gap: 8px;
    cursor: pointer;
}
#remember_me {
    height: 16px;
    width: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex: 0 0 auto;
}

#submit_div {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* Slide-out hint shown when a new email is detected and the Name field appears */
.new-user-hint {
    width: 100%;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--font-gray);
    text-align: left;
}

/* Password strength (carried over from register; the input handler is currently a no-op
   but the markup/styles stay so it can be re-enabled without a CSS change). */
#password-strength {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#password-strength-bar {
  display: none;
  height: 6px;
  background-color: var(--gray-clear-2);
  border-radius: 99px;
  margin-top: 5px;
  z-index: 1000;
  align-self: flex-start;
  width: 100%;
  overflow: hidden;
}
#password-strength-bar-fill {
    height: 100%;
    border-radius: 99px;
    background-color: var(--bg-blue-dark);
    width: 0%;
}
#password-strength-bar-fill.weak {
    background-color: #b50f0f;
}
#password-strength-bar-fill.medium {
    background-color: #cf7e15;
}
#password-strength-bar-fill.strong {
    background-color: #099409;
}
#password-recommendations {
  align-self: flex-start;
  font-size: 12px;
  color: var(--font-gray-clair);
  list-style-type: disc;
  margin: 4px 0 0;
  padding-left: 18px;
  display: none;
  columns: 2;
  gap: 18px;
}