/* checkbox rows used on signup */
.agreements .check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}
.agreements .check input[type="checkbox"]{
  width:18px; height:18px;
  margin-top:2px;
}

label{
  display:block;
  font-weight:600;
  margin-top:10px;
  margin-bottom:4px;
}

/* input wrapper with emoji toggle (password) */
.input-wrap { position: relative; }
.input-wrap input { padding-right: 2em; }
.pw-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:1.8em;
  height:1.8em;
  cursor:pointer;
  user-select:none;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}

.tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
}
.tip-pop{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:130%;
  width:260px;
  padding:10px 12px;
  border-radius:10px;
  display:none;
  z-index:50;
}
.tip:hover .tip-pop,
.tip:focus .tip-pop{
  display:block;
}

/* field basics */
input, button, select, textarea{
  font:inherit;
  box-sizing:border-box;
}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
}
textarea{ resize:vertical; }

input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow:var(--focus);
}

/* input prefix chip used for +1 */
.input-prefix{
  padding:10px 12px;
  min-width:44px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---- form feedback helpers ---- */
.field-error{ color:var(--danger); font-size:.9rem; margin-top:4px; }