/* Arro Crushing — Project Fit Questionnaire (popup component)
   ------------------------------------------------------------------
   Self-contained. Every class is prefixed `arro-` so it cannot collide
   with the host site's styles. No page background, no header, no logo —
   the panel simply floats over whatever page opens it.

   Brand green #12843f sampled from arrocrushing.com.
   ------------------------------------------------------------------ */

.arro-q {
  --arro-green: #12843f;
  --arro-green-dark: #0d6330;
  --arro-green-light: #0da34e;
  --arro-green-tint: #eaf4ee;
  --arro-ink: #1c1f1d;
  --arro-muted: #6b7280;
  --arro-line: #e2e5e3;
  --arro-card: #ffffff;
  --arro-amber: #b06f00;
  --arro-amber-tint: #fdf6e7;
  --arro-red: #b3261e;

  /* Backdrop behind the floating panel. Set to `transparent` if the host
     page already dims the screen behind its own modal layer. */
  --arro-scrim: rgba(0, 0, 0, .5);

  --arro-radius: 14px;
  --arro-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .12);
  /* Oswald is a condensed face. It is narrower than a normal UI font, so the
     sizes and letter-spacing below are tuned up slightly to stay readable.
     To use Oswald for headings only, point --arro-font at a normal sans. */
  --arro-font: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
  --arro-font-head: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
}

.arro-q, .arro-q * { box-sizing: border-box; }
.arro-q[hidden] { display: none !important; }

/* ---------------- Overlay + floating panel ---------------- */
.arro-q.arro-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: var(--arro-scrim);
  animation: arro-fade .18s ease both;
}
.arro-q.arro-inline { display: block; }

.arro-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: var(--arro-card);
  border-radius: var(--arro-radius);
  box-shadow: var(--arro-shadow);
  overflow: hidden;
  font-family: var(--arro-font);
  color: var(--arro-ink);
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  animation: arro-pop .22s cubic-bezier(.2, .8, .3, 1) both;
}
.arro-inline .arro-panel { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08); margin: 0 auto; }

@keyframes arro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes arro-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes arro-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .arro-q.arro-modal, .arro-panel, .arro-step, .arro-note, .arro-feedback { animation: none !important; }
  .arro-progress-fill { transition: none; }
}

/* ---------------- Close button ---------------- */
.arro-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--arro-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.arro-close:hover { background: #f0f2f1; color: var(--arro-ink); }
.arro-close:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }

/* ---------------- Progress ---------------- */
.arro-progress-track {
  height: 4px;
  background: #e6e9e7;
  overflow: hidden;
}
.arro-progress-fill {
  height: 100%;
  background: var(--arro-green);
  width: 0;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.arro-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--arro-muted);
  padding: 13px 30px 0;
  padding-right: 58px; /* clear the close button */
  letter-spacing: .1px;
}

/* ---------------- Step body ---------------- */
.arro-step {
  padding: 14px 30px 26px;
  animation: arro-rise .22s ease both;
}

.arro-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--arro-green);
  margin: 0 0 10px;
}
.arro-q .arro-title {
  font-family: var(--arro-font-head);
  font-size: 28px;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: .1px;
  color: var(--arro-ink);
  padding-right: 34px;
}
.arro-help { color: var(--arro-muted); font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.arro-title + .arro-options, .arro-title + .arro-fields { margin-top: 20px; }

/* ---------------- Option cards ---------------- */
.arro-options { display: grid; gap: 10px; }
.arro-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--arro-line);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.arro-opt:hover { border-color: #b9c2bc; background: #fbfcfb; }
.arro-opt:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }
.arro-opt[aria-pressed="true"] {
  border-color: var(--arro-green);
  background: var(--arro-green-tint);
  box-shadow: inset 0 0 0 1px var(--arro-green);
}
.arro-tick {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #c4cbc6;
  border-radius: 50%;
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: border-color .15s, background .15s;
}
.arro-opt.arro-multi .arro-tick { border-radius: 5px; }
.arro-opt[aria-pressed="true"] .arro-tick { border-color: var(--arro-green); background: var(--arro-green); }
.arro-tick svg { opacity: 0; }
.arro-opt[aria-pressed="true"] .arro-tick svg { opacity: 1; }
.arro-opt-compact { align-items: center; padding: 12px 14px; }
.arro-opt-compact .arro-tick { margin-top: 0; }
.arro-opt-label { display: block; font-weight: 500; font-size: 16.5px; letter-spacing: .3px; }
.arro-opt-desc { display: block; color: var(--arro-muted); font-size: 14px; font-weight: 400; margin-top: 3px; line-height: 1.45; }

