/* static/css/profile_fields.css
   Namespaced profile-form field styles (pf-*). Mirrors register.html's actual field
   look -- register.html styles its fields with inline styles; these rules reproduce
   those exact values as CSP-clean classes, using the same CSS variables, so the
   middle-name partial visually matches the surrounding register/profile fields.
   Namespaced pf-* so it can't collide with anything. Pure ASCII.

   Reproduced from register.html's inline field styles:
     label  -> font-size:12px; color:var(--med-text); display:block; margin-bottom:4px
     input  -> width:100%; padding:10px 12px; border:1px solid var(--gray-line);
               border-radius:var(--radius-md); font-size:14px; margin-bottom:14px;
               box-sizing:border-box */

.pf-field {
  /* wrapper -- matches the per-field div register.html uses; the input's own
     margin-bottom carries the spacing, same as register.html. */
}

.pf-label {
  font-size: 12px;
  color: var(--med-text);
  display: block;
  margin-bottom: 4px;
}

.pf-optional {
  color: var(--gray-text);
  font-weight: 400;
}

.pf-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 4px;               /* hint sits below; field-group spacing follows */
  box-sizing: border-box;
  font-family: inherit;
}

.pf-hint {
  font-size: 12px;
  color: var(--gray-text);
  line-height: 1.45;
  margin: 0 0 14px;                 /* matches register.html's 14px field gap */
}