/* Trijicon career application form, cw-job-application-v1.
 *
 * Every rule below is scoped to the application section. The form reuses the
 * page components of the website: the step bar of the checkout, the floating
 * label fields, the checkbox and the buttons. These rules only fix what the
 * reused components leave open on a job page: readable label and step colours,
 * a visible keyboard focus, the error wording under each field, and the two
 * controls the old design never styled, the file field and the result panel.
 */

.cw-apply {
  background-color: #fff;
}

.cw-apply [hidden] {
  display: none !important;
}

.cw-apply__legend {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.cw-apply__step {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.cw-apply__fallback {
  color: #333;
}

/* The step bar sits on #cfcfcf. The shipped grey of an inactive step reads at
 * about 2:1 against it, so every step keeps a dark colour here.
 */
.cw-apply .checkout__step-btn {
  color: #333;
  cursor: pointer;
}

.cw-apply .checkout__step-num {
  background-color: #595959;
  color: #fff;
}

.cw-apply .checkout__step-btn--active {
  color: #000;
}

.cw-apply .checkout__step-btn--active .checkout__step-num {
  background-color: #000;
  color: #fff;
}

/* A finished step stays clickable, so an applicant can go back and correct it. */
.cw-apply .checkout__step-btn--previous {
  color: #333;
  cursor: pointer;
  pointer-events: auto;
}

.cw-apply .checkout__step-btn--previous .checkout__step-num {
  background-color: #333;
}

.cw-apply .checkout__step-btn:focus-visible,
.cw-apply .btn:focus-visible,
.cw-apply .custom-checkbox__input:focus-visible,
.cw-apply .checkout__shipping-method-radio:focus-visible,
.cw-apply .cw-apply__file-input:focus-visible,
.cw-apply .floating-label-input:focus-within,
.cw-apply .floating-label-select:focus-within {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* The shipped idle label is #b9b9b9, which no longer reads once the field
 * carries an error or a long value.
 */
.cw-apply .floating-label-input .floating-label-input__label,
.cw-apply .floating-label-select .floating-label-select__label {
  color: #4d4d4d;
}

.cw-apply .floating-label-input,
.cw-apply .floating-label-select {
  color: #333;
}

.cw-apply .floating-label-select__readout {
  color: #333;
}

/* The site draws the arrow of a select with the glyph "\e804" of its icon
 * font. That font does not load, so every select ended in a missing-glyph
 * square. This form draws its own arrow from borders in the current text
 * colour, in the place the site used, and depends on no font file. */
.cw-apply .floating-label-select::after {
  content: "";
  border: 0;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  right: 1.1em;
  top: 50%;
  -webkit-transform: translateY(-70%) rotate(45deg);
      -ms-transform: translateY(-70%) rotate(45deg);
          transform: translateY(-70%) rotate(45deg);
}

.cw-apply .floating-label-select__readout::after {
  content: none;
}

.cw-apply__field--error {
  border-color: #d6001c !important;
}

/* Field errors use the gap below each row.
 * A change in field height can move a button between press and release.
 */
.cw-apply__cell {
  position: relative;
}

.cw-apply__note {
  color: #d6001c;
  font-size: 14px;
  font-weight: 700;
  left: 0;
  margin: 4px 0 0;
  position: absolute;
  right: 0;
  top: 100%;
}

.cw-apply__help {
  color: #4d4d4d;
  font-size: 14px;
  margin: 6px 0 0;
}

.cw-apply__summary {
  margin: 30px 0 0;
}

/* The legacy notice uses the same 30px gap as each field row. */
.cw-apply__notice {
  margin-top: 30px;
}

.cw-apply__notice p {
  color: #333;
  margin: 0 0 20px;
}

.cw-apply__notice p:first-child {
  font-weight: 700;
}

.cw-apply__notice a,
.cw-apply__check a,
.cw-apply__result a {
  color: #d6001c;
  text-decoration: underline;
}

.cw-apply__check {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.cw-apply__check .custom-checkbox__input {
  accent-color: #d6001c;
  height: 20px;
  margin: 2px 10px 0 0;
  width: 20px;
}

.cw-apply__check .custom-checkbox__label {
  color: #333;
  max-width: calc(100% - 34px);
}

.cw-apply__eeo-hint {
  width: 100%;
}

.cw-apply__military {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.cw-apply .checkout__shipping-method-radio {
  accent-color: #d6001c;
  height: 18px;
  margin: 0 8px 0 0;
  width: 18px;
}

/* A disabled optional answer keeps its label readable. The shipped page dimmed
 * the whole block, which is what made the old form unreadable.
 */
.cw-apply .checkout__shipping-method-label {
  color: #333;
  margin-bottom: 0;
}

.cw-apply__eeo-fields--locked .floating-label-select {
  background-color: #f4f4f4;
}

.cw-apply .floating-label-select__select:disabled {
  cursor: not-allowed;
}

.cw-apply__file {
  background-color: #fff;
  border: 1px solid #cfcfcf;
  margin-top: 30px;
  padding: 0.5em;
}

.cw-apply__file-label {
  color: #4d4d4d;
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cw-apply__file-input {
  color: #333;
  font-size: 16px;
  margin-top: 4px;
  max-width: 100%;
}

.cw-apply__file-input::file-selector-button {
  background-color: #595959;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  margin-right: 10px;
  padding: 6px 12px;
}

/* The reCAPTCHA checkbox of the last step. Google sizes its own frame, so the
 * slot only holds it and keeps the error under it.
 */
.cw-apply__captcha > div {
  max-width: 100%;
  overflow: hidden;
}

.cw-apply__captcha .cw-apply__note {
  margin-top: 6px;
}

/* The page shows this instead of the form while applications are closed. */
.cw-apply__blocked {
  margin: 20px 0 0;
}

.cw-apply__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.cw-apply .btn[disabled] {
  cursor: progress;
}

/* The honeypot of the old form. A person never sees it and never reaches it
 * with the keyboard.
 */
.cw-apply__trap {
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  visibility: hidden !important;
  width: 0 !important;
}

.cw-apply__result {
  margin-top: 30px;
}

.cw-apply__result h3 {
  margin-top: 0;
}

.cw-apply__result p {
  color: #333;
}

.cw-apply__result:focus {
  outline: 3px solid #000;
  outline-offset: 4px;
}