/* ---------------- Notes and feedback ---------------- */
.arro-note {
  border-left: 3px solid var(--arro-amber);
  background: var(--arro-amber-tint);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-top: 16px;
  animation: arro-rise .22s ease both;
}
.arro-note b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 500; }
.arro-note p { margin: 0; font-size: 15px; font-weight: 300; color: #5a4a2a; }
.arro-feedback {
  border-left: 3px solid var(--arro-green);
  background: var(--arro-green-tint);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 300;
  color: #1c4c31;
  animation: arro-rise .22s ease both;
}

/* ---------------- Fields ---------------- */
.arro-fields { display: grid; gap: 17px; }
.arro-field.arro-half { grid-column: span 1; }
@media (min-width: 560px) {
  .arro-fields { grid-template-columns: 1fr 1fr; }
  .arro-field { grid-column: 1 / -1; }
  .arro-field.arro-half { grid-column: span 1; }
}
.arro-field > label, .arro-sub-label {
  display: block;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .3px;
  margin-bottom: 7px;
  color: var(--arro-ink);
}
.arro-req { color: var(--arro-green); }
.arro-q input[type="text"], .arro-q input[type="email"], .arro-q input[type="tel"],
.arro-q input[type="url"], .arro-q input[type="date"], .arro-q select, .arro-q textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .2px;
  padding: 11px 13px;
  border: 1.5px solid var(--arro-line);
  border-radius: 8px;
  background: #fff;
  color: var(--arro-ink);
  transition: border-color .15s, box-shadow .15s;
}
.arro-q input:focus, .arro-q select:focus, .arro-q textarea:focus {
  outline: none;
  border-color: var(--arro-green);
  box-shadow: 0 0 0 3px rgba(18, 132, 63, .15);
}
.arro-q textarea { resize: vertical; min-height: 104px; }
.arro-checkbox-row { display: flex; align-items: center; gap: 9px; }
.arro-checkbox-row input { width: 18px; height: 18px; accent-color: var(--arro-green); }
.arro-checkbox-row label { font-weight: 300; font-size: 15px; margin: 0; }
.arro-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.arro-chip {
  border: 1.5px solid var(--arro-line);
  background: #fff;
  border-radius: 99px;
  padding: 9px 17px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .3px;
  color: var(--arro-ink);
  cursor: pointer;
  transition: all .15s;
}
.arro-chip:hover { border-color: #b9c2bc; }
.arro-chip[aria-pressed="true"] {
  border-color: var(--arro-green);
  background: var(--arro-green);
  color: #fff;
  font-weight: 500;
}
.arro-error { color: var(--arro-red); font-size: 13.5px; margin: 6px 0 0; font-weight: 500; }
.arro-q .arro-invalid { border-color: var(--arro-red); }

/* ---------------- File upload ---------------- */
.arro-drop {
  border: 2px dashed #c8cfca;
  border-radius: 10px;
  padding: 24px 18px;
  text-align: center;
  background: #fafbfa;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.arro-drop:hover, .arro-drop.arro-over { border-color: var(--arro-green); background: var(--arro-green-tint); }
.arro-drop p { margin: 6px 0 0; font-size: 13px; color: var(--arro-muted); }
.arro-drop b { font-size: 15px; }
.arro-file-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.arro-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--arro-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.arro-file-list .arro-sz { color: var(--arro-muted); font-size: 12.5px; }
.arro-file-list button {
  border: 0; background: none; color: var(--arro-red);
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}

/* ---------------- Nav ---------------- */
.arro-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--arro-line);
}
.arro-nav-right { display: flex; gap: 10px; align-items: center; }
.arro-btn {
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 12px 26px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, transform .05s;
}
.arro-btn:active { transform: translateY(1px); }
.arro-btn:focus-visible { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }
.arro-btn-primary { background: var(--arro-green); color: #fff; }
.arro-btn-primary:hover { background: var(--arro-green-dark); }
.arro-btn-primary[disabled] { background: #a9b5ad; cursor: not-allowed; }
.arro-btn-ghost { background: transparent; color: var(--arro-muted); padding-left: 4px; }
.arro-btn-ghost:hover { color: var(--arro-ink); }
.arro-btn-skip { background: transparent; color: var(--arro-muted); border-color: var(--arro-line); }
.arro-btn-skip:hover { border-color: #b9c2bc; color: var(--arro-ink); }

/* ---------------- Milestone + result ---------------- */
.arro-centered { text-align: center; padding: 22px 8px 4px; }
.arro-result { text-align: center; padding: 40px 30px 34px; }
.arro-mark {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.arro-good .arro-mark { background: var(--arro-green-tint); color: var(--arro-green); }
.arro-neutral .arro-mark { background: #eef1f4; color: #3a3a3a; }
.arro-stop .arro-mark { background: #f4f0ea; color: #3a3a3a; }
.arro-q .arro-result h1, .arro-q .arro-centered h1, .arro-q .arro-result .arro-title {
  font-family: var(--arro-font-head);
  font-size: 27px;
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: .1px;
  color: var(--arro-ink);
}
.arro-result p, .arro-centered p { color: var(--arro-muted); max-width: 470px; margin: 0 auto 8px; font-size: 16px; font-weight: 300; }
.arro-meta { font-size: 13px; color: var(--arro-muted); margin-top: 14px; }
.arro-result .arro-actions { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.arro-spinner {
  width: 16px; height: 16px;
  border: 2.5px solid #d8ddd9;
  border-top-color: var(--arro-green);
  border-radius: 50%;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  animation: arro-spin .7s linear infinite;
}
@keyframes arro-spin { to { transform: rotate(360deg); } }

/* ---------------- 3-step intake + careers application (2026-10-28) ---------------- */
.arro-intake { max-width: 680px; }
/* The site runs color-scheme:dark; keep native checkboxes and date pickers light inside the white panel. */
.arro-panel { color-scheme: light; }
.arro-head { padding: 26px 30px 0; padding-right: 58px; }
.arro-q .arro-head .arro-title { margin: 0; padding-right: 0; outline: none; }
.arro-sub { margin: 4px 0 0; color: var(--arro-muted); font-size: 15.5px; font-weight: 400; }
.arro-progress { margin-top: 18px; }
.arro-progress-text { margin: 0 0 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .4px; color: var(--arro-muted); text-transform: uppercase; }
.arro-progress-text b { color: var(--arro-green); font-weight: 600; }
.arro-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.arro-steps li { height: 4px; border-radius: 4px; background: #e6e9e7; transition: background .3s; }
.arro-steps li.is-done, .arro-steps li.is-current { background: var(--arro-green); }
.arro-steps li.is-current { background: linear-gradient(90deg, var(--arro-green), var(--arro-green-light)); }
.arro-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.arro-step { padding-top: 22px; }
.arro-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.arro-qblock + .arro-qblock { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--arro-line); }
.arro-qblock[hidden] { display: none; }
.arro-qblock > :not(legend) { clear: both; } /* legend floats so it never sits on the divider line */
.arro-qlabel, .arro-q .arro-qlabel {
  display: block; float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font-family: var(--arro-font-head); font-size: 19px; font-weight: 500; letter-spacing: .2px; line-height: 1.3; color: var(--arro-ink);
}
.arro-grid2 { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .arro-grid2 { grid-template-columns: 1fr 1fr; } }
.arro-grid-tight { grid-template-columns: 1fr 1fr; } /* short labels stay 2-up on phones */
.arro-qblock .arro-field { margin-top: 14px; }
.arro-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--arro-muted); font-weight: 400; }
.arro-fine { margin: 16px 0 0; font-size: 13px; color: var(--arro-muted); font-weight: 400; }
.arro-opt-tag { font-weight: 400; color: var(--arro-muted); font-size: 13px; margin-left: 4px; }
.arro-suffix { position: relative; display: flex; align-items: center; }
.arro-q .arro-suffix input { padding-right: 96px; }
.arro-suffix span { position: absolute; right: 13px; font-size: 14px; color: var(--arro-muted); pointer-events: none; }
.arro-field .arro-checkbox-row { margin-top: 9px; }
.arro-field .arro-note { margin-top: 10px; }
.arro-note[hidden], .arro-error[hidden], .arro-field[hidden], [data-show][hidden] { display: none !important; }
.arro-note a, .arro-result a { color: var(--arro-green-dark); font-weight: 500; }
.arro-nested { margin-top: 0; }
.arro-summary {
  margin: 0 0 18px; padding: 10px 14px; border-radius: 8px;
  background: var(--arro-green-tint); color: #1c4c31; font-size: 14.5px; font-weight: 400;
}
.arro-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.arro-btn[hidden] { display: none; }
.arro-q .arro-checkbox-row input { flex: none; }

/* File picker (careers) */
.arro-file { display: block; }
.arro-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.arro-file .arro-drop { display: block; }
.arro-file input[type="file"]:focus-visible + .arro-drop { outline: 3px solid var(--arro-green-light); outline-offset: 2px; }
.arro-file.has-file .arro-drop { border-style: solid; border-color: var(--arro-green); background: var(--arro-green-tint); }
.arro-file .arro-drop b { display: block; }
.arro-file-meta { display: block; margin-top: 6px; font-size: 13px; color: var(--arro-muted); }
.arro-drop svg { color: var(--arro-green); margin: 0 auto 6px; display: block; }
.arro-btn-link { border: 0; background: none; padding: 6px 0 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--arro-red); cursor: pointer; }
.arro-file-name { display: block; margin-top: 4px; font-size: 14px; color: var(--arro-ink); word-break: break-word; }
.arro-progress-bar { height: 6px; border-radius: 6px; background: #e6e9e7; overflow: hidden; max-width: 280px; margin: 14px auto 0; }
.arro-progress-bar span { display: block; height: 100%; width: 0; background: var(--arro-green); transition: width .2s; }

/* ---------------- Mobile ---------------- */
@media (max-width: 560px) {
  .arro-q.arro-modal { padding: 0; align-items: stretch; }
  .arro-panel { max-width: none; border-radius: 0; min-height: 100%; margin: 0; }
  .arro-progress-meta { padding: 13px 58px 0 20px; }
  .arro-step { padding: 12px 20px 22px; }
  .arro-result { padding: 34px 20px 28px; }
  .arro-q .arro-title { font-size: 23px; }
  .arro-btn { padding: 12px 18px; font-size: 15px; letter-spacing: .4px; }
}