/* =====================================================================
   Float login — pixel-perfect vanilla recreation
   Tokens derived from the Auth0/ULP WCAG-compliant stylesheet.
   ===================================================================== */

:root {
  /* Brand */
  --primary-color:          #00A3E1; /* Float cyan — overrides Auth0 default */
  --brand-primary-color:    #3f59e4; /* focus accent */
  --widget-background-color:#ffffff;
  --page-background-color:  #000000;

  /* Text */
  --gray-darkest:           #2d333a;
  --gray-dark:              #6f7780;
  --gray-mid:               #c2c8d0;
  --gray-mid-dark:          #686868;
  --gray-light:             #dee2e6;
  --gray-lightest:          #f1f2f3;
  --font-default-color:     var(--gray-darkest);
  --font-light-color:       var(--gray-dark);
  --title-font-color:       var(--gray-darkest);
  --button-font-color:      #ffffff;

  /* States */
  --error-color:            #d00e17;
  --success-color:          #0a8852;

  /* Typography */
  --font-family:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --small-font-size:        12px;
  --default-font-size:      14px;
  --lg-font-size:           16px;
  --xl-font-size:           20px;
  --title-font-size:        24px;
  --font-default-weight:    400;
  --font-bold-weight:       700;
  --base-line-height:       1.1;
  --lg-line-height:         1.5;

  /* Spacing scale (8px base) */
  --spacing:     8px;
  --spacing-1:   8px;
  --spacing-1-5: 12px;
  --spacing-2:   16px;
  --spacing-3:   24px;
  --spacing-4:   32px;
  --spacing-5:   40px;
  --spacing-6:   48px;
  --spacing-6-5: 52px;

  /* Component dimensions */
  --prompt-width:           400px;
  --outer-padding:          80px;
  --prompt-min-height:      540px;
  --button-height:          52px;
  --input-height:           52px;
  --logo-height:            52px;

  /* Radius & shadow */
  --border-radius-outer:    5px;
  --border-radius-form:     3px;
  --button-border-radius:   3px;
  --input-border-radius:    3px;
  --shadow-component-outer: 0 12px 40px rgba(0,0,0,0.12);

  /* Input */
  --input-border-color:     var(--gray-mid-dark);
  --input-border-width:     1px;
  --input-label-top:        calc(var(--input-height) / 2);
  --input-label-top-focus:  -2px;

  /* Transitions */
  --transition-speed:  0.15s;
  --transition-easing: ease-in-out;
}

/* ==== Reset ==== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--widget-background-color);
  font-family: var(--font-family);
  font-size: var(--default-font-size);
  color: var(--font-default-color);
  line-height: var(--lg-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }

a { color: inherit; text-decoration: none; }

.hide { display: none !important; }

/* ==== Page layout ==== */
.page {
  min-height: 100vh;
  background: var(--widget-background-color); /* page bg matches card on white theme */
}

.login-main {
  min-height: 100vh;
  width: 100%;
  padding: var(--outer-padding) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==== Prompt / card ==== */
.prompt-box {
  position: relative;
  width: var(--prompt-width);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-outer);
  background: var(--widget-background-color);
}

.prompt-inner {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--widget-background-color);
  box-shadow: var(--shadow-component-outer);
  border-radius: var(--border-radius-outer);
}

.prompt-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--prompt-min-height);
}

/* ==== Header ==== */
.prompt-header {
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-3);
  text-align: center;
  flex-shrink: 0;
  line-height: var(--lg-line-height);
}

.prompt-logo {
  display: block;
  object-fit: contain;
  max-height: var(--logo-height);
  max-width: 100%;
  margin: 0 auto;
}

.prompt-title {
  margin: var(--spacing-3) 0 var(--spacing-2);
  font-size: var(--title-font-size);
  font-weight: var(--font-default-weight);
  letter-spacing: 0;
  color: var(--title-font-color);
  text-align: center;
}

.prompt-description {
  text-align: center;
  margin: 0;
}

.prompt-description p {
  display: inline;
  margin: 0;
  color: var(--font-default-color);
}

/* ==== Body ==== */
.prompt-body {
  padding: 0 var(--spacing-5) var(--spacing-5);
  text-align: center;
  flex-shrink: 0;
}

.prompt-body > :last-child { margin-bottom: 0; }

.form-row { width: 100%; }

