/* =========================================================
   Filament — AI Readiness Survey (brutalist, matches the site)
   Loaded AFTER styles-v4.css. Reuses --paper/--ink/--amber/--glow,
   --font/--mono, .eyebrow, .btn, header & footer.
   ========================================================= */

.survey {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(18px, 4vw, 40px) clamp(80px, 10vw, 130px);
}

/* ---- Intro ---- */
.survey-intro { margin-bottom: clamp(40px, 6vw, 72px); }
.survey-title {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-size: clamp(30px, 5vw, 58px);
  margin: clamp(16px, 2.5vw, 22px) 0 clamp(16px, 2vw, 22px);
  color: var(--ink);
}
.survey-lede {
  font-family: var(--mono);
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.65;
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}
.survey-meta {
  display: inline-block;
  margin-top: clamp(18px, 2.5vw, 26px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--amber);
  border: var(--line) solid var(--ink);
  padding: 9px 14px;
}

/* ---- Sections ---- */
.survey-section { margin-top: clamp(48px, 7vw, 80px); }
.survey-section .eyebrow { margin-bottom: clamp(8px, 1.5vw, 14px); }
.survey-section-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #4a443b;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

/* ---- Question ---- */
.q { margin-top: clamp(26px, 3.5vw, 40px); }
.q-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.q-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--glow);
  flex: 0 0 auto;
}
.q-text { flex: 1 1 auto; min-width: 0; }
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 2px solid #4a443b;
  color: #4a443b;
  align-self: center;
}

/* ---- Choice options (radio / checkbox) ---- */
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; cursor: pointer; display: inline-flex; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-box {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
  padding: 11px 15px;
  border: var(--line) solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  transition: background 80ms, color 80ms;
}
.opt input:checked + .opt-box { background: var(--amber); }
.opt input:focus-visible + .opt-box { outline: 3px solid var(--glow); outline-offset: 2px; }
.opt:hover .opt-box { background: var(--paper); }
.opt input:checked + .opt-box:hover { background: var(--amber); }

/* ---- Textarea ---- */
.q textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-2);
  border: var(--line) solid var(--ink);
  padding: 14px 15px;
  min-height: 116px;
  resize: vertical;
}
.q textarea:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.q textarea::placeholder { color: #6b6457; }

/* ---- Single-line text / email inputs ---- */
.q input[type="text"],
.q input[type="email"] {
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-2);
  border: var(--line) solid var(--ink);
  padding: 13px 15px;
}
.q input[type="text"]:focus-visible,
.q input[type="email"]:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.q input::placeholder { color: #6b6457; }

/* Two fields side-by-side (stacks on narrow screens) */
.field-row { display: flex; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap; }
.field-row .field { flex: 1 1 280px; min-width: 0; }

/* Inline validation errors (checkbox groups + per-question) */
.group-error,
.q-error {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--amber);
  border: 2px solid var(--ink);
  padding: 6px 10px;
  margin-top: 10px;
}
.group-error.is-shown,
.q-error.is-shown { display: inline-block; }

/* Error state on the offending control */
.q.has-error input[type="text"],
.q.has-error input[type="email"],
.q.has-error textarea { outline: 3px solid var(--glow); outline-offset: 0; }

/* ---- Submit ---- */
.survey-submit { margin-top: clamp(44px, 6vw, 72px); }
.survey-error {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--amber);
  border: var(--line) solid var(--ink);
  padding: 10px 14px;
  margin: 16px 0 0;
}
.survey-error.is-shown { display: block; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ---- Thank-you state ---- */
.survey-form.is-hidden,
.survey-intro.is-hidden { display: none; }
.survey-thanks { display: none; }
.survey-thanks.is-visible { display: block; }
.thanks-box {
  border: var(--line) solid var(--ink);
  background: var(--amber);
  padding: clamp(28px, 5vw, 52px);
}
.thanks-box h2 {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.0;
  margin: 0 0 16px;
  color: var(--ink);
}
.thanks-box p {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
  color: var(--ink);
}