/* 問い合わせフォーム(/support/ の #contact)。色・余白は、トークンで指定する */
.contact__notice {
  padding: var(--space-3) var(--space-4);
  background: var(--color-soft);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
}

.contact__form {
  display: grid;
  gap: var(--space-6);
}

.contact__field {
  display: grid;
  gap: var(--space-2);
}

.contact__field > label,
.contact__field > legend {
  font-weight: var(--font-weight-bold);
}

.contact__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* 16px 以上にして、iOS の入力時の自動ズームを防ぐ */
.contact__input,
.contact__select,
.contact__textarea {
  width: 100%;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
}

.contact__textarea {
  min-height: 10rem;
  resize: vertical;
}

/* 入力の誤り。色だけでなく、破線の枠と、「エラー:」の文でも示す */
.contact__input[aria-invalid="true"],
.contact__select[aria-invalid="true"],
.contact__textarea[aria-invalid="true"] {
  border-style: dashed;
}

.contact__error {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.contact__count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.contact__count--over {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.contact__check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.contact__check input {
  flex: none;
  width: var(--tap-size);
  height: var(--tap-size);
  margin: 0;
}

.contact__check label {
  padding-top: var(--space-2);
}

.contact__env-preview {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.contact__privacy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.contact__status {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.contact__status:empty {
  display: none;
}

.contact__status--error {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ボット用の罠の欄。人には見せず、キーボードでも、読み上げでも、届かない(画面の外に置く) */
.contact__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__done {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}