/* ==== Form / Input ==== */
.login-form {
  display: block;
  width: 100%;
}

.input-wrapper {
  position: relative;
  margin-bottom: var(--spacing-1);
}

.field {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--widget-background-color);
  border-radius: var(--input-border-radius);
  transition:
    box-shadow var(--transition-speed) var(--transition-easing),
    border-color var(--transition-speed) var(--transition-easing);
}

/* Floating label */
.field-label {
  position: absolute;
  left: var(--spacing-2);
  top: var(--input-label-top);
  transform: translateY(-50%);
  transform-origin: 0;
  color: var(--font-light-color);
  background: var(--widget-background-color);
  z-index: 1;
  padding: 1px 6px;
  font-size: var(--lg-font-size);
  font-weight: var(--font-default-weight);
  line-height: 1;
  pointer-events: none;
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    transform var(--transition-speed) var(--transition-easing),
    top       var(--transition-speed) var(--transition-easing),
    color     var(--transition-speed) var(--transition-easing);
}

.field-label .required {
  margin-left: -3px;
  color: inherit;
}

.field-input {
  flex: 1 1 auto;
  width: 100%;
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0 var(--spacing-2);
  font-family: inherit;
  font-size: var(--lg-font-size);
  color: var(--font-default-color);
  background: var(--widget-background-color);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    box-shadow  var(--transition-speed) var(--transition-easing),
    border-color var(--transition-speed) var(--transition-easing);
}

.field-input:focus {
  border-color: var(--brand-primary-color);
  box-shadow: 0 0 0 1px var(--brand-primary-color);
}

/* Float the label when focused or filled */
.field.is-focused .field-label,
.field.is-filled  .field-label {
  top: var(--input-label-top-focus);
  transform: scale(0.88) translateX(-8px) translateY(-58%);
  color: var(--brand-primary-color);
  overflow: visible;
  white-space: normal;
}

.field.is-filled:not(.is-focused) .field-label {
  color: var(--font-light-color);
}

/* Error state — frame the input with a visible red ring and tint the label */
.input-wrapper.has-error .field-input {
  border-color: var(--error-color);
  border-width: 1px;
  box-shadow: 0 0 0 1px var(--error-color);
  background-color: #fff5f5;
}

.input-wrapper.has-error .field-input:focus {
  border-color: var(--error-color);
  box-shadow: 0 0 0 1px var(--error-color);
}

.input-wrapper.has-error .field-label {
  color: var(--error-color) !important;
  background-color: #fff5f5;
}

/* Error message — red text with a small warning icon */
.field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  margin: 6px 2px 0;
  font-size: var(--small-font-size);
  color: var(--error-color);
  line-height: 1.4;
}

.field-error::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23D00E17'/%3E%3Cpath d='M7 3.5v4' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.2' r='0.9' fill='white'/%3E%3C/svg%3E");
}

.input-wrapper.has-error .field-error[data-error-kind="required"] { display: flex; }
.input-wrapper.has-error.invalid .field-error[data-error-kind="invalid"] { display: flex; }
.input-wrapper.has-error.invalid .field-error[data-error-kind="required"] { display: none; }

