/**
 * @file
 * Greys out the read-only KYC (vital-identity) inputs on the admission
 * webforms so their non-editable state is visually obvious. The values are
 * server-enforced (re-derived from the applicant account on save, see PR
 * #1344); this is a display-only affordance. The stylesheet is attached by
 * tpemis_webform_elements to every admission submission form, so both the
 * portal (tpemis_portal) and admin (tpemis_admin) themes inherit it with no
 * per-theme change. Muted colours keep the value text above WCAG AA contrast.
 */

/* The locked input itself. #414a56 text on the #eceef1 fill is ~8.5:1,
   comfortably past the WCAG AA 4.5:1 minimum for body text. background-color
   and cursor use !important to defeat the themes' strong default input
   styling, which would otherwise repaint the field as editable. */
.tpemis-kyc-readonly,
input.tpemis-kyc-readonly,
textarea.tpemis-kyc-readonly {
  color: #414a56;
  background-color: #eceef1 !important;
  border-color: #c9ced6;
  box-shadow: none;
  cursor: not-allowed !important;
}

/* No editable-style focus ring: a locked field must not look focus-active
   like its editable neighbours. A faint dotted outline still marks keyboard
   focus for accessibility. */
.tpemis-kyc-readonly:focus,
input.tpemis-kyc-readonly:focus,
textarea.tpemis-kyc-readonly:focus {
  border-color: #c9ced6;
  outline: 1px dotted #8a929e;
  outline-offset: 1px;
  box-shadow: none;
}

/* The form item wrapper (label + description) reads as one muted group. */
.tpemis-kyc-readonly-item label {
  color: #55606e;
}

/* The appended vital-identity policy note under each locked field. #55606e on
   the form background is >= AA; kept small so it reads as helper text. */
.tpemis-kyc-readonly__note {
  display: inline-block;
  margin-top: 0.25rem;
  color: #55606e;
  font-size: 0.85em;
}