/* Unified Form System (Phase 3 Overhaul) — TASTEOME
   新規 form 要素は .form-input + .form-select + .form-textarea + .form-field を使う。
   既存 .sb-search / .tl-search / .fc-input-row input は Phase 5 で段階 migrate。 */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.form-label {
  font-family: var(--t-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t-fg-soft);
  letter-spacing: 0.02em;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-r-md);
  padding: 0.55rem 0.85rem;
  color: var(--t-fg);
  font-family: var(--t-font-sans);
  font-size: 0.9rem;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--t-trans-fast), background var(--t-trans-fast);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--t-dim);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--t-border-hover);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--t-accent);
  background: var(--t-bg-elev-2);
}

.form-textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  /* hardcode-ok: data-URI SVG 内は var() 不可 (select arrow、 accent #8a8fa3 と同値) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%238a8fa3' d='M3 5l3 3 3-3z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.8rem;
  padding-right: 2rem;
}

.form-help {
  font-size: 0.72rem;
  color: var(--t-muted);
  letter-spacing: 0.02em;
}

.form-error { color: var(--t-cog); }