/* ==== Readonly field (email shown on password step) ==== */
.field.is-readonly .field-input,
.field-input[readonly] {
  background-color: color-mix(in hsl, #fff, #2d333a 8%);
  cursor: default;
}

.field.is-readonly .field-input:focus {
  border-color: var(--input-border-color);
  box-shadow: none;
}

.field.is-readonly .field-label {
  background-color: color-mix(in hsl, #fff, #2d333a 8%);
}

/* ==== Password field (wrapper border + eye toggle) ==== */
.field.is-password {
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  flex-wrap: nowrap;
  transition:
    box-shadow   var(--transition-speed) var(--transition-easing),
    border-color var(--transition-speed) var(--transition-easing);
}

.field.is-password .field-input {
  border: 0;
  box-shadow: none;
  flex: 1 1 auto;
}

.field.is-password .field-input:focus {
  box-shadow: none;
  border: 0;
}

.field.is-password:focus-within,
.field.is-password.is-focused {
  border-color: var(--brand-primary-color);
  box-shadow: 0 0 0 1px var(--brand-primary-color);
}

.input-wrapper.has-error .field.is-password {
  border-color: var(--error-color);
  box-shadow: 0 0 0 1px var(--error-color);
  background-color: #fff5f5;
}

.input-wrapper.has-error .field.is-password .field-input {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

/* Eye-icon button */
.field-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--input-height);
  width: var(--input-height);
  min-width: var(--input-height);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-top-right-radius: var(--border-radius-form);
  border-bottom-right-radius: var(--border-radius-form);
  outline: none;
}

.field-icon-btn:focus {
  outline: 2px solid var(--brand-primary-color);
  outline-offset: -4px;
  border-radius: 8px;
}

.field-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.field-icon.show {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235C677D' d='M9 12c3.13 0 5.732-1.788 7.856-5.5C14.732 2.788 12.13 1 9 1S3.268 2.788 1.144 6.5C3.268 10.212 5.87 12 9 12zM9 0c3.667 0 6.667 2.167 9 6.5-2.333 4.333-5.333 6.5-9 6.5s-6.667-2.167-9-6.5C2.333 2.167 5.333 0 9 0zm0 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
}

.field-icon.hide {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235C677D' d='M12.148 5.969a3.5 3.5 0 0 1-4.68 4.68l.768-.768a2.5 2.5 0 0 0 3.145-3.145l.767-.767zM5.82 12.297c.993.47 2.052.703 3.18.703 3.13 0 5.732-1.788 7.856-5.5-.837-1.463-1.749-2.628-2.738-3.501l.708-.708C15.994 4.337 17.052 5.74 18 7.5c-2.333 4.333-5.333 6.5-9 6.5a8.294 8.294 0 0 1-3.926-.957l.746-.746zM15.89.813L2.313 14.39a.5.5 0 0 1-.667-.744L3.393 11.9C2.138 10.837 1.007 9.37 0 7.5 2.333 3.167 5.333 1 9 1c1.51 0 2.907.367 4.19 1.102L15.147.146a.5.5 0 0 1 .744.667zm-3.436 2.026A7.315 7.315 0 0 0 9 2C5.87 2 3.268 3.788 1.144 7.5c.9 1.572 1.884 2.798 2.959 3.69l1.893-1.893a3.5 3.5 0 0 1 4.801-4.801l1.657-1.657zm-2.396 2.395a2.5 2.5 0 0 0-3.324 3.324l3.324-3.324z'/%3E%3C/svg%3E");
  display: none;
}

.field.is-password.show-value .field-icon.show { display: none; }
.field.is-password.show-value .field-icon.hide { display: inline-block; }

/* ==== Confirmation (forgot-password success) ==== */
.confirmation {
  margin-top: var(--spacing-3);
  padding: var(--spacing-2);
  border-radius: var(--border-radius-form);
  background: #e8f4ea;
  border: 1px solid #a6d8b3;
  color: #0a5130;
  font-size: var(--default-font-size);
  line-height: 1.5;
  text-align: left;
}

.confirmation p { margin: 0; }

/* ==== Visually hidden utility (for a11y labels) ==== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==== Processing (waiting) screen ==== */
.processing-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  margin: 0 0 var(--spacing-3);
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--gray-light);
  border-top-color: var(--primary-color); /* Float cyan */
  animation: fc-spin 0.85s linear infinite;
}

@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

/* ==== Notice banner (warns: not your Float login) ==== */
.notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 var(--spacing-3);
  padding: 12px 14px;
  background: #fff8e1;
  border: 1px solid #f5d27a;
  border-radius: var(--border-radius-form);
  font-size: var(--default-font-size);
  color: #5a4200;
  text-align: left;
  line-height: 1.5;
}

.notice-banner .notice-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L17 16H1L9 1z' fill='%23f5b800' stroke='%23b48600' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M9 6v5' stroke='%235a4200' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13.2' r='1' fill='%235a4200'/%3E%3C/svg%3E");
}

.notice-banner strong { font-weight: var(--font-bold-weight); }

/* ==== Reassurance line ==== */
.reassurance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--spacing-2) 0 0;
  padding: var(--spacing-1) var(--spacing-1-5);
  background: var(--gray-lightest);
  border-radius: var(--border-radius-form);
  font-size: var(--small-font-size);
  color: var(--font-light-color);
  text-align: left;
  line-height: 1.5;
}

