/*
CHANGE LOG
File: static/css/carrier_feedback.css
Purpose: Presentation for the carrier-page comments/corrections form
         (WORK-ORDER "Stabilize the ProHRHQ Carrier Microsite and Add
         Carrier Feedback", Phase Two, §5.1). Feedback-only -- loaded
         only on carrier pages via templates/carriers/carrier-detail.html's
         extra_head block, not sitewide. Also reused (WORK-ORDER "ProHRHQ
         Job and Microsite Architecture" Bite 7) by the selected-job
         Apply/Upload-résumé forms -- same field/label/input styling,
         same loading path (already present on every carrier page), so
         no new stylesheet for a second form on the same page.
Used by: templates/carriers/partials/microsite/_feedback.html,
         templates/carriers/partials/microsite/_selected_job.html
Version History:
2026-08-22 v1.2 - Michael's direct correction, screenshot-verified:
                  "This looks really messy" -- added .ph-apply-block/
                  .ph-apply-options/.ph-apply-divider to visually group
                  the two apply forms as distinct alternatives with a
                  shared heading and an "or" divider, instead of running
                  back to back with no separation. Markup change in
                  templates/carriers/partials/microsite/_selected_job.html;
                  no new fields, no behavior change.
2026-08-22 v1.1 - Bite 7: extended the shared input selector to cover
                  type="email"/"tel"/"file" (was text/textarea only).
2026-08-21 v1.0 - Initial.
*/

.ph-feedback-status {
  margin: 0 0 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  font-size: 1rem;
}
.ph-feedback-status--ok {
  background: #eaf6ee;
  border: 1px solid #bfe3c9;
  color: #1d5f34;
}
.ph-feedback-status--error {
  background: #fbeceb;
  border: 1px solid #f0c2be;
  color: #8a2d24;
}

/* WORK-ORDER "Build the Universal Carrier Job System": groups the two
   ALTERNATIVE apply forms (résumé upload, manual name/email/phone) so
   they read as two distinct options instead of one long form -- Michael's
   direct correction, screenshot-verified ("This looks really messy"). */
.ph-apply-block {
  max-width: 42rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.ph-apply-heading { margin: 0 0 0.9rem; font-size: 1.1rem; }
.ph-apply-options { display: flex; flex-direction: column; }
.ph-apply-option .ph-feedback-form { margin-top: 0; max-width: none; }
.ph-apply-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.4rem 0 1.1rem; color: var(--color-text-muted, #7a7568);
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ph-apply-divider::before, .ph-apply-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-rule);
}

.ph-feedback-form { max-width: 42rem; margin-top: 1rem; }
.ph-feedback-field { margin-bottom: 1.1rem; }
.ph-feedback-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
}
.ph-feedback-field input[type="text"],
.ph-feedback-field input[type="email"],
.ph-feedback-field input[type="tel"],
.ph-feedback-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius);
  font-family: var(--font-reading, inherit);
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
}
.ph-feedback-field input[type="file"] {
  display: block;
  font-family: var(--font-reading, inherit);
  font-size: 0.95rem;
}
.ph-feedback-field textarea { resize: vertical; min-height: 7rem; }

.ph-feedback-textarea-row { position: relative; }
.ph-feedback-dictate {
  margin-top: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: #fff;
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.ph-feedback-dictate[hidden] { display: none; }
.ph-feedback-dictate.is-listening { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Honeypot: present in the DOM for bots to fill, invisible and
   unreachable by keyboard/AT for real visitors. Not display:none --
   some spam bots skip fields hidden that way. */
.ph-feedback-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}