/* ============================================================================
   aero-signup.css -- additive only, loaded after the real signup.css.

   Nothing in signup.css itself is touched or overridden here. The only
   things styled below are elements that genuinely didn't exist on the
   original page: the original loaded an external Windows Live "HIP"
   challenge widget inside #iHipHolder (a remote script from
   hipservice.live.com), which this project replaces with a self-hosted
   CAPTCHA image + refresh button. Everything else on the page -- layout,
   colours, spacing, fonts, error/hint styling -- comes entirely from the
   real signup.css and its own generic div.row/.error/.hint rules, which
   already match this markup.
   ========================================================================== */

/* #iHipHolder itself already gets padding-left:200px from signup.css --
   the same indent p.hint/p.error normally add via their own margin-left,
   which is the right amount when a row's *label* is what creates the
   200px offset (the usual pattern) but would double up here since this
   container provides that offset directly. Cancel just the margin, keep
   everything else (colour, the error icon) from the real classes. */
#iHipHolder p.hint { margin-left: 0; }
#iHipHolder #iHIPError {
  color: #ee2037;
  margin: 4px 10px 5px 0;
  padding-left: 17px;
  padding-bottom: 4px;
  width: 250px;
  word-wrap: break-word;
  background: url('Account/images/icon_error.gif') no-repeat left top;
}

#iHipHolder img#captchaImage {
  width: 200px;
  height: 70px;
  margin-left: 5px;
  border: 1px solid #b0b0b0;
  background: #f5f7fa;
  vertical-align: middle;
}

/* Real icon buttons from the original HIP widget's own icon set
   (hip_refresh.gif / hip_audio.gif), replacing the earlier text-character
   stand-ins (the old Unicode "↻" button). These GIFs are already
   complete self-contained button graphics from the original widget --
   they have their own rounded-square background and border baked into
   the pixels -- so this button chrome is deliberately bare (no border,
   no background of its own) rather than boxing the icon a second time,
   which doubled up into a mismatched box-in-a-box look. */
#iHipHolder .hipIconButton {
  margin-left: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Safari keeps its own rounded-rectangle native button chrome even
     after border/background are overridden, unless appearance is reset
     too -- without this, that native grey box was showing through
     around the icon regardless of the rules above. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#iHipHolder .hipIconButton:hover { opacity: 0.85; }
#iHipHolder .hipIconButton:disabled { opacity: 0.5; cursor: default; }
#iHipHolder .hipIconButton img { width: 22px; height: 22px; display: block; }

/* Small spinner (the original widget's own loading indicator) shown next
   to the image while a refresh or audio fetch is in flight. Hidden by
   default via the shared .hide utility class from signup.css. */
#iHipHolder img#captchaLoading {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
}

/* The original widget's own "abc" icon, used here purely as a visual cue
   next to the case-sensitivity hint rather than as a button. */
#iHipHolder #iHIPHint .abcIcon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 6px;
}

/* No extra margin-left here -- #iHipHolder's own padding-left:200px
   already puts this at the same column the other rows' inputs start at. */
#iHipHolder input#challengeAnswer { margin: 6px 0 0; width: 150px; display: block; }

/* #formError is new (a top-level submit error, not tied to one field) --
   inherits colour/icon from signup.css's own p.error rule, this just lines
   it up with the rest of the form's indent. */
p.formError { margin-left: 200px; max-width: 460px; }

#createbuttons button:disabled { opacity: 0.6; cursor: default; }

/* Field help popups -- these use the REAL page's own .helppop/.helpctr
   classes, already sitting byte-for-byte in css/signup.css (including the
   help_ptr.gif pointer-arrow background image and the exact
   top:-11px/left:475px positioning). Nothing to add here for the bubble
   itself -- it was always there, just unused, since the trimmed markup
   never had a populated .helpctr to show. .helparea is already
   position:relative in signup.css, which is what .helppop's
   position:absolute anchors to. js/signup.js toggles the shared .hide
   utility class on focus/blur, matching the original's show/hide pattern
   (that one drove it from SignUp.js's FIELD/MSG framework, which this
   project doesn't reuse -- see js/signup.js's own comment). */

/* Password strength meter inside #passwordhelp's .helpctr -- a thin bar
   that fills and changes colour as js/signup.js scores the typed
   password. The real page had one too (see
   live.accounts.strings.pwdstrengthmeter_password{weak,medium,strong} in
   the captured signup.aspx), just no captured CSS for its bar graphic --
   this is a plain from-scratch bar reusing those same three labels.
   Empty/grey until something's typed. */
.pwdStrengthMeter {
  width: 100%;
  height: 8px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pwdStrengthFill {
  height: 100%;
  width: 0%;
  background: #ccc;
  transition: width 0.15s ease, background-color 0.15s ease;
}
.pwdStrengthLabel { margin: 0 0 6px; font-weight: bold; }