/* CashWeeks auth fields: outlined boxes with floating ("notched") labels.
   Colours come only from tokens, defined per surface:
   login.css (.login-body), cashshield-v15.css (:root) and
   midnight-surface-dm1.css (body[data-theme="midnight"]).
   --card-bg   surface behind the field (the notch's top half)
   --input-bg  field fill
   --input-line resting 1px border
   --ink / --muted  text / resting label
   --brand     focus border, ring and focused label
   --danger / --danger-bg  invalid border+label / invalid fill
   --success   met password rule */

.auth-field { position: relative; margin-bottom: 14px; }
.auth-field .float { margin: 0; }

.float { position: relative; --fill: var(--input-bg); }
.float[data-invalid="true"] { --fill: var(--danger-bg); }

.float input[id] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--input-line);
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font: 400 15px/1.2 "DM Sans", sans-serif;
  outline: none;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
.float:hover input[id] { border-color: var(--muted); }
.float:focus-within input[id] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.float[data-invalid="true"] input[id] { border-color: var(--danger); }
.float[data-invalid="true"]:focus-within input[id] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.float input[id]:disabled { cursor: not-allowed; opacity: .55; }

/* The format example shows only while the field has focus. */
.float input[id]::placeholder { color: var(--muted); opacity: 0; }
.float:focus-within input[id]::placeholder { opacity: 1; }

.float .float-label {
  position: absolute;
  left: 10px;
  top: 24px;
  z-index: 2;
  display: block;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  transform: translateY(-50%);
  background: transparent;
  color: var(--muted);
  font: 400 15px/1.2 "DM Sans", sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition: top .12s, font-size .12s, color .12s;
}
.float .float-label > * { pointer-events: auto; }
.float .float-label .float-optional { color: var(--muted); }

.float:focus-within .float-label,
.float[data-filled="true"] .float-label,
.float input:-webkit-autofill ~ .float-label {
  top: 0;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(to bottom, var(--card-bg) 50%, var(--fill) 50%);
}
/* Kept separate: an engine without :autofill must not drop the rule above. */
.float input:autofill ~ .float-label {
  top: 0;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(to bottom, var(--card-bg) 50%, var(--fill) 50%);
}
.float:focus-within .float-label { color: var(--brand); }
.float[data-invalid="true"] .float-label { color: var(--danger); }

/* Tooltips inside a label must float above the fields below. */
.float:hover,
.float:focus-within { z-index: 3; }

/* Autofill: keep our fill, not the browser's light blue, and tell JS. */
@keyframes auth-autofill-start { from { opacity: 1; } to { opacity: 1; } }
@keyframes auth-autofill-cancel { from { opacity: 1; } to { opacity: 1; } }
.float input[id]:-webkit-autofill,
.float input[id]:-webkit-autofill:hover,
.float input[id]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 100px var(--fill) inset;
  animation-name: auth-autofill-start;
  animation-duration: 1ms;
}
.float:focus-within input[id]:-webkit-autofill { box-shadow: 0 0 0 100px var(--fill) inset, 0 0 0 1px var(--brand); }
.float input[id]:not(:-webkit-autofill) { animation-name: auth-autofill-cancel; animation-duration: 1ms; }

/* Password: Show / Hide sits inside the right edge with a 44px target. */
.float-password input[id] { padding-right: 68px; }
.float .float-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  min-width: 56px;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand);
  font: 700 13px/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.float .float-toggle:hover { text-decoration: underline; }
.float .float-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.float .float-toggle:disabled { cursor: not-allowed; opacity: .55; }

/* Under the box: error first, then helper / live rule. */
.field-error {
  display: block;
  margin: 6px 0 0 2px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.field-error:empty { display: none; }
.field-help,
.field-rule {
  display: block;
  margin: 6px 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.field-rule[hidden] { display: none; }
.field-rule-icon { display: inline-block; width: 1.1em; font-weight: 800; }
.field-rule[data-met="true"] { color: var(--success); }
.field-rule-state {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .float .float-label,
  .float input[id] { transition: none; }
}