/* ============================================================
   TAIC — reusable components (buttons, form controls, field labels).
   Ported from the design-system component set; hover/focus states
   are pure CSS here (they were inline JS state in the prototype).
   ============================================================ */

/* ── Button ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-text); font-weight: 600; font-size: var(--text-ui);
  text-decoration: none; line-height: 1; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-lg); padding: 14px 26px; border: 1px solid transparent;
  transition: background var(--dur-med), color var(--dur-med), border-color var(--dur-med),
              transform var(--dur-med), gap var(--dur-med);
}
.btn svg { transition: transform var(--dur-med); }
.btn--sm { font-size: 14px; padding: 11px 20px; }

.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); color: var(--accent-contrast); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover svg { transform: translateX(3px); }

.btn--text { background: transparent; color: var(--accent); padding: 14px 4px; }
.btn--text:hover { gap: 13px; }

/* ── Form field ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase; color: var(--gray-700);
}
.field-label .req { color: var(--gold); }
.field-note { font-family: var(--font-text); font-size: 12px; color: var(--gray-500); margin-top: -2px; }

/* ── Controls (input · select · textarea) ───────────────── */
.control {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-size: var(--text-ui); font-family: var(--font-text); color: var(--text-primary);
  background: var(--surface-raised);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none;
}
.control:focus { border-color: var(--gold); box-shadow: var(--shadow-focus); }

textarea.control { resize: vertical; min-height: 96px; line-height: 1.6; }

select.control {
  padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface-raised)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 15px center;
}