/* UI action hierarchy: backward actions are secondary; forward actions stay primary. */
.wizard-footer .btn[data-action="prev-step"]{
  background:var(--paper);
  color:var(--blue-dark);
  border:1px solid var(--blue-border);
  box-shadow:none;
}

.wizard-footer .btn[data-action="prev-step"]:hover:not(:disabled){
  background:var(--blue-soft);
}

/* Generic modal close affordance injected by ui-action-hierarchy.js. */
.modal{position:relative}
.modal-close-x{
  font-size:1.75rem;
  font-weight:300;
  cursor:pointer;
  z-index:2;
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper-raised);
  color:var(--muted);
  line-height:0;
  width:var(--control-height);
  height:var(--control-height);
}
.modal-close-x:hover{
  background:var(--blue-soft);
  color:var(--blue-dark)}
.modal-close-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The X replaces generic Close / Cancel / Hide Modal controls only. */
.modal.modal-has-x [data-action="close-modal"]{display:none!important}

/* Completion mark: a quiet, device-independent Latin cross. */
.success-icon{
  position:relative;
  width:44px;
  height:58px;
  margin:0 auto;
  font-size:0;
  color:var(--green-ink);
  line-height:1;
}
.success-icon::before,
.success-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.success-icon::before{
  width:7px;
  height:54px;
}
.success-icon::after{
  width:36px;
  height:7px;
  top:38%;
}
.inline-forward-icon{
  display:inline-block;
  width:17px;
  height:17px;
  margin-left:3px;
  fill:currentColor;
  vertical-align:-3px;
}