/* Hirable apply form: extra question types and the optional diversity survey. Logical properties keep right-to-left pages mirrored. */
.hir-field select.hir-select,
.hir-field input[type=date],
.hir-field input[type=number] { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd3da; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--hir-ink, #1a1a2e); }
.hir-field input[type=number] { max-width: 220px; }
.hir-field input[type=date] { max-width: 260px; }
.hir-field select.hir-select:focus,
.hir-field input[type=date]:focus,
.hir-field input[type=number]:focus { outline: 0; border-color: var(--hir-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hir-accent) 20%, transparent); }
.hir-field.is-bad select, .hir-field.is-bad input[type=date], .hir-field.is-bad input[type=number] { border-color: #dc2626; }
.hir-choice { gap: 8px; }
.hir-choice legend { width: 100%; margin-bottom: 4px; }
.hir-choice label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 1.4; }
.hir-choice input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.hir-choice.is-bad legend { color: #b91c1c; }

/* Diversity survey */
.hir-eeo { margin: 0 0 14px; }
.hir-eeo-inform { border: 1px solid var(--hir-line, #e3e5ea); border-radius: 10px; padding: 12px 14px; background: var(--hir-soft, #f6f7f9); }
.hir-eeo-inform > summary { cursor: pointer; font-weight: 700; color: var(--hir-ink, #1a1a2e); }
.hir-eeo-inform[open] > summary { margin-bottom: 8px; }
.hir-eeo-after { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid #bbf7d0; color: var(--hir-ink, #1a1a2e); }
.hir-eeo-title { margin: 0 0 6px; font-size: 1.05em; }
.hir-eeo .hir-help { display: block; margin: 0 0 12px; }
.hir-eeo-q { margin-bottom: 12px; }
.hir-eeo-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; }
.hir-eeo .hir-eeo-skip { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 4px; font: inherit; font-weight: 600; color: var(--hir-mute, #5b6170) !important; text-decoration: underline; cursor: pointer; }
.hir-eeo-done { margin: 12px 0 0; font-weight: 600; }
@media (max-width: 480px) {
  .hir-field input[type=number], .hir-field input[type=date] { max-width: 100%; }
  .hir-eeo-btns .hir-btn { width: 100%; }
}