/* Trade Vantage — password field, strength meter and rule checklist. Shared by sign-in and the app. */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none;
  border-radius: 8px; color: var(--faint); font-size: 16px; cursor: pointer; transition: color .15s, background .15s;
}
.pw-reveal:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }

.pw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pw-hint { font: 400 12px/1.5 var(--sans); color: var(--faint); }
.pw-strength { font: 600 12px/1.5 var(--sans); white-space: nowrap; }
.pw-strength.s1 { color: var(--neg); }
.pw-strength.s2 { color: var(--amber); }
.pw-strength.s3, .pw-strength.s4 { color: var(--pos); }

.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter i { flex: 1; height: 4px; border-radius: 99px; background: var(--line-2); transition: background .3s var(--ease-out); }
.pw-meter.s1 i:nth-child(-n+1) { background: var(--neg); }
.pw-meter.s2 i:nth-child(-n+2) { background: var(--amber); }
.pw-meter.s3 i:nth-child(-n+3) { background: var(--pos); }
.pw-meter.s4 i { background: var(--pos); }

.pw-rules { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pw-rules li { display: flex; align-items: center; gap: 9px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.pw-rules li i { font-size: 15px; color: var(--faint); flex: none; }
.pw-rules li.met { color: var(--text); }
.pw-rules li.met i { color: var(--pos); }

.pw-checking { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--sans); color: var(--faint); }

/* The Account sheet's set / change password panel */
.pw-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pw-panel > .pw-head, .pw-panel > .pw-meter, .pw-panel > .pw-rules { margin-top: -6px; }
.pw-panel .hint { margin-top: -4px; }
.pw-label { display: block; }
.pw-label .micro { margin-bottom: 7px; }
.pw-actions { display: flex; gap: 10px; justify-content: flex-end; }
.pw-msg { display: flex; align-items: center; gap: 9px; font: 400 12.5px/1.45 var(--sans); color: var(--pos); }
.pw-msg.error { color: var(--neg); }
.pw-msg i { font-size: 15px; flex: none; }