/* Relay Forms, as a respondent sees them (D114). Tokens from @rootos/ui. */

.fq-form { display: grid; gap: 18px; max-width: 640px; }
.fq-title { margin: 0; font-size: 1.4rem; }
.fq-intro { margin: 0; color: var(--text-dim); line-height: 1.5; }
.fq-heading { margin: 14px 0 0; font-size: 1.05rem; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.fq-text { margin: 0; color: var(--text-dim); line-height: 1.5; }

.fq { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fq > label, .fq > legend { font-weight: 600; padding: 0; }
.fq-req { color: var(--bad); }
.fq-help { margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.fq input[type="text"], .fq input[type="email"], .fq input[type="tel"], .fq input[type="number"],
.fq input[type="date"], .fq select, .fq textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 10px 12px; width: 100%; box-sizing: border-box; min-height: 44px;
}
.fq textarea { min-height: 88px; resize: vertical; }
.fq input:focus-visible, .fq select:focus-visible, .fq textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fq-choices { display: grid; gap: 6px; }
.fq-choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; min-height: 32px; }
.fq-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.fq-sensitive {
  margin: 0; font-size: 0.85rem; color: var(--text-dim);
  padding-left: 22px; position: relative;
}
.fq-sensitive::before {
  /* A padlock, drawn in the dim text colour: a plain square here read as a
     tick-box someone might try to click. */
  content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239fb0c0' stroke-width='1.6'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fq-problem { margin: 0; color: var(--bad); font-size: 0.9rem; min-height: 0; }
.fq-problem:empty { display: none; }
.fq.has-problem input, .fq.has-problem select, .fq.has-problem textarea { border-color: var(--bad); }
[data-item][hidden] { display: none !important; }