/*
  recruitment-form.css
  Field-level styling for the recruitment form: text/textarea inputs,
  the custom radio/checkbox "choice" component, error states, and the
  honeypot trap. recruitment.css handles everything around the fields
  (progress bar, step chrome, nav buttons); this file is the fields
  themselves.
*/

/* ---- Field layout ---- */
.comrade-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.comrade-field--wide {
  grid-column: 1 / -1;
}

.comrade-field__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--comrade-text);
}

.comrade-field__required {
  color: var(--comrade-primary);
}

.comrade-field__help {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--comrade-text-muted);
}

/* ---- Text / textarea inputs ----
   Clean, spacious, rounded but not excessively, warm surface, subtle
   border, burgundy focus ring — never heavily embossed; that
   neumorphic language is reserved for the choice indicators and small
   accent surfaces below, per the brief's "selective, not everywhere". */
.comrade-field__input,
.comrade-field__textarea {
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--comrade-text);
  background-color: var(--comrade-surface);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-md);
  /* border-radius rides along with the same normal-speed transition as
     color/shadow below, so idle → focus (and back) morphs the corners
     in step with everything else instead of snapping — see the
     :focus rule's own comment for why the radius changes at all. */
  transition: border-radius var(--comrade-transition-normal),
    border-color var(--comrade-transition-normal),
    box-shadow var(--comrade-transition-normal);
}

/* Chrome/Chromium ignore background-color on an autofilled input outright
   (a light-only-theme gap, not covered by the color/background-color pair
   above) and substitute their own yellow/blue tint instead — regardless of
   specificity. The inset box-shadow is the standard, minimal way around
   that: it paints over the UA's autofill layer with the same surface color
   the field already uses, and the absurd transition-duration keeps Chrome's
   own tint from flashing in first. No !important needed; this isn't a hack
   stacked on top of the normal rule above, it's the only mechanism Chrome
   actually respects here. */
.comrade-field__input:-webkit-autofill,
.comrade-field__input:-webkit-autofill:hover,
.comrade-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--comrade-text);
  -webkit-box-shadow: 0 0 0 1000px var(--comrade-surface) inset;
  box-shadow: 0 0 0 1000px var(--comrade-surface) inset;
  caret-color: var(--comrade-text);
  transition: background-color 5000s ease-in-out 0s;
}

.comrade-field__input::placeholder,
.comrade-field__textarea::placeholder {
  color: var(--comrade-text-muted);
  opacity: 0.7;
}

/* base.css's global a/button/input/textarea:focus-visible rule already
   sets this same --comrade-radius-sm on every focused input on the
   site (a11y affordance, not specific to this form) — it was doing so
   silently here too, with no transition of its own, which is what made
   the corners snap instantly on focus. Declaring it again explicitly,
   at this rule's higher specificity, makes the change deliberate and
   lets the transition above animate it; the focus outline/border-color
   themselves still apply immediately, only the radius morphs. */
.comrade-field__input:focus,
.comrade-field__textarea:focus {
  outline: none;
  border-radius: var(--comrade-radius-sm);
  border-color: var(--comrade-primary);
  box-shadow: 0 0 0 3px var(--comrade-primary-light);
}

.comrade-field__textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.55;
}

/* ---- Error state ----
   Empty by default (no error), so :not(:empty) alone decides
   visibility — recruitment-form.js only ever needs to set textContent,
   never toggle a class too. */
.comrade-field__error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--comrade-primary);
}

.comrade-field__error:not(:empty) {
  display: block;
}

.comrade-field.has-error .comrade-field__input,
.comrade-field.has-error .comrade-field__textarea {
  border-color: var(--comrade-primary);
  box-shadow: 0 0 0 3px var(--comrade-primary-light);
}

/* ---- Choice component (custom radio / checkbox) ----
   The native input stays in the accessibility tree and keyboard tab
   order (visually hidden, not display: none), so screen readers and
   keyboard users get completely normal radio/checkbox semantics; only
   the painted indicator is custom. */
.comrade-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.comrade-choice-grid--compact {
  gap: 0.5rem;
}

.comrade-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background-color: var(--comrade-surface);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-pill);
  cursor: pointer;
  transition: border-color var(--comrade-transition-normal), background-color var(--comrade-transition-normal);
}

.comrade-choice--compact {
  padding: 0.45rem 0.8rem;
  font-size: 0.88rem;
}

.comrade-choice:hover {
  border-color: var(--comrade-primary);
}

.comrade-choice:has(.comrade-choice__input:checked) {
  border-color: var(--comrade-primary);
  background-color: var(--comrade-primary-light);
}

.comrade-choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comrade-choice__indicator {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background-color: var(--comrade-surface-soft);
  border: 1.5px solid var(--comrade-border-strong);
  box-shadow: var(--comrade-neumo-pressed);
  transition: border-color var(--comrade-transition-normal), background-color var(--comrade-transition-normal);
}

.comrade-choice__indicator--radio {
  border-radius: 50%;
}

.comrade-choice__indicator--checkbox {
  border-radius: 5px;
}

.comrade-choice__input:checked ~ .comrade-choice__indicator {
  border-color: var(--comrade-primary);
  background-color: var(--comrade-primary);
  box-shadow: none;
}

.comrade-choice__input:focus-visible ~ .comrade-choice__indicator {
  outline: 2px solid var(--comrade-primary);
  outline-offset: 2px;
}

.comrade-choice__indicator--radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--comrade-text-on-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--comrade-transition-fast);
}

.comrade-choice__input:checked ~ .comrade-choice__indicator--radio::after {
  transform: translate(-50%, -50%) scale(1);
}

.comrade-choice__indicator--checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--comrade-text-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  opacity: 0;
  transition: opacity var(--comrade-transition-fast), transform var(--comrade-transition-fast);
}

.comrade-choice__input:checked ~ .comrade-choice__indicator--checkbox::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.comrade-choice__text {
  font-size: 0.92rem;
  color: var(--comrade-text);
}

/* ---- Acknowledgement checkboxes (step 08) ----
   Same indicator component as everywhere else, just laid out as a
   full-width row with the statement text beside it instead of a small
   pill, since these are full sentences, not short option labels. */
.comrade-ack {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: var(--comrade-space-sm) var(--comrade-space-md);
  background-color: var(--comrade-surface);
  border: 1px solid var(--comrade-border);
  border-radius: var(--comrade-radius-md);
  cursor: pointer;
  transition: border-color var(--comrade-transition-normal), background-color var(--comrade-transition-normal);
}

.comrade-ack:has(.comrade-choice__input:checked) {
  border-color: var(--comrade-primary);
  background-color: var(--comrade-primary-light);
}

.comrade-ack .comrade-choice__indicator {
  margin-top: 0.2rem;
}

.comrade-ack__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--comrade-text);
}

/* ---- Honeypot ----
   Visually hidden but still in normal document flow and the tab
   order's reach (not display: none), matching the reasoning in
   HONEYPOT_FIELD's comment in routes/recruitment.py: some bots
   specifically skip display: none fields, fewer skip this. */
.comrade-field--trap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}