.reassurance-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1L2 3v4c0 3.5 2.5 6.7 6 8 3.5-1.3 6-4.5 6-8V3L8 1z' stroke='%236f7780' stroke-width='1.3' fill='none' stroke-linejoin='round'/%3E%3Cpath d='M5.5 8l2 2 3-4' stroke='%236f7780' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==== MFA OTP code field ==== */
.field.is-code .field-input {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  letter-spacing: 10px;
  padding-left: calc(var(--spacing-2) + 5px); /* offset the letter-spacing trailing gap */
}

/* When empty, don't shove the floating label off-center */
.field.is-code:not(.is-filled):not(.is-focused) .field-input {
  letter-spacing: normal;
  font-size: var(--lg-font-size);
}

/* MFA action links row */
.mfa-actions {
  margin-top: var(--spacing-2);
  text-align: center;
}

.mfa-actions p {
  margin: 0 0 var(--spacing-1);
  font-size: var(--default-font-size);
  color: var(--font-default-color);
  line-height: 1.5;
}

.mfa-actions p:last-child { margin-bottom: 0; }

.mfa-hint {
  color: var(--font-light-color) !important;
  font-size: var(--small-font-size) !important;
}

.link-action {
  display: inline-block;
  padding: 2px 4px;
  border-radius: var(--border-radius-form);
  color: var(--brand-primary-color);
  font-weight: var(--font-default-weight);
}

.link-action:hover,
.link-action:focus {
  text-decoration: underline;
  outline: none;
}

.link-action.is-disabled {
  color: var(--gray-dark);
  pointer-events: none;
  cursor: default;
}

.link-action.is-disabled:hover { text-decoration: none; }

.resend-timer { margin-left: 4px; }

/* ==== Forgot password link ==== */
.forgot-row {
  text-align: left;
  margin-top: var(--spacing-1);
}

.forgot-link {
  display: inline-block;
  padding: 4px 4px 4px 2px;
  font-size: var(--default-font-size);
  font-weight: var(--font-default-weight);
  color: var(--brand-primary-color);
  border-radius: var(--border-radius-form);
}

.forgot-link:hover,
.forgot-link:focus {
  text-decoration: underline;
  outline: none;
}

/* ==== Primary button ==== */
.button-row {
  width: 100%;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: var(--button-height);
  height: var(--button-height);
  margin-top: var(--spacing-3);
  padding: 4px var(--spacing-2);
  font-family: inherit;
  font-size: var(--lg-font-size);
  font-weight: var(--font-default-weight);
  color: var(--button-font-color);
  background: var(--primary-color);
  border: 0;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  outline: none;
  transition:
    background-color .25s ease-in-out,
    box-shadow .25s ease-in-out;
}

.btn-primary:hover { box-shadow: inset 0 0 0 150px rgba(0,0,0,0.1); }
.btn-primary:focus { outline: 2px solid var(--brand-primary-color); outline-offset: 2px; }
.btn-primary:active { box-shadow: 0 0 2px 0 #c9cfda; }
.btn-primary:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.6; }

/* ==== Alternate action ==== */
.alternate-action {
  text-align: left;
  margin: var(--spacing-2) 0 0;
  padding: 0 var(--spacing-5);
}

.alternate-text {
  display: inline;
  margin: 0;
  font-size: var(--default-font-size);
  color: var(--font-default-color);
  text-align: center;
  width: 100%;
}

.alternate-link {
  display: inline-block;
  padding: 4px;
  border-radius: var(--button-border-radius);
  color: var(--brand-primary-color);
  font-weight: var(--font-default-weight);
}

.alternate-link strong { font-weight: var(--font-bold-weight); }

.alternate-link:hover,
.alternate-link:focus {
  text-decoration: underline;
  outline: none;
}

/* ==== Responsive (mobile full-screen card, matches Auth0 small breakpoint) ==== */
@media (max-width: 480px) {
  .login-main {
    padding: 0;
    min-height: 100vh;
  }
  .prompt-box {
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
  }
  .prompt-inner {
    border-radius: 0;
    box-shadow: none;
    height: 100%;
  }
  .prompt-wrapper {
    min-height: 100vh;
  }
  .prompt-header  { padding-top: var(--spacing-3); }
  .prompt-body    { padding: 0 var(--spacing-3) var(--spacing-5); }
  .alternate-action { padding: 0 var(--spacing-3); }
}